-
@@ -63,7 +140,6 @@
$('body').layout({initClosed: panehHidden, west__size: 245});
queryDeptTree()
- let getColorByTemperature = {}
function getGradientColor(level, sum) {
// 确保级别在1到50之间
@@ -117,74 +193,79 @@
// 返回格式化的CSS颜色字符串
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
}
+
const getData = () => {
$.post(prefix + '/newDataStreak', {monitorId}, (e) => {
- $('#temInfo').html(`
最高温度：${e.rows?.[0]?.maxTemperature || ''}℃ 最低温度：${e.rows?.[0]?.minTemperature || ''}℃ 平均温度:${e.rows?.[0]?.avgTemperature || ''}℃`)
- $('#timeInfo').html(`
采集时间：${e.rows?.[0]?.collectTime || ''} `)
- let colors = []
- let tems = []
- for (i in e.rows[0]) {
- if (i.includes('site')) {
- tems.push(e?.rows?.[0]?.[i])
+ for (let index = 1; index <= e.data.length; index++) {
+ $('.centerDiv' + index).css({'display': 'inline-block'})
+ let getColorByTemperature = {}
+ $('#temInfo' + index).html(`
最高温度：${e.data?.[index - 1]?.maxTemperature || ''}℃ 最低温度：${e.data?.[index - 1]?.minTemperature || ''}℃ 平均温度:${e.data?.[index - 1]?.avgTemperature || ''}℃`)
+ $('#timeInfo' + index).html(`
名称：${e.data?.[index - 1]?.monitorName || ''} 采集时间：${e.data?.[index - 1]?.collectTime || ''} `)
+ let colors = []
+ let tems = []
+ for (i in e.data[index - 1]) {
+ if (i.includes('site')) {
+ tems.push(e?.data?.[index - 1]?.[i])
+ }
}
- }
- let sum = Math.max(...tems) - Math.min(...tems)
- getColorByTemperature = {}
+ let sum = Math.max(...tems) - Math.min(...tems)
+ getColorByTemperature = {}
- for (var i = 0; i <= sum; i++) {
- getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
- }
+ for (var i = 0; i <= sum; i++) {
+ getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
+ }
- for (let i = 1; i <= 768; i++) {
- colors.push(getColorByTemperature[e?.rows?.[0]?.['site' + i]])
- }
+ for (let i = 1; i <= 768; i++) {
+ colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
+ }
- const canvas = document.getElementById('canvas');
- const ctx = canvas.getContext('2d');
+ const canvas = document.getElementById('canvas' + index);
+ const ctx = canvas.getContext('2d');
- // 设置canvas的宽度和高度
- const width = $('#canvasDiv').width();
- const height = ($('#canvasDiv').width() / 32) * 24;
- canvas.width = width;
- canvas.height = height;
+ // 设置canvas的宽度和高度
+ const width = $('#canvasDiv' + index).width();
+ const height = ($('#canvasDiv' + index).width() / 32) * 24;
+ canvas.width = width;
+ canvas.height = height;
- const gridWidth = width / 32;
- const gridHeight = height / 24;
- ctx.clearRect(0, 0, width, height)
+ const gridWidth = width / 32;
+ const gridHeight = height / 24;
+ ctx.clearRect(0, 0, width, height)
- // 遍历颜色数组，绘制矩形
- 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坐标
+ // 遍历颜色数组，绘制矩形
+ 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); // 绘制矩形格子
- }
- for (let i = 1; i <= 768; i++) {
- const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
- const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
-
- if (Math.min(...tems) === e.rows[0]['site' + i]) {
- ctx.font = '12px Arial';
- ctx.fillStyle = 'blue';
- ctx.fillText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
- ctx.strokeStyle = 'blue';
- ctx.lineWidth = 1;
- ctx.strokeText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
+ // 绘制格子
+ ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
+ ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
}
+ for (let i = 1; i <= 768; i++) {
+ const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
+ const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
- if (Math.max(...tems) === e.rows[0]['site' + i]) {
- ctx.font = '12px Arial';
- ctx.fillStyle = '#fff';
- ctx.fillText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
- ctx.strokeStyle = '#fff';
- ctx.lineWidth = 1;
- ctx.strokeText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
- }
+ if (Math.min(...tems) === e.data[index - 1]['site' + i]) {
+ ctx.font = '12px Arial';
+ ctx.fillStyle = 'blue';
+ ctx.fillText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
+ ctx.strokeStyle = 'blue';
+ ctx.lineWidth = 1;
+ ctx.strokeText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
+ }
+ if (Math.max(...tems) === e.data[index - 1]['site' + i]) {
+ ctx.font = '12px Arial';
+ ctx.fillStyle = '#fff';
+ ctx.fillText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 1;
+ ctx.strokeText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
+ }
+
+ }
}
})
@@ -204,7 +285,7 @@
function zOnClick(event, treeId, treeNode) {
monitorId = treeNode.id;
- console.log(111,monitorId)
+ console.log(111, monitorId)
}
}
@@ -234,11 +315,11 @@