FaulknerWu/smart-inspection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 地图 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
Download Patch File Download Diff File Expand all files Collapse all files
agv_app/static/css/style.css
+15
View File
@@ -720,3 +720,18 @@ a:hover { text-decoration: underline; }
border: 2px solid #fff; border: 2px solid #fff;
box-shadow: 0 0 6px rgba(243,156,18,0.9); box-shadow: 0 0 6px rgba(243,156,18,0.9);
} }
/* AGV 实时位置点 */
.agv-dot {
width: 14px !important;
height: 14px !important;
background: #ff5722 !important;
border: 2px solid #fff !important;
border-radius: 50% !important;
box-shadow: 0 0 8px #ff5722, 0 0 16px #ff572288 !important;
animation: agv-pulse 1.5s ease-in-out infinite !important;
z-index: 10 !important;
}
@keyframes agv-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
agv_app/static/js/setting.js
+4 -1
View File
@@ -66,7 +66,10 @@ const app = createApp({
if (this.nav2Available && this.navStatus === 'navigating') { if (this.nav2Available && this.navStatus === 'navigating') {
this.refreshNavStatus() this.refreshNavStatus()
} }
}, 3000) if (this.tab === 'map' && this.nav2Available) {
this.refreshNavStatus() // also refresh position for map display
}
}, 2000)
}, },
watch: { watch: {
// 监听点位数据变化，自动刷新地图 // 监听点位数据变化，自动刷新地图
agv_app/templates/setting.html
+9 -3
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置 - AGV 拍摄系统</title> <title>设置 - AGV 拍摄系统</title>
<link rel="stylesheet" href="/static/css/style.css?v=20260517a"> <link rel="stylesheet" href="/static/css/style.css?v=20260519a">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@@ -53,6 +53,12 @@
<img :src="mapImageUrl" @error="onMapError" @click="onMapClick" style="width:100%;display:block;cursor:crosshair" title="点击地图导航到该位置"> <img :src="mapImageUrl" @error="onMapError" @click="onMapClick" style="width:100%;display:block;cursor:crosshair" title="点击地图导航到该位置">
<!-- 地图覆盖层：显示点位坐标 --> <!-- 地图覆盖层：显示点位坐标 -->
<div class="map-overlay"> <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" <div v-for="(p, pi) in missionConfig.positions" :key="'pdot-'+mapVersion+'-'+pi"
class="map-dot point-dot" class="map-dot point-dot"
@@ -552,7 +558,7 @@
</main> </main>
</div> </div>
<script src="/static/js/vue3.global.prod.js?v=20260517a"></script> <script src="/static/js/vue3.global.prod.js?v=20260519a"></script>
<script src="/static/js/setting.js?v=20260517a"></script> <script src="/static/js/setting.js?v=20260519a"></script>
</body> </body>
</html> </html>