diff --git a/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js b/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js index 295db851..c150d984 100644 --- a/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js +++ b/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; \ No newline at end of file +window.locateMyLocation = DeviceOverview.locateMyLocation; +window.clearDeviceFilter = DeviceOverview.clearDeviceFilter; \ No newline at end of file diff --git a/sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js b/sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js index 9362efd0..09cc91e5 100644 --- a/sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js +++ b/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 = + '定位中' + + ''; + + 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 = ''; } - // 恢复到当前的过滤状态 - applyCurrentFilter(); + if (isFilterActive) { + 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 }; })(); \ No newline at end of file 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 a120d556..00f2798b 100644 --- a/sec-beidou/src/main/resources/templates/page/device_overview.html +++ b/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; + } + + } @@ -896,7 +916,7 @@
- +
@@ -962,11 +982,14 @@ + + @@ -1026,6 +1049,7 @@ window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap; window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly; window.switchMapType = DeviceOverview.switchMapType; + window.locateMyLocation = DeviceOverview.locateMyLocation;