生成图片

ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html

@@ -47,12 +47,24 @@
         const t = v * (1 - (1 - f) * s);
 
         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;
+          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 {
@@ -86,11 +98,11 @@
         for (var i = 0; i <= sum; i++) {
           getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
         }
-        for(i in e.rows[0]){
-          if(i.includes('site')){
-            colors.push(getColorByTemperature[e.rows[0][i]])
-          }
+
+        for (let i = 1; i <= 768; i++) {
+          colors.push(getColorByTemperature[e.rows[0]['site' + i]])
         }
+        console.log(colors)
 
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
@@ -105,10 +117,10 @@
         const gridHeight = height / 24;
 
         // 遍历颜色数组，绘制矩形
-        for (let i = 0; i < 768; i++) {
-          const color = colors[i]; // 获取当前颜色
-          const x = (i % 32) * gridWidth; // 计算x坐标
-          const y = Math.floor(i / 32) * gridHeight; // 计算y坐标
+        for (let i = 1; i <= 768; i++) {
+          const color = colors[i - 1]; // 获取当前颜色
+          const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
+          const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
           // 绘制格子
           ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
           ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
@@ -117,7 +129,7 @@
       })
     }
     getData()
-    setInterval(getData,1000*2)
+    // setInterval(getData, 1000 * 2)
   })
 
 </script>