<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>井盖数据及控制</title>
<link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/sweetalert.css">
<link type="text/css" rel="stylesheet" href="css/rmc.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="padding: 15px 0px;">
<div class="form-inline">
<select id="acuList" class="form-control select-gray">
</select>
</div>
<div id="treeview" style="height: 650px; overflow: auto;">
<ul class="list-group" id="devList"></ul>
</div>
</div>
<div class="col-md-9" style="padding: 15px 0px;">
<!-- 监测点详情面板 -->
<div class="panel panel-primary">
<div class="panel-heading blue-light-import">资产信息</div>
<div class="panel-body container-fluid">
<div class="row">
<span class="col-md-3">所在分区：<span id="partition"></span></span>
<span class="col-md-4">资产代码：<span id="assetCode"></span></span>
<span class="col-md-5">资产名称：<span id="assetName"></span></span>
</div>
</div>
</div>
<!-- 最新值面板 -->
<div class="panel panel-primary">
<div class="panel-heading blue-light-import">当前值</div>
<div class="panel-body container-fluid">
<div class="row">
<span class="col-md-3">
时间：<span id="logtime"></span>
</span>
<span class="col-md-3">
井盖开闭：<span id="open"></span>
</span>
<span class="col-md-3">
井盖解锁：<span id="lock"></span>
</span>
<span class="col-md-3">
<button class="btn but-blue" id="reload">刷新</button>
</span>
</div>
</div>
</div>
<!-- 命令面板 -->
<div class="panel panel-primary">
<div class="panel-heading blue-light-import">远程指令</div>
<div class="panel-body container-fluid">
<div class="row">
<span class="col-md-3"><button class="btn but-blue" id="rtStatus">查询实时状态</button></span>
<span class="col-md-3"><button class="btn but-blue" id="lockJg">远程锁定井盖</button></span>
<span class="col-md-3"><button class="btn but-blue" id="unlockJg">远程解锁井盖</button></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/sweetalert.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
initACUList();
$("#rtStatus").on("click", remoteJgStatus);
$("#lockJg").on("click", lockJg);
$("#unlockJg").on("click", unlockJg);
$("#reload").on("click", reloadJgStatus);
});
// 初始化ACU列表
function initACUList() {
$.getJSON("res/acuList.js", function(list) {
list.forEach(function(item) {
var opt = $("<option>").attr("value", item.value).text(item.text);
$("#acuList").append(opt);
});
});
$("#acuList").on("change", function () {
var acu = $("#acuList").val();
initDeviceList(acu);
});
initDeviceList("ACU001");
}
// 查询设备列表
function initDeviceList(acu) {
$.ajax({
url: "api/getPgDevice.action",
data: {params: "devType=电力井盖&partition=" + acu},
dataType: "json",
type: "POST",
success: function(response) {
$("#devList").empty();
for (var i = 0; i < response.data.length; i++) {
var dev = response.data[i];
var liItem = $("<li>").addClass("list-group-item").addClass("item-md").text(decodeURIComponent(dev.assetName));
liItem.attr("data-assetCode", dev.assetCode).attr("data-partition", decodeURIComponent(dev.partition));
$("#devList").prepend(liItem);
// 绑定点击事件
liItem.on("click", function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#partition").text($(this).attr("data-partition"));
$("#assetCode").text($(this).attr("data-assetCode"));
$("#assetName").text($(this).text());
reloadJgStatus();
});
}
}
});
}
function remoteJgStatus() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/readJgStatus.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
swal({
title: "指令已下发",
text: "请等待自动刷新或5秒后手动刷新",
type: "info",
showConfirmButton: false,
timer: 2000
});
setTimeout(reloadJgStatus, 5000);
}
});
} else {
alert("资产编号为空");
}
}
function lockJg() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/lockJg.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
swal({
title: "指令已下发",
text: "请等待10秒后自动刷新状态",
type: "info",
showConfirmButton: false,
timer: 2000
});
setTimeout(reloadJgStatus, 10000);
}
});
} else {
alert("资产编号为空");
}
}
function unlockJg() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/unlockJg.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
swal({
title: "指令已下发",
text: "请等待10秒后自动刷新状态",
type: "info",
showConfirmButton: false,
timer: 2000
});
setTimeout(reloadJgStatus, 10000);
}
});
} else {
alert("资产编号为空");
}
}
// 向数据库查询最新值
function reloadJgStatus() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/readJgStatusFromDB.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
var resObj = JSON.parse(response);
if (resObj != null && resObj.jgStat != null) {
$("#open").text(decodeURIComponent(resObj.jgStat.open));
$("#lock").text(decodeURIComponent(resObj.jgStat.lock));
$("#logtime").text(resObj.jgStat.time);
} else {
$("#open").text("-");
$("#lock").text("-");
$("#logtime").text("-");
}
}
});
} else {
alert("资产编号为空");
}
}
</script>
</body>
</html>
