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)
})