生成图片

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 = []