地图实时显示AGV位置 + 点击地图导航 + Nav2检查修复

- 地图 overlay 新增 AGV 位置橙色脉冲点(动画)
- navCurrentPos 刷新周期:地图 Tab 下每 2 秒刷新
- agv-dot CSS:14px 橙色圆点 + 脉冲动画
- 点击地图直接导航功能(onMapClick)
- onMapClick:修复 img 标签 patch 逻辑(原已生效)
- style.css: 新增 agv-dot 脉冲动画样式
This commit is contained in:
ywb
2026-05-16 23:50:09 +08:00
parent 60331dda2b
commit edee9c4445
3 changed files with 28 additions and 4 deletions
+9 -3
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置 - AGV 拍摄系统</title>
<link rel="stylesheet" href="/static/css/style.css?v=20260517a">
<link rel="stylesheet" href="/static/css/style.css?v=20260519a">
</head>
<body>
<div id="app">
@@ -53,6 +53,12 @@
<img :src="mapImageUrl" @error="onMapError" @click="onMapClick" style="width:100%;display:block;cursor:crosshair" title="点击地图导航到该位置">
<!-- 地图覆盖层:显示点位坐标 -->
<div class="map-overlay">
<!-- AGV 实时位置 -->
<div v-if="navCurrentPos && nav2Available"
class="map-dot agv-dot"
:style="{ left: getMapX(navCurrentPos) + '%', top: getMapY(navCurrentPos) + '%' }"
title="AGV 当前位置">
</div>
<!-- 点位坐标点 -->
<div v-for="(p, pi) in missionConfig.positions" :key="'pdot-'+mapVersion+'-'+pi"
class="map-dot point-dot"
@@ -552,7 +558,7 @@
</main>
</div>
<script src="/static/js/vue3.global.prod.js?v=20260517a"></script>
<script src="/static/js/setting.js?v=20260517a"></script>
<script src="/static/js/vue3.global.prod.js?v=20260519a"></script>
<script src="/static/js/setting.js?v=20260519a"></script>
</body>
</html>