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

change - 设备监控页面修改

Browse Source
main
wenjy 3 years ago
parent 147c5544f7
commit 9bd6fddf07
3 changed files with 120 additions and 28 deletions
Show Stats Download Patch File Download Diff File

13
ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java
Unescape Escape View File

@ -18,10 +18,9 @@ import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.*;
import java.util.stream.Collectors;
/**
@ -40,6 +39,8 @@ public class DeviceMonitorController {
@Autowired private StringRedisTemplate redisTemplate;
private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
/**
* 获取监控单元列表
*
@ -143,6 +144,8 @@ public class DeviceMonitorController {
info = JsonUtils.JSONObjectToMap(datavalue);
info.put("collectTime",jsonObject.get("collectTime").toString());
info.put("datatype", data.get("datatype"));
}
@ -156,6 +159,8 @@ public class DeviceMonitorController {
info.put("sensorLocation", y.getSensorLocation());
info.put("sensorStatus",y.getSensorStatus());
result.add(info);
});
});

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

@ -23,63 +23,147 @@ const getParameter = function (dataType){
}
const sensorCollectionRefresh = function (monitorUnitId) {
setInterval(function() {
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
type: "get",
dataType: 'JSON',
success: (res) => {
$("#sensor-card-group").html("");
res.map(x=>{
let params = getParameter(x.datatype);
createDeviceModule(x,params);
})
},
error: () => {
console.log("失败");
}
})
}, 5000);
/*setInterval(function() {
}, 5000);*/
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
type: "get",
dataType: 'JSON',
success: (res) => {
$("#sensor-card-group").html("");
res.map(x=>{
let params = getParameter(x.datatype);
createDeviceModule(x,params);
})
},
error: () => {
console.log("失败");
}
})
}
const createDeviceModule = function (sensor,params) {
let html = '<div class="card sensor-card" id="1" style="border: 0px solid red;height: 17.6rem;margin-right: 2%;margin-top:2%">';
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="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
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>';
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 += '</div>';
$("#sensor-card-group").append(html);
break;
case "image":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
html += '</div>';
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%">';
let imgurl = sensor.imgstr.replace("D:/ruoyi/uploadPath","/profile");
html += '<img src="'+imgurl+'" display="inline-block" vertical-align="middle" width="100%" height="100%">'
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>`;
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 += '</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="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
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>';
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 += '</div>';
$("#sensor-card-group").append(html);
break;
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="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
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>';
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 += '</div>';
$("#sensor-card-group").append(html);
break;
break;
default:
break;
}
}
const collectTime = function (time){
let oldTime = (new Date(time)).getTime();
let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime;
}
const sensorStatus = function (status) {
let result = "-";
switch (status) {
case 0:
result = `<span style="color:#00FF00;font-size: 80%;font-weight:bolder;">在线</span>`;
break;
case 1:
result = `<span style="color:#F8AC59;font-size: 80%;font-weight:bolder;">离线</span>`;
break;
case 2:
result = `<span style="color:red;font-size: 80%;font-weight:bolder;">告警</span>`;
break;
default:
result = `<span style="font-size: 80%;font-weight:bolder;">异常</span>`;
break;
}
return result;
}
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}

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

@ -17,8 +17,6 @@
<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 rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<style>
div::-webkit-scrollbar {
/*滚动条整体样式*/
@ -260,8 +258,10 @@
.sensor-card {
background: url("/img/sensor-block.png") no-repeat #00000000;
background-size: 100% 100%;
width: 27rem;
height: 14.6rem;
/*width: 27rem;
height: 17.6rem;*/
width: 48%;
height: 47%;
border-radius: 0;
border: none;
}
@ -373,7 +373,10 @@
align-content: stretch;
overflow-x: hidden;
overflow-y: auto;
}
div::-webkit-scrollbar{
display: none;
}
</style>

Write Preview
Loading…
Cancel
Save