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

修改图片放大缩小

Browse Source
main
夜笙歌 2 years ago
parent acb07d76e0
commit 6e274d4bfe
7 changed files with 940 additions and 793 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-admin/src/main/resources/static/img/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
ruoyi-admin/src/main/resources/static/img/leftBtn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
ruoyi-admin/src/main/resources/static/img/lessen.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
ruoyi-admin/src/main/resources/static/img/magnify.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
ruoyi-admin/src/main/resources/static/img/rightBtn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

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

@ -1,267 +1,283 @@
const getParameter = function (dataType){
var returnData;
let formData = new FormData();
formData.append("sensorTypeId", dataType);
$.ajax({
type: "post",
url: "/base/sysParamConfig/getParameter",
data: formData,
contentType: "application/json;charset=utf-8",
dataType: "json",
json: 'callback',
processData: false,
contentType: false,
async: false,
success: function (json) {
returnData = json;
},
error: function () {
alert("错误");
}
});
return returnData;
const getParameter = async function (dataType) {
var returnData;
let formData = new FormData();
formData.append("sensorTypeId", dataType);
await $.ajax({
type: "post",
url: "/base/sysParamConfig/getParameter",
data: formData,
contentType: "application/json;charset=utf-8",
dataType: "json",
json: 'callback',
processData: false,
contentType: false,
async: true,
success: function (json) {
returnData = json;
return returnData;
},
error: function () {
// alert("错误");
}
});
return returnData;
}
const sensorCollectionRefresh = function (monitorUnitId) {
/*setInterval(function() {
}, 500);*/
$.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 sensorCollectionRefresh = function (monitorUnitId,params) {
console.log(params)
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId+'&pageNum='+(params?.pageNum||1)+'&pageSize='+(params?.pageSize||10),
type: "get",
dataType: 'JSON',
success: (res) => {
if (params.pageNum === 1) {
$("#sensor-card-group").html("");
}
res.map(async (x) => {
let params = await getParameter(x.datatype);
createDeviceModule(x, params);
})
loading = false
},
error: () => {
console.log("失败");
}
})
}
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: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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: 0%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 3%;padding-left: 0%">';
//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: 3%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '<button onclick="temperatureTrend(\''+sensor.sensorId+",temperature"+ '\')" style="color: #00f9ff;float:right;margin-right: 1%;margin-top: -1%;background-color: #1C84C6;border: 1px solid #1C84C6;border-radius:3px;">趋势分析</button>'
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "humiture":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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: 0%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 3%;padding-left: 0%">';
html+=`<p style="color: #00f9ff;float: left;margin-left: 3%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "image":
html += '<div style="position: absolute;width: 100%;height: 100%;border: 0px solid red">';
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;border:0px solid #00f9ff;height: 15%;display: flex;align-items: center;">${sensor.sensorName}</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 id="'+sensor.sensorId+"imgstr"+'" src="'+imgurl+'" onclick="imgOnclick(this)" 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: 105%;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: 105%;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: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "doormagnetic":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "vibration":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "waterlogging":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "platen":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;" 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;
default:
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
}
const createDeviceModule = function (sensor, params) {
// console.log(sensor)
// console.log(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: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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: 0%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 3%;padding-left: 0%">';
//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: 3%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '<button onclick="temperatureTrend(\'' + sensor.sensorId + ",temperature" + '\')" style="color: #00f9ff;float:right;margin-right: 1%;margin-top: -1%;background-color: #1C84C6;border: 1px solid #1C84C6;border-radius:3px;">趋势分析</button>'
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "humiture":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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: 0%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 3%;padding-left: 0%">';
html += `<p style="color: #00f9ff;float: left;margin-left: 3%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "image":
html += '<div style="position: absolute;width: 100%;height: 100%;border: 0px solid red">';
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;border:0px solid #00f9ff;height: 15%;display: flex;align-items: center;">${sensor.sensorName}</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 id="' + sensor.sensorId + "imgstr" + '" src="' + imgurl + '" onclick=\'imgOnclick(this,"' + 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: 105%;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: 105%;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: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "doormagnetic":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "vibration":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "waterlogging":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
case "platen":
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;" 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;
default:
html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 105%;color: #00f9ff;width: 100%;height: 15%;;display: flex;flex-direction: column;justify-content: center;">${sensor.sensorName}</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;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: 105%;color: #00f9ff;width: 100%;" 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;margin-left: 10%" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
html += '</div>';
$("#sensor-card-group").append(html);
break;
}
}
const imgOnclick = function (com) {
Dialog({
title: '图像详情',
width: 600,
imageContent: {
src: com.src,
height: 480
},
showButton: false,
showTitle: true,
maskClose: true
});
const imgOnclick = function (com, e) {
$('#imgMagnification').css({
display:'block',
})
$('#imgMagnification #center #centerImg').attr('src',e)
$('#imgMagnification #center #centerImg').css({
transform:`scale(1.5,1.5)`
})
$('#imgMagnification #closeBtn').click(function (){
$('#imgMagnification').css({
display:'none',
})
})
// Dialog({
// title: '图像详情',
// width: 1920,
// imageContent: {
// src: com.src,
// height: 940
// },
// showButton: false,
// showTitle: true,
// maskClose: true
// });
}
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 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: 105%;font-weight:bolder;">在线</span>`;
break;
case 1:
result = `<span style="color:#F8AC59;font-size: 105%;font-weight:bolder;">离线</span>`;
break;
case 2:
result = `<span style="color:red;font-size: 105%;font-weight:bolder;">告警</span>`;
break;
default:
result = `<span style="font-size: 105%;font-weight:bolder;">异常</span>`;
break;
}
return result;
let result = "-";
switch (status) {
case 0:
result = `<span style="color:#00FF00;font-size: 105%;font-weight:bolder;">在线</span>`;
break;
case 1:
result = `<span style="color:#F8AC59;font-size: 105%;font-weight:bolder;">离线</span>`;
break;
case 2:
result = `<span style="color:red;font-size: 105%;font-weight:bolder;">告警</span>`;
break;
default:
result = `<span style="font-size: 105%;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));
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)));
}
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;
}
return fmt;
}
//温度传感器折线图
const temperatureTrend = function (sensorId) {
Dialog({
title: "趋势分析",
width: 1100,
iframeContent: {
src: "/record/recordSensorData/getTemperatureTrend?id="+sensorId,
height: 600
},
showButton: false
});
}
Dialog({
title: "趋势分析",
width: 1100,
iframeContent: {
src: "/record/recordSensorData/getTemperatureTrend?id=" + sensorId,
height: 600
},
showButton: false
});
}

1219
ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save