<%@ 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-4">
时间：<span id="logtime"></span>
</span>
<span class="col-md-4">
氧气浓度：<span id="value">0</span>（%）
</span>
<span class="col-md-4">
<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="rtValue">查询实时值</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();
$("#rtValue").on("click", remoteO2Value);
$("#reload").on("click", reloadO2Value);
});
// 初始化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());
reloadO2Value();
});
}
}
});
}
function remoteO2Value() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/readO2Value.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
swal({
title: "指令已下发",
text: "请等待自动刷新或5秒后手动刷新",
type: "info",
showConfirmButton: false,
timer: 2000
});
setTimeout(reloadO2Value, 5000);
}
});
} else {
alert("资产编号为空");
}
}
// 向数据库查询最新值
function reloadO2Value() {
var zcbh = $("#assetCode").text();
if (zcbh != "") {
$.ajax({
url: "remote/readO2ValueFromDB.action",
data: {zcbh: zcbh},
type: "json",
type: "POST",
success: function (response) {
var resObj = JSON.parse(response);
if (resObj != null && resObj.data != null) {
$("#value").text(resObj.data.o2);
$("#logtime").text(resObj.data.time);
} else {
$("#value").text("-");
$("#logtime").text("-");
}
}
});
} else {
alert("资产编号为空");
}
}
</script>
</body>
</html>
