1399 lines
40 KiB
Plaintext
1399 lines
40 KiB
Plaintext
<%--<%@ page language="java" contentType="text/html; charset=UTF-8"--%>
|
||
<%--pageEncoding="UTF-8"%>--%>
|
||
|
||
<%@ 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" %>
|
||
|
||
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>水厂大屏展示</title>
|
||
<script
|
||
type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"
|
||
></script>
|
||
<script
|
||
type="text/javascript"
|
||
src="<%=request.getContextPath()%>/JS/echarts3.0.js"
|
||
></script>
|
||
<script
|
||
type="text/javascript"
|
||
src="<%=request.getContextPath()%>/JS/main/main_js.js"
|
||
charset="utf-8"
|
||
></script>
|
||
<!-- <script
|
||
type="text/javascript"
|
||
src="../../node_modules/jquery/dist/jquery.min.js"
|
||
></script>
|
||
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
|
||
<style>
|
||
body,
|
||
html {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto; /* Allow scrolling if window is smaller */
|
||
background-color: #030829;
|
||
}
|
||
.screen-container {
|
||
width: 6500px;
|
||
height: 1800px;
|
||
background-image: url("<%=request.getContextPath()%>/IMG/screen1.png");
|
||
/* background-image: url("../../IMG/screen1.png"); */
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
}
|
||
/* Specific Position for Data 6040 */
|
||
.slqs {
|
||
position: absolute;
|
||
width: 210px;
|
||
height: 62px;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-weight: 900;
|
||
font-size: 50px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.slqs-todayTotal {
|
||
top: 335px;
|
||
left: 209px;
|
||
}
|
||
.slqs-yesterdayTotal {
|
||
top: 335px;
|
||
left: 592px;
|
||
}
|
||
.slqs-monthTotal {
|
||
top: 335px;
|
||
left: 947px;
|
||
}
|
||
|
||
.ncl-val {
|
||
position: absolute;
|
||
width: 76px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: right;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-family: Gilroy;
|
||
font-weight: 500;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
.ncl-val1 {
|
||
top: 1168px;
|
||
left: 318px;
|
||
}
|
||
.ncl-val2 {
|
||
top: 1168px;
|
||
left: 653px;
|
||
}
|
||
.ncl-val3 {
|
||
top: 1168px;
|
||
left: 1023px;
|
||
}
|
||
.ncl2 {
|
||
position: absolute;
|
||
top: 1310px;
|
||
left: 66px;
|
||
width: 1077px;
|
||
height: 440px;
|
||
}
|
||
#ncl-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.seven-days-sl {
|
||
position: absolute;
|
||
top: 591px;
|
||
left: 66px;
|
||
width: 1077px;
|
||
height: 400px;
|
||
}
|
||
#seven-days-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.quality-table {
|
||
position: absolute;
|
||
top: 630px;
|
||
left: 1183px;
|
||
width: 975px;
|
||
}
|
||
.quality-table table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
color: #7ef3ff;
|
||
font-size: 27px;
|
||
text-align: center;
|
||
background: transparent;
|
||
}
|
||
.quality-table th,
|
||
.quality-table td {
|
||
border: 1px solid rgba(0, 163, 255, 0.4);
|
||
padding: 16px 23px;
|
||
}
|
||
.quality-table th {
|
||
color: #ffffff;
|
||
font-size: 27px;
|
||
font-weight: 600;
|
||
}
|
||
.quality-table td:first-child {
|
||
color: #ffffff;
|
||
text-align: left;
|
||
padding-left: 12px;
|
||
}
|
||
.quality-table td:last-child {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.quality-chart {
|
||
position: absolute;
|
||
top: 1380px;
|
||
left: 1183px;
|
||
width: 975px;
|
||
height: 370px;
|
||
}
|
||
#quality-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 药耗 */
|
||
.yaohao {
|
||
position: absolute;
|
||
top: 343px;
|
||
width: 150px;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
line-height: 56px;
|
||
}
|
||
.D_PACDSYH {
|
||
left: 1256px;
|
||
}
|
||
.D_YiSNDSYH {
|
||
left: 1591px;
|
||
}
|
||
.D_CiLSNDSYH {
|
||
left: 1924px;
|
||
}
|
||
|
||
.Middle3 {
|
||
width: 2100px;
|
||
position: absolute;
|
||
top: 300px;
|
||
left: 2700px;
|
||
}
|
||
/* 全屏提示遮罩 */
|
||
.fullscreen-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
}
|
||
.fullscreen-overlay .tip-content {
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
.fullscreen-overlay .tip-content h2 {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
color: #46f2ff;
|
||
}
|
||
.fullscreen-overlay .tip-content p {
|
||
font-size: 24px;
|
||
color: #7ef3ff;
|
||
}
|
||
.fullscreen-overlay .tip-content .icon {
|
||
font-size: 80px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.Middle2-value {
|
||
position: absolute;
|
||
left: 2450px;
|
||
width: 100px;
|
||
height: 31px;
|
||
color: rgba(41, 241, 250, 1);
|
||
font-weight: 500;
|
||
font-size: 26px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
#D_YanYCORP {
|
||
top: 190.5px;
|
||
left: 2470px;
|
||
}
|
||
#D_QueYCRJY1 {
|
||
top: 242.5px;
|
||
}
|
||
#D_HaoYCRJY {
|
||
top: 294.5px;
|
||
}
|
||
#D_HaoYCRJY2 {
|
||
top: 346.5px;
|
||
}
|
||
#D_HaoYCWNND {
|
||
top: 398.5px;
|
||
}
|
||
#D_MoCWNND {
|
||
top: 450.5px;
|
||
}
|
||
#D_BengZYW {
|
||
top: 571px;
|
||
left: 2470px;
|
||
}
|
||
#D_TiSB101DL {
|
||
top: 622px;
|
||
left: 2487px;
|
||
}
|
||
#D_TiSB102DL {
|
||
top: 673px;
|
||
left: 2487px;
|
||
}
|
||
#D_TiSB103DL {
|
||
top: 724px;
|
||
left: 2487px;
|
||
}
|
||
#D_NingMSJYLL {
|
||
top: 846px;
|
||
left: 2465px;
|
||
}
|
||
#D_YaLSQNLL {
|
||
top: 898px;
|
||
left: 2465px;
|
||
}
|
||
#D_NingMSCGYW {
|
||
top: 1020px;
|
||
left: 2481px;
|
||
}
|
||
#D_YaLSQNLL {
|
||
top: 1071px;
|
||
left: 2481px;
|
||
}
|
||
#D_CiLSNJYLL {
|
||
top: 1190px;
|
||
left: 2466px;
|
||
}
|
||
#D_PACJYLL {
|
||
top: 1241px;
|
||
left: 2466px;
|
||
}
|
||
#D_CiLSNCGYW {
|
||
top: 1364px;
|
||
left: 2481px;
|
||
}
|
||
#D_PACCGYW {
|
||
top: 1417px;
|
||
left: 2481px;
|
||
}
|
||
.Middle4_val {
|
||
position: absolute;
|
||
left: 5134px;
|
||
width: 100px;
|
||
height: 31px;
|
||
color: rgba(41, 241, 250, 1);
|
||
font-weight: 500;
|
||
font-size: 26px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
/*background: #0AFA02;*/
|
||
}
|
||
#D_JSLL {
|
||
top: 291px;
|
||
}
|
||
#D_JinSPH {
|
||
top: 342px;
|
||
}
|
||
#D_JinSCOD {
|
||
top: 393px;
|
||
}
|
||
#D_JinSAL {
|
||
top: 444px;
|
||
}
|
||
#D_JinSWD {
|
||
top: 497px;
|
||
left: 5164px;
|
||
}
|
||
#D_JinSLJLL {
|
||
top: 549px;
|
||
left: 5155px;
|
||
}
|
||
#D_ChuSLL {
|
||
top: 760px;
|
||
}
|
||
#D_ChuSPH {
|
||
top: 812px;
|
||
}
|
||
#D_ChuSCOD {
|
||
top: 867px;
|
||
}
|
||
#D_ChuSAL {
|
||
top: 919px;
|
||
}
|
||
#D_ChuSWD {
|
||
top: 968px;
|
||
left: 5164px;
|
||
}
|
||
#D_ChuSZL {
|
||
top: 1021px;
|
||
left: 5164px;
|
||
}
|
||
#D_ChuSZLv {
|
||
top: 1072px;
|
||
left: 5164px;
|
||
}
|
||
#D_ChuSLJLL {
|
||
top: 1124px;
|
||
left: 5155px;
|
||
}
|
||
#D_FanXBCKLL {
|
||
top: 1239px;
|
||
}
|
||
#D_FanXBCKYL {
|
||
top: 1292px;
|
||
left: 5144px;
|
||
}
|
||
#D_ShengYWNCKLL {
|
||
top: 1344px;
|
||
}
|
||
#D_QingSCYW {
|
||
top: 1464px;
|
||
left: 5167px;
|
||
}
|
||
#D_FeiYCYW {
|
||
top: 1516px;
|
||
left: 5167px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 全屏提示遮罩 -->
|
||
<!-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||
<div class="tip-content">
|
||
<div class="icon">🖥️</div>
|
||
<h2>点击进入全屏展示</h2>
|
||
<p>按 ESC 键可退出全屏</p>
|
||
</div>
|
||
</div> -->
|
||
<div class="screen-container">
|
||
<div class="left">
|
||
<div>
|
||
<div class="slqs slqs-todayTotal">60400</div>
|
||
<div class="slqs slqs-yesterdayTotal">4197</div>
|
||
<div class="slqs slqs-monthTotal">12356</div>
|
||
</div>
|
||
|
||
<!-- 七日水量 -->
|
||
<div class="seven-days-sl">
|
||
<div id="seven-days-chart"></div>
|
||
</div>
|
||
|
||
<!-- 泥处理指标 -->
|
||
<div class="ncl">
|
||
<div class="ncl1">
|
||
<div class="ncl-val ncl-val1">0</div>
|
||
<div class="ncl-val ncl-val2">200</div>
|
||
<div class="ncl-val ncl-val3">4.89</div>
|
||
</div>
|
||
<div class="ncl2">
|
||
<div id="ncl-chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Middle">
|
||
<div class="Middle1">
|
||
<!-- 药耗 -->
|
||
<div>
|
||
<div class="yaohao D_PACDSYH"></div>
|
||
<div class="yaohao D_YiSNDSYH"></div>
|
||
<div class="yaohao D_CiLSNDSYH"></div>
|
||
</div>
|
||
|
||
<!-- 质量指标 表格 -->
|
||
<div class="quality-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>当前值</th>
|
||
<th>平均值</th>
|
||
<th>最高</th>
|
||
<th>最低</th>
|
||
<th>指标</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>COD (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>TP (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>NH3–N (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>TN (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PH (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SS</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>温度(℃)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="quality-chart">
|
||
<div id="quality-chart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="Middle2">
|
||
<div>
|
||
<span class="Middle2-value" id="D_YanYCORP"></span>
|
||
<span class="Middle2-value" id="D_QueYCRJY1"></span>
|
||
<span class="Middle2-value" id="D_HaoYCRJY"></span>
|
||
<span class="Middle2-value" id="D_HaoYCRJY2"></span>
|
||
<span class="Middle2-value" id="D_HaoYCWNND"></span>
|
||
<span class="Middle2-value" id="D_MoCWNND"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<span class="Middle2-value" id="D_BengZYW"></span>
|
||
<span class="Middle2-value" id="D_TiSB101DL"></span>
|
||
<span class="Middle2-value" id="D_TiSB102DL"></span>
|
||
<span class="Middle2-value" id="D_TiSB103DL"></span>
|
||
</div>
|
||
<div>
|
||
<span class="Middle2-value" id="D_NingMSJYLL"></span>
|
||
<span class="Middle2-value" id="D_YaLSQNLL"></span>
|
||
</div>
|
||
<div>
|
||
<span class="Middle2-value" id="D_NingMSCGYW"></span>
|
||
<span class="Middle2-value" id="D_YaLSQNLL"></span>
|
||
</div>
|
||
<div>
|
||
<span class="Middle2-value" id="D_CiLSNJYLL"></span>
|
||
<span class="Middle2-value" id="D_PACJYLL"></span>
|
||
</div>
|
||
<div>
|
||
<span class="Middle2-value" id="D_CiLSNCGYW"></span>
|
||
<span class="Middle2-value" id="D_PACCGYW"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间图表 -->
|
||
<div class="Middle3">
|
||
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
||
<img
|
||
src="<%=request.getContextPath()%>/IMG/monitor.png"
|
||
style="width: 100%; height: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<div class="Middle4">
|
||
<!-- 进水 -->
|
||
<div>
|
||
<div class="Middle4_val" id="D_JSLL">100</div>
|
||
<div class="Middle4_val" id="D_JinSPH">100</div>
|
||
<div class="Middle4_val" id="D_JinSCOD">100</div>
|
||
<div class="Middle4_val" id="D_JinSAL">100</div>
|
||
<div class="Middle4_val" id="D_JinSWD">100</div>
|
||
<div class="Middle4_val" id="D_JinSLJLL">100</div>
|
||
</div>
|
||
|
||
<!-- 出水 -->
|
||
<div>
|
||
<div class="Middle4_val" id="D_ChuSLL">100</div>
|
||
<div class="Middle4_val" id="D_ChuSPH">100</div>
|
||
<div class="Middle4_val" id="D_ChuSCOD">100</div>
|
||
<div class="Middle4_val" id="D_ChuSAL">100</div>
|
||
<div class="Middle4_val" id="D_ChuSWD">100</div>
|
||
<div class="Middle4_val" id="D_ChuSZL">100</div>
|
||
<div class="Middle4_val" id="D_ChuSZLv">100</div>
|
||
<div class="Middle4_val" id="D_ChuSLJLL">100</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
<div class="Middle4_val" id="D_FanXBCKLL">200</div>
|
||
<div class="Middle4_val" id="D_FanXBCKYL">200</div>
|
||
<div class="Middle4_val" id="D_ShengYWNCKLL">200</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="Middle4_val" id="D_QingSCYW">200</div>
|
||
<div class="Middle4_val" id="D_FeiYCYW">200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频 -->
|
||
<div class="right"></div>
|
||
</div>
|
||
<script>
|
||
// ==================== 数据统一管理 ====================
|
||
var pageData = {
|
||
// 水量数据 (slqs)
|
||
slqs: {
|
||
todayTotal: 6040, // 今日水量
|
||
yesterdayTotal: 4197, // 昨日水量
|
||
monthTotal: 12356, // 本月水量
|
||
},
|
||
|
||
// 泥处理指标 (ncl)
|
||
ncl: {
|
||
val1: 0, // 泥处理指标1
|
||
val2: 200, // 泥处理指标2
|
||
val3: 4.89, // 泥处理指标3
|
||
},
|
||
|
||
// 药耗数据 (yaohao)
|
||
yaohao: {
|
||
D_PACDSYH: 19800,
|
||
D_YiSNDSYH: 2090,
|
||
D_CiLSNDSYH: 1092,
|
||
},
|
||
|
||
// 质量指标表格数据
|
||
qualityTable: [
|
||
{
|
||
param: "COD (mg/L)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "TP (mg/L)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "NH3–N (mg/L)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "TN (mg/L)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "PH (mg/L)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "SS",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
{
|
||
param: "温度(℃)",
|
||
current: 13.186,
|
||
avg: 12.996,
|
||
max: 14.666,
|
||
min: 11.92,
|
||
standard: "0.000–20.000",
|
||
},
|
||
],
|
||
|
||
// 七日水量图表数据
|
||
sevenDaysChart: {
|
||
xAxis: [
|
||
"11-10",
|
||
"11-11",
|
||
"11-12",
|
||
"11-13",
|
||
"11-14",
|
||
"11-15",
|
||
"11-16",
|
||
"11-17",
|
||
],
|
||
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600],
|
||
},
|
||
|
||
// 泥处理图表数据
|
||
nclChart: {
|
||
xAxis: [
|
||
"2:00",
|
||
"4:00",
|
||
"6:00",
|
||
"8:00",
|
||
"10:00",
|
||
"12:00",
|
||
"14:00",
|
||
"16:00",
|
||
"18:00",
|
||
"20:00",
|
||
],
|
||
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260],
|
||
},
|
||
|
||
// 质量图表数据
|
||
qualityChart: {
|
||
xAxis: ["11", "12", "13", "14", "15", "16", "17"],
|
||
data: [8, 13, 9, 14, 21, 14, 18],
|
||
},
|
||
};
|
||
|
||
// 更新水量显示
|
||
function updateSlqs() {
|
||
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
|
||
$(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal);
|
||
$(".slqs-monthTotal").text(pageData.slqs.monthTotal);
|
||
}
|
||
|
||
// 更新泥处理指标显示
|
||
function updateNcl() {
|
||
$(".ncl-val1").text(pageData.ncl.val1);
|
||
$(".ncl-val2").text(pageData.ncl.val2);
|
||
$(".ncl-val3").text(pageData.ncl.val3);
|
||
}
|
||
|
||
// 更新药耗显示
|
||
function updateYaohao() {
|
||
$(".D_PACDSYH").text(pageData.yaohao.D_PACDSYH);
|
||
$(".D_YiSNDSYH").text(pageData.yaohao.D_YiSNDSYH);
|
||
$(".D_CiLSNDSYH").text(pageData.yaohao.D_CiLSNDSYH);
|
||
}
|
||
|
||
// 更新质量指标表格
|
||
function updateQualityTable() {
|
||
var tbody = $(".quality-table tbody");
|
||
tbody.empty();
|
||
pageData.qualityTable.forEach(function (item) {
|
||
var row =
|
||
"<tr>" +
|
||
"<td>" +
|
||
item.param +
|
||
"</td>" +
|
||
"<td>" +
|
||
item.current +
|
||
"</td>" +
|
||
"<td>" +
|
||
item.avg +
|
||
"</td>" +
|
||
"<td>" +
|
||
item.max +
|
||
"</td>" +
|
||
"<td>" +
|
||
item.min +
|
||
"</td>" +
|
||
"<td>" +
|
||
item.standard +
|
||
"</td>" +
|
||
"</tr>";
|
||
tbody.append(row);
|
||
});
|
||
}
|
||
|
||
// 从接口获取数据并更新页面（示例方法，供后期调用）
|
||
function fetchDataFromApi(apiUrl) {
|
||
$.ajax({
|
||
url: apiUrl,
|
||
type: "GET",
|
||
dataType: "json",
|
||
success: function (response) {
|
||
// 假设接口返回的数据格式如下：
|
||
// {
|
||
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||
// ncl: { val1: xxx, val2: xxx, val3: xxx },
|
||
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
|
||
// qualityTable: [...],
|
||
// sevenDaysChart: { xAxis: [...], data: [...] },
|
||
// nclChart: { xAxis: [...], data: [...] },
|
||
// qualityChart: { xAxis: [...], data: [...] }
|
||
// }
|
||
if (response) {
|
||
if (response.slqs) pageData.slqs = response.slqs;
|
||
if (response.ncl) pageData.ncl = response.ncl;
|
||
if (response.yaohao) pageData.yaohao = response.yaohao;
|
||
if (response.qualityTable)
|
||
pageData.qualityTable = response.qualityTable;
|
||
if (response.sevenDaysChart)
|
||
pageData.sevenDaysChart = response.sevenDaysChart;
|
||
if (response.nclChart) pageData.nclChart = response.nclChart;
|
||
if (response.qualityChart)
|
||
pageData.qualityChart = response.qualityChart;
|
||
|
||
refreshPage();
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.error("获取数据失败:", error);
|
||
},
|
||
});
|
||
}
|
||
|
||
// 刷新页面所有数据
|
||
function refreshPage() {
|
||
updateSlqs();
|
||
updateNcl();
|
||
updateYaohao();
|
||
updateQualityTable();
|
||
initSevenDaysChart();
|
||
initNclChart();
|
||
initQualityChart();
|
||
}
|
||
|
||
// 进入全屏函数
|
||
function enterFullscreen() {
|
||
var elem = document.documentElement;
|
||
if (elem.requestFullscreen) {
|
||
elem.requestFullscreen();
|
||
} else if (elem.webkitRequestFullscreen) {
|
||
/* Safari */
|
||
elem.webkitRequestFullscreen();
|
||
} else if (elem.msRequestFullscreen) {
|
||
/* IE11 */
|
||
elem.msRequestFullscreen();
|
||
}
|
||
// 隐藏提示遮罩
|
||
document.getElementById("fullscreenOverlay").style.display = "none";
|
||
}
|
||
|
||
// 监听全屏状态变化
|
||
document.addEventListener("fullscreenchange", function () {
|
||
var overlay = document.getElementById("fullscreenOverlay");
|
||
if (!document.fullscreenElement) {
|
||
// 退出全屏时显示提示
|
||
overlay.style.display = "flex";
|
||
}
|
||
});
|
||
document.addEventListener("webkitfullscreenchange", function () {
|
||
var overlay = document.getElementById("fullscreenOverlay");
|
||
if (!document.webkitFullscreenElement) {
|
||
overlay.style.display = "flex";
|
||
}
|
||
});
|
||
|
||
// 获取水量统计数据
|
||
function fetchSlqsData() {
|
||
$.ajax({
|
||
url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
|
||
type: "GET",
|
||
data: { companyKey: "DEV067" },
|
||
dataType: "json",
|
||
success: function (response) {
|
||
console.log("水量统计数据:", response);
|
||
if (response) {
|
||
// 兼容不同的返回字段名
|
||
pageData.slqs.todayTotal = response.todayTotal || 0;
|
||
pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0;
|
||
pageData.slqs.monthTotal = response.monthTotal || 0;
|
||
updateSlqs();
|
||
|
||
// 解析七日水量数据 sevenDaysTotal
|
||
if (
|
||
response.sevenDaysTotal &&
|
||
Array.isArray(response.sevenDaysTotal)
|
||
) {
|
||
var xAxis = [];
|
||
var data = [];
|
||
response.sevenDaysTotal.forEach(function (item) {
|
||
// 日期格式: "2026-03-07" -> "03-07"
|
||
var dateStr = item.date || "";
|
||
if (dateStr.length >= 10) {
|
||
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
||
} else {
|
||
xAxis.push(dateStr);
|
||
}
|
||
// total 可能是字符串，转为数字
|
||
data.push(parseFloat(item.total) || 0);
|
||
});
|
||
pageData.sevenDaysChart.xAxis = xAxis;
|
||
pageData.sevenDaysChart.data = data;
|
||
initSevenDaysChart(); // 重新渲染图表
|
||
}
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.error("获取水量统计数据失败:", error);
|
||
},
|
||
});
|
||
}
|
||
|
||
// 质量指标表格点位编码映射
|
||
var qualityMPointMapping = {
|
||
"COD (mg/L)": { mPointKey: "D_ChuSCOD", standard: "0.000–20.000" },
|
||
"TP (mg/L)": { mPointKey: "D_ChuSTP", standard: "0.000–0.500" },
|
||
"NH3–N (mg/L)": { mPointKey: "D_ChuSNH3N", standard: "0.000–5.000" },
|
||
"TN (mg/L)": { mPointKey: "D_ChuSTN", standard: "0.000–15.000" },
|
||
"PH (mg/L)": { mPointKey: "D_ChuSPH", standard: "6.000–9.000" },
|
||
"SS": { mPointKey: "D_ChuSSS", standard: "0.000–10.000" },
|
||
"温度(℃)": { mPointKey: "D_ChuSWD", standard: "0.000–40.000" },
|
||
};
|
||
|
||
// 获取质量指标表格数据
|
||
function fetchQualityTableData() {
|
||
var companyKey = "0533JS";
|
||
var params = Object.keys(qualityMPointMapping);
|
||
var completedRequests = 0;
|
||
var totalRequests = params.length;
|
||
|
||
params.forEach(function (paramName) {
|
||
var mPointKey = qualityMPointMapping[paramName].mPointKey;
|
||
var standard = qualityMPointMapping[paramName].standard;
|
||
|
||
$.ajax({
|
||
url: "<%=request.getContextPath()%>/mpoint/data/getStatistics.do",
|
||
type: "GET",
|
||
data: {
|
||
mPointKey: mPointKey,
|
||
companyKey: companyKey
|
||
},
|
||
dataType: "json",
|
||
success: function (response) {
|
||
console.log("质量指标数据[" + mPointKey + "]:", response);
|
||
if (response) {
|
||
// 更新pageData.qualityTable中对应的数据
|
||
for (var i = 0; i < pageData.qualityTable.length; i++) {
|
||
if (pageData.qualityTable[i].param === paramName) {
|
||
pageData.qualityTable[i].current = response.currentValue || 0;
|
||
pageData.qualityTable[i].avg = response.avgValue || 0;
|
||
pageData.qualityTable[i].max = response.maxValue || 0;
|
||
pageData.qualityTable[i].min = response.minValue || 0;
|
||
pageData.qualityTable[i].standard = standard;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
completedRequests++;
|
||
// 所有请求完成后更新表格
|
||
if (completedRequests === totalRequests) {
|
||
updateQualityTable();
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.error("获取质量指标数据失败:", mPointKey, error);
|
||
completedRequests++;
|
||
// 即使失败也检查是否所有请求已完成
|
||
if (completedRequests === totalRequests) {
|
||
updateQualityTable();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 获取点位信息数据
|
||
// mpcode: 点位编码
|
||
// sdt: 开始时间 (可选，默认7天前)
|
||
// edt: 结束时间 (可选，默认当前时间)
|
||
// 返回: Promise对象
|
||
function fetchPointData(mpcode, sdt, edt) {
|
||
// 默认时间范围：近7天
|
||
if (!edt) {
|
||
var now = new Date();
|
||
edt = formatDate(now);
|
||
}
|
||
if (!sdt) {
|
||
var sevenDaysAgo = new Date();
|
||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||
sdt = formatDate(sevenDaysAgo);
|
||
}
|
||
|
||
return new Promise(function(resolve, reject) {
|
||
$.ajax({
|
||
url: '<%=request.getContextPath()%>/data/getDetailData.do',
|
||
type: 'GET',
|
||
data: {
|
||
mpcode: mpcode,
|
||
sdt: sdt,
|
||
edt: edt
|
||
},
|
||
dataType: 'json',
|
||
success: function(response) {
|
||
console.log('点位数据[' + mpcode + ']:', response);
|
||
resolve(response);
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error('获取点位数据失败:', mpcode, error);
|
||
reject(error);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 格式化日期为 YYYY-MM-DD 格式
|
||
function formatDate(date) {
|
||
var year = date.getFullYear();
|
||
var month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||
var day = date.getDate().toString().padStart(2, "0");
|
||
return year + "-" + month + "-" + day;
|
||
}
|
||
|
||
$(function () {
|
||
// 初始化数据显示
|
||
updateSlqs();
|
||
updateNcl();
|
||
updateYaohao();
|
||
updateQualityTable();
|
||
|
||
// 初始化图表
|
||
initSevenDaysChart();
|
||
initNclChart();
|
||
initQualityChart();
|
||
|
||
// 页面加载后获取水量统计数据
|
||
fetchSlqsData();
|
||
|
||
// 获取质量指标表格数据
|
||
fetchQualityTableData();
|
||
|
||
<%--// 定时刷新所有数据（每分钟刷新一次）--%>
|
||
<%--setInterval(function() {--%>
|
||
<%-- console.log('定时刷新数据...');--%>
|
||
<%-- fetchSlqsData();--%>
|
||
<%-- fetchQualityTableData();--%>
|
||
<%-- // 批量刷新点位数据--%>
|
||
<%-- pointList.forEach(function (mpcode) {--%>
|
||
<%-- getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');--%>
|
||
<%-- });--%>
|
||
<%--}, 60000); // 60000毫秒 = 1分钟--%>
|
||
|
||
<%--// 批量获取点位数据并更新显示--%>
|
||
var pointList = [
|
||
"D_PACDSYH", // PAC吨水药耗
|
||
"D_YiSNDSYH", // 乙酸钠吨水药耗
|
||
"D_CiLSNDSYH", // 次氯酸钠吨水药耗
|
||
"D_YanYCORP",
|
||
"D_QueYCRJY1",
|
||
"D_HaoYCRJY",
|
||
"D_HaoYCRJY2",
|
||
"D_HaoYCWNND",
|
||
"D_MoCWNND",
|
||
"D_BengZYW",
|
||
"D_TiSB101DL",
|
||
"D_TiSB102DL",
|
||
"D_TiSB103DL",
|
||
"D_NingMSJYLL",
|
||
"D_YaLSQNLL",
|
||
"D_NingMSCGYW",
|
||
"D_CiLSNJYLL",
|
||
"D_PACJYLL",
|
||
"D_CiLSNCGYW",
|
||
"D_PACCGYW",
|
||
"D_JSLL",
|
||
"D_JinSPH",
|
||
"D_JinSCOD",
|
||
"D_JinSAL",
|
||
"D_JinSWD",
|
||
"D_JinSLJLL",
|
||
"D_ChuSLL",
|
||
"D_ChuSPH",
|
||
"D_ChuSCOD",
|
||
"D_ChuSAL",
|
||
"D_ChuSWD",
|
||
"D_ChuSZL",
|
||
"D_ChuSZLv",
|
||
"D_ChuSLJLL",
|
||
"D_FanXBCKLL",
|
||
"D_FanXBCKYL",
|
||
"D_ShengYWNCKLL",
|
||
"D_QingSCYW",
|
||
"D_FeiYCYW",
|
||
];
|
||
|
||
pointList.forEach(function (mpcode) {
|
||
// fetchPointData(mpcode).then(function(res) {
|
||
// $('#' + mpcode).text(1000 || 0);
|
||
// // if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||
// // var lastData = res[0].data[res[0].data.length - 1];
|
||
// // var value = lastData[1]; // 取最后一个数据点的值
|
||
// // $('#' + mpcode).text(1000 || 0);
|
||
// // }
|
||
// }).catch(function(error) {
|
||
// console.error('点位数据获取失败:', mpcode, error);
|
||
// });
|
||
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
|
||
});
|
||
});
|
||
|
||
// 七日水量图表
|
||
function initSevenDaysChart() {
|
||
var chartDom = document.getElementById("seven-days-chart");
|
||
if (!chartDom) return;
|
||
var myChart = echarts.init(chartDom);
|
||
var dataAxis = pageData.sevenDaysChart.xAxis;
|
||
var data = pageData.sevenDaysChart.data;
|
||
|
||
// 根据数据动态计算Y轴最大值
|
||
var yMax = 10000; // 默认值
|
||
if (data && data.length > 0) {
|
||
var dataMax = Math.max.apply(null, data);
|
||
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
||
yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
|
||
if (yMax < 10000) yMax = 10000; // 最小值1万
|
||
}
|
||
|
||
var option = {
|
||
backgroundColor: "transparent",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||
borderColor: "#46F2FF",
|
||
borderWidth: 1,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 18,
|
||
},
|
||
formatter: function (params) {
|
||
var data = params[0];
|
||
return (
|
||
data.name +
|
||
"<br/>" +
|
||
data.seriesName +
|
||
": " +
|
||
data.value.toLocaleString()
|
||
);
|
||
},
|
||
},
|
||
grid: {
|
||
// left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["处理水量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: dataAxis,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: yMax,
|
||
splitNumber: 7,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 18,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
dataZoom: [{ type: "inside" }],
|
||
series: [
|
||
{
|
||
name: "处理水量",
|
||
type: "bar",
|
||
barMaxWidth: 60,
|
||
data: data,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#46F2FF" },
|
||
{ offset: 1, color: "#0B4DB5" },
|
||
]),
|
||
shadowColor: "rgba(0, 0, 0, 0.3)",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#6af8ff" },
|
||
{ offset: 1, color: "#1560d6" },
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "bar",
|
||
barGap: "-100%",
|
||
barMaxWidth: 60,
|
||
data: (function () {
|
||
var shadow = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
shadow.push(yMax);
|
||
}
|
||
return shadow;
|
||
})(),
|
||
itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
|
||
silent: true,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
var zoomSize = 6;
|
||
myChart.on("click", function (params) {
|
||
var startIndex = Math.max(
|
||
params.dataIndex - Math.floor(zoomSize / 2),
|
||
0,
|
||
);
|
||
var endIndex = Math.min(
|
||
params.dataIndex + Math.floor(zoomSize / 2),
|
||
data.length - 1,
|
||
);
|
||
myChart.dispatchAction({
|
||
type: "dataZoom",
|
||
startValue: dataAxis[startIndex],
|
||
endValue: dataAxis[endIndex],
|
||
});
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
// 泥处理图表
|
||
function initNclChart() {
|
||
var nclDom = document.getElementById("ncl-chart");
|
||
if (!nclDom) return;
|
||
var nclChart = echarts.init(nclDom, "dark");
|
||
var nclData = pageData.nclChart.data;
|
||
var nclOption = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["实际小时排泥量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: pageData.nclChart.xAxis,
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 500,
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "实际小时排泥量",
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
lineStyle: { normal: { width: 2 } },
|
||
itemStyle: { normal: { color: "#46F2FF" } },
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
|
||
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
data: nclData,
|
||
},
|
||
],
|
||
};
|
||
nclChart.setOption(nclOption);
|
||
window.addEventListener("resize", function () {
|
||
nclChart.resize();
|
||
});
|
||
}
|
||
|
||
// 质量图表
|
||
function initQualityChart() {
|
||
var qualityDom = document.getElementById("quality-chart");
|
||
if (!qualityDom) return;
|
||
var qualityChart = echarts.init(qualityDom);
|
||
var qualityData = pageData.qualityChart.data;
|
||
var qualityOption = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["水质量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: pageData.qualityChart.xAxis,
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 25,
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "水质量",
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
lineStyle: { normal: { width: 2 } },
|
||
itemStyle: { normal: { color: "#46F2FF" } },
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
|
||
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
data: qualityData,
|
||
},
|
||
],
|
||
};
|
||
qualityChart.setOption(qualityOption);
|
||
window.addEventListener("resize", function () {
|
||
qualityChart.resize();
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|