feat：新增设备在地图查询的功能
This commit is contained in:
fengyarnom
parent
0b777802bf
commit
07f1057c2b
@ -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,10 +159,13 @@
|
||||
<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="night btn" onclick="showWarning1()">一般告警</li>
|
||||
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
||||
<li class="light btn" id="btn-all" onclick="showAll()">全部</li>
|
||||
<li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
|
||||
<li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
|
||||
</ul>
|
||||
<div id="map-container" class="layui-card-body">
|
||||
<div class="map-control-card">
|
||||
|
||||
<div class="map-controls">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
@ -141,13 +174,16 @@
|
||||
<option value="tianditu_normal">天地图-矢量</option>
|
||||
<option value="amap_satellite">高德-卫星影像</option>
|
||||
<option value="amap">高德-矢量</option>
|
||||
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="map-container" class="layui-card-body"></div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
|
||||
<button onclick="searchDevice()">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
</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,9 +418,15 @@
|
||||
});
|
||||
|
||||
feature.setStyle(style);
|
||||
allFeatures.push(feature);
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
|
||||
// 根据当前搜索状态显示或隐藏设备
|
||||
if (currentSearchedDevice) {
|
||||
filterByDeviceId(currentSearchedDevice);
|
||||
} else {
|
||||
// 恢复当前过滤状态
|
||||
if (marker_state === 2) {
|
||||
hideGreen();
|
||||
hideRed();
|
||||
@ -390,6 +435,7 @@
|
||||
hideOrange();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function myLocation() {
|
||||
if (navigator.geolocation) {
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user