2026-02-02 14:44:36 +08:00
|
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<!doctype html>
|
2026-02-02 14:44:36 +08:00
|
|
|
|
<html>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
2026-02-02 14:44:36 +08:00
|
|
|
|
<title>水厂大屏展示</title>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<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="../../node_modules/jquery/dist/jquery.min.js"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
|
2026-02-02 14:44:36 +08:00
|
|
|
|
<style>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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;
|
2026-03-05 03:08:24 +08:00
|
|
|
|
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png');
|
2026-03-05 00:35:31 +08:00
|
|
|
|
/* 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: 121px;
|
|
|
|
|
|
height: 62px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
|
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
|
font-size: 50px;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 62px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.slqs-jinri {
|
|
|
|
|
|
top: 335px;
|
|
|
|
|
|
left: 209px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.slqs-zuori {
|
|
|
|
|
|
top: 335px;
|
|
|
|
|
|
left: 592px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.slqs-benyue {
|
|
|
|
|
|
top: 335px;
|
|
|
|
|
|
left: 975px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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%;
|
|
|
|
|
|
}
|
2026-02-02 23:52:49 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
/* 药耗 */
|
|
|
|
|
|
.yaohao {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 343px;
|
2026-03-08 04:08:47 +08:00
|
|
|
|
width: 150px;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
height: 56px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
2026-03-08 04:08:47 +08:00
|
|
|
|
justify-content: flex-end;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
|
line-height: 56px;
|
|
|
|
|
|
}
|
2026-03-08 04:08:47 +08:00
|
|
|
|
.D_PACDSYH {
|
|
|
|
|
|
left: 1256px;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
}
|
2026-03-08 04:08:47 +08:00
|
|
|
|
.D_YiSNDSYH {
|
|
|
|
|
|
left: 1591px;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
}
|
2026-03-08 04:08:47 +08:00
|
|
|
|
.D_CiLSNDSYH {
|
|
|
|
|
|
left: 1924px;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.Middle3 {
|
|
|
|
|
|
width: 2100px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 300px;
|
|
|
|
|
|
left: 2700px;
|
|
|
|
|
|
}
|
2026-03-05 03:08:24 +08:00
|
|
|
|
/* 全屏提示遮罩 */
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
2026-02-02 14:44:36 +08:00
|
|
|
|
</style>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2026-03-05 03:08:24 +08:00
|
|
|
|
<!-- 全屏提示遮罩 -->
|
2026-03-08 04:08:47 +08:00
|
|
|
|
<!-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
2026-03-05 03:08:24 +08:00
|
|
|
|
<div class="tip-content">
|
|
|
|
|
|
<div class="icon">🖥️</div>
|
|
|
|
|
|
<h2>点击进入全屏展示</h2>
|
|
|
|
|
|
<p>按 ESC 键可退出全屏</p>
|
|
|
|
|
|
</div>
|
2026-03-08 04:08:47 +08:00
|
|
|
|
</div> -->
|
2026-02-02 14:44:36 +08:00
|
|
|
|
<div class="screen-container">
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<div class="left">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div class="slqs slqs-jinri">6040</div>
|
|
|
|
|
|
<div class="slqs slqs-zuori">4197</div>
|
|
|
|
|
|
<div class="slqs slqs-benyue">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>
|
2026-03-08 04:08:47 +08:00
|
|
|
|
<div class="yaohao D_PACDSYH"></div>
|
|
|
|
|
|
<div class="yaohao D_YiSNDSYH"></div>
|
|
|
|
|
|
<div class="yaohao D_CiLSNDSYH"></div>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</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></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 中间图表 -->
|
|
|
|
|
|
<div class="Middle3">
|
2026-03-05 03:08:24 +08:00
|
|
|
|
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
|
|
|
|
|
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" />
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="Middle4">
|
|
|
|
|
|
<!-- 进水 -->
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 出水 -->
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 视频 -->
|
|
|
|
|
|
<div class="right"></div>
|
2026-02-02 14:44:36 +08:00
|
|
|
|
</div>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<script>
|
2026-03-08 04:08:47 +08:00
|
|
|
|
// ==================== 数据统一管理 ====================
|
|
|
|
|
|
var pageData = {
|
|
|
|
|
|
// 水量数据 (slqs)
|
|
|
|
|
|
slqs: {
|
|
|
|
|
|
jinri: 6040, // 今日水量
|
|
|
|
|
|
zuori: 4197, // 昨日水量
|
|
|
|
|
|
benyue: 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-jinri").text(pageData.slqs.jinri);
|
|
|
|
|
|
$(".slqs-zuori").text(pageData.slqs.zuori);
|
|
|
|
|
|
$(".slqs-benyue").text(pageData.slqs.benyue);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更新泥处理指标显示
|
|
|
|
|
|
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: { jinri: xxx, zuori: xxx, benyue: 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();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-05 03:08:24 +08:00
|
|
|
|
// 进入全屏函数
|
|
|
|
|
|
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';
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
$(function () {
|
2026-03-08 04:08:47 +08:00
|
|
|
|
// 初始化数据显示
|
|
|
|
|
|
updateSlqs();
|
|
|
|
|
|
updateNcl();
|
|
|
|
|
|
updateYaohao();
|
|
|
|
|
|
updateQualityTable();
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
|
|
initSevenDaysChart();
|
|
|
|
|
|
initNclChart();
|
|
|
|
|
|
initQualityChart();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 七日水量图表
|
|
|
|
|
|
function initSevenDaysChart() {
|
2026-03-05 00:35:31 +08:00
|
|
|
|
var chartDom = document.getElementById("seven-days-chart");
|
|
|
|
|
|
if (!chartDom) return;
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
2026-03-08 04:08:47 +08:00
|
|
|
|
var dataAxis = pageData.sevenDaysChart.xAxis;
|
|
|
|
|
|
var data = pageData.sevenDaysChart.data;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
var option = {
|
|
|
|
|
|
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: dataAxis,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: { color: "#2C3E50" },
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: "#B7C9E2",
|
|
|
|
|
|
fontSize: 25,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
max: 10000,
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
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",
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
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%",
|
|
|
|
|
|
data: (function () {
|
|
|
|
|
|
var yMax = 10000;
|
|
|
|
|
|
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],
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2026-03-08 04:08:47 +08:00
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 泥处理图表
|
|
|
|
|
|
function initNclChart() {
|
2026-03-05 00:35:31 +08:00
|
|
|
|
var nclDom = document.getElementById("ncl-chart");
|
2026-03-08 04:08:47 +08:00
|
|
|
|
if (!nclDom) return;
|
|
|
|
|
|
var nclChart = echarts.init(nclDom, "dark");
|
|
|
|
|
|
var nclData = pageData.nclChart.data;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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",
|
2026-03-08 04:08:47 +08:00
|
|
|
|
data: pageData.nclChart.xAxis,
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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();
|
|
|
|
|
|
});
|
2026-03-08 04:08:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 质量图表
|
|
|
|
|
|
function initQualityChart() {
|
2026-03-05 00:35:31 +08:00
|
|
|
|
var qualityDom = document.getElementById("quality-chart");
|
2026-03-08 04:08:47 +08:00
|
|
|
|
if (!qualityDom) return;
|
|
|
|
|
|
var qualityChart = echarts.init(qualityDom);
|
|
|
|
|
|
var qualityData = pageData.qualityChart.data;
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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",
|
2026-03-08 04:08:47 +08:00
|
|
|
|
data: pageData.qualityChart.xAxis,
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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();
|
|
|
|
|
|
});
|
2026-03-08 04:08:47 +08:00
|
|
|
|
}
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2026-02-02 14:44:36 +08:00
|
|
|
|
</html>
|
