feat：新增设备在地图查询的功能

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

@@ -56,7 +56,7 @@
             text-align: center;
             line-height: 30px;
         }
-        .btn:hover {
+        .btn:hover, .btn.active {
             background-color: rgba(27, 142, 236, 0.8);
             color: #fff;
         }
@@ -64,17 +64,47 @@
             height: 85vh;
             width: 100%;
             padding:0px;
+            position: relative;
         }
-        .map-controls {
+        .map-control-card {
             position: absolute;
             top: 10px;
             right: 10px;
             z-index: 1000;
             background: white;
-            padding: 8px;
+            padding: 10px;
             border-radius: 3px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-            min-width: 120px;
+            min-width: 220px;
+        }
+        .map-control-card .title {
+            font-size: 14px;
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #1aa094;
+        }
+        .search-box {
+            display: flex;
+            margin-bottom: 10px;
+        }
+        .search-box input {
+            flex: 1;
+            border: 1px solid #e6e6e6;
+            height: 30px;
+            padding: 0 10px;
+        }
+        .search-box button {
+            width: 50px;
+            height: 30px;
+            background-color: #1aa094;
+            color: white;
+            border: none;
+            border-radius: 3px;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+        .search-box button:hover {
+            background-color: #148e83;
         }
         .map-controls select {
             width: 100%;
@@ -129,25 +159,31 @@
     <div class="layui-row layui-col-space15">
         <div class="layui-card top-panel">
             <ul class="btn-wrap" style="z-index: 99;">
-                <li class="light btn" onclick="showAll()">全部</li>
+                <li class="light btn" id="btn-all" onclick="showAll()">全部</li>
-                <li class="night btn" onclick="showWarning1()">一般告警</li>
+                <li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
-                <li class="night btn" onclick="showWarning2()">严重告警</li>
+                <li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
             </ul>
-            <div class="map-controls">
+            <div id="map-container" class="layui-card-body">
-                <form class="layui-form">
+                <div class="map-control-card">
-                    <div class="layui-form-item">
+                    
-                        <select id="mapTypeSelect" lay-filter="mapType">
+                    <div class="map-controls">
-                            <option value="tianditu_satellite" selected>天地图-卫星影像</option>
+                        <form class="layui-form">
-                            <option value="tianditu_normal">天地图-矢量</option>
+                            <div class="layui-form-item">
-                            <option value="amap_satellite">高德-卫星影像</option>
+                                <select id="mapTypeSelect" lay-filter="mapType">
-                            <option value="amap">高德-矢量</option>
+                                    <option value="tianditu_satellite" selected>天地图-卫星影像</option>
-
+                                    <option value="tianditu_normal">天地图-矢量</option>
-
+                                    <option value="amap_satellite">高德-卫星影像</option>
-                        </select>
+                                    <option value="amap">高德-矢量</option>
+                                </select>
+                            </div>
+                        </form>
                     </div>
-                </form>
+                    <div class="search-box">
+                        <input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
+                        <button onclick="searchDevice()">搜索</button>
+                    </div>
+                </div>
             </div>
-            <div id="map-container" class="layui-card-body"></div>
         </div>
     </div>
 
@@ -163,7 +199,9 @@
     var greenFeatures = [];
     var orangeFeatures = [];
     var redFeatures = [];
-    var marker_state = 1; // 1:all; 2:orange; 3:red
+    var marker_state = 3; // 1:all; 2:orange; 3:red
+    var allFeatures = []; // 存储所有设备标记，用于搜索功能
+    var currentSearchedDevice = null; // 当前搜索的设备ID
 
     // 天地图 API 密钥（fengyarnom@gmail.com）
     var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
@@ -330,6 +368,7 @@
         greenFeatures = [];
         orangeFeatures = [];
         redFeatures = [];
+        allFeatures = [];
         
         for (var i = 0; i < deviceList.length; i++) {
             var device = deviceList[i];
@@ -379,15 +418,22 @@
             });
 
             feature.setStyle(style);
+            allFeatures.push(feature);
             vectorSource.addFeature(feature);
         }
 
-        if (marker_state === 2) {
+        // 根据当前搜索状态显示或隐藏设备
-            hideGreen();
+        if (currentSearchedDevice) {
-            hideRed();
+            filterByDeviceId(currentSearchedDevice);
-        } else if (marker_state === 3) {
+        } else {
-            hideGreen();
+            // 恢复当前过滤状态
-            hideOrange();
+            if (marker_state === 2) {
+                hideGreen();
+                hideRed();
+            } else if (marker_state === 3) {
+                hideGreen();
+                hideOrange();
+            }
         }
     }
 
@@ -418,6 +464,11 @@
     }
 
     function showAll() {
+        // 更新按钮样式
+        document.getElementById('btn-all').classList.add('active');
+        document.getElementById('btn-warning1').classList.remove('active');
+        document.getElementById('btn-warning2').classList.remove('active');
+        
         if (marker_state == 2) {
             showGreen();
             showRed();
@@ -427,9 +478,18 @@
             showOrange();
             marker_state = 1;
         }
+        
+        // 如果有搜索，清除搜索条件
+        currentSearchedDevice = null;
+        document.getElementById('deviceSearch').value = '';
     }
 
     function showWarning1() {
+        // 更新按钮样式
+        document.getElementById('btn-all').classList.remove('active');
+        document.getElementById('btn-warning1').classList.add('active');
+        document.getElementById('btn-warning2').classList.remove('active');
+        
         if (marker_state == 1) {
             hideGreen();
             hideRed();
@@ -439,9 +499,18 @@
             showOrange();
             marker_state = 2;
         }
+        
+        // 如果有搜索，清除搜索条件
+        currentSearchedDevice = null;
+        document.getElementById('deviceSearch').value = '';
     }
 
     function showWarning2() {
+        // 更新按钮样式
+        document.getElementById('btn-all').classList.remove('active');
+        document.getElementById('btn-warning1').classList.remove('active');
+        document.getElementById('btn-warning2').classList.add('active');
+        
         if (marker_state == 1) {
             hideGreen();
             hideOrange();
@@ -451,6 +520,10 @@
             showRed();
             marker_state = 3;
         }
+        
+        // 如果有搜索，清除搜索条件
+        currentSearchedDevice = null;
+        document.getElementById('deviceSearch').value = '';
     }
 
     function showGreen() {
@@ -494,6 +567,63 @@
             vectorSource.removeFeature(redFeatures[i]);
         }
     }
+    
+    // 搜索设备函数
+    function searchDevice() {
+        var deviceId = document.getElementById('deviceSearch').value.trim();
+        
+        if (!deviceId) {
+            // 如果搜索框为空，则显示所有设备（根据当前过滤状态）
+            currentSearchedDevice = null;
+            vectorSource.clear();
+            
+            for (var i = 0; i < allFeatures.length; i++) {
+                vectorSource.addFeature(allFeatures[i]);
+            }
+            
+            // 恢复过滤状态
+            if (marker_state === 2) {
+                hideGreen();
+                hideRed();
+            } else if (marker_state === 3) {
+                hideGreen();
+                hideOrange();
+            }
+            
+            return;
+        }
+        
+        currentSearchedDevice = deviceId;
+        filterByDeviceId(deviceId);
+    }
+    
+    // 根据设备ID过滤显示
+    function filterByDeviceId(deviceId) {
+        vectorSource.clear();
+        
+        var foundFeature = null;
+        
+        // 查找匹配的设备
+        for (var i = 0; i < allFeatures.length; i++) {
+            var feature = allFeatures[i];
+            var featureDeviceId = feature.get('deviceInfo').deviceid;
+            
+            // 部分匹配，包含搜索字符串即可
+            if (featureDeviceId.indexOf(deviceId) !== -1) {
+                vectorSource.addFeature(feature);
+                foundFeature = feature;
+            }
+        }
+        
+        // 如果找到设备，则将地图中心设置到该设备位置
+        if (foundFeature) {
+            var geometry = foundFeature.getGeometry();
+            var coordinate = geometry.getCoordinates();
+            
+            map.getView().setCenter(coordinate);
+            map.getView().setZoom(15); // 放大到适当级别
+        }
+    }
     layui.use(['form'], function(){
         var form = layui.form;
         form.on('select(mapType)', function(data){
@@ -501,6 +631,9 @@
         });
 
         initialize();
+        
+        // 初始化页面时，默认显示"严重告警"
+        showWarning2();
     });
 
     function queryDevices(status_type) {