change - 温度阵列图像数据查询优化

master
yinq 3 months ago
parent 1dbe6bda82
commit 4c0e49fb13

@ -141,6 +141,15 @@
queryDeptTree()
const getData = () => {
postData()
}
getData()
setInterval(getData, 1000 * 10)
})
function postData() {
function getGradientColor(level, sum) {
// 确保级别在1到50之间
level = Math.max(1, Math.min(sum, level));
@ -193,87 +202,82 @@
// 返回格式化的CSS颜色字符串
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
}
const getData = () => {
$.post(prefix + '/newDataStreak', {monitorId}, (e) => {
$(".centerDiv").css({'display': 'none'})
for (let index = 1; index <= e.data.length; index++) {
$('.centerDiv' + index).css({'display': 'inline-block'})
let getColorByTemperature = {}
$('#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>`)
$('#timeInfo' + index).html(`<span style="color:#0b05f7">名称:${e.data?.[index - 1]?.monitorName || ''} 采集时间:${e.data?.[index - 1]?.collectTime || ''}</span> `)
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 = {}
for (var i = 0; i <= sum; i++) {
getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
$.post(prefix + '/newDataStreak', {monitorId}, (e) => {
$(".centerDiv").css({'display': 'none'})
for (let index = 1; index <= e.data.length; index++) {
$('.centerDiv' + index).css({'display': 'inline-block'})
let getColorByTemperature = {}
$('#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>`)
$('#timeInfo' + index).html(`<span style="color:#0b05f7">名称:${e.data?.[index - 1]?.monitorName || ''} 采集时间:${e.data?.[index - 1]?.collectTime || ''}</span> `)
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 = {}
for (let i = 1; i <= 768; i++) {
colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
}
for (var i = 0; i <= sum; i++) {
getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
}
const canvas = document.getElementById('canvas' + index);
const ctx = canvas.getContext('2d');
for (let i = 1; i <= 768; i++) {
colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
}
// 设置canvas的宽度和高度
const width = $('#canvasDiv' + index).width();
const height = ($('#canvasDiv' + index).width() / 32) * 24;
canvas.width = width;
canvas.height = height;
const canvas = document.getElementById('canvas' + index);
const ctx = canvas.getContext('2d');
const gridWidth = width / 32;
const gridHeight = height / 24;
ctx.clearRect(0, 0, width, height)
// 设置canvas的宽度和高度
const width = $('#canvasDiv' + index).width();
const height = ($('#canvasDiv' + index).width() / 32) * 24;
canvas.width = width;
canvas.height = 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坐标
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坐标
// 绘制格子
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 = '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.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);
}
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);
}
}
}
})
}
getData()
setInterval(getData, 1000 * 4)
})
})
}
function queryDeptTree() {
var url = ctx + "system/Monitor/treeData?monitorType=" + 30;
@ -286,7 +290,8 @@
function zOnClick(event, treeId, treeNode) {
monitorId = treeNode.id;
console.log(111, monitorId)
console.log('zOnClick', monitorId)
postData()
}
}

@ -2,6 +2,7 @@ package com.ruoyi.system.domain;
import java.math.BigDecimal;
import java.util.Date;
import java.util.List;
import com.ruoyi.common.annotation.Excel;
@ -4677,6 +4678,16 @@ public class TArraytemperaturedata extends BaseEntity {
@Excel(name = "位置768")
private BigDecimal Site768;
private List<String> monitorList;
public List<String> getMonitorList() {
return monitorList;
}
public void setMonitorList(List<String> monitorList) {
this.monitorList = monitorList;
}
public String getMonitorName() {
return monitorName;
}

@ -2,6 +2,11 @@ package com.ruoyi.system.service.impl;
import java.util.HashMap;
import java.util.List;
import java.util.stream.Collectors;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.system.domain.T_Monitor;
import com.ruoyi.system.mapper.T_MonitorMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ruoyi.system.mapper.TArraytemperaturedataMapper;
@ -21,6 +26,9 @@ public class TArraytemperaturedataServiceImpl implements ITArraytemperaturedataS
@Autowired
private TArraytemperaturedataMapper tArraytemperaturedataMapper;
@Autowired
private T_MonitorMapper t_MonitorMapper;
/**
*
*
@ -100,6 +108,18 @@ public class TArraytemperaturedataServiceImpl implements ITArraytemperaturedataS
*/
@Override
public List<TArraytemperaturedata> selectNewDataStreak(TArraytemperaturedata tArraytemperaturedata) {
String monitorId = tArraytemperaturedata.getMonitorId();
if (StringUtils.isEmpty(monitorId)){
return null;
}
T_Monitor monitor = new T_Monitor();
monitor.setpMonitorid(monitorId);
List<T_Monitor> tMonitors = t_MonitorMapper.selectT_MonitorList(monitor);
if (tMonitors.size() == 0){
return null;
}
List<String> monitorList = tMonitors.stream().map(T_Monitor::getMonitorId).collect(Collectors.toList());
tArraytemperaturedata.setMonitorList(monitorList);
return tArraytemperaturedataMapper.selectNewDataStreak(tArraytemperaturedata);
}

@ -1592,7 +1592,13 @@
ROW_NUMBER() OVER (PARTITION BY monitorId ORDER BY collectTime DESC) AS rn
FROM T_ArrayTemperatureData
WHERE collectTime > (GETDATE() - 1)
<if test="monitorId != null and monitorId != ''">and monitorId like concat(#{monitorId}, '%')</if>
<!-- <if test="monitorId != null and monitorId != ''">and monitorId like concat(#{monitorId}, '%')</if>-->
<if test="monitorList != null and monitorList.size > 0">
and monitorId IN
<foreach item="monitorId" collection="monitorList" open="(" separator="," close=")">
#{monitorId}
</foreach>
</if>
)
SELECT m.monitorName,t.*
FROM RankedData t

@ -66,6 +66,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<include refid="selectT_MonitorVo"/>
<where>
<if test="monitorId != null "> and monitorId = #{monitorId}</if>
<if test="pMonitorid != null "> and (p_monitorId = #{pMonitorid} OR monitorId = #{pMonitorid})</if>
<if test="monitorType != null "> and monitorType = #{monitorType}</if>
<if test="isKeyMonitor != null "> and isKeyMonitor = #{isKeyMonitor}</if>
<if test="monitorStatus != null "> and monitorStatus = #{monitorStatus}</if>

Loading…
Cancel
Save