324 lines
17 KiB
Plaintext
324 lines
17 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>
|
|
<!-- 引入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: 'investmentPrediction',
|
|
modelType: modelType
|
|
// time: '2022-06-01'
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
console.log(data)
|
|
|
|
let legendName1 = [];
|
|
let series1 = [];
|
|
|
|
let legendName2 = [];
|
|
let series2 = [];
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let content = data[i];
|
|
if (content.getValueType == 'getMpMainValue') {
|
|
if (content.mPoint != null) {
|
|
let outValue = 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 == 'get24HourHistory') {
|
|
if (content.elementCode == 'chart1') {
|
|
legendName1.push(content.name);
|
|
series1.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray
|
|
})
|
|
} else if (content.elementCode == 'chart2') {
|
|
legendName2.push(content.name);
|
|
series2.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
data: content.jsonArray
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
getChart('chart1', legendName1, series1);
|
|
getChart('chart2', legendName2, series2);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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% - 1px)*0.45);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;text-align: left;">
|
|
<td colspan="4" style="padding-left: 20px;height: 40px;vertical-align: top;">进水参数</td>
|
|
</tr>
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>高沉池进水浊度</td>
|
|
<td>进水磷酸盐</td>
|
|
<td>进厂水TP</td>
|
|
<td>进厂水流量</td>
|
|
</tr>
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>(NTU)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(m³/h)</td>
|
|
</tr>
|
|
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
|
<td class="CG3_F_AIT301">-</td>
|
|
<td class="CG3_F_AIT304">-</td>
|
|
<td class="CG3_A1_AIT110">-</td>
|
|
<td class="CG3_C_FIT102">-</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% - 1px)*0.55);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;text-align: left;">
|
|
<td colspan="5" style="padding-left: 20px;height: 40px;vertical-align: top;">出水参数</td>
|
|
</tr>
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>高沉池出水浊度</td>
|
|
<td>出水磷酸盐</td>
|
|
<td>出厂水TP</td>
|
|
<td>出厂水TP目标值</td>
|
|
<td>出厂水流量</td>
|
|
</tr>
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>(NTU)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(mg/L)</td>
|
|
<td>(m³/h)</td>
|
|
</tr>
|
|
<tr style="font-size: 30px;color: #333333;font-weight: 700;">
|
|
<td class="CG3_F_AIT306">-</td>
|
|
<td class="CG3_F_AIT305">-</td>
|
|
<td class="CG3_P_AIT314">-</td>
|
|
<td class="HFCG_PAC_TP_TARGET" style="color: #89E1FF;">-</td>
|
|
<td>-</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 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>PAC预测</strong></h3>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc((100% - 43px)*0.2);padding-top: 20px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>1#高密池投加量</td>
|
|
<td>2#高密池投加量</td>
|
|
<td>1#泵运行频率</td>
|
|
<td>2#泵运行频率</td>
|
|
<td>3#泵运行频率</td>
|
|
</tr>
|
|
<tr style="font-size: 30px;color: #89E1FF;font-weight: 700;">
|
|
<td class="HFCG_PAC_TJL1">-</td>
|
|
<td class="HFCG_PAC_TJL2">-</td>
|
|
<td class="HFCG_PAC_FRE1">-</td>
|
|
<td class="HFCG_PAC_FRE2">-</td>
|
|
<td class="HFCG_PAC_FRE3">-</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc((100% - 43px)*0.8);padding-top: 20px;">
|
|
<div style="float: left;width: 100%;height: 100%;" 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 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>PAM预测</strong></h3>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc((100% - 43px)*0.2);padding-top: 20px;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="height: 20px;color: #B0B0B0;font-size: 14px;">
|
|
<td>1#高密池投加量</td>
|
|
<td>2#高密池投加量</td>
|
|
<td>1#泵运行频率</td>
|
|
<td>2#泵运行频率</td>
|
|
</tr>
|
|
<tr style="font-size: 30px;color: #89E1FF;font-weight: 700;">
|
|
<td class="HFCG_PAM_TJL1">-</td>
|
|
<td class="HFCG_PAM_TJL2">-</td>
|
|
<td class="HFCG_PAM_FRE1">-</td>
|
|
<td class="HFCG_PAM_FRE2">-</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc((100% - 43px)*0.8);padding-top: 20px;">
|
|
<div style="float: left;width: 100%;height: 100%;" 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> |