bonus
/
hb_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时监测增加二级弹框

This commit is contained in:
BianLzhaoMin 2025-10-17 13:32:43 +08:00
parent 2ae475daee
commit d74f33795d
2 changed files with 416 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

363
js/pages/index/indexAjax.js
View File

@ -1,77 +1,156 @@
var table;
const bidCode = parent.$("#bidPro").val();
layui.use(["layer", "element", "table"], function () {
element = layui.element;
layer = layui.layer;
laydate = layui.laydate;
table = layui.table;
});
/* 工程简介 */
function loadProBrief(montageParam) {
const url = commonUrl + 'screen/largeScreen/xcIndex/getProDetails?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data.data);
} else if (result.code === 500) {
console.error('工程简介：' + result.msg);
const url =
commonUrl +
"screen/largeScreen/xcIndex/getProDetails?params=" +
montageParam;
ajaxRequestGet(
url,
"GET",
true,
function () {},
function (result) {
if (result.code === 200) {
setData(result.data.data);
} else if (result.code === 500) {
console.error("工程简介：" + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
setData(null);
}, aqEnnable);
},
aqEnnable
);
// 项目简介赋值
function setData(data) {
let proBrief = '暂无简介', html = '';
let proBrief = "暂无简介",
html = "";
let proImgList = [];
if (data) {
proBrief = data.proBrief ? data.proBrief : '暂无简介'
proBrief = data.proBrief ? data.proBrief : "暂无简介";
proImgList = data.fileData;
}
if (proImgList && proImgList.length > 0) {
$.each(proImgList, function (index, item) {
html += '<div><img src="' + item.base64Url + '"></div>'
})
html += '<div><img src="' + item.base64Url + '"></div>';
});
} else {
html += '<div><img src="../../img/back/back.png"></div>'
html += '<div><img src="../../img/back/back.png"></div>';
}
$('#img-carousel').empty().append(html);
$('#pro-desc p').html(proBrief);
$("#img-carousel").empty().append(html);
$("#pro-desc p").html(proBrief);
// 渲染 - 图片轮播
carousel.render({
elem: '#ID-carousel-demo-image',
width: '900px',
height: '360px',
interval: 3000
elem: "#ID-carousel-demo-image",
width: "900px",
height: "360px",
interval: 3000,
});
}
}
/* 实时监测 */
function loadRealMonitor(montageParam) {
const url = commonUrl + 'screen/largeScreen/xcIndex/getProJcData?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('实时监测' + result.msg);
const url =
commonUrl +
"screen/largeScreen/xcIndex/getProJcData?params=" +
montageParam;
ajaxRequestGet(
url,
"GET",
true,
function () {},
function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error("实时监测" + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
setData(null);
}, aqEnnable);
},
aqEnnable
);
/* 实时检测赋值 */
function setData(data) {
console.log(data)
console.log(data);
if (data && data.length > 0) {
$("#real-time-monitor").empty();
$.each(data, function (index, item) {
let div=" <div class=\"layout monitor-data\"> <p><span id=\"wd\">"
+item.val+"</span><span>"+item.unit+"</span></p><p>"+item.modelName+"</p>"+
let div =
' <div class="layout monitor-data" data-id="' +
item.modelName +
'"> <p><span id="wd">' +
item.val +
"</span><span>" +
item.unit +
"</span></p><p>" +
item.modelName +
"</p>" +
" <div id='logo' class=\"monitor-icon\"></div>";
$("#real-time-monitor").append(div);
// 为每个monitor-data盒子添加点击事件
$("#real-time-monitor .monitor-data")
.off("click")
.on("click", function () {
var dataId = $(this).attr("data-id");
console.log("点击的monitor-data的data-id:", dataId);
// 您可以在这里添加其他需要执行的逻辑
layer.open({
type: 1,
title: "历史记录", //显示标题栏
closeBtn: 1,
area: ["90%", "90%"],
id: "HISTORY_layui", //设定一个id，防止重复弹出
resize: false,
// btn: ['确定'],
btnAlign: "c",
moveType: 0, //拖拽模式，0或者1
skin: "layui-layer-molv",
content: $("#divDialog"),
success: function (layero) {
// initHistory();
initDialogTable();
$("th").css("color", "#000");
$(".layui-table").css("color", "#000");
},
yes: function (layero, index) {
layer.close("HISTORY_layui");
},
cancel: function () {
// 右上角关闭事件的逻辑
layer.close("HISTORY_layui");
},
end: function () {
$("th").css("color", "#fff");
$(".layui-table").css("color", "#fff");
},
});
});
// if (item.modelName === '温度') {
// $('#wd').html(item.val ? item.val : 0);
// } else if (item.modelName === '湿度') {
@ -85,26 +164,110 @@ function loadRealMonitor(montageParam) {
// } else if (item.modelName === 'pm10') {
// $('#pm10').html(item.val ? item.val : 0);
// }
})
});
}
}
}
function initDialogTable() {
const url =
commonUrl + "screen/largeScreen/constructionQuality/getHistoryList";
let times = "";
if ($("#ID-laydate-start-date-1").val() != "") {
times =
$("#ID-laydate-start-date-1").val() +
" - " +
$("#ID-laydate-end-date-1").val();
} else {
times = "";
}
historyTableIns = table.render({
elem: "#tableDialog",
url: url,
// skin: 'line',
page: true,
headers: {
decrypt: "decrypt",
Authorization: token,
},
where: {
roleCode: roleCode,
orgId: orgId,
userId: userId,
bidCode: bidCode,
deviceName: $("#deviceName").val(),
times: times,
},
cols: [
[
{ type: "numbers", title: "序号" }, // 添加序号列
// {field: 'areaName', align: 'center', title: '区域名称'},
{ field: "deviceName", align: "center", title: "设备名称" },
{ field: "moduleName", align: "center", title: "施工工艺" },
{ field: "changeVal", align: "center", title: "变化值" },
{ field: "val", align: "center", title: "检测值" },
{ field: "createTime", align: "center", title: "检测时间" },
// {field: 'isWarn', align: 'center', title: '是否告警'},
],
],
initComplete: function () {
// 在表格渲染完成后，重新渲染序号列
var that = this.elem.next();
var tool = that
.children(".layui-table-box")
.children(".layui-table-fixed")
.children(".layui-table-body")
.children(".layui-table");
tool.find("tr").each(function (index, item) {
$(this)
.find('td[data-field="LAY_TABLE_INDEX"]')
.text(index + 1);
});
},
done: function (res, curr, count, origin) {
// console.log(res);
$("[data-field='isWarn']")
.children()
.each(function () {
if ($(this).text() == "0") {
$(this).text("未告警");
} else if ($(this).text() == "1") {
$(this).text("告警");
}
});
},
page: true, //开启分页
loading: true, //数据加载中。。。
limits: [5, 10, 20, 100],
limit: 7,
});
}
/* 项目风险 */
function loadProRisk(montageParam) {
const url = commonUrl + 'screen/largeScreen/xcIndex/getProRisk?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('项目风险' + result.msg);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
}, aqEnnable);
const url =
commonUrl +
"screen/largeScreen/xcIndex/getProRisk?params=" +
montageParam;
ajaxRequestGet(
url,
"GET",
true,
function () {},
function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error("项目风险" + result.msg);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
},
aqEnnable
);
/* 项目风险赋值 */
function setData(data) {
@ -114,25 +277,35 @@ function loadProRisk(montageParam) {
/* 项目进度 */
function loadProProgress(montageParam) {
const url = commonUrl + 'screen/largeScreen/xcIndex/getProcess?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('项目进度:' + result.msg);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
}, aqEnnable);
const url =
commonUrl +
"screen/largeScreen/xcIndex/getProcess?params=" +
montageParam;
ajaxRequestGet(
url,
"GET",
true,
function () {},
function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error("项目进度:" + result.msg);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
},
aqEnnable
);
/* 项目进度赋值 */
function setData(data) {
if (data) {
$('#planStartTime').html(data.planStartTime);
$('#planEndTime').html(data.planEndTime);
$("#planStartTime").html(data.planStartTime);
$("#planEndTime").html(data.planEndTime);
initEchartsTwo(data.value2, data.value);
}
}
@ -140,27 +313,41 @@ function loadProProgress(montageParam) {
/* 项目成本 */
function loadProCost(montageParam) {
const url = commonUrl + 'screen/largeScreen/xcIndex/getProMoney?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('项目成本:' + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
}, aqEnnable);
const url =
commonUrl +
"screen/largeScreen/xcIndex/getProMoney?params=" +
montageParam;
ajaxRequestGet(
url,
"GET",
true,
function () {},
function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error("项目成本:" + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
},
aqEnnable
);
function setData(data) {
if (data) {
let nameList = data.time && data.time.length > 0 ? data.time : [];
let valueList = data.cost && data.cost.length > 0 ? data.cost : [];
initEchartsThree(nameList, valueList,parseFloat(data.proCost.replace('万','')));
}else{
initEchartsThree([], [],0);
initEchartsThree(
nameList,
valueList,
parseFloat(data.proCost.replace("万", ""))
);
} else {
initEchartsThree([], [], 0);
}
}
}

227
pages/index/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/index/index.css">
<link rel="stylesheet" href="../../css/consQuality/consQuality.css">
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<!-- <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css"> -->
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
@ -22,101 +23,155 @@
<title>首页</title>
</head>
<script type="text/javascript">
let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
// watermark.load({ watermark_txt: text });
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
// watermark.load({ watermark_txt: text });
</script>
<body>
<div id="main-box" class="layout">
<div id="left-box">
<!-- 项目简介 -->
<div id="pro-introduct" class="layout">
<div class="layui-carousel" id="ID-carousel-demo-image">
<div id="img-carousel" carousel-item>
<div id="main-box" class="layout">
<div id="left-box">
<!-- 项目简介 -->
<div id="pro-introduct" class="layout">
<div class="layui-carousel" id="ID-carousel-demo-image">
<div id="img-carousel" carousel-item>
</div>
</div>
<div id="pro-desc">
<p></p>
</div>
</div>
<div id="pro-desc">
<p></p>
</div>
<div id="right-box" class="layout">
<div id="real-time-monitor" class="layout">
<div class="layout monitor-data">
<p><span id="wd">0</span><span>℃</span></p>
<p>温度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="sd">0</span><span>%</span></p>
<p>湿度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="zs">0</span><span>分贝</span></p>
<p>噪声</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="gz">0</span><span>kwh</span></p>
<p>光照</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="pm2">0</span><span>μg/m³</span></p>
<p>PM2.5</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="pm10">0</span><span>μg/m³</span></p>
<p>PM10</p>
<div class="monitor-icon"></div>
</div>
</div>
<div id="pro-risk">
<table>
<!-- <tr>-->
<!-- <td colspan="6" id="weekDate">周风险</td>-->
<!-- </tr>-->
<tr>
<td>名称/风险等级</td>
<td>二级</td>
<td>三级</td>
<td>四级</td>
<td>五级</td>
<td>总数</td>
</tr>
<tr>
<td>
<p>本周风险 </p>
<p id="weekDates"> </p>
</td>
<td id="twoRiskNum">0</td>
<td id="threeRiskNum">0</td>
<td id="fourRiskNum">0</td>
<td id="fiveRiskNum">0</td>
<td id="totalRiskNum">0</td>
</tr>
<tr>
<td>
<p>当日站班会 </p>
<p id="today"> (2024-06-18) </p>
</td>
<td id="twoClassNum">0</td>
<td id="threeClassNum">0</td>
<td id="fourClassNum">0</td>
<td id="fiveClassNum">0</td>
<td id="totalClassNum">0</td>
</tr>
</table>
</div>
<div id="pro-progress" class="layout">
<div id="pro-progress-echarts"></div>
</div>
<div id="pro-cost"></div>
</div>
</div>
<div style="display: none" id="divDialog" class="divDialog">
<div style="width: 100%;height: 100%;">
<form class="layui-form " onsubmit="return false">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期范围</label>
<div class="layui-inline" id="ID-laydate-rangeLinked">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" readonly
class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" readonly
class="layui-input" placeholder="结束日期">
</div>
</div>
</div>
<!-- <div class="layui-inline">
<label class="layui-form-label">时间：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="HH:mm:ss">
</div>
</div> -->
<div class="layui-inline">
<label class="layui-form-label">设备名称：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="deviceName" placeholder="设备名称" maxlength="20">
</div>
</div>
<!-- <div class="layui-inline">
<label class="layui-form-label">区域：</label>
<div class="layui-input-inline">
<select lay-search id="region">
</select>
</div>
</div> -->
<div class="layui-inline">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="initHistory()" lay-submit
lay-filter="demo-table-search">查询</button>
</div>
</div>
</div>
</form>
<div style="width: 100%;height: 85%;overflow: auto;">
<table id="tableDialog" lay-filter="tableDialog"></table>
</div>
</div>
</div>
<div id="right-box" class="layout">
<div id="real-time-monitor" class="layout">
<div class="layout monitor-data">
<p><span id="wd">0</span><span>℃</span></p>
<p>温度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="sd">0</span><span>%</span></p>
<p>湿度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="zs">0</span><span>分贝</span></p>
<p>噪声</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="gz">0</span><span>kwh</span></p>
<p>光照</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="pm2">0</span><span>μg/m³</span></p>
<p>PM2.5</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="pm10">0</span><span>μg/m³</span></p>
<p>PM10</p>
<div class="monitor-icon"></div>
</div>
</div>
<div id="pro-risk">
<table>
<!-- <tr>-->
<!-- <td colspan="6" id="weekDate">周风险</td>-->
<!-- </tr>-->
<tr>
<td>名称/风险等级</td>
<td>二级</td>
<td>三级</td>
<td>四级</td>
<td>五级</td>
<td>总数</td>
</tr>
<tr>
<td> <p>本周风险 </p>
<p id="weekDates"> </p>
</td>
<td id="twoRiskNum">0</td>
<td id="threeRiskNum">0</td>
<td id="fourRiskNum">0</td>
<td id="fiveRiskNum">0</td>
<td id="totalRiskNum">0</td>
</tr>
<tr>
<td>
<p>当日站班会 </p>
<p id="today"> (2024-06-18) </p>
</td>
<td id="twoClassNum">0</td>
<td id="threeClassNum">0</td>
<td id="fourClassNum">0</td>
<td id="fiveClassNum">0</td>
<td id="totalClassNum">0</td>
</tr>
</table>
</div>
<div id="pro-progress" class="layout">
<div id="pro-progress-echarts"></div>
</div>
<div id="pro-cost"></div>
</div>
</div>
</body>
<script src="../../js/pages/index/indexAjax.js" type="text/javascript"></script>
<script src="../../js/pages/index/indexEcharts.js" type="text/javascript"></script>
<script src="../../js/pages/index/index.js" type="text/javascript"></script>
</html>
</html>