diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java
index 0496ea8..14afa12 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java
@@ -18,10 +18,9 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.text.ParseException;
+import java.text.SimpleDateFormat;
+import java.util.*;
 import java.util.stream.Collectors;
 
 /**
@@ -40,6 +39,8 @@ public class DeviceMonitorController {
 
   @Autowired private StringRedisTemplate redisTemplate;
 
+  private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+
   /**
    * 获取监控单元列表
    *
@@ -143,6 +144,8 @@ public class DeviceMonitorController {
 
                             info = JsonUtils.JSONObjectToMap(datavalue);
 
+                            info.put("collectTime",jsonObject.get("collectTime").toString());
+
                             info.put("datatype", data.get("datatype"));
                         }
 
@@ -156,6 +159,8 @@ public class DeviceMonitorController {
 
                         info.put("sensorLocation", y.getSensorLocation());
 
+                        info.put("sensorStatus",y.getSensorStatus());
+
                         result.add(info);
                     });
         });
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 de61696..47a585e 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
@@ -23,63 +23,147 @@ const getParameter = function (dataType){
 }
 
 const sensorCollectionRefresh = function (monitorUnitId) {
-    setInterval(function() {
-        $.ajax({
-            url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
-            type: "get",
-            dataType: 'JSON',
-            success: (res) => {
-                $("#sensor-card-group").html("");
-                res.map(x=>{
-                    let params = getParameter(x.datatype);
-                    createDeviceModule(x,params);
-                })
-            },
-            error: () => {
-                console.log("失败");
-            }
-        })
-    }, 5000);
+    /*setInterval(function() {
+
+    }, 5000);*/
+
+    $.ajax({
+        url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
+        type: "get",
+        dataType: 'JSON',
+        success: (res) => {
+            $("#sensor-card-group").html("");
+            res.map(x=>{
+                let params = getParameter(x.datatype);
+                createDeviceModule(x,params);
+            })
+        },
+        error: () => {
+            console.log("失败");
+        }
+    })
 }
 
 const createDeviceModule = function (sensor,params) {
 
-    let html = '<div class="card sensor-card" id="1" style="border: 0px solid red;height: 17.6rem;margin-right: 2%;margin-top:2%">';
+    let html = '<div class="card sensor-card" style="border: 0px solid red;margin-right: 2%;margin-top:2%;overflow-x: hidden; overflow-y: auto;">';
     switch (sensor.datatype) {
         case "temperature":
             html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+
+            html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
             for (let i=0; i<params.length; i++) {
                 html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
             }
             html += '</div>';
+            html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
+                html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
+                html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
+            html += '</div>';
+
             $("#sensor-card-group").append(html);
             break;
 
         case "image":
-            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
-            html += '</div>';
+            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 100%;border:0px solid #00f9ff;">${sensor.sensorId}&nbsp;&nbsp;${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</div>`
+                html += '<div style="position: absolute;height: 80%;width: 55%;border-right: 1px dashed #1CA2E7;left: 0%">';
+                    let imgurl = sensor.imgstr.replace("D:/ruoyi/uploadPath","/profile");
+                    html += '<img src="'+imgurl+'" display="inline-block" vertical-align="middle" width="100%" height="100%">'
+                html += '</div>'
+                html += '<div style="position: absolute;width: 45%;height: 80%;border: 0px dashed #1CA2E7;right:0%;overflow-x: hidden; overflow-y: auto;">';
+                    html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
+                    for (let i=0; i<params.length; i++) {
+                        if(!params[i].paramTitle.includes("img")) {
+                            html += `<p style="padding-top: 1px;font-size: 80%;color: #00f9ff;width: 100%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</p>`;
+                        }
+                    }
+                html += '</div>';
+            html += `</div>`;
+
             $("#sensor-card-group").append(html);
             break;
 
         case "smoke":
             html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+
+            html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
             for (let i=0; i<params.length; i++) {
                 html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
             }
             html += '</div>';
+            html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
+            html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
+            html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
+            html += '</div>';
+
             $("#sensor-card-group").append(html);
             break;
+            break;
 
         case "platen":
             html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+
+            html += '<div style="position: absolute;width: 98%;height: 65%;border-top: 1px dashed #1CA2E7;border-bottom: 1px dashed #1CA2E7;left:1%;overflow-x: hidden; overflow-y: auto;">';
             for (let i=0; i<params.length; i++) {
                 html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
             }
             html += '</div>';
+            html += '<div style="position: absolute;left: 1%;width: 98%;height: 18%;border: 0px solid red;bottom: 1%; padding-top: 2%;padding-left: 25%">';
+            html+=`<p style="color: #00f9ff;float: left;">${sensor['sensorStatus'] == null ? "-" : sensorStatus(sensor['sensorStatus'])}</p>`;
+            html+=`<p style="color: #00f9ff;float: left;margin-left: 10%">${sensor['collectTime'] == null ? "-" : collectTime(sensor['collectTime'])}</p>`;
+            html += '</div>';
+
             $("#sensor-card-group").append(html);
             break;
+            break;
 
         default:
             break;
     }
+}
+
+const collectTime = function (time){
+    let oldTime = (new Date(time)).getTime();
+    let curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
+    return curTime;
+}
+
+const sensorStatus = function (status) {
+    let result = "-";
+    switch (status) {
+        case 0:
+            result = `<span style="color:#00FF00;font-size: 80%;font-weight:bolder;">在线</span>`;
+            break;
+        case 1:
+            result = `<span style="color:#F8AC59;font-size: 80%;font-weight:bolder;">离线</span>`;
+            break;
+        case 2:
+            result = `<span style="color:red;font-size: 80%;font-weight:bolder;">告警</span>`;
+            break;
+        default:
+            result = `<span style="font-size: 80%;font-weight:bolder;">异常</span>`;
+            break;
+    }
+    return result;
+}
+
+Date.prototype.format = function(fmt) {
+    var o = {
+        "M+" : this.getMonth()+1,                 //月份
+        "d+" : this.getDate(),                    //日
+        "h+" : this.getHours(),                   //小时
+        "m+" : this.getMinutes(),                 //分
+        "s+" : this.getSeconds(),                 //秒
+        "q+" : Math.floor((this.getMonth()+3)/3), //季度
+        "S"  : this.getMilliseconds()             //毫秒
+    };
+    if(/(y+)/.test(fmt)) {
+        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
+    }
+    for(var k in o) {
+        if(new RegExp("("+ k +")").test(fmt)){
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
+        }
+    }
+    return fmt;
 }
\ No newline at end of file
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 8c10f9a..5acace9 100644
--- a/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
+++ b/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
@@ -17,8 +17,6 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
     <style>
         div::-webkit-scrollbar {
             /*滚动条整体样式*/
@@ -260,8 +258,10 @@
         .sensor-card {
             background: url("/img/sensor-block.png") no-repeat #00000000;
             background-size: 100% 100%;
-            width: 27rem;
-            height: 14.6rem;
+            /*width: 27rem;
+            height: 17.6rem;*/
+            width: 48%;
+            height: 47%;
             border-radius: 0;
             border: none;
         }
@@ -373,7 +373,10 @@
             align-content: stretch;
             overflow-x: hidden;
             overflow-y: auto;
+        }
 
+        div::-webkit-scrollbar{
+            display: none;
         }
 
     </style>