yinq
2 weeks ago
parent
df815750a4
commit
c3253dcec6
@ -0,0 +1,401 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('堆垛机温度实时监控')"/>
|
||||||
|
<th:block th:include="include :: layout-latest-css"/>
|
||||||
|
<th:block th:include="include :: ztree-css"/>
|
||||||
|
<th:block th:include="include :: datetimepicker-css"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.chartDiv {
|
||||||
|
width: 16%;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.height {
|
||||||
|
height: 22vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 1px solid #67C23A;
|
||||||
|
padding: 0 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .chart {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .time {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #409EFF;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .mileage {
|
||||||
|
position: absolute;
|
||||||
|
top: 74%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .text {
|
||||||
|
font-size: 1.25vw;
|
||||||
|
position: absolute;
|
||||||
|
top: 80%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .text1 {
|
||||||
|
font-size: 1.1vw;
|
||||||
|
line-height: 1.4vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartDiv .mileage .num {
|
||||||
|
font-size: 1vw;
|
||||||
|
margin: 0 0.1vw;
|
||||||
|
padding: 0.05vw 0.1vw;
|
||||||
|
background-color: #0001;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body class="gray-bg">
|
||||||
|
|
||||||
|
<div class="ui-layout-west">
|
||||||
|
<div class="box box-main">
|
||||||
|
<div class="box-header">
|
||||||
|
<div class="box-title">
|
||||||
|
<i class="fa icon-grid"></i> 测控点信息
|
||||||
|
</div>
|
||||||
|
<div class="box-tools pull-right">
|
||||||
|
<a class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i
|
||||||
|
class="fa fa-edit"></i></a>
|
||||||
|
<button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
|
||||||
|
class="fa fa-chevron-up"></i></button>
|
||||||
|
<button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i
|
||||||
|
class="fa fa-chevron-down"></i></button>
|
||||||
|
<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 class="ztree" id="tree"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui-layout-center">
|
||||||
|
<div class="container-div">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 search-collapse">
|
||||||
|
|
||||||
|
<div id="chartDivs">
|
||||||
|
|
||||||
|
</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"/>
|
||||||
|
<th:block th:include="include :: datetimepicker-js"/>
|
||||||
|
<script src="../../../js/common/echarts.min.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
var editFlag = [[${@permission.hasPermi('system:TVibrationsensorData:edit')}]];
|
||||||
|
var removeFlag = [[${@permission.hasPermi('system:TVibrationsensorData:remove')}]];
|
||||||
|
var prefix = ctx + "system/TVibrationsensorData";
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
var panehHidden = false;
|
||||||
|
if ($(this).width() < 769) {
|
||||||
|
panehHidden = true;
|
||||||
|
}
|
||||||
|
$('body').layout({initClosed: panehHidden, west__size: 245});
|
||||||
|
queryDeptTree();
|
||||||
|
});
|
||||||
|
|
||||||
|
let time1 = null
|
||||||
|
|
||||||
|
function queryDeptTree() {
|
||||||
|
var url = ctx + "system/Monitor/treeDataSecondTypeOne?monitorType=" + 20;
|
||||||
|
var options = {
|
||||||
|
url: url,
|
||||||
|
expandLevel: 1,
|
||||||
|
check: {
|
||||||
|
enable: true,
|
||||||
|
nocheckInherit: false,
|
||||||
|
chkboxType: {"Y": "", "N": ""}
|
||||||
|
},
|
||||||
|
// onClick: zOnClick,
|
||||||
|
onCheck: onCheck
|
||||||
|
};
|
||||||
|
$.tree.init(options);
|
||||||
|
|
||||||
|
function onCheck(event, treeId, treeNode) {
|
||||||
|
const intervalFun = () => {
|
||||||
|
var checkedIds = getCheckedSensorIds();
|
||||||
|
$.post(ctx + 'system/TVibrationsensorData/stackerRealTimeMonitor', {sensorId: checkedIds}, (e) => {
|
||||||
|
|
||||||
|
let data = e.data || []
|
||||||
|
$("#chartDivs").html('')
|
||||||
|
data.forEach((v, k) => {
|
||||||
|
var isOver = (v.isThreshold === 1 || v.isThreshold === '1');
|
||||||
|
var redStyle = isOver ? 'color:#d9534f;font-weight:700;' : '';
|
||||||
|
let html = `
|
||||||
|
<div class="chartDiv border" id="chartDiv">
|
||||||
|
<div class="title" style="font-size: 1.4vw;${redStyle}">${v.monitorName}</div>
|
||||||
|
<div class="time" style="font-size: 1vw">${v.collectTime}</div>
|
||||||
|
<div class="text1" style="${redStyle}">\u6e29\u5ea6\uff1a${v.temperature}\u00b0C</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
$("#chartDivs").append(html)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
intervalFun()
|
||||||
|
if (time1) {
|
||||||
|
clearInterval(time1)
|
||||||
|
time1 = null
|
||||||
|
}
|
||||||
|
time1 = setInterval(() => {
|
||||||
|
intervalFun()
|
||||||
|
}, 10000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function zOnClick(event, treeId, treeNode) {
|
||||||
|
$.post(ctx + 'system/TVibrationsensorData/stackerRealTimeMonitor', {sensorId: treeNode.id}, (e) => {
|
||||||
|
if (e.code === 0) {
|
||||||
|
let data = e.data || []
|
||||||
|
$("#chartDivs").html('')
|
||||||
|
data.forEach((v, k) => {
|
||||||
|
let html = `
|
||||||
|
<div class="chartDiv height" id="chartDiv">
|
||||||
|
<div class="title">${v.monitorName}</div>
|
||||||
|
<div class="time">${v.collectTime}</div>
|
||||||
|
<div class="chart" id="chart${k}">
|
||||||
|
</div>
|
||||||
|
<div class="mileage">
|
||||||
|
${v.temperature.toString().split('').map(vv => {
|
||||||
|
return `<div class="num">${vv}</div>`
|
||||||
|
}).join('')}
|
||||||
|
</div>
|
||||||
|
<div class="text">\u6e29\u5ea6(\u00b0C)</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
$("#chartDivs").append(html)
|
||||||
|
|
||||||
|
let chart = echarts.init(document.getElementById(`chart${k}`))
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
animation: false,
|
||||||
|
detail: {
|
||||||
|
formatter: '{value}',
|
||||||
|
offsetCenter:
|
||||||
|
[0, '20%'],
|
||||||
|
// offsetCenter: [0, '-40%'] ,
|
||||||
|
},
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius:
|
||||||
|
'90%',
|
||||||
|
max:
|
||||||
|
100,
|
||||||
|
data:
|
||||||
|
[
|
||||||
|
{
|
||||||
|
value: v.speed,
|
||||||
|
name: 'mm/s',
|
||||||
|
title: {
|
||||||
|
offsetCenter: ['50%', '65%'],
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
animation: false,
|
||||||
|
splitNumber: 4,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius:
|
||||||
|
'50%',
|
||||||
|
max: 5000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: v.displacement,
|
||||||
|
name: 'um',
|
||||||
|
title: {
|
||||||
|
offsetCenter: ['45%', '55%'],
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
chart.setOption(option)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (time1) {
|
||||||
|
clearInterval(time1)
|
||||||
|
time1 = null
|
||||||
|
}
|
||||||
|
|
||||||
|
time1 = setInterval(() => {
|
||||||
|
$.post(ctx + 'system/TVibrationsensorData/stackerRealTimeMonitor', {sensorId: treeNode.id}, (e) => {
|
||||||
|
if (e.code === 0) {
|
||||||
|
let data = e.data || []
|
||||||
|
$("#chartDivs").html('')
|
||||||
|
data.forEach((v, k) => {
|
||||||
|
let html = `
|
||||||
|
<div class="chartDiv height" id="chartDiv">
|
||||||
|
<div class="title">${v.monitorName}</div>
|
||||||
|
<div class="time">${v.collectTime}</div>
|
||||||
|
<div class="chart" id="chart${k}">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mileage">
|
||||||
|
${v.temperature.toString().split('').map(vv => {
|
||||||
|
return `<div class="num">${vv}</div>`
|
||||||
|
}).join('')}
|
||||||
|
</div>
|
||||||
|
<div class="text">\u6e29\u5ea6(\u00b0C)</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
$("#chartDivs").append(html)
|
||||||
|
|
||||||
|
let chart = echarts.init(document.getElementById(`chart${k}`))
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
animation: false,
|
||||||
|
detail: {
|
||||||
|
formatter: '{value}',
|
||||||
|
offsetCenter: [0, '20%'],
|
||||||
|
// offsetCenter: [0, '-40%'] ,
|
||||||
|
},
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: '90%',
|
||||||
|
max: Math.max(Math.ceil(v.displacement / 100), 1) * 100,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: v.displacement,
|
||||||
|
name: '\u4f4d\u79fb(um)',
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
splitNumber: 4,
|
||||||
|
detail: {
|
||||||
|
formatter: '{value}',
|
||||||
|
offsetCenter:
|
||||||
|
[0, '20%'],
|
||||||
|
// offsetCenter: [0, '-40%'] ,
|
||||||
|
}
|
||||||
|
,
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius:
|
||||||
|
'50%',
|
||||||
|
max:
|
||||||
|
Math.max(Math.ceil(v.speed / 100), 1) * 100,
|
||||||
|
data:
|
||||||
|
[
|
||||||
|
{
|
||||||
|
value: v.speed,
|
||||||
|
name: '\u901f\u5ea6(mm/s)',
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
chart.setOption(option)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 10000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// \u517c\u5bb9\u540e\u7aef\u9017\u53f7\u5206\u9694\u53c2\u6570\uff1a\u5c06\u9009\u4e2d\u7684\u6811\u8282\u70b9ID\u62fc\u6210 "id1,id2,id3"
|
||||||
|
function getCheckedSensorIds() {
|
||||||
|
var treeObj = $.fn.zTree.getZTreeObj("tree");
|
||||||
|
if (!treeObj) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
var checkedNode = treeObj.getCheckedNodes(true);
|
||||||
|
var ids = [];
|
||||||
|
checkedNode.forEach(function (node) {
|
||||||
|
if (node && node.id !== undefined && node.id !== null && node.id !== "") {
|
||||||
|
ids.push(node.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return ids.join(",");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue