Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

shuishen

2025-04-16 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf

 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);
         }
      }
   }