生成图片

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

@@ -24,11 +24,11 @@
 
 </script>
 <script>
-  $(()=>{
+  $(() => {
 
     let getColorByTemperature = {}
 
-    function getGradientColor(level,sum) {
+    function getGradientColor(level, sum) {
       // 确保级别在1到50之间
       level = Math.max(1, Math.min(sum, level));
 
@@ -46,13 +46,25 @@
         const q = v * (1 - f * s);
         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;
+        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 {
@@ -69,35 +81,35 @@
       return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
     }
 
-    const getData = () =>{
-      $.post(prefix+'/newDataStreak',(e)=>{
+    const getData = () => {
+      $.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>`)
         $('#timeInfo').html(`<span style="color:#0b05f7">采集时间：${e.rows[0].collectTime}</span> `)
         let colors = []
         let tems = []
-        for(i in e.rows[0]){
-          if(i.includes('site')){
+        for (i in e.rows[0]) {
+          if (i.includes('site')) {
             tems.push(e.rows[0][i])
           }
         }
         let sum = Math.max(...tems) - Math.min(...tems)
-        getColorByTemperature={}
+        getColorByTemperature = {}
 
         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]])
+          getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
         }
+
+        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');
 
         // 设置canvas的宽度和高度
         const width = $('#canvasDiv').width();
-        const height =($('#canvasDiv').width()/32) *24;
+        const height = ($('#canvasDiv').width() / 32) * 24;
         canvas.width = width;
         canvas.height = height;
 
@@ -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,18 +129,18 @@
       })
     }
     getData()
-    setInterval(getData,1000*2)
+    // setInterval(getData, 1000 * 2)
   })
 
 </script>
 </body>
 </html>
 <style>
-  .centerDiv{
+  .centerDiv {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     border: 1vw solid #fff;
     border-radius: 0.25vw;
   }