diff --git a/sec-beidou/src/main/resources/templates/page/device_overview.html b/sec-beidou/src/main/resources/templates/page/device_overview.html index 1138efa8..003bc5f6 100644 --- a/sec-beidou/src/main/resources/templates/page/device_overview.html +++ b/sec-beidou/src/main/resources/templates/page/device_overview.html @@ -1245,6 +1245,8 @@ var deviceInfo = feature.get('deviceInfo'); 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'; @@ -1258,7 +1260,7 @@ image: new ol.style.Icon({ anchor: [0.5, 1], src: iconSrc, - scale: 0.7 + scale: scale }) }); @@ -1267,9 +1269,14 @@ style.setText(new ol.style.Text({ text: deviceInfo.deviceid, offsetY: -30, - fill: new ol.style.Fill({ color: color }), - stroke: new ol.style.Stroke({ color: '#fff', width: 2 }), - font: '12px Arial' + 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' })); } @@ -1365,6 +1372,45 @@ vectorLayer.changed(); }); + // 鼠标悬停效果 + var hoveredFeature = null; + + // 鼠标移动事件 + 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; @@ -1382,12 +1428,20 @@ } else if (features && features.length === 1) { // 单个设备点击 var deviceInfo = features[0].get('deviceInfo'); - if (deviceInfo && weatherEnabled) { - showWeatherForecast(deviceInfo); + if (deviceInfo) { + // 显示设备信息 + showDeviceInfo(deviceInfo); + // 如果天气预测开启,显示天气卡片 + if (weatherEnabled) { + showWeatherForecast(deviceInfo); + } } } else if (feature.get('deviceInfo')) { // 直接点击设备标记 var deviceInfo = feature.get('deviceInfo'); + // 显示设备信息 + showDeviceInfo(deviceInfo); + // 如果天气预测开启,显示天气卡片 if (weatherEnabled) { showWeatherForecast(deviceInfo); } @@ -1523,7 +1577,7 @@ function onMapTypeChange() { var mapType = document.getElementById('mapTypeSelectNew').value; - if(mapType.startsWith('google_') && /*[[${role}]]*/ 'USER' != "SUPER_ADMIN") { + if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") { layer.msg('拒绝使用'); document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid'; mapType = 'tianditu_terrain_hybrid'; @@ -2209,16 +2263,49 @@ document.getElementById('mapFunctionsMenu').classList.remove('show'); } - // 显示天气预测卡片 - function showWeatherForecast(deviceInfo) { - if (!weatherEnabled) { - return; + // 显示设备信息 + function showDeviceInfo(deviceInfo) { + var infoMsg = '
' + + '

设备编号: ' + deviceInfo.deviceid + '

' + + '

坐标: ' + deviceInfo.latitude.toFixed(6) + ', ' + deviceInfo.longitude.toFixed(6) + '

'; + + if (deviceInfo.warning === 2) { + infoMsg += '

状态: 严重告警

'; + } else if (deviceInfo.warning === 1) { + infoMsg += '

状态: 一般告警

'; + } else { + infoMsg += '

状态: 正常

'; } + infoMsg += '
'; + + layer.open({ + type: 1, + title: '设备信息', + area: ['300px', 'auto'], + shade: 0, + offset: 'auto', + content: infoMsg, + time: 3000, + anim: 2 + }); + } + + // 显示天气预测卡片 + function showWeatherForecast(deviceInfo) { currentWeatherDevice = deviceInfo; currentForecastIndex = 0; weatherData = null; + if (!weatherEnabled) { + // 如果天气预测未启用,显示提示信息 + layer.msg( + '天气预测功能未启用,请在地图功能菜单中开启', + {time: 2000} + ); + return; + } + document.getElementById('weatherDeviceId').textContent = '设备: ' + deviceInfo.deviceid; document.getElementById('weatherDeviceCoords').textContent = '坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);