Imdroid/security-monitor
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feature/ui #5

Merged
admin merged 6 commits from feature/ui into develop 2025-06-10 09:41:12 +00:00
Conversation 0 Commits 6 Files Changed 6 +160 -27
1 changed files with 160 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 07f1057c2b - Show all commits

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

@ -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="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 class="map-controls">
<form class="layui-form">
<div class="layui-form-item">
<select id="mapTypeSelect" lay-filter="mapType">
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
<option value="tianditu_normal">天地图-矢量</option>
<option value="amap_satellite">高德-卫星影像</option>
<option value="amap">高德-矢量</option>
</select>
<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">
<select id="mapTypeSelect" lay-filter="mapType">
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
<option value="tianditu_normal">天地图-矢量</option>
<option value="amap_satellite">高德-卫星影像</option>
<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();
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) {