Imdroid/security-monitor
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 页面优化、手机端适配、新增谷歌地图和测距功能

Browse Source 
- 新增姿态平滑功能
- 优化页面显示效果
- 新增测距和比例尺功能
- 新增谷歌地图集成
- 适配手机端显示

# Conflicts:
#	sec-beidou/src/main/resources/templates/page/device_overview.html
This commit is contained in:
fengyarnom 2025-06-30 16:02:33 +08:00 committed by yarnom
parent 1191c17c35
commit 983efb2d6b
9 changed files with 2819 additions and 966 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
sec-beidou/src/main/resources/static/js/device-overview-module/coordinate-utils.js Normal file
View File

@ -0,0 +1,79 @@
var CoordinateUtils = (function() {
'use strict';
var pi = 3.14159265358979324;
var a = 6378245.0;
var ee = 0.00669342162296594323;
/**
* 判断是否在国内，不在国内则不做偏移
*/
function outOfChina(lon, lat) {
if ((lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271)) {
return true;
} else {
return false;
}
}
function transformLat(x, y) {
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
return ret;
}
function transformLon(x, y) {
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
return ret;
}
function transform(wgLat, wgLon) {
var mars_point = {lon: 0, lat: 0};
if (outOfChina(wgLon, wgLat)) {
mars_point.lat = wgLat;
mars_point.lon = wgLon;
return mars_point;
}
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
var radLat = wgLat / 180.0 * pi;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
mars_point.lat = wgLat + dLat;
mars_point.lon = wgLon + dLon;
return mars_point;
}
function getMapCoordinates(lat, lon, mapType) {
var coordinates;
if (mapType === 'amap' || mapType === 'amap_satellite') {
// 高德地图 WGS84 转换为 GCJ-02
var gcjCoord = transform(lat, lon);
coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
} else if (mapType.startsWith('google_')) {
// Google地图使用WGS84坐标系
coordinates = ol.proj.fromLonLat([lon, lat]);
} else {
// 天地图 CGCS2000，与WGS84实质一样
coordinates = ol.proj.fromLonLat([lon, lat]);
}
return coordinates;
}
return {
transform: transform,
getMapCoordinates: getMapCoordinates,
outOfChina: outOfChina
};
})();

365
sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js Normal file
View File

@ -0,0 +1,365 @@
var DeviceMarkers = (function() {
'use strict';
var greenFeatures = [];
var orangeFeatures = [];
var redFeatures = [];
var allFeatures = [];
var myLocationFeature = null;
var myLocationInterval = null;
var showDeviceId = true;
var minZoomForLabels = 4;
var map = null;
var vectorSource = null;
var vectorLayer = null;
function init(mapInstance, vectorSourceInstance, vectorLayerInstance) {
map = mapInstance;
vectorSource = vectorSourceInstance;
vectorLayer = vectorLayerInstance;
}
function createDeviceStyle(feature) {
if (feature.get('isMyLocation')) {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: '../images/loc_blue.png',
scale: 0.7
})
});
}
var deviceInfo = feature.get('deviceInfo');
if (!deviceInfo) return null;
var iconSrc;
var color = '#000';
var isHovered = feature.get('hovered') === true;
var scale = isHovered ? 0.85 : 0.7;
// 根据告警级别选择图标
if (deviceInfo.warning == 2) {
iconSrc = '../images/loc1_red.png';
} else if (deviceInfo.warning == 1) {
iconSrc = '../images/loc1_orange.png';
} else {
iconSrc = '../images/loc1_green.png';
}
var style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: iconSrc,
scale: scale
})
});
// 根据缩放级别和设置决定是否显示设备ID
if (showDeviceId && map && map.getView().getZoom() >= minZoomForLabels) {
style.setText(new ol.style.Text({
text: deviceInfo.deviceid,
offsetY: -30,
fill: new ol.style.Fill({
color: isHovered ? '#1aa094' : color
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: isHovered ? 3 : 2
}),
font: isHovered ? 'bold 12px Arial' : '12px Arial'
}));
}
return style;
}
function addDeviceMarkers(deviceList) {
if (!vectorSource || !deviceList) return;
var savedMyLocationFeature = myLocationFeature;
vectorSource.clear();
greenFeatures = [];
orangeFeatures = [];
redFeatures = [];
allFeatures = [];
for (var i = 0; i < deviceList.length; i++) {
var device = deviceList[i];
var currentMapType = getCurrentMapType();
var mapCoordinates = CoordinateUtils.getMapCoordinates(
device.latitude,
device.longitude,
currentMapType
);
var feature = new ol.Feature({
geometry: new ol.geom.Point(mapCoordinates),
deviceInfo: device
});
// 按告警级别分类
if (device.warning == 2) {
redFeatures.push(feature);
} else if (device.warning == 1) {
orangeFeatures.push(feature);
} else {
greenFeatures.push(feature);
}
allFeatures.push(feature);
vectorSource.addFeature(feature);
}
if (savedMyLocationFeature) {
vectorSource.addFeature(savedMyLocationFeature);
}
// 强制更新样式
if (vectorLayer) {
vectorLayer.changed();
}
}
function getCurrentMapType() {
var mapTypeSelect = document.getElementById('mapTypeSelectNew');
return mapTypeSelect ? mapTypeSelect.value : 'tianditu_satellite';
}
function showAllDevices() {
if (!vectorSource) return;
var savedMyLocationFeature = myLocationFeature;
vectorSource.clear();
if (savedMyLocationFeature) {
vectorSource.addFeature(savedMyLocationFeature);
}
for (var i = 0; i < allFeatures.length; i++) {
vectorSource.addFeature(allFeatures[i]);
}
}
function showWarning1Devices() {
if (!vectorSource) return;
var savedMyLocationFeature = myLocationFeature;
vectorSource.clear();
if (savedMyLocationFeature) {
vectorSource.addFeature(savedMyLocationFeature);
}
for (var i = 0; i < allFeatures.length; i++) {
vectorSource.addFeature(allFeatures[i]);
}
hideGreenFeatures();
hideRedFeatures();
}
function showWarning2Devices() {
if (!vectorSource) return;
var savedMyLocationFeature = myLocationFeature;
vectorSource.clear();
if (savedMyLocationFeature) {
vectorSource.addFeature(savedMyLocationFeature);
}
for (var i = 0; i < allFeatures.length; i++) {
vectorSource.addFeature(allFeatures[i]);
}
hideGreenFeatures();
hideOrangeFeatures();
}
function hideGreenFeatures() {
for (var i = 0; i < greenFeatures.length; i++) {
vectorSource.removeFeature(greenFeatures[i]);
}
}
function hideOrangeFeatures() {
for (var i = 0; i < orangeFeatures.length; i++) {
vectorSource.removeFeature(orangeFeatures[i]);
}
}
function hideRedFeatures() {
for (var i = 0; i < redFeatures.length; i++) {
vectorSource.removeFeature(redFeatures[i]);
}
}
function findDeviceById(deviceId) {
// console.log('搜索设备:', deviceId, '(类型:', typeof deviceId, ')');
// console.log('当前设备总数:', allFeatures.length);
var searchTerm = String(deviceId).trim();
for (var i = 0; i < allFeatures.length; i++) {
var feature = allFeatures[i];
var deviceInfo = feature.get('deviceInfo');
if (deviceInfo) {
var currentDeviceId = String(deviceInfo.deviceid);
// console.log('检查设备:', currentDeviceId, '(类型:', typeof deviceInfo.deviceid, ')');
if (currentDeviceId === searchTerm) {
// console.log('精确匹配找到设备:', currentDeviceId);
return feature;
}
if (currentDeviceId.indexOf(searchTerm) !== -1) {
// console.log('部分匹配找到设备:', currentDeviceId);
return feature;
}
if (currentDeviceId.replace(/\s+/g, '') === searchTerm.replace(/\s+/g, '')) {
// console.log('去除空格后匹配找到设备:', currentDeviceId);
return feature;
}
}
}
console.log('未找到设备:', deviceId);
return null;
}
function locateDevice(deviceId) {
var feature = findDeviceById(deviceId);
if (feature && map) {
var geometry = feature.getGeometry();
var coordinates = geometry.getCoordinates();
map.getView().animate({
center: coordinates,
zoom: Math.max(map.getView().getZoom(), 15),
duration: 1000
});
return true;
}
return false;
}
/**
* 获取我的位置
*/
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var currentMapType = getCurrentMapType();
var coordinates = CoordinateUtils.getMapCoordinates(lat, lon, currentMapType);
if (myLocationFeature) {
vectorSource.removeFeature(myLocationFeature);
}
myLocationFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinates),
isMyLocation: true
});
vectorSource.addFeature(myLocationFeature);
map.getView().animate({
center: coordinates,
zoom: 15,
duration: 1000
});
},
function(error) {
console.error('获取位置失败:', error);
}
);
}
}
function startLocationUpdates() {
if (navigator.geolocation) {
myLocationInterval = setInterval(function() {
getMyLocation();
}, 30000);
}
}
function stopLocationUpdates() {
if (myLocationInterval) {
clearInterval(myLocationInterval);
myLocationInterval = null;
}
}
function updateMyLocationForMapType(mapType) {
if (myLocationFeature) {
var geometry = myLocationFeature.getGeometry();
var coordinates = geometry.getCoordinates();
var lonLat = ol.proj.toLonLat(coordinates);
var newCoordinates = CoordinateUtils.getMapCoordinates(lonLat[1], lonLat[0], mapType);
myLocationFeature.setGeometry(new ol.geom.Point(newCoordinates));
}
}
function setShowDeviceId(show) {
showDeviceId = show;
if (vectorLayer) {
vectorLayer.changed();
}
}
function getDeviceStats() {
return {
total: allFeatures.length,
green: greenFeatures.length,
orange: orangeFeatures.length,
red: redFeatures.length
};
}
return {
init: init,
createDeviceStyle: createDeviceStyle,
addDeviceMarkers: addDeviceMarkers,
showAllDevices: showAllDevices,
showWarning1Devices: showWarning1Devices,
showWarning2Devices: showWarning2Devices,
hideGreenFeatures: hideGreenFeatures,
hideOrangeFeatures: hideOrangeFeatures,
hideRedFeatures: hideRedFeatures,
findDeviceById: findDeviceById,
locateDevice: locateDevice,
getMyLocation: getMyLocation,
startLocationUpdates: startLocationUpdates,
stopLocationUpdates: stopLocationUpdates,
updateMyLocationForMapType: updateMyLocationForMapType,
setShowDeviceId: setShowDeviceId,
getDeviceStats: getDeviceStats,
getAllFeatures: function() { return allFeatures; },
getGreenFeatures: function() { return greenFeatures; },
getOrangeFeatures: function() { return orangeFeatures; },
getRedFeatures: function() { return redFeatures; },
getMyLocationFeature: function() { return myLocationFeature; }
};
})();

137
sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js Normal file
View File

@ -0,0 +1,137 @@
var DeviceOverview = (function() {
'use strict';
var deviceList = [];
function init(devices, options) {
deviceList = devices || [];
window.deviceList = deviceList;
window.userRole = options && options.role ? options.role : 'USER';
layui.use(['form'], function(){
var form = layui.form;
form.on('select(mapTypeNew)', function(data){
MapCore.switchMapType(data.value);
});
MapCore.initialize(deviceList);
document.getElementById('warningFilter').value = 'all';
SearchFilter.showAllDevices();
});
}
function onMapTypeChange() {
return MapCore.onMapTypeChange();
}
function searchDeviceNew() {
return MapCore.searchDeviceNew();
}
function onWarningFilterChange() {
return MapCore.onWarningFilterChange();
}
function toggleMapFunctionsMenu() {
return MapCore.toggleMapFunctionsMenu();
}
function toggleDeviceId() {
return MapCore.toggleDeviceId();
}
function toggleCluster() {
return MapCore.toggleCluster();
}
function toggleMeasureDistance() {
return MeasureTools.toggleMeasureDistance();
}
function finishMeasuring() {
return MeasureTools.finishMeasuring();
}
function clearMeasure() {
return MeasureTools.clearMeasure();
}
function toggleWeatherForecast() {
return WeatherForecast.toggleWeatherForecast();
}
function closeWeatherCard() {
return WeatherForecast.closeWeatherCard();
}
function showPrevForecast() {
return WeatherForecast.showPrevForecast();
}
function showNextForecast() {
return WeatherForecast.showNextForecast();
}
function queryDevices(statusType) {
return SearchFilter.queryDevices(statusType);
}
function locateDeviceOnMap(deviceId, latitude, longitude) {
return SearchFilter.locateDeviceOnMap(deviceId, latitude, longitude);
}
function locateDeviceDirectly(deviceId) {
return SearchFilter.locateDeviceDirectly(deviceId);
}
function switchMapType(mapType) {
return MapCore.switchMapType(mapType);
}
return {
init: init,
onMapTypeChange: onMapTypeChange,
switchMapType: switchMapType,
searchDeviceNew: searchDeviceNew,
onWarningFilterChange: onWarningFilterChange,
queryDevices: queryDevices,
locateDeviceOnMap: locateDeviceOnMap,
locateDeviceDirectly: locateDeviceDirectly,
toggleMapFunctionsMenu: toggleMapFunctionsMenu,
toggleDeviceId: toggleDeviceId,
toggleCluster: toggleCluster,
toggleMeasureDistance: toggleMeasureDistance,
finishMeasuring: finishMeasuring,
clearMeasure: clearMeasure,
toggleWeatherForecast: toggleWeatherForecast,
closeWeatherCard: closeWeatherCard,
showPrevForecast: showPrevForecast,
showNextForecast: showNextForecast
};
})();
window.DeviceOverview = DeviceOverview;
window.onMapTypeChange = DeviceOverview.onMapTypeChange;
window.searchDeviceNew = DeviceOverview.searchDeviceNew;
window.onWarningFilterChange = DeviceOverview.onWarningFilterChange;
window.toggleMapFunctionsMenu = DeviceOverview.toggleMapFunctionsMenu;
window.toggleDeviceId = DeviceOverview.toggleDeviceId;
window.toggleCluster = DeviceOverview.toggleCluster;
window.toggleMeasureDistance = DeviceOverview.toggleMeasureDistance;
window.finishMeasuring = DeviceOverview.finishMeasuring;
window.clearMeasure = DeviceOverview.clearMeasure;
window.toggleWeatherForecast = DeviceOverview.toggleWeatherForecast;
window.closeWeatherCard = DeviceOverview.closeWeatherCard;
window.showPrevForecast = DeviceOverview.showPrevForecast;
window.showNextForecast = DeviceOverview.showNextForecast;
window.queryDevices = DeviceOverview.queryDevices;
window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap;
window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly;

349
sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js Normal file
View File

@ -0,0 +1,349 @@
var MapCore = (function() {
'use strict';
var map = null;
var vectorSource = null;
var vectorLayer = null;
var clusterSource = null;
var clusterLayer = null;
var currentBaseLayer = null;
var showDeviceId = true;
var showCluster = true;
var minZoomForLabels = 4;
var maxZoomForClustering = 8;
var hoveredFeature = null;
function initialize(deviceList) {
// 创建矢量数据源和图层
vectorSource = new ol.source.Vector();
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: function(feature) {
return DeviceMarkers.createDeviceStyle(feature);
}
});
// 创建集群数据源和图层
clusterSource = new ol.source.Cluster({
distance: 40,
source: vectorSource
});
clusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get('features').length;
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
return style;
}
});
var initialMapType = document.getElementById('mapTypeSelectNew').value || 'tianditu_satellite';
currentBaseLayer = MapLayers.getLayer(initialMapType);
map = new ol.Map({
target: 'map-container',
layers: [
currentBaseLayer,
clusterLayer,
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([116.404, 39.915]),
zoom: 7
})
});
DeviceMarkers.init(map, vectorSource, vectorLayer);
MeasureTools.init(map);
WeatherForecast.init();
var scaleLineControl = new ol.control.ScaleLine();
map.addControl(scaleLineControl);
var initialZoom = map.getView().getZoom();
updateLayerVisibility(initialZoom);
map.getView().on('change:resolution', function() {
var zoom = map.getView().getZoom();
updateLayerVisibility(zoom);
vectorLayer.changed();
});
bindMouseEvents();
if (deviceList && deviceList.length > 0) {
setCenterFromDevices(deviceList);
}
DeviceMarkers.addDeviceMarkers(deviceList);
DeviceMarkers.getMyLocation();
DeviceMarkers.startLocationUpdates();
document.getElementById('showDeviceIdSwitch').checked = showDeviceId;
document.getElementById('showClusterSwitch').checked = showCluster;
}
function updateLayerVisibility(zoom) {
if (showCluster) {
if (zoom >= maxZoomForClustering) {
clusterLayer.setVisible(false);
vectorLayer.setVisible(true);
} else {
clusterLayer.setVisible(true);
vectorLayer.setVisible(false);
}
} else {
clusterLayer.setVisible(false);
vectorLayer.setVisible(true);
}
}
function bindMouseEvents() {
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (hoveredFeature && hoveredFeature !== feature) {
hoveredFeature.set('hovered', false);
}
if (feature) {
// 处理集群
var features = feature.get('features');
if (features && features.length === 1) {
features[0].set('hovered', true);
hoveredFeature = features[0];
} else if (!features && feature.get('deviceInfo')) {
feature.set('hovered', true);
hoveredFeature = feature;
}
}
vectorLayer.changed();
});
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature;
});
if (feature) {
var features = feature.get('features');
if (features && features.length > 1) {
// 集群点击，扩展视图
var extent = vectorSource.getExtent();
map.getView().fit(extent, {
padding: [50, 50, 50, 50],
duration: 1000
});
} else if (features && features.length === 1) {
// 单个设备点击
var deviceInfo = features[0].get('deviceInfo');
if (deviceInfo) {
showDeviceInfo(deviceInfo);
// 如果天气预测开启，显示天气卡片
if (WeatherForecast.isEnabled()) {
WeatherForecast.showWeatherForecast(deviceInfo);
}
}
} else if (feature.get('deviceInfo')) {
var deviceInfo = feature.get('deviceInfo');
showDeviceInfo(deviceInfo);
// 如果天气预测开启，显示天气卡片
if (WeatherForecast.isEnabled()) {
WeatherForecast.showWeatherForecast(deviceInfo);
}
}
}
});
}
function showDeviceInfo(deviceInfo) {
var statusText = '';
if (deviceInfo.warning === 2) {
statusText = '严重告警';
} else if (deviceInfo.warning === 1) {
statusText = '一般告警';
} else {
statusText = '正常';
}
var infoMsg = ' 设备: ' + deviceInfo.deviceid +
' | 状态: ' + statusText +
' | 坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg(infoMsg, {
time: 3000,
area: ['auto', 'auto'],
offset: 'auto'
});
}
}
function setCenterFromDevices(deviceList) {
if (!deviceList || deviceList.length === 0) return;
var minLat = deviceList[0].latitude;
var maxLat = deviceList[0].latitude;
var minLon = deviceList[0].longitude;
var maxLon = deviceList[0].longitude;
for (var i = 1; i < deviceList.length; i++) {
var device = deviceList[i];
minLat = Math.min(minLat, device.latitude);
maxLat = Math.max(maxLat, device.latitude);
minLon = Math.min(minLon, device.longitude);
maxLon = Math.max(maxLon, device.longitude);
}
var centerLat = (minLat + maxLat) / 2;
var centerLon = (minLon + maxLon) / 2;
map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
}
function switchMapType(mapType) {
if (!MapLayers.hasLayer(mapType)) {
console.error('未知的地图类型:', mapType);
return;
}
map.removeLayer(currentBaseLayer);
currentBaseLayer = MapLayers.getLayer(mapType);
map.getLayers().insertAt(0, currentBaseLayer);
DeviceMarkers.updateMyLocationForMapType(mapType);
// 重新获取设备列表并添加标记
var deviceList = window.deviceList || [];
DeviceMarkers.addDeviceMarkers(deviceList);
}
function toggleDeviceId() {
showDeviceId = document.getElementById('showDeviceIdSwitch').checked;
DeviceMarkers.setShowDeviceId(showDeviceId);
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg(showDeviceId ? '已显示设备信息' : '已隐藏设备信息');
}
}
function toggleCluster() {
showCluster = document.getElementById('showClusterSwitch').checked;
var zoom = map.getView().getZoom();
updateLayerVisibility(zoom);
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg(showCluster ? '已启用集群显示' : '已禁用集群显示');
}
}
function toggleMapFunctionsMenu() {
var menu = document.getElementById('mapFunctionsMenu');
if (menu) {
menu.classList.toggle('show');
if (menu.classList.contains('show')) {
document.addEventListener('click', closeMapFunctionsMenu);
}
}
}
function closeMapFunctionsMenu(event) {
var dropdown = document.getElementById('mapFunctionsMenu');
var toggleBtn = document.querySelector('.dropdown-toggle');
if (dropdown && !dropdown.contains(event.target) && !toggleBtn.contains(event.target)) {
dropdown.classList.remove('show');
document.removeEventListener('click', closeMapFunctionsMenu);
}
}
function onMapTypeChange() {
var mapType = document.getElementById('mapTypeSelectNew').value;
switchMapType(mapType);
}
function onWarningFilterChange() {
var filterValue = document.getElementById('warningFilter').value;
switch(filterValue) {
case 'all':
SearchFilter.showAllDevices();
break;
case 'warning1':
SearchFilter.showWarning1Devices();
break;
case 'warning2':
SearchFilter.showWarning2Devices();
break;
}
}
function searchDeviceNew() {
var searchInput = document.getElementById('deviceSearchNew');
if (searchInput) {
var deviceId = searchInput.value.trim();
if (deviceId) {
SearchFilter.searchDevice(deviceId);
} else {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('请输入设备编号');
}
}
}
}
function getMap() {
return map;
}
function getVectorSource() {
return vectorSource;
}
function getVectorLayer() {
return vectorLayer;
}
return {
initialize: initialize,
switchMapType: switchMapType,
toggleDeviceId: toggleDeviceId,
toggleCluster: toggleCluster,
toggleMapFunctionsMenu: toggleMapFunctionsMenu,
onMapTypeChange: onMapTypeChange,
onWarningFilterChange: onWarningFilterChange,
searchDeviceNew: searchDeviceNew,
getMap: getMap,
getVectorSource: getVectorSource,
getVectorLayer: getVectorLayer
};
})();

176
sec-beidou/src/main/resources/static/js/device-overview-module/map-layers.js Normal file
View File

@ -0,0 +1,176 @@
var MapLayers = (function() {
'use strict';
// 天地图 API 密钥 （fengyarnom@gmail.com）
// 天地图的英文就是 TIANDITU 所以这里用拼音指代
var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
function createTiandituTileLoadFunction() {
return function(imageTile, src) {
imageTile.getImage().src = src;
imageTile.getImage().onerror = function() {
// 天地图加载失败时切换到高德地图
var mapTypeSelect = document.getElementById('mapTypeSelectNew');
if(mapTypeSelect && mapTypeSelect.value.startsWith('tianditu_')) {
mapTypeSelect.value = 'amap';
if (window.DeviceOverview && typeof window.DeviceOverview.switchMapType === 'function') {
window.DeviceOverview.switchMapType('amap');
}
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('天地图加载失败,已自动切换到高德地图');
}
if (window.layui && window.layui.form) {
window.layui.form.render('select');
}
}
};
};
}
var mapLayers = {
// 高德地图
amap: new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
}),
// 高德卫星图
amap_satellite: new ol.layer.Group({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
})
})
]
}),
// 谷歌卫星图
google_satellite: new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://mt{0-3}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
crossOrigin: 'anonymous'
})
}),
// 谷歌地形图
google_terrain: new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://mt{0-3}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
crossOrigin: 'anonymous'
})
}),
// 谷歌道路图
google_roadmap: new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
crossOrigin: 'anonymous'
})
}),
// 谷歌混合图
google_hybrid: new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://mt{0-3}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
crossOrigin: 'anonymous'
})
}),
// 天地图卫星影像
tianditu_satellite: new ol.layer.Group({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
})
]
}),
// 天地图矢量图
tianditu_normal: new ol.layer.Group({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
})
]
}),
// 天地图地形图
tianditu_terrain: new ol.layer.Group({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
})
]
}),
// 天地图地形混合图
tianditu_terrain_hybrid: new ol.layer.Group({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
tileLoadFunction: createTiandituTileLoadFunction()
})
})
]
})
};
function getLayer(mapType) {
return mapLayers[mapType];
}
function getAllLayers() {
return mapLayers;
}
function hasLayer(mapType) {
return mapLayers.hasOwnProperty(mapType);
}
return {
getLayer: getLayer,
getAllLayers: getAllLayers,
hasLayer: hasLayer
};
})();

299
sec-beidou/src/main/resources/static/js/device-overview-module/measure-tools.js Normal file
View File

@ -0,0 +1,299 @@
var MeasureTools = (function() {
'use strict';
var measureActive = false;
var measureDraw = null;
var measureSource = null;
var measureLayer = null;
var measureTooltips = [];
var measureFeatures = [];
var currentMeasureTooltips = [];
var currentSketch = null;
var currentListener = null;
var segmentTooltips = [];
var map = null;
function init(mapInstance) {
map = mapInstance;
// 测距专用图层
measureSource = new ol.source.Vector();
measureLayer = new ol.layer.Vector({
source: measureSource,
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.2)' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
image: new ol.style.RegularShape({
points: 4,
radius: 8,
radius2: 0,
angle: Math.PI / 4,
stroke: new ol.style.Stroke({ color: '#ed8936', width: 2 })
})
})
});
if (map) {
map.addLayer(measureLayer);
}
}
function toggleMeasureDistance() {
if (measureActive) {
deactivateMeasure();
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('测距功能已关闭');
}
} else {
activateMeasure();
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('点击左键添加距离节点，点击右键结束测量 :)');
}
}
var menu = document.getElementById('mapFunctionsMenu');
if (menu) {
menu.classList.remove('show');
}
}
function finishMeasuring() {
if (measureActive && currentSketch && measureDraw) {
measureDraw.finishDrawing();
}
}
function activateMeasure() {
if (!map || !measureSource) return;
measureActive = true;
// 显示测量状态指示器
var measureStatus = document.getElementById('measureStatus');
if (measureStatus) {
measureStatus.style.display = 'flex';
}
measureDraw = new ol.interaction.Draw({
source: measureSource,
type: 'LineString',
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.2)' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
image: new ol.style.RegularShape({
points: 4,
radius: 8,
radius2: 0,
angle: Math.PI / 4,
stroke: new ol.style.Stroke({ color: '#ed8936', width: 2 })
})
})
});
map.addInteraction(measureDraw);
map.getViewport().addEventListener('contextmenu', function(e) {
if (measureActive && currentSketch) {
e.preventDefault();
measureDraw.finishDrawing();
}
});
measureDraw.on('drawstart', function(evt) {
currentSketch = evt.feature;
currentMeasureTooltips = [];
segmentTooltips = [];
currentListener = currentSketch.getGeometry().on('change', function(e) {
var geom = e.target;
var coords = geom.getCoordinates();
clearTemporaryTooltips();
clearSegmentTooltips();
// 计算并显示每个节点的距离
var total = 0;
for (var i = 0; i < coords.length; i++) {
if (i === 0) {
// 起点
var startTooltip = createMeasureTooltip(coords[0], '起点');
currentMeasureTooltips.push(startTooltip);
} else {
// 计算段距离
var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
var segmentLength = ol.sphere.getLength(seg);
total += segmentLength;
// 显示每个节点的累计距离
var output = formatLength(total);
var tooltip = createMeasureTooltip(coords[i], output);
segmentTooltips.push(tooltip);
if (i === coords.length - 1) {
currentMeasureTooltips.push(tooltip);
}
}
}
});
});
// 绘制结束
measureDraw.on('drawend', function(evt) {
var coords = evt.feature.getGeometry().getCoordinates();
clearTemporaryTooltips();
clearSegmentTooltips();
var total = 0;
for (var i = 0; i < coords.length; i++) {
if (i === 0) {
var startTooltip = createMeasureTooltip(coords[0], '起点', true);
measureTooltips.push(startTooltip);
} else {
var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
total += ol.sphere.getLength(seg);
var output = formatLength(total);
var tooltip = createMeasureTooltip(coords[i], output, true);
measureTooltips.push(tooltip);
}
}
measureFeatures.push(evt.feature);
if (currentListener) {
ol.Observable.unByKey(currentListener);
}
currentSketch = null;
currentListener = null;
var measureStatus = document.getElementById('measureStatus');
if (measureStatus) {
measureStatus.style.display = 'none';
}
map.removeInteraction(measureDraw);
measureActive = false;
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('测量完成');
}
});
}
function deactivateMeasure() {
measureActive = false;
var measureStatus = document.getElementById('measureStatus');
if (measureStatus) {
measureStatus.style.display = 'none';
}
if (measureDraw && map) {
map.removeInteraction(measureDraw);
measureDraw = null;
}
if (currentListener) {
ol.Observable.unByKey(currentListener);
currentListener = null;
}
currentSketch = null;
clearTemporaryTooltips();
clearSegmentTooltips();
}
function createMeasureTooltip(coord, text, isStatic) {
var elem = document.createElement('div');
elem.className = isStatic ? 'ol-tooltip ol-tooltip-static' : 'ol-tooltip ol-tooltip-measure';
elem.innerHTML = text;
var overlay = new ol.Overlay({
element: elem,
offset: [0, -15],
positioning: 'bottom-center'
});
overlay.setPosition(coord);
if (map) {
map.addOverlay(overlay);
}
return overlay;
}
function formatLength(length) {
if (length > 1000) {
return (Math.round(length / 100) / 10) + ' km';
} else {
return (Math.round(length * 10) / 10) + ' m';
}
}
function clearAllMeasureTooltips() {
if (!map) return;
for (var i = 0; i < measureTooltips.length; i++) {
map.removeOverlay(measureTooltips[i]);
}
measureTooltips = [];
clearTemporaryTooltips();
}
function clearTemporaryTooltips() {
if (!map) return;
for (var i = 0; i < currentMeasureTooltips.length; i++) {
map.removeOverlay(currentMeasureTooltips[i]);
}
currentMeasureTooltips = [];
}
function clearSegmentTooltips() {
if (!map) return;
for (var i = 0; i < segmentTooltips.length; i++) {
map.removeOverlay(segmentTooltips[i]);
}
segmentTooltips = [];
}
function clearMeasure() {
if (measureSource) {
measureSource.clear();
}
clearAllMeasureTooltips();
measureFeatures = [];
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('测距标记已清除');
}
// 关闭地图功能菜单
var menu = document.getElementById('mapFunctionsMenu');
if (menu) {
menu.classList.remove('show');
}
}
function isActive() {
return measureActive;
}
function getMeasureCount() {
return measureFeatures.length;
}
return {
init: init,
toggleMeasureDistance: toggleMeasureDistance,
finishMeasuring: finishMeasuring,
clearMeasure: clearMeasure,
isActive: isActive,
getMeasureCount: getMeasureCount
};
})();

183
sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js Normal file
View File

@ -0,0 +1,183 @@
var SearchFilter = (function() {
'use strict';
var currentSearchedDevice = null;
var markerState = 3; // 1:all; 2:orange; 3:red
function searchDevice(deviceId) {
if (!deviceId || !deviceId.trim()) {
clearSearch();
return false;
}
deviceId = deviceId.trim();
currentSearchedDevice = deviceId;
var success = DeviceMarkers.locateDevice(deviceId);
if (success) {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('已定位到设备: ' + deviceId);
}
// 获取设备信息并显示天气预测（如果启用）
var targetFeature = DeviceMarkers.findDeviceById(deviceId);
if (targetFeature && window.WeatherForecast && window.WeatherForecast.isEnabled()) {
var deviceInfo = targetFeature.get('deviceInfo');
if (deviceInfo) {
window.WeatherForecast.showWeatherForecast(deviceInfo);
}
}
} else {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('未找到设备: ' + deviceId);
}
}
return success;
}
function clearSearch() {
currentSearchedDevice = null;
var searchInput = document.getElementById('deviceSearchNew');
if (searchInput) {
searchInput.value = '';
}
// 恢复到当前的过滤状态
applyCurrentFilter();
}
function applyCurrentFilter() {
switch(markerState) {
case 1:
showAllDevices();
break;
case 2:
showWarning1Devices();
break;
case 3:
showWarning2Devices();
break;
}
}
function showAllDevices() {
currentSearchedDevice = null;
clearSearchInput();
DeviceMarkers.showAllDevices();
markerState = 1;
updateFilterSelect('all');
}
function showWarning1Devices() {
currentSearchedDevice = null;
clearSearchInput();
DeviceMarkers.showWarning1Devices();
markerState = 2;
updateFilterSelect('warning1');
}
function showWarning2Devices() {
currentSearchedDevice = null;
clearSearchInput();
DeviceMarkers.showWarning2Devices();
markerState = 3;
updateFilterSelect('warning2');
}
function clearSearchInput() {
var searchInput = document.getElementById('deviceSearchNew');
if (searchInput) {
searchInput.value = '';
}
}
function updateFilterSelect(filterValue) {
var filterSelect = document.getElementById('warningFilter');
if (filterSelect) {
filterSelect.value = filterValue;
}
}
function filterDevicesByStatus(statusType) {
switch(statusType) {
case 'warning1':
showWarning1Devices();
break;
case 'warning2':
showWarning2Devices();
break;
case 'offline':
case 'no_fwd':
case 'nofixed':
case 'nogga':
// 对于这些状态，显示所有设备，让用户在弹窗中选择
showAllDevices();
break;
default:
showAllDevices();
break;
}
}
function queryDevices(statusType) {
filterDevicesByStatus(statusType);
// 打开设备列表弹窗
if (window.layer && typeof window.layer.open === 'function') {
var index = window.layer.open({
title: '设备列表',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
anim: 2,
offset: 'rb',
area: ['100%', '50%'],
content: '../page/gnss_q_status?query=' + statusType,
});
}
}
function locateDeviceOnMap(deviceId, latitude, longitude) {
currentSearchedDevice = deviceId;
var success = DeviceMarkers.locateDevice(deviceId);
if (success && window.layer && typeof window.layer.closeAll === 'function') {
window.layer.closeAll();
}
return success;
}
function locateDeviceDirectly(deviceId) {
currentSearchedDevice = deviceId;
return DeviceMarkers.locateDevice(deviceId);
}
function getCurrentSearchedDevice() {
return currentSearchedDevice;
}
function getMarkerState() {
return markerState;
}
function setMarkerState(state) {
markerState = state;
}
return {
searchDevice: searchDevice,
clearSearch: clearSearch,
showAllDevices: showAllDevices,
showWarning1Devices: showWarning1Devices,
showWarning2Devices: showWarning2Devices,
filterDevicesByStatus: filterDevicesByStatus,
queryDevices: queryDevices,
locateDeviceOnMap: locateDeviceOnMap,
locateDeviceDirectly: locateDeviceDirectly,
getCurrentSearchedDevice: getCurrentSearchedDevice,
getMarkerState: getMarkerState,
setMarkerState: setMarkerState
};
})();

307
sec-beidou/src/main/resources/static/js/device-overview-module/weather-forecast.js Normal file
View File

@ -0,0 +1,307 @@
var WeatherForecast = (function() {
'use strict';
var weatherApiKey = 'Uxh4IdMuAvhSiBnsf4UUDVGF4e3YAp2B';
var weatherEnabled = false;
var weatherData = null;
var currentForecastIndex = 0;
var currentWeatherDevice = null;
function init() {
// 天气预报模块初始化完成
}
function toggleWeatherForecast() {
var role = window.userRole || 'USER';
if (role !== 'SUPER_ADMIN') {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('您没有权限使用此功能');
}
return;
}
var enableSwitch = document.getElementById('enableWeatherSwitch');
weatherEnabled = enableSwitch ? enableSwitch.checked : false;
if (weatherEnabled) {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg(
'搜索设备或点击地图设备图标即可自动查询天气预测',
{time: 3000, area: ['300px', '80px']}
);
}
} else {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('天气预测功能已关闭');
}
closeWeatherCard();
}
var menu = document.getElementById('mapFunctionsMenu');
if (menu) {
menu.classList.remove('show');
}
}
function showWeatherForecast(deviceInfo) {
currentWeatherDevice = deviceInfo;
weatherData = null;
var role = window.userRole || 'USER';
if (role !== 'SUPER_ADMIN') {
return;
}
if (!weatherEnabled) {
if (window.layer && typeof window.layer.msg === 'function') {
window.layer.msg('天气预测功能未启用', {time: 2000});
}
return;
}
var deviceIdElement = document.getElementById('weatherDeviceId');
var deviceCoordsElement = document.getElementById('weatherDeviceCoords');
if (deviceIdElement) {
deviceIdElement.textContent = '设备: ' + deviceInfo.deviceid;
}
if (deviceCoordsElement) {
deviceCoordsElement.textContent =
'坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);
}
var weatherCard = document.getElementById('weatherForecastCard');
if (weatherCard) {
weatherCard.style.display = 'block';
}
var contentElement = document.getElementById('weatherForecastContent');
if (contentElement) {
contentElement.innerHTML =
'<div class="weather-loading">' +
'<i class="layui-icon layui-icon-loading layui-icon-anim-rotate"></i>' +
'<p>请确保网络可访问 Windy API 服务</p>' +
'<p>正在获取天气预测数据...</p>' +
'</div>';
}
var prevBtn = document.getElementById('prevForecast');
var nextBtn = document.getElementById('nextForecast');
var timeDisplay = document.getElementById('forecastTimeDisplay');
if (prevBtn) prevBtn.disabled = true;
if (nextBtn) nextBtn.disabled = true;
if (timeDisplay) timeDisplay.textContent = '--:--';
fetchWeatherData(deviceInfo.latitude, deviceInfo.longitude);
}
function closeWeatherCard() {
var weatherCard = document.getElementById('weatherForecastCard');
if (weatherCard) {
weatherCard.style.display = 'none';
}
currentWeatherDevice = null;
weatherData = null;
}
function showPrevForecast() {
if (!weatherData || currentForecastIndex <= 0) return;
currentForecastIndex--;
displayCurrentForecast();
updateForecastNavigation();
}
function showNextForecast() {
if (!weatherData || !weatherData.ts || currentForecastIndex >= weatherData.ts.length - 1) return;
currentForecastIndex++;
displayCurrentForecast();
updateForecastNavigation();
}
function updateForecastNavigation() {
if (!weatherData || !weatherData.ts) return;
var prevBtn = document.getElementById('prevForecast');
var nextBtn = document.getElementById('nextForecast');
var timeDisplay = document.getElementById('forecastTimeDisplay');
if (prevBtn) prevBtn.disabled = (currentForecastIndex <= 0);
if (nextBtn) nextBtn.disabled = (currentForecastIndex >= weatherData.ts.length - 1);
if (timeDisplay) {
var timestamp = weatherData.ts[currentForecastIndex];
var date = new Date(timestamp);
timeDisplay.textContent = formatDateTime(date);
}
}
function fetchWeatherData(lat, lon) {
var requestBody = {
"lat": parseFloat(lat.toFixed(2)),
"lon": parseFloat(lon.toFixed(2)),
"model": "gfs",
"parameters": ["temp", "wind", "precip", "pressure", "rh", "windGust"],
"levels": ["surface"],
"key": weatherApiKey,
"hours": 72
};
fetch('https://api.windy.com/api/point-forecast/v2', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(requestBody)
})
.then(function(response) {
if (!response.ok) {
throw new Error('网络响应状态: ' + response.status);
}
return response.json();
})
.then(function(data) {
weatherData = data;
var currentTime = new Date().getTime();
var closestIndex = 0;
var futureIndex = -1;
if (weatherData.ts && weatherData.ts.length > 0) {
for (var i = 0; i < weatherData.ts.length; i++) {
if (weatherData.ts[i] > currentTime) {
futureIndex = i;
break;
}
}
if (futureIndex >= 0) {
closestIndex = futureIndex;
} else {
var smallestDiff = Number.MAX_VALUE;
for (var i = 0; i < weatherData.ts.length; i++) {
var diff = Math.abs(weatherData.ts[i] - currentTime);
if (diff < smallestDiff) {
smallestDiff = diff;
closestIndex = i;
}
}
}
}
currentForecastIndex = closestIndex;
displayCurrentForecast();
updateForecastNavigation();
})
.catch(function(error) {
console.error('天气数据获取失败:', error);
displayWeatherError('获取天气数据失败: ' + error.message);
});
}
function displayCurrentForecast() {
if (!weatherData || !weatherData.ts || weatherData.ts.length === 0) {
displayWeatherError('无可用的天气预测数据');
return;
}
var i = currentForecastIndex;
var forecastHtml = '<div class="weather-forecast-item"><div class="weather-param-grid">';
if (weatherData['temp-surface'] && weatherData['temp-surface'][i] !== null) {
var temp = (weatherData['temp-surface'][i] - 273.15).toFixed(1);
forecastHtml += createWeatherParam('温度', temp + '°C');
}
if (weatherData['wind_u-surface'] && weatherData['wind_v-surface'] &&
weatherData['wind_u-surface'][i] !== null && weatherData['wind_v-surface'][i] !== null) {
var windU = weatherData['wind_u-surface'][i];
var windV = weatherData['wind_v-surface'][i];
var windSpeed = Math.sqrt(windU * windU + windV * windV).toFixed(1);
var windDir = getWindDirection(windU, windV);
forecastHtml += createWeatherParam('风速', windSpeed + ' m/s');
forecastHtml += createWeatherParam('风向', windDir);
}
if (weatherData['past3hprecip-surface'] && weatherData['past3hprecip-surface'][i] !== null) {
var precip = weatherData['past3hprecip-surface'][i].toFixed(1);
forecastHtml += createWeatherParam('降水', precip + ' mm');
}
if (weatherData['rh-surface'] && weatherData['rh-surface'][i] !== null) {
var humidity = weatherData['rh-surface'][i].toFixed(0);
forecastHtml += createWeatherParam('湿度', humidity + '%');
}
if (weatherData['pressure-surface'] && weatherData['pressure-surface'][i] !== null) {
var pressure = (weatherData['pressure-surface'][i] / 100).toFixed(0);
forecastHtml += createWeatherParam('气压', pressure + ' hPa');
}
if (weatherData['gust-surface'] && weatherData['gust-surface'][i] !== null) {
var gust = weatherData['gust-surface'][i].toFixed(1);
forecastHtml += createWeatherParam('阵风', gust + ' m/s');
}
forecastHtml += '</div></div>';
var contentElement = document.getElementById('weatherForecastContent');
if (contentElement) {
contentElement.innerHTML = forecastHtml;
}
}
function displayWeatherError(message) {
var contentElement = document.getElementById('weatherForecastContent');
if (contentElement) {
contentElement.innerHTML =
'<div class="weather-error">' +
'<i class="layui-icon layui-icon-close"></i>' +
'<p>' + message + '</p>' +
'</div>';
}
}
function createWeatherParam(label, value) {
return '<div class="weather-param">' +
'<span class="weather-param-label">' + label + '</span>' +
'<span class="weather-param-value">' + value + '</span>' +
'</div>';
}
function formatDateTime(date) {
var month = (date.getMonth() + 1).toString().padStart(2, '0');
var day = date.getDate().toString().padStart(2, '0');
var hours = date.getHours().toString().padStart(2, '0');
var minutes = date.getMinutes().toString().padStart(2, '0');
return month + '-' + day + ' ' + hours + ':' + minutes;
}
function getWindDirection(u, v) {
var angle = Math.atan2(-u, -v) * 180 / Math.PI;
angle = (angle + 360) % 360;
var directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
var index = Math.round(angle / 45) % 8;
return directions[index];
}
function isEnabled() {
return weatherEnabled;
}
return {
init: init,
toggleWeatherForecast: toggleWeatherForecast,
showWeatherForecast: showWeatherForecast,
closeWeatherCard: closeWeatherCard,
showPrevForecast: showPrevForecast,
showNextForecast: showNextForecast,
isEnabled: isEnabled
};
})();

1852
sec-beidou/src/main/resources/templates/page/device_overview.html
View File

File diff suppressed because it is too large Load Diff