first commit
This commit is contained in:
823
WebRoot/jsp/digitalProcess/PACDosingList.jsp
Normal file
823
WebRoot/jsp/digitalProcess/PACDosingList.jsp
Normal file
@ -0,0 +1,823 @@
|
||||
<%@ 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 color = [
|
||||
"#899BFF",
|
||||
"#35C837",
|
||||
"#89E1FF"
|
||||
];
|
||||
let series1 = [];
|
||||
let legendName1 = [];
|
||||
let series2 = [];
|
||||
let legendName2 = [];
|
||||
|
||||
let series3 = [];
|
||||
let legendName3 = [];
|
||||
let series4 = [];
|
||||
let legendName4 = [];
|
||||
|
||||
let websocket = null;
|
||||
let modelIp = "${modelIp}";
|
||||
|
||||
let tabSt = "PAC";
|
||||
|
||||
$(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();
|
||||
});
|
||||
|
||||
if ('${param.tabSt}' != '') {
|
||||
tabSt = '${param.tabSt}';
|
||||
}
|
||||
|
||||
if ('${param.unitId}' != '') {
|
||||
unitId = '${param.unitId}';
|
||||
}
|
||||
|
||||
getData("");
|
||||
})
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
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) {
|
||||
series1 = [];
|
||||
legendName1 = [];
|
||||
series2 = [];
|
||||
legendName2 = [];
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getJspData.do",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId,
|
||||
jspId: 'PACDosingList',
|
||||
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) {
|
||||
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 == '1chart') {
|
||||
legendName1.push(content.name);
|
||||
series1.push({
|
||||
name: content.name,
|
||||
type: 'line',
|
||||
yAxisIndex: content.morder,
|
||||
data: content.jsonArray
|
||||
})
|
||||
} else if (content.elementCode == '2chart') {
|
||||
legendName2.push(content.name);
|
||||
series2.push({
|
||||
name: content.name,
|
||||
type: 'line',
|
||||
yAxisIndex: content.morder,
|
||||
data: content.jsonArray
|
||||
})
|
||||
} else if (content.elementCode == '3chart') {
|
||||
legendName3.push(content.name);
|
||||
series3.push({
|
||||
name: content.name,
|
||||
type: 'line',
|
||||
data: content.jsonArray
|
||||
})
|
||||
} else if (content.elementCode == '4chart') {
|
||||
legendName4.push(content.name);
|
||||
series4.push({
|
||||
name: content.name,
|
||||
type: 'line',
|
||||
data: content.jsonArray
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
changeYC1(tabSt);
|
||||
changeYC2(tabSt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getChart1() {
|
||||
let myChart = echarts.init(document.getElementById("1Chart"));
|
||||
let option = {
|
||||
color: color,
|
||||
animation: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: legendName1,
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(kg)'
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '(m³/s)',
|
||||
splitLine: {
|
||||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
}
|
||||
}
|
||||
],
|
||||
series: series1
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
// if (series1.length > 0) {
|
||||
// option1.series = series1;
|
||||
// option1.legend.data = legendName1;
|
||||
// myChart1.setOption(option1, true);
|
||||
// }
|
||||
}
|
||||
|
||||
function getChart2() {
|
||||
let myChart = echarts.init(document.getElementById("2Chart"));
|
||||
let option = {
|
||||
color: color,
|
||||
animation: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: legendName2,
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(kg)'
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '(m³/s)',
|
||||
splitLine: {
|
||||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
}
|
||||
}
|
||||
],
|
||||
series: series2
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function getChart3() {
|
||||
let myChart = echarts.init(document.getElementById("3Chart"));
|
||||
let option = {
|
||||
color: color,
|
||||
animation: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: legendName3,
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(kg)'
|
||||
}
|
||||
],
|
||||
series: series3
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function getChart4() {
|
||||
let myChart = echarts.init(document.getElementById("4Chart"));
|
||||
let option = {
|
||||
color: color,
|
||||
animation: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: legendName4,
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(kg)'
|
||||
}
|
||||
],
|
||||
series: series4
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function changeYC1(st) {
|
||||
if (st == 'PAC') {
|
||||
$('#PACSt1').css('background-color', '#00acd6');
|
||||
$('#PACSt1').css('color', '#FFFFFF');
|
||||
|
||||
$('#PAMSt1').css('background-color', '#FFFFFF');
|
||||
$('#PAMSt1').css('color', '#000000');
|
||||
|
||||
$('#st1Hidden1').css('display', 'block');
|
||||
$('#st1Hidden2').css('display', 'none');
|
||||
|
||||
setTimeout("getChart1()", "1000");
|
||||
} else if (st == 'PAM') {
|
||||
$('#PAMSt1').css('background-color', '#00acd6');
|
||||
$('#PAMSt1').css('color', '#FFFFFF');
|
||||
|
||||
$('#PACSt1').css('background-color', '#FFFFFF');
|
||||
$('#PACSt1').css('color', '#000000');
|
||||
|
||||
$('#st1Hidden2').css('display', 'block');
|
||||
$('#st1Hidden1').css('display', 'none');
|
||||
|
||||
setTimeout("getChart3()", "1000");
|
||||
}
|
||||
}
|
||||
|
||||
function changeYC2(st) {
|
||||
if (st == 'PAC') {
|
||||
$('#PACSt2').css('background-color', '#00acd6');
|
||||
$('#PACSt2').css('color', '#FFFFFF');
|
||||
|
||||
$('#PAMSt2').css('background-color', '#FFFFFF');
|
||||
$('#PAMSt2').css('color', '#000000');
|
||||
|
||||
$('#st2Hidden1').css('display', 'block');
|
||||
$('#st2Hidden2').css('display', 'none');
|
||||
setTimeout("getChart2()", "1000");
|
||||
|
||||
} else if (st == 'PAM') {
|
||||
$('#PAMSt2').css('background-color', '#00acd6');
|
||||
$('#PAMSt2').css('color', '#FFFFFF');
|
||||
|
||||
$('#PACSt2').css('background-color', '#FFFFFF');
|
||||
$('#PACSt2').css('color', '#000000');
|
||||
|
||||
$('#st2Hidden2').css('display', 'block');
|
||||
$('#st2Hidden1').css('display', 'none');
|
||||
|
||||
setTimeout("getChart4()", "1000");
|
||||
}
|
||||
}
|
||||
</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;"> -->
|
||||
<!-- <button style="width: 80px;height: 32px;border: 1px solid #B0B0B0;">计算</button> -->
|
||||
<!-- </div> -->
|
||||
<div style="float:left;width: 100%;height: calc((100% - 15px)*0.5);padding: 30px;border-radius: 4px;background-color: #FFFFFF;">
|
||||
<div style="float:right;width: 55%;height: 40px;">
|
||||
<div id="PACSt1"
|
||||
style="float: left;width: 100px;height: 30px;line-height:30px;text-align:center;background-color: #FFFFFF;border-radius: 2px;border: 1px solid #B0B0B0;cursor: pointer;"
|
||||
onclick="changeYC1('PAC');">PAC预测
|
||||
</div>
|
||||
<div id="PAMSt1"
|
||||
style="float: left;width: 100px;height: 30px;line-height:30px;text-align:center;margin-left:10px;background-color: #FFFFFF;border-radius: 2px;border: 1px solid #B0B0B0;cursor: pointer;"
|
||||
onclick="changeYC1('PAM');">PAM预测
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width: 100%;height: calc(100% - 40px);">
|
||||
<div style="float: left;width: 20%;height: 100%;border-right: 1px solid #B0B0B0;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
进水参数
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
工艺单体
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
预测小时处理量<br>(m³/s)
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
1#高密池
|
||||
</div>
|
||||
<div class="1GMC_Hour_Handling_Forecast"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
高密池进水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
高密池进水TP<br>(mg/L)
|
||||
</div>
|
||||
<div class="1GMC_JS_SS"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_JS_TP"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 100%;border-right: 1px solid #B0B0B0;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
出水参数
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
AC池出水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
AC池出水TP<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
出水TP目标值<br>(mg/L)
|
||||
</div>
|
||||
<div class="1GMC_AC_CS_SS"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_AC_CS_TP"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color:#04A7EE;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
<div class="1GMC_AC_CS_TP_Forecast"
|
||||
style="float: left;width: 100%;height: 100%;padding-left: 10px;padding-right: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
BD池出水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
BD池出水TP<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
出水TP目标值<br>(mg/L)
|
||||
</div>
|
||||
<div class="1GMC_BD_CS_SS"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_BD_CS_TP"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color:#04A7EE;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
<div class="1GMC_BD_CS_TP_Forecast"
|
||||
style="float: left;width: 100%;height: 100%;padding-left: 10px;padding-right: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="st1Hidden1" style="float: left;width: 55%;height: 100%;display: block;">
|
||||
<div style="float: left;width: 45%;height: 100%;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
预测值
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池加药量<br>(kg)
|
||||
</div>
|
||||
<div class="1GMC_A_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_B_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_C_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_D_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div class="1GMC_A_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_B_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_C_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="1GMC_D_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="1Chart" style="float: left;width: 55%;height: 100%;"></div>
|
||||
</div>
|
||||
<div id="st1Hidden2" style="float: left;width: 55%;height: 100%;display: none;">
|
||||
<div style="float: left;width: 45%;height: 100%;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
预测值
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池加药量<br>(kg)
|
||||
</div>
|
||||
<div class="TH_PAM_1_A_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_B_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_C_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_D_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div class="TH_PAM_1_A_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_B_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_C_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_1_D_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="3Chart" style="float: left;width: 55%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width: 100%;height: 15px;">
|
||||
|
||||
</div>
|
||||
<div style="float:left;width: 100%;height: calc((100% - 15px)*0.5);padding: 30px;border-radius: 4px;background-color: #FFFFFF;">
|
||||
<div style="float:right;width: 55%;height: 40px;">
|
||||
<div id="PACSt2"
|
||||
style="float: left;width: 100px;height: 30px;line-height:30px;text-align:center;background-color: #FFFFFF;border-radius: 2px;border: 1px solid #B0B0B0;cursor: pointer;"
|
||||
onclick="changeYC2('PAC');">PAC预测
|
||||
</div>
|
||||
<div id="PAMSt2"
|
||||
style="float: left;width: 100px;height: 30px;line-height:30px;text-align:center;margin-left:10px;background-color: #FFFFFF;border-radius: 2px;border: 1px solid #B0B0B0;cursor: pointer;"
|
||||
onclick="changeYC2('PAM');">PAM预测
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width: 100%;height: calc(100% - 40px);">
|
||||
<div style="float: left;width: 20%;height: 100%;border-right: 1px solid #B0B0B0;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
进水参数
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
工艺单体
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
预测小时处理量<br>(m³/s)
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
2#高密池
|
||||
</div>
|
||||
<div class="2GMC_Hour_Handling_Forecast"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
高密池进水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 50%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
高密池进水TP<br>(mg/L)
|
||||
</div>
|
||||
<div class="2GMC_JS_SS"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_JS_TP"
|
||||
style="float: left;width: 50%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 100%;border-right: 1px solid #B0B0B0;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
出水参数
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
AC池出水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
AC池出水TP<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
出水TP目标值<br>(mg/L)
|
||||
</div>
|
||||
<div class="2GMC_AC_CS_SS"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_AC_CS_TP"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color:#04A7EE;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
<div class="2GMC_AC_CS_TP_Forecast"
|
||||
style="float: left;width: 100%;height: 100%;padding-left: 10px;padding-right: 10px;">
|
||||
<!-- <input class="2GMC_AC_CS_TP_Forecast" style="width: 100%;text-align: center;border: 0px;border-bottom: 2px solid #04A7EE;" -->
|
||||
<!-- value="0" readonly> -->
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
BD池出水SS<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
BD池出水TP<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
出水TP目标值<br>(mg/L)
|
||||
</div>
|
||||
<div class="2GMC_BD_CS_SS"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_BD_CS_TP"
|
||||
style="float: left;width: 33.3%;height: 20%;padding-left: 20px;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height: 20%;padding-left: 20px;color:#04A7EE;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
<div class="2GMC_BD_CS_TP_Forecast"
|
||||
style="float: left;width: 100%;height: 100%;padding-left: 10px;padding-right: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="st2Hidden1" style="float: left;width: 55%;height: 100%;display: block;">
|
||||
<div style="float: left;width: 45%;height: 100%;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
预测值
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池加药量<br>(kg)
|
||||
</div>
|
||||
<div class="2GMC_A_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_B_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_C_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_D_Dosage_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div class="2GMC_A_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_B_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_C_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="2GMC_D_DosageRate_Forecast"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="2Chart" style="float: left;width: 55%;height: 100%;"></div>
|
||||
</div>
|
||||
<div id="st2Hidden2" style="float: left;width: 55%;height: 100%;display: block;">
|
||||
<div style="float: left;width: 45%;height: 100%;">
|
||||
<div style="float: left;width: 100%;height: 20%;padding-left: 20px;font-size: 18px;font-weight: bold;">
|
||||
预测值
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池加药量<br>(kg)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池加药量<br>(kg)
|
||||
</div>
|
||||
<div class="TH_PAM_2_A_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_B_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_C_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_D_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
A池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
B池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
C池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div style="float: left;width: 25%;height: 20%;padding-left: 20px;color: #B0B0B0;text-align: center;">
|
||||
D池投加率<br>(mg/L)
|
||||
</div>
|
||||
<div class="TH_PAM_2_A_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_B_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_C_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
<div class="TH_PAM_2_D_R_PREDICT"
|
||||
style="float: left;width: 25%;height: 20%;padding-left: 20px;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="4Chart" style="float: left;width: 55%;height: 100%;"></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>
|
||||
Reference in New Issue
Block a user