diff --git a/src/main/webapp/jsp/bigScreen.jsp b/src/main/webapp/jsp/bigScreen.jsp
index aa72dec0..abf1e637 100644
--- a/src/main/webapp/jsp/bigScreen.jsp
+++ b/src/main/webapp/jsp/bigScreen.jsp
@@ -1,5 +1,14 @@
-<%@ 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" %>
+
+
@@ -296,6 +305,84 @@ pageEncoding="UTF-8"%>
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;
+ }
@@ -465,14 +552,38 @@ pageEncoding="UTF-8"%>
-
+
+
100
+
100
+
100
+
100
+
100
+
100
+
-
+
+
100
+
100
+
100
+
100
+
100
+
100
+
100
+
100
-
+
-
+
+
+
管长(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"%>
});
});
-
-
-
diff --git a/src/main/webapp/jsp/z_bigScreen/bigScreen2.html b/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
index 0de6b864..c2bb4024 100644
--- a/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
+++ b/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
@@ -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;
+ }