diff --git a/src/main/webapp/jsp/bigScreen.jsp b/src/main/webapp/jsp/bigScreen.jsp
index d86baa47..abf1e637 100644
--- a/src/main/webapp/jsp/bigScreen.jsp
+++ b/src/main/webapp/jsp/bigScreen.jsp
@@ -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" %>
+
+
水厂大屏展示
-
-
+
+
+
-
%>/IMG/monitor.png)
+
-
+
+
100
+
100
+
100
+
100
+
100
+
100
+
-
+
+
100
+
100
+
100
+
100
+
100
+
100
+
100
+
100
-
+
-
+
+
+
" +
- "| " + item.param + " | " +
- "" + item.current + " | " +
- "" + item.avg + " | " +
- "" + item.max + " | " +
- "" + item.min + " | " +
- "" + item.standard + " | " +
+ pageData.qualityTable.forEach(function (item) {
+ var row =
+ "
" +
+ "| " +
+ item.param +
+ " | " +
+ "" +
+ item.current +
+ " | " +
+ "" +
+ item.avg +
+ " | " +
+ "" +
+ item.max +
+ " | " +
+ "" +
+ item.min +
+ " | " +
+ "" +
+ item.standard +
+ " | " +
"
";
tbody.append(row);
});
}
-
+
// 从接口获取数据并更新页面（示例方法，供后期调用）
function fetchDataFromApi(apiUrl) {
$.ajax({
url: apiUrl,
type: "GET",
dataType: "json",
- success: function(response) {
+ success: function (response) {
// 假设接口返回的数据格式如下：
// {
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
@@ -514,20 +785,23 @@
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);
- }
+ },
});
}
-
+
// 刷新页面所有数据
function refreshPage() {
updateSlqs();
@@ -538,61 +812,66 @@
initNclChart();
initQualityChart();
}
-
+
// 进入全屏函数
function enterFullscreen() {
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;
pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0;
pageData.slqs.monthTotal = response.monthTotal || 0;
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" 部分
+ xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
} else {
xAxis.push(dateStr);
}
@@ -601,22 +880,85 @@
});
pageData.sevenDaysChart.xAxis = xAxis;
pageData.sevenDaysChart.data = data;
- initSevenDaysChart(); // 重新渲染图表
+ initSevenDaysChart(); // 重新渲染图表
}
}
},
- 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();
+ }
+ }
+ });
+ });
+ }
+
// 获取点位信息数据
// mpcode: 点位编码
// sdt: 开始时间 (可选，默认7天前)
// edt: 结束时间 (可选，默认当前时间)
// 返回: Promise对象
- function fetchPointData(mpcode, sdt, edt) {
+ function fetchPointData(mpcode, sdt, edt) {
// 默认时间范围：近7天
if (!edt) {
var now = new Date();
@@ -649,65 +991,102 @@
});
});
}
-
+
// 格式化日期为 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 () {
// 初始化数据显示
updateSlqs();
updateNcl();
updateYaohao();
updateQualityTable();
-
+
// 初始化图表
initSevenDaysChart();
initNclChart();
initQualityChart();
-
+
// 页面加载后获取水量统计数据
fetchSlqsData();
-
- // 批量获取点位数据并更新显示
+
+ // 获取质量指标表格数据
+ fetchQualityTableData();
+
+ <%--// 定时刷新所有数据（每分钟刷新一次）--%>
+ <%--setInterval(function() {--%>
+ <%-- console.log('定时刷新数据...');--%>
+ <%-- fetchSlqsData();--%>
+ <%-- fetchQualityTableData();--%>
+ <%-- // 批量刷新点位数据--%>
+ <%-- pointList.forEach(function (mpcode) {--%>
+ <%-- getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');--%>
+ <%-- });--%>
+ <%--}, 60000); // 60000毫秒 = 1分钟--%>
+
+ <%--// 批量获取点位数据并更新显示--%>
var pointList = [
- 'D_PACDSYH', '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()%>');
});
});
-
+
// 七日水量图表
function initSevenDaysChart() {
var chartDom = document.getElementById("seven-days-chart");
@@ -715,16 +1094,16 @@
var myChart = echarts.init(chartDom);
var dataAxis = pageData.sevenDaysChart.xAxis;
var data = pageData.sevenDaysChart.data;
-
+
// 根据数据动态计算Y轴最大值
- var yMax = 10000; // 默认值
+ var yMax = 10000; // 默认值
if (data && data.length > 0) {
var dataMax = Math.max.apply(null, data);
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
- yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
- if (yMax < 10000) yMax = 10000; // 最小值1万
+ yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
+ if (yMax < 10000) yMax = 10000; // 最小值1万
}
-
+
var option = {
backgroundColor: "transparent",
tooltip: {
@@ -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 + '
' + data.seriesName + ': ' + data.value.toLocaleString();
- }
+ return (
+ data.name +
+ "
" +
+ data.seriesName +
+ ": " +
+ data.value.toLocaleString()
+ );
+ },
},
grid: {
// left: 60,
@@ -848,165 +1233,165 @@
myChart.resize();
});
}
-
+
// 泥处理图表
function initNclChart() {
var nclDom = document.getElementById("ncl-chart");
if (!nclDom) return;
var nclChart = echarts.init(nclDom, "dark");
var nclData = pageData.nclChart.data;
- var nclOption = {
- backgroundColor: "transparent",
- grid: {
- left: 60,
- right: 40,
- top: 40,
- bottom: 40,
+ var nclOption = {
+ backgroundColor: "transparent",
+ grid: {
+ left: 60,
+ right: 40,
+ top: 40,
+ bottom: 40,
+ },
+ legend: {
+ data: ["实际小时排泥量"],
+ right: 10,
+ top: 0,
+ textStyle: {
+ color: "#9BE8FF",
+ fontSize: 25,
},
- legend: {
- data: ["实际小时排泥量"],
- right: 10,
- top: 0,
- textStyle: {
- color: "#9BE8FF",
- fontSize: 25,
+ },
+ xAxis: {
+ type: "category",
+ data: pageData.nclChart.xAxis,
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: { color: "#2C3E50" },
+ },
+ axisTick: { show: false },
+ axisLabel: {
+ color: "#B7C9E2",
+ fontSize: 25,
+ },
+ },
+ yAxis: {
+ type: "value",
+ max: 500,
+ splitNumber: 5,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: {
+ color: "#B7C9E2",
+ fontSize: 25,
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.15)",
+ type: "dashed",
},
},
- xAxis: {
- type: "category",
- data: pageData.nclChart.xAxis,
- boundaryGap: false,
- axisLine: {
- lineStyle: { color: "#2C3E50" },
- },
- axisTick: { show: false },
- axisLabel: {
- color: "#B7C9E2",
- fontSize: 25,
- },
- },
- yAxis: {
- type: "value",
- max: 500,
- splitNumber: 5,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: {
- color: "#B7C9E2",
- fontSize: 25,
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.15)",
- type: "dashed",
+ },
+ series: [
+ {
+ name: "实际小时排泥量",
+ type: "line",
+ smooth: true,
+ symbol: "none",
+ lineStyle: { normal: { width: 2 } },
+ itemStyle: { normal: { color: "#46F2FF" } },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
+ { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
+ ]),
+ opacity: 1,
},
},
+ data: nclData,
},
- series: [
- {
- name: "实际小时排泥量",
- type: "line",
- smooth: true,
- symbol: "none",
- lineStyle: { normal: { width: 2 } },
- itemStyle: { normal: { color: "#46F2FF" } },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
- { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
- ]),
- opacity: 1,
- },
- },
- data: nclData,
- },
- ],
- };
- nclChart.setOption(nclOption);
- window.addEventListener("resize", function () {
- nclChart.resize();
- });
+ ],
+ };
+ nclChart.setOption(nclOption);
+ window.addEventListener("resize", function () {
+ nclChart.resize();
+ });
}
-
+
// 质量图表
function initQualityChart() {
var qualityDom = document.getElementById("quality-chart");
if (!qualityDom) return;
var qualityChart = echarts.init(qualityDom);
var qualityData = pageData.qualityChart.data;
- var qualityOption = {
- backgroundColor: "transparent",
- grid: {
- left: 60,
- right: 40,
- top: 40,
- bottom: 40,
+ var qualityOption = {
+ backgroundColor: "transparent",
+ grid: {
+ left: 60,
+ right: 40,
+ top: 40,
+ bottom: 40,
+ },
+ legend: {
+ data: ["水质量"],
+ right: 10,
+ top: 0,
+ textStyle: {
+ color: "#9BE8FF",
+ fontSize: 25,
},
- legend: {
- data: ["水质量"],
- right: 10,
- top: 0,
- textStyle: {
- color: "#9BE8FF",
- fontSize: 25,
+ },
+ xAxis: {
+ type: "category",
+ data: pageData.qualityChart.xAxis,
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: { color: "#2C3E50" },
+ },
+ axisTick: { show: false },
+ axisLabel: {
+ color: "#B7C9E2",
+ fontSize: 25,
+ },
+ },
+ yAxis: {
+ type: "value",
+ max: 25,
+ splitNumber: 5,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: {
+ color: "#B7C9E2",
+ fontSize: 25,
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.15)",
+ type: "dashed",
},
},
- xAxis: {
- type: "category",
- data: pageData.qualityChart.xAxis,
- boundaryGap: false,
- axisLine: {
- lineStyle: { color: "#2C3E50" },
- },
- axisTick: { show: false },
- axisLabel: {
- color: "#B7C9E2",
- fontSize: 25,
- },
- },
- yAxis: {
- type: "value",
- max: 25,
- splitNumber: 5,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: {
- color: "#B7C9E2",
- fontSize: 25,
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.15)",
- type: "dashed",
+ },
+ series: [
+ {
+ name: "水质量",
+ type: "line",
+ smooth: true,
+ symbol: "none",
+ lineStyle: { normal: { width: 2 } },
+ itemStyle: { normal: { color: "#46F2FF" } },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
+ { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
+ ]),
+ opacity: 1,
},
},
+ data: qualityData,
},
- series: [
- {
- name: "水质量",
- type: "line",
- smooth: true,
- symbol: "none",
- lineStyle: { normal: { width: 2 } },
- itemStyle: { normal: { color: "#46F2FF" } },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
- { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
- ]),
- opacity: 1,
- },
- },
- data: qualityData,
- },
- ],
- };
- qualityChart.setOption(qualityOption);
- window.addEventListener("resize", function () {
- qualityChart.resize();
- });
+ ],
+ };
+ qualityChart.setOption(qualityOption);
+ window.addEventListener("resize", function () {
+ qualityChart.resize();
+ });
}
diff --git a/src/main/webapp/jsp/visual/newSourceGISPage.jsp b/src/main/webapp/jsp/visual/newSourceGISPage.jsp
index fb9ff451..59acd080 100644
--- a/src/main/webapp/jsp/visual/newSourceGISPage.jsp
+++ b/src/main/webapp/jsp/visual/newSourceGISPage.jsp
@@ -35,7 +35,7 @@ pageEncoding="UTF-8"%>
position: absolute;
top: 20px;
left: 20px;
- z-index: 1000;
+ z-index: 999;
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 5px;
@@ -650,9 +650,9 @@ pageEncoding="UTF-8"%>
管长(m) |
起点埋深(m) |
终点埋深(m) |
- 起点地面高程(m) |
- 终点地面高程(m) |
- 管线内底标高(m) |
+ 高程(m) |
+ 终点高程(m) |
+ 图层 |
@@ -1110,7 +1110,7 @@ pageEncoding="UTF-8"%>
map.addEventListener("zoomstart", function(e) {
var newZoom = e.zoom;
console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
- if (newZoom < minZoomLevel) {
+ if (newZoom
// var mousePosition = new T.Control.MousePosition({position: T_ANCHOR_BOTTOM_RIGHT});
// map.addControl(mousePosition);
- // Data Containers
- var sources = [];
- var pumpStations = [];
- var companies = [];
- var wells = [];
- var pipelines = [];
- var plans = [];
- var records = [];
- var markers = [];
-
- // 获取上下文路径
+ // ==================== 统一数据管理 ====================
var contextPath = "<%=request.getContextPath()%>";
+ var markers = [];
+ var currentPulse = null;
- // 真实API请求函数
- function apiRequest(url, params) {
- console.log("API Request:", contextPath + url, params);
- return new Promise(function (resolve, reject) {
- $.ajax({
- url: contextPath + url,
- type: "POST",
- data: params || {},
- success: function (data) {
- console.log("API Response:", url, data);
- resolve(data);
- },
- error: function (xhr, status, error) {
- console.error("API Request Error:", url, error);
- reject(error);
- },
- });
- });
- }
-
- // Mock API Function (保留用于没有真实接口的数据)
- function mockApiRequest(url, params) {
- return new Promise(function (resolve, reject) {
- setTimeout(function () {
- console.log("API Request:", url, params);
- if (url === "/api/sewage/list") {
- resolve([
- {
- id: 1,
- name: "金山水卫污水厂",
- lng: 121.345,
- lat: 30.725,
- status: 0,
- address: "上海金山区金山水卫污水厂",
- inFlow: 4774,
- outFlow: 4536,
- designCapacity: 10,
- time: "02-25 17:24",
- },
- ]);
- } else if (url === "/api/pump/list") {
- resolve([])} else if (url === "/api/company/list") {
- // Re-generate companies data here or move it inside
- var comps = [];
- // for (var i = 1; i <= 10; i++) {
- // comps.push({
- // id: i,
- // code: "C" + (1000 + i),
- // name: "企业" + i,
- // address: "金山区某工业园路" + i + "号",
- // plantCode: "P" + (Math.floor(Math.random() * 2) + 1),
- // dischargeCode: "D" + (100 + i),
- // discharge: (Math.random() * 500 + 100).toFixed(2),
- // dischargePoint: "点位" + i,
- // lng: 121.3 + Math.random() * 0.1,
- // lat: 30.7 + Math.random() * 0.1,
- // });
- // }
- resolve(comps);
- } else if (url === "/api/well/list") {
- var wls = [];
- // wls = wls.map(function (item) {
- // return {
- // id: item.id,
- // name: item.name,
- // code: item.name,
- // pipeName: "",
- // pipeCode: "",
- // depth: item.depth,
- // nature: "",
- // attachment: "",
- // bottomElev: item.bottomElev,
- // lng: item.lng,
- // lat: item.lat,
- // mapLng: item.mapLng,
- // mapLat: item.mapLat,
- // road: "",
- // town: "",
- // zone: "",
- // surveyor: "",
- // angle: "",
- // calLng: "",
- // calLat: "",
- // spec: item.spec,
- // groundElev: item.groundElev,
- // };
- // });
- resolve(wls);
- } else if (url === "/api/plan/list") {
- resolve([])
- }else if (url === "/api/record/list") {
- resolve([])
- } else {
- reject("Unknown API Endpoint");
- }
- }, 500); // Simulate network delay
- });
- }
-
- // 加载企业数据（排污源）
- // 接口字段参考 Sewage 实体类和 sewageList.jsp
- function loadCompanyData() {
- console.log("=== loadCompanyData 函数开始执行 ===");
- return apiRequest("/sparepart/sewage/getList.do", {
- page: 1,
- rows: 50,
- sort: "id",
- order: "asc",
- unitId:'0533JS',
- // int=&unitId=0533JS&processSectionId=&_=1772719506160
- })
- .then(function (data) {
- console.log("=== loadCompanyData then 回调执行, data:", data);
-
- var dataList = data;
- if (typeof data === "string") {
- try {
- dataList = JSON.parse(data);
- } catch (e) {
- console.error("解析泵站数据失败:", e);
- dataList = {};
+ // 数据配置：统一管理所有Tab的数据源、表格、转换逻辑
+ var dataConfig = {
+ sewage: {
+ data: [],
+ loaded: false,
+ api: { url: '/api/sewage/list', mock: true },
+ tableBody: 'sewage-table-body',
+ icon: 'icon_wsc.png',
+ transform: function(item, idx) {
+ return {
+ id: item.id,
+ name: item.name,
+ lng: item.lng,
+ lat: item.lat,
+ status: item.status,
+ address: item.address,
+ inFlow: item.inFlow,
+ outFlow: item.outFlow,
+ designCapacity: item.designCapacity,
+ time: item.time
+ };
+ }
+ },
+ pump: {
+ data: [],
+ loaded: false,
+ api: { url: '/user/processSection/getProcessSection4Select.do', mock: false, params: { companyId: 'JSBZ' } },
+ tableBody: 'pump-table-body',
+ icon: 'icon_bz.png',
+ transform: function(item, idx) {
+ return {
+ id: item.id || 'pump_' + idx,
+ name: item.text || item.name || '',
+ code: item.id || '',
+ level: '-',
+ flow: '-',
+ status: '-',
+ time: '-',
+ lng: 121.32 + idx * 0.01,
+ lat: 30.76 - idx * 0.005
+ };
+ }
+ },
+ company: {
+ data: [],
+ loaded: false,
+ api: { url: '/sparepart/sewage/getList.do', mock: false, params: { page: 1, rows: 1000, sort: 'id', order: 'asc', unitId: '0533JS' } },
+ tableBody: 'company-table-body',
+ icon: 'icon_qy.png',
+ transform: function(item, idx) {
+ var lng = null, lat = null;
+ if (item.longitudeLatitude) {
+ var coords = String(item.longitudeLatitude).split(',');
+ if (coords.length >= 2) {
+ lng = parseFloat(coords[0]);
+ lat = parseFloat(coords[1]);
+ } else if (coords.length === 1) {
+ lng = parseFloat(coords[0]);
}
}
- // 接口返回格式: {total: xxx, rows: [...]}
- // 每行数据结构: {id, name, address, company: {...}, processSection: {...}, ...}
- var list = dataList.rows || [];
- console.log(
- "企业接口返回数据条数:",
- list.length,
- "第一条数据:",
- list[0],
- );
- if (!list || list.length === 0) {
- console.error("!!! 企业接口返回数据为空!");
- return [];
+ if ((!lng || !lat) && item.company) {
+ lng = lng || item.company.longitude;
+ lat = lat || item.company.latitude;
}
- companies = list.map(function (item, idx) {
- // item 是每行数据本身，包含 name, address, contractNumber 等
- // item.company 是所属区域信息
- // item.processSection 是所属泵站信息
-
- // 解析经纬度 (格式: "经度" 或 "经度,纬度")
- var lng = null,
- lat = null;
- console.log("[企业" + idx + "] " + item.name + " 经纬度原始值:", item.longitudeLatitude);
- if (item.longitudeLatitude) {
- var coords = String(item.longitudeLatitude).split(",");
- if (coords.length >= 2) {
- lng = parseFloat(coords[0]);
- lat = parseFloat(coords[1]);
- } else if (coords.length === 1) {
- lng = parseFloat(coords[0]);
- }
- }
- // 如果经纬度不完整，从 company 对象获取
- if ((!lng || !lat) && item.company) {
- lng = lng || item.company.longitude;
- lat = lat || item.company.latitude;
- console.log("[企业" + idx + "] 从 company 对象获取经纬度:", lng, lat);
- }
- console.log("[企业" + idx + "] 最终经纬度:", lng, lat);
-
- // 如果经纬度仍然为空，使用默认位置（金山区范围）
- if (!lng || !lat) {
- lng = 121.3 + idx * 0.01;
- lat = 30.7 + idx * 0.005;
- console.warn("[企业" + idx + "] " + item.name + " 缺少经纬度，使用默认位置:", lng, lat);
- }
- return {
- id: item.id,
- // 合同编号
- contractNumber: item.contractNumber || "",
- // 公司名称
- name: item.name || "",
- // 地址
- address: item.address || "",
- // 所属区域 (company.name)
- areaName: item.company ? item.company.name || "" : "",
- // 所属泵站ID
- processSectionId: item.processSectionId || "",
- // 所属泵站名称 (processSection为null时显示空)
- processSectionName: item.processSection
- ? item.processSection.name || ""
- : "",
- // 排污许可证编号
- permitNum: item.permitNum || "",
- // 排放编号
- ventNum: item.ventNum || "",
- // 所属行业
- trade: item.trade || "",
- // 实际日排量(吨/天)
- displacement: item.displacement
- ? item.displacement + "吨/天"
- : "-",
- // 统一社会信用代码
- societyNumber: item.societyNumber || "",
- // 管网所有权单位
- city: item.city || "",
- // 联系人
- username: item.username || "",
- // 电话
- phone: item.phone || "",
- // 经纬度
- longitudeLatitude: item.longitudeLatitude || "",
- // 已关联点位
- point: item._point ? "是" : "否",
- // 已录入数据
- input: item._input ? "是" : "否",
- // 地图坐标
- lng: lng,
- lat: lat,
- // 保留原始数据
- _raw: item,
- };
- });
- console.log("企业数据处理后条数:", companies.length);
- return companies;
- })
- .catch(function(err) {
- console.error('加载企业数据失败:', err);
- return [];
- });
- }
-
- // 加载管道数据
- function loadPipelineData() {
- console.log("=== loadPipelineData 函数开始执行 ===");
- return apiRequest("/pipeline/pipelineData/getList.do", {
- page: 1,
- rows: 1000,
- sort: "id",
- order: "desc",
- })
- .then(function (data) {
- console.log("管道接口返回数据:", data);
- var dataList = data;
- if (typeof data === "string") {
- try {
- dataList = JSON.parse(data);
- } catch (e) {
- console.error("解析泵站数据失败:", e);
- dataList = {};
- }
+ if (!lng || !lat) {
+ lng = 121.3 + idx * 0.01;
+ lat = 30.7 + idx * 0.005;
}
+ return {
+ id: item.id,
+ contractNumber: item.contractNumber || '',
+ name: item.name || '',
+ address: item.address || '',
+ areaName: item.company ? item.company.name || '' : '',
+ processSectionId: item.processSectionId || '',
+ processSectionName: item.processSection ? item.processSection.name || '' : '',
+ permitNum: item.permitNum || '',
+ trade: item.trade || '',
+ displacement: item.displacement ? item.displacement + '吨/天' : '-',
+ point: item._point ? '是' : '否',
+ input: item._input ? '是' : '否',
+ lng: lng,
+ lat: lat
+ };
+ }
+ },
+ pipeline: {
+ data: [],
+ loaded: false,
+ // 使用 geo.json 静态文件（ArcGIS JSON 格式）
+ api: { url: '/jsp/z_bigScreen/geo.json', isStatic: true },
+ tableBody: 'pipeline-table-body',
+ icon: 'icon_gd.png',
+ // 管线数据转换：适配 geo.json 的 ArcGIS JSON 格式
+ // geo.json 结构: { features: [{ attributes: {...}, geometry: { paths: [...] } }] }
+ transform: function(feature) {
+ var attr = feature.attributes || {};
+ var geom = feature.geometry || {};
+ var paths = geom.paths || null;
- var list = dataList.rows || [];
- pipelines = list.map(function (item) {
- return {
- id: item.id,
- name: item.pipelineName || "-",
- diameter: item.diameterMm || "-",
- length: item.lengthM || "-",
- startDepth: item.startBurialDepthM || "-",
- endDepth: item.endBurialDepthM || "-",
- startElev: item.startGroundElevationM || "-",
- endElev: item.endGroundElevationM || "-",
- invertElev: item.pipelineInvertElevationM || "-",
- // 管道暂无坐标信息
- path: null,
- };
- });
- console.log("管道数据处理后条数:", pipelines.length);
- return pipelines;
- })
- .catch(function (err) {
- console.error("加载管道数据失败:", err);
- return [];
- });
- }
+ // 计算管线长度（Shape_Leng 是经纬度差值，转换为米约乘以 111000）
+ var lengthM = attr.Shape_Leng ? (attr.Shape_Leng * 111000).toFixed(2) : '-';
- // 加载泵站数据（工艺段）
- function loadPumpData() {
- return apiRequest("/user/processSection/getProcessSection4Select.do", {
- companyId: "JSBZ", // 根据排污源信息页面传参
- })
- .then(function (data) {
- console.log("泵站接口返回原始数据:", data, "类型:", typeof data);
- // 确保data是数组
- var dataList = data;
- if (typeof data === "string") {
- try {
- dataList = JSON.parse(data);
- } catch (e) {
- console.error("解析泵站数据失败:", e);
- dataList = [];
- }
- }
- // 接口返回格式: [{id: xxx, text: xxx}, ...] 或 [{text: xxx}, ...]
- pumpStations = (dataList || []).map(function (item, index) {
- return {
- id: item.id || "pump_" + index,
- name: item.text || item.name || "",
- code: item.id || "",
- level: "-",
- flow: "-",
- status: "-",
- time: "-",
- // 泵站暂无坐标信息，使用默认位置
- lng: 121.32 + index * 0.01,
- lat: 30.76 - index * 0.005,
- };
- });
- console.log("泵站数据处理后:", pumpStations);
- return pumpStations;
- })
- .catch(function (err) {
- console.error("加载泵站数据失败:", err);
- return [];
- });
- }
-
- // Initialize Data - 只加载默认Tab(污水厂)的数据
- function loadData() {
- // 初始加载污水厂数据
- mockApiRequest("/api/sewage/list")
- .then(function (data) {
- sources = data;
- initSewageTable();
- initMarkers("sewage");
- })
- .catch(function (err) {
- console.error("Failed to load sewage data:", err);
- });
- }
-
- // 数据加载状态标记
- var dataLoaded = {
- sewage: true, // 初始已加载
- pump: false,
- company: false,
- pipeline: false,
- well: false,
- plan: false,
- record: false,
+ return {
+ id: attr.FID,
+ name: '管线-' + attr.FID,
+ diameter: '-',
+ length: lengthM,
+ startDepth: '-',
+ endDepth: '-',
+ startElev: '-',
+ endElev: '-',
+ invertElev: '-',
+ elevation: attr.Elevation || 0,
+ color: attr.Color || 6,
+ layer: attr.Layer || 'WS_LINE',
+ paths: paths,
+ handle: attr.Handle,
+ lineWt: attr.LineWt,
+ shapeLeng: attr.Shape_Leng
+ };
+ }
+ }
};
- // 按Tab类型加载数据
- function loadTabData(type) {
- // 如果数据已加载，直接返回
- if (dataLoaded[type]) {
- return Promise.resolve();
- }
-
- var loadPromise;
-
- switch (type) {
- case "pump":
- loadPromise = loadPumpData().then(function (data) {
- console.log("loadTabData pump 接收数据:", data);
- pumpStations = data;
- console.log("pumpStations 赋值后:", pumpStations);
- initPumpTable();
- dataLoaded.pump = true;
- });
- break;
-
- case "company":
- loadPromise = loadCompanyData().then(function (data) {
- console.log("loadTabData company 接收数据:", data);
- companies = data;
- console.log("companies 赋值后:", companies);
- initCompanyTable();
- dataLoaded.company = true;
- });
- break;
-
- case "pipeline":
- loadPromise = loadPipelineData().then(function (data) {
- console.log("loadTabData pipeline 接收数据:", data);
- pipelines = data;
- initPipelineTable();
- dataLoaded.pipeline = true;
- });
- break;
-
- case "well":
- loadPromise = mockApiRequest("/api/well/list").then(
- function (data) {
- wells = data;
- initWellTable();
- dataLoaded.well = true;
+ // ==================== 统一API请求 ====================
+ function apiRequest(url, params, isMock, isStatic) {
+ return new Promise(function(resolve, reject) {
+ if (isMock) {
+ // Mock数据
+ setTimeout(function() {
+ if (url === '/api/sewage/list') {
+ resolve([{
+ id: 1, name: '金山水卫污水厂', lng: 121.345, lat: 30.725,
+ status: 0, address: '上海金山区金山水卫污水厂',
+ inFlow: 4774, outFlow: 4536, designCapacity: 10, time: '02-25 17:24'
+ }]);
+ } else {
+ resolve([]);
+ }
+ }, 100);
+ } else if (isStatic) {
+ // 静态 JSON 文件请求（GET）
+ $.ajax({
+ url: contextPath + url,
+ type: 'GET',
+ dataType: 'json',
+ success: function(data) {
+ resolve(data);
},
- );
- break;
-
- case "plan":
- loadPromise = mockApiRequest("/api/plan/list").then(
- function (data) {
- plans = data;
- initPlanTable();
- dataLoaded.plan = true;
+ error: function(xhr, status, error) {
+ console.error('静态文件加载失败:', url, error);
+ reject(error);
+ }
+ });
+ } else {
+ // 后端 API 请求（POST）
+ $.ajax({
+ url: contextPath + url,
+ type: 'POST',
+ data: params || {},
+ success: function(data) {
+ var result = data;
+ if (typeof data === 'string') {
+ try { result = JSON.parse(data); } catch(e) { result = {}; }
+ }
+ resolve(result);
},
- );
- break;
-
- case "record":
- loadPromise = mockApiRequest("/api/record/list").then(
- function (data) {
- records = data;
- initRecordTable();
- dataLoaded.record = true;
- },
- );
- break;
-
- default:
- return Promise.resolve();
- }
-
- return loadPromise.catch(function (err) {
- console.error("加载" + type + "数据失败:", err);
+ error: function(xhr, status, error) {
+ console.error('API Error:', url, error);
+ reject(error);
+ }
+ });
+ }
});
}
- // Call loadData for initial tab
- loadData();
+ // ==================== 统一数据加载 ====================
+ function loadData(type) {
+ var config = dataConfig[type];
+ if (!config || config.loaded) return Promise.resolve(config.data);
- function initMarkers(dataType) {
- // Close any open info window on the map
+ var api = config.api;
+ return apiRequest(api.url, api.params, api.mock, api.isStatic).then(function(res) {
+ // 根据数据源类型提取数据列表
+ var list = [];
+ if (api.isStatic && res.features) {
+ // 静态 JSON 文件（ArcGIS JSON 格式）
+ list = res.features;
+ } else if (res.rows) {
+ // 后端 API 返回格式
+ list = res.rows;
+ } else if (Array.isArray(res)) {
+ // 直接返回数组
+ list = res;
+ }
+ config.data = list.map(config.transform);
+ config.loaded = true;
+ console.log('[' + type + '] 加载完成:', config.data.length, '条');
+ return config.data;
+ }).catch(function(err) {
+ console.error('[' + type + '] 加载失败:', err);
+ return [];
+ });
+ }
+
+ // ==================== 统一表格渲染 ====================
+ var tableRenderers = {
+ sewage: function(data) {
+ if (!data.length) return ' | | 暂无数据 |
';
+ var html = '';
+ data.forEach(function(item, i) {
+ var statusText = item.status === 0 ? '在线' : item.status === 1 ? '告警' : '离线';
+ html += '' +
+ '| ' + (i+1) + ' | ' +
+ ' | ' +
+ '' + item.name + ' | ' +
+ '' + (item.outFlow || 0) + 'm³/h | ' +
+ '' + (item.inFlow || 0) + 'm³/h | ' +
+ '' + statusText + ' | ' +
+ '' + (item.designCapacity || '-') + ' | ' +
+ '' + (item.address || '-') + ' | ' +
+ '' + (item.time || '-') + ' |
';
+ });
+ return html;
+ },
+ pump: function(data) {
+ if (!data.length) return '| 暂无数据 |
';
+ var html = '';
+ data.forEach(function(item, i) {
+ html += '' +
+ '| ' + (i+1) + ' | ' +
+ '' + (item.name || '-') + ' | ' +
+ '' + (item.level || '-') + ' | ' +
+ '' + (item.flow || '-') + ' | ' +
+ '' + (item.status || '-') + ' | ' +
+ '' + (item.time || '-') + ' |
';
+ });
+ return html;
+ },
+ company: function(data) {
+ if (!data.length) return '| 暂无数据 |
';
+ var html = '';
+ data.forEach(function(item, i) {
+ html += '' +
+ '| ' + (i+1) + ' | ' +
+ '' + (item.contractNumber || '-') + ' | ' +
+ '' + (item.name || '-') + ' | ' +
+ '' + (item.address || '-') + ' | ' +
+ '' + (item.areaName || '-') + ' | ' +
+ '' + (item.processSectionName || '-') + ' | ' +
+ '' + (item.permitNum || '-') + ' | ' +
+ '' + (item.trade || '-') + ' | ' +
+ '' + (item.displacement || '-') + ' | ' +
+ '' + (item.point || '-') + ' | ' +
+ '' + (item.input || '-') + ' |
';
+ });
+ return html;
+ },
+ pipeline: function(data) {
+ if (!data.length) return '| 暂无数据 |
';
+ var html = '', totalLength = 0;
+ data.forEach(function(item, i) {
+ html += '' +
+ ' | ' +
+ '' + (i+1) + ' | ' +
+ '' + (item.name || '-') + ' | ' +
+ '' + (item.diameter || '-') + ' | ' +
+ '' + (item.length || '-') + ' | ' +
+ '' + (item.startDepth || '-') + ' | ' +
+ '' + (item.endDepth || '-') + ' | ' +
+ '' + (item.elevation || 0).toFixed(2) + ' | ' +
+ '- | ' +
+ '' + (item.layer || '-') + ' |
';
+ totalLength += parseFloat(item.length) || 0;
+ });
+ setTimeout(function() {
+ var d = document.getElementById('pipe-total-diameter');
+ var l = document.getElementById('pipe-total-length');
+ if (d) d.innerText = '--';
+ if (l) l.innerText = totalLength.toFixed(2);
+ }, 0);
+ return html;
+ }
+ };
+
+ function renderTable(type) {
+ var config = dataConfig[type];
+ var tbody = document.getElementById(config.tableBody);
+ if (!tbody) return;
+ var renderer = tableRenderers[type];
+ if (renderer) {
+ tbody.innerHTML = renderer(config.data);
+ }
+ }
+
+ // ==================== 初始化入口 ====================
+ function initPage() {
+ // 加载默认Tab数据
+ loadData('sewage').then(function() {
+ renderTable('sewage');
+ initMarkers('sewage');
+ });
+ }
+ initPage();
+
+ // ==================== 统一地图标记管理 ====================
+ function initMarkers(type) {
map.closeInfoWindow();
-
- // Clear existing markers
- markers.forEach(function (m) {
+ // 清除现有标记
+ markers.forEach(function(m) {
if (m.marker) map.removeOverLay(m.marker);
if (m.label) map.removeOverLay(m.label);
- if (m.infoWindow) {
- if (m.marker.closeInfoWindow) m.marker.closeInfoWindow();
- }
});
markers = [];
if (currentPulse) {
map.removeOverLay(currentPulse);
currentPulse = null;
}
+ // 清除管线覆盖物
+ clearPipelines();
- var type = dataType || "sewage";
- var layers = [];
+ var config = dataConfig[type];
+ if (!config || !config.data.length) return;
- if (type === "sewage") layers.push({ type: "sewage", data: sources });
- else if (type === "pump")
- layers.push({ type: "pump", data: pumpStations });
- else if (type === "company") {
- console.log("[initMarkers] 准备创建企业标记, companies 数据:", companies);
- layers.push({ type: "company", data: companies });
+ // 管线类型使用 Polyline 渲染
+ if (type === 'pipeline') {
+ renderPipelines(config.data);
+ return;
}
- else if (type === "well") layers.push({ type: "well", data: wells });
- else if (type === "pipeline") {
- layers.push({ type: "pipeline", data: pipelines });
- layers.push({ type: "well", data: wells });
- }
- console.log("[initMarkers] type:", type, "layers:", layers);
- layers.forEach(function (layer) {
- var currentType = layer.type;
- console.log("currentType", currentType);
- if (layer.data && layer.data.length > 0) {
- layer.data.forEach(function (item) {
- // Handle Pipelines (Polyline)
- if (currentType === "pipeline") {
- if (!item.path || item.path.length < 2) return;
- var points = item.path.map(function (p) {
- return new T.LngLat(p[0], p[1]);
- });
- var polyline = new T.Polyline(points, {
- color: "blue",
- weight: 4,
- opacity: 0.8,
- });
- map.addOverLay(polyline);
+ // 其他类型使用 Marker 渲染
+ config.data.forEach(function(item) {
+ if (!item.lng || !item.lat) return;
- var infoContent =
- "";
- infoContent +=
- "管线 #" +
- item.id +
- "
";
- infoContent += "管径: " + item.diameter + "mm
";
- infoContent += "长度: " + item.length + "m
";
- infoContent += "
";
+ var point = new T.LngLat(item.lng, item.lat);
+ var icon = new T.Icon({
+ iconUrl: contextPath + '/IMG/' + config.icon,
+ iconSize: new T.Point(18, 18),
+ iconAnchor: new T.Point(15, 15)
+ });
+ var marker = new T.Marker(point, { icon: icon });
+ map.addOverLay(marker);
- var infoWindow = new T.InfoWindow(infoContent, {
- offset: new T.Point(0, 0),
- });
- polyline.addEventListener("click", function (e) {
- var point = e.lnglat; // Get click position
- map.openInfoWindow(infoWindow, point);
- });
+ // 标签
+ var labelColor = type === 'sewage' ? (item.status === 1 ? '#FFCC00' : item.status === 2 ? 'red' : 'green') :
+ type === 'pump' ? 'blue' : type === 'company' ? '#9932CC' : '#666';
+ var labelContent = type === 'company' ?
+ '' +
+ '
' + (item.contractNumber || '-') + '
' +
+ '
' + (item.name || '-') + '
' +
+ '
' + (item.displacement || '-') + '
' + item.name + '
';
- markers.push({
- marker: polyline,
- data: item,
- infoWindow: infoWindow,
- label: null,
- });
- return;
- }
+ var label = new T.Label({ text: labelContent, position: point, offset: new T.Point(-30, -30) });
+ label.setBackgroundColor('transparent');
+ label.setBorderLine(0);
+ map.addOverLay(label);
- // Use mapLng/mapLat if available (for wells with projected coords in table), otherwise standard lng/lat
- var lng = item.mapLng || item.lng;
- var lat = item.mapLat || item.lat;
-
- console.log("[initMarkers] " + currentType + " - " + item.name + " 经纬度:", lng, lat);
- if (!lng || !lat) {
- console.warn("[initMarkers] 跳过 " + item.name + " 无有效经纬度");
- return;
- }
-
- var point = new T.LngLat(lng, lat);
-
- // Create Marker
- var marker;
- console.log("currentType", currentType);
- if (currentType === "well") {
- var icon = new T.Icon({
- iconUrl: "<%=request.getContextPath()%>/IMG/wsgj.png",
- iconSize: new T.Point(10, 10),
- iconAnchor: new T.Point(15, 15),
- });
- marker = new T.Marker(point, { icon: icon });
- } else if (currentType === "pipeline-node") {
- var icon = new T.Icon({
- iconUrl: "<%=request.getContextPath()%>/IMG/icon_gd.png",
- iconSize: new T.Point(18, 18),
- iconAnchor: new T.Point(15, 15),
- });
- marker = new T.Marker(point, { icon: icon });
- } else if (currentType === "pump") {
- var icon = new T.Icon({
- iconUrl: "<%=request.getContextPath()%>/IMG/icon_bz.png",
- iconSize: new T.Point(18, 18),
- iconAnchor: new T.Point(15, 15),
- });
- marker = new T.Marker(point, { icon: icon });
- } else if (currentType === "company") {
- var icon = new T.Icon({
- iconUrl: "<%=request.getContextPath()%>/IMG/icon_qy.png",
- iconSize: new T.Point(18, 18),
- iconAnchor: new T.Point(15, 15),
- });
- marker = new T.Marker(point, { icon: icon });
- console.log("[initMarkers] 创建企业标记成功:", item.name, "位置:", lng, lat);
- } else if (currentType === "sewage") {
- var icon = new T.Icon({
- iconUrl: "<%=request.getContextPath()%>/IMG/icon_wsc.png",
- iconSize: new T.Point(18, 18),
- iconAnchor: new T.Point(15, 15),
- });
- marker = new T.Marker(point, { icon: icon });
- } else {
- marker = new T.Marker(point);
- }
- map.addOverLay(marker);
-
- var labelColor = "green";
- // Simple status logic for demo
- if (currentType === "sewage") {
- if (item.status === 1) labelColor = "#FFCC00";
- else if (item.status === 2) labelColor = "red";
- } else if (currentType === "pump") {
- labelColor = "blue";
- } else if (currentType === "company") {
- labelColor = "#9932CC";
- } else if (currentType === "well") {
- labelColor = "#666";
- }
-
- if (currentType !== "well") {
- // Set label
- var labelContent;
- if (currentType === "company") {
- // 企业标签显示：编号、名称、日排放量
- labelContent =
- "" +
- "
" + (item.contractNumber|| "-") + "
" +
- "
" + (item.name || "-") + "
" +
- "
" + (item.displacement || "-") + "
" +
- "
" +
- item.name +
- "
";
- }
-
- var label = new T.Label({
- text: labelContent,
- position: point,
- offset: new T.Point(-30, -30),
- // offset: new T.Point(0, 0),
- });
- label.setBackgroundColor("transparent");
- label.setBorderLine(0);
- map.addOverLay(label);
- }
-
- // InfoWindow Content Construction
- var infoContent =
- "";
- infoContent +=
- "" +
- item.name +
- "
";
-
- if (currentType === "sewage") {
- var sewageStatusText =
- item.status === 0
- ? "在线"
- : item.status === 1
- ? "告警"
- : "离线";
- infoContent += "出口流量: " + (item.outFlow || 0) + "m³/h
";
- infoContent += "入口流量: " + (item.inFlow || 0) + "m³/h
";
- infoContent += "状态: " + sewageStatusText + "
";
- infoContent +=
- "设计能力: " + (item.designCapacity || "-") + "万吨/天
";
- // infoContent += "详细地址: " + (item.address || "-") + "
";
- // infoContent += "监测时间: " + (item.time || "-") + "
";
- } else if (currentType === "pump") {
- infoContent += "泵站名称: " + item.name + "
";
- infoContent += "流量: " + item.flow + "m³/h
";
- infoContent += "监测时间: " + item.time + "
";
- } else if (currentType === "company") {
- infoContent += "合同编号: " + (item.contractNumber || "-") + "
";
- infoContent += "企业名称: " + (item.name || "-") + "
";
- infoContent += "日排放量: " + (item.displacement || "-") + "
";
- } else if (currentType === "well") {
- infoContent += "深度: " + item.depth + "
";
- infoContent += "规格: " + item.spec + "
";
- }
- infoContent += "
";
-
- var infoWindow = new T.InfoWindow(infoContent, {
- offset: new T.Point(0, 0),
- });
-
- // if (currentType === 'well') {
- // marker.addEventListener('click', function() {
- // document.getElementById('well_id').value = item.id;
- // document.getElementById('well_name').value = item.name || '';
- // document.getElementById('well_code').value = item.code || '';
- // document.getElementById('well_pipe_name').value = item.pipeName || '';
- // document.getElementById('well_pipe_code').value = item.pipeCode || '';
- // document.getElementById('well_depth').value = item.depth || '';
- // document.getElementById('well_nature').value = item.nature || '';
- // document.getElementById('well_attachment').value = item.attachment || '';
- // document.getElementById('well_bottom_elev').value = item.bottomElev || '';
- // document.getElementById('well_lng').value = item.lng || '';
- // document.getElementById('well_lat').value = item.lat || '';
- // document.getElementById('well_road').value = item.road || '';
- // document.getElementById('well_town').value = item.town || '';
- // document.getElementById('well_zone').value = item.zone || '';
- // document.getElementById('well_surveyor').value = item.surveyor || '';
- // document.getElementById('well_angle').value = item.angle || '';
- // document.getElementById('well_cal_lng').value = item.calLng || '';
- // document.getElementById('well_cal_lat').value = item.calLat || '';
- // document.getElementById('well_spec').value = item.spec || '';
- // document.getElementById('well_ground_elev').value = item.groundElev || '';
-
- // $('#wellEditModal').modal('show');
- // });
- // } else {
- marker.addEventListener("click", function () {
- this.openInfoWindow(infoWindow);
- });
- // }
-
- markers.push({
- marker: marker,
- data: item,
- infoWindow: infoWindow,
- label: label,
- });
- });
+ // 信息窗口
+ var infoHtml = '' + item.name + '
';
+ if (type === 'sewage') {
+ infoHtml += '出口流量: ' + (item.outFlow || 0) + 'm³/h
入口流量: ' + (item.inFlow || 0) + 'm³/h
状态: ' + (item.status === 0 ? '在线' : item.status === 1 ? '告警' : '离线') + '
设计能力: ' + (item.designCapacity || '-') + '万吨/天';
+ } else if (type === 'company') {
+ infoHtml += '合同编号: ' + (item.contractNumber || '-') + '
企业名称: ' + (item.name || '-') + '
日排放量: ' + (item.displacement || '-');
+ } else if (type === 'pump') {
+ infoHtml += '流量: ' + (item.flow || '-') + 'm³/h';
}
+ infoHtml += '
';
+
+ var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
+ marker.addEventListener('click', function() { this.openInfoWindow(infoWindow); });
+
+ markers.push({ marker: marker, label: label, data: item, infoWindow: infoWindow });
});
}
- // Selection Logic
- var currentPulse = null; // Track the pulse overlay
+ // ==================== 管线渲染（参考 geocopy.html）====================
+ // 存储管线覆盖物，用于清除
+ var pipelineOverlays = [];
+ var pipelineDataLoaded = false; // 标记管线数据是否已加载
- // 通用的选择标记函数（带脉冲动画效果）
+ function clearPipelines() {
+ pipelineOverlays.forEach(function(overlay) {
+ map.removeOverLay(overlay);
+ });
+ pipelineOverlays = [];
+ }
+
+ function renderPipelines(pipelines) {
+ // 先清除之前的管线
+ clearPipelines();
+
+ pipelines.forEach(function(item) {
+ if (!item.paths || !item.paths.length) return;
+
+ // ArcGIS JSON 格式: paths 是数组，每个元素是一条路径 [[lng,lat], [lng,lat], ...]
+ // 一条管线可能有多条路径（分支）
+ var pathsArray = item.paths;
+
+ // 如果 paths 的第一个元素不是数组，说明是单路径格式，需要包装
+ if (!Array.isArray(pathsArray[0]) || !Array.isArray(pathsArray[0][0])) {
+ pathsArray = [pathsArray];
+ }
+
+ // 按颜色区分管线（参考 geocopy.html 的颜色逻辑）
+ // Color === 6 为蓝色，其他为红色
+ var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
+
+ // 渲染每条路径
+ pathsArray.forEach(function(pathCoords) {
+ if (!pathCoords || pathCoords.length < 2) return;
+
+ var points = pathCoords.map(function(p) {
+ return new T.LngLat(p[0], p[1]);
+ });
+
+ var polyline = new T.Polyline(points, {
+ color: lineColor,
+ weight: 3,
+ opacity: 0.8
+ });
+ map.addOverLay(polyline);
+ pipelineOverlays.push(polyline);
+
+ // 信息窗口
+ var infoHtml = '' +
+ '管线 #' + item.id + '
' +
+ '名称: ' + (item.name || '-') + '
' +
+ '管长: ' + (item.length || '-') + ' m
' +
+ '高程: ' + (item.elevation || 0).toFixed(2) + ' m
' +
+ // '图层: ' + (item.layer || '-') + '
' +
+ // '颜色: ' + (item.color === 6 ? '蓝色' : '红色') +
+ '
';
+
+ var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
+ polyline.addEventListener('click', function(e) {
+ map.openInfoWindow(infoWindow, e.lnglat);
+ });
+
+ markers.push({ marker: polyline, label: null, data: item, infoWindow: infoWindow });
+ });
+ });
+
+ console.log('[管线渲染] 完成，共渲染 ' + pipelineOverlays.length + ' 条管线段');
+ }
+
+ // ==================== 标记选择 ====================
function selectMarker(name, type) {
- var target = markers.find(function (m) {
- return m.data.name === name && (type ? m.data.type === type || m.marker._type === type : true);
+ var target = markers.find(function(m) { return m.data.name === name; });
+ if (!target) { console.warn('未找到标记:', name); return; }
+
+ map.panTo(target.marker.getLngLat());
+ target.marker.openInfoWindow(target.infoWindow);
+
+ if (currentPulse) map.removeOverLay(currentPulse);
+ var pulseLabel = new T.Label({
+ text: '',
+ position: target.marker.getLngLat(),
+ offset: new T.Point(-15, -15)
});
- if (target) {
- // 1. Center Map (Pan to target)
- map.panTo(target.marker.getLngLat());
-
- // 2. Open InfoWindow
- target.marker.openInfoWindow(target.infoWindow);
-
- // 3. Selection Effect - Dynamic Blue Pulse Circle at Marker Location
- if (currentPulse) {
- map.removeOverLay(currentPulse);
- }
-
- var pulseContent = "";
- var pulseLabel = new T.Label({
- text: pulseContent,
- position: target.marker.getLngLat(),
- offset: new T.Point(-15, -15), // Half of width/height (30px)
- });
- pulseLabel.setBackgroundColor("transparent");
- pulseLabel.setBorderLine(0);
- map.addOverLay(pulseLabel);
- currentPulse = pulseLabel;
-
- console.log("[selectMarker] 已定位到:", name, "类型:", type);
- } else {
- console.warn("[selectMarker] 未找到标记:", name, "类型:", type);
- }
+ pulseLabel.setBackgroundColor('transparent');
+ pulseLabel.setBorderLine(0);
+ map.addOverLay(pulseLabel);
+ currentPulse = pulseLabel;
}
- // 污水厂选择（保持兼容）
- function selectSource(name) {
- selectMarker(name, 'sewage');
- // Update Radio Button in List
- var radios = document.getElementsByName("sewage-select");
- if (radios.length > 0) {
- for (var i = 0; i < radios.length; i++) {
- if (radios[i].value === name) {
- radios[i].checked = true;
- break;
- }
- }
- }
- }
-
- // 泵站选择
- function selectPump(name) {
- selectMarker(name, 'pump');
- }
-
- // 企业选择
function selectCompany(index) {
- var item = companies[index];
- if (item && item.lng && item.lat) {
- // 先定位地图
- map.panTo(new T.LngLat(item.lng, item.lat));
- map.setZoom(15);
-
- // 查找并打开信息窗口
- var target = markers.find(function (m) {
- return m.data.name === item.name;
- });
- if (target) {
- // 打开信息窗口
- target.marker.openInfoWindow(target.infoWindow);
-
- // 显示脉冲动画效果
- if (currentPulse) {
- map.removeOverLay(currentPulse);
- }
-
- var pulseContent = "";
- var pulseLabel = new T.Label({
- text: pulseContent,
- position: target.marker.getLngLat(),
- offset: new T.Point(-15, -15),
- });
- pulseLabel.setBackgroundColor("transparent");
- pulseLabel.setBorderLine(0);
- map.addOverLay(pulseLabel);
- currentPulse = pulseLabel;
- }
- console.log("[selectCompany] 已定位到企业:", item.name);
- }
+ var item = dataConfig.company.data[index];
+ if (!item || !item.lng || !item.lat) return;
+ map.panTo(new T.LngLat(item.lng, item.lat));
+ map.setZoom(15);
+ selectMarker(item.name, 'company');
}
- function initSewageTable() {
- var sewagePlants = sources;
- var tbody = document.getElementById("sewage-table-body");
- var html = "";
- sewagePlants.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
- var statusText =
- item.status === 0 ? "在线" : item.status === 1 ? "告警" : "离线";
- html +=
- '';
- html += '| ' + (index + 1) + " | ";
- html +=
- ' | ';
- html +=
- '' +
- item.name +
- " | ";
- html += '' + (item.outFlow || 0) + "m³/h | ";
- html += '' + (item.inFlow || 0) + "m³/h | ";
- html += '' + statusText + " | ";
- html +=
- '' + (item.designCapacity || "-") + " | ";
- html += "" + (item.address || "-") + " | ";
- html += '' + (item.time || "-") + " | ";
- html += "
";
- });
- tbody.innerHTML = html;
- }
-
- function initPumpTable() {
- console.log("initPumpTable 被调用, pumpStations:", pumpStations);
- var tbody = document.getElementById("pump-table-body");
- console.log("tbody 元素:", tbody);
- if (!tbody) {
- console.error("找不到 pump-table-body 元素!");
+ // 选择管道并定位
+ function selectPipeline(index) {
+ var item = dataConfig.pipeline.data[index];
+ if (!item || !item.paths || !item.paths.length) {
+ console.warn('管道数据无效:', index);
return;
}
- var html = "";
- if (!pumpStations || pumpStations.length === 0) {
- console.warn("pumpStations 为空或长度为0");
- tbody.innerHTML =
- '| 暂无数据 |
';
- return;
+
+ // 计算管道中心点
+ var paths = item.paths;
+ // 如果是 ArcGIS JSON 格式，paths 是三维数组
+ if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
+ paths = paths[0];
}
- pumpStations.forEach(function (station, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
- html += '';
- html += '| ' + (index + 1) + " | ";
- html +=
- '' + (station.name || "-") + " | ";
- html += '' + (station.level || "-") + " | ";
- html += '' + (station.flow || "-") + " | ";
- html +=
- '' + (station.status || "-") + " | ";
- html += '' + (station.time || "-") + " | ";
- html += "
";
- });
- console.log("生成的表格HTML长度:", html.length);
- tbody.innerHTML = html;
- }
-
- function saveWellData() {
- var id = document.getElementById("well_id").value;
- var wellIndex = wells.findIndex(function (w) {
- return w.id == id;
+ // 计算所有点的中心
+ var sumLng = 0, sumLat = 0, count = 0;
+ paths.forEach(function(p) {
+ sumLng += p[0];
+ sumLat += p[1];
+ count++;
});
- if (wellIndex > -1) {
- // Update properties
- wells[wellIndex].name = document.getElementById("well_name").value;
- wells[wellIndex].code = document.getElementById("well_code").value;
- wells[wellIndex].pipeName =
- document.getElementById("well_pipe_name").value;
- wells[wellIndex].pipeCode =
- document.getElementById("well_pipe_code").value;
- wells[wellIndex].depth = document.getElementById("well_depth").value;
- wells[wellIndex].nature =
- document.getElementById("well_nature").value;
- wells[wellIndex].attachment =
- document.getElementById("well_attachment").value;
- wells[wellIndex].bottomElev =
- document.getElementById("well_bottom_elev").value;
- wells[wellIndex].lng = document.getElementById("well_lng").value;
- wells[wellIndex].lat = document.getElementById("well_lat").value;
- wells[wellIndex].road = document.getElementById("well_road").value;
- wells[wellIndex].town = document.getElementById("well_town").value;
- wells[wellIndex].zone = document.getElementById("well_zone").value;
- wells[wellIndex].surveyor =
- document.getElementById("well_surveyor").value;
- wells[wellIndex].angle = document.getElementById("well_angle").value;
- wells[wellIndex].calLng =
- document.getElementById("well_cal_lng").value;
- wells[wellIndex].calLat =
- document.getElementById("well_cal_lat").value;
- wells[wellIndex].spec = document.getElementById("well_spec").value;
- wells[wellIndex].groundElev =
- document.getElementById("well_ground_elev").value;
+ if (count === 0) return;
- // Update map coordinates if calibration values are provided
- var calLng = document.getElementById("well_cal_lng").value;
- var calLat = document.getElementById("well_cal_lat").value;
- if (calLng && calLat) {
- wells[wellIndex].mapLng = calLng;
- wells[wellIndex].mapLat = calLat;
- }
+ var centerLng = sumLng / count;
+ var centerLat = sumLat / count;
- // Re-render markers if currently on well tab
- // Check if current active tab is well tab
- if (
- document.getElementById("tab-well").classList.contains("active")
- ) {
- initMarkers("well");
- }
+ // 定位到管道中心
+ map.panTo(new T.LngLat(centerLng, centerLat));
+ map.setZoom(16);
- $("#wellEditModal").modal("hide");
+ // 高亮显示选中的管道
+ highlightPipeline(item);
- // Optional: Show success message
- // alert('保存成功！');
- }
+ console.log('[管道定位] ' + item.name + ', 中心: (' + centerLng.toFixed(6) + ', ' + centerLat.toFixed(6) + ')');
}
- // initMarkers() 和表格初始化在 loadData() 完成后调用
- // 不要在这里单独调用，否则会使用空数据
+ // 高亮显示管道
+ var highlightedPipeline = null;
+ function highlightPipeline(item) {
+ // 移除之前的高亮
+ if (highlightedPipeline) {
+ map.removeOverLay(highlightedPipeline);
+ highlightedPipeline = null;
+ }
- // 数据定义 (pipelines 和 wells) 已在 loadData() 中加载
- // 如果需要默认数据，请在 loadData() 的 mockApiRequest 中配置
+ if (!item.paths || !item.paths.length) return;
- // ---------------------------------------------------------
- // 坐标转换处理
- // 如果源数据是百度坐标(BD-09)，需要转换为天地图坐标(WGS-84)
- // ---------------------------------------------------------
- // 默认不转换 (false)，如果您确认源数据是百度坐标，请将此变量设置为 true
- var IS_SOURCE_BAIDU = false;
+ var paths = item.paths;
+ if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
+ paths = paths[0];
+ }
- if (IS_SOURCE_BAIDU) {
- console.log("正在将百度坐标转换为天地图坐标...");
- pipelines.forEach(function (p) {
- if (p.path) {
- p.path = p.path.map(function (pt) {
- return CoordTransform.bd09_to_wgs84(pt[0], pt[1]);
- });
- }
+ var points = paths.map(function(p) {
+ return new T.LngLat(p[0], p[1]);
});
- wells.forEach(function (w) {
- if (w.mapLng && w.mapLat) {
- var converted = CoordTransform.bd09_to_wgs84(
- parseFloat(w.mapLng),
- parseFloat(w.mapLat),
- );
- w.mapLng = converted[0];
- w.mapLat = converted[1];
- }
+ // 创建高亮管道（更粗、更亮）
+ var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
+ highlightedPipeline = new T.Polyline(points, {
+ color: lineColor,
+ weight: 6,
+ opacity: 1
});
+ map.addOverLay(highlightedPipeline);
+
+ // 显示信息窗口
+ var infoHtml = '' +
+ '管线 #' + item.id + '
' +
+ '名称: ' + (item.name || '-') + '
' +
+ '管长: ' + (item.length || '-') + ' m
' +
+ '高程: ' + (item.elevation || 0).toFixed(2) + ' m
' +
+ '
';
+
+ var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, -10) });
+ map.openInfoWindow(infoWindow, new T.LngLat(points[0].lng, points[0].lat));
}
- function initCompanyTable() {
- console.log("initCompanyTable 被调用, companies:", companies);
- var tbody = document.getElementById("company-table-body");
- console.log("company-table-body 元素:", tbody);
- if (!tbody) {
- console.error("找不到 company-table-body 元素!");
- return;
- }
- var html = "";
- if (!companies || companies.length === 0) {
- console.warn("companies 为空或长度为0");
- tbody.innerHTML =
- '| 暂无数据 |
';
- return;
- }
- companies.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
-
- html +=
- '';
- html += '| ' + (index + 1) + " | ";
- html += "" + (item.contractNumber || "-") + " | ";
- html += "" + (item.name || "-") + " | ";
- html += "" + (item.address || "-") + " | ";
- html += '' + (item.areaName || "-") + " | ";
- html +=
- '' +
- (item.processSectionName || "-") +
- " | ";
- html +=
- '' + (item.permitNum || "-") + " | ";
- html += '' + (item.trade || "-") + " | ";
- html +=
- '' + (item.displacement || "-") + " | ";
- html += '' + (item.point || "-") + " | ";
- html += '' + (item.input || "-") + " | ";
- html += "
";
- });
- console.log("生成的企业表格HTML长度:", html.length);
- tbody.innerHTML = html;
- }
-
- function initPipelineTable() {
- console.log("initPipelineTable 被调用, pipelines:", pipelines);
- var tbody = document.getElementById("pipeline-table-body");
- console.log("pipeline-table-body 元素:", tbody);
- if (!tbody) {
- console.error("找不到 pipeline-table-body 元素!");
- return;
- }
- var html = "";
- if (!pipelines || pipelines.length === 0) {
- console.warn("pipelines 为空或长度为0");
- tbody.innerHTML =
- '| 暂无数据 |
';
- return;
- }
- var totalDiameter = 0;
- var totalLength = 0;
-
- pipelines.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
-
- html += '';
- html +=
- ' | ';
- html += '' + (index + 1) + " | ";
- html += "" + (item.name || "-") + " | ";
- html += '' + (item.diameter || "-") + " | ";
- html += '' + (item.length || "-") + " | ";
- html += '' + (item.startDepth || "-") + " | ";
- html += '' + (item.endDepth || "-") + " | ";
- html += '' + (item.startElev || "-") + " | ";
- html += '' + (item.endElev || "-") + " | ";
- html += '' + (item.invertElev || "-") + " | ";
- html += "
";
-
- // Calculate totals
- var d = parseFloat(item.diameter) || 0;
- var l = parseFloat(item.length) || 0;
- totalDiameter += d;
- totalLength += l;
- });
- console.log("生成的管道表格HTML长度:", html.length);
- tbody.innerHTML = html;
-
- // Update Summary
- var diamElem = document.getElementById("pipe-total-diameter");
- var lenElem = document.getElementById("pipe-total-length");
- if (diamElem) diamElem.innerText = totalDiameter.toFixed(2);
- if (lenElem) lenElem.innerText = totalLength.toFixed(2);
- }
-
- function initWellTable() {
- var tbody = document.getElementById("well-table-body");
- if (!tbody) {
- console.error("找不到 well-table-body 元素!");
- return;
- }
- if (!wells || wells.length === 0) {
- tbody.innerHTML = '| 暂无数据 |
';
- return;
- }
- var html = "";
- wells.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
-
- html += '';
- html +=
- ' | ';
- html += '' + (index + 1) + " | ";
- html += "" + item.name + " | ";
- html += '' + item.depth + " | ";
- html += '' + item.bottomElev + " | ";
- html += '' + item.groundElev + " | ";
- html += '' + item.spec + " | ";
- html += '' + item.lng + " | ";
- html += '' + item.lat + " | ";
- html += "
";
- });
- tbody.innerHTML = html;
- }
-
- // initCompanyTable(), initPipelineTable(), initWellTable() 已在 loadData() 完成后调用
- // 不要在这里重复调用
-
- // plans 和 records 数据已在 loadData() 中通过 mockApiRequest 加载
- // 不要在这里重复定义，否则会覆盖已加载的数据
-
- function initPlanTable() {
- var tbody = document.getElementById("plan-table-body");
- if (!tbody) {
- console.error("找不到 plan-table-body 元素!");
- return;
- }
- if (!plans || plans.length === 0) {
- tbody.innerHTML = '| 暂无数据 |
';
- return;
- }
- var html = "";
- plans.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
-
- html += '';
- html +=
- ' | ';
- html += '' + (index + 1) + " | ";
- html += "" + item.name + " | ";
-
- var statusColor = item.status === "启用" ? "green" : "red";
- html +=
- '' +
- item.status +
- " | ";
-
- html += '' + item.duration + " | ";
- html += '' + item.interval + " | ";
- html += '' + item.startTime + " | ";
- html += '' + item.endTime + " | ";
- html += "
";
- });
- tbody.innerHTML = html;
- }
-
- function initRecordTable() {
- var tbody = document.getElementById("record-table-body");
- if (!tbody) {
- console.error("找不到 record-table-body 元素!");
- return;
- }
- if (!records || records.length === 0) {
- tbody.innerHTML = '| 暂无数据 |
';
- return;
- }
- var html = "";
- records.forEach(function (item, index) {
- var rowClass = index % 2 === 0 ? "" : "info";
-
- html += '';
- html +=
- ' | ';
- html += '' + (index + 1) + " | ";
- html += "" + item.taskName + " | ";
-
- var statusColor = "black";
- if (item.status === "已完成") statusColor = "green";
- else if (item.status === "未完成") statusColor = "red";
- else if (item.status === "进行中") statusColor = "blue";
-
- html +=
- '' +
- item.status +
- " | ";
- html += '' + item.planStartTime + " | ";
- html += '' + item.planEndTime + " | ";
- html += '' + item.actualTime + " | ";
- html += "
";
- });
- tbody.innerHTML = html;
- }
-
- // initPlanTable() 和 initRecordTable() 已在 loadData() 完成后调用
- // 不要在这里重复调用
-
- // Drawer Logic
- function toggleDrawer() {
- var drawer = document.getElementById("rightDrawer");
- var icon = document.getElementById("drawer-toggle-icon");
- if (drawer.classList.contains("drawer-collapsed")) {
- drawer.classList.remove("drawer-collapsed");
- icon.innerHTML = ">";
- } else {
- drawer.classList.add("drawer-collapsed");
- icon.innerHTML = "<";
- }
- }
-
- // Drawer Resizer Logic
- var resizer = document.getElementById("drawerResizer");
- var drawer = document.getElementById("rightDrawer");
- var startX, startWidth;
-
- resizer.addEventListener("mousedown", function (e) {
- startX = e.clientX;
- startWidth = parseInt(
- document.defaultView.getComputedStyle(drawer).width,
- 10,
- );
-
- // Disable transition during drag
- drawer.style.transition = "none";
-
- document.documentElement.addEventListener("mousemove", doDrag, false);
- document.documentElement.addEventListener("mouseup", stopDrag, false);
-
- // Prevent text selection
- e.preventDefault();
- });
-
- function doDrag(e) {
- // Calculate new width (dragging left increases width)
- var newWidth = startWidth + (startX - e.clientX);
-
- // Min/Max width constraints
- if (newWidth < 300) newWidth = 300;
- if (newWidth > 1000) newWidth = 1000;
-
- drawer.style.width = newWidth + "px";
- }
-
- function stopDrag(e) {
- // Restore transition
- drawer.style.transition = "transform 0.3s ease";
-
- document.documentElement.removeEventListener(
- "mousemove",
- doDrag,
- false,
- );
- document.documentElement.removeEventListener(
- "mouseup",
- stopDrag,
- false,
- );
- }
-
+ // ==================== Tab切换 ====================
function switchTab(tabId, navItem) {
- console.log("switchTab 被调用, tabId:", tabId);
- // Update Nav Items
- var navItems = document.querySelectorAll(".drawer-nav-item");
- navItems.forEach(function (item) {
- item.classList.remove("active");
- });
- navItem.classList.add("active");
+ // 更新导航样式
+ document.querySelectorAll('.drawer-nav-item').forEach(function(item) { item.classList.remove('active'); });
+ navItem.classList.add('active');
- // Update Content Panes
- var panes = document.querySelectorAll(".tab-pane");
- panes.forEach(function (pane) {
- pane.classList.remove("active");
- });
- document.getElementById(tabId).classList.add("active");
+ // 更新内容面板
+ document.querySelectorAll('.tab-pane').forEach(function(pane) { pane.classList.remove('active'); });
+ document.getElementById(tabId).classList.add('active');
- // 根据Tab ID确定数据类型
- var type = "sewage";
- if (tabId === "tab-pump") type = "pump";
- else if (tabId === "tab-company") type = "company";
- else if (tabId === "tab-well") type = "well";
- else if (tabId === "tab-pipeline") type = "pipeline";
- else if (tabId === "tab-plan") type = "plan";
- else if (tabId === "tab-record") type = "record";
+ // 确定数据类型并加载
+ var typeMap = {
+ 'tab-sewage': 'sewage', 'tab-pump': 'pump',
+ 'tab-company': 'company', 'tab-pipeline': 'pipeline'
+ };
+ var type = typeMap[tabId] || 'sewage';
- console.log("确定的数据类型 type:", type);
-
- // 加载该Tab的数据，然后更新地图
- loadTabData(type).then(function () {
- console.log("loadTabData 完成, type:", type);
+ loadData(type).then(function() {
+ renderTable(type);
initMarkers(type);
});
}
+
+ // ==================== 抽屉和调整大小逻辑 ====================
+ function toggleDrawer() {
+ var drawer = document.getElementById('rightDrawer');
+ var icon = document.getElementById('drawer-toggle-icon');
+ if (drawer.classList.contains('drawer-collapsed')) {
+ drawer.classList.remove('drawer-collapsed');
+ icon.innerHTML = '>';
+ } else {
+ drawer.classList.add('drawer-collapsed');
+ icon.innerHTML = '<';
+ }
+ }
+
+ // 抽屉调整大小
+ (function() {
+ var resizer = document.getElementById('drawerResizer');
+ var drawer = document.getElementById('rightDrawer');
+ var startX, startWidth;
+
+ resizer.addEventListener('mousedown', function(e) {
+ startX = e.clientX;
+ startWidth = parseInt(document.defaultView.getComputedStyle(drawer).width, 10);
+ drawer.style.transition = 'none';
+ document.documentElement.addEventListener('mousemove', doDrag, false);
+ document.documentElement.addEventListener('mouseup', stopDrag, false);
+ e.preventDefault();
+ });
+
+ function doDrag(e) {
+ var newWidth = startWidth + (startX - e.clientX);
+ if (newWidth < 300) newWidth = 300;
+ if (newWidth > 1000) newWidth = 1000;
+ drawer.style.width = newWidth + 'px';
+ }
+
+ function stopDrag(e) {
+ drawer.style.transition = 'transform 0.3s ease';
+ document.documentElement.removeEventListener('mousemove', doDrag, false);
+ document.documentElement.removeEventListener('mouseup', stopDrag, false);
+ }
+ })();
@@ -2479,522 +1847,5 @@ pageEncoding="UTF-8"%>
});
});
-
-
-