|
|
|
|
@ -2,20 +2,20 @@
|
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
|
<meta content="webkit" name="renderer">
|
|
|
|
|
<title>设备监控</title>
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<link th:href="@{favicon.ico}" rel="shortcut icon"/>
|
|
|
|
|
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
|
|
|
|
<link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
|
|
|
|
|
<link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/>
|
|
|
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
|
|
|
|
<link rel="shortcut icon" th:href="@{favicon.ico}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/jquery.contextMenu.min.css}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/fontawesome/all.min.css}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/main.css}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/lot-ui/zTree.css}"/>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
div::-webkit-scrollbar {
|
|
|
|
|
/*滚动条整体样式*/
|
|
|
|
|
@ -379,6 +379,87 @@
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .center {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .center .centerImg {
|
|
|
|
|
transform: scale(1.5, 1.5);
|
|
|
|
|
transition: all 0.1s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .magnify {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
left: calc(50% - 50px);
|
|
|
|
|
bottom: 50px;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("../../img/magnify.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .lessen {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
right: calc(50% - 50px);
|
|
|
|
|
bottom: 50px;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("../../img/lessen.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .leftBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
left: 50px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("../../img/leftBtn.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .rightBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
right: 50px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("../../img/rightBtn.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgMagnification .closeBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
right: 50px;
|
|
|
|
|
top: 50px;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("../../img/close.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script th:src="@{/js/Iot-ui/jquery.min.js}"></script>
|
|
|
|
|
@ -390,18 +471,18 @@
|
|
|
|
|
<script th:src="@{/js/font-adjust.js}"></script>
|
|
|
|
|
<th:block th:include="include :: echarts-js"/>
|
|
|
|
|
<th:block th:include="include :: ztree-js"/>
|
|
|
|
|
<script th:src="@{/js/view-model.js}" src="../../static/js/view-model.js"></script>
|
|
|
|
|
<script th:src="@{/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js}"
|
|
|
|
|
src="../../static/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js"></script>
|
|
|
|
|
<script src="../../static/js/view-model.js" th:src="@{/js/view-model.js}"></script>
|
|
|
|
|
<script src="../../static/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js"
|
|
|
|
|
th:src="@{/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js}"></script>
|
|
|
|
|
<script th:src="@{/js/Iot-ui/deviceMonitor.js}"></script>
|
|
|
|
|
<script th:src="@{/js/Iot-ui/MiniDialog-es5.min.js}"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="body-transformer-detail1">
|
|
|
|
|
<div id="company-name" style="left: 0.7%;width:12.6%;top: 1%;height:5.6%;">
|
|
|
|
|
<!--id="filterText"-->
|
|
|
|
|
<input type="text" class="form-control d-inline-block" id="input-select-node" name="filterText"
|
|
|
|
|
placeholder="输入关键字进行过滤"
|
|
|
|
|
style="color:white;font-size:0.5rem;border-color: #1facf4;background-color: transparent;height:100%">
|
|
|
|
|
<input class="form-control d-inline-block" id="input-select-node" name="filterText" placeholder="输入关键字进行过滤"
|
|
|
|
|
style="color:white;font-size:0.5rem;border-color: #1facf4;background-color: transparent;height:100%"
|
|
|
|
|
type="text">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="sensor-list">
|
|
|
|
|
@ -424,24 +505,49 @@
|
|
|
|
|
<nav class="nav search-bar d-inline-block" id="main-search-bar">
|
|
|
|
|
<form action="#" class="search-form-nav">
|
|
|
|
|
<input id="monitorUnitId" name="monitorUnitId" type="hidden">
|
|
|
|
|
<label for="monitor-unit" class="search-label">监控单元:</label>
|
|
|
|
|
<input type="text" class="form-control d-inline-block" id="monitor-unit" name="monitor-unit"
|
|
|
|
|
placeholder="请输入监控单元">
|
|
|
|
|
<label for="sensor-type" class="search-label">传感器类型:</label>
|
|
|
|
|
<input type="text" class="form-control d-inline-block" id="sensor-type" name="sensor-type"
|
|
|
|
|
placeholder="请输入传感器类型">
|
|
|
|
|
<label for="sensor-name" class="search-label">传感器名称:</label>
|
|
|
|
|
<input type="text" class="form-control d-inline-block" id="sensor-name" name="sensor-name"
|
|
|
|
|
placeholder="请输入传感器名称">
|
|
|
|
|
<label class="search-label" for="monitor-unit">监控单元:</label>
|
|
|
|
|
<input class="form-control d-inline-block" id="monitor-unit" name="monitor-unit" placeholder="请输入监控单元"
|
|
|
|
|
type="text">
|
|
|
|
|
<label class="search-label" for="sensor-type">传感器类型:</label>
|
|
|
|
|
<input class="form-control d-inline-block" id="sensor-type" name="sensor-type" placeholder="请输入传感器类型"
|
|
|
|
|
type="text">
|
|
|
|
|
<label class="search-label" for="sensor-name">传感器名称:</label>
|
|
|
|
|
<input class="form-control d-inline-block" id="sensor-name" name="sensor-name" placeholder="请输入传感器名称"
|
|
|
|
|
type="text">
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-primary search-btn">搜索</button>
|
|
|
|
|
</form>
|
|
|
|
|
</nav>
|
|
|
|
|
<div id="sensor-card-group">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="imgMagnification" id="imgMagnification">
|
|
|
|
|
<div class="center" id="center">
|
|
|
|
|
<img alt="" class="centerImg" id="centerImg" src="../../img/transformer.png">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="magnify" id="magnify" onclick="imgOption(0.1)"></div>
|
|
|
|
|
<div class="lessen" id="lessen" onclick="imgOption(-0.1)"></div>
|
|
|
|
|
<div class="leftBtn" id="leftBtn"></div>
|
|
|
|
|
<div class="rightBtn" id="rightBtn"></div>
|
|
|
|
|
<div class="closeBtn" id="closeBtn"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
let params = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
}
|
|
|
|
|
let total = 0
|
|
|
|
|
let thisID = null
|
|
|
|
|
let loading = false
|
|
|
|
|
|
|
|
|
|
const imgOption = (e)=>{
|
|
|
|
|
let scale = parseFloat(($('#imgMagnification #center #centerImg').css('transform')?.split('(')?.[1].split(',')?.[0]))
|
|
|
|
|
scale += e
|
|
|
|
|
$('#imgMagnification #center #centerImg').css({
|
|
|
|
|
transform:`scale(${scale}, ${scale})`
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
var search = function () {
|
|
|
|
|
@ -464,10 +570,11 @@
|
|
|
|
|
data: defaultData,
|
|
|
|
|
multiSelect: $('#chk-select-multi').is(':checked'),
|
|
|
|
|
onNodeSelected: function (event, node) {
|
|
|
|
|
params.pageNum = 1
|
|
|
|
|
$('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
|
|
|
|
|
if (node.nodeId > 0) {
|
|
|
|
|
monitorUnitModule(node.href);
|
|
|
|
|
sensorCollectionRefresh(node.href);
|
|
|
|
|
sensorCollectionRefresh(node.href, params);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onNodeUnselected: function (event, node) {
|
|
|
|
|
@ -497,15 +604,17 @@
|
|
|
|
|
$(() => {
|
|
|
|
|
let unitId = getParams("id");
|
|
|
|
|
if (unitId != null) {
|
|
|
|
|
thisID = unitId
|
|
|
|
|
monitorUnitModule(unitId)
|
|
|
|
|
sensorCollectionRefresh(unitId);
|
|
|
|
|
sensorCollectionRefresh(unitId, params);
|
|
|
|
|
} else {
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: "/iot/deviceMonitor/getFirstMonitorUnit",
|
|
|
|
|
type: "get",
|
|
|
|
|
success: (res) => {
|
|
|
|
|
thisID = res
|
|
|
|
|
monitorUnitModule(res)
|
|
|
|
|
sensorCollectionRefresh(res);
|
|
|
|
|
sensorCollectionRefresh(res, params);
|
|
|
|
|
},
|
|
|
|
|
error: () => {
|
|
|
|
|
console.log("失败");
|
|
|
|
|
@ -583,7 +692,6 @@
|
|
|
|
|
window.ws = new wsImpl('ws://47.122.6.3:7181');
|
|
|
|
|
ws.onmessage = function (evt) {
|
|
|
|
|
let result = $.parseJSON(evt.data);
|
|
|
|
|
console.log(result);
|
|
|
|
|
switch (result.type) {
|
|
|
|
|
case "CMD_REPORTDATA":
|
|
|
|
|
reportData(result);
|
|
|
|
|
@ -639,5 +747,28 @@
|
|
|
|
|
//document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
$('#sensor-card-group').scroll(function (e) {
|
|
|
|
|
|
|
|
|
|
var divHeight = $(this).height();
|
|
|
|
|
|
|
|
|
|
var nScrollHeight = $(this)[0].scrollHeight;
|
|
|
|
|
|
|
|
|
|
var nScrollTop = $(this)[0].scrollTop;
|
|
|
|
|
|
|
|
|
|
$("#input1").val(nScrollHeight);
|
|
|
|
|
|
|
|
|
|
$("#input2").val(nScrollTop);
|
|
|
|
|
|
|
|
|
|
$("#input3").val(divHeight);
|
|
|
|
|
|
|
|
|
|
if (nScrollTop + divHeight >= nScrollHeight - 100) {
|
|
|
|
|
if (!loading && total > params.pageNum * params.pageSize) {
|
|
|
|
|
params.pageNum += 1
|
|
|
|
|
sensorCollectionRefresh(thisID, params);
|
|
|
|
|
}
|
|
|
|
|
loading = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
|
|
|
|
|
夜笙歌
2 years ago
