feat: 优化页面效果

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 }),
+                            fill: new ol.style.Fill({ 
-                            stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
+                                color: isHovered ? '#1aa094' : color 
-                            font: '12px Arial'
+                            }),
+                            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) {
+                    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) {
+    function showDeviceInfo(deviceInfo) {
-        if (!weatherEnabled) {
+        var infoMsg = '<div style="padding: 10px; line-height: 1.5;">' +
-            return;
+            '<p><strong>设备编号:</strong> ' + deviceInfo.deviceid + '</p>' +
+            '<p><strong>坐标:</strong> ' + deviceInfo.latitude.toFixed(6) + ', ' + deviceInfo.longitude.toFixed(6) + '</p>';
+        
+        if (deviceInfo.warning === 2) {
+            infoMsg += '<p><strong>状态:</strong> <span style="color: #f56565;">严重告警</span></p>';
+        } else if (deviceInfo.warning === 1) {
+            infoMsg += '<p><strong>状态:</strong> <span style="color: #ed8936;">一般告警</span></p>';
+        } else {
+            infoMsg += '<p><strong>状态:</strong> <span style="color: #48bb78;">正常</span></p>';
         }
         
+        infoMsg += '</div>';
+        
+        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);