feat: 优化页面效果

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

@@ -1440,18 +1440,14 @@
     function locateDeviceOnMap(deviceId, latitude, longitude) {
         currentSearchedDevice = deviceId;
         filterByDeviceId(deviceId);
-
+        
-        var layerIndex = layer.open({
+        layer.closeAll();
-            title: '',
+        
-            type: 2,
+    }
-            shade: 0.2,
+    
-            maxmin: true,
+    function locateDeviceDirectly(deviceId) {
-            shadeClose: true,
+        currentSearchedDevice = deviceId;
-            anim: 2,
+        filterByDeviceId(deviceId);
-            offset: 'rb',
-            area: ['100%', '50%'],
-            content: '../page/gnss_q_status?query=' + deviceId,
-        });
     }
 
     function updateFilterButtonsState(state) {
@@ -1485,11 +1481,14 @@
         }
 
         if (found && targetFeature) {
-            // 将地图中心移动到该设备位置
             var geometry = targetFeature.getGeometry();
             var deviceCoord = geometry.getCoordinates();
-            map.getView().setCenter(deviceCoord);
+            
-            map.getView().setZoom(15);
+            map.getView().animate({
+                center: deviceCoord,
+                zoom: 16,
+                duration: 800  
+            });
             
             layer.msg('已定位到设备: ' + deviceId);
         } else {
@@ -1537,8 +1536,12 @@
     });
 
     function queryDevices(status_type) {
+        // 首先过滤地图上的设备显示
+        filterDevicesByStatus(status_type);
+        
+        // 然后打开设备列表弹窗
         var index = layer.open({
-            title: '',
+            title: '设备列表',
             type: 2,
             shade: 0.2,
             maxmin: true,
@@ -1549,6 +1552,51 @@
             content: '../page/gnss_q_status?query=' + status_type,
         });
     }
+    
+    // 新增：根据状态过滤地图上的设备
+    function filterDevicesByStatus(status_type) {
+        var savedMyLocationFeature = myLocationFeature;
+        vectorSource.clear();
+        
+        if (savedMyLocationFeature) {
+            vectorSource.addFeature(savedMyLocationFeature);
+        }
+        
+        // 根据状态类型显示对应的设备
+        switch(status_type) {
+            case 'warning1':
+                for (var i = 0; i < orangeFeatures.length; i++) {
+                    vectorSource.addFeature(orangeFeatures[i]);
+                }
+                marker_state = 2;
+                break;
+            case 'warning2':
+                for (var i = 0; i < redFeatures.length; i++) {
+                    vectorSource.addFeature(redFeatures[i]);
+                }
+                marker_state = 3;
+                break;
+            case 'offline':
+            case 'no_fwd':
+            case 'nofixed':
+            case 'nogga':
+                // 对于这些状态，显示所有设备，让用户在弹窗中选择
+                for (var i = 0; i < allFeatures.length; i++) {
+                    vectorSource.addFeature(allFeatures[i]);
+                }
+                marker_state = 1;
+                break;
+            default:
+                // 默认显示所有设备
+                for (var i = 0; i < allFeatures.length; i++) {
+                    vectorSource.addFeature(allFeatures[i]);
+                }
+                marker_state = 1;
+                break;
+        }
+        
+        vectorLayer.changed();
+    }
 
     function onWarningFilterChange() {
         var filterValue = document.getElementById('warningFilter').value;