diff --git a/ruoyi-admin/src/main/resources/static/img/close.png b/ruoyi-admin/src/main/resources/static/img/close.png
new file mode 100644
index 0000000..f5cf82a
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/close.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/leftBtn.png b/ruoyi-admin/src/main/resources/static/img/leftBtn.png
new file mode 100644
index 0000000..6ebb53c
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/leftBtn.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/lessen.png b/ruoyi-admin/src/main/resources/static/img/lessen.png
new file mode 100644
index 0000000..27a91b8
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/lessen.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/magnify.png b/ruoyi-admin/src/main/resources/static/img/magnify.png
new file mode 100644
index 0000000..81b6617
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/magnify.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/rightBtn.png b/ruoyi-admin/src/main/resources/static/img/rightBtn.png
new file mode 100644
index 0000000..cf728b8
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/rightBtn.png differ
diff --git a/ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js b/ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js
index b9dc4a8..9a4796d 100644
--- a/ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js
+++ b/ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js
@@ -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
-    });
-}
\ No newline at end of file
+  Dialog({
+    title: "趋势分析",
+    width: 1100,
+    iframeContent: {
+      src: "/record/recordSensorData/getTemperatureTrend?id=" + sensorId,
+      height: 600
+    },
+    showButton: false
+  });
+}
diff --git a/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html b/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
index 9003d8c..a21f0a4 100644
--- a/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
+++ b/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
@@ -1,411 +1,492 @@
 <!DOCTYPE html>
 <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">
-    <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"/>
-    <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">
-    <style>
-        div::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 5px;
-            /*高宽分别对应横竖滚动条的尺寸*/
-            height: 1px;
-        }
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <meta content="webkit" name="renderer">
+  <title>设备监控</title>
+  <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 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 {
+      /*滚动条整体样式*/
+      width: 5px;
+      /*高宽分别对应横竖滚动条的尺寸*/
+      height: 1px;
+    }
 
-        div::-webkit-scrollbar-thumb {
-            /*滚动条里面小方块*/
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-            background: #004EA1;
-        }
+    div::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #004EA1;
+    }
 
-        div::-webkit-scrollbar-track {
-            /*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-            background: white;
-        }
+    div::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: white;
+    }
 
-        #company-name {
-            position: absolute;
-            top: 2%;
-            left: 4.7%;
-            width: 8.6%;
-            color: #FFFFFF;
-            font-size: 80%;
-            letter-spacing: 1px;
-            text-align: center;
-        }
+    #company-name {
+      position: absolute;
+      top: 2%;
+      left: 4.7%;
+      width: 8.6%;
+      color: #FFFFFF;
+      font-size: 80%;
+      letter-spacing: 1px;
+      text-align: center;
+    }
 
-        .ball-text {
-            position: absolute;
-            width: 4%;
-            color: #FFFFFF;
-            font-size: 110%;
-        }
+    .ball-text {
+      position: absolute;
+      width: 4%;
+      color: #FFFFFF;
+      font-size: 110%;
+    }
 
-        /*#launched-count {
-            bottom: 15.8%;
-            left: 21.2%;
-        }
+    /*#launched-count {
+        bottom: 15.8%;
+        left: 21.2%;
+    }
 
-        #error-alert {
-            bottom: 15.8%;
-            left: 29.8%;
-        }
+    #error-alert {
+        bottom: 15.8%;
+        left: 29.8%;
+    }
 
-        #online-count {
-            bottom: 15.8%;
-            left: 38.3%;
-        }*/
-
-        #sensor-list {
-            position: absolute;
-            width: 14%;
-            height: 91.4%;
-            top: 8.5%;
-            left: 0.04%;
-            border-radius: 0.3rem;
-            overflow: scroll;
-        }
+    #online-count {
+        bottom: 15.8%;
+        left: 38.3%;
+    }*/
+
+    #sensor-list {
+      position: absolute;
+      width: 14%;
+      height: 91.4%;
+      top: 8.5%;
+      left: 0.04%;
+      border-radius: 0.3rem;
+      overflow: scroll;
+    }
 
-        #sensor-list::-webkit-scrollbar {
-            display: none;
-        }
+    #sensor-list::-webkit-scrollbar {
+      display: none;
+    }
 
-        #transformer-name {
-            position: absolute;
-            width: 29%;
-            top: 1%;
-            left: 16%;
-            color: #00e4ff;
-            text-align: center;
-            font-size: 95%;
-            font-weight: bold;
-        }
+    #transformer-name {
+      position: absolute;
+      width: 29%;
+      top: 1%;
+      left: 16%;
+      color: #00e4ff;
+      text-align: center;
+      font-size: 95%;
+      font-weight: bold;
+    }
 
-        #sensor-list {
-            position: absolute;
-            left: 0;
-            top: 8.5%;
-            width: 14%;
-            height: 91.5%;
-            border-radius: 8px;
-            overflow-y: scroll;
-        }
+    #sensor-list {
+      position: absolute;
+      left: 0;
+      top: 8.5%;
+      width: 14%;
+      height: 91.5%;
+      border-radius: 8px;
+      overflow-y: scroll;
+    }
 
 
-        #sensor-list::-webkit-scrollbar {
-            display: none;
-        }
+    #sensor-list::-webkit-scrollbar {
+      display: none;
+    }
 
-        #transformer-model {
-            position: absolute;
-            left: 15.7%;
-            top: 6%;
-            width: 30%;
-            height: 54%;
-            padding: 4% 2% 0 2%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
+    #transformer-model {
+      position: absolute;
+      left: 15.7%;
+      top: 6%;
+      width: 30%;
+      height: 54%;
+      padding: 4% 2% 0 2%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-        #transformer-model > img {
-            width: 90%;
-        }
+    #transformer-model > img {
+      width: 90%;
+    }
 
-        .sidebar-first-level {
-            width: 100%;
-            color: #E0E0E0;
-            background: rgba(31, 172, 244, 0.1);
-            text-align: center;
-            font-size: 80%;
-            margin: 0;
-            padding: 5.8% 0;
-            border-radius: 0;
-            border-top: #0dcaf03c solid 1px;
-        }
+    .sidebar-first-level {
+      width: 100%;
+      color: #E0E0E0;
+      background: rgba(31, 172, 244, 0.1);
+      text-align: center;
+      font-size: 80%;
+      margin: 0;
+      padding: 5.8% 0;
+      border-radius: 0;
+      border-top: #0dcaf03c solid 1px;
+    }
 
-        .sidebar-first-level:hover {
-            color: #E0E0E0;
-            background: rgba(31, 172, 244, 0.25);
-        }
+    .sidebar-first-level:hover {
+      color: #E0E0E0;
+      background: rgba(31, 172, 244, 0.25);
+    }
 
-        .sidebar-first-level.active, .sidebar-first-level[aria-expanded=true] {
-            background: rgba(31, 172, 244, 0.03);
-        }
+    .sidebar-first-level.active, .sidebar-first-level[aria-expanded=true] {
+      background: rgba(31, 172, 244, 0.03);
+    }
 
-        .sidebar-second-level {
-            width: 100%;
-            color: #E0E0E0;
-            background: rgba(31, 172, 244, 0.03);
-            text-align: center;
-            font-size: 80%;
-            margin: 0;
-            padding: 5% 0 5% 6%;
-            border-radius: 0;
-            border-top: rgba(13, 202, 240, 0.06) solid 1px;
-            text-decoration: none;
-        }
+    .sidebar-second-level {
+      width: 100%;
+      color: #E0E0E0;
+      background: rgba(31, 172, 244, 0.03);
+      text-align: center;
+      font-size: 80%;
+      margin: 0;
+      padding: 5% 0 5% 6%;
+      border-radius: 0;
+      border-top: rgba(13, 202, 240, 0.06) solid 1px;
+      text-decoration: none;
+    }
 
-        .sidebar-second-level:hover, .sidebar-first-level.active {
-            color: #E0E0E0;
-            background: rgba(31, 172, 244, 0.3);
-        }
+    .sidebar-second-level:hover, .sidebar-first-level.active {
+      color: #E0E0E0;
+      background: rgba(31, 172, 244, 0.3);
+    }
 
-        .sidebar-second-level.active {
-            border-left: #1facf4 solid 3px;
-            background: rgba(31, 172, 244, 0.3);
-            box-shadow: rgba(31, 172, 244, 0.6) inset 1px 0 2px;
-            /*padding-right: 2px;*/
-        }
+    .sidebar-second-level.active {
+      border-left: #1facf4 solid 3px;
+      background: rgba(31, 172, 244, 0.3);
+      box-shadow: rgba(31, 172, 244, 0.6) inset 1px 0 2px;
+      /*padding-right: 2px;*/
+    }
 
-        .sidebar-item-icon {
-            color: #1facf4;
-            padding-right: 0.7rem;
-        }
+    .sidebar-item-icon {
+      color: #1facf4;
+      padding-right: 0.7rem;
+    }
 
-        #main-search-bar {
-            position: absolute;
-            width: 49%;
-            height: 6%;
-            left: 49%;
-            top: 7%;
-        }
+    #main-search-bar {
+      position: absolute;
+      width: 49%;
+      height: 6%;
+      left: 49%;
+      top: 7%;
+    }
 
-        .search-label {
-            color: #1facf4;
-            font-size: 65%;
-        }
+    .search-label {
+      color: #1facf4;
+      font-size: 65%;
+    }
 
-        .search-form-nav input.form-control {
-            background: none;
-            display: inline-block !important;
-            width: unset;
-            border-color: #1facf4;
-            font-size: 65%;
-            padding: 0.2rem 0.2rem;
-            color: #FFFFFF;
-        }
+    .search-form-nav input.form-control {
+      background: none;
+      display: inline-block !important;
+      width: unset;
+      border-color: #1facf4;
+      font-size: 65%;
+      padding: 0.2rem 0.2rem;
+      color: #FFFFFF;
+    }
 
-        .search-form-nav .form-control::placeholder {
-            color: #728A96;
-        }
+    .search-form-nav .form-control::placeholder {
+      color: #728A96;
+    }
 
-        #monitor-unit {
-            width: 10.5rem;
-            height: 2.5rem;
-        }
+    #monitor-unit {
+      width: 10.5rem;
+      height: 2.5rem;
+    }
 
-        #sensor-type {
-            width: 10.5rem;
-            height: 2.5rem;
-        }
+    #sensor-type {
+      width: 10.5rem;
+      height: 2.5rem;
+    }
 
-        #sensor-name {
-            width: 10.5rem;
-            height: 2.5rem;
-        }
+    #sensor-name {
+      width: 10.5rem;
+      height: 2.5rem;
+    }
 
-        .search-btn, .reset-btn {
-            border-color: #1facf4;
-            padding: 0.2rem 0.5rem;
-            font-size: 65%;
-            letter-spacing: 3px;
-        }
+    .search-btn, .reset-btn {
+      border-color: #1facf4;
+      padding: 0.2rem 0.5rem;
+      font-size: 65%;
+      letter-spacing: 3px;
+    }
 
-        .reset-btn {
-            color: #1facf4;
-        }
+    .reset-btn {
+      color: #1facf4;
+    }
 
-        .search-btn, .reset-btn:hover {
-            background-color: #1facf4;
-        }
+    .search-btn, .reset-btn:hover {
+      background-color: #1facf4;
+    }
 
-        #sensor-card-group {
-            position: absolute;
-            width: 49%;
-            height: 85%;
-            left: 49%;
-            top: 13%;
-            overflow-y: scroll;
-            display: flex;
-            flex-wrap: wrap;
-        }
+    #sensor-card-group {
+      position: absolute;
+      width: 49%;
+      height: 85%;
+      left: 49%;
+      top: 13%;
+      overflow-y: scroll;
+      display: flex;
+      flex-wrap: wrap;
+    }
 
-        #sensor-card-group > * {
-            display: inline-block !important;
-        }
+    #sensor-card-group > * {
+      display: inline-block !important;
+    }
 
-        #sensor-card-group::-webkit-scrollbar {
-            display: none;
-        }
+    #sensor-card-group::-webkit-scrollbar {
+      display: none;
+    }
 
-        .sensor-card {
-            background: url("/img/sensor-block.png") no-repeat #00000000;
-            background-size: 100% 100%;
-           /* width: 48%;
-            height: 47%;*/
-            width:30%;
-            height:40%;
-            border-radius: 0;
-            border: none;
-        }
+    .sensor-card {
+      background: url("/img/sensor-block.png") no-repeat #00000000;
+      background-size: 100% 100%;
+      /* width: 48%;
+       height: 47%;*/
+      width: 30%;
+      height: 40%;
+      border-radius: 0;
+      border: none;
+    }
 
-        .sensor-card:hover, .sensor-card.active {
-            background: url("/img/sensor-block.png") no-repeat #00000000;
-            background-size: 100% 100%;
-        }
+    .sensor-card:hover, .sensor-card.active {
+      background: url("/img/sensor-block.png") no-repeat #00000000;
+      background-size: 100% 100%;
+    }
 
-        .card-title {
-            position: absolute;
-            font-size: 80%;
-            top: 10%;
-            left: 5%;
-            color: #00f9ff;
-            width: 70%;
-        }
+    .card-title {
+      position: absolute;
+      font-size: 80%;
+      top: 10%;
+      left: 5%;
+      color: #00f9ff;
+      width: 70%;
+    }
 
-        .battery-icon {
-            position: absolute;
-            top: 10%;
-            right: 7%;
-            color: #1facf4;
-        }
+    .battery-icon {
+      position: absolute;
+      top: 10%;
+      right: 7%;
+      color: #1facf4;
+    }
 
-        .temp-label {
-            position: absolute;
-            font-size: 80%;
-            top: 40%;
-            left: 5%;
-            color: #1facf4;
-            width: 15%;
-        }
+    .temp-label {
+      position: absolute;
+      font-size: 80%;
+      top: 40%;
+      left: 5%;
+      color: #1facf4;
+      width: 15%;
+    }
 
-        .temp-value {
-            position: absolute;
-            font-size: 130%;
-            top: 43%;
-            left: 30%;
-            color: #00f9ff;
-            width: 60%;
-            font-family: "Agency FB", Arial, Calibri, DengXian, "Microsoft YaHei", SimSun, monospace;
-            font-weight: bold;
-            letter-spacing: 1px;
-        }
+    .temp-value {
+      position: absolute;
+      font-size: 130%;
+      top: 43%;
+      left: 30%;
+      color: #00f9ff;
+      width: 60%;
+      font-family: "Agency FB", Arial, Calibri, DengXian, "Microsoft YaHei", SimSun, monospace;
+      font-weight: bold;
+      letter-spacing: 1px;
+    }
 
-        .sensor-status {
-            position: absolute;
-            font-size: 50%;
-            bottom: 11.5%;
-            left: 12%;
-            color: rgba(0, 249, 255, 0.75);
-            width: 18%;
-        }
+    .sensor-status {
+      position: absolute;
+      font-size: 50%;
+      bottom: 11.5%;
+      left: 12%;
+      color: rgba(0, 249, 255, 0.75);
+      width: 18%;
+    }
 
-        .conn-status {
-            position: absolute;
-            font-size: 50%;
-            bottom: 11.5%;
-            left: 35%;
-            color: rgba(0, 249, 255, 0.75);
-            width: 18%;
-        }
+    .conn-status {
+      position: absolute;
+      font-size: 50%;
+      bottom: 11.5%;
+      left: 35%;
+      color: rgba(0, 249, 255, 0.75);
+      width: 18%;
+    }
 
-        .collect-time {
-            position: absolute;
-            font-size: 50%;
-            bottom: 11.5%;
-            left: 58%;
-            color: rgba(0, 249, 255, 0.75);
-            width: 36%;
-        }
+    .collect-time {
+      position: absolute;
+      font-size: 50%;
+      bottom: 11.5%;
+      left: 58%;
+      color: rgba(0, 249, 255, 0.75);
+      width: 36%;
+    }
 
-        #treeview-selectable ul li {
-            border: 1px solid #094B7A;
-            border-left: 0px solid #094B7A;
-            height: 50px;
-            display: flex;
-            align-items: center;
-            color: #B6C0CA;
-        }
+    #treeview-selectable ul li {
+      border: 1px solid #094B7A;
+      border-left: 0px solid #094B7A;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      color: #B6C0CA;
+    }
 
-        .list-group-item {
-            background: transparent;
-        }
+    .list-group-item {
+      background: transparent;
+    }
 
-        #treeview-selectable ul .node-treeview-selectable:not(.node-disabled):hover {
-            background-color: #083A61;
-            opacity: 0.2;
-            color: white;
-            border: 1px solid #094B7A;
-            border-left: 3px solid #094B7A;
-        }
+    #treeview-selectable ul .node-treeview-selectable:not(.node-disabled):hover {
+      background-color: #083A61;
+      opacity: 0.2;
+      color: white;
+      border: 1px solid #094B7A;
+      border-left: 3px solid #094B7A;
+    }
 
-        .sensor-Text {
-            display: flex;
-            width: 29%;
-            height: 35%;
-            position: absolute;
-            bottom: 2%;
-            left: 16.2%;
-            border: 0px solid red;
-            color: #00f9ff;
-            padding: 1em 0.5em 1em 2.5em;
-            align-items: flex-start;
-            justify-content: space-around;
-            flex-wrap: nowrap;
-            flex-direction: column;
-            align-content: stretch;
-            overflow-x: hidden;
-            overflow-y: auto;
-            font-size:1.5rem;
-        }
+    .sensor-Text {
+      display: flex;
+      width: 29%;
+      height: 35%;
+      position: absolute;
+      bottom: 2%;
+      left: 16.2%;
+      border: 0px solid red;
+      color: #00f9ff;
+      padding: 1em 0.5em 1em 2.5em;
+      align-items: flex-start;
+      justify-content: space-around;
+      flex-wrap: nowrap;
+      flex-direction: column;
+      align-content: stretch;
+      overflow-x: hidden;
+      overflow-y: auto;
+      font-size: 1.5rem;
+    }
 
-        div::-webkit-scrollbar {
-            display: none;
-        }
+    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%;
+    }
 
-    </style>
-
-    <script th:src="@{/js/Iot-ui/jquery.min.js}"></script>
-    <th:block th:include="include :: layout-latest-js"/>
-    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
-    <script th:src="@{/js/fontawesome/all.min.js}"></script>
-    <script th:src="@{/js/autoscroll-table.js}"></script>
-    <script th:src="@{/js/auto-update.js}"></script>
-    <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 th:src="@{/js/Iot-ui/deviceMonitor.js}"></script>
-    <script th:src="@{/js/Iot-ui/MiniDialog-es5.min.js}"></script>
+    .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>
+  <th:block th:include="include :: layout-latest-js"/>
+  <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
+  <script th:src="@{/js/fontawesome/all.min.js}"></script>
+  <script th:src="@{/js/autoscroll-table.js}"></script>
+  <script th:src="@{/js/auto-update.js}"></script>
+  <script th:src="@{/js/font-adjust.js}"></script>
+  <th:block th:include="include :: echarts-js"/>
+  <th:block th:include="include :: ztree-js"/>
+  <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%">
+  <!--id="filterText"-->
+  <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">
-    <div id="treeview-selectable"></div>
+  <div id="treeview-selectable"></div>
 </div>
 
 <!--
@@ -414,7 +495,7 @@
 
 <div id="transformer-name">监控单元</div>
 <div id="transformer-model">
-    <!--<img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元">-->
+  <!--<img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元">-->
 </div>
 
 <div class="sensor-Text" id="sensor-text">
@@ -422,222 +503,272 @@
 
 
 <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="请输入传感器名称">
-
-        <button class="btn btn-primary search-btn">搜索</button>
-    </form>
+  <form action="#" class="search-form-nav">
+    <input id="monitorUnitId" name="monitorUnitId" type="hidden">
+    <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 () {
+      $.ajax({
+        url: "/iot/deviceMonitor/getMonitorUnitTree",  // 发送的路径
+        type: "get",  // 发送方式
+        dataType: 'JSON',  // 反序列化
+        success: (res) => {  // 成功获取到后端返回结果的回调函数
+          initSelectableTree(res);
+          return res;
+        },
+        error: () => {  // 发送失败的回调函数
+          console.log("失败");
+        }
+      })
+    }
 
-    $(function () {
-        var search = function () {
-            $.ajax({
-                url: "/iot/deviceMonitor/getMonitorUnitTree",  // 发送的路径
-                type: "get",  // 发送方式
-                dataType: 'JSON',  // 反序列化
-                success: (res) => {  // 成功获取到后端返回结果的回调函数
-                    initSelectableTree(res);
-                    return res;
-                },
-                error: () => {  // 发送失败的回调函数
-                    console.log("失败");
-                }
-            })
-        }
+    var initSelectableTree = function (defaultData) {
+      return $('#treeview-selectable').treeview({
+        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, params);
+          }
+        },
+        onNodeUnselected: function (event, node) {
+          $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
+        }
+      });
+
+    };
+    var $selectableTree = initSelectableTree(search());
+
+    var findSelectableNodes = function () {
+      return $selectableTree.treeview('search', [$('#input-select-node').val(), {
+        ignoreCase: false,
+        exactMatch: false,
+      }]);
+    };
+    var selectableNodes = findSelectableNodes();
 
-        var initSelectableTree = function (defaultData) {
-            return $('#treeview-selectable').treeview({
-                data: defaultData,
-                multiSelect: $('#chk-select-multi').is(':checked'),
-                onNodeSelected: function (event, node) {
-                    $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
-                    if (node.nodeId > 0) {
-                        monitorUnitModule(node.href);
-                        sensorCollectionRefresh(node.href);
-                    }
-                },
-                onNodeUnselected: function (event, node) {
-                    $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
-                }
-            });
-
-        };
-        var $selectableTree = initSelectableTree(search());
-
-        var findSelectableNodes = function () {
-            return $selectableTree.treeview('search', [$('#input-select-node').val(), {
-                ignoreCase: false,
-                exactMatch: false,
-            }]);
-        };
-        var selectableNodes = findSelectableNodes();
-
-        $('#input-select-node').on('keyup', function (e) {
-            selectableNodes = findSelectableNodes();
-            $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
-        });
+    $('#input-select-node').on('keyup', function (e) {
+      selectableNodes = findSelectableNodes();
+      $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
     });
+  });
 </script>
 
 <script type="text/javascript">
-    $(() => {
-        let unitId = getParams("id");
-        if (unitId != null) {
-            monitorUnitModule(unitId)
-            sensorCollectionRefresh(unitId);
-        } else {
-            $.ajax({
-                url: "/iot/deviceMonitor/getFirstMonitorUnit",
-                type: "get",
-                success: (res) => {
-                    monitorUnitModule(res)
-                    sensorCollectionRefresh(res);
-                },
-                error: () => {
-                    console.log("失败");
-                }
-            })
-        }
+  $(() => {
+    let unitId = getParams("id");
+    if (unitId != null) {
+      thisID = unitId
+      monitorUnitModule(unitId)
+      sensorCollectionRefresh(unitId, params);
+    } else {
+      $.ajax({
+        url: "/iot/deviceMonitor/getFirstMonitorUnit",
+        type: "get",
+        success: (res) => {
+          thisID = res
+          monitorUnitModule(res)
+          sensorCollectionRefresh(res, params);
+        },
+        error: () => {
+          console.log("失败");
+        }
+      })
+    }
+  })
+  const monitorUnitModule = function (monitorUnitId) {
+    $.ajax({
+      url: "/iot/deviceMonitor/getMonitorUnitInfo?monitorunitId=" + monitorUnitId,
+      type: "get",
+      dataType: 'JSON',
+      success: (res) => {
+        console.log("监控单元信息:" + res[0].deviceParams)
+        $('#transformer-model').html("");
+        let e = '<img src="' + res[0].monitorunitImage + '"  >';
+        $("#transformer-model").append(e);
+
+        $('#sensor-text').html("");
+        let html = '<p>设备编号：<span>' + res[0].monitorunitName + '</span></p>';
+        if (res[0].deviceParams.length > 0) {
+          res[0].deviceParams.map(x => {
+            html += '<p>' + x.paramTitle + '：<span>' + x.paramValue + '</span></p>';
+          });
+        }
+        html += '    <p>所属变电站：<span>' + res[0].substationName + '</span></p>';
+        $("#sensor-text").append(html);
+      },
+      error: () => {
+        console.log("失败");
+      }
     })
-    const monitorUnitModule = function (monitorUnitId) {
-        $.ajax({
-            url: "/iot/deviceMonitor/getMonitorUnitInfo?monitorunitId=" + monitorUnitId,
-            type: "get",
-            dataType: 'JSON',
-            success: (res) => {
-                console.log("监控单元信息:" + res[0].deviceParams)
-                $('#transformer-model').html("");
-                let e = '<img src="' + res[0].monitorunitImage + '"  >';
-                $("#transformer-model").append(e);
-
-                $('#sensor-text').html("");
-                let html = '<p>设备编号：<span>' + res[0].monitorunitName + '</span></p>';
-                if(res[0].deviceParams.length > 0){
-                    res[0].deviceParams.map(x => {
-                        html += '<p>' + x.paramTitle + '：<span>' + x.paramValue + '</span></p>';
-                    });
-                }
-                html += '    <p>所属变电站：<span>' + res[0].substationName + '</span></p>';
-                $("#sensor-text").append(html);
-            },
-            error: () => {
-                console.log("失败");
-            }
-        })
+  }
+</script>
+
+<script type="text/javascript">
+  function getParams(key) {
+    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if (r != null) {
+      return unescape(r[2]);
+    }
+    return null;
+  };
+
+  function formatter(thistime, fmt) {
+    let $this = new Date(thistime)
+    let 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
+  }
 </script>
 
 <script type="text/javascript">
-    function getParams(key) {
-        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
-        var r = window.location.search.substr(1).match(reg);
-        if (r != null) {
-            return unescape(r[2]);
-        }
-        return null;
+  $(document).ready(function () {
+    $.cookie('userID', '0000');
+    var wsImpl = window.WebSocket || window.MozWebSocket;
+    console.log("connecting to server ..");
+    //window.ws = new wsImpl('ws://121.36.58.109:7181');
+    window.ws = new wsImpl('ws://47.122.6.3:7181');
+    ws.onmessage = function (evt) {
+      let result = $.parseJSON(evt.data);
+      switch (result.type) {
+        case "CMD_REPORTDATA":
+          reportData(result);
+          break;
+        case "CMD_SENSORSTATUS":
+          reportStatus(result);
+          break;
+        default:
+          break;
+      }
     };
-
-    function formatter(thistime, fmt) {
-        let $this = new Date(thistime)
-        let 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
+    ws.onopen = function () {
+      console.log(".. connection open");
+    };
+    ws.onclose = function () {
+      console.log(".. connection closed");
+    }
+  });
+
+  const send = function (message) {
+    ws.send(message);
+  }
+
+  //上报数据处理
+  const reportData = function (result) {
+    if (result.datatype == "image") {
+      console.log(result);
+      let params = getParameter(result.datatype);
+      for (let i = 0; i < params.length; i++) {
+
+        if (params[i].paramTitle == "imgstr") {
+          document.getElementById(result.sensorId + "imgstr").src = result.imgstr.replace("D:/ruoyi/uploadPath", "/profile");
+        }
+
+        if (!params[i].paramTitle.includes("img")) {
+          console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle]);
+          document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle];
+        }
+      }
+    } else {
+      let params = getParameter(result.datatype);
+      for (let i = 0; i < params.length; i++) {
+        console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle]);
+        document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle];
+      }
     }
+
+    // document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
+    document.getElementById(result.sensorId + "collectTime").innerHTML = result['collectTime'] == null ? "-" : collectTime(result['collectTime']);
+  }
+  //上报设备状态
+  const reportStatus = function (result) {
+    //document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
+  }
 </script>
+<script>
+  $('#sensor-card-group').scroll(function (e) {
 
-<script type="text/javascript">
-    $(document).ready(function () {
-        $.cookie('userID', '0000');
-        var wsImpl = window.WebSocket || window.MozWebSocket;
-        console.log("connecting to server ..");
-        //window.ws = new wsImpl('ws://121.36.58.109:7181');
-        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);
-                    break;
-                case "CMD_SENSORSTATUS":
-                    reportStatus(result);
-                    break;
-                default:
-                    break;
-            }
-        };
-        ws.onopen = function () {
-            console.log(".. connection open");
-        };
-        ws.onclose = function () {
-            console.log(".. connection closed");
-        }
-    });
+    var divHeight = $(this).height();
 
-    const send = function (message) {
-        ws.send(message);
-    }
-
-    //上报数据处理
-    const reportData = function (result) {
-        if (result.datatype == "image") {
-            console.log(result);
-            let params = getParameter(result.datatype);
-            for (let i = 0; i < params.length; i++) {
-
-                if (params[i].paramTitle == "imgstr") {
-                    document.getElementById(result.sensorId + "imgstr").src = result.imgstr.replace("D:/ruoyi/uploadPath", "/profile");
-                }
-
-                if (!params[i].paramTitle.includes("img")) {
-                    console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle]);
-                    document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle.includes("position") ? "alert" + params[i].paramTitle : params[i].paramTitle];
-                }
-            }
-        } else {
-            let params = getParameter(result.datatype);
-            for (let i = 0; i < params.length; i++) {
-                console.log(result.sensorId + params[i].paramTitle + "数据：" + result[params[i].paramTitle]);
-                document.getElementById(result.sensorId + params[i].paramTitle).innerHTML = params[i].paramText + "：" + result[params[i].paramTitle];
-            }
-        }
+    var nScrollHeight = $(this)[0].scrollHeight;
 
-       // document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
-        document.getElementById(result.sensorId + "collectTime").innerHTML = result['collectTime'] == null ? "-" : collectTime(result['collectTime']);
-    }
-    //上报设备状态
-    const reportStatus = function (result) {
-        //document.getElementById(result.sensorId + "sensorStatus").innerHTML = result['sensorStatus'] == null ? "-" : sensorStatus(result['sensorStatus']);
+    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>