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

master
yinq 3 months ago
parent 1dbe6bda82
commit 4c0e49fb13

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

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

@ -2,6 +2,11 @@ package com.ruoyi.system.service.impl;
import java.util.HashMap; import java.util.HashMap;
import java.util.List; 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.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
import com.ruoyi.system.mapper.TArraytemperaturedataMapper; import com.ruoyi.system.mapper.TArraytemperaturedataMapper;
@ -21,6 +26,9 @@ public class TArraytemperaturedataServiceImpl implements ITArraytemperaturedataS
@Autowired @Autowired
private TArraytemperaturedataMapper tArraytemperaturedataMapper; private TArraytemperaturedataMapper tArraytemperaturedataMapper;
@Autowired
private T_MonitorMapper t_MonitorMapper;
/** /**
* *
* *
@ -100,6 +108,18 @@ public class TArraytemperaturedataServiceImpl implements ITArraytemperaturedataS
*/ */
@Override @Override
public List<TArraytemperaturedata> selectNewDataStreak(TArraytemperaturedata tArraytemperaturedata) { 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); return tArraytemperaturedataMapper.selectNewDataStreak(tArraytemperaturedata);
} }

@ -1592,7 +1592,13 @@
ROW_NUMBER() OVER (PARTITION BY monitorId ORDER BY collectTime DESC) AS rn ROW_NUMBER() OVER (PARTITION BY monitorId ORDER BY collectTime DESC) AS rn
FROM T_ArrayTemperatureData FROM T_ArrayTemperatureData
WHERE collectTime > (GETDATE() - 1) 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.* SELECT m.monitorName,t.*
FROM RankedData t FROM RankedData t

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

Loading…
Cancel
Save