From 3cbeba98323cf208a58526dc97f42d135ec58c1a Mon Sep 17 00:00:00 2001
From: yarnom <admin@yarnom.com>
Date: Fri, 4 Jul 2025 13:49:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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