xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(visual): 优化GIS页面UI并整合实时数据加载

Browse Source
This commit is contained in:
Rue Ji
2026-03-26 00:28:34 +08:00
parent e50422d7a7
commit 7048001c0c
2 changed files with 415 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/main/webapp/jsp/visual/newSourceGISPage.jsp
View File

@ -268,7 +268,7 @@ pageEncoding="UTF-8"%>
margin-top: 0;
"
>
污水厂查询
污水厂详情
</h5>
<!-- <div
@ -361,10 +361,10 @@ pageEncoding="UTF-8"%>
<th width="40">序号</th>
<th width="40">选择</th>
<th>名称</th>
<th>出口流量<br />(m³/h)</th>
<th>入口流量<br />(m³/h)</th>
<th>出口流量(m³/h)</th>
<th>入口流量(m³/h)</th>
<th>状态</th>
<th>设计能力<br />(万吨/天)</th>
<th>设计能力(万吨/天)</th>
<th>详细地址</th>
<th>监测时间</th>
</tr>
@ -384,7 +384,7 @@ pageEncoding="UTF-8"%>
margin-top: 0;
"
>
泵站查询
泵站详情
</h5>
<!-- <div
@ -476,7 +476,7 @@ pageEncoding="UTF-8"%>
margin-top: 0;
"
>
企业查询
企业详情
</h5>
<!-- 查询条件 -->
@ -547,7 +547,16 @@ pageEncoding="UTF-8"%>
</div>
</div>
<div style="max-height: 400px; overflow-y: auto">
<div style="max-height: 400px; overflow-y: auto" id="company-table-container">
<div id="company-loading" style="display: none; text-align: center; padding: 20px;">
<i class="glyphicon glyphicon-refresh" style="font-size: 24px; color: #007bff; animation: spin 1s infinite linear;"></i>
<p style="margin-top: 10px; color: #666; font-size: 12px">数据加载中...</p>
<style>
@keyframes spin {
100% { transform: rotate(360deg); }
}
</style>
</div>
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap"
@ -581,7 +590,7 @@ pageEncoding="UTF-8"%>
margin-top: 0;
"
>
管道查询
管道详情
</h5>
<!-- <div
@ -1005,6 +1014,7 @@ pageEncoding="UTF-8"%>
<!-- Scripts -->
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/main/main_js.js" charset="utf-8"></script>
<!-- Tianditu Map API -->
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
@ -1014,147 +1024,37 @@ pageEncoding="UTF-8"%>
></script>
<script type="text/javascript">
// 坐标转换工具 (百度 BD-09 <-> 火星 GCJ-02 <-> 天地图/GPS WGS-84)
var CoordTransform = {
x_pi: (3.14159265358979324 * 3000.0) / 180.0,
pi: 3.1415926535897932384626,
a: 6378245.0,
ee: 0.00669342162296594323,
// 百度坐标 (BD-09) 转 火星坐标 (GCJ-02)
bd09_to_gcj02: function (bd_lon, bd_lat) {
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat];
},
// 火星坐标 (GCJ-02) 转 GPS 坐标 (WGS-84)
gcj02_to_wgs84: function (lng, lat) {
if (this.out_of_china(lng, lat)) {
return [lng, lat];
}
var dlat = this.transformlat(lng - 105.0, lat - 35.0);
var dlng = this.transformlng(lng - 105.0, lat - 35.0);
var radlat = (lat / 180.0) * this.pi;
var magic = Math.sin(radlat);
magic = 1 - this.ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat =
(dlat * 180.0) /
(((this.a * (1 - this.ee)) / (magic * sqrtmagic)) * this.pi);
dlng =
(dlng * 180.0) /
((this.a / sqrtmagic) * Math.cos(radlat) * this.pi);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat];
},
// 百度坐标 (BD-09) 直接转 天地图/GPS 坐标 (WGS-84)
bd09_to_wgs84: function (bd_lon, bd_lat) {
var gcj = this.bd09_to_gcj02(bd_lon, bd_lat);
var wgs = this.gcj02_to_wgs84(gcj[0], gcj[1]);
return wgs;
},
transformlat: function (lng, lat) {
var ret =
-100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * this.pi) +
20.0 * Math.sin(2.0 * lng * this.pi)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * this.pi) +
40.0 * Math.sin((lat / 3.0) * this.pi)) *
2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * this.pi) +
320 * Math.sin((lat * this.pi) / 30.0)) *
2.0) /
3.0;
return ret;
},
transformlng: function (lng, lat) {
var ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * this.pi) +
20.0 * Math.sin(2.0 * lng * this.pi)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * this.pi) +
40.0 * Math.sin((lng / 3.0) * this.pi)) *
2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * this.pi) +
300.0 * Math.sin((lng / 30.0) * this.pi)) *
2.0) /
3.0;
return ret;
},
out_of_china: function (lng, lat) {
return (
lng < 72.004 ||
lng > 137.8347 ||
lat < 0.8293 ||
lat > 55.8271 ||
false
);
},
};
// Initialize Map
// Tianditu uses CGCS2000/WGS84 coordinates.
// Center on Shanghai Jinshan District
console.log("=== newSourceGISPage.jsp 页面已加载 ===");
var map = new T.Map("map-container");
map.centerAndZoom(new T.LngLat(121.34, 30.74), 13);
map.centerAndZoom(new T.LngLat(121.34, 30.74), 16);
map.enableScrollWheelZoom();
// 记录当前缩放级别，用于限制只能放大不能缩小
var currentZoomLevel = 13;
var minZoomLevel = 13; // 最小缩放级别
// // 记录当前缩放级别，用于限制只能放大不能缩小
// var currentZoomLevel = 13;
// var minZoomLevel = 13; // 最小缩放级别
// 监听缩放开始事件，阻止缩小操作
map.addEventListener("zoomstart", function(e) {
var newZoom = e.zoom;
console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
if (newZoom < minZoomLevel) {
console.log("[地图缩放] 阻止缩小操作，最小级别:", minZoomLevel);
map.setZoom(minZoomLevel);
return false;
}
});
// // 监听缩放开始事件，阻止缩小操作
// map.addEventListener("zoomstart", function(e) {
// var newZoom = e.zoom;
// console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
// if (newZoom < minZoomLevel) {
// console.log("[地图缩放] 阻止缩小操作，最小级别:", minZoomLevel);
// map.setZoom(minZoomLevel);
// return false;
// }
// });
// 监听缩放结束事件，更新当前缩放级别
map.addEventListener("zoomend", function(e) {
currentZoomLevel = map.getZoom();
console.log("[地图缩放] 缩放完成，当前级别:", currentZoomLevel);
});
// // 监听缩放结束事件，更新当前缩放级别
// map.addEventListener("zoomend", function(e) {
// currentZoomLevel = map.getZoom();
// console.log("[地图缩放] 缩放完成，当前级别:", currentZoomLevel);
// });
// 禁用双击缩小
map.disableDoubleClickZoom();
// // 禁用双击缩小
// map.disableDoubleClickZoom();
// Controls
var scale = new T.Control.Scale();
@ -1164,18 +1064,18 @@ pageEncoding="UTF-8"%>
var mapType = new T.Control.MapType();
map.addControl(mapType);
// 隐藏缩小按钮，只保留放大按钮
setTimeout(function() {
var zoomOutBtn = document.querySelector(".TMAP_zoom_button");
if (zoomOutBtn) {
// 隐藏所有缩放按钮中的缩小按钮
var zoomButtons = document.querySelectorAll(".TMAP_zoom_button");
if (zoomButtons.length > 0) {
zoomButtons[0].style.display = "none"; // 隐藏缩小按钮
}
}
console.log("[地图控制] 已隐藏缩小按钮");
}, 500);
// // 隐藏缩小按钮，只保留放大按钮
// setTimeout(function() {
// var zoomOutBtn = document.querySelector(".TMAP_zoom_button");
// if (zoomOutBtn) {
// // 隐藏所有缩放按钮中的缩小按钮
// var zoomButtons = document.querySelectorAll(".TMAP_zoom_button");
// if (zoomButtons.length > 0) {
// zoomButtons[0].style.display = "none"; // 隐藏缩小按钮
// }
// }
// console.log("[地图控制] 已隐藏缩小按钮");
// }, 500);
// var mousePosition = new T.Control.MousePosition({position: T_ANCHOR_BOTTOM_RIGHT});
// map.addControl(mousePosition);
@ -1213,17 +1113,25 @@ pageEncoding="UTF-8"%>
api: { url: '/user/processSection/getProcessSection4Select.do', mock: false, params: { companyId: 'JSBZ' } },
tableBody: 'pump-table-body',
icon: 'icon_bz.png',
// 泵站名称到经纬度的映射
lngLatMap: {
'卫八路泵站': { lng: 121.277502, lat: 30.720661 },
'春华泵站': { lng: 121.287567, lat: 30.727986 },
'九号泵站': { lng: 121.286513, lat: 30.716669 }
},
transform: function(item, idx) {
var name = item.text || item.name || '';
var lngLat = this.lngLatMap[name] || { lng: 121.32 + idx * 0.01, lat: 30.76 - idx * 0.005 };
return {
id: item.id || 'pump_' + idx,
name: item.text || item.name || '',
name: name,
code: item.id || '',
level: '-',
flow: '-',
status: '-',
time: '-',
lng: 121.32 + idx * 0.01,
lat: 30.76 - idx * 0.005
lng: lngLat.lng,
lat: lngLat.lat
};
}
},
@ -1329,21 +1237,42 @@ pageEncoding="UTF-8"%>
};
// ==================== 统一API请求 ====================
// 获取点位实时值（封装方法）
function getMpointValue(unitId, mpointCode) {
return new Promise(function(resolve) {
$.get(contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode, function(data) {
try {
var d = typeof data === 'string' ? eval('(' + data + ')') : data;
resolve(d.parmvalue || 0);
} catch(e) {
resolve(0);
}
}).fail(function() { resolve(0); });
});
}
function apiRequest(url, params, isMock, isStatic) {
return new Promise(function(resolve, reject) {
if (isMock) {
// Mock数据
setTimeout(function() {
if (url === '/api/sewage/list') {
if (url === '/api/sewage/list') {
// 获取入口流量和出口流量的实时值
var unitId = '0533JS';
Promise.all([
getMpointValue(unitId, 'C_Jsssll'),
getMpointValue(unitId, 'C_Csssll')
]).then(function(values) {
resolve([{
id: 1, name: '金山水卫污水厂', lng: 121.345, lat: 30.725,
status: 0, address: '上海金山区金山水卫污水厂',
inFlow: 4774, outFlow: 4536, designCapacity: 10, time: '02-25 17:24'
id: 1, name: '上海金山卫污水处理有限公司', longitudeLatitude: '121.272242,30.708638',
lng: '121.272242',
lat: '30.708638',
status: 0, address: '海金路958号',
inFlow: values[0], outFlow: values[1], designCapacity: 10, time: new Date().toLocaleTimeString()
}]);
} else {
resolve([]);
}
}, 100);
});
} else {
resolve([]);
}
} else if (isStatic) {
// 静态 JSON 文件请求（GET）
$.ajax({
@ -1731,14 +1660,28 @@ pageEncoding="UTF-8"%>
config.loaded = false;
config.data = [];
// 显示loading状态
$('#company-loading').show();
$('#company-table-body').empty();
// 获取动态参数
var params = config.api.getParams();
console.log('[企业查询] 查询参数:', params);
// 重新加载数据
loadData('company').then(function() {
// 隐藏loading
$('#company-loading').hide();
renderTable('company');
initMarkers('company');
// 默认定位到第一个企业
if (config.data.length > 0) {
selectCompany(0);
}
}).catch(function() {
// 隐藏loading
$('#company-loading').hide();
});
}
@ -1850,15 +1793,31 @@ pageEncoding="UTF-8"%>
};
var type = typeMap[tabId] || 'sewage';
loadData(type).then(function() {
renderTable(type);
initMarkers(type);
});
// 企业 Tab 初始化查询下拉选项
if (type === 'company') {
initCompanySearchOptions();
// 显示loading状态
$('#company-loading').show();
}
loadData(type).then(function() {
// 企业Tab加载完成后隐藏loading并定位到第一个企业
if (type === 'company') {
$('#company-loading').hide();
renderTable(type);
initMarkers(type);
if (dataConfig.company.data.length > 0) {
selectCompany(0);
}
} else {
renderTable(type);
initMarkers(type);
}
}).catch(function() {
if (type === 'company') {
$('#company-loading').hide();
}
});
}
// ==================== 抽屉和调整大小逻辑 ====================