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