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 15:00:31 +08:00
parent 5fef8eec51
commit 1c4633881d
1 changed files with 95 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -519,6 +519,23 @@
input:checked + .switch-slider:before {
transform: translateX(18px);
}
/* 测量状态指示器样式 */
#measureStatus {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(72, 187, 120, 0.3);
border-radius: 8px;
padding: 6px 12px;
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.2);
align-items: center;
gap: 8px;
}
#measureStatus .toolbar-btn {
padding: 2px 6px;
height: 24px;
min-width: 24px;
}
</style>
<script src="../js/ol.js"></script>
@ -645,6 +662,14 @@
</div>
</div>
</div>
<!-- 测量状态指示器 -->
<div id="measureStatus" class="toolbar-item" style="display: none;">
<span style="color: #48bb78; font-weight: bold; font-size: 12px;">测量中</span>
<button class="toolbar-btn" onclick="finishMeasuring()" style="background: #f56565; margin-left: 6px;">
<i class="layui-icon layui-icon-close" style="font-size: 12px;"></i>
</button>
</div>
</div>
@ -1674,6 +1699,9 @@
var measureTooltips = []; // 存储所有测距点的overlay
var measureFeatures = []; // 存储所有测距线段
var currentMeasureTooltips = []; // 当前测距的临时tooltip
var currentSketch; // 当前绘制的线段
var currentListener; // 当前的监听器
var segmentTooltips = []; // 存储每个节点的距离显示
function toggleMeasureDistance() {
if (measureActive) {
@ -1681,15 +1709,22 @@
layer.msg('测距功能已关闭');
} else {
activateMeasure();
layer.msg('双击以结束当前测量');
layer.msg('点击左键添加距离节点，点击右键结束测量 :)');
}
// 关闭下拉菜单
document.getElementById('mapFunctionsMenu').classList.remove('show');
}
function finishMeasuring() {
if (measureActive && currentSketch) {
measureDraw.finishDrawing();
}
}
function activateMeasure() {
measureActive = true;
document.getElementById('measureStatus').style.display = 'flex';
measureDraw = new ol.interaction.Draw({
source: measureSource,
type: 'LineString',
@ -1707,21 +1742,27 @@
});
map.addInteraction(measureDraw);
var sketch;
var listener;
map.getViewport().addEventListener('contextmenu', function(e) {
if (measureActive && currentSketch) {
e.preventDefault();
measureDraw.finishDrawing();
}
});
measureDraw.on('drawstart', function(evt) {
sketch = evt.feature;
currentSketch = evt.feature;
currentMeasureTooltips = [];
segmentTooltips = [];
listener = sketch.getGeometry().on('change', function(e) {
currentListener = currentSketch.getGeometry().on('change', function(e) {
var geom = e.target;
var coords = geom.getCoordinates();
clearTemporaryTooltips();
clearSegmentTooltips();
// 计算总距离
// 计算并显示每个节点的距离
var total = 0;
for (var i = 0; i < coords.length; i++) {
if (i === 0) {
@ -1731,14 +1772,18 @@
} else {
// 计算段距离
var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
total += ol.sphere.getLength(seg);
var segmentLength = ol.sphere.getLength(seg);
total += segmentLength;
// 显示每个节点的累计距离
var output = (total > 1000 ?
(Math.round(total / 100) / 10) + ' km' :
(Math.round(total * 10) / 10) + ' m');
// 如果是最后一个点，显示总距离
var tooltip = createMeasureTooltip(coords[i], output);
segmentTooltips.push(tooltip);
if (i === coords.length - 1) {
var tooltip = createMeasureTooltip(coords[i], output);
currentMeasureTooltips.push(tooltip);
}
}
@ -1750,40 +1795,59 @@
var coords = evt.feature.getGeometry().getCoordinates();
clearTemporaryTooltips();
clearSegmentTooltips();
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);
for (var i = 0; i < coords.length; i++) {
if (i === 0) {
var startTooltip = createMeasureTooltip(coords[0], '起点', true);
measureTooltips.push(startTooltip);
} else {
var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
total += ol.sphere.getLength(seg);
var output = (total > 1000 ?
(Math.round(total / 100) / 10) + ' km' :
(Math.round(total * 10) / 10) + ' m');
var tooltip = createMeasureTooltip(coords[i], output, true);
measureTooltips.push(tooltip);
}
}
var startTooltip = createMeasureTooltip(coords[0], '起点', true);
measureTooltips.push(startTooltip);
var output = (total > 1000 ?
(Math.round(total / 100) / 10) + ' km' :
(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);
ol.Observable.unByKey(currentListener);
currentSketch = null;
currentListener = null;
document.getElementById('measureStatus').style.display = 'none';
map.removeInteraction(measureDraw);
activateMeasure();
updateMeasureCount();
measureActive = false;
layer.msg('测量完成');
});
}
function deactivateMeasure() {
measureActive = false;
// 隐藏测量状态指示器
document.getElementById('measureStatus').style.display = 'none';
if (measureDraw) {
map.removeInteraction(measureDraw);
measureDraw = null;
}
if (currentListener) {
ol.Observable.unByKey(currentListener);
currentListener = null;
}
currentSketch = null;
clearTemporaryTooltips();
clearSegmentTooltips();
}
function createMeasureTooltip(coord, text, isStatic) {
@ -1816,6 +1880,13 @@
currentMeasureTooltips = [];
}
function clearSegmentTooltips() {
for (var i = 0; i < segmentTooltips.length; i++) {
map.removeOverlay(segmentTooltips[i]);
}
segmentTooltips = [];
}
function updateMeasureCount() {