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>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>水厂大屏展示</title>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/JS/echarts3.0.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/JS/main/main_js.js"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<!-- <script
|
||||
type="text/javascript"
|
||||
src="../../node_modules/jquery/dist/jquery.min.js"
|
||||
@ -24,7 +45,7 @@
|
||||
.screen-container {
|
||||
width: 6500px;
|
||||
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-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
@ -196,7 +217,7 @@
|
||||
.fullscreen-overlay .tip-content h2 {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #46F2FF;
|
||||
color: #46f2ff;
|
||||
}
|
||||
.fullscreen-overlay .tip-content p {
|
||||
font-size: 24px;
|
||||
@ -208,6 +229,7 @@
|
||||
}
|
||||
.Middle2-value {
|
||||
position: absolute;
|
||||
left: 2450px;
|
||||
width: 100px;
|
||||
height: 31px;
|
||||
color: rgba(41, 241, 250, 1);
|
||||
@ -220,6 +242,147 @@
|
||||
top: 190.5px;
|
||||
left: 2470px;
|
||||
}
|
||||
#D_QueYCRJY1 {
|
||||
top: 242.5px;
|
||||
}
|
||||
#D_HaoYCRJY {
|
||||
top: 294.5px;
|
||||
}
|
||||
#D_HaoYCRJY2 {
|
||||
top: 346.5px;
|
||||
}
|
||||
#D_HaoYCWNND {
|
||||
top: 398.5px;
|
||||
}
|
||||
#D_MoCWNND {
|
||||
top: 450.5px;
|
||||
}
|
||||
#D_BengZYW {
|
||||
top: 571px;
|
||||
left: 2470px;
|
||||
}
|
||||
#D_TiSB101DL {
|
||||
top: 622px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_TiSB102DL {
|
||||
top: 673px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_TiSB103DL {
|
||||
top: 724px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_NingMSJYLL {
|
||||
top: 846px;
|
||||
left: 2465px;
|
||||
}
|
||||
#D_YaLSQNLL {
|
||||
top: 898px;
|
||||
left: 2465px;
|
||||
}
|
||||
#D_NingMSCGYW {
|
||||
top: 1020px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_YaLSQNLL {
|
||||
top: 1071px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_CiLSNJYLL {
|
||||
top: 1190px;
|
||||
left: 2466px;
|
||||
}
|
||||
#D_PACJYLL {
|
||||
top: 1241px;
|
||||
left: 2466px;
|
||||
}
|
||||
#D_CiLSNCGYW {
|
||||
top: 1364px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_PACCGYW {
|
||||
top: 1417px;
|
||||
left: 2481px;
|
||||
}
|
||||
.Middle4_val {
|
||||
position: absolute;
|
||||
left: 5134px;
|
||||
width: 100px;
|
||||
height: 31px;
|
||||
color: rgba(41, 241, 250, 1);
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/*background: #0AFA02;*/
|
||||
}
|
||||
#D_JSLL {
|
||||
top: 291px;
|
||||
}
|
||||
#D_JinSPH {
|
||||
top: 342px;
|
||||
}
|
||||
#D_JinSCOD {
|
||||
top: 393px;
|
||||
}
|
||||
#D_JinSAL {
|
||||
top: 444px;
|
||||
}
|
||||
#D_JinSWD {
|
||||
top: 497px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_JinSLJLL {
|
||||
top: 549px;
|
||||
left: 5155px;
|
||||
}
|
||||
#D_ChuSLL {
|
||||
top: 760px;
|
||||
}
|
||||
#D_ChuSPH {
|
||||
top: 812px;
|
||||
}
|
||||
#D_ChuSCOD {
|
||||
top: 867px;
|
||||
}
|
||||
#D_ChuSAL {
|
||||
top: 919px;
|
||||
}
|
||||
#D_ChuSWD {
|
||||
top: 968px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSZL {
|
||||
top: 1021px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSZLv {
|
||||
top: 1072px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSLJLL {
|
||||
top: 1124px;
|
||||
left: 5155px;
|
||||
}
|
||||
#D_FanXBCKLL {
|
||||
top: 1239px;
|
||||
}
|
||||
#D_FanXBCKYL {
|
||||
top: 1292px;
|
||||
left: 5144px;
|
||||
}
|
||||
#D_ShengYWNCKLL {
|
||||
top: 1344px;
|
||||
}
|
||||
#D_QingSCYW {
|
||||
top: 1464px;
|
||||
left: 5167px;
|
||||
}
|
||||
#D_FeiYCYW {
|
||||
top: 1516px;
|
||||
left: 5167px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -378,23 +541,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 中间图表 -->
|
||||
<div class="Middle3">
|
||||
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
||||
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" />
|
||||
<img
|
||||
src="<%=request.getContextPath()%>/IMG/monitor.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@ -408,14 +597,14 @@
|
||||
slqs: {
|
||||
todayTotal: 6040, // 今日水量
|
||||
yesterdayTotal: 4197, // 昨日水量
|
||||
monthTotal: 12356 // 本月水量
|
||||
monthTotal: 12356, // 本月水量
|
||||
},
|
||||
|
||||
// 泥处理指标 (ncl)
|
||||
ncl: {
|
||||
val1: 0, // 泥处理指标1
|
||||
val2: 200, // 泥处理指标2
|
||||
val3: 4.89 // 泥处理指标3
|
||||
val3: 4.89, // 泥处理指标3
|
||||
},
|
||||
|
||||
// 药耗数据 (yaohao)
|
||||
@ -427,32 +616,101 @@
|
||||
|
||||
// 质量指标表格数据
|
||||
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" }
|
||||
{
|
||||
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]
|
||||
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]
|
||||
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]
|
||||
}
|
||||
data: [8, 13, 9, 14, 21, 14, 18],
|
||||
},
|
||||
};
|
||||
|
||||
// 更新水量显示
|
||||
@ -480,14 +738,27 @@
|
||||
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>" +
|
||||
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);
|
||||
});
|
||||
@ -499,7 +770,7 @@
|
||||
url: apiUrl,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
success: function (response) {
|
||||
// 假设接口返回的数据格式如下：
|
||||
// {
|
||||
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||||
@ -514,17 +785,20 @@
|
||||
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.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;
|
||||
if (response.qualityChart)
|
||||
pageData.qualityChart = response.qualityChart;
|
||||
|
||||
refreshPage();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取数据失败:", error);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -544,39 +818,41 @@
|
||||
var elem = document.documentElement;
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
||||
} else if (elem.webkitRequestFullscreen) {
|
||||
/* Safari */
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) { /* IE11 */
|
||||
} else if (elem.msRequestFullscreen) {
|
||||
/* IE11 */
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
// 隐藏提示遮罩
|
||||
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||
document.getElementById("fullscreenOverlay").style.display = "none";
|
||||
}
|
||||
|
||||
// 监听全屏状态变化
|
||||
document.addEventListener('fullscreenchange', function() {
|
||||
var overlay = document.getElementById('fullscreenOverlay');
|
||||
document.addEventListener("fullscreenchange", function () {
|
||||
var overlay = document.getElementById("fullscreenOverlay");
|
||||
if (!document.fullscreenElement) {
|
||||
// 退出全屏时显示提示
|
||||
overlay.style.display = 'flex';
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
});
|
||||
document.addEventListener('webkitfullscreenchange', function() {
|
||||
var overlay = document.getElementById('fullscreenOverlay');
|
||||
document.addEventListener("webkitfullscreenchange", function () {
|
||||
var overlay = document.getElementById("fullscreenOverlay");
|
||||
if (!document.webkitFullscreenElement) {
|
||||
overlay.style.display = 'flex';
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
});
|
||||
|
||||
// 获取水量统计数据
|
||||
function fetchSlqsData() {
|
||||
$.ajax({
|
||||
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do',
|
||||
type: 'GET',
|
||||
data: { companyKey: 'DEV067' },
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
console.log('水量统计数据:', response);
|
||||
url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
|
||||
type: "GET",
|
||||
data: { companyKey: "DEV067" },
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
console.log("水量统计数据:", response);
|
||||
if (response) {
|
||||
// 兼容不同的返回字段名
|
||||
pageData.slqs.todayTotal = response.todayTotal || 0;
|
||||
@ -585,12 +861,15 @@
|
||||
updateSlqs();
|
||||
|
||||
// 解析七日水量数据 sevenDaysTotal
|
||||
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) {
|
||||
if (
|
||||
response.sevenDaysTotal &&
|
||||
Array.isArray(response.sevenDaysTotal)
|
||||
) {
|
||||
var xAxis = [];
|
||||
var data = [];
|
||||
response.sevenDaysTotal.forEach(function(item) {
|
||||
response.sevenDaysTotal.forEach(function (item) {
|
||||
// 日期格式: "2026-03-07" -> "03-07"
|
||||
var dateStr = item.date || '';
|
||||
var dateStr = item.date || "";
|
||||
if (dateStr.length >= 10) {
|
||||
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
||||
} else {
|
||||
@ -605,9 +884,72 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('获取水量统计数据失败:', error);
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取水量统计数据失败:", error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 质量指标表格点位编码映射
|
||||
var qualityMPointMapping = {
|
||||
"COD (mg/L)": { mPointKey: "D_ChuSCOD", standard: "0.000–20.000" },
|
||||
"TP (mg/L)": { mPointKey: "D_ChuSTP", standard: "0.000–0.500" },
|
||||
"NH3–N (mg/L)": { mPointKey: "D_ChuSNH3N", standard: "0.000–5.000" },
|
||||
"TN (mg/L)": { mPointKey: "D_ChuSTN", standard: "0.000–15.000" },
|
||||
"PH (mg/L)": { mPointKey: "D_ChuSPH", standard: "6.000–9.000" },
|
||||
"SS": { mPointKey: "D_ChuSSS", standard: "0.000–10.000" },
|
||||
"温度(℃)": { mPointKey: "D_ChuSWD", standard: "0.000–40.000" },
|
||||
};
|
||||
|
||||
// 获取质量指标表格数据
|
||||
function fetchQualityTableData() {
|
||||
var companyKey = "0533JS";
|
||||
var params = Object.keys(qualityMPointMapping);
|
||||
var completedRequests = 0;
|
||||
var totalRequests = params.length;
|
||||
|
||||
params.forEach(function (paramName) {
|
||||
var mPointKey = qualityMPointMapping[paramName].mPointKey;
|
||||
var standard = qualityMPointMapping[paramName].standard;
|
||||
|
||||
$.ajax({
|
||||
url: "<%=request.getContextPath()%>/mpoint/data/getStatistics.do",
|
||||
type: "GET",
|
||||
data: {
|
||||
mPointKey: mPointKey,
|
||||
companyKey: companyKey
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
console.log("质量指标数据[" + mPointKey + "]:", response);
|
||||
if (response) {
|
||||
// 更新pageData.qualityTable中对应的数据
|
||||
for (var i = 0; i < pageData.qualityTable.length; i++) {
|
||||
if (pageData.qualityTable[i].param === paramName) {
|
||||
pageData.qualityTable[i].current = response.currentValue || 0;
|
||||
pageData.qualityTable[i].avg = response.avgValue || 0;
|
||||
pageData.qualityTable[i].max = response.maxValue || 0;
|
||||
pageData.qualityTable[i].min = response.minValue || 0;
|
||||
pageData.qualityTable[i].standard = standard;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
completedRequests++;
|
||||
// 所有请求完成后更新表格
|
||||
if (completedRequests === totalRequests) {
|
||||
updateQualityTable();
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取质量指标数据失败:", mPointKey, error);
|
||||
completedRequests++;
|
||||
// 即使失败也检查是否所有请求已完成
|
||||
if (completedRequests === totalRequests) {
|
||||
updateQualityTable();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -653,9 +995,9 @@
|
||||
// 格式化日期为 YYYY-MM-DD 格式
|
||||
function formatDate(date) {
|
||||
var year = date.getFullYear();
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
var day = date.getDate().toString().padStart(2, '0');
|
||||
return year + '-' + month + '-' + day;
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
var day = date.getDate().toString().padStart(2, "0");
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
|
||||
$(function () {
|
||||
@ -673,38 +1015,75 @@
|
||||
// 页面加载后获取水量统计数据
|
||||
fetchSlqsData();
|
||||
|
||||
// 批量获取点位数据并更新显示
|
||||
// 获取质量指标表格数据
|
||||
fetchQualityTableData();
|
||||
|
||||
<%--// 定时刷新所有数据（每分钟刷新一次）--%>
|
||||
<%--setInterval(function() {--%>
|
||||
<%-- console.log('定时刷新数据...');--%>
|
||||
<%-- fetchSlqsData();--%>
|
||||
<%-- fetchQualityTableData();--%>
|
||||
<%-- // 批量刷新点位数据--%>
|
||||
<%-- pointList.forEach(function (mpcode) {--%>
|
||||
<%-- getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');--%>
|
||||
<%-- });--%>
|
||||
<%--}, 60000); // 60000毫秒 = 1分钟--%>
|
||||
|
||||
<%--// 批量获取点位数据并更新显示--%>
|
||||
var pointList = [
|
||||
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH',
|
||||
'D_YanYCORP',
|
||||
'D_QueYCRJY1',
|
||||
'D_HaoYCRJY',
|
||||
'D_HaoYCRJY2',
|
||||
'D_HaoYCWNND',
|
||||
'D_MoCWNND',
|
||||
'D_BengZYW',
|
||||
'D_TiSB101DL',
|
||||
'D_TiSB102DL',
|
||||
'D_TiSB103DL',
|
||||
'D_NingMSJYLL',
|
||||
'D_YaLSQNLL',
|
||||
'D_NingMSCGYW',
|
||||
'D_CiLSNJYLL',
|
||||
'D_PACJYLL',
|
||||
'D_CiLSNCGYW',
|
||||
'D_PACCGYW'
|
||||
"D_PACDSYH", // PAC吨水药耗
|
||||
"D_YiSNDSYH", // 乙酸钠吨水药耗
|
||||
"D_CiLSNDSYH", // 次氯酸钠吨水药耗
|
||||
"D_YanYCORP",
|
||||
"D_QueYCRJY1",
|
||||
"D_HaoYCRJY",
|
||||
"D_HaoYCRJY2",
|
||||
"D_HaoYCWNND",
|
||||
"D_MoCWNND",
|
||||
"D_BengZYW",
|
||||
"D_TiSB101DL",
|
||||
"D_TiSB102DL",
|
||||
"D_TiSB103DL",
|
||||
"D_NingMSJYLL",
|
||||
"D_YaLSQNLL",
|
||||
"D_NingMSCGYW",
|
||||
"D_CiLSNJYLL",
|
||||
"D_PACJYLL",
|
||||
"D_CiLSNCGYW",
|
||||
"D_PACCGYW",
|
||||
"D_JSLL",
|
||||
"D_JinSPH",
|
||||
"D_JinSCOD",
|
||||
"D_JinSAL",
|
||||
"D_JinSWD",
|
||||
"D_JinSLJLL",
|
||||
"D_ChuSLL",
|
||||
"D_ChuSPH",
|
||||
"D_ChuSCOD",
|
||||
"D_ChuSAL",
|
||||
"D_ChuSWD",
|
||||
"D_ChuSZL",
|
||||
"D_ChuSZLv",
|
||||
"D_ChuSLJLL",
|
||||
"D_FanXBCKLL",
|
||||
"D_FanXBCKYL",
|
||||
"D_ShengYWNCKLL",
|
||||
"D_QingSCYW",
|
||||
"D_FeiYCYW",
|
||||
];
|
||||
|
||||
pointList.forEach(function(mpcode) {
|
||||
fetchPointData(mpcode).then(function(res) {
|
||||
if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||
var lastData = res[0].data[res[0].data.length - 1];
|
||||
var value = lastData[1]; // 取最后一个数据点的值
|
||||
$('#' + mpcode).text(value || 0);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
console.error('点位数据获取失败:', mpcode, error);
|
||||
});
|
||||
pointList.forEach(function (mpcode) {
|
||||
// fetchPointData(mpcode).then(function(res) {
|
||||
// $('#' + mpcode).text(1000 || 0);
|
||||
// // if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||
// // var lastData = res[0].data[res[0].data.length - 1];
|
||||
// // var value = lastData[1]; // 取最后一个数据点的值
|
||||
// // $('#' + mpcode).text(1000 || 0);
|
||||
// // }
|
||||
// }).catch(function(error) {
|
||||
// console.error('点位数据获取失败:', mpcode, error);
|
||||
// });
|
||||
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
|
||||
});
|
||||
});
|
||||
|
||||
@ -721,7 +1100,7 @@
|
||||
if (data && data.length > 0) {
|
||||
var dataMax = Math.max.apply(null, data);
|
||||
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
||||
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
|
||||
yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
|
||||
if (yMax < 10000) yMax = 10000; // 最小值1万
|
||||
}
|
||||
|
||||
@ -734,12 +1113,18 @@
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 18
|
||||
fontSize: 18,
|
||||
},
|
||||
formatter: function(params) {
|
||||
formatter: function (params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString();
|
||||
}
|
||||
return (
|
||||
data.name +
|
||||
"<br/>" +
|
||||
data.seriesName +
|
||||
": " +
|
||||
data.value.toLocaleString()
|
||||
);
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// left: 60,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -569,6 +569,159 @@ pageEncoding="UTF-8"%>
|
||||
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>
|
||||
</body>
|
||||
</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