wenjy
/
JRM-intelligent-iot-AttachToPath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change - 设备监控页面添加websocket实现数据实时刷新

Browse Source
main
wenjy 3 years ago
parent ca77cb7830
commit ab032051ca
3 changed files with 5437 additions and 141 deletions
Show Stats Download Patch File Download Diff File

52
ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js
Unescape Escape View File

@ -25,8 +25,7 @@ const getParameter = function (dataType){
const sensorCollectionRefresh = function (monitorUnitId) {
/*setInterval(function() {
}, 5000);*/
}, 500);*/
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
type: "get",
@ -45,55 +44,57 @@ const sensorCollectionRefresh = function (monitorUnitId) {
}
const createDeviceModule = function (sensor,params) {
let html = '<div class="card sensor-card" style="border: 0px solid red;margin-right: 2%;margin-top:2%;overflow-x: hidden; overflow-y: auto;">';
switch (sensor.datatype) {
case "temperature":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorId}</div>`;
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;display: flex;flex-direction: column;justify-content: center;">';
for (let i=0; i<params.length; i++) {
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;" id="${sensor.sensorId+params[i].paramTitle}">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
}
html += '</div>';
html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;" id=${sensor.sensorId+"sensorStatus"}>${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "image":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 100%;border:0px solid #00f9ff;">${sensor.sensorId}&nbsp;&nbsp;${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</div>`
html += '<div style="position: absolute;height: 80%;width: 55%;border-right: 1px dashed #1CA2E7;left: 0%">';
html += '<div onclick="imgOnclick(this)" style="position: absolute;width: 100%;height: 100%;border: 0px solid red">';
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 100%;border:0px solid #00f9ff;height: 15%;display: flex;align-items: center;">${sensor.sensorId}&nbsp;&nbsp;<span id=${sensor.sensorId+"sensorStatus"}>${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</span></div>`
html += '<div class="example" style="position: absolute;height: 80%;width: 52%;border-right: 1px dashed #1CA2E7;left: 1%;display: flex;align-items: center;justify-content: center;">';
let imgurl = sensor.imgstr.replace("D:/ruoyi/uploadPath","/profile");
html += '<img src="'+imgurl+'" display="inline-block" vertical-align="middle" width="100%" height="100%">'
html += '<img id="'+sensor.sensorId+"imgstr"+'" src="'+imgurl+'" display="inline-block" vertical-align="middle" width="100%" height="80%">'
html += '</div>'
html += '<div style="position: absolute;width: 45%;height: 80%;border: 0px dashed #1CA2E7;right:0%;overflow-x: hidden; overflow-y: auto;">';
html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
for (let i=0; i<params.length; i++) {
if(!params[i].paramTitle.includes("img")) {
html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</p>`;
html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;" id="${sensor.sensorId+params[i].paramTitle}">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</p>`;
}
}
html += '</div>';
html += '</div>';
html += `</div>`;
$("#sensor-card-group").append(html);
break;
case "smoke":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorId}</div>`;
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;display: flex;flex-direction: column;justify-content: center;">';
for (let i=0; i<params.length; i++) {
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;" id="${sensor.sensorId+params[i].paramTitle}">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
}
html += '</div>';
html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;" id=${sensor.sensorId+"sensorStatus"}>${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
@ -101,27 +102,30 @@ const createDeviceModule = function (sensor,params) {
break;
case "platen":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorId}</div>`;
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;display: flex;flex-direction: column;justify-content: center;">';
for (let i=0; i<params.length; i++) {
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;" id="${sensor.sensorId+params[i].paramTitle}">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
}
html += '</div>';
html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;" id=${sensor.sensorId+"sensorStatus"}>${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
break;
default:
break;
}
}
const imgOnclick = function (com) {
/*$("#imgWindow").append(com)*/
}
const collectTime = function (time){
let oldTime = (new Date(time)).getTime();
let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");

5330
ruoyi-admin/src/main/resources/static/js/Iot-ui/jquery.min.js vendored
View File

File diff suppressed because it is too large Load Diff

182
ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
Unescape Escape View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<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"/>
@ -375,13 +374,14 @@
overflow-y: auto;
}
div::-webkit-scrollbar{
div::-webkit-scrollbar {
display: none;
}
</style>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/Iot-ui/jquery.min.js}"></script>
<th:block th:include="include :: layout-latest-js"/>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/fontawesome/all.min.js}"></script>
<script th:src="@{/js/autoscroll-table.js}"></script>
@ -403,11 +403,13 @@
</div>
<div id="sensor-list">
<!--<ul class="list-unstyled" id="sensor-list-inner"></ul>-->
<div id="treeview-selectable"></div>
</div>
<!--
<div style="position:absolute;width: 45%;height: 50%;top: 20%;right:10%;border: 1px solid red;background-color: #06356B" id="imgWindow"></div>
-->
<div id="transformer-name">监控单元</div>
<div id="transformer-model">
<!--<img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元">-->
@ -444,111 +446,6 @@
</div>
</body>
<!--<script th:inline="javascript">
class SensorCardsViewModel extends AbstractViewModel {
constructor(idOrElement, parent = null, volatileMode = false) {
super(idOrElement, parent, volatileMode)
}
initMap() {
return {
title: {
value: "",
selector: ".card-title",
},
temperature: {
value: "",
selector: ".temp-value",
},
"battery-icon": {
value: "",
selector: ".battery-icon",
},
status: {
value: "",
selector: ".sensor-status",
},
"conn-status": {
value: "",
selector: ".conn-status",
},
datetime: {
value: "",
selector: ".collect-time",
},
}
}
render() {
return `<div class="card sensor-card" id="${this.id}">
<div class="card-body">
<div class="card-title">${this.get("title")}</div>
<div class="temp-label">温度值 temp</div>
<div class="temp-value">${this.get("temperature")}</div>
<div class="battery-icon"></div>
<div class="sensor-status">${this.get("status")}</div>
<div class="conn-status">${this.get("conn-status")}</div>
<div class="collect-time">${this.get("datetime")}</div>
</div>
</div>`
}
}
function sensorCollectionRefresh(monitorUnitId) {
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
type: "get",
dataType: 'JSON',
success: (res) => {
$("#sensor-card-group").html("");
const sensorCollection = new ViewModelCollection(document.getElementById("sensor-card-group"))
for (let i = 0; i < res.length; i++) {
sensorCollection.push(
new SensorCardsViewModel("sensor-card-" + i, document.getElementById("sensor-card-group")),
)
}
for (let i = 0; i < res.length; i++) {
const vm = sensorCollection.get(i);
vm.set("title", res[i].sensorName)
vm.set("temperature", "&#45;&#45;")
vm.set("battery-icon", `<i class="fa-solid fa-battery-full battery-icon"></i>`)
switch (res[i].sensorStatus) {
case 0:
vm.set("status", "在线")
break;
case 1:
vm.set("status", "离线")
break;
case 2:
vm.set("status", "告警")
break;
default:
vm.set("status", "异常")
break;
}
vm.set("conn-status", "")
vm.set("datetime", formatter(new Date(), "hh:mm:ss"))
}
sensorCollection.refresh()
},
error: () => {
console.log("失败");
}
})
}
</script>-->
<script type="text/javascript">
$(function () {
@ -655,4 +552,69 @@
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$.cookie('userID', '0000');
var wsImpl = window.WebSocket || window.MozWebSocket;
console.log("connecting to server ..");
window.ws = new wsImpl('ws://127.0.0.1:7181');
ws.onmessage = function (evt) {
let result = $.parseJSON(evt.data);
console.log(result);
switch (result.type) {
case "CMD_REPORTDATA":
reportData(result);
break;
case "CMD_SENSORSTATUS":
sensorStatus(result);
break;
default:
break;
}
};
ws.onopen = function () {
console.log(".. connection open");
};
ws.onclose = function () {
console.log(".. connection closed");
}
});
const send = function (message) {
ws.send(message);
}
//上报数据处理
const reportData = function (result) {
if (result.datatype == "image") {
console.log(result);
let params = getParameter(result.datatype);
for (let i = 0; i < params.length; i++) {
if (params[i].paramTitle == "imgstr") {
document.getElementById(result.sensorId + "imgstr").src = result.imgstr.replace("D:/ruoyi/uploadPath", "/profile");
}
if (!params[i].paramTitle.includes("img")) {
console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle]);
document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle];
}
}
} else {
let params = getParameter(result.datatype);
for (let i = 0; i < params.length; i++) {
console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle]);
document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle];
}
}
document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
document.getElementById(result.sensorId + "collectTime").innerHTML = result['collectTime'] == null ? "-" : collectTime(result['collectTime']);
}
//上报设备状态
const sensorStatus = function(result) {
document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
}
</script>
</html>

Write Preview
Loading…
Cancel
Save