修改振动实时监控

修改配电柜实时监控

ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html

@@ -8,10 +8,50 @@
 </head>
 
 <style>
+    body.gray-bg {
+        background: #000;
+        color: #fff;
+    }
+
+    .ui-layout-west,
+    .ui-layout-center,
+    .container-div,
+    .search-collapse,
+    .box,
+    .box-main,
+    .box-header,
+    .ui-layout-content {
+        background: #000;
+        color: #fff;
+    }
+
+    .box {
+        border-color: #333;
+    }
+
+    .box-header {
+        border-bottom-color: #333;
+    }
+
+    .box-title,
+    .btn-box-tool,
+    .ztree,
+    .ztree li a,
+    .ztree li a.curSelectedNode {
+        color: #fff;
+    }
+
+    .ztree li a.curSelectedNode {
+        background-color: #1a1a1a;
+        border-color: #333;
+    }
+
     .chartDiv {
         width: 16%;
+        box-sizing: border-box;
         position: relative;
         display: inline-block;
+        vertical-align: top;
         margin-bottom: 0.4vw;
     }
 
@@ -20,8 +60,13 @@
     }
 
     .border {
-        border: 1px solid #67C23A;
-        padding: 0 1vw;
+        min-height: 10.5vw;
+        border: 0;
+        background-color: transparent;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 0.9vw 1vw 0.8vw;
     }
 
     .chartDiv .chart {
@@ -32,17 +77,48 @@
     }
 
     .chartDiv .title {
-        font-size: 22px;
+        font-size: 1.4vw;
         font-weight: 700;
         width: 100%;
         text-align: center;
+        color: #fff;
+        line-height: 1.8vw;
+        margin-bottom: 0.35vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .chartDiv .time {
-        font-size: 16px;
-        color: #409EFF;
+        font-size: 1vw;
+        color: #d9d9d9;
         width: 100%;
-        text-align: center;
+        text-align: left;
+    }
+
+    .chartDiv .card-body {
+        display: flex;
+        align-items: center;
+        gap: 0.65vw;
+    }
+
+    .chartDiv .card-image {
+        flex: 0 0 35%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .chartDiv .card-image img {
+        display: block;
+        width: 100%;
+        max-height: 6.8vw;
+        object-fit: contain;
+    }
+
+    .chartDiv .card-info {
+        flex: 1;
+        min-width: 0;
     }
 
     .chartDiv .mileage {
@@ -61,15 +137,19 @@
     }
 
     .chartDiv .text1 {
-        font-size: 1.1vw;
-        line-height: 1.4vw;
+        font-size: 0.82vw;
+        line-height: 1.35vw;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .chartDiv .mileage .num {
         font-size: 1vw;
         margin: 0 0.1vw;
         padding: 0.05vw 0.1vw;
-        background-color: #0001;
+        background-color: #1a1a1a;
         display: inline-block;
     }
 </style>
@@ -134,6 +214,10 @@
 
     let time1 = null
 
+    function formatValue(value) {
+        return (value === null || value === undefined || value === "") ? "-" : value;
+    }
+
     function queryDeptTree() {
         var url = ctx + "system/Monitor/treeData?monitorType=" + 20;
         var options = {
@@ -160,14 +244,20 @@
                     data.forEach((v, k) => {
                         var isOver = (v.isThreshold === 1 || v.isThreshold === '1');
                         var redStyle = isOver ? 'color:#d9534f;font-weight:700;' : '';
+                        var cardImg = ctx + "img/card.png";
+                        var sensorImg = ctx + "img/dj.png";
                         let html = `
-          <div class="chartDiv border" id="chartDiv">
-          <div class="title" style="font-size: 1.4vw;${redStyle}">${v.monitorName}</div>
-          <div class="time" style="font-size: 1vw">${v.collectTime}</div>
-
-          <div class="text1">速度：${v.speed}mm/s</div>
-          <div class="text1">位移：${v.displacement}um</div>
-          <div class="text1" style="${redStyle}">温度：${v.temperature}℃</div>
+          <div class="chartDiv border" id="chartDiv" style="background-image: url('${cardImg}');">
+          <div class="title" style="${redStyle}">${formatValue(v.monitorName)}</div>
+          <div class="card-body">
+          <div class="card-image"><img src="${sensorImg}" alt="振动传感器"></div>
+          <div class="card-info">
+          <div class="time">${formatValue(v.collectTime)}</div>
+          <div class="text1">速度：${formatValue(v.speed)}mm/s</div>
+          <div class="text1">位移：${formatValue(v.displacement)}um</div>
+          <div class="text1" style="${redStyle}">温度：${formatValue(v.temperature)}℃</div>
+          </div>
+          </div>
           </div>
           `
                         $("#chartDivs").append(html)

ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html

@@ -8,10 +8,50 @@
 </head>
 
 <style>
+    body.gray-bg {
+        background: #000;
+        color: #fff;
+    }
+
+    .ui-layout-west,
+    .ui-layout-center,
+    .container-div,
+    .search-collapse,
+    .box,
+    .box-main,
+    .box-header,
+    .ui-layout-content {
+        background: #000;
+        color: #fff;
+    }
+
+    .box {
+        border-color: #333;
+    }
+
+    .box-header {
+        border-bottom-color: #333;
+    }
+
+    .box-title,
+    .btn-box-tool,
+    .ztree,
+    .ztree li a,
+    .ztree li a.curSelectedNode {
+        color: #fff;
+    }
+
+    .ztree li a.curSelectedNode {
+        background-color: #1a1a1a;
+        border-color: #333;
+    }
+
     .chartDiv {
         width: 16%;
+        box-sizing: border-box;
         position: relative;
         display: inline-block;
+        vertical-align: top;
         margin-bottom: 0.4vw;
     }
 
@@ -20,8 +60,13 @@
     }
 
     .border {
-        border: 1px solid #67C23A;
-        padding: 0 1vw;
+        min-height: 10.5vw;
+        border: 0;
+        background-color: transparent;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 0.9vw 1vw 0.8vw;
     }
 
     .chartDiv .chart {
@@ -32,17 +77,48 @@
     }
 
     .chartDiv .title {
-        font-size: 22px;
+        font-size: 1vw;
         font-weight: 700;
         width: 100%;
         text-align: center;
+        color: #fff;
+        line-height: 1.8vw;
+        margin-bottom: 0.35vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .chartDiv .time {
-        font-size: 16px;
-        color: #409EFF;
+        font-size: 0.8vw;
+        color: #d9d9d9;
         width: 100%;
-        text-align: center;
+        text-align: left;
+    }
+
+    .chartDiv .card-body {
+        display: flex;
+        align-items: center;
+        gap: 0.65vw;
+    }
+
+    .chartDiv .card-image {
+        flex: 0 0 35%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .chartDiv .card-image img {
+        display: block;
+        width: 100%;
+        max-height: 6.8vw;
+        object-fit: contain;
+    }
+
+    .chartDiv .card-info {
+        flex: 1;
+        min-width: 0;
     }
 
     .chartDiv .mileage {
@@ -61,15 +137,19 @@
     }
 
     .chartDiv .text1 {
-        font-size: 1.1vw;
-        line-height: 1.4vw;
+        font-size: 0.75vw;
+        line-height: 1.35vw;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .chartDiv .mileage .num {
         font-size: 1vw;
         margin: 0 0.1vw;
         padding: 0.05vw 0.1vw;
-        background-color: #0001;
+        background-color: #1a1a1a;
         display: inline-block;
     }
 </style>
@@ -138,13 +218,20 @@
     function renderMonitorCards(data) {
         $("#chartDivs").html("");
         data.forEach(function (v) {
+            var cardImg = ctx + "img/card.png";
+            var cabinetImg = ctx + "img/dg.png";
             var html = ""
-                + "<div class=\"chartDiv border\">"
-                + "<div class=\"title\" style=\"font-size: 1.4vw;\">" + (v.monitorName || v.monitorId || "-") + "</div>"
-                + "<div class=\"time\" style=\"font-size: 1vw\">" + formatValue(v.collectTime) + "</div>"
-                + "<div class=\"text1\">最低温度（湿度）：" + formatValue(v.humidity) + "%RH</div>"
-                + "<div class=\"text1\">最高温度（照度）：" + formatValue(v.illuminance) + "</div>"
-                + "<div class=\"text1\">平均温度（温度）：" + formatValue(v.tempreture) + "℃</div>"
+                + "<div class=\"chartDiv border\" style=\"background-image: url('" + cardImg + "');\">"
+                + "<div class=\"title\">" + (v.monitorName || v.monitorId || "-") + "</div>"
+                + "<div class=\"card-body\">"
+                + "<div class=\"card-image\"><img src=\"" + cabinetImg + "\" alt=\"配电柜\"></div>"
+                + "<div class=\"card-info\">"
+                + "<div class=\"time\">" + formatValue(v.collectTime) + "</div>"
+                + "<div class=\"text1\">最低温度：" + formatValue(v.humidity) + "℃</div>"
+                + "<div class=\"text1\">最高温度：" + formatValue(v.illuminance) + "℃</div>"
+                + "<div class=\"text1\">平均温度：" + formatValue(v.tempreture) + "℃</div>"
+                + "</div>"
+                + "</div>"
                 + "</div>";
             $("#chartDivs").append(html);
         });
@@ -185,6 +272,7 @@
             time1 = setInterval(intervalFun, 10000);
         }
     }
+
     function getCheckedMonitorIds() {
         var treeObj = $.fn.zTree.getZTreeObj("tree");
         if (!treeObj) {