<!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-mj.css"/>
|
<link href="css/iconfont.css" rel="stylesheet">
|
</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-lg5 layui-col-md5">
|
<div class="pdgxq-m1-left pdgxq-m1-box">
|
<div class="pdgxq-H">
|
<h3><i></i>设备基本信息</h3>
|
</div>
|
|
<!-- 基本信息 -->
|
<div style="padding: 10px">
|
<div class="pdgxq-m2-right pdgxq-m2-box">
|
<p></p>
|
<p>设备名称：<span id="deviceName">未知设备#1</span></p>
|
<p>设备状态：<span id="deviceVld">激活</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>
|
|
</div><!--pdgxq-m1-left end-->
|
|
<div class="layui-col-lg7 layui-col-md7">
|
|
<div class="pdgxq-m1-right pdgxq-m1-box" style="">
|
<div class="pdgxq-H">
|
<h3><i></i>开门记录</h3>
|
<!-- <div id="open" class="jmkt-tit-more" onclick="sendAction();">-->
|
<!-- <button type="button" class="layui-btn layui-btn-normal pop-complete-btn"-->
|
<!-- style="background-color: #46b8da;color: #ffffff;">开门</button>-->
|
<!-- </div>-->
|
</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="30%">
|
<col width="30%">
|
<col width="40%">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<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="30%">
|
<col width="30%">
|
<col width="40%">
|
<col>
|
</colgroup>
|
<tbody id="listData">
|
<!-- <tr>-->
|
<!-- <td>1001/张三</td>-->
|
<!-- <td>1号门-刷卡开门</td>-->
|
<!-- <td>2020-04-26 12:30:56</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>1002/李四</td>-->
|
<!-- <td>2号门-指纹开门</td>-->
|
<!-- <td>2020-04-25 12:35:28</td>-->
|
<!-- </tr>-->
|
|
</tbody>
|
</table>
|
</div>
|
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div><!--pdgxq-table end-->
|
|
</div><!--jmkt-jkxx-box end-->
|
|
</div>
|
</div><!--pdgxq-m1-left end-->
|
|
</div><!--pdgxq-m1 end-->
|
|
</div>
|
</div> <!--i-container end-->
|
|
|
<script src="./js/jquery.min.js"></script>
|
<script type="text/javascript">
|
$("#opVendor").html(window.parent.SYS_SET.opVendor);
|
$("#opPhone").html(window.parent.SYS_SET.opPhone);
|
var device = {};
|
var deviceId;
|
reload();
|
|
|
function reload() {
|
//获取URL中的参数id
|
deviceId = getParam("id");
|
console.log("======门禁页面信息======");
|
// console.log("deviceId="+deviceId);
|
if (!deviceId) {
|
console.log("没有获取到设备ID，无法查看监控信息!");
|
window.parent.notify("没有获取到设备ID，无法查看监控信息");
|
return false;
|
}
|
//根据设备ID从缓存中获取设备基本信息
|
device = window.parent.getDevice(deviceId);
|
// console.log(device);
|
//设备基本信息
|
$("#deviceName").html(device.name);
|
$("#deviceVld").html(device.vld==0?'激活':'停用');
|
queryRecord(deviceId);
|
//setInterval(function () {
|
// queryRecord(deviceId);
|
// // queryData(deviceId);
|
//},5000);
|
}
|
|
|
|
function queryData(deviceId,device) {
|
console.log("======门禁页面-查询实时======");
|
var data = {id: deviceId};
|
$.post("./cgi-bin/detail/query-data", JSON.stringify(data), function (data, status) {
|
if ("success" == status) {
|
console.log('---------获取到的设备实时数据-----' + data);
|
renderInfo(data,device);
|
} else {
|
console.log("数据查询出错，请重新操作！");
|
window.parent.notify("数据查询出错，请重新操作！");
|
}
|
}, "json");
|
};
|
|
//开始渲染实时数据
|
function renderInfo(deviceData, device) {
|
console.log("--------渲染实时数据-------门禁id="+device.id);
|
console.log(deviceData);
|
//设备基本信息
|
$("#deviceName").html(device.name);
|
$("#deviceVld").html(device.vld==0?'激活':'停用');
|
|
//监控属性实时数据渲染
|
var list = deviceData.value;
|
if(list !=null && list.length>0){
|
$.each(list,function(index,item) {
|
//通讯状态
|
if (item.passcode == 1) {
|
$("#conState").html(item.value == 0 ? "正常" : "异常");
|
}
|
//警告状态
|
if (item.passcode == 2) {
|
$("#warnState").html(item.value == 0 ? "无" : "报警");
|
}
|
});
|
}
|
|
// queryRecord(device.id);
|
}
|
|
/**
|
* 获取URL中的参数
|
* @param name
|
* @returns {string|null}
|
*/
|
function getParam(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
}
|
|
//获取门禁历史数据；10条
|
function queryRecord(id) {
|
console.log("--------查看门禁历史记录-------门禁id="+id);
|
var param = {"id": id};
|
$.post("./cgi-bin/record-his/query-by-id", JSON.stringify(param), function (data, status) {
|
if ("success" == status) {
|
//渲染历史数据列表
|
renderRecordInfo(data);
|
}else {
|
window.parent.notify("门禁数据查询出错，请重新操作！");
|
}
|
}, "json");
|
}
|
//开始渲染
|
function renderRecordInfo(dataList) {
|
console.log(dataList);
|
|
//门禁历史数据渲染
|
var html="";
|
if(dataList !=null && dataList.length>0){
|
var list;
|
$.each(dataList,function(index,item){
|
list = eval(item.value);
|
if(list !=null && list.length>0){
|
var tag1 = ''; //卡号/姓名
|
var tag2 = ''; //门号
|
var tag3 = ''; //开门类型
|
var tag4 = ''; //开门时间
|
$.each(list,function(index,item){
|
if(item.passcode == 3){
|
tag2 = item.value + '号门-';
|
}
|
if(item.passcode == 5){
|
tag1 = item.value;
|
}
|
if(item.passcode == 6){
|
tag3 = item.value;
|
}
|
if(item.passcode == 7){
|
tag4 = item.value.substring(0,4) + "-" +
|
item.value.substring(4,6) + "-" +
|
item.value.substring(6,8) + " " +
|
item.value.substring(8,10) + ":" +
|
item.value.substring(10,12)+ ":" +
|
item.value.substring(12,14);
|
}
|
});
|
html += "<tr><td>"+ tag1 +"</td><td>" + tag2 + tag3 + "</td><td>" + tag4 + "</td></tr>";
|
}
|
});
|
}else {
|
html += "<tr><td colspan='3'>暂无数据</td></tr>";
|
}
|
$("#listData").html(html);
|
}
|
</script>
|
</body>
|
|
</html>
|
