From 4348a0774437574aa019278d56e30fe654fb2fb5 Mon Sep 17 00:00:00 2001
From: ywb <347742090@qq.com>
Date: Sat, 16 May 2026 23:21:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E7=82=B9=E5=87=BB=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 agv_app/static/js/setting.js   | 34 ++++++++++++++++++++++++++++++++++
 agv_app/templates/setting.html |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/agv_app/static/js/setting.js b/agv_app/static/js/setting.js
index ffcde9b..7f1b5e6 100644
--- a/agv_app/static/js/setting.js
+++ b/agv_app/static/js/setting.js
@@ -1033,6 +1033,40 @@ const app = createApp({
       }
     },
 
+    // === 点击地图直接导航 ===
+    async onMapClick(e) {
+      if (!this.agvConnected) { alert('请先连接AGV'); return }
+      if (!this.nav2Available) { alert('Nav2 不可用，请先连接AGV'); return }
+      // 计算点击位置相对于图片的百分比
+      const rect = e.target.getBoundingClientRect()
+      const pctX = (e.clientX - rect.left) / rect.width   // 0~1 from left
+      const pctY = (e.clientY - rect.top)  / rect.height  // 0~1 from top
+      if (!this.mapMeta) {
+        alert('地图元数据未加载，请刷新页面'); return
+      }
+      const { resolution, origin, width, height } = this.mapMeta
+      // 反向计算地图坐标
+      const mapX = origin[0] + pctX * resolution * width
+      const mapY = origin[1] + (1 - pctY) * resolution * height  // Y轴翻转
+      const confirmed = confirm(`导航到点击位置\n坐标: (${mapX.toFixed(2)}, ${mapY.toFixed(2)})\n\n确认发送导航指令？`)
+      if (!confirmed) return
+      try {
+        var res = await fetch(API + '/api/navigate/to', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ x: mapX, y: mapY })
+        })
+        var data = await res.json()
+        if (data.ok) {
+          alert('✅ 导航已启动')
+        } else {
+          alert('❌ 导航失败: ' + (data.error || '未知错误'))
+        }
+      } catch (e) {
+        alert('❌ 请求失败: ' + e.message)
+      }
+    },
+
     // === 导航到点位 ===
     async navigateToPoint() {
       if (!this.pointEditor.x && !this.pointEditor.y) {
diff --git a/agv_app/templates/setting.html b/agv_app/templates/setting.html
index 5f9cc55..3043b55 100644
--- a/agv_app/templates/setting.html
+++ b/agv_app/templates/setting.html
@@ -50,7 +50,7 @@
         <section class="card" v-if="mapLoaded" style="margin-top:16px">
           <h2>地图可视化</h2>
           <div class="map-container" style="position:relative;background:#111;border-radius:8px;overflow:hidden">
-            <img :src="mapImageUrl" @error="onMapError" style="width:100%;display:block">
+            <img :src="mapImageUrl" @error="onMapError" @click="onMapClick" style="width:100%;display:block;cursor:crosshair" title="点击地图导航到该位置">
             <!-- 地图覆盖层：显示点位坐标 -->
             <div class="map-overlay">
               <!-- 点位坐标点 -->