cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

告警管理

This commit is contained in:
sliang 2024-03-29 15:42:04 +08:00
parent da02d0a784
commit 3319400974
5 changed files with 282 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/towerAssInspect/towerAssInspect.css
View File

@ -164,6 +164,16 @@ body {
background: url("../../img/towerAssInspect/alarm.png") no-repeat 0 0 / 100% 100%; background: url("../../img/towerAssInspect/alarm.png") no-repeat 0 0 / 100% 100%;
} }
.connection{
padding: 5% 2% 2% 2%;
background: url("../../img/towerAssInspect/connection.png") no-repeat 0 0 / 100% 100%;
}
.normal{
padding: 5% 2% 2% 2%;
background: url("../../img/towerAssInspect/normal.png") no-repeat 0 0 / 100% 100%;
}
.detection{ .detection{
padding: 5% 2% 2% 2%; padding: 5% 2% 2% 2%;

21
js/pages/alarmMge/alarmMge.js
View File

@ -1,14 +1,11 @@
let layer,table; let layer,table,buildCheck;
const bidCode = parent.$('#bidPro').val(); const bidCode = parent.$('#bidPro').val();
layui.use(['layer','table'], function () { layui.use(['layer','table'], function () {
layer = layui.layer; layer = layui.layer;
table = layui.table; table = layui.table;
//选择单位下拉选
getSelectLists();
updateSelection();
//建管单位下拉选 //建管单位下拉选
getBuildLists(); getBuildLists();
}); });
function getBuildLists(){ function getBuildLists(){
@ -24,6 +21,10 @@ function getBuildLists(){
} }
$('#build').empty().append(html); $('#build').empty().append(html);
layui.form.render(); layui.form.render();
//选择单位下拉选
getSelectLists();
updateSelection();
} else if (result.code === 500) { } else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 }); layer.msg(result.msg, { icon: 2 });
} }
@ -56,6 +57,7 @@ function getSelect(data){
html += '<div class="item dark" id="'+data[i].id+'">'+data[i].name+'</div>' ; html += '<div class="item dark" id="'+data[i].id+'">'+data[i].name+'</div>' ;
} }
} }
buildCheck = data[0].id;
init(data[0].id); init(data[0].id);
$("#selection").append(html); $("#selection").append(html);
} }
@ -66,6 +68,7 @@ function updateSelection() {
$(this).removeClass("dark").addClass("bright"); // 点击的元素设置为 bright 类 $(this).removeClass("dark").addClass("bright"); // 点击的元素设置为 bright 类
var clickedId = $(this).attr('id'); // 获取被点击的 div 元素的 id 值 var clickedId = $(this).attr('id'); // 获取被点击的 div 元素的 id 值
console.log("选中的值为: " + clickedId); console.log("选中的值为: " + clickedId);
buildCheck = clickedId;
init(clickedId); init(clickedId);
}); });
} }
@ -93,9 +96,9 @@ function init(warnType){
{field: 'proName', title: '工程名称',align:'center'}, {field: 'proName', title: '工程名称',align:'center'},
{field: 'warnContent', title: '告警内容',align:'center'}, {field: 'warnContent', title: '告警内容',align:'center'},
{field: 'teamLeader', title: '班组长',align:'center'}, {field: 'teamLeader', title: '班组长',align:'center'},
{field: '', title: '操作',align:'center',templet:function(d){ // {field: '', title: '操作',align:'center',templet:function(d){
}}, // }},
]], ]],
initComplete: function () { initComplete: function () {
// 在表格渲染完成后，重新渲染序号列 // 在表格渲染完成后，重新渲染序号列
@ -110,3 +113,7 @@ function init(warnType){
} }
}) })
} }
function getQueryList(){
init(buildCheck)
}

310
js/pages/towerAssInspect/towerAssInspect.js
View File

@ -1,91 +1,261 @@
let layer,table; let layer,table,form;
let myChart = echarts.init(document.getElementById('tendency')); let myChart = echarts.init(document.getElementById('tendency'));
layui.use(['layer','table'], function () { const bidCode = parent.$('#bidPro').val();
layui.use(['layer','table','form'], function () {
layer = layui.layer; layer = layui.layer;
table = layui.table; table = layui.table;
init(); form = layui.form;
inits(); // 标段工程下拉选监听
initEchartsOne(); form.on('select(gt)', function (data) {
getDeviceList(data.value);
});
//杆塔下拉选
getGtLists();
}); });
function getGtLists(){
const url = commonUrl + "system/sys/select/getGtLists?bidCode="+ bidCode; // 杆塔url
ajaxRequest(url, "get", null , true, function () {
}, function (result) {
if (result.code === 200) {
let html = '';
if (result.data && result.data.length > 0) {
$.each(result.data, function (index, item) {
html += '<option value="' + item.gtId + '">' + item.name + '</option>'
})
}
$('#gt').empty().append(html);
layui.form.render();
// 设备列表
getDeviceList(result.data[0].gtId);
// updateSelection();
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
}, function (xhr) {
layer.msg(xhr, { icon: 2 });
});
}
function init(){ function getDeviceList(gtId){
var data = [ const params = {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "roleCode": roleCode,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "orgId": orgId,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "userId": userId,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "bidCode":bidCode,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "gtId":gtId
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, }
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, const url = commonUrl + "screen/largeScreen/towerAssInspect/getDeviceList?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+"&gtId="+gtId; // 设备列表url
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, let encryptStr = encryptCBC(JSON.stringify(params));
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, ajaxRequest(url, "get", null, true, function () {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, }, function (result) {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, let html = '';
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, if (result.code === 200) {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, if (result.data && result.data.length > 1) {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, $.each(result.data, function (index, item) {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, html += '<div class="device-list-device" style="cursor: pointer;" onclick="getInfo(\'' +item.deviceId+ '\')" >';
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, html +='<input value = "'+item.deviceId +'" style="display:none;" />';
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, if(item.type=="1"){
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'} html += '<div class="img-style normal"></div>';
]; }else if(item.type=="2"){
html += '<div class="img-style alarm"></div>';
}else if(item.type=="0"){
html += '<div class="img-style connection"></div>';
}
html += '<div class="device-list-font">'+ item.deviceName +'</div>';
html +='</div>';
})
getInfo(result.data[0].deviceId)
}else{
html += '<div style="color:red;">未找到关联设备</div>'
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
$('#deviceList').empty().append(html);
}, function (xhr) {
layer.msg(xhr, { icon: 2 });
});
}
//根据点击的设备去查询其他信息
function getInfo(deviceId){
//实时检测
getRealTimeDetection(deviceId);
//当日检测变化趋势
// getTrend(deviceId)
//实时告警
getRealTimeAlarmList(deviceId)
//历史记录
getHistoryList(deviceId)
}
function getRealTimeDetection(deviceId){
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode":bidCode,
"deviceId":deviceId
}
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+"&deviceId="+deviceId; // 设备列表url
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "get", null, true, function () {
}, function (result) {
let html = '';
if (result.code === 200) {
if (result.data && result.data.length > 1) {
$.each(result.data, function (index, item) {
if(item.dataType=="1"){
html +='<div class="detection-style detection-incline">';
html +='<div class="detection-style-font">';
html +='<div class="detection-style-font-top">倾斜检测</div>';
html +='<div class="detection-style-font-bot">倾角'+item.val +'</div>';
html +='</div>';
html +='</div>';
}else if(item.dataType=="2"){
html +='<div class="detection-style detection-tension">';
html +='<div class="detection-style-font">';
html +='<div class="detection-style-font-top">张力检测</div>';
html +='<div class="detection-style-font-bot">张力'+item.val +'</div>';
html +='</div>';
html +='</div>';
}else if(item.dataType=="3"){
html +='<div class="detection-style detection-crash">';
html +='<div class="detection-style-font">';
html +='<div class="detection-style-font-top">碰撞检测</div>';
html +='<div class="detection-style-font-bot">碰撞'+item.val +'</div>';
html +='</div>';
html +='</div>';
}
})
}else{
html += '<div style="color:red;">未找到关联设备</div>'
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
$('#detection').empty().append(html);
}, function (xhr) {
layer.msg(xhr, { icon: 2 });
});
}
function getTrend(deviceId){
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode":bidCode,
"deviceId":deviceId
}
const url = commonUrl + "screen/largeScreen/towerAssInspect/getTrend?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+"&deviceId="+deviceId; // 设备列表url
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "get", null, true, function () {
}, function (result) {
let html = '';
if (result.code === 200) {
if (result.data && result.data.length > 1) {
let xLabel =[];
let dataValue = [];
$.each(result.data, function (index, item) {
xLabel.push(item.time);
dataValue.push(item.changeVal);
});
initEchartsOne(xLabel,dataValue);
}else{
html += '<div style="color:red;">未找到关联设备</div>'
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
$('#deviceList').empty().append(html);
}, function (xhr) {
layer.msg(xhr, { icon: 2 });
});
}
function getRealTimeAlarmList(deviceId){
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeAlarmList"; // 建管单位url
table.render({ table.render({
elem: '#demo1', elem: '#demo1',
data: data, url: url,
skin: 'line', skin: 'line',
page: true, page: true,
headers:{
decrypt:"decrypt",
"Authorization":token
},
where: {
deviceId:deviceId
},
cols: [[ cols: [[
{field: 'id', title: '排名',align:'center'}, {type: 'numbers', title: '序号'}, // 添加序号列
{field: 'proName', title: '工程名称',align:'center'}, {field: 'warnContent', title: '告警内容',align:'center'},
{field: 'teamName', title: '班组名称',align:'center'}, {field: 'warnTime', title: '预警时间',align:'center'}
{field: 'teamLeader', title: '班组长',align:'center'}, ]],
{field: 'quality', title: '施工质量',align:'center'}, 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);
}
}) })
} }
function inits(){ function getHistoryList(deviceId){
var data = [ const url = commonUrl + "screen/largeScreen/towerAssInspect/getHistoryList"; // 建管单位url
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, table.render({
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, elem: '#demo2',
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, url: url,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, skin: 'line',
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, page: true,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, headers:{
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, decrypt:"decrypt",
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, "Authorization":token
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, },
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, where: {
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, deviceId:deviceId,
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, },
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, cols: [[
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, {type: 'numbers', title: '序号'}, // 添加序号列
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, {field: 'areaName', title: '区域名称',align:'center'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, {field: 'modeName', title: '检测点名称',align:'center'},
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'}, {field: 'val', title: '检测值',align:'center'},
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'} {field: 'thisChangeVal', title: '本次变化值',align:'center'},
]; {field: 'changeVal', title: '累计变化值',align:'center'},
table.render({ {field: 'updateTime', title: '检测时间',align:'center'},
elem: '#demo2', {field: 'isWarn', title: '状态',align:'center'}
data: data, ]],
skin: 'line', initComplete: function () {
page: true, // 在表格渲染完成后，重新渲染序号列
cols: [[ var that = this.elem.next();
{field: 'id', title: '排名',align:'center'}, var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
{field: 'proName', title: '工程名称',align:'center'}, tool.find("tr").each(function (index, item) {
{field: 'teamName', title: '班组名称',align:'center'}, $(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
{field: 'teamLeader', title: '班组长',align:'center'}, });
{field: 'quality', title: '施工质量',align:'center'}, },
]] done:function(res, curr, count, origin){
}) console.log(res);
}
})
} }
/* 变化趋势 */ /* 变化趋势 */
function initEchartsOne() { function initEchartsOne(xLabel,dataValue) {
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff'; let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; // let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42]; // let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
const tooltip = { const tooltip = {
show: true, show: true,
trigger: 'axis', trigger: 'axis',

4
pages/alarmMge/alarmMge.html
View File

@ -25,7 +25,7 @@
</div> </div>
<div class="right-box"> <div class="right-box">
<div class="alarm"> <div class="alarm">
<form class="layui-form "> <form class="layui-form " onsubmit="return false">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">建管单位：</label> <label class="layui-form-label">建管单位：</label>
@ -53,7 +53,7 @@
<div class="layui-inline"> <div class="layui-inline">
<div class="layui-col-xs12"> <div class="layui-col-xs12">
<button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button> <button class="layui-btn" onclick="getQueryList()">查询</button>
</div> </div>
</div> </div>
</div> </div>

80
pages/towerAssInspect/towerAssInspect.html
View File

@ -9,11 +9,10 @@
<link rel="stylesheet" href="../../css/towerAssInspect/towerAssInspect.css"> <link rel="stylesheet" href="../../css/towerAssInspect/towerAssInspect.css">
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css"> <link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script> <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script>
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script> <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../plugin/toolTip/mTips.js"></script> <script src="../../js/publics/public.js" type="text/javascript"></script>
<script src="../../js/publics/aes.js"></script> <script src="../../api/commonRequest.js" type="text/javascript"></script>
<script src="../../js/publics/sm3.js"></script> <script src="../../js/publics/aescbc.js"></script>
<script src="../../js/publics/echarts.js"></script> <script src="../../js/publics/echarts.js"></script>
<title>组塔检测</title> <title>组塔检测</title>
</head> </head>
@ -22,16 +21,16 @@
<div class="top-box"> <div class="top-box">
<!-- 基塔模型 --> <!-- 基塔模型 -->
<div class="top-box-left"> <div class="top-box-left">
<div class="img-style tower-model layui-form"> <div class="img-style tower-model">
<select > <div style="height: 10%;width: 100%;">
<option>1号塔基</option> <form class="layui-form layout">
<option>2号塔基</option> <select class="layui-form" lay-search id="gt" lay-filter="gt">
<option>3号塔基</option> </select>
</select> </form>
</div>
<div class="img-style model"> <div class="img-style model">
</div> </div>
</div> </div>
</div> </div>
@ -39,68 +38,21 @@
<div class="top-box-center"> <div class="top-box-center">
<!-- 设备列表 --> <!-- 设备列表 -->
<div class="top-box-center-top"> <div class="top-box-center-top">
<div class="img-style device-list"> <div class="img-style device-list" >
<div class="device-list-top"> <div class="device-list-top">
<div class="alarm-title"></div> 告警 <div class="alarm-title"></div> 告警
<div class="normal-title"></div> 正常 <div class="normal-title"></div> 正常
<div class="connection-title"></div> 掉线 <div class="connection-title"></div> 掉线
</div> </div>
<div class="device-list-bot"> <div class="device-list-bot" id="deviceList">
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
<div class="device-list-device">
<div class="img-style alarm"></div>
<div class="device-list-font">设备1</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 实时检测 --> <!-- 实时检测 -->
<div class="top-box-center-bot"> <div class="top-box-center-bot">
<div class="img-style detection"> <div class="img-style detection" id="detection">
<div class="detection-style detection-incline"> <!-- <div class="detection-style detection-incline">
<div class="detection-style-font"> <div class="detection-style-font">
<div class="detection-style-font-top">倾斜检测</div> <div class="detection-style-font-top">倾斜检测</div>
<div class="detection-style-font-bot">倾角30°</div> <div class="detection-style-font-bot">倾角30°</div>
@ -117,7 +69,7 @@
<div class="detection-style-font-top">碰撞检测</div> <div class="detection-style-font-top">碰撞检测</div>
<div class="detection-style-font-bot">碰撞正常</div> <div class="detection-style-font-bot">碰撞正常</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>