330 lines
14 KiB
Plaintext
330 lines
14 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">
|
|
var color = [
|
|
"#899BFF",
|
|
"#35C837",
|
|
"#89E1FF",
|
|
"#1949EE"
|
|
];
|
|
let myChart1 = "";
|
|
let option1 = [];
|
|
let series1 = [];
|
|
let legendName1 = [];
|
|
|
|
let websocket = null;
|
|
let modelIp = "${modelIp}";
|
|
|
|
$(function () {
|
|
let windowHeight = $(window).height();
|
|
$('#main').css("height", (windowHeight - 30) + "px");
|
|
|
|
myChart1 = echarts.init(document.getElementById("chart"));
|
|
myChart1.showLoading({
|
|
text: '数据正在加载...',
|
|
textStyle: {fontSize: 30, color: '#444'},
|
|
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'},
|
|
zlevel: 0
|
|
});
|
|
option1 = {
|
|
color: color,
|
|
animation: true,
|
|
title: {
|
|
text: '预测回流比',
|
|
left: 'center',
|
|
top: '0'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
grid: {
|
|
left: '2%', // 与容器左侧的距离
|
|
right: '2%', // 与容器右侧的距离
|
|
// top: '8%', // 与容器顶部的距离
|
|
bottom: '1%', // 与容器底部的距离
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: legendName1,
|
|
left: 'right',
|
|
top: '10'
|
|
},
|
|
xAxis: {
|
|
type: 'time'
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '(%)'
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '(m3/s)',
|
|
splitLine:{
|
|
show:false
|
|
}
|
|
}
|
|
],
|
|
series: series1
|
|
};
|
|
myChart1.setOption(option1, true);
|
|
myChart1.hideLoading();
|
|
|
|
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 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=[];
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getJspData.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: unitId,
|
|
jspId: 'internalRefluxSYSList',
|
|
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 == '1chartleft') {
|
|
legendName1.push(content.name);
|
|
series1.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray,
|
|
yAxisIndex: 0
|
|
})
|
|
}else if (content.elementCode == '1chartright') {
|
|
legendName1.push(content.name);
|
|
series1.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray,
|
|
yAxisIndex: 1
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
if(series1.length>0){
|
|
option1.series = series1;
|
|
option1.legend.data = legendName1;
|
|
myChart1.setOption(option1, true);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
</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% - 15px)*0.5);padding: 60px 30px 60px 30px;border-radius: 4px;background-color: #FFFFFF;">
|
|
<div style="float: left;width: 35%;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: 40%;color: #B0B0B0;text-align: center;">
|
|
出水总氮<br>(mg/L)
|
|
</div>
|
|
<div style="float: left;width: 33.3%;height: 40%;color: #B0B0B0;text-align: center;">
|
|
当前预处理量<br>(万m³)
|
|
</div>
|
|
<div style="float: left;width: 33.3%;height: 40%;color: #B0B0B0;text-align: center;">
|
|
小时预测进水量<br>(m³/s)
|
|
</div>
|
|
<div class="OutWater_Total_N" style="float: left;width: 33.3%;height: 40%;font-size: 30px;text-align: center;font-weight: bold;">
|
|
</div>
|
|
<div class="Now_Water_Forecast" style="float: left;width: 33.3%;height: 40%;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
|
</div>
|
|
<div class="Hour_Water_Forecast" style="float: left;width: 33.3%;height: 40%;color:#89E1FF;font-size: 30px;text-align: center;font-weight: bold;">
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 65%;height: 100%;">
|
|
<div style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
1#生反池
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
2#生反池
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
3#生反池
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
4#生反池
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;color:#B0B0B0;font-size: 14px;text-align: center;">
|
|
硝氮值<br>(mg/L)
|
|
</div>
|
|
<div class="1SFC_XDZ" style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="2SFC_XDZ" style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="3SFC_XDZ" style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="4SFC_XDZ" style="float: left;width: 20%;height: 33.3%;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 33.3%;color:#B0B0B0;font-size: 14px;text-align: center;">
|
|
预测回流比<br>(%)
|
|
</div>
|
|
<div class="1SFC_RefluxRatio_Forecast" style="float: left;width: 20%;height: 33.3%;color:#89E1FF;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="2SFC_RefluxRatio_Forecast" style="float: left;width: 20%;height: 33.3%;color:#89E1FF;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="3SFC_RefluxRatio_Forecast" style="float: left;width: 20%;height: 33.3%;color:#89E1FF;font-size: 30px;text-align: center;">
|
|
</div>
|
|
<div class="4SFC_RefluxRatio_Forecast" style="float: left;width: 20%;height: 33.3%;color:#89E1FF;font-size: 30px;text-align: center;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="float:left;width: 100%;height: 15px;">
|
|
|
|
</div>
|
|
<div id="chart"
|
|
style="float:left;width: 100%;height: calc((100% - 15px)*0.5);padding: 20px 30px 20px 30px;border-radius: 4px;background-color: #FFFFFF;">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|
</div>
|
|
</body>
|
|
</html> |