<!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-wsd.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="warnStatus">无</span>警告状态
|
</div>
|
<div class="pdgxq-group-item jmkt-yichuli">
|
<span id="connectionState">正常</span>通讯状态
|
</div>
|
</div>
|
|
<div class="pdgxq-table jmkt-table-wrap">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="33%">
|
<col width="33%">
|
<col width="33%">
|
</colgroup>
|
<thead>
|
<tr>
|
<th>监控属性</th>
|
<th>监 控 值</th>
|
<th>更新时间</th>
|
</tr>
|
</thead>
|
<tbody id="tbody">
|
<!-- <tr>-->
|
<!-- <td>通讯状态</td>-->
|
<!-- <td>正常</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>警告状态</td>-->
|
<!-- <td>无</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>温度</td>-->
|
<!-- <td>22.1</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>湿度</td>-->
|
<!-- <td>36.4</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
|
</tbody>
|
</table>
|
<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">
|
|
<div class="layui-col-lg6 layui-col-md6">
|
<div class="mj-item mj-item1">
|
|
<div class="mj-itemCon">
|
<h4><span class="time">2020-10-30 15:30:26</span>温度</h4>
|
<div class="wsd-icon">
|
<img src="./images/icon-wendu.png"/>
|
</div>
|
<p><span id="tem">22.1</span><i>℃</i></p>
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-lg6 layui-col-md6">
|
<div class="mj-item mj-item2">
|
<div class="mj-itemCon">
|
<h4><span class="time">2020-10-30 15:30:26</span>湿度</h4>
|
<div class="wsd-icon">
|
<img src="./images/icon-shidu.png"/>
|
</div>
|
<p><span id="hum">36.4</span><i>%</i></p>
|
</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">温湿度1</span></p>
|
<p>设备状态：<span id="deviceStatus">激活</span></p>
|
<p style="display: none;">运维厂商：<span id="opVendor"></span></p>
|
|
<div class="pdgxq-phone" style="display: none;">
|
<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, device) {
|
|
//设备信息
|
$("#deviceName").html(device.name);
|
$("#deviceStatus").html(device.vld==0?"激活":"停用");
|
$("#opVendor").html(window.parent.SYS_SET.opVendor);
|
$("#opPhone").html(window.parent.SYS_SET.opPhone);
|
//实时数据
|
var list = deviceData.value;
|
//时间格式化 yyyy-MM-dd hh:mm
|
var time = deviceData.time;
|
time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12);
|
var cur;
|
var html = "";
|
for (var i = 1; i <= list.length; i++) {
|
cur = list[i - 1];
|
// //通讯状态
|
// if(cur.passcode == 1){
|
// $("#connectionState").html(cur.value ==0 ?"正常":"报警");
|
// // html += "<tr><td>"+cur.name+"</td><td>"+(cur.value ==0 ?"正常":"报警")+"</td><td>"+time+"</td></tr>";
|
// }else if(cur.passcode == 2){//警告状态
|
// $("#warnStatus").html(cur.value == 0?"无":"报警");
|
// // html += "<tr><td>"+cur.name+"</td><td>"+(cur.value ==0 ?"无":"报警")+"</td><td>"+time+"</td></tr>";
|
// }else{
|
// // if(cur.passcode == 3){
|
// // html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" ℃</td><td>"+time+"</td></tr>";
|
// // }
|
// // else if(cur.passcode == 4){
|
// // html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" %</td><td>"+time+"</td></tr>";
|
// // }
|
// }
|
|
var str = "";
|
if(cur.note && cur.note.length > 0){
|
str += cur.note;
|
}else{
|
str += cur.value;
|
}
|
if(cur.unit && cur.unit.length > 0){
|
str += " " + cur.unit;
|
}
|
if(cur.passcode == 1){
|
$("#connectionState").html(cur.value ==0 ?"正常":"报警");
|
str = (cur.value ==0 ?"正常":"报警");
|
}else if(cur.passcode == 2){//警告状态
|
$("#warnStatus").html(cur.value == 0?"无":"报警");
|
str = (cur.value ==0 ?"无":"报警");
|
}
|
html += "<tr><td>"+cur.name+"</td><td>"+(str)+"</td><td>"+time+"</td></tr>";
|
|
//温度状态
|
if(cur.passcode == 3){
|
$("#tem").html(cur.value);
|
}
|
//湿度状态
|
if(cur.passcode == 4){
|
$("#hum").html(cur.value);
|
}
|
//更新时间
|
$(".time").html(time);
|
}
|
$("#tbody").html("");
|
$("#tbody").html(html);
|
}
|
</script>
|
|
<script src="./js/page/detail.js"></script>
|
</body>
|
</html>
|
