first commit
This commit is contained in:
446
WebRoot/jsp/digitalProcess/carbonSourceAdditionPrediction_CG.jsp
Normal file
446
WebRoot/jsp/digitalProcess/carbonSourceAdditionPrediction_CG.jsp
Normal file
@ -0,0 +1,446 @@
|
||||
<%@ 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>
|
||||
<!-- 引入daterangepicker-->
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||||
charset="utf-8"></script>
|
||||
|
||||
<style type="text/css">
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var color = [
|
||||
"#899BFF",
|
||||
"#35C837",
|
||||
"#89E1FF",
|
||||
"#1949EE"
|
||||
];
|
||||
|
||||
$(function () {
|
||||
let windowHeight = $(window).height();
|
||||
$('#main').css("height", (windowHeight - 30) + "px");
|
||||
|
||||
getData();
|
||||
})
|
||||
|
||||
function getData(modelType) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getHFCGJspData.do",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId,
|
||||
jspId: 'improveSystemPrediction_CG',
|
||||
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];
|
||||
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 == 'chartleft') {
|
||||
// legendName1.push(content.name);
|
||||
// series1.push({
|
||||
// name: content.name,
|
||||
// type: 'line',
|
||||
// data: content.jsonArray,
|
||||
// yAxisIndex: 0
|
||||
// })
|
||||
// }else if (content.elementCode == 'chartright') {
|
||||
// legendName1.push(content.name);
|
||||
// series1.push({
|
||||
// name: content.name,
|
||||
// type: 'line',
|
||||
// data: content.jsonArray,
|
||||
// yAxisIndex: 1
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
let legendName1 = ['实际加药量', '计算加药量'];
|
||||
let series1 = [];
|
||||
series1.push({
|
||||
name: '实际加药量',
|
||||
type: 'line',
|
||||
data: [['2024-01-01', 36], ['2024-01-02', 45], ['2024-01-03', 21], ['2024-01-04', 65], ['2024-01-05', 47]]
|
||||
})
|
||||
series1.push({
|
||||
name: '计算加药量',
|
||||
type: 'line',
|
||||
data: [['2024-01-01', 51], ['2024-01-02', 35], ['2024-01-03', 28], ['2024-01-04', 57], ['2024-01-05', 50]]
|
||||
})
|
||||
|
||||
getChart('chart1', legendName1, series1);
|
||||
getChart('chart2', legendName1, series1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getChart(chartId, legendName, series) {
|
||||
let myChart = echarts.init(document.getElementById(chartId));
|
||||
let option = {
|
||||
color: color,
|
||||
animation: true,
|
||||
// title: {
|
||||
// text: titleName,
|
||||
// left: '20px',
|
||||
// top: '0'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '4%', // 与容器左侧的距离
|
||||
right: '4%', // 与容器右侧的距离
|
||||
top: '10px', // 与容器顶部的距离
|
||||
bottom: '40px', // 与容器底部的距离
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: legendName,
|
||||
left: 'center',
|
||||
bottom: '10'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
// name: '(%)'
|
||||
}
|
||||
],
|
||||
series: series
|
||||
};
|
||||
myChart.setOption(option, 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"
|
||||
style="background-size: 100% 100%;">
|
||||
<!-- 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.35);background-color: #FFFFFF;border: 1px solid rgba(225, 225, 225, 1);border-radius:4px;">
|
||||
<div class="box-header" style="border-bottom: 1px solid #C4E2E6;padding: 0; margin-left: 15px;">
|
||||
<h3 class="box-title" style="border-bottom: 2px solid #C4E2E6;height: 42px;line-height: 2.5;">
|
||||
<strong>水质参数</strong></h3>
|
||||
</div>
|
||||
<div style="float: left;width: calc((100% - 3px)*0.2);height: calc(100% - 43px);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="height: 20px;color: #333333;font-size: 18px;font-weight: 700;">
|
||||
<td colspan="2" style="text-align: left;padding-left: 20px;height: 40px;vertical-align: top;">进水参数
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>进水COD</td>
|
||||
<td>进水总氮</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float: left;width: 1px;height: calc(100% - 43px);padding-top: 20px;padding-bottom: 20px;">
|
||||
<div style="float: left;width: 1px;height: 100%;background-color: #B0B0B0;"></div>
|
||||
</div>
|
||||
<div style="float: left;width: calc((100% - 3px)*0.4);height: calc(100% - 43px);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="height: 20px;color: #333333;font-size: 18px;font-weight: 700;">
|
||||
<td colspan="4" style="text-align: left;padding-left: 20px;height: 40px;vertical-align: top;">生反池缺氧段硝态氮
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>1#生物池出水硝态氮</td>
|
||||
<td>2#生物池出水硝态氮</td>
|
||||
<td>3#生物池出水硝态氮</td>
|
||||
<td>4#生物池出水硝态氮</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float: left;width: 1px;height: calc(100% - 43px);padding-top: 20px;padding-bottom: 20px;">
|
||||
<div style="float: left;width: 1px;height: 100%;background-color: #B0B0B0;"></div>
|
||||
</div>
|
||||
<div style="float: left;width: calc((100% - 3px)*0.2);height: calc(100% - 43px);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="height: 20px;color: #333333;font-size: 18px;font-weight: 700;">
|
||||
<td colspan="2" style="text-align: left;padding-left: 20px;height: 40px;vertical-align: top;padding-left: 10px;">反硝化滤池进水硝氮
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>进水硝态氮</td>
|
||||
<td>出水硝态氮</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float: left;width: 1px;height: calc(100% - 43px);padding-top: 20px;padding-bottom: 20px;">
|
||||
<div style="float: left;width: 1px;height: 100%;background-color: #B0B0B0;"></div>
|
||||
</div>
|
||||
<div style="float: left;width: calc((100% - 3px)*0.2);height: calc(100% - 43px);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="height: 20px;color: #333333;font-size: 18px;font-weight: 700;">
|
||||
<td colspan="2"
|
||||
style="text-align: left;padding-left: 20px;height: 40px;vertical-align: top;">出水参数
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>出水COD</td>
|
||||
<td>出水总氮</td>
|
||||
</tr>
|
||||
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
||||
<td>(mg/L)</td>
|
||||
<td>(mg/L)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
||||
<td>95.5</td>
|
||||
<td>95.5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: 20px;"></div>
|
||||
<div style="float: left;width: 100%;height: calc((100% - 20px)*0.65);">
|
||||
<div style="float: left;width: calc((100% - 20px)*0.55);height: 100%;background-color: #FFFFFF;border: 1px solid rgba(225, 225, 225, 1);border-radius:4px;">
|
||||
<div style="float:left;width: 100%;height: 50px;padding-top: 10px;padding-left: 20px;">
|
||||
<div style="float:left;width: 200px;height: 100%;font-size: 18px;font-weight: 700;line-height: 35px;">
|
||||
生物反应池碳源投加
|
||||
</div>
|
||||
<div style="float:left;width:140px;height: 100%;">
|
||||
<div style="float:left;width:100%;height: 35px;background: #89e1ff;border-radius: 2px;">
|
||||
<div style="float:left;width: 110px;height: 100%;line-height: 35px;text-align: center;color: #FFFFFF;font-weight: 700;font-size: 17px;">
|
||||
投加进行中
|
||||
</div>
|
||||
<div style="float:left;width: 30px;height: 100%;padding-top: 5px;">
|
||||
<svg t="1706235438953" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4213" width="25" height="25">
|
||||
<path d="M635.733333 512l-149.333333-149.333333L426.666667 422.4l89.6 89.6-89.6 89.6 59.733333 59.733333 149.333333-149.333333zM170.666667 512c0 187.733333 153.6 341.333333 341.333333 341.333333s341.333333-153.6 341.333333-341.333333-153.6-341.333333-341.333333-341.333333-341.333333 153.6-341.333333 341.333333z m85.333333 0c0-140.8 115.2-256 256-256s256 115.2 256 256-115.2 256-256 256-256-115.2-256-256z"
|
||||
fill="#ffffff" p-id="4214"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc((100% - 50px)*0.45);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="font-size: 28px;">
|
||||
<td></td>
|
||||
<td>1#管道</td>
|
||||
<td>2#管道</td>
|
||||
<td>3#管道</td>
|
||||
<td>4#管道</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;">
|
||||
<td style="font-size: 18px;font-weight: 700;">碳源投加实际值</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>加药量</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>(L/h)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #89E1FF;">
|
||||
<td style="font-size: 18px;font-weight: 700;color: #333333;">碳源投加预测值</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>加药量</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>(L/h)</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc((100% - 50px)*0.55);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height: 45px;">
|
||||
<div style="float: left;width: 250px;height: 100%;line-height: 45px;padding-left: 20px;font-weight: 700;font-size: 18px;">
|
||||
生物反应池乙酸钠加药曲线
|
||||
</div>
|
||||
<div style="float: right;width: 120px;height: 100%;padding-top: 7px;">
|
||||
<select style="width: 80px;height: 30px;">
|
||||
<option selected>1#管道</option>
|
||||
<option>2#管道</option>
|
||||
<option>3#管道</option>
|
||||
<option>4#管道</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc(100% - 45px);" id="chart1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 20px;height: 100%;"></div>
|
||||
<div style="float: left;width: calc((100% - 20px)*0.45);height: 100%;background-color: #FFFFFF;border: 1px solid rgba(225, 225, 225, 1);border-radius:4px;">
|
||||
<div style="float:left;width: 100%;height: 50px;padding-top: 10px;padding-left: 20px;">
|
||||
<div style="float:left;width: 200px;height: 100%;font-size: 18px;font-weight: 700;line-height: 35px;">
|
||||
反硝化滤池碳源投加
|
||||
</div>
|
||||
<div style="float:left;width:140px;height: 100%;">
|
||||
<div style="float:left;width:100%;height: 35px;background: #89e1ff;border-radius: 2px;">
|
||||
<div style="float:left;width: 110px;height: 100%;line-height: 35px;text-align: center;color: #FFFFFF;font-weight: 700;font-size: 17px;">
|
||||
投加进行中
|
||||
</div>
|
||||
<div style="float:left;width: 30px;height: 100%;padding-top: 5px;">
|
||||
<svg t="1706235438953" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4213" width="25" height="25">
|
||||
<path d="M635.733333 512l-149.333333-149.333333L426.666667 422.4l89.6 89.6-89.6 89.6 59.733333 59.733333 149.333333-149.333333zM170.666667 512c0 187.733333 153.6 341.333333 341.333333 341.333333s341.333333-153.6 341.333333-341.333333-153.6-341.333333-341.333333-341.333333-341.333333 153.6-341.333333 341.333333z m85.333333 0c0-140.8 115.2-256 256-256s256 115.2 256 256-115.2 256-256 256-256-115.2-256-256z"
|
||||
fill="#ffffff" p-id="4214"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc((100% - 50px)*0.45);padding-top: 20px;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr style="font-size: 30px;">
|
||||
<td style="font-size: 18px;font-weight: 700;width: 50%;">碳源投加实际值</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>加药量</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>(L/h)</td>
|
||||
</tr>
|
||||
<tr style="font-size: 30px;color: #89E1FF;">
|
||||
<td style="font-size: 18px;font-weight: 700;color: #333333;">碳源投加预测值</td>
|
||||
<td rowspan="3">95.5</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>加药量</td>
|
||||
</tr>
|
||||
<tr style="font-size: 14px;color: #B0B0B0;">
|
||||
<td>(L/h)</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc((100% - 50px)*0.55);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height: 45px;">
|
||||
<div style="float: left;width: 250px;height: 100%;line-height: 45px;padding-left: 20px;font-weight: 700;font-size: 18px;">
|
||||
反硝化滤池乙酸钠加药曲线
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc(100% - 45px);" id="chart2"></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>
|
||||
<!-- 引入daterangepicker-->
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||||
charset="utf-8"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user