<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>智能机房管理平台-漏水</title>
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/detail-yghwls.css"/>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container">
|
|
<div class="jmkt-main">
|
|
<div class="layui-fluid">
|
<div class="pdgxq-m1 layui-row layui-col-space20">
|
<div class="layui-col-lg5 layui-col-md5">
|
<div class="pdgxq-m1-left pdgxq-m1-box" style="height: 730px">
|
<div class="pdgxq-H">
|
<h3><i></i>实时监控</h3>
|
</div>
|
|
<div class="pdgxq-group clearfix">
|
<div class="pdgxq-group-item jmkt-chuli">
|
<span id="warnState">无</span>报警状态
|
</div>
|
<div class="pdgxq-group-item jmkt-yichuli">
|
<span id="conState">正常</span>通讯状态
|
</div>
|
</div>
|
|
<div class="pdgxq-table jmkt-table-wrap">
|
<div class="table-thead">
|
<table class="layui-table poptable pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="22%">
|
<col width="22%">
|
<col width="22%">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>设备名称</th>
|
<th>监控属性</th>
|
<th>监 控 值</th>
|
<th>更新时间</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="table-tbody">
|
<table class="layui-table poptable pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="22%">
|
<col width="22%">
|
<col width="22%">
|
<col>
|
</colgroup>
|
<tbody id="deviceData">
|
<!-- <tr>-->
|
<!-- <td>烟感1</td>-->
|
<!-- <td>通讯状态</td>-->
|
<!-- <td>正常</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
</tbody>
|
</table>
|
</div>
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div><!--pdgxq-table end-->
|
|
</div>
|
|
</div><!--pdgxq-m1-left end-->
|
|
<div class="layui-col-lg7 layui-col-md7">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<div class="pdgxq-H">
|
<h3><i></i>监控设备</h3>
|
</div>
|
|
<div class="lsyg-jkxx-box">
|
|
<div class="layui-row scroll" id="deviceList">
|
<div class="layui-col-lg4 layui-col-md4">
|
<div class="lsyq-item">
|
<h4>消防</h4>
|
<div class="lsyq-group layui-row">
|
<div class="lsyq-icon layui-col-lg6 layui-col-md6">
|
<img src="./images/lsyg-icon4.png"/>
|
</div>
|
<div class="lsyq-btnBox layui-col-lg6 layui-col-md6">
|
<a href="#">通讯</a>
|
<a href="#">正常</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="layui-col-lg4 layui-col-md4">-->
|
<!-- <div class="lsyq-item">-->
|
<!-- <h4>漏水</h4>-->
|
<!-- <div class="lsyq-group layui-row">-->
|
<!-- <div class="lsyq-icon layui-col-lg6 layui-col-md6">-->
|
<!-- <img src="./images/lsyg-icon2.png"/>-->
|
<!-- </div>-->
|
<!-- <div class="lsyq-btnBox layui-col-lg6 layui-col-md6">-->
|
<!-- <a href="#">通讯</a>-->
|
<!-- <a href="#">正常</a>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="layui-col-lg4 layui-col-md4">-->
|
<!-- <div class="lsyq-item">-->
|
<!-- <h4>漏水</h4>-->
|
<!-- <div class="lsyq-group layui-row">-->
|
<!-- <div class="lsyq-icon layui-col-lg6 layui-col-md6">-->
|
<!-- <img src="./images/lsyg-icon2.png"/>-->
|
<!-- </div>-->
|
<!-- <div class="lsyq-btnBox layui-col-lg6 layui-col-md6">-->
|
<!-- <a href="#">通讯</a>-->
|
<!-- <a href="#">正常</a>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="layui-col-lg4 layui-col-md4">-->
|
<!-- <div class="lsyq-item">-->
|
<!-- <h4>漏水</h4>-->
|
<!-- <div class="lsyq-group layui-row">-->
|
<!-- <div class="lsyq-icon layui-col-lg6 layui-col-md6">-->
|
<!-- <img src="./images/lsyg-icon2h.png"/>-->
|
<!-- </div>-->
|
<!-- <div class="lsyq-btnBox layui-col-lg6 layui-col-md6">-->
|
<!-- <a href="#">通讯</a>-->
|
<!-- <a href="#" class="active">漏水</a>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="layui-col-lg4 layui-col-md4">-->
|
<!-- <div class="lsyq-item">-->
|
<!-- <h4>漏水</h4>-->
|
<!-- <div class="lsyq-group layui-row">-->
|
<!-- <div class="lsyq-icon layui-col-lg6 layui-col-md6">-->
|
<!-- <img src="./images/lsyg-icon2h.png"/>-->
|
<!-- </div>-->
|
<!-- <div class="lsyq-btnBox layui-col-lg6 layui-col-md6">-->
|
<!-- <a href="#">通讯</a>-->
|
<!-- <a href="#" class="active">漏水</a>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="layui-col-lg4 layui-col-md4">-->
|
<!-- <div class="lsyq-item">-->
|
<!-- <h4>漏水</h4>-->
|
<!-- <div class="lsyq-group layui-row">-->
|
<!-- <div class="lsyq-icon layui-col-lg6 layui-col-md6">-->
|
<!-- <img src="./images/lsyg-icon2h.png"/>-->
|
<!-- </div>-->
|
<!-- <div class="lsyq-btnBox layui-col-lg6 layui-col-md6">-->
|
<!-- <a href="#">通讯</a>-->
|
<!-- <a href="#" class="active">漏水</a>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
|
</div><!--lsyg-jkxx-box end-->
|
</div>
|
|
<!-- 基本信息 -->
|
<div style="padding-top: 20px">
|
<div class="pdgxq-m2-right pdgxq-m2-box">
|
<h3>设备基本信息</h3>
|
<p>设备名称：<span id="deviceName">消防设备监控</span></p>
|
<p>设备状态：<span id="deviceVld">激活</span></p>
|
<p>运维厂商：<span id="opVendor"></span></p>
|
|
<div class="pdgxq-phone">
|
<h4>运维电话</h4>
|
<p id="opPhone"></p>
|
</div>
|
</div>
|
</div>
|
|
</div><!--pdgxq-m1-left end-->
|
|
</div><!--pdgxq-m1 end-->
|
|
</div>
|
|
</div><!--jmkt-main end-->
|
|
</div> <!--i-container end-->
|
|
<script src="./js/jquery.min.js"></script>
|
<script type="text/javascript">
|
//开始渲染
|
function renderInfo(deviceData) {
|
|
var html1 = ''; //左侧实时监控
|
var html2 = ''; //右侧监控设备
|
|
if (deviceData != null && deviceData.length > 0) {
|
|
//定义设备通讯标签，true为正常，false为报警
|
var tag1;
|
//定义设备报警标签，true为正常，false为报警
|
var tag2;
|
|
var warnTag = true; //报警状态
|
var conTag = true; //通讯状态
|
|
//遍历设备集合
|
deviceData.forEach(function (data) {
|
tag1 = true;
|
tag2 = true;
|
var time = data.time.substring(0, 4) + "-" +
|
data.time.substring(4, 6) + "-" +
|
data.time.substring(6, 8) + " " +
|
data.time.substring(8, 10) + ":" +
|
data.time.substring(10, 12);
|
//左侧实时监控
|
$.each(data.value, function (index, item) {
|
html1 += '<tr>';
|
html1 += '<td>' + data.name + '</td>';
|
html1 += '<td>' + item.name + '</td>';
|
//通讯状态
|
if (item.passcode == 1) {
|
if (item.value == "0") { //正常
|
html1 += '<td>正常</td>';
|
} else { //异常
|
html1 += '<td>异常</td>';
|
tag1 = false;
|
if(conTag){
|
conTag = false;
|
}
|
}
|
}
|
//报警状态
|
if (item.passcode == 2) {
|
if (item.value == "0") { //正常
|
html1 += '<td>正常</td>';
|
} else { //异常
|
html1 += '<td>告警</td>';
|
tag2 = false;
|
if(warnTag){
|
warnTag = false;
|
}
|
}
|
}
|
//漏水状态
|
// if (item.passcode == 3) {
|
// if (item.value == "0") {
|
// html1 += '<td>正常</td>';
|
// } else {
|
// html1 += '<td>漏水</td>';
|
// tag2 = false;
|
// if(warnTag){
|
// warnTag = false;
|
// }
|
// }
|
// }
|
|
if (item.passcode == 3) {
|
// if (item.value == "0") {
|
// html1 += '<td>正常</td>';
|
// } else {
|
// html1 += '<td>报警</td>';
|
// }
|
if(warnTag){
|
html1 += '<td>正常</td>';
|
}else{
|
html1 += '<td>报警</td>';
|
}
|
}
|
|
if (item.passcode == 999) {
|
html1 += '<td>' + (item.value?item.value:"") + '</td>';
|
}
|
html1 += '<td>' + time + '</td>';
|
html1 += '</tr>';
|
});
|
|
//右侧设备监控
|
html2 += '<div onclick="deviceDetail(\'' + data.id + '\')" class="layui-col-lg4 layui-col-md4">';
|
html2 += '<div class="lsyq-item"><h4>' + data.name + '</h4>';
|
html2 += '<div class="lsyq-group layui-row">';
|
html2 += '<div class="lsyq-icon layui-col-lg6 layui-col-md6">';
|
//图片
|
if (warnTag) {
|
html2 += '<img src="./images/lsyg-icon4.png"/></div>';
|
} else { //漏水
|
html2 += '<img src="./images/lsyg-icon4h.png"/></div>';
|
}
|
html2 += '<div class="lsyq-btnBox layui-col-lg6 layui-col-md6">';
|
//通讯
|
if (conTag) { //通讯正常
|
html2 += '<a href="javascript:void(0)">通讯</a>';
|
} else { //通讯异常
|
html2 += '<a href="javascript:void(0)" class="active">通讯异常</a>';
|
}
|
//报警
|
if (warnTag) {
|
html2 += '<a href="javascript:void(0)">正常</a>';
|
} else { //漏水
|
html2 += '<a href="javascript:void(0)" class="active">报警</a>';
|
}
|
html2 += '</div></div></div></div>';
|
|
});
|
|
//设备基本信息：默认显示第一个设备信息
|
$("#deviceName").html(deviceList[0].name);
|
$("#deviceVld").html(deviceList[0].vld==0?'激活':'停用');
|
$("#opVendor").html(window.parent.SYS_SET.opVendor);
|
$("#opPhone").html(window.parent.SYS_SET.opPhone);
|
|
//显示监控的通讯和警告信息
|
if(!warnTag){
|
$("#warnState").html("报警");
|
}
|
if(!conTag){
|
$("#conState").html("异常");
|
}
|
}else {
|
html1 += "<tr><td colspan='4'>暂无数据</td></tr>";
|
$("#deviceName").html("");
|
$("#deviceVld").html("");
|
}
|
|
$("#deviceData").html(html1);
|
$("#deviceList").html(html2);
|
}
|
|
//点击显示设备信息
|
function deviceDetail(id) {
|
$.each(deviceList, function (index, data) {
|
if (data.id == id) {
|
$("#deviceName").html(data.name);
|
$("#deviceVld").html(data.vld==0?'激活':'停用');
|
}
|
});
|
}
|
|
</script>
|
<script src="./js/page/detail-yg-hw-ls.js"></script>
|
|
</body>
|
</html>
|
