From 7757747c917a8eb49383e05997f358de114215ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Wed, 24 Apr 2024 18:04:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ArrayTemperatureData.html                 | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html b/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html
index 42596a3..8202d97 100644
--- a/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html
+++ b/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html
@@ -26,24 +26,49 @@
 
     let getColorByTemperature = {}
 
-    function getHexColor(value) {
-      // 确保值在 0 到 50 之间
-      value = Math.min(Math.max(value, 0), 10);
+    function getGradientColor(level) {
+      // 确保级别在1到50之间
+      level = Math.max(1, Math.min(50, level));
 
-      // 计算红色和蓝色分量
-      var red = Math.round((value / 50) * 255);
-      var blue = Math.round(((50 - value) / 50) * 255);
+      // 将级别映射到0到1之间的色相值
+      const hue = (0.6 - (0.6 / 50) * level) % 1; // 0.6是红色的色相值
+      const saturation = 1; // 饱和度最大
+      const value = 1; // 亮度最大
 
-      // 将分量转换为十六进制格式
-      var redHex = red.toString(16).padStart(2, '0');
-      var blueHex = blue.toString(16).padStart(2, '0');
+      // 转换为HSV到RGB
+      function hsvToRgb(h, s, v) {
+        let r, g, b;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = v * (1 - s);
+        const q = v * (1 - f * s);
+        const t = v * (1 - (1 - f) * s);
 
-      // 返回十六进制颜色值
-      return `#${redHex}00${blueHex}`;
+        switch(i % 6){
+          case 0: r = v, g = t, b = p; break;
+          case 1: r = q, g = v, b = p; break;
+          case 2: r = p, g = v, b = t; break;
+          case 3: r = p, g = q, b = v; break;
+          case 4: r = t, g = p, b = v; break;
+          case 5: r = v, g = p, b = q; break;
+        }
+
+        return {
+          r: Math.round(r * 255),
+          g: Math.round(g * 255),
+          b: Math.round(b * 255)
+        };
+      }
+
+      // 获取RGB颜色值
+      const rgb = hsvToRgb(hue, saturation, value);
+
+      // 返回格式化的CSS颜色字符串
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
     }
 
     for (var i = 0; i <= 10; i++) {
-      getColorByTemperature[20+i] = getHexColor(i)
+      getColorByTemperature[20+i] = getGradientColor(i)
     }
     $.post(prefix+'/newDataStreak',(e)=>{
       let colors = []