- - 全部
- - 一般告警
- - 严重告警
+ - 全部
+ - 一般告警
+ - 严重告警
-
@@ -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) {