Merge remote-tracking branch 'origin/deng' into deng
This commit is contained in:
Timer
@ -1,11 +1,32 @@
|
|||||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
<%--<%@ 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>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>水厂大屏展示</title>
|
<title>水厂大屏展示</title>
|
||||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
<script
|
||||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></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
|
<!-- <script
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
src="../../node_modules/jquery/dist/jquery.min.js"
|
src="../../node_modules/jquery/dist/jquery.min.js"
|
||||||
@ -24,7 +45,7 @@
|
|||||||
.screen-container {
|
.screen-container {
|
||||||
width: 6500px;
|
width: 6500px;
|
||||||
height: 1800px;
|
height: 1800px;
|
||||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png');
|
background-image: url("<%=request.getContextPath()%>/IMG/screen1.png");
|
||||||
/* background-image: url("../../IMG/screen1.png"); */
|
/* background-image: url("../../IMG/screen1.png"); */
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -196,7 +217,7 @@
|
|||||||
.fullscreen-overlay .tip-content h2 {
|
.fullscreen-overlay .tip-content h2 {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
color: #46F2FF;
|
color: #46f2ff;
|
||||||
}
|
}
|
||||||
.fullscreen-overlay .tip-content p {
|
.fullscreen-overlay .tip-content p {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
@ -208,6 +229,7 @@
|
|||||||
}
|
}
|
||||||
.Middle2-value {
|
.Middle2-value {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: 2450px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
color: rgba(41, 241, 250, 1);
|
color: rgba(41, 241, 250, 1);
|
||||||
@ -220,6 +242,147 @@
|
|||||||
top: 190.5px;
|
top: 190.5px;
|
||||||
left: 2470px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -378,23 +541,49 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 中间图表 -->
|
<!-- 中间图表 -->
|
||||||
<div class="Middle3">
|
<div class="Middle3">
|
||||||
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
||||||
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" />
|
<img
|
||||||
|
src="<%=request.getContextPath()%>/IMG/monitor.png"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Middle4">
|
<div class="Middle4">
|
||||||
<!-- 进水 -->
|
<!-- 进水 -->
|
||||||
<div></div>
|
<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>
|
<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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
@ -408,14 +597,14 @@
|
|||||||
slqs: {
|
slqs: {
|
||||||
todayTotal: 6040, // 今日水量
|
todayTotal: 6040, // 今日水量
|
||||||
yesterdayTotal: 4197, // 昨日水量
|
yesterdayTotal: 4197, // 昨日水量
|
||||||
monthTotal: 12356 // 本月水量
|
monthTotal: 12356, // 本月水量
|
||||||
},
|
},
|
||||||
|
|
||||||
// 泥处理指标 (ncl)
|
// 泥处理指标 (ncl)
|
||||||
ncl: {
|
ncl: {
|
||||||
val1: 0, // 泥处理指标1
|
val1: 0, // 泥处理指标1
|
||||||
val2: 200, // 泥处理指标2
|
val2: 200, // 泥处理指标2
|
||||||
val3: 4.89 // 泥处理指标3
|
val3: 4.89, // 泥处理指标3
|
||||||
},
|
},
|
||||||
|
|
||||||
// 药耗数据 (yaohao)
|
// 药耗数据 (yaohao)
|
||||||
@ -427,32 +616,101 @@
|
|||||||
|
|
||||||
// 质量指标表格数据
|
// 质量指标表格数据
|
||||||
qualityTable: [
|
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: "COD (mg/L)",
|
||||||
{ param: "NH3–N (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
current: 13.186,
|
||||||
{ param: "TN (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
avg: 12.996,
|
||||||
{ param: "PH (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
max: 14.666,
|
||||||
{ param: "SS", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
min: 11.92,
|
||||||
{ param: "温度(℃)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }
|
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: {
|
sevenDaysChart: {
|
||||||
xAxis: ["11-10", "11-11", "11-12", "11-13", "11-14", "11-15", "11-16", "11-17"],
|
xAxis: [
|
||||||
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600]
|
"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: {
|
nclChart: {
|
||||||
xAxis: ["2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"],
|
xAxis: [
|
||||||
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260]
|
"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: {
|
qualityChart: {
|
||||||
xAxis: ["11", "12", "13", "14", "15", "16", "17"],
|
xAxis: ["11", "12", "13", "14", "15", "16", "17"],
|
||||||
data: [8, 13, 9, 14, 21, 14, 18]
|
data: [8, 13, 9, 14, 21, 14, 18],
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// 更新水量显示
|
// 更新水量显示
|
||||||
@ -480,14 +738,27 @@
|
|||||||
function updateQualityTable() {
|
function updateQualityTable() {
|
||||||
var tbody = $(".quality-table tbody");
|
var tbody = $(".quality-table tbody");
|
||||||
tbody.empty();
|
tbody.empty();
|
||||||
pageData.qualityTable.forEach(function(item) {
|
pageData.qualityTable.forEach(function (item) {
|
||||||
var row = "<tr>" +
|
var row =
|
||||||
"<td>" + item.param + "</td>" +
|
"<tr>" +
|
||||||
"<td>" + item.current + "</td>" +
|
"<td>" +
|
||||||
"<td>" + item.avg + "</td>" +
|
item.param +
|
||||||
"<td>" + item.max + "</td>" +
|
"</td>" +
|
||||||
"<td>" + item.min + "</td>" +
|
"<td>" +
|
||||||
"<td>" + item.standard + "</td>" +
|
item.current +
|
||||||
|
"</td>" +
|
||||||
|
"<td>" +
|
||||||
|
item.avg +
|
||||||
|
"</td>" +
|
||||||
|
"<td>" +
|
||||||
|
item.max +
|
||||||
|
"</td>" +
|
||||||
|
"<td>" +
|
||||||
|
item.min +
|
||||||
|
"</td>" +
|
||||||
|
"<td>" +
|
||||||
|
item.standard +
|
||||||
|
"</td>" +
|
||||||
"</tr>";
|
"</tr>";
|
||||||
tbody.append(row);
|
tbody.append(row);
|
||||||
});
|
});
|
||||||
@ -499,7 +770,7 @@
|
|||||||
url: apiUrl,
|
url: apiUrl,
|
||||||
type: "GET",
|
type: "GET",
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
success: function(response) {
|
success: function (response) {
|
||||||
// 假设接口返回的数据格式如下：
|
// 假设接口返回的数据格式如下：
|
||||||
// {
|
// {
|
||||||
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||||||
@ -514,17 +785,20 @@
|
|||||||
if (response.slqs) pageData.slqs = response.slqs;
|
if (response.slqs) pageData.slqs = response.slqs;
|
||||||
if (response.ncl) pageData.ncl = response.ncl;
|
if (response.ncl) pageData.ncl = response.ncl;
|
||||||
if (response.yaohao) pageData.yaohao = response.yaohao;
|
if (response.yaohao) pageData.yaohao = response.yaohao;
|
||||||
if (response.qualityTable) pageData.qualityTable = response.qualityTable;
|
if (response.qualityTable)
|
||||||
if (response.sevenDaysChart) pageData.sevenDaysChart = response.sevenDaysChart;
|
pageData.qualityTable = response.qualityTable;
|
||||||
|
if (response.sevenDaysChart)
|
||||||
|
pageData.sevenDaysChart = response.sevenDaysChart;
|
||||||
if (response.nclChart) pageData.nclChart = response.nclChart;
|
if (response.nclChart) pageData.nclChart = response.nclChart;
|
||||||
if (response.qualityChart) pageData.qualityChart = response.qualityChart;
|
if (response.qualityChart)
|
||||||
|
pageData.qualityChart = response.qualityChart;
|
||||||
|
|
||||||
refreshPage();
|
refreshPage();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function(xhr, status, error) {
|
error: function (xhr, status, error) {
|
||||||
console.error("获取数据失败:", error);
|
console.error("获取数据失败:", error);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -544,39 +818,41 @@
|
|||||||
var elem = document.documentElement;
|
var elem = document.documentElement;
|
||||||
if (elem.requestFullscreen) {
|
if (elem.requestFullscreen) {
|
||||||
elem.requestFullscreen();
|
elem.requestFullscreen();
|
||||||
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
} else if (elem.webkitRequestFullscreen) {
|
||||||
|
/* Safari */
|
||||||
elem.webkitRequestFullscreen();
|
elem.webkitRequestFullscreen();
|
||||||
} else if (elem.msRequestFullscreen) { /* IE11 */
|
} else if (elem.msRequestFullscreen) {
|
||||||
|
/* IE11 */
|
||||||
elem.msRequestFullscreen();
|
elem.msRequestFullscreen();
|
||||||
}
|
}
|
||||||
// 隐藏提示遮罩
|
// 隐藏提示遮罩
|
||||||
document.getElementById('fullscreenOverlay').style.display = 'none';
|
document.getElementById("fullscreenOverlay").style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听全屏状态变化
|
// 监听全屏状态变化
|
||||||
document.addEventListener('fullscreenchange', function() {
|
document.addEventListener("fullscreenchange", function () {
|
||||||
var overlay = document.getElementById('fullscreenOverlay');
|
var overlay = document.getElementById("fullscreenOverlay");
|
||||||
if (!document.fullscreenElement) {
|
if (!document.fullscreenElement) {
|
||||||
// 退出全屏时显示提示
|
// 退出全屏时显示提示
|
||||||
overlay.style.display = 'flex';
|
overlay.style.display = "flex";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
document.addEventListener('webkitfullscreenchange', function() {
|
document.addEventListener("webkitfullscreenchange", function () {
|
||||||
var overlay = document.getElementById('fullscreenOverlay');
|
var overlay = document.getElementById("fullscreenOverlay");
|
||||||
if (!document.webkitFullscreenElement) {
|
if (!document.webkitFullscreenElement) {
|
||||||
overlay.style.display = 'flex';
|
overlay.style.display = "flex";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 获取水量统计数据
|
// 获取水量统计数据
|
||||||
function fetchSlqsData() {
|
function fetchSlqsData() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do',
|
url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
|
||||||
type: 'GET',
|
type: "GET",
|
||||||
data: { companyKey: 'DEV067' },
|
data: { companyKey: "DEV067" },
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
success: function(response) {
|
success: function (response) {
|
||||||
console.log('水量统计数据:', response);
|
console.log("水量统计数据:", response);
|
||||||
if (response) {
|
if (response) {
|
||||||
// 兼容不同的返回字段名
|
// 兼容不同的返回字段名
|
||||||
pageData.slqs.todayTotal = response.todayTotal || 0;
|
pageData.slqs.todayTotal = response.todayTotal || 0;
|
||||||
@ -585,12 +861,15 @@
|
|||||||
updateSlqs();
|
updateSlqs();
|
||||||
|
|
||||||
// 解析七日水量数据 sevenDaysTotal
|
// 解析七日水量数据 sevenDaysTotal
|
||||||
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) {
|
if (
|
||||||
|
response.sevenDaysTotal &&
|
||||||
|
Array.isArray(response.sevenDaysTotal)
|
||||||
|
) {
|
||||||
var xAxis = [];
|
var xAxis = [];
|
||||||
var data = [];
|
var data = [];
|
||||||
response.sevenDaysTotal.forEach(function(item) {
|
response.sevenDaysTotal.forEach(function (item) {
|
||||||
// 日期格式: "2026-03-07" -> "03-07"
|
// 日期格式: "2026-03-07" -> "03-07"
|
||||||
var dateStr = item.date || '';
|
var dateStr = item.date || "";
|
||||||
if (dateStr.length >= 10) {
|
if (dateStr.length >= 10) {
|
||||||
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
||||||
} else {
|
} else {
|
||||||
@ -605,9 +884,72 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function(xhr, status, error) {
|
error: function (xhr, status, error) {
|
||||||
console.error('获取水量统计数据失败:', 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -653,9 +995,9 @@
|
|||||||
// 格式化日期为 YYYY-MM-DD 格式
|
// 格式化日期为 YYYY-MM-DD 格式
|
||||||
function formatDate(date) {
|
function formatDate(date) {
|
||||||
var year = date.getFullYear();
|
var year = date.getFullYear();
|
||||||
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
var month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||||
var day = date.getDate().toString().padStart(2, '0');
|
var day = date.getDate().toString().padStart(2, "0");
|
||||||
return year + '-' + month + '-' + day;
|
return year + "-" + month + "-" + day;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
@ -673,38 +1015,75 @@
|
|||||||
// 页面加载后获取水量统计数据
|
// 页面加载后获取水量统计数据
|
||||||
fetchSlqsData();
|
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 = [
|
var pointList = [
|
||||||
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH',
|
"D_PACDSYH", // PAC吨水药耗
|
||||||
'D_YanYCORP',
|
"D_YiSNDSYH", // 乙酸钠吨水药耗
|
||||||
'D_QueYCRJY1',
|
"D_CiLSNDSYH", // 次氯酸钠吨水药耗
|
||||||
'D_HaoYCRJY',
|
"D_YanYCORP",
|
||||||
'D_HaoYCRJY2',
|
"D_QueYCRJY1",
|
||||||
'D_HaoYCWNND',
|
"D_HaoYCRJY",
|
||||||
'D_MoCWNND',
|
"D_HaoYCRJY2",
|
||||||
'D_BengZYW',
|
"D_HaoYCWNND",
|
||||||
'D_TiSB101DL',
|
"D_MoCWNND",
|
||||||
'D_TiSB102DL',
|
"D_BengZYW",
|
||||||
'D_TiSB103DL',
|
"D_TiSB101DL",
|
||||||
'D_NingMSJYLL',
|
"D_TiSB102DL",
|
||||||
'D_YaLSQNLL',
|
"D_TiSB103DL",
|
||||||
'D_NingMSCGYW',
|
"D_NingMSJYLL",
|
||||||
'D_CiLSNJYLL',
|
"D_YaLSQNLL",
|
||||||
'D_PACJYLL',
|
"D_NingMSCGYW",
|
||||||
'D_CiLSNCGYW',
|
"D_CiLSNJYLL",
|
||||||
'D_PACCGYW'
|
"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) {
|
pointList.forEach(function (mpcode) {
|
||||||
fetchPointData(mpcode).then(function(res) {
|
// fetchPointData(mpcode).then(function(res) {
|
||||||
if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
// $('#' + mpcode).text(1000 || 0);
|
||||||
var lastData = res[0].data[res[0].data.length - 1];
|
// // if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||||
var value = lastData[1]; // 取最后一个数据点的值
|
// // var lastData = res[0].data[res[0].data.length - 1];
|
||||||
$('#' + mpcode).text(value || 0);
|
// // var value = lastData[1]; // 取最后一个数据点的值
|
||||||
}
|
// // $('#' + mpcode).text(1000 || 0);
|
||||||
}).catch(function(error) {
|
// // }
|
||||||
console.error('点位数据获取失败:', mpcode, error);
|
// }).catch(function(error) {
|
||||||
});
|
// console.error('点位数据获取失败:', mpcode, error);
|
||||||
|
// });
|
||||||
|
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -721,7 +1100,7 @@
|
|||||||
if (data && data.length > 0) {
|
if (data && data.length > 0) {
|
||||||
var dataMax = Math.max.apply(null, data);
|
var dataMax = Math.max.apply(null, data);
|
||||||
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
||||||
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
|
yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
|
||||||
if (yMax < 10000) yMax = 10000; // 最小值1万
|
if (yMax < 10000) yMax = 10000; // 最小值1万
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -734,12 +1113,18 @@
|
|||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 18
|
fontSize: 18,
|
||||||
},
|
},
|
||||||
formatter: function(params) {
|
formatter: function (params) {
|
||||||
var data = params[0];
|
var data = params[0];
|
||||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString();
|
return (
|
||||||
}
|
data.name +
|
||||||
|
"<br/>" +
|
||||||
|
data.seriesName +
|
||||||
|
": " +
|
||||||
|
data.value.toLocaleString()
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
// left: 60,
|
// left: 60,
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -569,6 +569,159 @@ pageEncoding="UTF-8"%>
|
|||||||
document.webkitExitFullscreen();
|
document.webkitExitFullscreen();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function initMap() {
|
||||||
|
// 初始化地图
|
||||||
|
map = new T.Map('map-container');
|
||||||
|
// 设置中心点和缩放级别 (金山卫区域)
|
||||||
|
map.centerAndZoom(new T.LngLat(121.340000, 30.740000), 14);
|
||||||
|
// 启用滚轮缩放
|
||||||
|
map.enableScrollWheelZoom();
|
||||||
|
|
||||||
|
// 加载转换后的 GeoJSON 数据
|
||||||
|
loadGeoJSON("pipeline_data.geojson");
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadGeoJSON(url) {
|
||||||
|
$.getJSON(url, function(geojson) {
|
||||||
|
|
||||||
|
if (!geojson || !geojson.features) {
|
||||||
|
console.error("Invalid GeoJSON data");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
geojson.features.forEach(function(feature) {
|
||||||
|
var props = feature.properties;
|
||||||
|
var geometry = feature.geometry;
|
||||||
|
|
||||||
|
if (geometry.type === "LineString") {
|
||||||
|
var points = [];
|
||||||
|
geometry.coordinates.forEach(function(coord) {
|
||||||
|
// GeoJSON 通常是 [lng, lat]
|
||||||
|
points.push(new T.LngLat(coord[0], coord[1]));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据属性设置颜色 (假设 GeoJSON 包含 type 属性)
|
||||||
|
// 如果没有 type，默认蓝色
|
||||||
|
var type = props.type || 'unknown';
|
||||||
|
var color = "#0000FF";
|
||||||
|
if (type.indexOf('雨水') > -1) color = "#00FFFF";
|
||||||
|
if (type.indexOf('污水') > -1) color = "#FF00FF";
|
||||||
|
|
||||||
|
var line = new T.Polyline(points, {
|
||||||
|
color: color,
|
||||||
|
weight: 3,
|
||||||
|
opacity: 0.9,
|
||||||
|
lineStyle: 'solid'
|
||||||
|
});
|
||||||
|
map.addOverLay(line);
|
||||||
|
|
||||||
|
// 添加标注和流向
|
||||||
|
// 构造一个模拟的 pipe 对象传给辅助函数
|
||||||
|
var pipeData = {
|
||||||
|
diameter: props.diameter || 'Unknown',
|
||||||
|
type: type
|
||||||
|
};
|
||||||
|
addPipeLabelAndArrow(map, pipeData, points, color);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).fail(function(jqxhr, textStatus, error) {
|
||||||
|
var err = textStatus + ", " + error;
|
||||||
|
console.error("Request Failed: " + err);
|
||||||
|
// 如果加载失败，回退到模拟数据演示
|
||||||
|
console.log("Loading mock data as fallback...");
|
||||||
|
var pipelines = generateMockPipelines();
|
||||||
|
renderPipelines(pipelines);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取原有的绘制逻辑为单独函数，用于回退
|
||||||
|
function renderPipelines(pipelines) {
|
||||||
|
pipelines.forEach(function(pipe) {
|
||||||
|
var points = [];
|
||||||
|
pipe.path.forEach(function(coord) {
|
||||||
|
points.push(new T.LngLat(coord[0], coord[1]));
|
||||||
|
});
|
||||||
|
|
||||||
|
var color = "#0000FF";
|
||||||
|
if (pipe.type === '雨水') color = "#00FFFF";
|
||||||
|
if (pipe.type === '污水') color = "#FF00FF";
|
||||||
|
|
||||||
|
var line = new T.Polyline(points, {
|
||||||
|
color: color,
|
||||||
|
weight: 3,
|
||||||
|
opacity: 0.9,
|
||||||
|
lineStyle: 'solid'
|
||||||
|
});
|
||||||
|
map.addOverLay(line);
|
||||||
|
addPipeLabelAndArrow(map, pipe, points, color);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addPipeLabelAndArrow(map, pipe, points, color) {
|
||||||
|
// 计算中心点
|
||||||
|
if (points.length < 2) return;
|
||||||
|
var p1 = points[0];
|
||||||
|
var p2 = points[points.length - 1];
|
||||||
|
// 简单的取两端点中点（假设直线）
|
||||||
|
var centerLng = (p1.getLng() + p2.getLng()) / 2;
|
||||||
|
var centerLat = (p1.getLat() + p2.getLat()) / 2;
|
||||||
|
var center = new T.LngLat(centerLng, centerLat);
|
||||||
|
|
||||||
|
// 计算角度
|
||||||
|
// var angle = Math.atan2(p2.getLat() - p1.getLat(), p2.getLng() - p1.getLng()) * 180 / Math.PI;
|
||||||
|
|
||||||
|
// 添加文字标注 (DN + 材质)
|
||||||
|
var typeStr = pipe.type || '';
|
||||||
|
if (typeof pipe.type === 'string' && pipe.type.indexOf('雨水') > -1) typeStr = 'PVC';
|
||||||
|
else if (typeof pipe.type === 'string' && pipe.type.indexOf('污水') > -1) typeStr = '砼';
|
||||||
|
|
||||||
|
var labelText = "DN" + pipe.diameter + "-" + typeStr;
|
||||||
|
var label = new T.Label({
|
||||||
|
text: labelText,
|
||||||
|
position: center,
|
||||||
|
offset: new T.Point(0, -10)
|
||||||
|
});
|
||||||
|
label.setBackgroundColor("transparent");
|
||||||
|
label.setBorderColor("transparent");
|
||||||
|
label.setFontColor(color);
|
||||||
|
label.setFontSize(12);
|
||||||
|
label.setTitle(labelText);
|
||||||
|
map.addOverLay(label);
|
||||||
|
|
||||||
|
// 添加箭头
|
||||||
|
var arrowLabel = new T.Label({
|
||||||
|
text: "➤",
|
||||||
|
position: center,
|
||||||
|
offset: new T.Point(0, 0)
|
||||||
|
});
|
||||||
|
arrowLabel.setBackgroundColor("transparent");
|
||||||
|
arrowLabel.setBorderColor("transparent");
|
||||||
|
arrowLabel.setFontColor(color);
|
||||||
|
arrowLabel.setFontSize(14);
|
||||||
|
map.addOverLay(arrowLabel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateMockPipelines() {
|
||||||
|
var pipes = [];
|
||||||
|
var centerLng = 121.340000;
|
||||||
|
var centerLat = 30.740000;
|
||||||
|
|
||||||
|
for (var i = 0; i < 100; i++) {
|
||||||
|
var startLng = centerLng + (Math.random() - 0.5) * 0.04;
|
||||||
|
var startLat = centerLat + (Math.random() - 0.5) * 0.04;
|
||||||
|
var endLng = startLng + (Math.random() - 0.5) * 0.01;
|
||||||
|
var endLat = startLat + (Math.random() - 0.5) * 0.01;
|
||||||
|
|
||||||
|
pipes.push({
|
||||||
|
id: i,
|
||||||
|
type: Math.random() > 0.5 ? '雨水' : '污水',
|
||||||
|
diameter: [300, 400, 500, 600, 800][Math.floor(Math.random() * 5)],
|
||||||
|
path: [[startLng, startLat], [endLng, endLat]]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return pipes;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
23296
src/main/webapp/jsp/z_bigScreen/geo.json
Normal file
23296
src/main/webapp/jsp/z_bigScreen/geo.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Reference in New Issue
Block a user