wenjy
/
jrm-intelligent-iot
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){ const getParameter = async function (dataType) {
var returnData; var returnData;
let formData = new FormData(); let formData = new FormData();
formData.append("sensorTypeId", dataType); formData.append("sensorTypeId", dataType);
$.ajax({ await $.ajax({
type: "post", type: "post",
url: "/base/sysParamConfig/getParameter", url: "/base/sysParamConfig/getParameter",
data: formData, data: formData,
contentType: "application/json;charset=utf-8", contentType: "application/json;charset=utf-8",
dataType: "json", dataType: "json",
json: 'callback', json: 'callback',
processData: false, processData: false,
contentType: false, contentType: false,
async: false, async: true,
success: function (json) { success: function (json) {
returnData = json; returnData = json;
}, return returnData;
error: function () { },
alert("错误"); error: function () {
} // alert("错误");
}); }
return returnData; });
return returnData;
} }
const sensorCollectionRefresh = function (monitorUnitId) { const sensorCollectionRefresh = function (monitorUnitId,params) {
/*setInterval(function() { console.log(params)
$.ajax({
}, 500);*/ url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId+'&pageNum='+(params?.pageNum||1)+'&pageSize='+(params?.pageSize||10),
$.ajax({ type: "get",
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId, dataType: 'JSON',
type: "get", success: (res) => {
dataType: 'JSON', if (params.pageNum === 1) {
success: (res) => { $("#sensor-card-group").html("");
$("#sensor-card-group").html(""); }
res.map(x=>{ res.map(async (x) => {
let params = getParameter(x.datatype); let params = await getParameter(x.datatype);
createDeviceModule(x,params); createDeviceModule(x, params);
}) })
}, loading = false
error: () => { },
console.log("失败"); error: () => {
} console.log("失败");
}) }
})
} }
const createDeviceModule = function (sensor,params) { 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;">'; // console.log(sensor)
switch (sensor.datatype) { // console.log(params)
case "temperature": let html = '<div class="card sensor-card" style="border: 0px solid red;margin-right: 2%;margin-top:2%;overflow-x: hidden; overflow-y: auto;">';
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>`; switch (sensor.datatype) {
case "temperature":
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;">'; 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>`;
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 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>'; 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 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 += '</div>';
html+=`<p style="color: #00f9ff;float: left;margin-left: 3%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`; html += '<div style="position: absolute;left: 0%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 3%;padding-left: 0%">';
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+=`<p style="color: #00f9ff;float: left;" id=${sensor.sensorId+"sensorStatus"}>${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
html += '</div>'; 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>'
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "humiture": break;
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>`;
case "humiture":
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "image": break;
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>` case "image":
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;">'; html += '<div style="position: absolute;width: 100%;height: 100%;border: 0px solid red">';
let imgurl = sensor.imgstr.replace("D:/ruoyi/uploadPath","/profile"); 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 += '<img id="'+sensor.sensorId+"imgstr"+'" src="'+imgurl+'" onclick="imgOnclick(this)" display="inline-block" vertical-align="middle" width="100%" height="80%">' 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;">';
html += '</div>' let imgurl = sensor.imgstr.replace("D:/ruoyi/uploadPath", "/profile");
html += '<div style="position: absolute;width: 45%;height: 80%;border: 0px dashed #1CA2E7;right:0%;overflow-x: hidden; overflow-y: auto;">'; html += '<img id="' + sensor.sensorId + "imgstr" + '" src="' + imgurl + '" onclick=\'imgOnclick(this,"' + imgurl + '")\' display="inline-block" vertical-align="middle" width="100%" height="80%">'
html += `<p style="padding-top: 1px;font-size: 105%;color: #00f9ff;width: 100%;" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`; html += '</div>'
for (let i=0; i<params.length; i++) { html += '<div style="position: absolute;width: 45%;height: 80%;border: 0px dashed #1CA2E7;right:0%;overflow-x: hidden; overflow-y: auto;">';
if(!params[i].paramTitle.includes("img")) { html += `<p style="padding-top: 1px;font-size: 105%;color: #00f9ff;width: 100%;" id=${sensor.sensorId + "collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
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>`; 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>';
html += `</div>`; html += '</div>';
$("#sensor-card-group").append(html); html += `</div>`;
break;
$("#sensor-card-group").append(html);
case "smoke": break;
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>`;
case "smoke":
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "doormagnetic": break;
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>`;
case "doormagnetic":
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "vibration": break;
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>`;
case "vibration":
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "waterlogging": break;
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>`;
case "waterlogging":
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
case "platen": break;
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>`;
case "platen":
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;">'; 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>`;
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 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>'; 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 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 += '</div>';
html+=`<p style="color: #00f9ff;float: left;margin-left: 10%" id=${sensor.sensorId+"collectTime"}>${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`; html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
html += '</div>'; //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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
$("#sensor-card-group").append(html);
default: break;
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>`;
default:
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;">'; 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>`;
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 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>'; 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 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>';
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>`;
$("#sensor-card-group").append(html); html += '</div>';
break;
} $("#sensor-card-group").append(html);
break;
}
} }
const imgOnclick = function (com) { const imgOnclick = function (com, e) {
Dialog({ $('#imgMagnification').css({
title: '图像详情', display:'block',
width: 600, })
imageContent: { $('#imgMagnification #center #centerImg').attr('src',e)
src: com.src, $('#imgMagnification #center #centerImg').css({
height: 480 transform:`scale(1.5,1.5)`
}, })
showButton: false, $('#imgMagnification #closeBtn').click(function (){
showTitle: true, $('#imgMagnification').css({
maskClose: true display:'none',
}); })
})
// Dialog({
// title: '图像详情',
// width: 1920,
// imageContent: {
// src: com.src,
// height: 940
// },
// showButton: false,
// showTitle: true,
// maskClose: true
// });
} }
const collectTime = function (time){ const collectTime = function (time) {
let oldTime = (new Date(time)).getTime(); let oldTime = (new Date(time)).getTime();
let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss"); let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime; return curTime;
} }
const sensorStatus = function (status) { const sensorStatus = function (status) {
let result = "-"; let result = "-";
switch (status) { switch (status) {
case 0: case 0:
result = `<span style="color:#00FF00;font-size: 105%;font-weight:bolder;">在线</span>`; result = `<span style="color:#00FF00;font-size: 105%;font-weight:bolder;">在线</span>`;
break; break;
case 1: case 1:
result = `<span style="color:#F8AC59;font-size: 105%;font-weight:bolder;">离线</span>`; result = `<span style="color:#F8AC59;font-size: 105%;font-weight:bolder;">离线</span>`;
break; break;
case 2: case 2:
result = `<span style="color:red;font-size: 105%;font-weight:bolder;">告警</span>`; result = `<span style="color:red;font-size: 105%;font-weight:bolder;">告警</span>`;
break; break;
default: default:
result = `<span style="font-size: 105%;font-weight:bolder;">异常</span>`; result = `<span style="font-size: 105%;font-weight:bolder;">异常</span>`;
break; break;
} }
return result; return result;
} }
Date.prototype.format = function(fmt) { Date.prototype.format = function (fmt) {
var o = { var o = {
"M+" : this.getMonth()+1, //月份 "M+": this.getMonth() + 1, //月份
"d+" : this.getDate(), //日 "d+": this.getDate(), //日
"h+" : this.getHours(), //小时 "h+": this.getHours(), //小时
"m+" : this.getMinutes(), //分 "m+": this.getMinutes(), //分
"s+" : this.getSeconds(), //秒 "s+": this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度 "q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S" : this.getMilliseconds() //毫秒 "S": this.getMilliseconds() //毫秒
}; };
if(/(y+)/.test(fmt)) { if (/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 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)){ return fmt;
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
} }
//温度传感器折线图 //温度传感器折线图
const temperatureTrend = function (sensorId) { const temperatureTrend = function (sensorId) {
Dialog({ Dialog({
title: "趋势分析", title: "趋势分析",
width: 1100, width: 1100,
iframeContent: { iframeContent: {
src: "/record/recordSensorData/getTemperatureTrend?id="+sensorId, src: "/record/recordSensorData/getTemperatureTrend?id=" + sensorId,
height: 600 height: 600
}, },
showButton: false 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