Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/visual/waterQualityModel.jsp

2391 lines
107 KiB
Plaintext
Raw Normal View History

2026-01-16 14:13:44 +08:00
<%@ 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" />
<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">
.whole-body{
background: transparent;
width: 3342px;
height: 1284px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 70px;
padding-right: 70px;
}
.content-wrapper-bg-darkblue{
background: rgba(0,17,33,0.70);
border: 1px solid #454545;
border-radius: 14px;
}
.whole-body select{
text-align: left;
color: #ffffff;
}
.whole-body input{
text-align: center;
color:#04ffff;
width: 100%;
margin: auto;
}
.whole-body select,.whole-body input{
background: rgba(24,105,174,0.70);
border: 4px solid #00cbff;
border-radius: 2px;
font-size: 36px;
font-weight: 400;
line-height: 55px;
}
.whole-body .btn-xlg{
width: 200px;
height: 80px;
background: #00afe6;
border: 1px solid #707070;
border-radius: 14px;
font-size: 38px;
font-weight: 700;
letter-spacing: 0.76px;
}
.whole-body .row+.row{
margin-top: 50px;
}
.nav-tabs {
border: 0;
}
.nav-tabs>li,.nav-tabs>li+li{
padding-left: 110px;
}
.nav-tabs>li>a {
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 55px;
border: 0;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #ffffff;
cursor: default;
background-color: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom-width: 8px;
border-bottom-color: #00ffff;
}
.bg-color{
background: rgba(12,12,12,0.60);
width:100%;
height: 1066px;
}
.introduce-title{
height: 280px;
line-height: 280px;
font-size: 38px;
}
.introduce-content{
padding: 0 50px;
text-indent:2em;/*em是相对单位2em即现在一个字大小的两倍*/
text-align: left;
line-height: 2;
}
.content-left, .content-right{
float: left;
padding:0;
}
.content-left{
width: 810px;
}
.content-right{
width: 2380px;
}
.content-right-subject{
min-height: 215px;
}
.content-bg-darkblue{
background: rgba(12,12,12,0.60);
}
.homePage-btn{
cursor:pointer;
background: rgba(54,167,204,0.70);
border-radius: 10px;
}
.col-xs-1-5 {
width: 12%;
}
.col-xs-1-5{
float: left;
}
.col-xs-1-5 {
position: relative;
min-height: 1px;
}
.title-height{
height:80px;
}
.row-10{
height:10%;
}
.row-15{
height:15%;
}
.row-25{
height:25%;
}
.row-30{
height:30%;
}
.row-35{
height:35%;
}
.row-40{
height:40%;
}
.row-50{
height:50%;
}
.row-70{
height:70%;
}
.row-75{
height:75%;
}
.row-100{
height:100%;
}
.content-wrapper-bg-grey{
background: #eeeeee;
}
.content-wrapper-bg-white,.bgcolor-white,.bgcolor-white-light{
background: #ffffff;
border-radius: 5px;
}
.content-wrapper-bg-white,.content-wrapper-bg-transparent{
margin:0 5px;
border-radius: 5px;
}
.bgcolor-blue{
background: #052941;
}
.margin-bottom-15{
margin-bottom: 15px;
}
.margin-bottom-22{
margin-bottom: 22px;
}
.margin-bottom-25{
margin-bottom: 25px;
}
.margin-bottom-36{
margin-bottom: 22px;
}
.margin-bottom-55{
margin-bottom: 55px;
}
.margin-bottom-75{
margin-bottom: 75px;
}
.padding-topbottom-35{
padding-top: 35px;
padding-bottom: 35px;
}
.pad-topbottom-60{
padding-top: 60px;
padding-bottom: 60px;
}
.pad-leftright-72{
padding-left: 72px;
padding-right: 72px;
}
.pad-bottom-10{
padding-bottom: 10px;
}
.padding-top-5{
padding-top:5px;
}
.padding-top-10{
padding-top: 10px;
}
.padding-top-15{
padding-top: 15px;
}
.padding-top-27{
padding-top: 27px;
}
.padding-top-90{
padding-top: 90px;
}
.line-height-08{
line-height: 0.8;
}
.line-height-1{
line-height: 1;
}
.line-height-2{
line-height: 2;
}
.line-height-2-3{
line-height: 2.3;
}
.line-height-3{
line-height: 3;
}
.line-height-5{
line-height: 5;
}
.line-height-6{
line-height: 6;
}
.font-size-12{
font-size: 12px;
font-weight: 400;
line-height: 24px;
}
.font-size-14{
font-size: 14px;
line-height: inherit;
}
.font-size-16{
font-size: 16px;
}
.font-size-20{
font-size: 20px;
}
.font-size-22{
font-size: 22px;
}
.font-size-30{
font-size: 30px;
}
.font-size-35{
font-size: 35px;
}
.font-size-36{
font-size: 36px;
}
.font-size-40{
font-size: 40px;
line-height: normal;
}
.font-size-50{
font-size: 50px;
}
.font-size-60{
font-size: 60px;
}
.font-size-65{
font-size: 65px;
}
.font-size-70{
font-size: 70px;
}
.font-size-200{
font-size: 200px;
}
.font-color-white,.font-color-dark-white{
color: #FFFFFF;
}
.font-color-black{
color: #0d2336;
font-weight: 600;
}
.font-color-red{
color: #E7A2FF
}
.font-color-redlight{
color: #CE00FF
}
.font-color-blue,.font-color-dark-blue{
color: #1472FF;
}
.font-color-lightBlue,.font-color-light-blue{
color: #04FFFF;
}
.font-color-green{
color: #69F9B6;
}
.font-color-orange{
color: #FF7600;
}
.border-left{
border-left: 1px solid #c1c1c1;
}
.border-right{
border-right: 2px solid #ffffff;
}
.border-bottom{
border-bottom: 1px solid #c1c1c1;
}
.border-leftAndRight{
border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;
}
.bgcolor-blue-light{
background: #192B73;
}
.bgcolor-transparent{
background: transparent;
border-radius: 5px;
}
.img-icon{
width: 70px;
height: 70px;
}
.img-pump{
width: 60px;
height: 97px;
}
.progress_bar{
min-width: 630px;
height: 25px;
}
.polarBarLegend{
width: 360px;
height: 200px;
position: fixed;
}
.polarBar{
min-width: 630px;
height: 450px;
}
.cursor-pointer{
cursor: pointer;
}
.pressure-line{
width: 1180px;
height: 560px;
}
.calculation{
width: 1430px;
height: 500px;
margin: auto;
}
.calculation-fullBtn{
width: 1430px;
margin: auto;
padding-bottom: 15px;
}
.calculation2{
width: 1030px;
height: 380px;
margin: auto;
}
.calculation2-fullBtn{
width: 1030px;
margin: auto;
padding-bottom: 15px;
}
.rawwater-line{
width: 2360px;
height: 560px;
}
.instructions-line{
width: 2360px;
height: 355px;
}
.img-location{
position: absolute;
width: 220px;
}
.dosagePAC-location{
top: 30px;
left: 490px;
}
.dosagePAM-location{
top: 30px;
left: 760px;
}
.inflowFlow-location{
top: 180px;
left: 200px;
}
.influentTurbidity-location{
top: 290px;
left: 200px;
}
.inflowPH-location{
top: 520px;
left: 200px;
}
.inflowTemperature-location{
top: 630px;
left: 200px;
}
.inflowConductivity-location{
top: 740px;
left: 200px;
}
.inflowCod-location{
top: 850px;
left: 200px;
}
.inflowAmmoniaNitrogen-location{
top: 960px;
left: 200px;
}
.sludgeReturn-location{
bottom: 80px;
left: 640px;
}
.sludgeDischarge-location{
bottom: 80px;
right: 450px;
}
.effluentFlow-location{
top: 70px;
right: 110px;
}
.effluentTurbidity-location{
top: 180px;
right: 110px;
}
.modelSelect{
margin-top: 0px !important;
}
@media (min-width: 992px){
.modal-full {
width: 100%;
margin: 0;
}
}
.modal-content{
background-color: #000000;
padding: 0;
}
.full-line-tool{
float: right;
margin: 10px;
width: 1100px;
height: 70px;
margin-right: 150px;
}
.full-line{
float: right;
}
.dropdown-menu,.ranges li,.btn-group-sm>.btn, .btn-sm,.form-control {
font-size: 31px;
}
.daterangepicker .input-mini {
height: 50px;
padding: 0 6px 0 48px;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 100px;
}
.daterangepicker .calendar {
max-width: 500px;
}
</style>
<script type="text/javascript">
var fontcolor_grey = '#aeaeae';
var fontcolor_black = '#0d2336';
var color_blue = '#36FFF9';
var color_blue_other = '#1D4F6D';
var img_name = '';
var color = ['#649DFF','#64FFFA','#ff2ee3','#2e97ff','#ffb536'];
var beginTimeStore1 = '';
var endTimeStore1 = '';
var nowDate = new Date;
var nowDates = [nowDate.Format("yyyy-MM-dd hh:mm")];
var nowDates1 = [nowDate.Format("yyyy-MM-dd hh:mm")];
var nowDates6 = [nowDate.Format("yyyy-MM-dd hh:mm")];
var lastDate = new Date;
var beforeDate = new Date;
for(var i=1;i<=360;i++){
if(i<=120) {
beforeDate.setTime( nowDate.getTime() - 60*i*1000);
nowDates.unshift(beforeDate.Format("yyyy-MM-dd hh:mm"));
lastDate.setTime( nowDate.getTime() + 60*i*1000);
nowDates.push(lastDate.Format("yyyy-MM-dd hh:mm"));
beforeDate.setTime( nowDate.getTime() - 60*i*1000);
nowDates1.unshift(beforeDate.Format("yyyy-MM-dd hh:mm"));
beforeDate.setTime(nowDate.getTime() - 60 * i * 1000);
nowDates6.unshift(beforeDate.Format("yyyy-MM-dd hh:mm"));
}
if(i<=60) {
lastDate.setTime(nowDate.getTime() + 60 * i * 1000);
nowDates1.push(lastDate.Format("yyyy-MM-dd hh:mm"));
}
lastDate.setTime( nowDate.getTime() + 60*i*1000);
nowDates6.push(lastDate.Format("yyyy-MM-dd hh:mm"));
}
function initDate() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm');
endTimeStore1 = moment().subtract(0, 'hours').format('YYYY-MM-DD HH:mm');
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime').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));
}
});
$('#reservationtime').val(beginTimeStore1 + locale.separator + endTimeStore1);
};
$(function () {
var width = $(window).width();
var height = $(window).height();
var proportion_width = width/3340;
var proportion_height = height/1730;
if(width>0 && width<=3340){
$('.whole-body').width($('.whole-body').width()*proportion_width);
$('.whole-body').height($('.whole-body').height()*proportion_height)
$('.modal-content').width(width);
$('.modal-content').height(height);
$('.full-line').width(width);
$('.full-line').height(height-90);
$('.whole-body').css("paddingTop",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingBottom",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingLeft",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingRight",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.content-left').width($('.content-left').width()*proportion_width);
$('.content-right').width($('.content-left').width()*proportion_width);
}else{
$('.full-line').width(width);
$('.full-line').height(height-90);
}
initDate();
var legenddata = ['预测值','实测值'];
var seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
echarts_line('online_calculation',legenddata,seriesdata,'',nowDates,3);
echarts_line('offline_calculation',legenddata,seriesdata,'',nowDates);
legenddata = ['出水余氯预测值','出水余氯实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart1 = echarts_line('online_effluentEhlorine',legenddata,seriesdata,'',nowDates1);
legenddata = ['出水氨氮预测值','出水氨氮实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart2 = echarts_line('online_effluentAmmoniaNitrogen',legenddata,seriesdata,'',nowDates1);
//多图表联动配置方法1分别设置每个echarts对象的group值
echarts.connect([myChart1,myChart2]);
legenddata = ['1#出厂管余氯预测值','1#出厂管余氯实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart3 = echarts_line('online_factoryPipe1Ehlorine',legenddata,seriesdata,'',nowDates6);
legenddata = ['1#出厂管氨氮预测值','1#出厂管氨氮实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart4 = echarts_line('online_factoryPipe1AmmoniaNitrogen',legenddata,seriesdata,'',nowDates6);
echarts.connect([myChart3,myChart4]);
//legenddata = ['硫酸铝投加率预测值','硫酸铝投加率实测值'];
legenddata = ['A池硫酸铝投加率','B池硫酸铝投加率','C池硫酸铝投加率'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart5 = echarts_line('online_aluminumSulfate',legenddata,seriesdata,'',nowDates);
//legenddata = ['PAM投加率预测值','PAM投加率实测值'];
legenddata = ['A池PAM投加率','B池PAM投加率','C池PAM投加率'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [['2023-01-13 10:15',0],['2023-01-13 16:01',0],['2023-01-13 16:02',0],['2023-01-13 16:03',0],['2023-01-13 16:04',0],['2023-01-13 16:05',0],['2023-01-13 16:06',0]
,['2023-01-13 16:07',0],['2023-01-13 16:08',0],['2023-01-13 16:09',0],['2023-01-13 16:10',0],['2023-01-13 16:11',0],['2023-01-13 16:12',0],['2023-01-13 16:13',0]
,['2023-01-13 16:14',0],['2023-01-13 16:15',0]]
}
]
var myChart6 = echarts_line('online_pam',legenddata,seriesdata,'',nowDates);
echarts.connect([myChart5,myChart6]);
echarts_line2('full-line',legenddata,seriesdata,'');
getData();
setInterval("getData()",60000);
});
var mpcode = "";
var legend = "";
function getEcharts(id){
if(id!=null && id!=undefined){
mpcode = $("#online_"+id).attr('data-mpcode');
legend = $("#online_"+id).attr('data-legend');
}
$.post(ext.contextPath + '/data/getDetailData.do',
{mpcode: mpcode,sdt:beginTimeStore1,edt:endTimeStore1} ,
function(result) {
var legenddata = [legend+'预测值',legend+'实测值'];
var seriesdata =[
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: [],
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
data: [],
}
]
if(result.length>0){
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: result[1].data,
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
data: result[0].data,
}
]
}
echarts_line2('full-line',legenddata,seriesdata,'');
},'json');
}
function addAndRemove4Class(one,two){
$('.'+one).addClass(two);
$('.'+one).removeClass(one);
}
var nowhours = '';
var nowminutes = '';
function getData(){
var time = new Date();
var hours = time.getHours();
var minutes = hours*60+time.getMinutes();
if($(".runTimeToday").length > 0){
$(".runTimeToday").html(hours);
}
if($(".runNumberToday").length > 0){
$(".runNumberToday").html(minutes);
}
var bizid = "021NS";
var jsp_id = $('#jsp_id').val();
var time_input = $('#time_input').val();
$.post(ext.contextPath + '/evaluate/getEvaluateData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
var arr= JSON.parse(data);
var currentForecast_seriesdata = [];
var currentMeasurement_seriesdata = [];
var currentForecast = 0;
var currentMeasurement = 0;
var current_mpcode = "";
var effluentEhlorineForecast_seriesdata = [];
var effluentEhlorineMeasurement_seriesdata = [];
var effluentEhlorine_mpcode = "";
var effluentAmmoniaNitrogenForecast_seriesdata = [];
var effluentAmmoniaNitrogenMeasurement_seriesdata = [];
var effluentAmmoniaNitrogen_mpcode = "";
var effluentEhlorineForecast = 0;
var effluentEhlorineMeasurement = 0;
var effluentAmmoniaNitrogenForecast = 0;
var effluentAmmoniaNitrogenMeasurement = 0;
var factoryPipe1EhlorineForecast_seriesdata = [];
var factoryPipe1EhlorineMeasurement_seriesdata = [];
var factoryPipe1Ehlorine_mpcode = "";
var factoryPipe1AmmoniaNitrogenForecast_seriesdata = [];
var factoryPipe1AmmoniaNitrogenMeasurement_seriesdata = [];
var factoryPipe1AmmoniaNitrogen_mpcode = "";
var factoryPipe1EhlorineForecast = 0;
var factoryPipe1EhlorineMeasurement = 0;
var factoryPipe1AmmoniaNitrogenForecast = 0;
var factoryPipe1AmmoniaNitrogenMeasurement = 0;
var aluminumSulfateForecast_seriesdata = [];
var aluminumSulfateMeasurement_seriesdata = [];
var aluminumSulfate_mpcode = "";
var pamForecast_seriesdata = [];
var pamMeasurement_seriesdata = [];
var pam_mpcode = "";
var aluminumSulfateForecast = 0;
var aluminumSulfateMeasurement = 0;
var pamForecast = 0;
var pamMeasurement = 0;
var aluminumSulfateA_run = 0;
var aluminumSulfateB_run = 0;
var aluminumSulfateC_run = 0;
var aluminumSulfateA = 0;
var aluminumSulfateB = 0;
var aluminumSulfateC = 0;
var PAMA = 0;
var PAMB = 0;
var PAMC = 0;
var aluminumSulfateA_seriesdata = [];
var aluminumSulfateB_seriesdata = [];
var aluminumSulfateC_seriesdata = [];
var PAMA_seriesdata = [];
var PAMB_seriesdata = [];
var PAMC_seriesdata = [];
var aluminumSulfateA_mpcode = 0;
var PAM_mpcode = 0;
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
for(var i=0;i<arr.rows.length;i++){
var value =0;
var numtail=0;
var dataMax=0;
var rate = 1;
var nowdate = getNowTime();
if(arr.rows[i].visualCacheConfig!=null
&& arr.rows[i].visualCacheConfig!=undefined
&& arr.rows[i].visualCacheConfig!=''){
var visualCacheConfig = arr.rows[i].visualCacheConfig;
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && visualCacheConfig.numtail!=''){
numtail = visualCacheConfig.numtail;
}
}
if(arr.rows[i].visualCacheData!=null
&& arr.rows[i].visualCacheData!=undefined
&& arr.rows[i].visualCacheData!=''){
var visualCacheData = arr.rows[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.rows[i].mPoint!=null && arr.rows[i].mPoint!=undefined && arr.rows[i].mPoint!=''){
var mPoint = arr.rows[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.rows[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.rows[i].elementCode+"_img").length > 0){
var src = "<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png";
if(value==0){
src = "<%=request.getContextPath()%>/IMG/evaluate/pump_green.png";
}
if(value==1){
src = "<%=request.getContextPath()%>/IMG/evaluate/pump_red.png";
}
$("."+arr.rows[i].elementCode+"_img").html('<img class="img-pump" src='+src+'>');
}
if($("."+arr.rows[i].elementCode+"_text").length > 0){
var text = "";
if(value==1){
text = "运行";
}else{
text = "检修";
}
$("."+arr.rows[i].elementCode+"_text").html(text);
}
if(arr.rows[i].elementCode.indexOf("rating")!= -1){
if(value==3){
value = "D";
}else
if(value==2){
value = "C";
}else
if(value==1){
value = "B";
}else
if(value==0){
value = "A";
}else{
value = "E";
}
}else{
value = parseFloat(value)*rate;
value = value.toFixed(numtail);
}
if(arr.rows[i].elementCode!='currentForecast'
|| arr.rows[i].elementCode!='effluentEhlorineForecast'
|| arr.rows[i].elementCode!='effluentAmmoniaNitrogenForecast'
|| arr.rows[i].elementCode!='factoryPipe1AmmoniaNitrogenForecast'
|| arr.rows[i].elementCode!='aluminumSulfateForecast'
|| arr.rows[i].elementCode!='pamForecast'
|| arr.rows[i].elementCode!='factoryPipe1EhlorineForecast'){
if($("."+arr.rows[i].elementCode).length > 0){
$("."+arr.rows[i].elementCode).html(toThousands(value));
}
}
if($("#"+arr.rows[i].elementCode).length > 0){
$("#"+arr.rows[i].elementCode).val(value);
}
if($("."+arr.rows[i].elementCode).parent().find('.nowdate').length > 0){
$("."+arr.rows[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
}
if(arr.rows[i].elementCode=='currentForecast'){
currentForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'currentForecast');
current_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".currentForecast").length > 0){
currentForecast = $(".currentForecast").html();
}
}
}
if(arr.rows[i].elementCode=='currentMeasurement'){
currentMeasurement = value;
currentMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
current_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='effluentEhlorineForecast'){
effluentEhlorineForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'effluentEhlorineForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".effluentEhlorineForecast").length > 0){
effluentEhlorineForecast = $(".effluentEhlorineForecast").html();
}
}
effluentEhlorine_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='effluentEhlorineMeasurement'){
effluentEhlorineMeasurement = value;
effluentEhlorineMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
effluentEhlorine_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='effluentAmmoniaNitrogenForecast'){
effluentAmmoniaNitrogenForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'effluentAmmoniaNitrogenForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".effluentAmmoniaNitrogenForecast").length > 0){
effluentAmmoniaNitrogenForecast = $(".effluentAmmoniaNitrogenForecast").html();
}
}
effluentAmmoniaNitrogen_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='effluentAmmoniaNitrogenMeasurement'){
effluentAmmoniaNitrogenMeasurement = value;
effluentAmmoniaNitrogenMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
effluentAmmoniaNitrogen_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='factoryPipe1EhlorineForecast'){
factoryPipe1EhlorineForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'factoryPipe1EhlorineForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".factoryPipe1EhlorineForecast").length > 0){
factoryPipe1EhlorineForecast = $(".factoryPipe1EhlorineForecast").html();
}
}
factoryPipe1Ehlorine_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='factoryPipe1EhlorineMeasurement'){
factoryPipe1EhlorineMeasurement = value;
factoryPipe1EhlorineMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
factoryPipe1Ehlorine_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='factoryPipe1AmmoniaNitrogenForecast'){
factoryPipe1AmmoniaNitrogenForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'factoryPipe1AmmoniaNitrogenForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".factoryPipe1AmmoniaNitrogenForecast").length > 0){
factoryPipe1AmmoniaNitrogenForecast = $(".factoryPipe1AmmoniaNitrogenForecast").html();
}
}
factoryPipe1AmmoniaNitrogen_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='factoryPipe1AmmoniaNitrogenMeasurement'){
factoryPipe1AmmoniaNitrogenMeasurement = value;
factoryPipe1AmmoniaNitrogenMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
factoryPipe1AmmoniaNitrogen_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='aluminumSulfateForecast'){
aluminumSulfateForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'aluminumSulfateForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".aluminumSulfateForecast").length > 0){
aluminumSulfateForecast = $(".aluminumSulfateForecast").html();
}
}
aluminumSulfate_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='aluminumSulfateMeasurement'){
aluminumSulfateMeasurement = value;
aluminumSulfateMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
aluminumSulfate_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='pamForecast'){
pamForecast_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail,'pamForecast');
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
if($(".pamForecast").length > 0){
pamForecast = $(".pamForecast").html();
}
}
pam_mpcode += arr.rows[i].visualCacheData.mpcode+",";
}
if(arr.rows[i].elementCode=='pamMeasurement'){
pamMeasurement = value;
pamMeasurement_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
pam_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='aluminumSulfateA_run') {
aluminumSulfateA_run = value;
}
if(arr.rows[i].elementCode=='aluminumSulfateB_run') {
aluminumSulfateB_run = value;
}
if(arr.rows[i].elementCode=='aluminumSulfateC_run') {
aluminumSulfateC_run = value;
}
if(arr.rows[i].elementCode=='aluminumSulfateA'){
aluminumSulfateA = value;
aluminumSulfateA_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
aluminumSulfateA_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='aluminumSulfateB'){
aluminumSulfateB = value;
aluminumSulfateB_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
aluminumSulfateA_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='aluminumSulfateC'){
aluminumSulfateC = value;
aluminumSulfateC_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
aluminumSulfateA_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='PAMA'){
PAMA = value;
PAMA_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
PAM_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='PAMB'){
PAMB = value;
PAMB_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
PAM_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
if(arr.rows[i].elementCode=='PAMC'){
PAMC = value;
PAMC_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
PAM_mpcode += arr.rows[i].visualCacheData.mpcode+",";
if(arr.rows[i].mPointHistory!=null && arr.rows[i].mPointHistory.length>0){
var nowDate = new Date(arr.rows[i].mPointHistory[arr.rows[i].mPointHistory.length-1].measuredt);
nowhoursnowhours = nowDate.getHours();
nowminutes = nowDate.getMinutes();
}
}
}
}
var absoluteError= Math.abs(currentForecast-currentMeasurement);
if($(".absoluteError").length > 0){
$(".absoluteError").html((absoluteError).toFixed(2));
}
var relativeError = 0 ;
if(currentMeasurement !=0){
relativeError = absoluteError/currentMeasurement;
}
if($(".relativeError").length > 0){
$(".relativeError").html((relativeError*100).toFixed(2));
}
var absoluteError_effluentEhlorine= Math.abs(effluentEhlorineForecast-effluentEhlorineMeasurement);
if($(".absoluteError_effluentEhlorine").length > 0){
$(".absoluteError_effluentEhlorine").html((absoluteError_effluentEhlorine).toFixed(2));
}
var relativeError_effluentEhlorine = 0 ;
if(effluentEhlorineMeasurement !=0){
relativeError_effluentEhlorine = absoluteError_effluentEhlorine/effluentEhlorineMeasurement;
}
if($(".relativeError_effluentEhlorine").length > 0){
$(".relativeError_effluentEhlorine").html((relativeError_effluentEhlorine*100).toFixed(2));
}
var absoluteError_effluentAmmoniaNitrogen= Math.abs(effluentAmmoniaNitrogenForecast-effluentAmmoniaNitrogenMeasurement);
if($(".absoluteError_effluentAmmoniaNitrogen").length > 0){
$(".absoluteError_effluentAmmoniaNitrogen").html((absoluteError_effluentAmmoniaNitrogen).toFixed(2));
}
var relativeError_effluentAmmoniaNitrogen = 0 ;
if(effluentAmmoniaNitrogenMeasurement !=0){
relativeError_effluentAmmoniaNitrogen = absoluteError_effluentAmmoniaNitrogen/effluentAmmoniaNitrogenMeasurement;
}
if($(".relativeError_effluentAmmoniaNitrogen").length > 0){
$(".relativeError_effluentAmmoniaNitrogen").html((relativeError_effluentAmmoniaNitrogen*100).toFixed(2));
}
var absoluteError_factoryPipe1Ehlorine= Math.abs(factoryPipe1EhlorineForecast-factoryPipe1EhlorineMeasurement);
if($(".absoluteError_factoryPipe1Ehlorine").length > 0){
$(".absoluteError_factoryPipe1Ehlorine").html((absoluteError_factoryPipe1Ehlorine).toFixed(2));
}
var relativeError_factoryPipe1Ehlorine = 0 ;
if(factoryPipe1EhlorineMeasurement !=0){
relativeError_factoryPipe1Ehlorine = absoluteError_factoryPipe1Ehlorine/factoryPipe1EhlorineMeasurement;
}
if($(".relativeError_factoryPipe1Ehlorine").length > 0){
$(".relativeError_factoryPipe1Ehlorine").html((relativeError_factoryPipe1Ehlorine*100).toFixed(2));
}
var absoluteError_factoryPipe1AmmoniaNitrogen= Math.abs(factoryPipe1AmmoniaNitrogenForecast-factoryPipe1AmmoniaNitrogenMeasurement);
if($(".absoluteError_factoryPipe1AmmoniaNitrogen").length > 0){
$(".absoluteError_factoryPipe1AmmoniaNitrogen").html((absoluteError_factoryPipe1AmmoniaNitrogen).toFixed(2));
}
var relativeError_factoryPipe1AmmoniaNitrogen = 0 ;
if(factoryPipe1AmmoniaNitrogenMeasurement !=0){
relativeError_factoryPipe1AmmoniaNitrogen = absoluteError_factoryPipe1AmmoniaNitrogen/factoryPipe1AmmoniaNitrogenMeasurement;
}
if($(".relativeError_factoryPipe1AmmoniaNitrogen").length > 0){
$(".relativeError_factoryPipe1AmmoniaNitrogen").html((relativeError_factoryPipe1AmmoniaNitrogen*100).toFixed(2));
}
var aluminumSulfate_savings_A = 0;
var PAM_savings_A = 0;
if(aluminumSulfateB_run==2 && aluminumSulfateC_run==2){
if((aluminumSulfateB*1+aluminumSulfateC*1)!=0) {
aluminumSulfate_savings_A = ((aluminumSulfateB*1+aluminumSulfateC*1)/2-aluminumSulfateA*1)/((aluminumSulfateB*1+aluminumSulfateC*1)/2);
}
if((PAMB+PAMC)!=0) {
PAM_savings_A = ((PAMB*1+PAMC*1)/2-PAMA*1)/((PAMB*1+PAMC*1)/2);
}
}
if(aluminumSulfateB_run==2 && aluminumSulfateC_run!=2){
if(aluminumSulfateB!=0) {
aluminumSulfate_savings_A = (aluminumSulfateB-aluminumSulfateA)/aluminumSulfateB;
}
if(PAMB!=0) {
PAM_savings_A = (PAMB-PAMA)/PAMB;
}
}
if(aluminumSulfateC_run==2 && aluminumSulfateB_run!=2){
if(aluminumSulfateC!=0) {
aluminumSulfate_savings_A = (aluminumSulfateC - aluminumSulfateA) / aluminumSulfateC;
}
if(PAMC!=0) {
PAM_savings_A = (PAMC - PAMA) / PAMC;
}
}
if($(".aluminumSulfate_savings_A").length > 0){
$(".aluminumSulfate_savings_A").html((aluminumSulfate_savings_A*100).toFixed(2));
}
if($(".PAM_savings_A").length > 0){
$(".PAM_savings_A").html((PAM_savings_A*100).toFixed(2));
}
nowDates.shift();
nowDate = new Date(nowDates[nowDates.length-1]);
lastDate.setTime( nowDate.getTime() + 60000);
nowDates.push(lastDate.Format("yyyy-MM-dd hh:mm"));
nowDates1.shift();
nowDate = new Date(nowDates1[nowDates1.length-1]);
lastDate.setTime( nowDate.getTime() + 60000);
nowDates1.push(lastDate.Format("yyyy-MM-dd hh:mm"));
nowDates6.shift();
nowDate = new Date(nowDates6[nowDates6.length-1]);
lastDate.setTime( nowDate.getTime() + 60000);
nowDates6.push(lastDate.Format("yyyy-MM-dd hh:mm"));
var legenddata = ['预测值','实测值'];
var seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: currentForecast_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: currentMeasurement_seriesdata
}
]
echarts_line('online_calculation',legenddata,seriesdata,'',nowDates,3);
$("#online_calculation").attr('data-mpcode', current_mpcode);
echarts_line('offline_calculation',legenddata,seriesdata,'',nowDates);
legenddata = ['出水余氯预测值','出水余氯实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: effluentEhlorineForecast_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: effluentEhlorineMeasurement_seriesdata
}
]
var myChart1 = echarts_line('online_effluentEhlorine',legenddata,seriesdata,'',nowDates1);
$("#online_effluentEhlorine").attr('data-mpcode', effluentEhlorine_mpcode);
legenddata = ['出水氨氮预测值','出水氨氮实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: effluentAmmoniaNitrogenForecast_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: effluentAmmoniaNitrogenMeasurement_seriesdata
}
]
var myChart2 = echarts_line('online_effluentAmmoniaNitrogen',legenddata,seriesdata,'',nowDates1);
echarts.connect([myChart1,myChart2]);
$("#online_effluentAmmoniaNitrogen").attr('data-mpcode', effluentAmmoniaNitrogen_mpcode);
legenddata = ['1#出厂管余氯预测值','1#出厂管余氯实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: factoryPipe1EhlorineForecast_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/*areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: factoryPipe1EhlorineMeasurement_seriesdata
}
]
var myChart3 = echarts_line('online_factoryPipe1Ehlorine',legenddata,seriesdata,'',nowDates6);
$("#online_factoryPipe1Ehlorine").attr('data-mpcode', factoryPipe1Ehlorine_mpcode);
legenddata = ['1#出厂管氨氮预测值','1#出厂管氨氮实测值'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: factoryPipe1AmmoniaNitrogenForecast_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: factoryPipe1AmmoniaNitrogenMeasurement_seriesdata
}
]
var myChart4 = echarts_line('online_factoryPipe1AmmoniaNitrogen',legenddata,seriesdata,'',nowDates6);
echarts.connect([myChart3,myChart4]);
$("#online_factoryPipe1AmmoniaNitrogen").attr('data-mpcode', factoryPipe1AmmoniaNitrogen_mpcode);
legenddata = ['A池硫酸铝投加率','B池硫酸铝投加率','C池硫酸铝投加率'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: aluminumSulfateA_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
data: aluminumSulfateB_seriesdata
},
{
name: legenddata[2],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: aluminumSulfateC_seriesdata
}
]
var myChart5 = echarts_line('online_aluminumSulfate',legenddata,seriesdata,'',nowDates);
$("#online_aluminumSulfate").attr('data-mpcode', aluminumSulfateA_mpcode);
legenddata = ['A池PAM投加率','B池PAM投加率','C池PAM投加率'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
smooth: true,
showSymbol: false,
data: PAMA_seriesdata
},
{
name: legenddata[1],
type: 'line',
smooth: true,
showSymbol: false,
data: PAMB_seriesdata
},
{
name: legenddata[2],
type: 'line',
smooth: true,
showSymbol: false,
/* areaStyle: {
opacity: 0.7,
color: '#ff09e6'
},*/
data: PAMC_seriesdata
}
]
var myChart6 = echarts_line('online_pam',legenddata,seriesdata,'',nowDates);
echarts.connect([myChart5,myChart6]);
$("#online_pam").attr('data-mpcode', PAM_mpcode);
});
}
function getdataseries(mPointHistory,visualCacheDataList,numtail,id){
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);
if(id !=null && id!=undefined && id!=''){
var mPointHistoryDate = new Date(mPointHistory[m].measuredt);
var mPointHistoryhours = mPointHistoryDate.getHours();
var mPointHistoryminutes = mPointHistoryDate.getMinutes();
if(mPointHistoryhours==nowhours && mPointHistoryminutes<=nowminutes ){
if($("."+id).length > 0){
$("."+id).html(toThousands(mPointHistory[m].parmvalue.toFixed(numtail)));
}
}
}
}
}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);
if(id !=null && id!=undefined && id!=''){
var mPointHistoryDate = new Date(visualCacheDataList[m].insdt);
var mPointHistoryhours = mPointHistoryDate.getHours();
var mPointHistoryminutes = mPointHistoryDate.getMinutes();
if(mPointHistoryhours==nowhours && mPointHistoryminutes<=nowminutes ){
if($("."+id).length > 0){
$("."+id).html(toThousands(visualCacheDataList[m].value.toFixed(numtail)));
}
}
}
}
}
}
return dataseries;
}
function echarts_line(id,legenddata,seriesdata,title,xAxisData,gd_max){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) {
lifeChart.setOption({
xAxis: {
data: xAxisData
},
series: seriesdata
})
}else{
var option = {
color:['#09c4ff','#ff09e6','#FF7600'],
backgroundColor: 'rgba(12,12,12,0.60)' ,
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 35,
}
},
title:{
text: title,
x: 'center',
textStyle: {
fontSize: '36',
fontWeight: '400',
color: '#ffffff',
},
},
legend: {
data: legenddata,
itemHeight: 35,
itemWidth: 35,
itemGap: 30 ,
right: 20,
top: 20,
textStyle: {
color: '#ffffff',
fontSize: 33 ,
},
icon:'circle'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '16%',
containLabel: true,
},
xAxis: {
type: 'category',
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
formatter:function (value, index) {
return value.substring(11,16);
}
},
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
data:xAxisData,
},
yAxis: {
type: 'value',
max: function (value) {
var valuemax = (value.max*1.2).toFixed(1);
if(gd_max!=null && gd_max!=undefined && gd_max!='' && gd_max>0){
valuemax = gd_max;
}
return valuemax;
},
axisLine: {
show: true,
lineStyle: {
color: '#ffffff',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff',
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
series: seriesdata,
};
lifeChart = echarts.init(document.getElementById(id));
lifeChart.setOption(option,true);
}
return lifeChart;
}
function echarts_line2(id,legenddata,seriesdata,title){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) {
lifeChart.dispose();
}
var option = {
color:['#09c4ff','#ff09e6','#FF7600'],
backgroundColor: 'rgba(12,12,12,0.60)' ,
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 35,
}
},
title:{
text: title,
x: 'center',
textStyle: {
fontSize: '36',
fontWeight: '400',
color: '#ffffff',
},
},
legend: {
data: legenddata,
itemHeight: 35,
itemWidth: 35,
itemGap: 30 ,
right: 150,
top: 20,
textStyle: {
color: '#ffffff',
fontSize: 36 ,
},
icon:'circle'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '16%',
containLabel: true,
},
xAxis: {
type: 'time',
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
formatter: '{yyyy}-{MM}-{dd}\n{HH}:{mm}',
},
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
},
yAxis: {
type: 'value',
max: function (value) {
return (value.max*1.2).toFixed(1);
},
axisLine: {
show: true,
lineStyle: {
color: '#ffffff',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff',
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
series: seriesdata,
};
lifeChart = echarts.init(document.getElementById(id));
lifeChart.setOption(option,true);
return lifeChart;
}
function homePage() {
$('.jump-area').hide();
$('.sub-region').hide();
$('.homePage').show();
}
function jumpArea(el) {
$('.homePage').hide();
$('.sub-region').hide();
$('.jump-area').show();
$('.'+el).show();
}
//添加千分位符合
function toThousands(num) {
var nums =num;
var re=/\d{1,3}(?=(\d{3})+$)/g;
var n1=0;
if(nums!=null && nums!='' && nums!=undefined){
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
}
return n1;
}
function reset() {
$('.inputElement').val(0);
}
function calculation() {
var jsonStr = [
{"mpcode":"PLC41_11AIT003.VAL","value": $('#influentTurbidity').val()},
{"mpcode":"PLC41_11FIT001A.VAL","value": $('#firstLineFlow').val()},
{"mpcode":"PLC41_13AIT001A.VAL","value": $('#effluentTurbidity').val()},
{"mpcode":"PLC31_33AFIQT001A.VAL","value": $('#dosagePAM').val()},
{"mpcode":"PLC31_32AFIQT001.VAL","value": $('#dosagePAC').val()}
];
$.post('http://10.194.10.125:8080/SIPAIIS_Model2/process/modeltype/handCompute4SOAP.do',
{jsonStr : JSON.stringify(jsonStr),modelName: $('#modelSelect').val()} ,
function(data) {
data = $.parseJSON(data);
var code = data.code;
if(code==1){
alert('计算成功。');
$('.currentForecast').html(data.result.toFixed(2));
}else{
alert(data.msg);
}
})
}
function modelSelect(ele) {
var value = $(ele).val();
$('.modelSelect').hide();
$('.'+value).show();
}
</script>
</head>
<body>
<div class="whole-body content-wrapper-bg-darkblue">
<!-- BEGIN CONTAINER -->
<input type="hidden" name="jsp_id" id="jsp_id" value="waterQualityModel">
<div class="col-xs-12 text-center font-size-36 font-color-white margin-bottom-55">
<span class="col-xs-1 title-height line-height-2-3">产线选择:</span>
<div class="col-xs-1">
<select class="form-control select2 title-height line-height-2-3">
<option selected value="line_1">1号产线</option>
<option value="line_2">2号产线</option>
<option value="line_3">3号产线</option>
<option value="line_4">4号产线</option>
</select>
</div>
<span class="col-xs-1 title-height line-height-2-3">模型选择:</span>
<div class="col-xs-2">
<select class="form-control select2 title-height line-height-2-3" id="modelSelect" onchange="modelSelect(this)">
<option selected value="Model_OutTurbidity">浊度预测模型</option>
<option value="coagulationSedimentation">混凝沉淀加药量预测模型(A池)</option>
<option value="disinfecting_tank">消毒接触池水质预测模型</option>
<option value="deliveryWaterQuality">出厂水质预测模型</option>
</select>
</div>
<div class="col-xs-7 title-height line-height-2-3">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab">在线计算</a></li>
<li><a href="#tab_2" data-toggle="tab">模型介绍</a></li>
<li><a href="#tab_3" data-toggle="tab">模型评价</a></li>
<li><a href="#tab_4" data-toggle="tab">离线计算</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 text-center font-size-36 font-color-white">
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="row modelSelect Model_OutTurbidity">
<div class="col-xs-6" style="padding-top: 55px;">
<div class="row">
<label class="col-xs-3 text-right">今日运行时长(小时)</label>
<div class="col-xs-3 font-color-lightBlue runTimeToday">0</div>
<label class="col-xs-3 text-right">当前预测浊度(NTU)</label>
<div class="col-xs-3 font-color-lightBlue currentForecast">0</div>
</div>
<div class="row">
<label class="col-xs-3 text-right">今日运行次数(次)</label>
<div class="col-xs-3 font-color-lightBlue runNumberToday">0</div>
<label class="col-xs-3 text-right">当前实测浊度(NTU)</label>
<div class="col-xs-3 font-color-lightBlue currentMeasurement">0</div>
</div>
<div class="row">
<label class="col-xs-3 text-right">计算频率(min/次)</label>
<div class="col-xs-3 font-color-lightBlue">1</div>
<label class="col-xs-3 text-right">相对误差(%)</label>
<div class="col-xs-3 font-color-lightBlue relativeError">0</div>
</div>
<div class="row">
<label class="col-xs-3 text-right">累计运行时长(小时)</label>
<div class="col-xs-3 font-color-lightBlue">2376</div>
<label class="col-xs-3 text-right">绝对误差(NTU)</label>
<div class="col-xs-3 font-color-lightBlue absoluteError">0</div>
</div>
</div>
<div class="col-xs-6">
<div class="text-right calculation-fullBtn">
<!-- Large modal -->
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('calculation')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation" data-mpcode="" data-legend="浊度" id="online_calculation"></div>
</div>
</div>
<div class="row modelSelect disinfecting_tank" style="display: none;">
<div class="col-xs-8" style="padding-top: 55px;">
<div class="row">
<div class="col-xs-4">
<div class="row">
<label class="col-xs-6 text-right">今日运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue runTimeToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">今日运行次数(次)</label>
<div class="col-xs-6 font-color-lightBlue runNumberToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">计算频率(min/次)</label>
<div class="col-xs-6 font-color-lightBlue">1</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">累计运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue">2376</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-8 text-right">当前预测出水余氯(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue effluentEhlorineForecast">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">当前实测出水余氯(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue effluentEhlorineMeasurement">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">相对误差(%)</label>
<div class="col-xs-4 font-color-lightBlue relativeError_effluentEhlorine">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">绝对误差(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue absoluteError_effluentEhlorine">0</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-8 text-right">当前预测出水氨氮(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue effluentAmmoniaNitrogenForecast">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">当前实测出水氨氮(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue effluentAmmoniaNitrogenMeasurement">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">相对误差(%)</label>
<div class="col-xs-4 font-color-lightBlue relativeError_effluentAmmoniaNitrogen">0</div>
</div>
<div class="row">
<label class="col-xs-8 text-right">绝对误差(mg/L)</label>
<div class="col-xs-4 font-color-lightBlue absoluteError_effluentAmmoniaNitrogen">0</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="margin-bottom-15">
<div class="text-right calculation2-fullBtn">
<!-- Large modal -->
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('effluentEhlorine')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="出水余氯" id="online_effluentEhlorine"></div>
</div>
<div class="">
<div class="text-right calculation2-fullBtn">
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('effluentAmmoniaNitrogen')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="出水氨氮" id="online_effluentAmmoniaNitrogen"></div>
</div>
</div>
</div>
<div class="row modelSelect deliveryWaterQuality" style="display: none;">
<div class="col-xs-8" style="padding-top: 55px;">
<div class="row">
<div class="col-xs-4">
<div class="row">
<label class="col-xs-6 text-right">今日运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue runTimeToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">今日运行次数(次)</label>
<div class="col-xs-6 font-color-lightBlue runNumberToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">计算频率(min/次)</label>
<div class="col-xs-6 font-color-lightBlue">1</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">累计运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue">2376</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-9 text-right">当前预测1#出厂管余氯(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue factoryPipe1EhlorineForecast">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前实测1#出厂管余氯(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue factoryPipe1EhlorineMeasurement">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">相对误差(%)</label>
<div class="col-xs-3 font-color-lightBlue relativeError_factoryPipe1Ehlorine">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">绝对误差(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue absoluteError_factoryPipe1Ehlorine">0</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-9 text-right">当前预测1#出厂管氨氮(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue factoryPipe1AmmoniaNitrogenForecast">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前实测1#出厂管氨氮(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue factoryPipe1AmmoniaNitrogenMeasurement">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">相对误差(%)</label>
<div class="col-xs-3 font-color-lightBlue relativeError_factoryPipe1AmmoniaNitrogen">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">绝对误差(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue absoluteError_factoryPipe1AmmoniaNitrogen">0</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="margin-bottom-15">
<div class="text-right calculation2-fullBtn">
<!-- Large modal -->
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('factoryPipe1Ehlorine')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="1#出厂管余氯" id="online_factoryPipe1Ehlorine"></div>
</div>
<div class="">
<div class="text-right calculation2-fullBtn">
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('factoryPipe1AmmoniaNitrogen')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="1#出厂管氨氮" id="online_factoryPipe1AmmoniaNitrogen"></div>
</div>
</div>
</div>
<div class="row modelSelect coagulationSedimentation" style="display: none;">
<div class="col-xs-8" style="padding-top: 55px;">
<div class="row">
<div class="col-xs-4">
<div class="row">
<label class="col-xs-6 text-right">今日运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue runTimeToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">今日运行次数(次)</label>
<div class="col-xs-6 font-color-lightBlue runNumberToday">0</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">计算频率(min/次)</label>
<div class="col-xs-6 font-color-lightBlue">1</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">累计运行时长(小时)</label>
<div class="col-xs-6 font-color-lightBlue">2376</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-9 text-right">当前A池硫酸铝投加率(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue aluminumSulfateA">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前B池硫酸铝投加率(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue aluminumSulfateB">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前C池硫酸铝投加率(mg/L)</label>
<div class="col-xs-3 font-color-lightBlue aluminumSulfateC">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">A池节省量(%)</label>
<div class="col-xs-3 font-color-lightBlue aluminumSulfate_savings_A">0</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<label class="col-xs-9 text-right">当前A池PAM投加率(mg/m³)</label>
<div class="col-xs-3 font-color-lightBlue PAMA">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前B池PAM投加率(mg/m³)</label>
<div class="col-xs-3 font-color-lightBlue PAMB">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">当前C池PAM投加率(mg/m³)</label>
<div class="col-xs-3 font-color-lightBlue PAMC">0</div>
</div>
<div class="row">
<label class="col-xs-9 text-right">A池节省量(%)</label>
<div class="col-xs-3 font-color-lightBlue PAM_savings_A">0</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="margin-bottom-15">
<div class="text-right calculation2-fullBtn">
<!-- Large modal -->
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('aluminumSulfate')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="硫酸铝投加率" id="online_aluminumSulfate"></div>
</div>
<div class="">
<div class="text-right calculation2-fullBtn">
<button type="button" class="btn btn-xlg btn-info" data-toggle="modal" data-target="#myModal" onclick="getEcharts('pam')">全屏</button>
<%--<div class="input-group">
<input type="text" class="form-control" placeholder="选择日期">
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info">窗口</button>
</span>
</div>--%><!-- /input-group -->
</div>
<div class="calculation2" data-mpcode="" data-legend="PAM投加率" id="online_pam"></div>
</div>
</div>
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
<div class="row modelSelect Model_OutTurbidity">
<div class="col-xs-4">
<div class="bg-color">
<label class="col-xs-12 introduce-title">浊度预测模型</label>
<p class="introduce-content">模型以南市水厂一线高密池进水水质、水量及运行数据等影响因素的实时数据为输入,基于人工神经网络技术,实现一线高密池出水浊度和药剂投加量实时预测。</p>
</div>
</div>
<div class="col-xs-8">
<div class="bg-color">
<img src="<%=request.getContextPath()%>/IMG/evaluate/waterqualitymodel_1.png"></div>
</div>
</div>
<div class="row modelSelect disinfecting_tank" style="display: none;"></div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_3">
<div class="row modelSelect Model_OutTurbidity">
<div class="col-xs-3">
<div class="row">
<label class="col-xs-12 font-size-40">评估等级</label>
</div>
<div class="row">
<label class="col-xs-12 font-size-200 font-color-orange rating">A</label>
</div>
<div class="row">
<label class="col-xs-6 text-right">运行时长(小时)</label>
<div class="col-xs-3 font-color-lightBlue runTime">0</div>
<div class="col-xs-3 font-color-orange runTime_rating">A</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">响应速度(s)</label>
<div class="col-xs-3 font-color-lightBlue responseSpeed">0</div>
<div class="col-xs-3 font-color-orange responseSpeed_rating">A</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">累计平均误差(%)</label>
<div class="col-xs-3 font-color-lightBlue cumulativeAverageError">0</div>
<div class="col-xs-3 font-color-orange cumulativeAverageError_rating">A</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">绝对误差(%)</label>
<div class="col-xs-3 font-color-lightBlue absolute_error">0</div>
<div class="col-xs-3 font-color-orange absolute_error_rating">A</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">相对误差(%)</label>
<div class="col-xs-3 font-color-lightBlue relative_error">0</div>
<div class="col-xs-3 font-color-orange relative_error_rating">A</div>
</div>
</div>
<div class="col-xs-9">
<div class="bg-color text-left">
<img src="<%=request.getContextPath()%>/IMG/evaluate/waterqualitymodel_2.png">
<div class="img-location dosagePAC-location">
<label class="">PAC投加</label>
<div class="font-color-lightBlue">
<span class="dosagePAC">0</span> m³/h
</div>
</div>
<div class="img-location dosagePAM-location">
<label class="">PAM投加</label>
<div class="font-color-lightBlue">
<span class="dosagePAM">0</span> m³/h
</div>
</div>
<div class="img-location inflowFlow-location">
<label class="">进水流量</label>
<div class="font-color-lightBlue">
<span class="inflowFlow">0</span> m³/h
</div>
</div>
<div class="img-location influentTurbidity-location">
<label class="">进水浊度</label>
<div class="font-color-lightBlue">
<span class="influentTurbidity">0</span> NTU
</div>
</div>
<div class="img-location inflowPH-location">
<label class="">进水PH</label>
<div class="font-color-lightBlue">
<span class="inflowPH">0</span>
</div>
</div>
<div class="img-location inflowTemperature-location">
<label class="">进水温度</label>
<div class="font-color-lightBlue">
<span class="inflowTemperature">0</span> ℃
</div>
</div>
<div class="img-location inflowConductivity-location">
<label class="">进水电导率</label>
<div class="font-color-lightBlue">
<span class="inflowConductivity">0</span> μ/cm
</div>
</div>
<div class="img-location inflowCod-location">
<label class="">进水COD</label>
<div class="font-color-lightBlue">
<span class="inflowCod">0</span> mg/l
</div>
</div>
<div class="img-location inflowAmmoniaNitrogen-location">
<label class="">进水氨氮</label>
<div class="font-color-lightBlue">
<span class="inflowAmmoniaNitrogen">0</span> mg/l
</div>
</div>
<div class="img-location sludgeReturn-location">
<label class="">污泥回流</label>
<div class="font-color-lightBlue">
<span class="sludgeReturn">0</span> m³/h
</div>
</div>
<div class="img-location sludgeDischarge-location">
<label class="">污泥排放</label>
<div class="font-color-lightBlue">
<span class="sludgeDischarge">0</span> m³/h
</div>
</div>
<div class="img-location effluentFlow-location">
<label class="">出水流量</label>
<div class="font-color-lightBlue">
<span class="effluentFlow">0</span> m³/h
</div>
</div>
<div class="img-location effluentTurbidity-location">
<label class="">出水浊度</label>
<div class="font-color-lightBlue">
<span class="effluentTurbidity">0</span> NTU
</div>
</div>
</div>
</div>
</div>
<div class="row modelSelect disinfecting_tank" style="display: none;"></div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_4">
<div class="row modelSelect Model_OutTurbidity">
<label class="col-xs-5">参数输入</label>
<label class="col-xs-7">浊度预测</label>
</div>
<div class="row modelSelect Model_OutTurbidity">
<div class="col-xs-5">
<div class="row">
<label class="col-xs-6 text-right">进水浊度(NTU)</label>
<div class="col-xs-6">
<input class="form-control title-height line-height-2-3 font-color-lightBlue inputElement" type="text" name="" id="influentTurbidity" value="0">
</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">一线流量(m3/h)</label>
<div class="col-xs-6">
<input class="form-control title-height line-height-2-3 font-color-lightBlue inputElement" type="text" name="" id="firstLineFlow" value="0">
</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">当前出水浊度(NTU)</label>
<div class="col-xs-6">
<input class="form-control title-height line-height-2-3 font-color-lightBlue inputElement" type="text" name="" id="effluentTurbidity" value="0">
</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">前混凝PAC投加量(mg/l)</label>
<div class="col-xs-6">
<input class="form-control title-height line-height-2-3 font-color-lightBlue inputElement" type="text" name="" id="dosagePAC" value="0">
</div>
</div>
<div class="row">
<label class="col-xs-6 text-right">PAM投加量(mg/l)</label>
<div class="col-xs-6">
<input class="form-control title-height line-height-2-3 font-color-lightBlue inputElement" type="text" name="" id="dosagePAM" value="0">
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right"><button type="button" class="btn btn-xlg btn-info" onclick="reset()">重置</button></div>
<div class="col-xs-6 "><button type="button" class="btn btn-xlg btn-info" onclick="calculation()">计算</button></div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<label class="col-xs-3 text-right">浊度预测值</label>
<div class="col-xs-3 font-color-lightBlue currentForecast">0</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<label class="col-xs-3 text-right">趋势预测</label>
<div class="col-xs-3 font-color-lightBlue"></div>
</div>
<div class="calculation" id="offline_calculation"></div>
</div>
</div>
<div class="row modelSelect disinfecting_tank" style="display: none;"></div>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-full" role="document">
<div class="modal-content">
<div class="full-line-tool" id="full-line-tool">
<div class="input-group">
<input type="text" class="form-control title-height line-height-2-3 font-color-lightBlue inputElement"
id="reservationtime" style="width:700px" >
<span class="input-group-btn">
<button type="button" class="btn btn-xlg btn-info" onclick="getEcharts(null)" >查询</button>
<button type="button" class="btn btn-xlg btn-info" data-dismiss="modal">窗口化</button>
</span>
</div><!-- /input-group -->
</div>
<div class="full-line" id="full-line"></div>
</div>
</div>
</div>
</div>
</body>
</html>