生产图片

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

@@ -6276,37 +6276,42 @@
 <script>
   $(()=>{
 
-    // 假设有一个颜色数组
+    let getColorByTemperature = {
-    const colors = [];
+      23:'#ff0000',
-    for(let i = 0;i<768;i+=3){
+      24:'#0000ff'
-      colors.push('#FF0000')
-      colors.push('#00FF00')
-      colors.push('#0000FF')
     }
+    $.post(prefix+'/newDataStreak',(e)=>{
+      let colors = []
+      for(i in e.rows[0]){
+        if(i.includes('site')){
+          colors.push(getColorByTemperature[e.rows[0][i]])
+        }
+      }
 
-    // 获取canvas元素并设置上下文
+      const canvas = document.getElementById('canvas');
-    const canvas = document.getElementById('canvas');
+      const ctx = canvas.getContext('2d');
-    const ctx = canvas.getContext('2d');
 
-    // 设置canvas的宽度和高度
+      // 设置canvas的宽度和高度
-    const width = $('#canvasDiv').width();
+      const width = $('#canvasDiv').width();
-    const height =($('#canvasDiv').width()/32) *24;
+      const height =($('#canvasDiv').width()/32) *24;
-    canvas.width = width;
+      canvas.width = width;
-    canvas.height = height;
+      canvas.height = height;
 
-    const gridWidth = width / 32;
+      const gridWidth = width / 32;
-    const gridHeight = height / 24;
+      const gridHeight = height / 24;
 
-    // 遍历颜色数组，绘制矩形
+      // 遍历颜色数组，绘制矩形
-    for (let i = 0; i < 768; i++) {
+      for (let i = 0; i < 768; i++) {
-      const color = colors[i]; // 获取当前颜色
+        const color = colors[i]; // 获取当前颜色
-      const x = (i % 32) * gridWidth; // 计算x坐标
+        const x = (i % 32) * gridWidth; // 计算x坐标
-      const y = Math.floor(i / 32) * gridHeight; // 计算y坐标
+        const y = Math.floor(i / 32) * gridHeight; // 计算y坐标
 
-      // 绘制格子
+        // 绘制格子
-      ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
+        ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
-      ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
+        ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
-    }
+      }
+
+    })
   })
 
 </script>