<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<meta name="viewport" content="initial
-scale=1.0, maximum
-scale=1.0, user
-scalable=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://code.
jquery.com/
jquery-3.6.0.min.
js"></script>
<!
-- <script src="./
js/mui.min.
js"></script>
-->
<!
-- <script src="./
js/flexble.
js"></script>
-->
</head>
<style>
/*下载页面*/
.BDS_state{
background
-color: #00ff00;
position: absolute;
right: 0.58rem;
border
-radius: 0.2rem 0rem;
}
.BDS_states{
background
-color: red;
position: absolute;
right: 0.58rem;
border
-radius: 0.2rem 0rem;
}
.u4 {
width: 4.33rem;
display: flex;
align
-items: center;
flex
-direction: column;
justify
-content: space
-around;
text
-align: center;
position: fixed;
top: 0.15rem;
left: 0rem;
font
-size: 0.46rem;
}
.p4{
color: #8c00ff;
font
-family: "微软雅黑";
font
-weight: 600;
font
-size: 0.55rem;
}
.BtnT {
bottom:0.6rem;
position: fixed;
box
-shadow: 1px 5px 9px 0px #484b5157;
color: white;
background
-color: #008cf3;
border: none;
border
-radius: 0.08rem;
font
-size: 0.45rem;
height: 1.6rem;
width: 4rem;
}
.u2 {
box
-shadow: 0rem 0.05rem 0.05rem #7c7c7c2e;
height: 2.02rem;
background
-color: #ffffff;
top: 0;
position: fixed;
width: 100%;
display: flex;
flex
-direction: row;
justify
-content: center;
}
/* 顶部搜索栏 */
.InputDatas {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 12px 15px;
display: flex;
border
-bottom: 1px solid #e0e0e0;
height: 60px;
background
-color: white;
width: 100%;
flex
-direction: row;
align
-items: center;
justify
-content: center;
z
-index: 100;
box
-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.AllDatas {
flex: 1;
padding: 8px 15px;
font
-size: 16px;
border
-radius: 8px;
border: 1px solid #ddd;
background
-color: #f8f8f8;
color: #555;
outline: none;
transition: border
-color 0.3s;
}
.AllDatas:focus {
border
-color: #008cf3;
}
#resultCount {
margin
-left: 10px;
font
-size: 14px;
color: #777;
min
-width: 60px;
}
/* 中间滚动区域 */
.u4Scoll {
position: absolute;
top: 60px; /* 等于InputDatas的高度 */
bottom: 92px; /* 等于BtnTR的高度 + 底部间距 */
left: 0;
right: 0;
overflow
-y: auto;
-webkit
-overflow
-scrolling: touch;
padding: 10px 15px;
background
-color: #f9f9f9;
}
.BDALL {
width: 100%;
display: flex;
flex
-direction: column;
}
.BDSS {
box
-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
font
-size: 16px;
border
-radius: 10px;
padding: 15px;
background
-color: white;
margin
-bottom: 12px;
transition: transform 0.2s, box
-shadow 0.2s;
}
.BDSS:hover {
transform: translateY(
-2px);
box
-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.BDS_state, .BDS_states {
display: inline
-block;
padding: 4px 8px;
border
-radius: 4px;
font
-size: 12px;
color: white;
margin
-bottom: 8px;
}
.BDS_state {
background
-color: #4CAF50; /* 正常状态 */
}
.BDS_states {
background
-color: #F44336; /* 异常状态 */
}
.BDS_ID, .BDS_time, .BDS_IDP {
margin
-bottom: 6px;
color: #555;
}
.BDS_stateWhy {
display: flex;
margin
-top: 8px;
padding
-top: 8px;
border
-top: 1px dashed #eee;
}
.BDS_decser {
color: #888;
min
-width: 40px;
}
.BDS_decserTexts {
color: #333;
flex: 1;
}
/* 底部按钮 */
.BtnTR {
position: fixed;
bottom: 68px;
left: 50%;
transform: translateX(
-50%);
height: 50px;
width: 200px;
background
-color: #008cf3;
border: none;
color: white;
font
-size: 18px;
border
-radius: 8px;
font
-weight: 500;
box
-shadow: 0 4px 12px rgba(0, 140, 243, 0.3);
z
-index: 100;
cursor: pointer;
transition: background
-color 0.3s, transform 0.2s;
}
.BtnTR:hover {
background
-color: #0078d7;
}
.BtnTR:active {
transform: translateX(
-50%) scale(0.98);
}
/* 修复后的底部导航栏样式
- 提高选择器优先级 */
.fliale {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border
-top: 1px solid #e6e6e6;
width: 100%;
height: 60px;
display: flex;
flex
-direction: row;
justify
-content: space
-around;
align
-items: center;
background
-color: white;
z
-index: 200;
box
-shadow: 0
-2px 5px rgba(0, 0, 0, 0.05);
}
.fliale button {
flex: 1;
height: 100%;
font
-size: 16px;
border: none;
background
-color: white;
display: flex;
align
-items: center;
justify
-content: center;
cursor: pointer;
transition: background
-color 0.3s;
position: relative;
color: #333;
}
/* 提高选择器优先级
- 这是关键修复 */
.fliale button#NotJob.active,
.fliale button#GoodJob.active {
background
-color: #008cf3 !important;
color: white !important;
}
.countJia, .countJan {
display: inline
-flex;
align
-items: center;
justify
-content: center;
border
-radius: 50%;
min
-width: 22px;
height: 22px;
font
-size: 12px;
margin
-left: 5px;
padding: 0 5px;
}
.countJia {
background
-color: #F44336;
color: white;
}
.countJan {
background
-color: #4CAF50;
color: white;
}
/* 未完成页面样式 */
.u2 {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background
-color: white;
display: flex;
align
-items: center;
padding: 0 15px;
border
-bottom: 1px solid #eee;
z
-index: 100;
}
.p2 {
font
-size: 16px;
color: #777;
}
.p4 {
font
-size: 18px;
font
-weight: 500;
margin
-left: 8px;
color: #333;
}
.u3 {
position: absolute;
top: 60px;
bottom: 60px;
left: 0;
right: 0;
overflow
-y: auto;
-webkit
-overflow
-scrolling: touch;
padding: 15px;
}
.C1 {
box
-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e0e0e0;
margin
-bottom: 10px;
background
-color: white;
border
-radius: 8px;
height: 70px;
display: flex;
flex
-direction: row;
align
-items: center;
justify
-content: space
-between;
padding: 0 20px;
transition: transform 0.2s, box
-shadow 0.2s;
}
.C1:hover {
transform: translateY(
-2px);
box
-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.p1 {
font
-size: 16px;
color: #333;
}
.InpO {
height: 20px;
width: 20px;
cursor: pointer;
}
input[type="radio"] {
-webkit
-appearance: none; /* 用于WebKit浏览器，如Chrome, Safari */
-moz
-appearance: none; /* 用于Firefox */
appearance: none; /* 标准属性，目前支持还不够全面 */
/* 然后可以自定义样式，比如设置边框、背景等 */
border: none; /* 移除边框 */
/* 或者设置一个自定义的边框样式，但用户要求隐藏，所以这里我们设置none */
}
.SVGImg {
width: 7rem;
padding
-left: 0.2rem;
}
.p3 {
position: absolute;
top: 13.4rem;
font
-size: 0.60rem;
color: #c0c0c0;
}
/* 开始扫描按钮 */
#start
-scan
-button {
position: absolute;
top: 10px;
right: 15px;
height: 40px;
width: 120px;
background
-color: #008cf3;
border: none;
color: white;
font
-size: 16px;
border
-radius: 8px;
z
-index: 101;
box
-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: background
-color 0.3s;
}
#start
-scan
-button:hover {
background
-color: #0078d7;
}
/* 状态选择弹窗 */
.u11 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background
-color: rgba(0, 0, 0, 0.5);
display: flex;
align
-items: center;
justify
-content: center;
z
-index: 1000;
}
.btns {
background: white;
padding: 30px;
border
-radius: 15px;
text
-align: center;
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
width: 80%;
max
-width: 300px;
/* 确保居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
}
.btns button {
display: block;
width: 100%;
padding: 15px;
margin: 10px 0;
font
-size: 18px;
border: none;
border
-radius: 8px;
cursor: pointer;
transition: background
-color 0.3s;
}
#btnYes {
background
-color: #4CAF50;
color: white;
}
#btnNo {
background
-color: #F44336;
color: white;
}
/* 异常备注弹窗 */
.u12 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background
-color: rgba(0, 0, 0, 0.5);
display: flex;
align
-items: center;
justify
-content: center;
z
-index: 1000;
}
.u12
-content {
background: white;
padding: 20px;
border
-radius: 15px;
width: 90%;
max
-width: 400px;
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
/* 确保居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
}
#myTextarea {
width: 100%;
height: 150px;
padding: 12px;
font
-size: 16px;
border: 1px solid #ddd;
border
-radius: 8px;
margin
-bottom: 15px;
resize: none;
}
.u14 {
display: flex;
justify
-content: space
-between;
}
.u14 button {
padding: 12px 25px;
border: none;
border
-radius: 8px;
font
-size: 16px;
cursor: pointer;
transition: background
-color 0.3s;
}
.btn10 {
background
-color: #008cf3;
color: white;
}
.btn11 {
background
-color: #e0e0e0;
color: #333;
}
</style>
<body>
<div class="conter"></div>
</body>
<script>
let data
Jsons = {
"Code": 200,
"Message": "成功",
"Task": [
{
"Name": "每周点检22.txt",
"Areas": {
"0": {
"id": 6,
"factory": "村田一厂",
"building": "D栋",
"floor": "2F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-05T16:28:27",
"card_id": "0423AA12361E90",
"card_bind_time": "2025
-08
-06T15:09:24",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"1": {
"id": 7,
"factory": "村田一厂",
"building": "D栋",
"floor": "1F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-05T16:43:38",
"card_id": null,
"card_bind_time": null,
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"2": {
"id": 8,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位1",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-06T13:28:04",
"card_id": null,
"card_bind_time": null,
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"3": {
"id": 9,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位3",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-06T13:28:42",
"card_id": "0424AA12361E90",
"card_bind_time": "2025
-08
-06T15:10:42",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"4": {
"id": 10,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位4",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-06T13:28:57",
"card_id": null,
"card_bind_time": null,
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"5": {
"id": 11,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "6s",
"add_time": "2025
-08
-06T13:29:37",
"card_id": null,
"card_bind_time": null,
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
}
},
"Status": 1,
"Type": 1,
"GeneratedTime": "2025
-09
-22T12:29:23",
"DownLoadTime": "2025
-09
-22T13:09:38.2965
06+08:00",
"FinishTime": "0001
-01
-01T00:00:00"
},
{
"Name": "每日点检22.txt",
"Areas": {
"0": {
"id": 2,
"factory": "村田一厂",
"building": "A栋",
"floor": "2F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "5s",
"add_time": "2025
-07
-17T13:43:00",
"card_id": "0424AA12361E90",
"card_bind_time": "2025
-09
-05T16:02:11",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"1": {
"id": 8,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位1",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-06T13:28:04",
"card_id": "042AAA12361E90",
"card_bind_time": "2025
-09
-05T16:
03:
06",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"2": {
"id": 4,
"factory": "村田一厂",
"building": "A栋",
"floor": "1F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "5s",
"add_time": "2025
-07
-17T13:43:00",
"card_id": "0428AA12361E90",
"card_bind_time": "2025
-09
-05T16:02:41",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
},
"3": {
"id": 7,
"factory": "村田一厂",
"building": "D栋",
"floor": "1F",
"area": "电气室",
"point": "点位2",
"inside": "内",
"unit": "5s",
"add_time": "2025
-08
-05T16:43:38",
"card_id": "0427AA12361E90",
"card_bind_time": "2025
-09
-05T16:02:59",
"newest_check_time": null,
"newest_check_state": null,
"newest_check_problem": null,
"newest_check_photo": null,
"description": null
}
},
"Status": 1,
"Type": 0,
"GeneratedTime": "2025
-09
-22T12:29:23",
"DownLoadTime": "2025
-09
-22T13:09:38.2965
06+08:00",
"FinishTime": "0001
-01
-01T00:00:00"}]}
// 全局更新计数函数
function updateCounts() {
$('.countJia').text(data
Jsons.length);
$('.countJan').text(data
JsonsErr.length);
console.log("计数已更新", "未完成:" + data
Jsons.length + " 已完成:" + data
JsonsErr.length);
}
function initPage() {
// 添加底部导航栏
$(".conter").append(
'<div class="fliale">' +
'<button type="button" id="NotJob" class="active">未完成<span class="countJia">' + data
Jsons.length + '</span></button>' +
'<button type="button" id="GoodJob">已完成<span class="countJan">' + data
JsonsErr.length + '</span></button>' +
'</div>'
);
// 初始显示未完成页面
showUncompletedPage();
// 导航栏点击事件
$("#NotJob").on("click", function() {
showUncompletedPage();
$(this).addClass("active");
$("#GoodJob").removeClass("active");
});
$("#GoodJob").on("click", function() {
showCompletedPage();
$(this).addClass("active");
$("#NotJob").removeClass("active");
});
}
function showUncompletedPage() {
// 清除现有内容
$(".conter").find(".u2, .u3, .InputDatas, .u4Scoll, .BtnTR").remove();
// 添加上部用户信息
$(".conter").append(
'<div class="u2">' +
'<div class="u4">' +
'<p class="p2">当前巡检员</p>' +
'<p class="p4">' +
JsonDataSt.user + '</p>' +
'</div>' +
'</div>'
);
// 创建开始扫描按钮
createStartButton();
// 添加设备列表容器
$(".conter").append('<div class="u3" id="inputs
-container"></div>');
// 填充设备列表
$.each(data
Jsons, function(index, item) {
// 处理card_id为null或空的情况
let cardIdValue = item.card_id;
// 检查card_id是否为null、undefined或空字符串
if (cardIdValue === null || cardIdValue === undefined || cardIdValue === "") {
cardIdValue = '1'; // 设置为默认值'1'
}
$("#inputs
-container").append(
'<div class="C1">' +
'<p class="p1">' + item.building + '
-' + item.floor + '
-' + item.area + '
-' + item.point + '
-' + item.inside + '
-' + item.unit +'</p>' +
'<input id="'+ item.id +'" class="InpO" type="radio" name="device" value="' + cardIdValue + '" />' +
'</div>'
);
});
// 阻止radio默认行为
$('input[type="radio"]').on('click', function(event) {
event.preventDefault();
$('input[type="radio"]').not(this).prop('checked', false);
$(this).prop('checked', !$(this).prop('checked'));
});
// 更新计数
updateCounts();
}
function showCompletedPage() {
// 清除现有内容
$(".conter").find(".u2, .u3, #start
-scan
-button, .InputDatas, .u4Scoll, .BtnTR").remove();
// 先删除所有可能存在的按钮
removeAllStartButtons();
// 添加搜索栏
$(".conter").append(
'<div class="InputDatas">' +
'<input class="AllDatas" id="searchInput" type="text" placeholder="输入搜索内容" value="" />' +
'<span id="resultCount">' + data
JsonsErr.length + '项</span>' +
'</div>'
);
// 添加滚动区域
$(".conter").append(
'<div class="u4Scoll" id="inputs
-Scoll">' +
'<div class="BDALL"></div>' +
'</div>');
// 添加提交按钮
$(".conter").append('<button class="BtnTR">提交任务</button>');
// 填充已完成任务
$.each(data
JsonsErr, function(index, item) {
let statusClass = item.status == "OK" ? "BDS_state" : "BDS_states";
let statusText = item.status == "OK" ? "正常" : "异常";
let msg = item.msg || "无";
$(".BDALL").append(
'<div class="BDSS" id="'+ item.id +'">' +
'<div class="' + statusClass + '" data
-Text="' + statusText + '">' + statusText + '</div>' +
'<div class="BDS_stateA">' +
'<P class="BDS_ID">ID:' + item.cardid + '</P>' +
'<p class="BDS_IDP">区域:' + item.pTagRedName + '</p>' +
'<P class="BDS_time">时间:' + item.checkTime + '</P>' +
'<div class="BDS_stateWhy">' +
'<P class="BDS_decser">备注:</P>' +
'<p class="BDS_decserTexts">' + msg + '</p>' +
'</div>' +
'</div>' +
'</div>'
);
});
// 搜索功能
$("#searchInput").on("input", function() {
let searchText = $(this).val().toLowerCase();
let count = 0;
$(".BDSS").each(function() {
let text = $(this).text().toLowerCase();
if (text.indexOf(searchText) >
-1) {
$(this).show();
count++;
} else {
$(this).hide();
}
});
$("#resultCount").text(count + "项");
});
}
</script>
</html>1.不改变页面布局得情况下优化界面。2.对data
json数据中的TASK:[{},{}]中的 {"Name": "每周点检22.txt","Areas": {}}{"Name": "每日点检22.txt","Areas": {},{更多...}}数据进行1.合并2.分类3.排序等。3.要给服务器后面或许会给客户端继续增加每月点检.txt或者每三个月点检.txt等系列数据留余地。
本文介绍了如何利用jQuery编写楼层导航效果。通过CSS定义样式，HTML构建结构，再结合jQuery JavaScript库实现页面元素的交互，达到楼层跳转并高亮显示的效果。
最低0.47元/天 解锁文章
扫一扫
2074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
