添加删除画线按钮

src/views/device/video/index.vue

@@ -23,6 +23,7 @@
                             icon="el-icon-edit">
                             画线
                         </el-button>
+                    
                         <template v-else>
                             <el-button type="success" class="save-line-btn" @click="handleSaveLines"
                                 icon="el-icon-check" :loading="saving">
@@ -33,6 +34,12 @@
                                 取消
                             </el-button>
                         </template>
+
+                        <el-button v-if="!isDrawingMode && (initialLine || savedLine)" type="danger" plain
+                            class="delete-line-btn" @click="handleDeleteLine" :loading="deleting" icon="el-icon-delete">
+                            删除画线
+                        </el-button>
+
                     </div>
                     <div class="device-control-buttons">
                         <!-- <el-button type="warning" class="lock-position-btn" @click="handleLockPosition"
@@ -91,7 +98,7 @@
 </template>
 
 <script>
-import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI, operDeviceAPI,recordingVideoAPI } from '@/api/device/video'
+import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI, operDeviceAPI, recordingVideoAPI,deleteLineAPI } from '@/api/device/video'
 
 export default {
     name: 'VideoMonitor',
@@ -135,6 +142,7 @@ export default {
             // 新增：录制相关状态
             isRecording: false,      // 当前是否正在录制
             recordingLoading: false, // 按钮 loading 状态
+            deleting: false, // 删除按钮 loading 状态
         }
     },
     computed: {
@@ -508,6 +516,49 @@ export default {
             this.isDrawing = false
         },
 
+        /* 删除画线功能 */
+        handleDeleteLine() {
+            this.$confirm('确定要删除当前的电子围栏画线吗？删除后将无法恢复', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.deleting = true
+                try {
+                    // 调用删除接口
+                    // 请将下面这行改为 await updateLineAPI({ startX: '', startY: '', endX: '', endY: '' })
+                    const res = await deleteLineAPI({})
+                    if (res.code === 200) {
+                        this.$message.success('画线删除成功')
+
+                        // === 核心逻辑：清空页面上的线 ===
+                        // 1. 清空数据对象
+                        this.initialLine = null
+                        this.savedLine = null
+                        this.line = null
+                        this.currentLine = null
+
+                        // 2. 重置画线信息显示（可选）
+                        this.lineInfo.startX = ''
+                        this.lineInfo.startY = ''
+                        this.lineInfo.endX = ''
+                        this.lineInfo.endY = ''
+
+                        // 3. 调用重绘方法 (因为数据已置空，redrawCanvas 会执行 clearRect 清空画布)
+                        this.clearCanvas() // 清空绘制层
+                        this.redrawCanvas() // 清空展示层
+                    } else {
+                        this.$message.error(res.msg || '删除失败')
+                    }
+                } catch (error) {
+                    console.error('删除画线异常:', error)
+                    this.$message.error('删除失败，请稍后重试')
+                } finally {
+                    this.deleting = false
+                }
+            }).catch(() => { })
+        },
+
         redrawCanvas() {
             const savedCanvas = this.$refs.savedLineCanvas
             if (savedCanvas) {