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

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

@ -1,8 +1,8 @@
const getParameter = function (dataType){
const getParameter = async function (dataType) {
var returnData;
let formData = new FormData();
formData.append("sensorTypeId", dataType);
$.ajax({
await $.ajax({
type: "post",
url: "/base/sysParamConfig/getParameter",
data: formData,
@ -11,31 +11,33 @@ const getParameter = function (dataType){
json: 'callback',
processData: false,
contentType: false,
async: false,
async: true,
success: function (json) {
returnData = json;
return returnData;
},
error: function () {
alert("错误");
// alert("错误");
}
});
return returnData;
}
const sensorCollectionRefresh = function (monitorUnitId) {
/*setInterval(function() {
}, 500);*/
const sensorCollectionRefresh = function (monitorUnitId,params) {
console.log(params)
$.ajax({
url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
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(x=>{
let params = getParameter(x.datatype);
createDeviceModule(x,params);
}
res.map(async (x) => {
let params = await getParameter(x.datatype);
createDeviceModule(x, params);
})
loading = false
},
error: () => {
console.log("失败");
@ -43,21 +45,23 @@ const sensorCollectionRefresh = function (monitorUnitId) {
})
}
const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -67,12 +71,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -82,14 +86,14 @@ const createDeviceModule = function (sensor,params) {
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%">'
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 += `<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>';
@ -104,12 +108,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -119,12 +123,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -134,12 +138,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -149,12 +153,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -164,13 +168,13 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -180,12 +184,12 @@ const createDeviceModule = function (sensor,params) {
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>`;
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 += `<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);
@ -193,21 +197,33 @@ const createDeviceModule = function (sensor,params) {
}
}
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){
const collectTime = function (time) {
let oldTime = (new Date(time)).getTime();
let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime;
@ -232,22 +248,22 @@ const sensorStatus = function (status) {
return result;
}
Date.prototype.format = function(fmt) {
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() //毫秒
"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));
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;
@ -259,7 +275,7 @@ const temperatureTrend = function (sensorId) {
title: "趋势分析",
width: 1100,
iframeContent: {
src: "/record/recordSensorData/getTemperatureTrend?id="+sensorId,
src: "/record/recordSensorData/getTemperatureTrend?id=" + sensorId,
height: 600
},
showButton: false

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

@ -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 {
/*滚动条整体样式*/
@ -259,8 +259,8 @@
background-size: 100% 100%;
/* width: 48%;
height: 47%;*/
width:30%;
height:40%;
width: 30%;
height: 40%;
border-radius: 0;
border: none;
}
@ -372,13 +372,94 @@
align-content: stretch;
overflow-x: hidden;
overflow-y: auto;
font-size:1.5rem;
font-size: 1.5rem;
}
div::-webkit-scrollbar {
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("失败");
@ -526,7 +635,7 @@
$('#sensor-text').html("");
let html = '<p>设备编号：<span>' + res[0].monitorunitName + '</span></p>';
if(res[0].deviceParams.length > 0){
if (res[0].deviceParams.length > 0) {
res[0].deviceParams.map(x => {
html += '<p>' + x.paramTitle + '：<span>' + x.paramValue + '</span></p>';
});
@ -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>

Write Preview
Loading…
Cancel
Save