添加视频录制按钮

src/api/device/video.js

@@ -27,3 +27,21 @@ export function getVideoStreamAPI(params) {
     })
 }
 
+// 设备管理->视频监控->操作设备
+export function operDeviceAPI(data) {
+    return request({
+        url: '/smartCar/data/line/operDevice',
+        method: 'POST',
+        data
+    })
+}
+
+// 设备管理->视频监控->开始录制视频 和 结束录制视频
+export function recordingVideoAPI(data) {
+    return request({
+        url: '/smartCar/data/line/recordingVideo',
+        method: 'POST',
+        data
+    })
+}
+

src/views/device/video/index.vue

@@ -34,6 +34,35 @@
                             </el-button>
                         </template>
                     </div>
+                    <div class="device-control-buttons">
+                        <!-- <el-button type="warning" class="lock-position-btn" @click="handleLockPosition"
+                            icon="el-icon-lock" :loading="locking">
+                            位置锁定
+                        </el-button>
+                        <el-button type="success" class="unlock-position-btn" @click="handleUnlockPosition"
+                            icon="el-icon-unlock" :loading="unlocking">
+                            位置解锁
+                        </el-button> -->
+
+                        <el-button v-if="!isRecording" type="primary" plain icon="el-icon-video-camera"
+                            :loading="recordingLoading" @click="handleStartRecord">
+                            开始录制
+                        </el-button>
+
+                        <el-button v-else type="danger" plain class="recording-btn" icon="el-icon-video-pause"
+                            :loading="recordingLoading" @click="handleStopRecord">
+                            <span class="recording-dot"></span>
+                            结束录制
+                        </el-button>
+                        <el-button type="danger" class="shutdown-device-btn" @click="handleShutdownDevice"
+                            icon="el-icon-switch-button" :loading="shuttingDown">
+                            设备关机
+                        </el-button>
+                        <el-button type="info" class="clear-alarm-btn" @click="handleClearAlarm" icon="el-icon-bell"
+                            :loading="clearingAlarm">
+                            解除告警
+                        </el-button>
+                    </div>
                 </div>
             </div>
         </el-card>
@@ -62,7 +91,7 @@
 </template>
 
 <script>
-import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI } from '@/api/device/video'
+import { getLineDetailAPI, updateLineAPI, getVideoStreamAPI, operDeviceAPI,recordingVideoAPI } from '@/api/device/video'
 
 export default {
     name: 'VideoMonitor',
@@ -86,6 +115,11 @@ export default {
             videoErrorShown: false,
             // 新增：全屏状态标记
             isFullscreen: false,
+            // 设备控制按钮loading状态
+            locking: false,
+            unlocking: false,
+            shuttingDown: false,
+            clearingAlarm: false,
             // 新增：记录上一次容器尺寸，用于计算缩放比例
             lastContainerWidth: 0,
             lastContainerHeight: 0,
@@ -97,7 +131,10 @@ export default {
                 startY: '',
                 endX: '',
                 endY: '',
-            }
+            },
+            // 新增：录制相关状态
+            isRecording: false,      // 当前是否正在录制
+            recordingLoading: false, // 按钮 loading 状态
         }
     },
     computed: {
@@ -515,6 +552,161 @@ export default {
             } catch (error) {
                 console.error('获取视频流失败:', error)
             }
+        },
+
+        /** 位置锁定 */
+        async handleLockPosition() {
+            this.$confirm('确定要锁定设备位置吗？', '位置锁定', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.locking = true
+                try {
+                    // TODO: 调用位置锁定API
+                    // const res = await lockPositionAPI()
+                    // if (res.code === 200) {
+                    //     this.$message.success('位置锁定成功')
+                    // } else {
+                    //     this.$message.error(res.msg || '位置锁定失败')
+                    // }
+                    this.$message.success('位置锁定成功')
+                } catch (error) {
+                    console.error('位置锁定失败:', error)
+                    this.$message.error('位置锁定失败，请稍后重试')
+                } finally {
+                    this.locking = false
+                }
+            }).catch(() => { })
+        },
+
+        /** 位置解锁 */
+        async handleUnlockPosition() {
+            this.$confirm('确定要解锁设备位置吗？', '位置解锁', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.unlocking = true
+                try {
+                    // TODO: 调用位置解锁API
+                    // const res = await unlockPositionAPI()
+                    // if (res.code === 200) {
+                    //     this.$message.success('位置解锁成功')
+                    // } else {
+                    //     this.$message.error(res.msg || '位置解锁失败')
+                    // }
+                    this.$message.success('位置解锁成功')
+                } catch (error) {
+                    console.error('位置解锁失败:', error)
+                    this.$message.error('位置解锁失败，请稍后重试')
+                } finally {
+                    this.unlocking = false
+                }
+            }).catch(() => { })
+        },
+
+        /* *开始录制视频 */
+        async handleStartRecord() {
+            this.recordingLoading = true
+            try {
+                // 这里调用您的开始录制接口，参数根据您的业务需求传递
+                // 比如传递设备ID： { deviceId: this.lineInfo.deviceId }
+                const res = await recordingVideoAPI({recordingType:1})
+
+                if (res.code === 200) {
+                    this.isRecording = true
+                    this.$message.success('已下发开始录制指令')
+                } else {
+                    this.$message.error(res.msg || '开启录制失败')
+                }
+            } catch (error) {
+                console.error('录制请求异常:', error)
+                this.$message.error('请求失败')
+            } finally {
+                this.recordingLoading = false
+            }
+        },
+
+        /** 结束录制 */
+        async handleStopRecord() {
+            this.$confirm('确定要结束当前的视频录制吗？', '提示', {
+                confirmButtonText: '结束录制',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.recordingLoading = true
+                try {
+                    // 调用结束录制接口
+                    const res = await recordingVideoAPI({recordingType:2})
+
+                    if (res.code === 200) {
+                        this.isRecording = false
+                        this.$message.success('录制已结束，视频保存中')
+                    } else {
+                        this.$message.error(res.msg || '结束录制失败')
+                    }
+                } catch (error) {
+                    console.error('停止录制请求异常:', error)
+                    this.$message.error('请求失败')
+                } finally {
+                    this.recordingLoading = false
+                }
+            }).catch(() => { })
+        },
+
+        /** 设备关机 */
+        async handleShutdownDevice() {
+            this.$confirm('确定要关闭设备吗？设备将停止运行', '设备关机', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.shuttingDown = true
+                try {
+                    // 调用设备关机API
+                    const res = await operDeviceAPI({ mode: 2 })
+                    if (res.code === 200) {
+                        this.$message.success('设备关机成功')
+                    } else {
+                        this.$message.error(res.msg || '设备关机失败')
+                    }
+                    this.$message.success('设备关机成功')
+                } catch (error) {
+                    console.error('设备关机失败:', error)
+                    this.$message.error('设备关机失败，请稍后重试')
+                } finally {
+                    this.shuttingDown = false
+                }
+            }).catch(() => { })
+        },
+
+        /** 解除告警 */
+        async handleClearAlarm() {
+            this.$confirm('确定要解除设备告警吗？', '解除告警', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'info'
+            }).then(async () => {
+                this.clearingAlarm = true
+                try {
+                    // 调用解除告警API
+                    const res = await operDeviceAPI({
+                        alarm: false
+                    })
+                    if (res.code === 200) {
+                        this.$message.success('解除告警成功')
+                    } else {
+                        this.$message.error(res.msg || '解除告警失败')
+                    }
+                    this.$message.success('解除告警成功')
+                } catch (error) {
+                    console.error('解除告警失败:', error)
+                    this.$message.error('解除告警失败，请稍后重试')
+                } finally {
+                    this.clearingAlarm = false
+                }
+            }).catch(() => { })
         }
     }
 }
@@ -617,6 +809,15 @@ export default {
             align-items: center;
             gap: 12px;
         }
+
+        .device-control-buttons {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-left: 12px;
+            padding-left: 12px;
+            border-left: 1px solid #e4e7ed;
+        }
     }
 }
 
@@ -761,4 +962,33 @@ video::-webkit-media-controls-enclosure {
 video::-internal-media-controls-download-button {
     display: none;
 }
+
+/* 录制中状态的样式 */
+.recording-btn {
+    position: relative;
+
+    .recording-dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        background-color: red;
+        border-radius: 50%;
+        margin-right: 5px;
+        animation: recording-flash 1.5s infinite ease-in-out;
+    }
+}
+
+@keyframes recording-flash {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
 </style>