1165 lines
46 KiB
Plaintext
1165 lines
46 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
|
||
<title>
|
||
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
<style type="text/css">
|
||
.font-size-12{
|
||
font-size: 12px;
|
||
}
|
||
.font-size-14{
|
||
font-size: 14px;
|
||
}
|
||
.font-size-15{
|
||
font-size: 15px;
|
||
}
|
||
.font-size-16{
|
||
font-size: 16px;
|
||
}
|
||
.font-size-17{
|
||
font-size: 17px;
|
||
}
|
||
.font-size-18{
|
||
font-size: 18px;
|
||
}
|
||
.font-size-20{
|
||
font-size: 20px;
|
||
}
|
||
.font-size-22{
|
||
font-size: 22px;
|
||
}
|
||
.font-size-26{
|
||
font-size: 26px;
|
||
}
|
||
.font-size-28{
|
||
font-size: 28px;
|
||
}
|
||
.font-size-34{
|
||
font-size: 34px;
|
||
}
|
||
.font-size-44{
|
||
font-size: 44px;
|
||
}
|
||
.font-color-red{
|
||
color: #FF0000;
|
||
}
|
||
.font-color-lightblue{
|
||
color: #00A8FF;
|
||
}
|
||
.font-color-blue{
|
||
color: #00D3FF;
|
||
}
|
||
.font-color-lightgreen{
|
||
color: #00C254;
|
||
}
|
||
.font-color-green{
|
||
color: #228100;
|
||
}
|
||
.font-color-yellow{
|
||
color: #FFCC00;
|
||
}
|
||
.font-color-purple{
|
||
color: #975FE4;
|
||
}
|
||
.font-color-black{
|
||
color: #000;
|
||
}
|
||
.font-color-white{
|
||
color: #ffffff;
|
||
}
|
||
.font-color-orange{
|
||
color: #FFAA00;
|
||
}
|
||
|
||
.font-color-grey{
|
||
color: #919191;
|
||
}
|
||
.padding-top-8{
|
||
padding-top: 8px;
|
||
}
|
||
.padding-left-40{
|
||
padding-left:40px;
|
||
}
|
||
.padding-right-40{
|
||
padding-right:40px;
|
||
}
|
||
.margin-bottom-10{
|
||
margin-bottom: 10px;
|
||
}
|
||
.margin-bottom-15{
|
||
margin-bottom: 15px;
|
||
}
|
||
.margin-bottom-20{
|
||
margin-bottom: 20px;
|
||
}
|
||
.line-height-4{
|
||
line-height: 4;
|
||
}
|
||
.main-position{
|
||
position: absolute;
|
||
}
|
||
.main-title{
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
padding: 10px 5px;
|
||
}
|
||
.title-element{
|
||
float: left;
|
||
margin-right: 15px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.title-element > img{
|
||
margin-bottom: 10px;
|
||
}
|
||
.main-content{
|
||
width: 380px;
|
||
}
|
||
.main-content-left{
|
||
height: 1008px;
|
||
background: linear-gradient(90deg,rgba(1,37,51,0.60), rgba(0,37,51,0.40) 64%, rgba(8,42,55,0.10));
|
||
top: 72px;
|
||
left: 0px;
|
||
}
|
||
.main-content-right{
|
||
height: 1080px;
|
||
background: linear-gradient(270deg,rgba(0,40,55,0.60), rgba(0,37,51,0.40) 64%, rgba(8,42,55,0.10));
|
||
top: 0px;
|
||
right: 0px;
|
||
}
|
||
.greenConstruction-box{
|
||
width: 100%;
|
||
}
|
||
.greenConstruction-box-title{
|
||
width: 100%;
|
||
height: 50px;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/environment/title.png);
|
||
background-repeat:no-repeat;
|
||
background-position: left center;
|
||
background-size: 100%;
|
||
}
|
||
.greenConstruction-box-title > h4{
|
||
padding: 0 35px;
|
||
}
|
||
.greenConstruction-box-title-tool{
|
||
|
||
}
|
||
.greenConstruction-box-content{
|
||
padding: 10px;
|
||
}
|
||
.greenConstruction-box-content p{
|
||
text-indent: 2em;
|
||
text-align: left;
|
||
padding: 0 15px;
|
||
}
|
||
.weather{
|
||
height: 75px;
|
||
width: 100%;
|
||
padding: 15px 5px;
|
||
}
|
||
.weather .col-md-3,
|
||
.weather .col-md-6{
|
||
padding: 0 5px;
|
||
}
|
||
.environment-floor{
|
||
background: rgba(10,93,120,0.47);
|
||
border: 1px solid #00e5ff;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
color: #00edff;
|
||
float: left;
|
||
}
|
||
.environment-floor:hover{
|
||
border: 1px solid #00e5ff;
|
||
}
|
||
|
||
.environment-floor div{
|
||
height: 50%;
|
||
padding: 5px;
|
||
}
|
||
.environment-floor.active{
|
||
background: rgba(0,192,255,0.47);
|
||
border: 1px solid #00e5ff;
|
||
}
|
||
.environment-floor.error{
|
||
background: rgba(120,10,10,0.47);
|
||
border: 1px solid #ff0000;
|
||
color: #ffffff;
|
||
}
|
||
.floor-list{
|
||
width: 40px;
|
||
height: 360px;
|
||
bottom: 105px;
|
||
right: 450px;
|
||
}
|
||
.mainSeason-list{
|
||
width: 110px;
|
||
height: 200px;
|
||
bottom: 105px;
|
||
right: 450px;
|
||
}
|
||
.floor-list,.mainSeason-list{
|
||
background: rgba(0,0,0,0.50);
|
||
border: 1px solid #a7a7a7;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.floor-list-border:hover,.mainSeason-list-border:hover{
|
||
border: 1px solid #00e5ff;
|
||
}
|
||
.floor-list-border.active,.mainSeason-list-border.active{
|
||
background: rgba(0,192,255,0.47);
|
||
border: 1px solid #00e5ff;
|
||
}
|
||
.floor-list-border,.mainSeason-list-border{
|
||
border-bottom: 1px solid #a7a7a7;
|
||
height: 40px;
|
||
}
|
||
|
||
.nav-tabs-custom.tab-BIM {
|
||
background: transparent;
|
||
}
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs {
|
||
border-bottom: 1px solid #00d3ff;
|
||
}
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs > li {
|
||
border-top: 3px solid transparent;
|
||
margin-bottom: -2px;
|
||
margin-right: 5px;
|
||
}
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs > li.active {
|
||
background: #00d3ff;
|
||
border: 1px solid #00d3ff;
|
||
border-radius: 6px 6px 0px 0px;
|
||
}
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs > li.active > a {
|
||
border: transparent;
|
||
background-color: transparent;
|
||
font-weight: bold;
|
||
}
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs > li.active > a,
|
||
.nav-tabs-custom.tab-BIM > .nav-tabs > li.active:hover > a {
|
||
color: #000000;
|
||
}
|
||
.nav-tabs-custom.tab-BIM>.nav-tabs>li>a {
|
||
color: #baf1ff;
|
||
}
|
||
.tab-BIM>.nav>li>a {
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.techParameters-open{
|
||
cursor: pointer;
|
||
color: #00cbff;
|
||
}
|
||
.techParameters-close{
|
||
background: rgba(10,93,120,0.47);
|
||
border: 1px solid #00e5ff;
|
||
}
|
||
.equipmentCard .form-group{
|
||
margin-bottom: 1px;
|
||
background: rgba(57,57,57,0.50);
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
.equipmentCard .col-sm-8{
|
||
padding-top: 7px;
|
||
}
|
||
.equipmentCard .col-sm-4,.equipmentCard .col-sm-8{
|
||
padding-right: 10px;
|
||
padding-left: 10px;
|
||
}
|
||
.equipmentCard .table-striped>tbody>tr:nth-of-type(odd) {
|
||
background-color: transparent;
|
||
}
|
||
.energyEfficiencyManagement{
|
||
height: 960px;
|
||
}
|
||
.buildingOverview{
|
||
height: 350px;
|
||
}
|
||
.environmentalMonitoring{
|
||
height: 540px;
|
||
}
|
||
.deviceManagement{
|
||
height: 560px;
|
||
}
|
||
.serviceCentre{
|
||
height: 330px;
|
||
}
|
||
.box {
|
||
margin-bottom: 10px;
|
||
}
|
||
.equipmentOperationEvaluation,.radar{
|
||
height: 250px;
|
||
}
|
||
.pie ,.bar{
|
||
height: 220px;
|
||
}
|
||
.levelBar{
|
||
height: 320px;
|
||
width: 400px;
|
||
}
|
||
.runLine{
|
||
height: 360px;
|
||
width: 1600px;
|
||
}
|
||
.col-md-20{
|
||
width: 20%;
|
||
float: left;
|
||
position: relative;
|
||
min-height: 1px;
|
||
padding-right: 10px;
|
||
padding-left: 10px;
|
||
}
|
||
.evaluate-green{
|
||
padding: 5px;
|
||
background: #21cb21;
|
||
border-radius: 4px;
|
||
}
|
||
.col-md-3,.col-md-4,.col-md-5,.col-md-8,.energyEfficiencyManagement .col-md-2{
|
||
padding-right: 8px;
|
||
padding-left: 8px;
|
||
}
|
||
.demonstration .row{
|
||
margin-right: 0px;
|
||
margin-left: 0px;
|
||
}
|
||
h3,h4{
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.box-body {
|
||
padding: 10px 15px;
|
||
}
|
||
.nav-tabs-custom {
|
||
margin-bottom: 10px;
|
||
}
|
||
.nav-tabs-custom>.nav-tabs>li>a {
|
||
font-weight: bold;
|
||
}
|
||
.nav-tabs-custom>.nav-tabs>li.active {
|
||
border-bottom: 3px solid #0080FF;
|
||
border-top: 0;
|
||
}
|
||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||
border-right: 0;
|
||
border-left: 0;
|
||
}
|
||
.nav-tabs-custom>.nav-tabs>li.active>a,
|
||
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
|
||
color: #0080FF;
|
||
}
|
||
.icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
vertical-align: -0.15em;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
margin-top: 5px;
|
||
}
|
||
.dateSelect{
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 25px;
|
||
z-index: 11;
|
||
width: 320px;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
var height = 1080;
|
||
var heightV =1;
|
||
var width = 1920;
|
||
var widthV =1;
|
||
var beginTimeStore1 = '';
|
||
var endTimeStore1 = '';
|
||
let websocket = null;
|
||
let modelIp = "${modelIp}";
|
||
$(function () {
|
||
var bizid = unitId;
|
||
height = $(window).height();
|
||
width = $(window).width();
|
||
if(width<(global_width*0.1)){
|
||
width = global_width-150;
|
||
}
|
||
if(height<(global_height*0.1)){
|
||
height = global_height-50;
|
||
}
|
||
heightV = height/860;
|
||
widthV = width/1690;
|
||
$('.runLine').height($('.runLine').height()*heightV);
|
||
$('.runLine').width($('.runLine').width()*widthV);
|
||
$('.levelBar').height($('.levelBar').height()*heightV);
|
||
$('.levelBar').width($('.levelBar').width()*widthV);
|
||
|
||
echartsBar('levelBar',5.6,7,3);
|
||
|
||
var seriesdata = [
|
||
{
|
||
name: '1#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '2#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '3#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '4#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '5#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '6#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
{
|
||
name: '预测取水信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: [['2022-11-01',1], ['2022-11-02',0],['2022-11-03', 0], ['2022-11-04',1],
|
||
['2022-11-05',1], ['2022-11-06',1], ['2022-11-07',0]]
|
||
},
|
||
]
|
||
echartsLine('runLine',seriesdata);
|
||
//定义locale汉化插件
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"separator": " ~ ",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
beginTimeStore1 = moment().subtract(15, 'days').format('YYYY-MM-DD') + " 00:00";
|
||
endTimeStore1 = moment().subtract(-15, 'days').format('YYYY-MM-DD') + " 23:59";
|
||
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
|
||
$('#reservationtime1').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
"linkedCalendars": false,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"locale": locale,
|
||
//汉化按钮部分
|
||
ranges: {
|
||
'今日': [moment(), moment().subtract(-1, 'days')],
|
||
'昨日': [moment().subtract(1, 'days'), moment()],
|
||
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
|
||
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
|
||
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
|
||
},
|
||
startDate: beginTimeStore1,
|
||
endDate: endTimeStore1
|
||
}, function (start, end, label) {
|
||
beginTimeStore1 = start.format(this.locale.format);
|
||
endTimeStore1 = end.format(this.locale.format);
|
||
if (!this.startDate) {
|
||
this.element.val('');
|
||
} else {
|
||
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
||
}
|
||
});
|
||
if ('WebSocket' in window) {
|
||
// 创建websocket对象
|
||
websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
||
registerEvent(bizid);
|
||
} else {
|
||
alert('当前浏览器不支持websocket')
|
||
}
|
||
$(window).unload(function () {
|
||
console.log("websocket关闭");
|
||
websocket.close();
|
||
});
|
||
|
||
getData(bizid, "");
|
||
});
|
||
|
||
function echartsBar(id,currentLevel,normalLevel,abnormalLevel){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color: ['#C9DFFF','green','red'],
|
||
backgroundColor:'#D9D9D9',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
x: 'left',
|
||
data: [ '液位正常', '液位异常']
|
||
},
|
||
grid: {
|
||
left: '0',
|
||
right: '0',
|
||
bottom: '0',
|
||
top: 40,
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['当前数据'],
|
||
axisLine: {
|
||
show: false ,
|
||
},
|
||
axisTick: {
|
||
show: false ,
|
||
},
|
||
axisLabel: {
|
||
show: false ,
|
||
},
|
||
splitLine: {
|
||
show: false ,
|
||
},
|
||
},
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['区间数据', '区间数据'],
|
||
axisLine: {
|
||
show: false ,
|
||
},
|
||
axisTick: {
|
||
show: false ,
|
||
},
|
||
axisLabel: {
|
||
show: false ,
|
||
},
|
||
splitLine: {
|
||
show: false ,
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
max: normalLevel*1.2,
|
||
axisLine: {
|
||
show: false ,
|
||
},
|
||
axisTick: {
|
||
show: false ,
|
||
},
|
||
axisLabel: {
|
||
show: false ,
|
||
},
|
||
splitLine: {
|
||
show: false ,
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '当前液位',
|
||
type: 'bar',
|
||
label: {
|
||
show: true,
|
||
color: '#00DB16' ,
|
||
fontSize: 22 ,
|
||
position: ['50%', '10%']
|
||
},
|
||
barWidth: '80%',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(255, 255, 255, 1)'
|
||
},
|
||
data: [currentLevel]
|
||
},
|
||
{
|
||
name: '液位正常',
|
||
type: 'line',
|
||
xAxisIndex: 1,
|
||
symbol:'none',
|
||
lineStyle: {
|
||
type: 'dashed' ,
|
||
},
|
||
data: [
|
||
normalLevel, normalLevel
|
||
]
|
||
},
|
||
{
|
||
name: '液位异常',
|
||
type: 'line',
|
||
xAxisIndex: 1,
|
||
symbol:'none',
|
||
lineStyle: {
|
||
type: 'dashed' ,
|
||
},
|
||
data: [abnormalLevel, abnormalLevel]
|
||
}
|
||
]
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
function echartsLine(id,data) {
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
let outContent = "";
|
||
for (let item of params) {
|
||
// <span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(0,0,0,0);\"></span>
|
||
let time = item.value[0];
|
||
let value = item.value[1];
|
||
if (value == 0) {
|
||
outContent = time + '：关';
|
||
} else if (value == 1) {
|
||
outContent = time + '：开';
|
||
} else {
|
||
outContent = '';
|
||
}
|
||
}
|
||
return outContent
|
||
}
|
||
},
|
||
legend: {
|
||
x: 'left',
|
||
icon: 'circle'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: 80,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{MM}/{dd}'
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
max: 2,
|
||
min: -1,
|
||
minInterval: 1,
|
||
axisLabel: {
|
||
formatter: function (value, index) {
|
||
if(value==0){
|
||
value = '关';
|
||
}else if(value==1){
|
||
value = '开';
|
||
}else{
|
||
value = '';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
},
|
||
series: data
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
function registerEvent(bizid) {
|
||
websocket.onopen = function (event) {
|
||
console.log("已连接");
|
||
}
|
||
|
||
websocket.onmessage = function (event) {
|
||
if (event != null) {
|
||
// console.log(event.data)
|
||
let modelType = event.data;
|
||
if (modelType != 'model_status') {
|
||
getData(bizid,modelType);
|
||
}
|
||
}
|
||
};
|
||
websocket.onclose = function (event) {
|
||
console.log("已断开");
|
||
reconnect();
|
||
};
|
||
//连接发生错误的回调方法
|
||
websocket.onerror = function () {
|
||
reconnect();
|
||
};
|
||
}
|
||
|
||
function reconnect() {
|
||
websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
||
websocket.onopen = function (event) {
|
||
console.log("已连接");
|
||
}
|
||
|
||
websocket.onmessage = function (event) {
|
||
};
|
||
|
||
websocket.onclose = function (event) {
|
||
setTimeout("reconnect();", 8000);
|
||
};
|
||
//连接发生错误的回调方法 `1
|
||
websocket.onerror = function () {
|
||
websocket.close();
|
||
};
|
||
}
|
||
function getData(unitId, modelType) {
|
||
var jsp_id = $('#jsp_id').val();
|
||
var time_input = $('#time_input').val();
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getBGJspData.do",
|
||
dataType: 'json',
|
||
data: {
|
||
unitId: unitId, sdt: beginTimeStore1, edt: endTimeStore1, jspId: jsp_id, modelType: modelType
|
||
},
|
||
async: true,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
var arr = data;
|
||
console.log(arr);
|
||
var level = 0;
|
||
var levelUpperLimit = 0;
|
||
var levelLowerLimit = 0;
|
||
var pumpActualOperationSignal_1_dataseries = [];
|
||
var pumpActualOperationSignal_2_dataseries = [];
|
||
var pumpActualOperationSignal_3_dataseries = [];
|
||
var pumpActualOperationSignal_4_dataseries = [];
|
||
var pumpActualOperationSignal_5_dataseries = [];
|
||
var pumpActualOperationSignal_6_dataseries = [];
|
||
var predictedWaterIntakeSignal_dataseries = [];
|
||
|
||
if (arr != null && arr != undefined && arr != '' && arr.length > 0) {
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var value = 0;
|
||
var numtail = 0;
|
||
var dataMax = 0;
|
||
var rate = 1;
|
||
var nowdate = getNowTime();
|
||
if (arr[i].visualCacheConfig != null
|
||
&& arr[i].visualCacheConfig != undefined
|
||
&& arr[i].visualCacheConfig != '') {
|
||
var visualCacheConfig = arr[i].visualCacheConfig;
|
||
if (visualCacheConfig.numtail != null && visualCacheConfig.numtail != undefined && visualCacheConfig.numtail != '') {
|
||
numtail = visualCacheConfig.numtail;
|
||
}
|
||
}
|
||
if (arr[i].visualCacheData != null
|
||
&& arr[i].visualCacheData != undefined
|
||
&& arr[i].visualCacheData != '') {
|
||
var visualCacheData = arr[i].visualCacheData;
|
||
if (visualCacheData.inivalue != null && visualCacheData.inivalue != undefined && visualCacheData.inivalue != '') {
|
||
value = visualCacheData.inivalue;
|
||
} else {
|
||
if (visualCacheData.value != null && visualCacheData.value != undefined && visualCacheData.value != '') {
|
||
value = visualCacheData.value;
|
||
} else {
|
||
if (arr[i].mPoint != null && arr[i].mPoint != undefined && arr[i].mPoint != '') {
|
||
var mPoint = arr[i].mPoint;
|
||
if (mPoint.parmvalue != null && mPoint.parmvalue != undefined && mPoint.parmvalue != '') {
|
||
value = mPoint.parmvalue;
|
||
}
|
||
if (mPoint.alarmmax != null && mPoint.alarmmax != undefined && mPoint.alarmmax != '') {
|
||
dataMax = mPoint.alarmmax;
|
||
}
|
||
if (mPoint.numtail != null && mPoint.numtail != undefined && mPoint.numtail != '') {
|
||
numtail = mPoint.numtail;
|
||
}
|
||
if (mPoint.measuredt != null && mPoint.measuredt != undefined && mPoint.measuredt != '') {
|
||
nowdate = mPoint.measuredt;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (visualCacheData.numtail != null && visualCacheData.numtail != undefined && visualCacheData.numtail != '') {
|
||
numtail = visualCacheData.numtail;
|
||
}
|
||
if (visualCacheData.insdt != null && visualCacheData.insdt != undefined && visualCacheData.insdt != '') {
|
||
nowdate = visualCacheData.insdt;
|
||
}
|
||
if (visualCacheData.rate != null && visualCacheData.rate != undefined && visualCacheData.rate != '') {
|
||
rate = visualCacheData.rate;
|
||
}
|
||
} else {
|
||
var mPoint = arr[i].mPoint;
|
||
if (mPoint != null && mPoint != undefined && mPoint != '') {
|
||
if (mPoint.parmvalue != null && mPoint.parmvalue != undefined && mPoint.parmvalue != '') {
|
||
value = mPoint.parmvalue;
|
||
}
|
||
if (mPoint.alarmmax != null && mPoint.alarmmax != undefined && mPoint.alarmmax != '') {
|
||
dataMax = mPoint.alarmmax;
|
||
}
|
||
if (mPoint.numtail != null && mPoint.numtail != undefined && mPoint.numtail != '') {
|
||
numtail = mPoint.numtail;
|
||
}
|
||
if (mPoint.measuredt != null && mPoint.measuredt != undefined && mPoint.measuredt != '') {
|
||
nowdate = mPoint.measuredt;
|
||
}
|
||
}
|
||
}
|
||
if (arr[i].getValueType == 'getRedisData' || arr[i].getValueType == 'getTHMonthHistoryAndRedisData') {
|
||
if (arr[i].value != null) {
|
||
let redisValue = eval("(" + arr[i].value + ")");
|
||
// console.log(redisValue)
|
||
value = redisValue.mpvalue;
|
||
if (isNumber(value)) {
|
||
if (arr[i].visualCacheData != null) {
|
||
if (arr[i].visualCacheData.numtail != null) {
|
||
value = Number(value).toFixed(Number(arr[i].visualCacheData.numtail));
|
||
}
|
||
}
|
||
value = toThousands(value);
|
||
}
|
||
if (arr[i].visualCacheData != null) {
|
||
if (arr[i].visualCacheData.unit != null) {
|
||
value += arr[i].visualCacheData.unit;
|
||
}
|
||
}
|
||
if ($("." + arr[i].elementCode).length > 0) {
|
||
$("." + arr[i].elementCode).html(value);
|
||
}
|
||
} else {
|
||
$('.' + arr[i].elementCode).text('-');
|
||
}
|
||
} else {
|
||
value = parseFloat(value) * rate;
|
||
value = value.toFixed(numtail);
|
||
if ($("." + arr[i].elementCode).length > 0) {
|
||
if (isNumber(value)) {
|
||
$("." + arr[i].elementCode).html(toThousands(value));
|
||
} else {
|
||
$("." + arr[i].elementCode).html(value);
|
||
}
|
||
}
|
||
if ($("." + arr[i].elementCode).parent().find('.nowdate').length > 0) {
|
||
$("." + arr[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11, 16));
|
||
}
|
||
}
|
||
|
||
//预测取水时段1
|
||
if (arr[i].elementCode == 'nextPlannedWaterIntake' && value!=null && value!='') {
|
||
console.log(value);
|
||
var nextPlannedWaterIntake=value.split("-");
|
||
if(nextPlannedWaterIntake!=null && nextPlannedWaterIntake.length>0){
|
||
$(".nextPlannedWaterIntake_left").html(nextPlannedWaterIntake[0]);
|
||
$(".nextPlannedWaterIntake_right").html(nextPlannedWaterIntake[1]);
|
||
}
|
||
}
|
||
//液位
|
||
if (arr[i].elementCode == 'level') {
|
||
level = value;
|
||
}
|
||
//液位上限
|
||
if (arr[i].elementCode == 'levelUpperLimit') {
|
||
levelUpperLimit = value;
|
||
}
|
||
//液位下限
|
||
if (arr[i].elementCode == 'levelLowerLimit') {
|
||
levelLowerLimit = value;
|
||
}
|
||
//1#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_1') {
|
||
pumpActualOperationSignal_1_dataseries = arr[i].jsonArray;
|
||
}
|
||
//2#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_2') {
|
||
pumpActualOperationSignal_2_dataseries = arr[i].jsonArray;
|
||
}
|
||
//3#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_3') {
|
||
pumpActualOperationSignal_3_dataseries = arr[i].jsonArray;
|
||
}
|
||
//4#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_4') {
|
||
pumpActualOperationSignal_4_dataseries = arr[i].jsonArray;
|
||
}
|
||
//5#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_5') {
|
||
pumpActualOperationSignal_5_dataseries = arr[i].jsonArray;
|
||
}
|
||
//6#泵实际运行信号
|
||
if (arr[i].elementCode == 'pumpActualOperationSignal_6') {
|
||
pumpActualOperationSignal_6_dataseries = arr[i].jsonArray;
|
||
}
|
||
//预测取水信号
|
||
if (arr[i].elementCode == 'predictedWaterIntakeSignal') {
|
||
predictedWaterIntakeSignal_dataseries = arr[i].jsonArray;
|
||
}
|
||
}
|
||
}
|
||
|
||
echartsBar('levelBar',level,levelUpperLimit,levelLowerLimit);
|
||
|
||
var seriesdata = [
|
||
{
|
||
name: '1#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_1_dataseries
|
||
},
|
||
{
|
||
name: '2#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_2_dataseries
|
||
},
|
||
{
|
||
name: '3#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_3_dataseries
|
||
},
|
||
{
|
||
name: '4#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_4_dataseries
|
||
},
|
||
{
|
||
name: '5#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_5_dataseries
|
||
},
|
||
{
|
||
name: '6#泵实际运行信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: pumpActualOperationSignal_6_dataseries
|
||
},
|
||
{
|
||
name: '预测取水信号',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol:'none',
|
||
data: predictedWaterIntakeSignal_dataseries
|
||
},
|
||
]
|
||
echartsLine('runLine',seriesdata);
|
||
}
|
||
});
|
||
}
|
||
|
||
function getdataseries(mPointHistory, visualCacheDataList, numtail) {
|
||
var dataseries = [];
|
||
if (mPointHistory != null
|
||
&& mPointHistory != undefined
|
||
&& mPointHistory != '') {
|
||
var mPointHistory = mPointHistory;
|
||
for (var m = 0; m < mPointHistory.length; m++) {
|
||
var dataserie = [];
|
||
dataserie.push(mPointHistory[m].measuredt.substr(0, 16));
|
||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
} else {
|
||
if (visualCacheDataList != null
|
||
&& visualCacheDataList != undefined
|
||
&& visualCacheDataList != '') {
|
||
var visualCacheDataList = visualCacheDataList;
|
||
for (var m = 0; m < visualCacheDataList.length; m++) {
|
||
var dataserie = [];
|
||
dataserie.push(visualCacheDataList[m].insdt.substr(0, 16));
|
||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}
|
||
}
|
||
return dataseries;
|
||
}
|
||
function queryData(num) {
|
||
getData(unitId, "");
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
<body class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<div class="content-wrapper content-wrapper-bg-darkblue overall-content">
|
||
<!-- BEGIN CONTAINER -->
|
||
<input type="hidden" name="jsp_id" id="jsp_id" value="waterQualityMonitoring">
|
||
<section class="content container-fluid font-color-black">
|
||
<!-- BEGIN CONTAINER -->
|
||
<div class="col-lg-12">
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="box box-primary">
|
||
<div class="box-header with-border">
|
||
<h3 class="box-title"><strong>水库液位（m）</strong></h3>
|
||
<div class="box-tools pull-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body">
|
||
<div class="row">
|
||
<div class="col-lg-7 levelBar" id="levelBar">
|
||
</div>
|
||
<div class="col-lg-5" style="padding-top: 50px;">
|
||
<h3>下次计划取水时间段</h3>
|
||
<h4 class="nextPlannedWaterIntake_left">2022-11-15 8:00</h4>
|
||
<h4>-</h4>
|
||
<h4 class="nextPlannedWaterIntake_right">2022-11-16 8:00</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
<%--<div class="box-footer"></div>--%>
|
||
<!-- /.box-footer-->
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="box box-primary">
|
||
<div class="box-header with-border">
|
||
<h3 class="box-title"><strong>取水时间段预测</strong></h3>
|
||
<div class="box-tools pull-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body">
|
||
<table id="serviceCentre-list" class="table text-center">
|
||
<thead>
|
||
<tr class="font-color-black">
|
||
<th>序号</th>
|
||
<th>取水时段</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td class="forecastWaterIntakePeriod_1">2022-11-15 8:00 - 2022-11-16 8:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td class="forecastWaterIntakePeriod_2">2022-11-13 8:00 - 2022-11-14 8:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td class="forecastWaterIntakePeriod_3">2022-11-11 8:00 - 2022-11-12 8:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td class="forecastWaterIntakePeriod_4">2022-11-09 8:00 - 2022-11-10 8:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td class="forecastWaterIntakePeriod_5">2022-11-07 8:00 - 2022-11-08 8:00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>6</td>
|
||
<td class="forecastWaterIntakePeriod_6">2022-11-06 8:00 - 2022-11-05 8:00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
<%--<div class="box-footer"></div>--%>
|
||
<!-- /.box-footer-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="box box-primary">
|
||
<div class="box-header with-border">
|
||
<h3 class="box-title"><strong>水泵历史运行曲线</strong></h3>
|
||
<div class="box-tools pull-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body">
|
||
<div class="input-group dateSelect">
|
||
<input type="text" class="form-control" id="reservationtime1" style="width:270px">
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button" onclick="queryData()">查询</button>
|
||
</span>
|
||
</div><!-- /input-group -->
|
||
<div class="row">
|
||
<div class="col-lg-12 runLine" id="runLine">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
<%--<div class="box-footer"></div>--%>
|
||
<!-- /.box-footer-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |