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

feat: 适配手机端

Browse Source
This commit is contained in:
yarnom 2025-07-04 13:49:13 +08:00
parent c0d25ef0e7
commit 3cbeba9832
1 changed files with 17 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all"> <link rel="stylesheet" href="../css/public.css" media="all">
<link rel="stylesheet" href="../css/ol.css"> <link rel="stylesheet" href="../css/ol.css">
<!-- 谷歌地图的API接口，这个访问没有天地图的次数多，所以这边限制只有管理员能使用 -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEBxB5n9vikPHbfNMzo_dzneXJi77YqjE" async defer></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEBxB5n9vikPHbfNMzo_dzneXJi77YqjE" async defer></script>
<style> <style>
.top-panel { .top-panel {
@ -102,7 +103,6 @@
} }
/* 设备总览条样式 */
.device-overview-bar { .device-overview-bar {
background: white; background: white;
border: 1px solid #e6e8eb; border: 1px solid #e6e8eb;
@ -112,8 +112,6 @@
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: #333;
} }
/* 地图顶部功能条样式 */
.map-toolbar { .map-toolbar {
position: absolute; position: absolute;
top: 15px; top: 15px;
@ -253,6 +251,7 @@
color: #333; color: #333;
} }
/* 由于不使用layui的元素，所以这边还得适配手机端 */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.layuimini-main { .layuimini-main {
height: 108vh; height: 108vh;
@ -326,9 +325,6 @@
color: #333; color: #333;
} }
/* 移动端工具栏适配 */
.map-toolbar { .map-toolbar {
position: absolute; position: absolute;
transform: none; transform: none;
@ -351,11 +347,9 @@
.toolbar-label { .toolbar-label {
font-size: 10px; font-size: 10px;
display: none; /* 隐藏标签节省空间 */ display: none;
} }
.toolbar-select, .toolbar-select,
.toolbar-input { .toolbar-input {
font-size: 11px; font-size: 11px;
@ -370,7 +364,7 @@
} }
.toolbar-divider { .toolbar-divider {
display: none; /* 隐藏分隔线 */ display: none;
} }
#toolbar-device-locate span:not(.toolbar-label) { #toolbar-device-locate span:not(.toolbar-label) {
@ -378,7 +372,6 @@
padding: 2px 4px; padding: 2px 4px;
} }
/* 移动端下拉菜单适配 */
.dropdown-menu { .dropdown-menu {
min-width: 180px; min-width: 180px;
max-width: 95vw; max-width: 95vw;
@ -408,7 +401,6 @@
border: 1px solid #ffcc33; border: 1px solid #ffcc33;
} }
/* 下拉菜单样式 */
.dropdown-container { .dropdown-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -482,7 +474,6 @@
margin: 8px 0; margin: 8px 0;
} }
/* 开关样式 */
.switch-label { .switch-label {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -535,8 +526,6 @@
<body> <body>
<div class="layuimini-main"> <div class="layuimini-main">
<!-- 设备总览条 -->
<div class="device-overview-bar"> <div class="device-overview-bar">
<div class="overview-stats"> <div class="overview-stats">
<div class="stat-item non-clickable"> <div class="stat-item non-clickable">
@ -586,16 +575,16 @@
<div class="map-card"> <div class="map-card">
<div id="map-container"> <div id="map-container">
<!-- 新的地图工具栏 -->
<div class="map-toolbar"> <div class="map-toolbar">
<div class="toolbar-item"> <div class="toolbar-item">
<select id="mapTypeSelectNew" class="toolbar-select" lay-filter="mapTypeNew" onchange="onMapTypeChange()"> <select id="mapTypeSelectNew" class="toolbar-select" lay-filter="mapTypeNew" onchange="onMapTypeChange()">
<option value="tianditu_terrain_hybrid" selected>天地图-地形混合</option> <option value="tianditu_satellite" selected>天地图-卫星影像</option>
<option value="tianditu_satellite">天地图-卫星影像</option> <option value="tianditu_terrain_hybrid" >天地图-地形混合</option>
<option value="tianditu_normal">天地图-矢量</option> <option value="tianditu_normal">天地图-矢量</option>
<option value="tianditu_terrain">天地图-地形</option> <option value="tianditu_terrain">天地图-地形</option>
<option value="amap_satellite">高德-卫星影像</option> <option value="amap_satellite">高德-卫星影像</option>
<option value="amap">高德-矢量</option> <option value="amap">高德-矢量</option>
<!-- 只能超级管理员使用 -->
<option value="google_satellite" th:if="${role=='SUPER_ADMIN'}">谷歌-卫星影像</option> <option value="google_satellite" th:if="${role=='SUPER_ADMIN'}">谷歌-卫星影像</option>
<option value="google_terrain" th:if="${role=='SUPER_ADMIN'}">谷歌-地形图</option> <option value="google_terrain" th:if="${role=='SUPER_ADMIN'}">谷歌-地形图</option>
<option value="google_roadmap" th:if="${role=='SUPER_ADMIN'}">谷歌-道路图</option> <option value="google_roadmap" th:if="${role=='SUPER_ADMIN'}">谷歌-道路图</option>
@ -686,7 +675,7 @@
var showCluster = true; var showCluster = true;
var minZoomForLabels = 4; var minZoomForLabels = 4;
var maxZoomForClustering = 8; var maxZoomForClustering = 8;
// 测距专用source和layer // 测距
var measureSource; var measureSource;
var measureLayer; var measureLayer;
@ -1027,7 +1016,7 @@
}) })
}); });
// 创建测距专用图层 // 测距专用图层
measureSource = new ol.source.Vector(); measureSource = new ol.source.Vector();
measureLayer = new ol.layer.Vector({ measureLayer = new ol.layer.Vector({
source: measureSource, source: measureSource,
@ -1045,11 +1034,8 @@
}); });
map.addLayer(measureLayer); map.addLayer(measureLayer);
// 添加比例尺控件
var scaleLineControl = new ol.control.ScaleLine(); var scaleLineControl = new ol.control.ScaleLine();
map.addControl(scaleLineControl); map.addControl(scaleLineControl);
// 设置初始可见性状态
var initialZoom = map.getView().getZoom(); var initialZoom = map.getView().getZoom();
if (showCluster && initialZoom < maxZoomForClustering) { if (showCluster && initialZoom < maxZoomForClustering) {
clusterLayer.setVisible(true); clusterLayer.setVisible(true);
@ -1109,11 +1095,9 @@
myLocation(); myLocation();
startLocationUpdates(); startLocationUpdates();
// 设置默认显示模式
showDeviceId = true; showDeviceId = true;
showCluster = true; showCluster = true;
// 确保开关状态与默认值一致
document.getElementById('showDeviceIdSwitch').checked = showDeviceId; document.getElementById('showDeviceIdSwitch').checked = showDeviceId;
document.getElementById('showClusterSwitch').checked = showCluster; document.getElementById('showClusterSwitch').checked = showCluster;
} }
@ -1153,7 +1137,6 @@
} }
} }
// 设备定位标志
function addDeviceMarkers() { function addDeviceMarkers() {
var savedMyLocationFeature = myLocationFeature; var savedMyLocationFeature = myLocationFeature;
@ -1221,9 +1204,8 @@
function onMapTypeChange() { function onMapTypeChange() {
var mapType = document.getElementById('mapTypeSelectNew').value; var mapType = document.getElementById('mapTypeSelectNew').value;
// 检查用户权限，如果不是SUPER_ADMIN但尝试使用Google地图，则阻止并提示
if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") { if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") {
layer.msg('您没有权限使用谷歌地图服务'); layer.msg('拒绝使用');
document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid'; document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid';
mapType = 'tianditu_terrain_hybrid'; mapType = 'tianditu_terrain_hybrid';
} }
@ -1239,12 +1221,10 @@
return; return;
} }
// 定位到设备，但不隐藏其他设备
filterByDeviceId(deviceId); filterByDeviceId(deviceId);
} }
function clearDeviceSearch() { function clearDeviceSearch() {
// 清空搜索框
document.getElementById('deviceSearchNew').value = ''; document.getElementById('deviceSearchNew').value = '';
} }
@ -1305,7 +1285,6 @@
} }
function showAll() { function showAll() {
// 注释掉原有按钮操作
// document.getElementById('btn-all').classList.add('active'); // document.getElementById('btn-all').classList.add('active');
// document.getElementById('btn-warning1').classList.remove('active'); // document.getElementById('btn-warning1').classList.remove('active');
// document.getElementById('btn-warning2').classList.remove('active'); // document.getElementById('btn-warning2').classList.remove('active');
@ -1315,7 +1294,6 @@
currentSearchedDevice = null; currentSearchedDevice = null;
// document.getElementById('deviceSearch').value = ''; // document.getElementById('deviceSearch').value = '';
document.getElementById('deviceSearchNew').value = ''; document.getElementById('deviceSearchNew').value = '';
// 已移除toolbar-device-locate元素，不需要再设置其display属性
var savedMyLocationFeature = myLocationFeature; var savedMyLocationFeature = myLocationFeature;
vectorSource.clear(); vectorSource.clear();
@ -1332,7 +1310,6 @@
} }
function showWarning1() { function showWarning1() {
// 注释掉原有按钮操作
// document.getElementById('btn-all').classList.remove('active'); // document.getElementById('btn-all').classList.remove('active');
// document.getElementById('btn-warning1').classList.add('active'); // document.getElementById('btn-warning1').classList.add('active');
// document.getElementById('btn-warning2').classList.remove('active'); // document.getElementById('btn-warning2').classList.remove('active');
@ -1478,7 +1455,6 @@
} }
function updateFilterButtonsState(state) { function updateFilterButtonsState(state) {
// 注释掉原有按钮操作
// document.getElementById('btn-all').classList.remove('active'); // document.getElementById('btn-all').classList.remove('active');
// document.getElementById('btn-warning1').classList.remove('active'); // document.getElementById('btn-warning1').classList.remove('active');
// document.getElementById('btn-warning2').classList.remove('active'); // document.getElementById('btn-warning2').classList.remove('active');
@ -1515,7 +1491,6 @@
map.getView().setCenter(deviceCoord); map.getView().setCenter(deviceCoord);
map.getView().setZoom(15); map.getView().setZoom(15);
// 高亮显示该设备（可以在这里添加高亮效果）
layer.msg('已定位到设备: ' + deviceId); layer.msg('已定位到设备: ' + deviceId);
} else { } else {
layer.msg('未找到设备: ' + deviceId); layer.msg('未找到设备: ' + deviceId);
@ -1524,7 +1499,6 @@
layui.use(['form'], function(){ layui.use(['form'], function(){
var form = layui.form; var form = layui.form;
// 注释掉原有表单控件事件
// form.on('select(mapType)', function(data){ // form.on('select(mapType)', function(data){
// switchMapType(data.value); // switchMapType(data.value);
// }); // });
@ -1576,18 +1550,15 @@
}); });
} }
// 新工具栏的事件处理函数
function onWarningFilterChange() { function onWarningFilterChange() {
var filterValue = document.getElementById('warningFilter').value; var filterValue = document.getElementById('warningFilter').value;
// 重置按钮状态 (注释掉原有按钮操作)
// document.getElementById('btn-all').classList.remove('active'); // document.getElementById('btn-all').classList.remove('active');
// document.getElementById('btn-warning1').classList.remove('active'); // document.getElementById('btn-warning1').classList.remove('active');
// document.getElementById('btn-warning2').classList.remove('active'); // document.getElementById('btn-warning2').classList.remove('active');
// document.getElementById('btn-device-locate').classList.remove('active'); // document.getElementById('btn-device-locate').classList.remove('active');
// document.getElementById('btn-device-locate').style.display = 'none'; // document.getElementById('btn-device-locate').style.display = 'none';
// 清除搜索状态
currentSearchedDevice = null; currentSearchedDevice = null;
// document.getElementById('deviceSearch').value = ''; // document.getElementById('deviceSearch').value = '';
document.getElementById('deviceSearchNew').value = ''; document.getElementById('deviceSearchNew').value = '';
@ -1601,11 +1572,8 @@
} }
} }
// 下拉菜单控制
function toggleMapFunctionsMenu() { function toggleMapFunctionsMenu() {
document.getElementById('mapFunctionsMenu').classList.toggle('show'); document.getElementById('mapFunctionsMenu').classList.toggle('show');
// 点击其他地方关闭菜单
document.addEventListener('click', closeMapFunctionsMenu); document.addEventListener('click', closeMapFunctionsMenu);
} }
@ -1619,7 +1587,6 @@
} }
} }
// 设备信息显示开关
function toggleDeviceId() { function toggleDeviceId() {
showDeviceId = document.getElementById('showDeviceIdSwitch').checked; showDeviceId = document.getElementById('showDeviceIdSwitch').checked;
updateLayerVisibility(); updateLayerVisibility();
@ -1649,11 +1616,9 @@
vectorLayer.setVisible(true); vectorLayer.setVisible(true);
} }
// 强制更新样式
vectorLayer.changed(); vectorLayer.changed();
} }
// --- 测距相关变量 ---
var measureActive = false; var measureActive = false;
var measureDraw; // 当前测距交互 var measureDraw; // 当前测距交互
var measureTooltipElement; var measureTooltipElement;
@ -1668,7 +1633,7 @@
layer.msg('测距功能已关闭'); layer.msg('测距功能已关闭');
} else { } else {
activateMeasure(); activateMeasure();
layer.msg('测距功能已开启，单击地图添加测量点，双击结束当前测量'); layer.msg('双击以结束当前测量');
} }
// 关闭下拉菜单 // 关闭下拉菜单
document.getElementById('mapFunctionsMenu').classList.remove('show'); document.getElementById('mapFunctionsMenu').classList.remove('show');
@ -1677,7 +1642,6 @@
function activateMeasure() { function activateMeasure() {
measureActive = true; measureActive = true;
// 创建测距交互
measureDraw = new ol.interaction.Draw({ measureDraw = new ol.interaction.Draw({
source: measureSource, source: measureSource,
type: 'LineString', type: 'LineString',
@ -1698,19 +1662,15 @@
var sketch; var sketch;
var listener; var listener;
// 开始绘制
measureDraw.on('drawstart', function(evt) { measureDraw.on('drawstart', function(evt) {
sketch = evt.feature; sketch = evt.feature;
// 清空当前测距的临时tooltip
currentMeasureTooltips = []; currentMeasureTooltips = [];
// 监听几何变化
listener = sketch.getGeometry().on('change', function(e) { listener = sketch.getGeometry().on('change', function(e) {
var geom = e.target; var geom = e.target;
var coords = geom.getCoordinates(); var coords = geom.getCoordinates();
// 清除当前临时tooltip
clearTemporaryTooltips(); clearTemporaryTooltips();
// 计算总距离 // 计算总距离
@ -1738,22 +1698,17 @@
}); });
}); });
// 结束绘制
measureDraw.on('drawend', function(evt) { measureDraw.on('drawend', function(evt) {
// 获取最终坐标
var coords = evt.feature.getGeometry().getCoordinates(); var coords = evt.feature.getGeometry().getCoordinates();
// 清除临时tooltip
clearTemporaryTooltips(); clearTemporaryTooltips();
// 计算总距离
var total = 0; var total = 0;
for (var i = 1; i < coords.length; i++) { for (var i = 1; i < coords.length; i++) {
var seg = new ol.geom.LineString([coords[i-1], coords[i]]); var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
total += ol.sphere.getLength(seg); total += ol.sphere.getLength(seg);
} }
// 创建起点和终点的永久tooltip
var startTooltip = createMeasureTooltip(coords[0], '起点', true); var startTooltip = createMeasureTooltip(coords[0], '起点', true);
measureTooltips.push(startTooltip); measureTooltips.push(startTooltip);
@ -1762,17 +1717,12 @@
(Math.round(total * 10) / 10) + ' m'); (Math.round(total * 10) / 10) + ' m');
var endTooltip = createMeasureTooltip(coords[coords.length-1], output, true); var endTooltip = createMeasureTooltip(coords[coords.length-1], output, true);
measureTooltips.push(endTooltip); measureTooltips.push(endTooltip);
// 保存测距线段
measureFeatures.push(evt.feature); measureFeatures.push(evt.feature);
ol.Observable.unByKey(listener); ol.Observable.unByKey(listener);
// 重新激活测距工具，可以继续测量
map.removeInteraction(measureDraw); map.removeInteraction(measureDraw);
activateMeasure(); activateMeasure();
// 显示当前测距数量
updateMeasureCount(); updateMeasureCount();
}); });
} }
@ -1785,14 +1735,9 @@
measureDraw = null; measureDraw = null;
} }
// 清除临时tooltip
clearTemporaryTooltips(); clearTemporaryTooltips();
// 不清除已完成的测距结果和永久tooltip
// 用户可以通过clearMeasure函数清除所有测距
} }
// 创建测距tooltip
function createMeasureTooltip(coord, text, isStatic) { function createMeasureTooltip(coord, text, isStatic) {
var elem = document.createElement('div'); var elem = document.createElement('div');
elem.className = isStatic ? 'ol-tooltip ol-tooltip-static' : 'ol-tooltip ol-tooltip-measure'; elem.className = isStatic ? 'ol-tooltip ol-tooltip-static' : 'ol-tooltip ol-tooltip-measure';
@ -1807,39 +1752,33 @@
return overlay; return overlay;
} }
// 清除所有测距tooltip
function clearAllMeasureTooltips() { function clearAllMeasureTooltips() {
// 清除永久tooltip
for (var i = 0; i < measureTooltips.length; i++) { for (var i = 0; i < measureTooltips.length; i++) {
map.removeOverlay(measureTooltips[i]); map.removeOverlay(measureTooltips[i]);
} }
measureTooltips = []; measureTooltips = [];
// 清除临时tooltip
clearTemporaryTooltips(); clearTemporaryTooltips();
} }
// 清除临时tooltip
function clearTemporaryTooltips() { function clearTemporaryTooltips() {
// 清除当前测量过程中的临时tooltip
for (var i = 0; i < currentMeasureTooltips.length; i++) { for (var i = 0; i < currentMeasureTooltips.length; i++) {
map.removeOverlay(currentMeasureTooltips[i]); map.removeOverlay(currentMeasureTooltips[i]);
} }
currentMeasureTooltips = []; currentMeasureTooltips = [];
} }
// 更新测距数量显示 (不再显示测距段数)
function updateMeasureCount() { function updateMeasureCount() {
// 不再显示测距段数
} }
// 清除测距按钮
function clearMeasure() { function clearMeasure() {
measureSource.clear(); measureSource.clear();
clearAllMeasureTooltips(); clearAllMeasureTooltips();
measureFeatures = []; // 清空测距线段数组 measureFeatures = [];
layer.msg('测距标记已清除'); layer.msg('测距标记已清除');
// 关闭下拉菜单
document.getElementById('mapFunctionsMenu').classList.remove('show'); document.getElementById('mapFunctionsMenu').classList.remove('show');
} }
</script> </script>