From 3b56e2f5a7d2d369b00dd307c60660b2221d65b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Thu, 25 Apr 2024 16:21:28 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ArrayTemperatureData.html | 66 ++++++++++--------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html b/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html index f0958e1..28d158b 100644 --- a/ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html +++ b/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)=>{ - console.log(e) - $('#temInfo').html(`最高温度:${e.rows[0].maxTemperature}℃ 最低温度:${e.rows[0].minTemperature}℃ 平均温度:${e.rows[0].avgTemperature}℃`) - $('#timeInfo').html(`采集时间:${e.rows[0].collectTime}℃ `) - let colors = [] - for(i in e.rows[0]){ - if(i.includes('site')){ - colors.push(getColorByTemperature[e.rows[0][i]]) + const getData = () =>{ + $.post(prefix+'/newDataStreak',(e)=>{ + console.log(e) + $('#temInfo').html(`最高温度:${e.rows[0].maxTemperature}℃ 最低温度:${e.rows[0].minTemperature}℃ 平均温度:${e.rows[0].avgTemperature}℃`) + $('#timeInfo').html(`采集时间:${e.rows[0].collectTime} `) + let colors = [] + for(i in e.rows[0]){ + if(i.includes('site')){ + colors.push(getColorByTemperature[e.rows[0][i]]) + } } - } - const canvas = document.getElementById('canvas'); - const ctx = canvas.getContext('2d'); - - // 设置canvas的宽度和高度 - const width = $('#canvasDiv').width(); - const height =($('#canvasDiv').width()/32) *24; - canvas.width = width; - canvas.height = height; - - const gridWidth = width / 32; - 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坐标 - // 绘制格子 - ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值 - ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子 - } + const canvas = document.getElementById('canvas'); + const ctx = canvas.getContext('2d'); + + // 设置canvas的宽度和高度 + const width = $('#canvasDiv').width(); + const height =($('#canvasDiv').width()/32) *24; + canvas.width = width; + canvas.height = height; + + const gridWidth = width / 32; + 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坐标 + // 绘制格子 + ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值 + ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子 + } - }) + }) + } + getData() + setInterval(getData,1000*60) })