<!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-single2.css"/>
|
<style>
|
|
|
</style>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container div-body">
|
<div class="jmkt-main">
|
<div class="layui-fluid">
|
<div class="pdgxq-m1 layui-row layui-col-space20">
|
<div class="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 class="icn" src="./images/icon-wendu.png"/>
|
<img class="dz" src="images/wsd-single/dz2.png" alt="">
|
</div>
|
<p><span id="tem">22.1</span><i>℃</i></p>
|
</div>
|
|
</div>
|
|
</div><!--pdgxq-m1-left end-->
|
|
<div class="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 class="icn" src="./images/icon-shidu.png"/>
|
<img class="dz" src="images/wsd-single/dz1.png" alt="">
|
</div>
|
<p><span id="hum">36.4</span><i>%</i></p>
|
</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 () {
|
//获取URL中的参数id
|
var deviceId = "1";
|
|
console.log("-----deviceId=" + deviceId);
|
|
if (!deviceId) {
|
console.log("没有获取到设备ID，无法查看监控信息");
|
return false;
|
}
|
|
//根据设备ID从接口中获取实时监控
|
queryData(deviceId);
|
//定时器，每5秒查询一次；查询设备信息并渲染
|
setInterval(function () {
|
queryData(deviceId);
|
},2000);
|
|
}).call(this);
|
|
|
function queryData(deviceId) {
|
var data = {id: deviceId};
|
$.post("./cgi-bin/detail/query-data", JSON.stringify(data), function (data, status) {
|
if ("success" == status) {
|
// console.log('---------获取到的设备实时数据-----' + data);
|
renderInfo(data);
|
} else {
|
console.log("数据查询出错，请重新操作！");
|
}
|
}, "json");
|
};
|
|
//开始渲染
|
function renderInfo(deviceData) {
|
|
//实时数据
|
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;
|
for (var i = 1; i <= list.length; i++) {
|
cur = list[i - 1];
|
|
//温度状态
|
if(cur.passcode == 3){
|
$("#tem").html(cur.value);
|
}
|
//湿度状态
|
if(cur.passcode == 4){
|
$("#hum").html(cur.value);
|
}
|
//更新时间
|
$(".time").html(time);
|
}
|
}
|
</script>
|
|
<script src="./js/page/detail.js"></script>
|
</body>
|
</html>
|
