xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0d641d8d4f187c51a71a2b536358054a13990b8d
SIPAIIS_WMS_JSSW/src/main/webapp/jsp/bigScreen.jsp

1570 lines
46 KiB
Plaintext
Raw Normal View History

管道展示
2026-03-10 21:51:19 +08:00
<%--<%@ 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" %>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<!doctype html>
UI、logo
2026-02-02 14:44:36 +08:00
<html>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<head>
<meta charset="UTF-8" />
UI、logo
2026-02-02 14:44:36 +08:00
<title>水厂大屏展示</title>
水厂大屏数据ES查询
2026-03-10 00:49:24 +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="<%=request.getContextPath()%>/JS/main/main_js.js"
charset="utf-8"
></script>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<!-- <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
UI、logo
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;
水厂大屏数据ES查询
2026-03-10 00:49: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;
水厂大屏数据
2026-03-08 23:52:11 +08:00
width: 210px;
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
height: 62px;
color: rgba(255, 255, 255, 1);
font-weight: 900;
font-size: 50px;
水厂大屏数据
2026-03-08 23:52:11 +08:00
display: flex;
justify-content: flex-end;
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
}
水厂大屏数据
2026-03-08 23:52:11 +08:00
.slqs-todayTotal {
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
top: 335px;
left: 209px;
}
水厂大屏数据
2026-03-08 23:52:11 +08:00
.slqs-yesterdayTotal {
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
top: 335px;
left: 592px;
}
水厂大屏数据
2026-03-08 23:52:11 +08:00
.slqs-monthTotal {
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
top: 335px;
水厂大屏数据
2026-03-08 23:52:11 +08:00
left: 947px;
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
}
.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%;
}
git
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 {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
width: 2800px;
height: 1600px;
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
position: absolute;
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
top: 206px;
left: 2376px;
}
.Middle3 img,
.Middle3 .monitor-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* 绿色圆点样式 */
.green-dot {
position: absolute;
width: 40px;
height: 40px;
background: #00ff00;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00;
z-index: 10000;
transition: all 0.3s ease;
pointer-events: auto;
}
.green-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
}
/* 数据弹窗样式 */
.dot-popup {
position: absolute;
background: rgba(0, 30, 60, 0.98);
border: 3px solid #00ff00;
border-radius: 15px;
padding: 30px 40px;
z-index: 99999;
min-width: 400px;
max-width: 600px;
display: none;
box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
}
.dot-popup.show {
display: block;
}
.dot-popup-title {
color: #00ff00;
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid rgba(0, 255, 0, 0.5);
padding-bottom: 15px;
}
.dot-popup-content {
color: #fff;
font-size: 24px;
}
.dot-popup-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dot-popup-item:last-child {
border-bottom: none;
}
.dot-popup-label {
color: #7ef3ff;
font-size: 24px;
}
.dot-popup-value {
color: #fff;
font-weight: bold;
font-size: 24px;
}
.dot-popup-close {
position: absolute;
top: 15px;
right: 20px;
color: #fff;
font-size: 36px;
cursor: pointer;
}
.dot-popup-close:hover {
color: #00ff00;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(0, 0, 0, 0.5);*/
z-index: 99998;
display: none;
}
.popup-overlay.show {
display: block;
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
}
大屏更新、源头管理
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;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
color: #46f2ff;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
.fullscreen-overlay .tip-content p {
font-size: 24px;
color: #7ef3ff;
}
.fullscreen-overlay .tip-content .icon {
font-size: 80px;
margin-bottom: 20px;
}
水厂大屏数据
2026-03-08 23:52:11 +08:00
.Middle2-value {
position: absolute;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
left: 2450px;
水厂大屏数据
2026-03-08 23:52:11 +08:00
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;
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
#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;
}
管道展示
2026-03-10 21:51:19 +08:00
.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;
}
UI、logo
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> -->
UI、logo
2026-02-02 14:44:36 +08:00
<div class="screen-container">
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<div class="left">
<div>
水厂大屏数据
2026-03-08 23:52:11 +08:00
<div class="slqs slqs-todayTotal">60400</div>
<div class="slqs slqs-yesterdayTotal">4197</div>
<div class="slqs slqs-monthTotal">12356</div>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
</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">
<!-- 药耗 -->
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<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>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<!-- 隐藏的数据容器，由JS动态生成 -->
<div id="hiddenDataContainer" style="display: none;"></div>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<!-- 中间图表 -->
<div class="Middle3">
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<img class="monitor-img" src="<%=request.getContextPath()%>/IMG/monitor.png" />
<!-- 10个绿色圆点 -->
<div class="green-dot" data-index="0" style="top: 431px; left: 200px;"></div>
<div class="green-dot" data-index="1" style="top: 150px; left: 600px;"></div>
<div class="green-dot" data-index="2" style="top: 174px; left: 1112px;"></div>
<div class="green-dot" data-index="3" style="top: 280px; left: 1800px;"></div>
<div class="green-dot" data-index="4" style="top: 150px; left: 2550px;"></div>
<div class="green-dot" data-index="5" style="top: 1130px; left: 200px;"></div>
<div class="green-dot" data-index="6" style="top: 800px; left: 600px;"></div>
<div class="green-dot" data-index="7" style="top: 900px; left: 1000px;"></div>
<div class="green-dot" data-index="8" style="top: 1000px; left: 2530px;"></div>
<div class="green-dot" data-index="9" style="top: 800px; left: 1800px;"></div>
<!-- 数据弹窗 -->
<div class="dot-popup" id="dotPopup">
<span class="dot-popup-close" onclick="closePopup()">×</span>
<div class="dot-popup-title" id="popupTitle">设备数据</div>
<div class="dot-popup-content" id="popupContent"></div>
管道展示
2026-03-10 21:51:19 +08:00
</div>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
</div>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
管道展示
2026-03-10 21:51:19 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
</div>
<!-- 视频 -->
<div class="right"></div>
UI、logo
2026-02-02 14:44:36 +08:00
</div>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<!-- 弹窗遮罩 -->
<div class="popup-overlay" id="popupOverlay"></div>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<script>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 定义 ext 变量供 main_js.js 使用
var ext = {
contextPath: '<%=request.getContextPath()%>'
};
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// ==================== 数据统一管理 ====================
var pageData = {
// 水量数据 (slqs)
slqs: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
todayTotal: 0, // 今日水量
yesterdayTotal: 0, // 昨日水量
monthTotal: 0, // 本月水量
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 泥处理指标 (ncl)
ncl: {
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
val1: 0, // 泥处理指标1
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
val2: 0, // 泥处理指标2
val3: 0, // 泥处理指标3
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 药耗数据 (yaohao)
yaohao: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
D_PACDSYH: 0,
D_YiSNDSYH: 0,
D_CiLSNDSYH: 0,
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 质量指标表格数据
qualityTable: [
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
{
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",
},
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
],
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 七日水量图表数据
sevenDaysChart: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
xAxis: [],
data: [],
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 泥处理图表数据
nclChart: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
xAxis: [],
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260],
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 质量图表数据
qualityChart: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
xAxis: [],
data: [],
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
};
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// ==================== 统一点位配置管理 ====================
// 所有点位配置：ID + 名称 + 分组
var pointConfig = {
// 工艺参数 (middle2)
D_YanYCORP: { name: "厌氧池ORP", group: "middle2" },
D_QueYCRJY1: { name: "缺氧池入口溶解氧1", group: "middle2" },
D_HaoYCRJY: { name: "好氧池溶解氧", group: "middle2" },
D_HaoYCRJY2: { name: "好氧池溶解氧2", group: "middle2" },
D_HaoYCWNND: { name: "好氧池污泥浓度", group: "middle2" },
D_MoCWNND: { name: "膜池污泥浓度", group: "middle2" },
D_BengZYW: { name: "泵站液位", group: "middle2" },
D_TiSB101DL: { name: "提升泵101电流", group: "middle2" },
D_TiSB102DL: { name: "提升泵102电流", group: "middle2" },
D_TiSB103DL: { name: "提升泵103电流", group: "middle2" },
D_NingMSJYLL: { name: "混凝沉淀进水流量", group: "middle2" },
D_YaLSQNLL: { name: "压力气流量", group: "middle2" },
D_NingMSCGYW: { name: "混凝沉淀出水液位", group: "middle2" },
D_CiLSNJYLL: { name: "次氯酸钠加药流量", group: "middle2" },
D_PACJYLL: { name: "PAC加药流量", group: "middle2" },
D_CiLSNCGYW: { name: "次氯酸钠储罐液位", group: "middle2" },
D_PACCGYW: { name: "PAC储罐液位", group: "middle2" },
// 进出水指标 (middle4)
D_JSLL: { name: "进水流量", group: "middle4" },
D_JinSPH: { name: "进水PH", group: "middle4" },
D_JinSCOD: { name: "进水COD", group: "middle4" },
D_JinSAL: { name: "进水氨氮", group: "middle4" },
D_JinSWD: { name: "进水温度", group: "middle4" },
D_JinSLJLL: { name: "进水累计流量", group: "middle4" },
D_ChuSLL: { name: "出水流量", group: "middle4" },
D_ChuSPH: { name: "出水PH", group: "middle4" },
D_ChuSCOD: { name: "出水COD", group: "middle4" },
D_ChuSAL: { name: "出水氨氮", group: "middle4" },
D_ChuSWD: { name: "出水温度", group: "middle4" },
D_ChuSZL: { name: "出水浊度", group: "middle4" },
D_ChuSZLv: { name: "出水浊度值", group: "middle4" },
D_ChuSLJLL: { name: "出水累计流量", group: "middle4" },
D_FanXBCKLL: { name: "反洗泵出口流量", group: "middle4" },
D_FanXBCKYL: { name: "反洗泵出口压力", group: "middle4" },
D_ShengYWNCKLL: { name: "剩余污泥浓度流量", group: "middle4" },
D_QingSCYW: { name: "清水池液位", group: "middle4" },
D_FeiYCYW: { name: "废液池液位", group: "middle4" }
};
// 圆点数据配置：每个圆点对应的数据点ID
var dotDataConfig = [
{ name: "进水口", points: ["D_JSLL", "D_JinSPH", "D_JinSCOD", "D_JinSAL", "D_JinSWD", "D_JinSLJLL"] },
{ name: "泵房", points: ["D_BengZYW", "D_TiSB101DL", "D_TiSB102DL", "D_TiSB103DL"] },
{ name: "厌氧池", points: ["D_YanYCORP"] },
{ name: "缺氧池", points: ["D_QueYCRJY1", "D_HaoYCRJY"] },
{ name: "好氧池", points: ["D_HaoYCRJY2", "D_HaoYCWNND", "D_MoCWNND"] },
{ name: "污泥处理", points: ["D_QingSCYW", "D_FeiYCYW"] },
{ name: "混凝沉淀", points: ["D_NingMSJYLL", "D_YaLSQNLL", "D_NingMSCGYW"] },
{ name: "加药间", points: ["D_CiLSNJYLL", "D_PACJYLL", "D_CiLSNCGYW", "D_PACCGYW"] },
{ name: "出水口", points: ["D_ChuSLL", "D_ChuSPH", "D_ChuSCOD", "D_ChuSAL", "D_ChuSWD", "D_ChuSZL", "D_ChuSZLv", "D_ChuSLJLL"] },
{ name: "反洗泵房", points: ["D_FanXBCKLL", "D_FanXBCKYL", "D_ShengYWNCKLL"] }
];
// 获取所有点位ID列表
function getAllPointIds() {
return Object.keys(pointConfig);
}
// 根据分组获取点位ID列表
function getPointIdsByGroup(group) {
return Object.keys(pointConfig).filter(function(id) {
return pointConfig[id].group === group;
});
}
// 动态生成隐藏的数据容器元素
function initHiddenDataContainer() {
var container = document.getElementById('hiddenDataContainer');
var html = '';
Object.keys(pointConfig).forEach(function(pointId) {
html += '<span id="' + pointId + '"></span>';
});
container.innerHTML = html;
}
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 更新水量显示
function updateSlqs() {
水厂大屏数据
2026-03-08 23:52:11 +08:00
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
$(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal);
$(".slqs-monthTotal").text(pageData.slqs.monthTotal);
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 更新泥处理指标显示
function updateNcl() {
$(".ncl-val1").text(pageData.ncl.val1);
$(".ncl-val2").text(pageData.ncl.val2);
$(".ncl-val3").text(pageData.ncl.val3);
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 更新药耗显示
function updateYaohao() {
$(".D_PACDSYH").text(pageData.yaohao.D_PACDSYH);
$(".D_YiSNDSYH").text(pageData.yaohao.D_YiSNDSYH);
$(".D_CiLSNDSYH").text(pageData.yaohao.D_CiLSNDSYH);
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 更新质量指标表格
function updateQualityTable() {
var tbody = $(".quality-table tbody");
tbody.empty();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
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>" +
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
"</tr>";
tbody.append(row);
});
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 从接口获取数据并更新页面（示例方法，供后期调用）
function fetchDataFromApi(apiUrl) {
$.ajax({
url: apiUrl,
type: "GET",
dataType: "json",
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
success: function (response) {
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 假设接口返回的数据格式如下：
// {
水厂大屏数据
2026-03-08 23:52:11 +08:00
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 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;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
if (response.qualityTable)
pageData.qualityTable = response.qualityTable;
if (response.sevenDaysChart)
pageData.sevenDaysChart = response.sevenDaysChart;
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
if (response.nclChart) pageData.nclChart = response.nclChart;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
if (response.qualityChart)
pageData.qualityChart = response.qualityChart;
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
refreshPage();
}
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
error: function (xhr, status, error) {
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
console.error("获取数据失败:", error);
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
});
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 刷新页面所有数据
function refreshPage() {
updateSlqs();
updateNcl();
updateYaohao();
updateQualityTable();
initSevenDaysChart();
initNclChart();
initQualityChart();
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
// 进入全屏函数
function enterFullscreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
} else if (elem.webkitRequestFullscreen) {
/* Safari */
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
elem.webkitRequestFullscreen();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
} else if (elem.msRequestFullscreen) {
/* IE11 */
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
elem.msRequestFullscreen();
}
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 退出全屏函数
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
}
// 切换全屏状态
function toggleFullscreen() {
if (document.fullscreenElement || document.webkitFullscreenElement) {
exitFullscreen();
} else {
enterFullscreen();
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
}
// 双击全屏功能（只进入全屏，不退出）
document.addEventListener('dblclick', function(e) {
enterFullscreen();
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
});
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 获取水量统计数据
function fetchSlqsData() {
$.ajax({
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
type: "GET",
data: { companyKey: "DEV067" },
dataType: "json",
success: function (response) {
console.log("水量统计数据:", response);
水厂大屏数据
2026-03-08 23:52:11 +08:00
if (response) {
// 兼容不同的返回字段名
pageData.slqs.todayTotal = response.todayTotal || 0;
pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0;
pageData.slqs.monthTotal = response.monthTotal || 0;
updateSlqs();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 解析七日水量数据 sevenDaysTotal
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
if (
response.sevenDaysTotal &&
Array.isArray(response.sevenDaysTotal)
) {
水厂大屏数据
2026-03-08 23:52:11 +08:00
var xAxis = [];
var data = [];
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
response.sevenDaysTotal.forEach(function (item) {
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 日期格式: "2026-03-07" -> "03-07"
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
var dateStr = item.date || "";
水厂大屏数据
2026-03-08 23:52:11 +08:00
if (dateStr.length >= 10) {
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
水厂大屏数据
2026-03-08 23:52:11 +08:00
} else {
xAxis.push(dateStr);
}
// total 可能是字符串，转为数字
data.push(parseFloat(item.total) || 0);
});
pageData.sevenDaysChart.xAxis = xAxis;
pageData.sevenDaysChart.data = data;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
initSevenDaysChart(); // 重新渲染图表
水厂大屏数据
2026-03-08 23:52:11 +08:00
}
}
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
error: function (xhr, status, error) {
console.error("获取水量统计数据失败:", error);
},
水厂大屏数据
2026-03-08 23:52:11 +08:00
});
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 质量指标表格点位编码映射
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();
}
}
});
});
}
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 获取点位信息数据
// mpcode: 点位编码
// sdt: 开始时间 (可选，默认7天前)
// edt: 结束时间 (可选，默认当前时间)
// 返回: Promise对象
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
function fetchPointData(mpcode, sdt, edt) {
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 默认时间范围：近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);
}
});
});
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 格式化日期为 YYYY-MM-DD 格式
function formatDate(date) {
var year = date.getFullYear();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
var month = (date.getMonth() + 1).toString().padStart(2, "0");
var day = date.getDate().toString().padStart(2, "0");
return year + "-" + month + "-" + day;
水厂大屏数据
2026-03-08 23:52:11 +08:00
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
$(function () {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 初始化隐藏数据容器
initHiddenDataContainer();
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 初始化数据显示
updateSlqs();
updateNcl();
updateYaohao();
updateQualityTable();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 初始化图表
initSevenDaysChart();
initNclChart();
initQualityChart();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 页面加载后获取水量统计数据
fetchSlqsData();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 获取质量指标表格数据
fetchQualityTableData();
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 批量获取点位数据并更新显示
var pointList = getAllPointIds();
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
pointList.forEach(function (mpcode) {
管道展示
2026-03-10 21:51:19 +08:00
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
水厂大屏数据
2026-03-08 23:52:11 +08:00
});
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 定时刷新所有数据（每分钟刷新一次）
setInterval(function() {
console.log('定时刷新数据...');
fetchSlqsData();
fetchQualityTableData();
// 批量刷新点位数据
pointList.forEach(function (mpcode) {
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
});
}, 60000); // 60000毫秒 = 1分钟
// 初始化绿色圆点点击事件
initGreenDots();
});
// 初始化绿色圆点点击事件
function initGreenDots() {
var dots = document.querySelectorAll('.green-dot');
console.log('初始化绿色圆点，数量:', dots.length);
dots.forEach(function(dot) {
dot.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
var index = parseInt(this.getAttribute('data-index'));
console.log('点击圆点，索引:', index);
showDotPopup(index, this);
});
});
}
// 显示弹窗
function showDotPopup(index, dotElement) {
var config = dotDataConfig[index];
if (!config) return;
var title = document.getElementById('popupTitle');
var content = document.getElementById('popupContent');
var overlay = document.getElementById('popupOverlay');
var popup = document.getElementById('dotPopup');
title.textContent = config.name;
var html = '';
// 遍历所有点位
config.points.forEach(function(pointId) {
var pointInfo = pointConfig[pointId];
var value = document.getElementById(pointId);
var val = value ? value.textContent : '--';
var pointName = pointInfo ? pointInfo.name : pointId;
html += '<div class="dot-popup-item">';
html += '<span class="dot-popup-label">' + pointName + '</span>';
html += '<span class="dot-popup-value">' + val + '</span>';
html += '</div>';
});
content.innerHTML = html;
// 计算弹窗位置，显示在绿点右侧
var dotRect = dotElement.getBoundingClientRect();
var container = document.querySelector('.screen-container');
var containerRect = container.getBoundingClientRect();
// 获取绿点相对于容器的位置
var dotTop = parseInt(dotElement.style.top) || 0;
var dotLeft = parseInt(dotElement.style.left) || 0;
// 弹窗定位在绿点右侧，稍微偏上
var popupLeft = dotLeft + 60; // 绿点右侧60px
var popupTop = dotTop - 50; // 绿点上方50px
// 确保弹窗不超出容器右边界
if (popupLeft + 450 > 2800) {
popupLeft = dotLeft - 470; // 显示在左侧
}
// 确保弹窗不超出容器上边界
if (popupTop < 20) {
popupTop = 20;
}
// 确保弹窗不超出容器下边界
if (popupTop + 400 > 1600) {
popupTop = 1600 - 400;
}
popup.style.left = popupLeft + 'px';
popup.style.top = popupTop + 'px';
overlay.classList.add('show');
popup.classList.add('show');
}
// 关闭弹窗
function closePopup() {
document.getElementById('popupOverlay').classList.remove('show');
document.getElementById('dotPopup').classList.remove('show');
}
// 点击遮罩关闭弹窗
document.addEventListener('click', function(e) {
if (e.target.id === 'popupOverlay') {
closePopup();
}
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
});
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 七日水量图表
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;
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
水厂大屏数据
2026-03-08 23:52:11 +08:00
// 根据数据动态计算Y轴最大值
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
var yMax = 10000; // 默认值
水厂大屏数据
2026-03-08 23:52:11 +08:00
if (data && data.length > 0) {
var dataMax = Math.max.apply(null, data);
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
if (yMax < 10000) yMax = 10000; // 最小值1万
水厂大屏数据
2026-03-08 23:52:11 +08:00
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
var option = {
backgroundColor: "transparent",
水厂大屏数据
2026-03-08 23:52:11 +08:00
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#46F2FF",
borderWidth: 1,
textStyle: {
color: "#fff",
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
fontSize: 18,
水厂大屏数据
2026-03-08 23:52:11 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
formatter: function (params) {
水厂大屏数据
2026-03-08 23:52:11 +08:00
var data = params[0];
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
return (
data.name +
"<br/>" +
data.seriesName +
": " +
data.value.toLocaleString()
);
},
水厂大屏数据
2026-03-08 23:52:11 +08:00
},
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
grid: {
水厂大屏数据
2026-03-08 23:52:11 +08:00
// left: 60,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
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",
水厂大屏数据
2026-03-08 23:52:11 +08:00
max: yMax,
splitNumber: 7,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
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",
水厂大屏数据
2026-03-08 23:52:11 +08:00
barMaxWidth: 60,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
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%",
水厂大屏数据
2026-03-08 23:52:11 +08:00
barMaxWidth: 60,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
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],
});
});
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
window.addEventListener("resize", function () {
myChart.resize();
});
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 泥处理图表
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;
水厂大屏数据ES查询
2026-03-10 00:49:24 +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,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
xAxis: {
type: "category",
data: pageData.nclChart.xAxis,
boundaryGap: false,
axisLine: {
lineStyle: { color: "#2C3E50" },
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
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",
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
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,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
data: nclData,
},
],
};
nclChart.setOption(nclOption);
window.addEventListener("resize", function () {
nclChart.resize();
});
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
}
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
排污户大屏企业对接
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;
水厂大屏数据ES查询
2026-03-10 00:49:24 +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,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
xAxis: {
type: "category",
data: pageData.qualityChart.xAxis,
boundaryGap: false,
axisLine: {
lineStyle: { color: "#2C3E50" },
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
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",
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
},
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,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
水厂大屏数据ES查询
2026-03-10 00:49:24 +08:00
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>
UI、logo
2026-02-02 14:44:36 +08:00
</html>
Reference in New Issue Copy Permalink