yinq
/
hw_iot_ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

生成图片

Browse Source
master
夜笙歌 6 months ago
parent 9600486e91
commit d7f7b6d063
1 changed files with 154 additions and 73 deletions
Show Stats Download Patch File Download Diff File

227
ruoyi-admin/src/main/resources/templates/system/ArrayTemperatureData/ArrayTemperatureData.html
Unescape Escape View File

@ -15,34 +15,111 @@
<i class="fa icon-grid"></i> 测控点信息
</div>
<div class="box-tools pull-right">
<a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息"><i
<a class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i
class="fa fa-edit"></i></a>
<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
<button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
class="fa fa-chevron-up"></i></button>
<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
<button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i
class="fa fa-chevron-down"></i></button>
<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i>
<button class="btn btn-box-tool" id="btnRefresh" title="刷新" type="button"><i class="fa fa-refresh"></i>
</button>
</div>
</div>
<div class="ui-layout-content">
<div id="tree" class="ztree"></div>
<div class="ztree" id="tree"></div>
</div>
</div>
</div>
<div class="ui-layout-center">
<div class="container-div">
<div class="row">
<div class="centerDiv">
<div id="temInfo" style="text-align: center;white-space: nowrap;font-size: 2vw"></div>
<div id="timeInfo" style="text-align: center;white-space: nowrap;font-size: 2vw"></div>
<div id="canvasDiv" style="width: 32vw;height:24vw;margin:0 auto;">
<canvas id="canvas"></canvas>
<div class="container-div">
<div class="row">
<div class="centerDiv centerDiv1">
<div id="temInfo1" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo1" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv1" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas1"></canvas>
</div>
</div>
<div class="centerDiv centerDiv2">
<div id="temInfo2" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo2" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv2" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas2"></canvas>
</div>
</div>
<div class="centerDiv centerDiv3">
<div id="temInfo3" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo3" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv3" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas3"></canvas>
</div>
</div>
<div class="centerDiv centerDiv4">
<div id="temInfo4" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo4" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv4" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas4"></canvas>
</div>
</div>
<div class="centerDiv centerDiv5">
<div id="temInfo5" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo5" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv5" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas5"></canvas>
</div>
</div>
<div class="centerDiv centerDiv6">
<div id="temInfo6" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo6" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv6" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas6"></canvas>
</div>
</div>
<div class="centerDiv centerDiv7">
<div id="temInfo7" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo7" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv7" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas7"></canvas>
</div>
</div>
<div class="centerDiv centerDiv8">
<div id="temInfo8" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo8" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv8" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas8"></canvas>
</div>
</div>
<div class="centerDiv centerDiv9">
<div id="temInfo9" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo9" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv9" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas9"></canvas>
</div>
</div>
<div class="centerDiv centerDiv10">
<div id="temInfo10" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo10" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv10" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas10"></canvas>
</div>
</div>
<div class="centerDiv centerDiv11">
<div id="temInfo11" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo11" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv11" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas11"></canvas>
</div>
</div>
<div class="centerDiv centerDiv12">
<div id="temInfo12" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo12" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv12" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas12"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
@ -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(`<span style="color:#ff0000">最高温度：${e.rows?.[0]?.maxTemperature || ''}℃</span> <span style="color:#0b05f7">最低温度：${e.rows?.[0]?.minTemperature || ''}℃</span> <span style="color:#0066e4">平均温度:${e.rows?.[0]?.avgTemperature || ''}℃</span>`)
$('#timeInfo').html(`<span style="color:#0b05f7">采集时间：${e.rows?.[0]?.collectTime || ''}</span> `)
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(`<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 = {}
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 @@
</html>
<style>
.centerDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1vw solid #fff;
border-radius: 0.25vw;
width: 20vw;
height: 19vw;
display: none;
margin-bottom: 6px;
}
</style>

Write Preview
Loading…
Cancel
Save