|
|
@ -141,6 +141,15 @@
|
|
|
|
queryDeptTree()
|
|
|
|
queryDeptTree()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getData = () => {
|
|
|
|
|
|
|
|
postData()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
getData()
|
|
|
|
|
|
|
|
setInterval(getData, 1000 * 10)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function postData() {
|
|
|
|
function getGradientColor(level, sum) {
|
|
|
|
function getGradientColor(level, sum) {
|
|
|
|
// 确保级别在1到50之间
|
|
|
|
// 确保级别在1到50之间
|
|
|
|
level = Math.max(1, Math.min(sum, level));
|
|
|
|
level = Math.max(1, Math.min(sum, level));
|
|
|
@ -193,87 +202,82 @@
|
|
|
|
// 返回格式化的CSS颜色字符串
|
|
|
|
// 返回格式化的CSS颜色字符串
|
|
|
|
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
|
|
|
|
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$.post(prefix + '/newDataStreak', {monitorId}, (e) => {
|
|
|
|
const getData = () => {
|
|
|
|
$(".centerDiv").css({'display': 'none'})
|
|
|
|
$.post(prefix + '/newDataStreak', {monitorId}, (e) => {
|
|
|
|
for (let index = 1; index <= e.data.length; index++) {
|
|
|
|
$(".centerDiv").css({'display': 'none'})
|
|
|
|
$('.centerDiv' + index).css({'display': 'inline-block'})
|
|
|
|
for (let index = 1; index <= e.data.length; index++) {
|
|
|
|
let getColorByTemperature = {}
|
|
|
|
$('.centerDiv' + index).css({'display': 'inline-block'})
|
|
|
|
$('#temInfo' + index).html(`<span style="color:#ff0000">最高温度:${e.data?.[index - 1]?.maxTemperature || ''}℃</span> <span style="color:#0b05f7">最低温度:${e.data?.[index - 1]?.minTemperature || ''}℃</span> <span style="color:#0066e4">平均温度:${e.data?.[index - 1]?.avgTemperature || ''}℃</span>`)
|
|
|
|
let getColorByTemperature = {}
|
|
|
|
$('#timeInfo' + index).html(`<span style="color:#0b05f7">名称:${e.data?.[index - 1]?.monitorName || ''} 采集时间:${e.data?.[index - 1]?.collectTime || ''}</span> `)
|
|
|
|
$('#temInfo' + index).html(`<span style="color:#ff0000">最高温度:${e.data?.[index - 1]?.maxTemperature || ''}℃</span> <span style="color:#0b05f7">最低温度:${e.data?.[index - 1]?.minTemperature || ''}℃</span> <span style="color:#0066e4">平均温度:${e.data?.[index - 1]?.avgTemperature || ''}℃</span>`)
|
|
|
|
let colors = []
|
|
|
|
$('#timeInfo' + index).html(`<span style="color:#0b05f7">名称:${e.data?.[index - 1]?.monitorName || ''} 采集时间:${e.data?.[index - 1]?.collectTime || ''}</span> `)
|
|
|
|
let tems = []
|
|
|
|
let colors = []
|
|
|
|
for (i in e.data[index - 1]) {
|
|
|
|
let tems = []
|
|
|
|
if (i.includes('site')) {
|
|
|
|
for (i in e.data[index - 1]) {
|
|
|
|
tems.push(e?.data?.[index - 1]?.[i])
|
|
|
|
if (i.includes('site')) {
|
|
|
|
|
|
|
|
tems.push(e?.data?.[index - 1]?.[i])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let sum = Math.max(...tems) - Math.min(...tems)
|
|
|
|
|
|
|
|
getColorByTemperature = {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i <= sum; i++) {
|
|
|
|
|
|
|
|
getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let sum = Math.max(...tems) - Math.min(...tems)
|
|
|
|
|
|
|
|
getColorByTemperature = {}
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 1; i <= 768; i++) {
|
|
|
|
for (var i = 0; i <= sum; i++) {
|
|
|
|
colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
|
|
|
|
getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById('canvas' + index);
|
|
|
|
for (let i = 1; i <= 768; i++) {
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 设置canvas的宽度和高度
|
|
|
|
const canvas = document.getElementById('canvas' + index);
|
|
|
|
const width = $('#canvasDiv' + index).width();
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const height = ($('#canvasDiv' + index).width() / 32) * 24;
|
|
|
|
|
|
|
|
canvas.width = width;
|
|
|
|
|
|
|
|
canvas.height = height;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gridWidth = width / 32;
|
|
|
|
// 设置canvas的宽度和高度
|
|
|
|
const gridHeight = height / 24;
|
|
|
|
const width = $('#canvasDiv' + index).width();
|
|
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
const height = ($('#canvasDiv' + index).width() / 32) * 24;
|
|
|
|
|
|
|
|
canvas.width = width;
|
|
|
|
|
|
|
|
canvas.height = height;
|
|
|
|
|
|
|
|
|
|
|
|
// 遍历颜色数组,绘制矩形
|
|
|
|
const gridWidth = width / 32;
|
|
|
|
for (let i = 1; i <= 768; i++) {
|
|
|
|
const gridHeight = height / 24;
|
|
|
|
const color = colors[i - 1]; // 获取当前颜色
|
|
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
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.data[index - 1]['site' + i]) {
|
|
|
|
// 绘制格子
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
|
|
|
|
ctx.fillStyle = 'blue';
|
|
|
|
ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
|
|
|
|
ctx.fillText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
}
|
|
|
|
ctx.strokeStyle = 'blue';
|
|
|
|
for (let i = 1; i <= 768; i++) {
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
|
|
|
|
ctx.strokeText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (Math.max(...tems) === e.data[index - 1]['site' + i]) {
|
|
|
|
if (Math.min(...tems) === e.data[index - 1]['site' + i]) {
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
ctx.fillStyle = '#fff';
|
|
|
|
ctx.fillStyle = 'blue';
|
|
|
|
ctx.fillText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
ctx.fillText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
ctx.strokeStyle = '#fff';
|
|
|
|
ctx.strokeStyle = 'blue';
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
ctx.strokeText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
getData()
|
|
|
|
|
|
|
|
setInterval(getData, 1000 * 4)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function queryDeptTree() {
|
|
|
|
function queryDeptTree() {
|
|
|
|
var url = ctx + "system/Monitor/treeData?monitorType=" + 30;
|
|
|
|
var url = ctx + "system/Monitor/treeData?monitorType=" + 30;
|
|
|
@ -286,7 +290,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
function zOnClick(event, treeId, treeNode) {
|
|
|
|
function zOnClick(event, treeId, treeNode) {
|
|
|
|
monitorId = treeNode.id;
|
|
|
|
monitorId = treeNode.id;
|
|
|
|
console.log(111, monitorId)
|
|
|
|
console.log('zOnClick:', monitorId)
|
|
|
|
|
|
|
|
postData()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|