feat: 新增多设备搜索

sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js

@@ -94,6 +94,10 @@ var DeviceOverview = (function() {
     function locateMyLocation() {
         return DeviceMarkers.locateMyLocation();
     }
+    
+    function clearDeviceFilter() {
+        return SearchFilter.clearDeviceFilter();
+    }
 
     return {
         init: init,
@@ -107,6 +111,7 @@ var DeviceOverview = (function() {
         locateDeviceOnMap: locateDeviceOnMap,
         locateDeviceDirectly: locateDeviceDirectly,
         locateMyLocation: locateMyLocation,
+        clearDeviceFilter: clearDeviceFilter,
 
         toggleMapFunctionsMenu: toggleMapFunctionsMenu,
         toggleDeviceId: toggleDeviceId,
@@ -140,4 +145,5 @@ window.showNextForecast = DeviceOverview.showNextForecast;
 window.queryDevices = DeviceOverview.queryDevices;
 window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap;
 window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly;
-window.locateMyLocation = DeviceOverview.locateMyLocation; 
+window.locateMyLocation = DeviceOverview.locateMyLocation;
+window.clearDeviceFilter = DeviceOverview.clearDeviceFilter; 

sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js

@@ -3,6 +3,8 @@ var SearchFilter = (function() {
     
     var currentSearchedDevice = null;
     var markerState = 3; // 1:all; 2:orange; 3:red
+    var filteredDeviceIds = [];
+    var isFilterActive = false; 
     
     function searchDevice(deviceId) {
         if (!deviceId || !deviceId.trim()) {
@@ -11,6 +13,13 @@ var SearchFilter = (function() {
         }
         
         deviceId = deviceId.trim();
+        
+        // 多设备
+        if (deviceId.indexOf(',') !== -1) {
+            return handleMultiDeviceSearch(deviceId);
+        }
+        
+        // 单设备
         currentSearchedDevice = deviceId;
         
         var success = DeviceMarkers.locateDevice(deviceId);
@@ -37,6 +46,126 @@ var SearchFilter = (function() {
         return success;
     }
     
+    function handleMultiDeviceSearch(deviceIdsString) {
+        var deviceIds = deviceIdsString.split(',').map(function(id) {
+            return id.trim();
+        }).filter(function(id) {
+            return id !== '';
+        });
+        
+        if (deviceIds.length === 0) {
+            clearSearch();
+            return false;
+        }
+        
+        filteredDeviceIds = deviceIds;
+        
+        var foundDevices = filterDevicesByIds(deviceIds);
+        
+        if (foundDevices.length > 0) {
+            showFilterStatus(deviceIds.length);
+            
+            isFilterActive = true;
+
+            var firstDevice = foundDevices[0];
+            var geometry = firstDevice.getGeometry();
+            var coordinates = geometry.getCoordinates();
+            
+            if (MapCore.getMap()) {
+                MapCore.getMap().getView().animate({
+                    center: coordinates,
+                    zoom: 12,
+                    duration: 1000
+                });
+            }
+            
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('已过滤显示 ' + foundDevices.length + ' 个设备');
+            }
+            
+            return true;
+        } else {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('未找到任何匹配的设备');
+            }
+            return false;
+        }
+    }
+    
+    function filterDevicesByIds(deviceIds) {
+        if (!DeviceMarkers.getAllFeatures) return [];
+        
+        var allFeatures = DeviceMarkers.getAllFeatures();
+        var foundDevices = [];
+        var vectorSource = MapCore.getVectorSource();
+        
+        if (!vectorSource) return [];
+        
+        var myLocationFeature = DeviceMarkers.getMyLocationFeature();
+        
+        vectorSource.clear();
+        
+        if (myLocationFeature) {
+            vectorSource.addFeature(myLocationFeature);
+        }
+        
+        for (var i = 0; i < allFeatures.length; i++) {
+            var feature = allFeatures[i];
+            var deviceInfo = feature.get('deviceInfo');
+            
+            if (deviceInfo) {
+                var deviceId = String(deviceInfo.deviceid).trim();
+                
+                for (var j = 0; j < deviceIds.length; j++) {
+                    var searchId = String(deviceIds[j]).trim();
+                    
+                    if (deviceId === searchId || 
+                        deviceId.indexOf(searchId) !== -1 || 
+                        deviceId.replace(/\s+/g, '') === searchId.replace(/\s+/g, '')) {
+                        vectorSource.addFeature(feature);
+                        foundDevices.push(feature);
+                        break;
+                    }
+                }
+            }
+        }
+        
+        return foundDevices;
+    }
+    
+    function showFilterStatus(count) {
+        var filterStatus = document.getElementById('filterStatus');
+        
+        if (filterStatus) {
+            filterStatus.innerHTML = 
+                '<span style="color: #1aa094; font-weight: bold; font-size: 12px;">定位中</span>' +
+                '<button class="toolbar-btn" onclick="clearDeviceFilter()" style="background: #f56565; margin-left: 6px;">' +
+                '<i class="layui-icon layui-icon-close" style="font-size: 12px;"></i>' +
+                '</button>';
+            
+            filterStatus.style.display = 'flex';
+        }
+    }
+    
+    function hideFilterStatus() {
+        var filterStatus = document.getElementById('filterStatus');
+        if (filterStatus) {
+            filterStatus.style.display = 'none';
+        }
+    }
+    
+    function clearDeviceFilter() {
+        isFilterActive = false;
+        filteredDeviceIds = [];
+        hideFilterStatus();
+        
+        applyCurrentFilter();
+        
+        if (window.layer && typeof window.layer.msg === 'function') {
+            window.layer.msg('已清除设备过滤');
+        }
+    }
+    
     function clearSearch() {
         currentSearchedDevice = null;
         var searchInput = document.getElementById('deviceSearchNew');
@@ -44,8 +173,12 @@ var SearchFilter = (function() {
             searchInput.value = '';
         }
         
-        // 恢复到当前的过滤状态
+        if (isFilterActive) {
-        applyCurrentFilter();
+            clearDeviceFilter();
+        } else {
+            // 恢复到当前的过滤状态
+            applyCurrentFilter();
+        }
     }
     
     function applyCurrentFilter() {
@@ -166,6 +299,14 @@ var SearchFilter = (function() {
         markerState = state;
     }
     
+    function isFilterModeActive() {
+        return isFilterActive;
+    }
+    
+    function getFilteredDeviceIds() {
+        return filteredDeviceIds;
+    }
+    
     return {
         searchDevice: searchDevice,
         clearSearch: clearSearch,
@@ -178,6 +319,9 @@ var SearchFilter = (function() {
         locateDeviceDirectly: locateDeviceDirectly,
         getCurrentSearchedDevice: getCurrentSearchedDevice,
         getMarkerState: getMarkerState,
-        setMarkerState: setMarkerState
+        setMarkerState: setMarkerState,
+        clearDeviceFilter: clearDeviceFilter,
+        isFilterModeActive: isFilterModeActive,
+        getFilteredDeviceIds: getFilteredDeviceIds
     };
 })(); 

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

@@ -526,11 +526,9 @@
 
         /* 测量状态指示器样式 */
         #measureStatus {
-            background: rgba(255, 255, 255, 0.98);
             border: 1px solid rgba(72, 187, 120, 0.3);
             border-radius: 8px;
             padding: 6px 12px;
-            box-shadow: 0 2px 8px rgba(72, 187, 120, 0.2);
             align-items: center;
             gap: 8px;
         }
@@ -541,6 +539,20 @@
             min-width: 24px;
         }
 
+        #filterStatus {
+            border: 1px solid rgba(26, 160, 148, 0.3);
+            border-radius: 8px;
+            padding: 6px 12px;
+            align-items: center;
+            gap: 8px;
+        }
+
+        #filterStatus .toolbar-btn {
+            padding: 2px 6px;
+            height: 24px;
+            min-width: 24px;
+        }
+
         .weather-forecast-card {
             position: absolute;
             top: 55%;
@@ -792,6 +804,14 @@
                 justify-content: center;
                 padding: 6px 0px;
             }
+            
+            #filterStatus {
+                display: flex;
+                justify-content: center;
+                padding: 6px 0px;
+            }
+            
+           
         }
     </style>
 
@@ -896,7 +916,7 @@
                     <div class="toolbar-divider"></div>
 
                     <div class="toolbar-item">
-                        <input type="text" id="deviceSearchNew" class="toolbar-input" placeholder="搜索设备编号">
+                        <input type="text" id="deviceSearchNew" class="toolbar-input" placeholder="设备编号">
                         <button class="toolbar-btn" onclick="searchDeviceNew()">搜索</button>
                     </div>
 
@@ -962,11 +982,14 @@
                     </div>
 
                     <div id="measureStatus" class="toolbar-item" style="display: none;">
-                        <span style="color: #48bb78; font-weight: bold; font-size: 12px;">测量中</span>
+                        <span style="color: #1aa094; font-weight: bold; font-size: 12px;">测量中</span>
                         <button class="toolbar-btn" onclick="finishMeasuring()" style="background: #f56565; margin-left: 6px;">
                             <i class="layui-icon layui-icon-close" style="font-size: 12px;"></i>
                         </button>
                     </div>
+                    
+                    <div id="filterStatus" class="toolbar-item" style="display: none;">
+                    </div>
                 </div>
 
 
@@ -1026,6 +1049,7 @@
     window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap;
     window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly;
     window.switchMapType = DeviceOverview.switchMapType;
+    window.locateMyLocation = DeviceOverview.locateMyLocation;
 </script>
 
 </body>