|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
<head>
|
|
|
|
|
<th:block th:include="include :: header('设备智能驾驶舱')"/>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="white-bg">
|
|
|
|
|
<link href="../../board/board.css" rel="stylesheet">
|
|
|
|
|
<script src="../../js/echarts.js"></script>
|
|
|
|
|
<script src="../../js/scrollTable.js"></script>
|
|
|
|
|
<script src="../../js/tableAnimation.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
let status = {
|
|
|
|
|
rightInfoS: false,
|
|
|
|
|
bottomBtn1S: false,
|
|
|
|
|
bottomBtn2S: false,
|
|
|
|
|
bottomBtn3S: false,
|
|
|
|
|
}
|
|
|
|
|
const routerSkip = (e) => {
|
|
|
|
|
try {
|
|
|
|
|
$.modal.openTab('设备智能驾驶舱', ctx + e);
|
|
|
|
|
} catch (val) {
|
|
|
|
|
location.href = ctx + e
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const showModal = () => {
|
|
|
|
|
$("#eqModal").show()
|
|
|
|
|
}
|
|
|
|
|
const hideModal1 = () => {
|
|
|
|
|
$("#eqModal").hide()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const hideModal = (e, el) => {
|
|
|
|
|
status[`bottomBtn${e}S`] = false
|
|
|
|
|
$($(el)[0].parentNode).hide()
|
|
|
|
|
$("#bottomBtn" + e).css({
|
|
|
|
|
backgroundImage: status[`bottomBtn${e}S`] ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
|
|
|
|
|
})
|
|
|
|
|
if (e === 3) {
|
|
|
|
|
document.getElementById("monitoringIframe").contentWindow.edit()
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
$("#monitoring").empty()
|
|
|
|
|
$("#centerModal1").append(`<iframe src="monitoring1" frameborder="0" id="monitoringIframe" style="width: 100%;height: 100%"></iframe>`)
|
|
|
|
|
}, 100)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const toggleInfo = () => {
|
|
|
|
|
$("#rightInfo").toggle()
|
|
|
|
|
status.rightInfoS = !status.rightInfoS
|
|
|
|
|
$("#toggleInfoBtn").css({
|
|
|
|
|
backgroundImage: status.rightInfoS ? 'url("../../board/img/click.png")' : 'url("../../board/img/click1.png")'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const bottomBtnInfo = (e, el) => {
|
|
|
|
|
if (e === 3) {
|
|
|
|
|
$('#centerModal1').empty()
|
|
|
|
|
$("#monitoring").append(`<iframe src="monitoring" frameborder="0" id="monitoringIframe" style="width: 100%;height: 100%"></iframe>`)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
document.getElementById("monitoringIframe").contentWindow.login()
|
|
|
|
|
}, 1000)
|
|
|
|
|
}
|
|
|
|
|
$("#modal" + e).toggle()
|
|
|
|
|
switch (e) {
|
|
|
|
|
case 1:
|
|
|
|
|
status.bottomBtn1S = !status.bottomBtn1S
|
|
|
|
|
$(el).css({
|
|
|
|
|
backgroundImage: status.bottomBtn1S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
|
|
|
|
|
})
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
case 2:
|
|
|
|
|
status.bottomBtn2S = !status.bottomBtn2S
|
|
|
|
|
$(el).css({
|
|
|
|
|
backgroundImage: status.bottomBtn2S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
|
|
|
|
|
})
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
case 3:
|
|
|
|
|
status.bottomBtn3S = !status.bottomBtn3S
|
|
|
|
|
$(el).css({
|
|
|
|
|
backgroundImage: status.bottomBtn3S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
|
|
|
|
|
})
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const Modal1Search = () => {
|
|
|
|
|
let params = {}
|
|
|
|
|
if ($('#startTime1').val()) {
|
|
|
|
|
params.beginTime = new Date($('#startTime1').val())
|
|
|
|
|
}
|
|
|
|
|
if ($('#endTime1').val()) {
|
|
|
|
|
params.endTime = new Date($('#endTime1').val())
|
|
|
|
|
}
|
|
|
|
|
$.get(ctx + 'broad/home/queryParamList', params, (e) => {
|
|
|
|
|
chart1(document.getElementById('chart1'), e.data)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const Modal2Search = () => {
|
|
|
|
|
let params = {}
|
|
|
|
|
if ($('#startTime2').val()) {
|
|
|
|
|
params.beginTime = new Date($('#startTime2').val())
|
|
|
|
|
}
|
|
|
|
|
if ($('#endTime2').val()) {
|
|
|
|
|
params.endTime = new Date($('#endTime2').val())
|
|
|
|
|
}
|
|
|
|
|
console.log(params)
|
|
|
|
|
$.get(ctx + 'broad/home/queryParamList', params, (e) => {
|
|
|
|
|
$("#chart2").empty()
|
|
|
|
|
dynamicTable({
|
|
|
|
|
el: '#chart2',
|
|
|
|
|
rowNum: 10,
|
|
|
|
|
timeout: 5,
|
|
|
|
|
header: ['序号', '采集时间', '一体机A转速', '一体机A电流', '一体机A机头压力', '一体机A机头温度', '一体机A切刀电流', '一体机A切刀转速'],
|
|
|
|
|
data: e.data.map((val, i) => [i, val.time, val['一体机A转速'], val['一体机A电流'], val['一体机A机头压力'], val['一体机A机头温度'], val['一体机A切刀电流'], val['一体机A切刀转速']]),
|
|
|
|
|
index: true,
|
|
|
|
|
fontColor: '#03BCD4 ',
|
|
|
|
|
indexBGC: '#86F3FF',
|
|
|
|
|
headerBGC: '#092A77',
|
|
|
|
|
oddRowBGC: '#092A77',
|
|
|
|
|
evenRowBGC: '#092A77',
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="topBtn" onclick="routerSkip('board/board2')" style="left: 8vw;">首页</div>
|
|
|
|
|
<div class="topBtn topBtnClick" onclick="routerSkip('board/board1')" style="left: 18.5vw;">60型脱水机</div>
|
|
|
|
|
<!-- <div class="topBtn" style="left: 25vw;">60型一体机</div>-->
|
|
|
|
|
<div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
|
|
|
|
|
<div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
|
|
|
|
|
<div class="topBtn" id="toggleInfoBtn" onclick="toggleInfo()" style="left: 83vw;top:13%">设备介绍</div>
|
|
|
|
|
|
|
|
|
|
<div class="bottomBtn" id="bottomBtn1" onclick="bottomBtnInfo(1,this)" style="left: 22.5vw;">历史趋势</div>
|
|
|
|
|
<div class="bottomBtn" id="bottomBtn2" onclick="bottomBtnInfo(2,this)" style="left: 42.5vw;">数据记录</div>
|
|
|
|
|
<div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div>
|
|
|
|
|
|
|
|
|
|
<div class="centerImg">
|
|
|
|
|
<div id="centerInfoDiv">
|
|
|
|
|
|
|
|
|
|
<!-- <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">-->
|
|
|
|
|
<!-- <div class="win">-->
|
|
|
|
|
<!-- <div class="title">位置1</div>-->
|
|
|
|
|
<!-- <div class="span1">转速: 50n/s</div>-->
|
|
|
|
|
<!-- <div class="span2">电流: 45A</div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div class="icon"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
<!-- <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">-->
|
|
|
|
|
<!-- <div class="win">-->
|
|
|
|
|
<!-- <div class="title">位置1</div>-->
|
|
|
|
|
<!-- <div class="span1">转速: 50n/s</div>-->
|
|
|
|
|
<!-- <div class="span2">电流: 45A</div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div class="icon"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="rightInfo" style="display: none">
|
|
|
|
|
<div class="winDiv">
|
|
|
|
|
<div class="title">基本信息</div>
|
|
|
|
|
<div class="title1">设备描述:</div>
|
|
|
|
|
<div class="bg1">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title2">技术参数:</div>
|
|
|
|
|
<div class="bg2">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="statusD">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="eqModal" id="eqModal">
|
|
|
|
|
<div class="shade" onclick="hideModal1()"></div>
|
|
|
|
|
<div class="centerModal"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="modal1" style="display:none;">
|
|
|
|
|
<div class="shade" onclick="hideModal(1,this)"></div>
|
|
|
|
|
<div class="centerModal">
|
|
|
|
|
<div class="centerModalInfo">
|
|
|
|
|
<span style="font-size: 1vw;color: #fff">起止时间： </span>
|
|
|
|
|
<input class="time-input" id="startTime1" placeholder="开始时间"
|
|
|
|
|
style="width: 10vw;height:2vw;display: inline-block"
|
|
|
|
|
type="text"/>
|
|
|
|
|
<span>-</span>
|
|
|
|
|
<input class="time-input" id="endTime1" placeholder="结束时间" style="width: 10vw;height:2vw;display: inline-block"
|
|
|
|
|
type="text"/>
|
|
|
|
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="Modal1Search()"><i class="fa fa-search"></i> 搜索</a>
|
|
|
|
|
<a class="btn btn-warning btn-rounded btn-sm"><i class="fa fa-download"></i> 导出</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart1" id="chart1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="modal2" style="display:none;">
|
|
|
|
|
<div class="shade" onclick="hideModal(2,this)"></div>
|
|
|
|
|
<div class="centerModal">
|
|
|
|
|
<div class="centerModalInfo">
|
|
|
|
|
<div style="position:relative;">
|
|
|
|
|
<div style="display: inline-block">
|
|
|
|
|
<span style="font-size: 1vw;color: #fff">客户名称： </span>
|
|
|
|
|
<input name="loginName" style="width: 10vw;height:2vw;display: inline-block" type="text"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block">
|
|
|
|
|
<span style="font-size: 1vw;color: #fff">实验胶种： </span>
|
|
|
|
|
<input name="loginName" style="width: 10vw;height:2vw;display: inline-block" type="text"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block">
|
|
|
|
|
<span style="font-size: 1vw;color: #fff">起止时间： </span>
|
|
|
|
|
<input class="time-input" id="startTime2" placeholder="开始时间"
|
|
|
|
|
style="width: 10vw;height:2vw;display: inline-block"
|
|
|
|
|
type="text"/>
|
|
|
|
|
<span>-</span>
|
|
|
|
|
<input class="time-input" id="endTime2" placeholder="结束时间"
|
|
|
|
|
style="width: 10vw;height:2vw;display: inline-block"
|
|
|
|
|
type="text"/>
|
|
|
|
|
</div>
|
|
|
|
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="Modal2Search()"><i
|
|
|
|
|
class="fa fa-search"></i> 搜索</a>
|
|
|
|
|
<a class="btn btn-warning btn-rounded btn-sm"><i class="fa fa-download"></i> 导出</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart1" id="chart2" style="position:relative;top:2%;left: 0;height: 92%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="modal3" style="display:none;">
|
|
|
|
|
<div class="shade" onclick="hideModal(3,this)"></div>
|
|
|
|
|
<div class="centerModal">
|
|
|
|
|
<div class="monitoring" id="monitoring">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="centerModal1" id="centerModal1" style="display: none">
|
|
|
|
|
<iframe frameborder="0" id="monitoringIframe" src="monitoring1" style="width: 100%;height: 100%"></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<th:block th:include="include :: footer"/>
|
|
|
|
|
<script src="../../board/board.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
