From 5beabdb9659f36d7a3fbf4d02e27b3607e6afd16 Mon Sep 17 00:00:00 2001
From: cheng <545895878@qq.com>
Date: Sat, 13 Dec 2025 20:47:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=8F=96=E6=B6=88=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E7=BB=98=E5=88=B6=E5=9B=B4=E6=A0=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B5=B7=E9=A3=9E=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 51 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 504cbf6..d459c09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,6 +69,15 @@
             {{ isInFence ? '围栏内' : '围栏外' }}
           </el-tag>
         </div>
+        <el-button 
+          @click="handleTakeoff" 
+          :type="isFlying ? 'warning' : 'success'"
+          size="small"
+          style="width: 100%; margin-top: 8px;"
+          :disabled="isFlying"
+        >
+          {{ isFlying ? '飞行中' : '起飞' }}
+        </el-button>
         <el-button 
           @click="toggleWebSocket" 
           :type="wsConnected ? 'danger' : 'primary'"
@@ -147,6 +156,7 @@ const fences = ref([])
 // 无人机相关状态
 const wsConnected = ref(false)
 const droneData = ref(null)
+const isFlying = ref(false)
 const droneMarker = ref(null)
 let wsClient = null
 let mockDataGenerator = null
@@ -226,6 +236,24 @@ const initWebSocket = () => {
   ElMessage.success('无人机数据连接成功（模拟模式）')
 }
 
+// 起飞处理
+const handleTakeoff = () => {
+  // 检查是否已有围栏
+  if (fences.value.length === 0) {
+    ElMessage.warning('请先绘制电子围栏后再起飞')
+    return
+  }
+  
+  // 如果未连接，先连接
+  if (!wsConnected.value) {
+    initWebSocket()
+  }
+  
+  // 设置飞行状态
+  isFlying.value = true
+  ElMessage.success('无人机已起飞')
+}
+
 // 切换WebSocket连接
 const toggleWebSocket = () => {
   if (wsConnected.value) {
@@ -239,6 +267,7 @@ const toggleWebSocket = () => {
       wsClient = null
     }
     wsConnected.value = false
+    isFlying.value = false // 断开连接时重置飞行状态
     ElMessage.info('已断开连接')
     conn.close();
   } else {
@@ -543,8 +572,26 @@ const handleDrawComplete = (event) => {
         addFenceLabel(fences.value[fenceIndex])
       }
     }).catch(() => {
-      // 用户取消，保持默认名称（已经在上面设置了）
-      // 不需要额外操作，标签已经用默认名称创建了
+      // 用户取消，清除刚刚添加的围栏
+      const cancelledFence = fences.value[fenceIndex]
+      if (cancelledFence) {
+        // 从地图上移除围栏和标签
+        if (cancelledFence.shape) {
+          try {
+            const currentMap = cancelledFence.shape.getMap ? cancelledFence.shape.getMap() : null
+            if (currentMap) {
+              currentMap.remove(cancelledFence.shape)
+              if (cancelledFence.label) {
+                currentMap.remove(cancelledFence.label)
+              }
+            }
+          } catch (error) {
+            console.error('清除围栏时出错:', error)
+          }
+        }
+        // 从列表中移除
+        fences.value.splice(fenceIndex, 1)
+      }
     })
     
     // 重置绘制状态