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> 测控点信息 <i class="fa icon-grid"></i> 测控点信息
</div> </div>
<div class="box-tools pull-right"> <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> 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> 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> 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> </button>
</div> </div>
</div> </div>
<div class="ui-layout-content"> <div class="ui-layout-content">
<div id="tree" class="ztree"></div> <div class="ztree" id="tree"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="ui-layout-center"> <div class="ui-layout-center">
<div class="container-div"> <div class="container-div">
<div class="row"> <div class="row">
<div class="centerDiv"> <div class="centerDiv centerDiv1">
<div id="temInfo" style="text-align: center;white-space: nowrap;font-size: 2vw"></div> <div id="temInfo1" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="timeInfo" style="text-align: center;white-space: nowrap;font-size: 2vw"></div> <div id="timeInfo1" style="text-align: center;white-space: nowrap;font-size: 0.8vw"></div>
<div id="canvasDiv" style="width: 32vw;height:24vw;margin:0 auto;"> <div id="canvasDiv1" style="width: 18vw;height:10vw;margin:0 auto;">
<canvas id="canvas"></canvas> <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> </div>
</div> </div>
</div>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/> <th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/> <th:block th:include="include :: ztree-js"/>
@ -63,7 +140,6 @@
$('body').layout({initClosed: panehHidden, west__size: 245}); $('body').layout({initClosed: panehHidden, west__size: 245});
queryDeptTree() queryDeptTree()
let getColorByTemperature = {}
function getGradientColor(level, sum) { function getGradientColor(level, sum) {
// 确保级别在1到50之间 // 确保级别在1到50之间
@ -117,74 +193,79 @@
// 返回格式化的CSS颜色字符串 // 返回格式化的CSS颜色字符串
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
} }
const getData = () => { const getData = () => {
$.post(prefix + '/newDataStreak', {monitorId}, (e) => { $.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>`) for (let index = 1; index <= e.data.length; index++) {
$('#timeInfo').html(`<span style="color:#0b05f7">采集时间：${e.rows?.[0]?.collectTime || ''}</span> `) $('.centerDiv' + index).css({'display': 'inline-block'})
let colors = [] let getColorByTemperature = {}
let tems = [] $('#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>`)
for (i in e.rows[0]) { $('#timeInfo' + index).html(`<span style="color:#0b05f7">名称：${e.data?.[index - 1]?.monitorName || ''} 采集时间：${e.data?.[index - 1]?.collectTime || ''}</span> `)
if (i.includes('site')) { let colors = []
tems.push(e?.rows?.[0]?.[i]) 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)
let sum = Math.max(...tems) - Math.min(...tems) getColorByTemperature = {}
getColorByTemperature = {}
for (var i = 0; i <= sum; i++) { for (var i = 0; i <= sum; i++) {
getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum) getColorByTemperature[(Math.min(...tems)) + i] = getGradientColor(i, sum)
} }
for (let i = 1; i <= 768; i++) { for (let i = 1; i <= 768; i++) {
colors.push(getColorByTemperature[e?.rows?.[0]?.['site' + i]]) colors.push(getColorByTemperature[e?.data?.[index - 1]?.['site' + i]])
} }
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas' + index);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// 设置canvas的宽度和高度 // 设置canvas的宽度和高度
const width = $('#canvasDiv').width(); const width = $('#canvasDiv' + index).width();
const height = ($('#canvasDiv').width() / 32) * 24; const height = ($('#canvasDiv' + index).width() / 32) * 24;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
const gridWidth = width / 32; const gridWidth = width / 32;
const gridHeight = height / 24; const gridHeight = height / 24;
ctx.clearRect(0, 0, width, height) ctx.clearRect(0, 0, width, height)
// 遍历颜色数组，绘制矩形 // 遍历颜色数组，绘制矩形
for (let i = 1; i <= 768; i++) { for (let i = 1; i <= 768; i++) {
const color = colors[i - 1]; // 获取当前颜色 const color = colors[i - 1]; // 获取当前颜色
const x = ((i - 1) % 32) * gridWidth; // 计算x坐标 const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标 const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
// 绘制格子 // 绘制格子
ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值 ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子 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);
} }
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]) { 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);
}
}
} }
}) })
@ -204,7 +285,7 @@
function zOnClick(event, treeId, treeNode) { function zOnClick(event, treeId, treeNode) {
monitorId = treeNode.id; monitorId = treeNode.id;
console.log(111,monitorId) console.log(111, monitorId)
} }
} }
@ -234,11 +315,11 @@
</html> </html>
<style> <style>
.centerDiv { .centerDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1vw solid #fff; border: 1vw solid #fff;
border-radius: 0.25vw; border-radius: 0.25vw;
width: 20vw;
height: 19vw;
display: none;
margin-bottom: 6px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save