Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/digitalProcess/aerationSystemOfReactionTank.jsp
2026-01-16 14:13:44 +08:00

1219 lines
61 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" %>
<%String contextPath = request.getContextPath();%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%>
</title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<style type="text/css">
</style>
<script type="text/javascript">
let myChart11 = "";
let option11 = [];
let series11 = [];
let legendName11 = [];
let myChart12 = "";
let option12 = [];
let series12 = [];
let legendName12 = [];
let myChart21 = "";
let option21 = [];
let series21 = [];
let legendName21 = [];
let myChart22 = "";
let option22 = [];
let series22 = [];
let legendName22 = [];
let myChart31 = "";
let option31 = [];
let series31 = [];
let legendName31 = [];
let myChart32 = "";
let option32 = [];
let series32 = [];
let legendName32 = [];
let myChart41 = "";
let option41 = [];
let series41 = [];
let legendName41 = [];
let myChart42 = "";
let option42 = [];
let series42 = [];
let legendName42 = [];
let websocket = null;
let modelIp = "${modelIp}";
$(function () {
let windowHeight = $(window).height();
$('#main').css("height", (windowHeight - 30) + "px");
if ('WebSocket' in window) {
// 创建websocket对象
websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
// console.log("ws://"+modelIp+"/modelComputerWebSocketEnd/")
registerEvent();
} else {
alert('当前浏览器不支持websocket')
}
$(window).unload(function () {
console.log("websocket关闭");
websocket.close();
});
getData("","aerationSystemOfReactionTank1");
$("#selectChange").change(function () {
let checkValue = $("#selectChange").val();
if (checkValue == '1') {
$('#show1').css('display', 'block');
$('#show2').css('display', 'none');
$('#show3').css('display', 'none');
$('#show4').css('display', 'none');
getData("","aerationSystemOfReactionTank1");
} else if (checkValue == '2') {
$('#show1').css('display', 'none');
$('#show2').css('display', 'block');
$('#show3').css('display', 'none');
$('#show4').css('display', 'none');
getData("","aerationSystemOfReactionTank2");
} else if (checkValue == '3') {
$('#show1').css('display', 'none');
$('#show2').css('display', 'none');
$('#show3').css('display', 'block');
$('#show4').css('display', 'none');
getData("","aerationSystemOfReactionTank3");
} else if (checkValue == '4') {
$('#show1').css('display', 'none');
$('#show2').css('display', 'none');
$('#show3').css('display', 'none');
$('#show4').css('display', 'block');
getData("","aerationSystemOfReactionTank4");
}
});
})
function getChart1() {
myChart11 = echarts.init(document.getElementById("chart11"));
option11 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName11,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '末端氨氮(mg/L)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series:series11
};
myChart11.setOption(option11, true);
myChart12 = echarts.init(document.getElementById("chart12"));
option12 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName12,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '空气流量(m3/h)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series12
};
myChart12.setOption(option12, true);
}
function getChart2() {
myChart21 = echarts.init(document.getElementById("chart21"));
option21 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName21,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '末端氨氮(mg/L)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series21
};
myChart21.setOption(option21, true);
myChart22 = echarts.init(document.getElementById("chart22"));
option22 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName22,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '空气流量(m3/h)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series22
};
myChart22.setOption(option22, true);
}
function getChart3() {
myChart31 = echarts.init(document.getElementById("chart31"));
option31 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data:legendName31,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '末端氨氮(mg/L)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series31
};
myChart31.setOption(option31, true);
myChart32 = echarts.init(document.getElementById("chart32"));
option32 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName32,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '空气流量(m3/h)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series32
};
myChart32.setOption(option32, true);
}
function getChart4() {
myChart41 = echarts.init(document.getElementById("chart41"));
option41 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName41,
left: 'right'
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '末端氨氮(mg/L)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series41
};
myChart41.setOption(option41, true);
myChart42 = echarts.init(document.getElementById("chart42"));
option42 = {
color: ['#899BFF','#89E1FF', '#35C837'],
animation: true,
tooltip: {
trigger: 'axis',
},
legend: {
data: legendName42,
left: 'right'
},
grid: {
left: '4',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '空气流量(m3/h)'
},
{
type: 'value',
name: '进水流量(m3/s)',
splitLine:{
show:false
}
}
],
series: series42
};
myChart42.setOption(option42, true);
}
function registerEvent() {
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(modelType,"aerationSystemOfReactionTank");
}
}
};
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(modelType,jspId) {
series1 = [];
legendName1 = [];
series2 = [];
legendName2 = [];
$.ajax({
type: 'GET',
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getJspData.do",
dataType: 'json',
data: {
unitId: unitId,
jspId: jspId,
modelType: modelType
// time: '2022-06-01'
},
async: true,
error: function () {
return false;
},
success: function (data) {
if (data.length > 0) {
// console.log(data)
for (let i = 0; i < data.length; i++) {
let content = data[i];
// console.log(content)
if (content.getValueType == 'getMpMainValue') {
if (content.mPoint != null) {
if(content.elementCode=='TH_DE_AERATION_MODE'){
console.log(content.mPoint.parmvalue);
controlChange(content.mPoint.parmvalue);
}else{
let outValue = toThousands(content.mPoint.parmvalue);
// if(isNumber(outValue)){
// outValue = toThousands(outValue);
// }
if (content.visualCacheData != null) {
if (content.visualCacheData.unit != null) {
outValue += content.visualCacheData.unit;
}
}
$('.' + content.elementCode).text(outValue);
}
} else {
$('.' + content.elementCode).text('-');
}
} else if (content.getValueType == 'getRedisData') {
if (content.value != null) {
let redisValue = eval("(" + content.value + ")");
// console.log(redisValue)
let outValue = redisValue.mpvalue;
if (isNumber(outValue)) {
if (content.visualCacheData != null) {
if (content.visualCacheData.numtail != null) {
outValue=Number(outValue).toFixed(Number(content.visualCacheData.numtail));
}
}
outValue = toThousands(outValue);
}
if (content.visualCacheData != null) {
if (content.visualCacheData.unit != null) {
outValue += content.visualCacheData.unit;
}
}
$('.' + content.elementCode).text(outValue);
} else {
$('.' + content.elementCode).text('-');
}
} else if (content.getValueType == 'getTHDayHistory') {
if (content.elementCode == 'chart11') {
legendName11.push(content.name);
series11.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart21') {
legendName21.push(content.name);
series21.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart31') {
legendName31.push(content.name);
series31.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart41') {
legendName41.push(content.name);
series41.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if (content.elementCode == 'chart12') {
legendName12.push(content.name);
series12.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart22') {
legendName22.push(content.name);
series22.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart32') {
legendName32.push(content.name);
series32.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}else if(content.elementCode == 'chart42') {
legendName42.push(content.name);
series42.push({
name: content.name,
type: 'line',
yAxisIndex: content.morder,
data: content.jsonArray
})
}
}
}
if(jspId=='aerationSystemOfReactionTank1'){
getChart1();
}else if(jspId=='aerationSystemOfReactionTank2'){
getChart2();
}else if(jspId=='aerationSystemOfReactionTank3'){
getChart3();
}else if(jspId=='aerationSystemOfReactionTank4'){
getChart4();
}
}
}
});
}
function controlChange(st) {
if (st == '1') {
$('#control2').css("background-color", "#F4F4F4");
$('#control2').css("color", "#000000");
$('#control1').css("background-color", "#008DFF");
$('#control1').css("color", "#FFFFFF");
} else if (st == '2') {
$('#control1').css("background-color", "#F4F4F4");
$('#control1').css("color", "#000000");
$('#control2').css("background-color", "#008DFF");
$('#control2').css("color", "#FFFFFF");
}
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<div id="mainAlertdiv"></div>
<div id="subDiv"></div>
<div id="main">
<div style="float:left;width: 100%;height: 45px;">
<div style="float:left;width: 120px;height: 100%;padding-top: 5px;">
<select id="selectChange" style="height: 35px;">
<option value="1"> 生物池1池</option>
<option value="2"> 生物池2池</option>
<option value="3"> 生物池3池</option>
<option value="4"> 生物池4池</option>
</select>
</div>
<div style="float:left;width: 240px;height: 100%;padding-top: 5px;">
<div style="float: left;width: 100%;height: 45px;padding-left: 20px;padding-right: 20px;text-align: center;line-height: 32px;">
<div id="control1"
style="float: left;width: 50%;height: 32px;color: #000000;background-color:#F4F4F4;border-radius: 4px 0px 0px 4px;">DO模式
</div>
<div id="control2"
style="float: left;width: 50%;height: 32px;color: #000000;background-color:#F4F4F4;border-radius: 0px 4px 4px 0px;">氨氮模式
</div>
</div>
</div>
</div>
<div style="float:left;width: 100%;height: 5px;"></div>
<div id="show1" style="float:left;width: 100%;height: calc(100% - 50px);display: block;">
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="7"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
生物池1池实测参数
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>进水流量</td>
<td>进水氨氮</td>
<td>进水COD</td>
<td>MLSS</td>
<td>1池末端氨氮</td>
<td>出水DO</td>
<td>空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(g/L)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;">
<td class="TH_JS_FL_Time_Total"></td>
<td class="TH_PLC01_RI5_7_Meter1_r_MeterValue"></td>
<td class="TH_PLC01_RI5_7_Meter2_r_MeterValue"></td>
<td class="TH_PLC03_RI3_3_Meter9_r_MeterValue"></td>
<td class="TH_PLC03_RI3_4_Meter1_r_MeterValue"></td>
<td class="TH_PLC03_RI3_3_Meter5_r_MeterValue"></td>
<td class="TH_BD_A_Air2_Flow"></td>
</tr>
</table>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="2"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
出水水质预测
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>目标进水流量</td>
<td>预测1池末端氨氮</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_VP_HOURLY_CURRENT"></td>
<td class="TH_DE_POOL1_NH4N_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(DO模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>出水DO手动设定值</td>
<!-- <td>预测进水流量</td> -->
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<!-- <td>(m³/s)</td> -->
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL1_DO_SET"></td>
<!-- <td class="TH_DE_VP_HOURLY_CURRENT"></td> -->
<td class="TH_DE_POOL1_MODE_DO_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.428);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(氨氮模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>设定1池末端氨氮目标值</td>
<td>出水DO自动设定值</td>
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL1_NH4N_TARGET_SET"></td>
<td class="TH_DE_POOL1_DO_SET_AUTO"></td>
<td class="TH_DE_POOL1_MODE_NH4N_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.4);">
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 45px;line-height:45px;text-align:center;font-weight: bold;font-size: 18px;">
预测出水氨氮&进水流量曲线对比
</div>
<div id="chart11" style="float:left;width: 100%;height: calc(100% - 45px);"></div>
</div>
<div style="float:left;width: 10px;height: 100%;"></div>
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 60px;line-height:60px;text-align:center;font-weight: bold;font-size: 18px;">
预测空气流量
</div>
<div id="chart12" style="float:left;width: 100%;height: calc(100% - 60px);"></div>
</div>
</div>
</div>
<div id="show2" style="float:left;width: 100%;height: calc(100% - 50px);display: none;">
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="7"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
生物池2池实测参数
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>进水流量</td>
<td>进水氨氮</td>
<td>进水COD</td>
<td>MLSS</td>
<td>2池末端氨氮</td>
<td>出水DO</td>
<td>空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(g/L)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;">
<td class="TH_JS_FL_Time_Total"></td>
<td class="TH_PLC01_RI5_7_Meter1_r_MeterValue"></td>
<td class="TH_PLC01_RI5_7_Meter2_r_MeterValue"></td>
<td class="TH_PLC02_RI3_3_Meter9_r_MeterValue"></td>
<td class="TH_PLC02_RI3_4_Meter1_r_MeterValue"></td>
<td class="TH_PLC02_RI3_3_Meter5_r_MeterValue"></td>
<td class="TH_BD_A_Air3_Flow"></td>
</tr>
</table>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="2"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
出水水质预测
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>目标进水流量</td>
<td>预测2池末端氨氮</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_VP_HOURLY_CURRENT"></td>
<td class="TH_DE_POOL2_NH4N_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(DO模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>出水DO手动设定值</td>
<!-- <td>预测进水流量</td> -->
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<!-- <td>(m³/s)</td> -->
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL2_DO_SET"></td>
<!-- <td class="TH_DE_VP_HOURLY_CURRENT"></td> -->
<td class="TH_DE_POOL2_MODE_DO_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.428);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(氨氮模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>设定2池末端氨氮目标值</td>
<td>出水DO自动设定值</td>
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL2_NH4N_TARGET_SET"></td>
<td class="TH_DE_POOL2_DO_SET_AUTO"></td>
<td class="TH_DE_POOL2_MODE_NH4N_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.4);">
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 45px;line-height:45px;text-align:center;font-weight: bold;font-size: 18px;">
预测出水氨氮&进水流量曲线对比
</div>
<div id="chart21" style="float:left;width: 100%;height: calc(100% - 45px);"></div>
</div>
<div style="float:left;width: 10px;height: 100%;"></div>
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 60px;line-height:60px;text-align:center;font-weight: bold;font-size: 18px;">
预测空气流量
</div>
<div id="chart22" style="float:left;width: 100%;height: calc(100% - 60px);"></div>
</div>
</div>
</div>
<div id="show3" style="float:left;width: 100%;height: calc(100% - 50px);display: none;">
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="7"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
生物池3池实测参数
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>进水流量</td>
<td>进水氨氮</td>
<td>进水COD</td>
<td>MLSS</td>
<td>3池末端氨氮</td>
<td>出水DO</td>
<td>空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(g/L)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;">
<td class="TH_JS_FL_Time_Total"></td>
<td class="TH_PLC01_RI5_7_Meter1_r_MeterValue"></td>
<td class="TH_PLC01_RI5_7_Meter2_r_MeterValue"></td>
<td class="TH_PLC04_RI3_3_Meter9_r_MeterValue"></td>
<td class="TH_PLC04_RI3_4_Meter1_r_MeterValue"></td>
<td class="TH_PLC04_RI3_3_Meter5_r_MeterValue"></td>
<td class="TH_BD_B_Air2_Flow"></td>
</tr>
</table>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="2"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
出水水质预测
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>目标进水流量</td>
<td>预测3池末端氨氮</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_VP_HOURLY_CURRENT"></td>
<td class="TH_DE_POOL3_NH4N_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(DO模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>出水DO手动设定值</td>
<!-- <td>预测进水流量</td> -->
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<!-- <td>(m³/s)</td> -->
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL3_DO_SET"></td>
<!-- <td class="TH_DE_VP_HOURLY_CURRENT"></td> -->
<td class="TH_DE_POOL3_MODE_DO_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.428);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(氨氮模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>设定3池末端氨氮目标值</td>
<td>出水DO自动设定值</td>
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL3_NH4N_TARGET_SET"></td>
<td class="TH_DE_POOL3_DO_SET_AUTO"></td>
<td class="TH_DE_POOL3_MODE_NH4N_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.4);">
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 45px;line-height:45px;text-align:center;font-weight: bold;font-size: 18px;">
预测出水氨氮&进水流量曲线对比
</div>
<div id="chart31" style="float:left;width: 100%;height: calc(100% - 45px);"></div>
</div>
<div style="float:left;width: 10px;height: 100%;"></div>
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 60px;line-height:60px;text-align:center;font-weight: bold;font-size: 18px;">
预测空气流量
</div>
<div id="chart32" style="float:left;width: 100%;height: calc(100% - 60px);"></div>
</div>
</div>
</div>
<div id="show4" style="float:left;width: 100%;height: calc(100% - 50px);display: none;">
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="7"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
生物池4池实测参数
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>进水流量</td>
<td>进水氨氮</td>
<td>进水COD</td>
<td>MLSS</td>
<td>4池末端氨氮</td>
<td>出水DO</td>
<td>空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(g/L)</td>
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;">
<td class="TH_JS_FL_Time_Total"></td>
<td class="TH_PLC01_RI5_7_Meter1_r_MeterValue"></td>
<td class="TH_PLC01_RI5_7_Meter2_r_MeterValue"></td>
<td class="TH_PLC05_RI3_3_Meter9_r_MeterValue"></td>
<td class="TH_PLC05_RI3_4_Meter1_r_MeterValue"></td>
<td class="TH_PLC05_RI3_3_Meter5_r_MeterValue"></td>
<td class="TH_BD_B_Air3_Flow"></td>
</tr>
</table>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.3);background-color: #FFFFFF;">
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="2"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
出水水质预测
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>目标进水流量</td>
<td>预测4池末端氨氮</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(m³/s)</td>
<td>(mg/L)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_VP_HOURLY_CURRENT"></td>
<td class="TH_DE_POOL4_NH4N_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.285);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(DO模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>出水DO手动设定值</td>
<!-- <td>预测进水流量</td> -->
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<!-- <td>(m³/s)</td> -->
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL4_DO_SET"></td>
<!-- <td class="TH_DE_VP_HOURLY_CURRENT"></td> -->
<td class="TH_DE_POOL4_MODE_DO_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
<div style="float: left;width: 1px;height: 100%;padding-top: 2%;padding-bottom: 2%;">
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
</div>
<div style="float: left;width: calc((100% - 2px)*0.428);height: 100%;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 20%;vertical-align: middle;">
<td colspan="3"
style="text-align: left;padding-left: 30px;font-weight: bold;font-size: 18px;">
曝气量预测值(氨氮模式)
</td>
</tr>
<tr style="height: 15%;vertical-align: bottom;color: #b0b0b0;">
<td>设定4池末端氨氮目标值</td>
<td>出水DO自动设定值</td>
<td>预测空气流量</td>
</tr>
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
<td>(mg/L)</td>
<td>(mg/L)</td>
<td>(m³/h)</td>
</tr>
<tr style="height: 50%;vertical-align: middle;font-size: 30px;color: #89e1ff;">
<td class="TH_DE_POOL4_NH4N_TARGET_SET"></td>
<td class="TH_DE_POOL4_DO_SET_AUTO"></td>
<td class="TH_DE_POOL4_MODE_NH4N_AIRFLOW_PREDICT_CURRENT"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width: 100%;height: 10px;"></div>
<div style="float:left;width: 100%;height: calc((100% - 20px)*0.4);">
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 45px;line-height:45px;text-align:center;font-weight: bold;font-size: 18px;">
预测出水氨氮&进水流量曲线对比
</div>
<div id="chart41" style="float:left;width: 100%;height: calc(100% - 45px);"></div>
</div>
<div style="float:left;width: 10px;height: 100%;"></div>
<div style="float:left;width: calc((100% - 10px)*0.5);height: 100%;background-color: #FFFFFF;">
<div style="float:left;width: 100%;height: 60px;line-height:60px;text-align:center;font-weight: bold;font-size: 18px;">
预测空气流量
</div>
<div id="chart42" style="float:left;width: 100%;height: calc(100% - 60px);"></div>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>