577 lines
29 KiB
Plaintext
577 lines
29 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 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("");
|
|
})
|
|
|
|
function getChart1() {
|
|
myChart11 = echarts.init(document.getElementById("chart11"));
|
|
option11 = {
|
|
color: ['#899BFF', '#35C837'],
|
|
animation: true,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: legendName11,
|
|
left: 'right'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '浓度(mg/L)'
|
|
}
|
|
],
|
|
series: series11
|
|
};
|
|
myChart11.setOption(option11, true);
|
|
|
|
myChart12 = echarts.init(document.getElementById("chart12"));
|
|
option12 = {
|
|
color: ['#89E1FF', '#35C837'],
|
|
animation: true,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: legendName12,
|
|
left: 'right'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '空气流量(m³/h)'
|
|
}
|
|
],
|
|
series: series12
|
|
};
|
|
myChart12.setOption(option12, 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);
|
|
}
|
|
}
|
|
};
|
|
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: 'carbonSourceDosing',
|
|
modelType: modelType
|
|
// time: '2022-06-01'
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
// console.log(data)
|
|
// $("input[name='radioType1']").each(function(){
|
|
// let nowValue = $(this).val();
|
|
// console.log(nowValue)
|
|
// if(nowValue==1){
|
|
// $(this).attr("checked","checked");
|
|
// }else{
|
|
// $(this).removeAttr("checked");
|
|
// }
|
|
// });
|
|
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;
|
|
// console.log(outValue);
|
|
if (content.elementCode == 'TH_CARBON_PIPELINE_1') {
|
|
changePointSt(Number(outValue),'change11','change12');
|
|
} else if (content.elementCode == 'TH_CARBON_PIPELINE_2') {
|
|
changePointSt(Number(outValue),'change21','change22');
|
|
} else if (content.elementCode == 'TH_CARBON_PIPELINE_3') {
|
|
changePointSt(Number(outValue),'change31','change32');
|
|
} else if (content.elementCode == 'TH_CARBON_PIPELINE_4') {
|
|
changePointSt(Number(outValue),'change41','change42');
|
|
} else {
|
|
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 == 'chart1') {
|
|
legendName11.push(content.name);
|
|
series11.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray
|
|
})
|
|
} else if (content.elementCode == 'chart2') {
|
|
legendName12.push(content.name);
|
|
series12.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
getChart1();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function changePointSt(value, id1, id2) {
|
|
if (value == '1') {
|
|
$('#' + id1).css("background-color", "#00BDFF");
|
|
$('#' + id1).css("color", "#ffffff");
|
|
$('#' + id2).css("background-color", "#F2F2F2");
|
|
$('#' + id2).css("color", "#000000");
|
|
} else if (value == '2') {
|
|
$('#' + id2).css("background-color", "#00BDFF");
|
|
$('#' + id2).css("color", "#ffffff");
|
|
$('#' + id1).css("background-color", "#F2F2F2");
|
|
$('#' + id1).css("color", "#000000");
|
|
}
|
|
}
|
|
|
|
</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: calc((100% - 20px)*0.2);background-color: #FFFFFF;">
|
|
<div style="float: left;width: calc((100% - 3px)*0.2);height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 30%;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>进水COD</td>
|
|
<td>进水总氮</td>
|
|
</tr>
|
|
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
</tr>
|
|
<tr style="height: 40%;vertical-align: top;font-size: 30px;padding-top: 15px;">
|
|
<td class="TH_PLC01_RI5_7_Meter2_r_MeterValue"></td>
|
|
<td class="TH_PLC01_RI5_7_Meter0_r_MeterValue"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 1px;height: 100%;padding-top: 1%;padding-bottom: 1%;">
|
|
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
|
|
</div>
|
|
<div style="float: left;width: calc((100% - 3px)*0.4 );height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 30%;vertical-align: middle;">
|
|
<td colspan="4"
|
|
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>2#生反池</td>
|
|
<td>3#生反池</td>
|
|
<td>4#生反池</td>
|
|
</tr>
|
|
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
</tr>
|
|
<tr style="height: 40%;vertical-align: top;font-size: 30px;padding-top: 15px;">
|
|
<td class="TH_PLC03_RI3_4_Meter4_r_MeterValue"></td>
|
|
<td class="TH_PLC02_RI3_4_Meter4_r_MeterValue"></td>
|
|
<td class="TH_PLC04_RI3_4_Meter4_r_MeterValue"></td>
|
|
<td class="TH_PLC05_RI3_4_Meter4_r_MeterValue"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 1px;height: 100%;padding-top: 1%;padding-bottom: 1%;">
|
|
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
|
|
</div>
|
|
<div style="float: left;width: calc((100% - 3px)*0.2);height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 30%;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>1#滤池</td>
|
|
<td>2#滤池</td>
|
|
</tr>
|
|
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
</tr>
|
|
<tr style="height: 40%;vertical-align: top;font-size: 30px;padding-top: 15px;">
|
|
<td class="TH_INF_NOX_TO_HMI"></td>
|
|
<td class="TH_PLC11_INF_NOX_TO_HMI"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 1px;height: 100%;padding-top: 1%;padding-bottom: 1%;">
|
|
<div style="float: left;width: 100%;height: 100%;background-color: #e3e3e3;"></div>
|
|
</div>
|
|
<div style="float: left;width: calc((100% - 3px)*0.2);height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 30%;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>出水COD</td>
|
|
<td>出水总氮</td>
|
|
</tr>
|
|
<tr style="height: 15%;vertical-align: top;color: #b0b0b0;">
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
</tr>
|
|
<tr style="height: 40%;vertical-align: top;font-size: 30px;padding-top: 15px;">
|
|
<td class="TH_PLC14_RI3_2_Meter5_r_MeterValue"></td>
|
|
<td class="TH_PLC14_RI3_2_Meter1_r_MeterValue">16.82</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);background-color: #FFFFFF;padding-bottom:10px;">
|
|
<div style="float: left;width: 30%;height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 20%;vertical-align: middle;">
|
|
<td colspan="3"
|
|
style="text-align: center;font-weight: bold;font-size: 18px;">
|
|
投加点选择
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 10%;color: #b0b0b0;">
|
|
<td style="width: 33.3%;"></td>
|
|
<td style="width: 33.3%;"></td>
|
|
<td style="width: 33.3%;"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td>1#点</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change11" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
1#生反池加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change12" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
1#滤池东加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td>2#点</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change21" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
2#生反池加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change22" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
1#滤池西加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td>3#点</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change31" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
3#生反池加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change32" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
2#滤池东加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td>4#点</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change41" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
4#生反池加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td style="padding: 5px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr>
|
|
<td id="change42" style="width: 100%;height: 100%;font-size: 16px;background-color: #F2F2F2;color: #000000;cursor: pointer;">
|
|
2#滤池西加药
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 15%;height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 20%;vertical-align: middle;">
|
|
<td colspan="1"
|
|
style="text-align: center;font-weight: bold;font-size: 18px;">
|
|
碳源投加实际值
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 10%;color: #b0b0b0;font-size: 16px;">
|
|
<td>加药量<br>(L/h)</td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td class="TH_F8_0"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td class="TH_F8_1"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td class="TH_F8_2"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #000001;">
|
|
<td class="TH_F8_3"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 15%;height: 100%;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 20%;vertical-align: middle;">
|
|
<td colspan="1"
|
|
style="text-align: center;font-weight: bold;font-size: 18px;">
|
|
碳源投加预测值
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 10%;color: #b0b0b0;font-size: 16px;">
|
|
<td>加药量<br>(L/h)</td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #89E1FF;">
|
|
<td class="TH_CH3COONA_PIPELINE_1_CAL"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #89E1FF;">
|
|
<td class="TH_CH3COONA_PIPELINE_2_CAL"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #89E1FF;">
|
|
<td class="TH_CH3COONA_PIPELINE_3_CAL"></td>
|
|
</tr>
|
|
<tr style="height: 17.5%;font-size: 30px;color: #89E1FF;">
|
|
<td class="TH_CH3COONA_PIPELINE_4_CAL"></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);background-color: #FFFFFF;">
|
|
<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="chart11" style="float:left;width: 100%;height: calc(100% - 60px);"></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>
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|
</div>
|
|
</body>
|
|
</html> |