From 07f1057c2b28206cdae1f7dfda3c454ff48f9c43 Mon Sep 17 00:00:00 2001 From: fengyarnom Date: Tue, 10 Jun 2025 09:20:20 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=AE=BE?= =?UTF-8?q?=E5=A4=87=E5=9C=A8=E5=9C=B0=E5=9B=BE=E6=9F=A5=E8=AF=A2=E7=9A=84?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../templates/page/device_overview.html | 187 +++++++++++++++--- 1 file changed, 160 insertions(+), 27 deletions(-) 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 5b7a558f..bbbfaac7 100644 --- a/sec-beidou/src/main/resources/templates/page/device_overview.html +++ b/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 @@
    -
  • 全部
    • -
  • 一般告警
    • -
  • 严重告警
    • +
  • 全部
    • +
  • 一般告警
    • +
  • 严重告警
-
-
-
- +
+
+ +
+ +
+ +
+
- +
+ + +
+
-
@@ -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(); - hideRed(); - } else if (marker_state === 3) { - hideGreen(); - hideOrange(); + // 根据当前搜索状态显示或隐藏设备 + if (currentSearchedDevice) { + filterByDeviceId(currentSearchedDevice); + } else { + // 恢复当前过滤状态 + 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) {