生成图片

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

@@ -72,40 +72,44 @@
     for (var i = 0; i <= 10; i++) {
       getColorByTemperature[20+i] = getGradientColor(i)
     }
-    $.post(prefix+'/newDataStreak',(e)=>{
+    const getData = () =>{
-      console.log(e)
+      $.post(prefix+'/newDataStreak',(e)=>{
-      $('#temInfo').html(`<span style="color:#ff0000">最高温度：${e.rows[0].maxTemperature}℃</span> <span style="color:#0b05f7">最低温度：${e.rows[0].minTemperature}℃</span> <span style="color:#0066e4">平均温度:${e.rows[0].avgTemperature}℃</span>`)
+        console.log(e)
-      $('#timeInfo').html(`<span style="color:#0b05f7">采集时间：${e.rows[0].collectTime}℃</span> `)
+        $('#temInfo').html(`<span style="color:#ff0000">最高温度：${e.rows[0].maxTemperature}℃</span> <span style="color:#0b05f7">最低温度：${e.rows[0].minTemperature}℃</span> <span style="color:#0066e4">平均温度:${e.rows[0].avgTemperature}℃</span>`)
-      let colors = []
+        $('#timeInfo').html(`<span style="color:#0b05f7">采集时间：${e.rows[0].collectTime}</span> `)
-      for(i in e.rows[0]){
+        let colors = []
-        if(i.includes('site')){
+        for(i in e.rows[0]){
-          colors.push(getColorByTemperature[e.rows[0][i]])
+          if(i.includes('site')){
+            colors.push(getColorByTemperature[e.rows[0][i]])
+          }
         }
-      }
 
-      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); // 绘制矩形格子
-      }
+        }
 
-    })
+      })
+    }
+    getData()
+    setInterval(getData,1000*60)
   })
 
 </script>