From b5320adb768ff9c3fba6525a7122e3118b261a05 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Thu, 2 Jul 2026 18:19:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=B9=B3=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DistributionCabinetMonitor.html           | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html b/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
index 5b79f65..ffeb389 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
@@ -30,6 +30,17 @@
         overflow: hidden;
     }
 
+    #chartDivs {
+        height: calc(100vh - 4.2vw - 0.8vw - 15px);
+        overflow-y: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    #chartDivs::-webkit-scrollbar {
+        display: none;
+    }
+
     .container-div {
         height: calc(100vh - 5vw);
     }
@@ -265,7 +276,18 @@
         height: 100%;
         width: 0;
         border-radius: inherit;
-        background: linear-gradient(90deg, #f6c343, #ffd86b);
+    }
+
+    .chartDiv .temperature-progress-bar.temp-green {
+        background: linear-gradient(90deg, #27ae60, #2ecc71);
+    }
+
+    .chartDiv .temperature-progress-bar.temp-yellow {
+        background: linear-gradient(90deg, #f39c12, #f6c343);
+    }
+
+    .chartDiv .temperature-progress-bar.temp-red {
+        background: linear-gradient(90deg, #e74c3c, #c0392b);
     }
 
     .chartDiv .mileage .num {
@@ -408,6 +430,20 @@
         return Math.max(0, Math.min(100, progress));
     }
 
+    function getTemperatureBarClass(temperature) {
+        var temp = parseFloat(temperature);
+        if (isNaN(temp)) {
+            return "";
+        }
+        if (temp < 45) {
+            return "temp-green";
+        } else if (temp < 60) {
+            return "temp-yellow";
+        } else {
+            return "temp-red";
+        }
+    }
+
     function renderMonitorCards(data) {
         $("#chartDivs").html("");
         data.forEach(function (v) {
@@ -417,6 +453,7 @@
             var maxTemperature = parseTemperature(v.illuminance);
             var avgTemperature = parseTemperature(v.tempreture);
             var progress = getTemperatureProgress(minTemperature, maxTemperature, avgTemperature);
+            var tempClass = getTemperatureBarClass(v.tempreture);
             var html = ""
                 + "<div class=\"chartDiv border\" style=\"background-image: url('" + cardImg + "');\">"
                 + "<div class=\"title\">" + (v.monitorName || v.monitorId || "-") + "</div>"
@@ -425,7 +462,7 @@
                 + "<div class=\"card-info\">"
                 + "<div class=\"temperature-min\">最低温度：" + formatValue(v.humidity) + "℃</div>"
                 + "<div class=\"temperature-average\">" + formatValue(v.illuminance) + "<span class=\"unit\">℃</span></div>"
-                + "<div class=\"temperature-progress\"><div class=\"temperature-progress-bar\" style=\"width: " + progress + "%;\"></div></div>"
+                + "<div class=\"temperature-progress\"><div class=\"temperature-progress-bar " + tempClass + "\" style=\"width: " + progress + "%;\"></div></div>"
                 + "<div class=\"temperature-max\">最高温度：" + formatValue(v.tempreture) + "℃</div>"
                 + "</div>"
                 + "</div>"