From 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:50:13 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue | 129 +++++++++++++++++++++++++++++++++++--------
1 files changed, 105 insertions(+), 24 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue
index 181fd79..8d2e516 100644
--- a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue
@@ -1,17 +1,19 @@
<template>
<div class="taskDetailsLeft">
<div class="title">负载控制</div>
- <div class="singleCol">广角相机</div>
- <div class="singleCol">变焦相机</div>
- <div class="singleCol">红外相机</div>
+ <div class="singleCol" @click="cameraType('wide', '广角')">广角相机</div>
+ <div class="singleCol" @click="cameraType('zoom', '变焦')">变焦相机</div>
+ <div class="singleCol" @click="cameraType('ir', '红外')">红外相机</div>
<div class="multiCol">
<div>云台回中</div>
<div>云台朝下</div>
</div>
- <div class="singleCol">画质</div>
+ <el-select class="qualityChange" v-model="lineQuality" @change="qualityChange">
+ <el-option v-for="item in qualityList" :key="item.id" :label="item.name" :value="item.id" />
+ </el-select>
<div class="multiCol">
- <div>拍照</div>
- <div>录像</div>
+ <div @click="takePictures">拍照</div>
+ <div @click="recordFun">{{ isRecording ? '录像中...' : '录像' }}</div>
</div>
<div class="multiCol">
<div>喊话</div>
@@ -20,7 +22,58 @@
</div>
</template>
-<script setup></script>
+<script setup>
+import EventBus from '@/event-bus'
+import { callPhotoAndVideoCmd, switchLivestream } from '@/api/payload'
+import { ElMessage } from 'element-plus'
+
+const isRecording = ref(false)
+
+const droneSn = inject('droneSn')
+const lineQuality = inject('lineQuality')
+const qualityList = [
+ { name: '自适应', id: 0 },
+ { name: '流畅', id: 1 },
+ { name: '标清', id: 2 },
+ { name: '高清', id: 3 },
+ { name: '超清', id: 4 },
+]
+
+// todo
+function cameraType(video_type, name) {
+ switchLivestream({
+ // video_id: this.videoId,
+ video_type,
+ }).then(res => {
+ ElMessage.success(`切换为${name}相机成功`)
+ })
+}
+
+// 画质切换
+function qualityChange() {
+ EventBus.emit('CurrentTaskDetails-timeStop')
+}
+
+// 录像
+function recordFun() {
+ const type = isRecording.value ? 'video_stop' : 'video_start'
+ const msg = isRecording.value ? '停止录像' : '开始录像'
+ const emitType = isRecording.value ? 'controlPanel-timeStop' : 'controlPanel-timeStart'
+ callPhotoAndVideoCmd(droneSn.value, type).then(res => {
+ ElMessage.success(msg)
+ EventBus.emit(emitType)
+ isRecording.value = !isRecording.value
+ })
+}
+
+// 拍照
+function takePictures() {
+ // photo拍照，video_start开始录像，video_stop结束录像
+ callPhotoAndVideoCmd(droneSn.value, 'photo').then(res => {
+ ElMessage.success('拍照成功')
+ })
+}
+</script>
<style scoped lang="scss">
.taskDetailsLeft {
@@ -40,45 +93,73 @@
font-family: Segoe UI, Segoe UI;
font-weight: 400;
font-size: 14px;
- color: #FFFFFF;
+ color: #ffffff;
line-height: 18px;
text-align: center;
align-items: center;
gap: 12px;
-
- .singleCol{
+ .qualityChange{
width: 146px;
height: 40px;
- box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ background: rgba(74, 72, 72, 0.67);
+ border:none!important;
+ display:flex;
+ justify-content:center;
+ box-shadow: 0 0.4rem 7.2rem 0 rgba(0, 0, 0, 0.25);
+ border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
+ :deep(){
+ .el-select__wrapper{
+ width: 100px;
+ height: 100%;
+ background: transparent;
+ color: #3d3b3b;
+ border: none;
+ box-shadow: none;
+ }
+ .el-select__selected-item{
+ font-family: Segoe UI, Segoe UI;
+ color: #ffffff;
+ font-size: 14px;
+ }
+ }
+
+ }
+
+ .singleCol {
+ width: 146px;
+ height: 40px;
+ box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25);
border-radius: 8px 8px 8px 8px;
line-height: 40px;
cursor: pointer;
- background: rgba(74,72,72,0.67);
+ background: rgba(74, 72, 72, 0.67);
- &:hover{
- background: rgba(255,255,255,0.78);
- color: #3D3B3B;
- border: 1px solid rgba(255,255,255,0.99);
+ &:hover {
+ background: rgba(255, 255, 255, 0.78);
+ color: #3d3b3b;
+ border: 1px solid rgba(255, 255, 255, 0.99);
}
}
- .multiCol{
+
+ .multiCol {
display: flex;
gap: 12px;
- >div{
+
+ > div {
cursor: pointer;
width: 67px;
height: 40px;
- background: rgba(74,72,72,0.67);
- box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ background: rgba(74, 72, 72, 0.67);
+ box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25);
border-radius: 8px 8px 8px 8px;
line-height: 40px;
- &:hover{
- background: rgba(255,255,255,0.78);
- color: #3D3B3B;
- border: 1px solid rgba(255,255,255,0.99);
+ &:hover {
+ background: rgba(255, 255, 255, 0.78);
+ color: #3d3b3b;
+ border: 1px solid rgba(255, 255, 255, 0.99);
}
}
}
--
Gitblit v1.9.3