feat: 控制台相机控制

罗广辉

2025-04-17 b80dbbcb1340a5d02b2137efc9ff0e5d84c50647

 src/components/CurrentTaskDetails/TaskDetailsLeft.vue

@@ -1,12 +1,18 @@
<template>
   <div class="taskDetailsLeft">
      <div class="title">负载控制</div>
      <div class="singleCol" @click="cameraType('wide', '广角')">广角相机</div>
      <div class="singleCol" @click="cameraType('zoom', '变焦')">变焦相机</div>
      <div class="singleCol" @click="cameraType('ir', '红外')">红外相机</div>
      <div
         class="singleCol"
         v-for="item in list1"
         @click="cameraType(item)"
         :key="item.key"
         :class="{ active: item.key === cameraParams.camera_type }"
      >
         {{ item.name }}相机
      </div>
      <div class="multiCol">
         <div>云台回中</div>
         <div>云台朝下</div>
         <div @click="faceToCenter">云台回中</div>
         <div @click="faceToDown">云台朝下</div>
      </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" />
@@ -19,17 +25,37 @@
         <div>喊话</div>
         <div>广播</div>
      </div>

      <div class="cameraZoom">
         <el-slider
            v-model="cameraParams.zoom_factor"
            vertical
            :max="cameraParams.camera_type === 'ir' ? 20 : 50"
            @input="sliderChange"
         />
      </div>
   </div>
</template>

<script setup>
import EventBus from '@/event-bus'
import { callPhotoAndVideoCmd, switchLivestream } from '@/api/payload'
import { callPhotoAndVideoCmd, cameraParamsChangeApi } from '@/api/payload'
import { ElMessage } from 'element-plus'
import { throttle } from 'lodash'

const isRecording = ref(false)

const list1 = ref([
   { name: '广角', key: 'wide' },
   { name: '变焦', key: 'zoom' },
   { name: '红外', key: 'ir' },
])
const cameraParams = ref({
   zoom_factor: 0,
   camera_type: 'wide',
})
const droneSn = inject('droneSn')
const dockSn = inject('dockSn')
const lineQuality = inject('lineQuality')
const qualityList = [
   { name: '自适应', id: 0 },
@@ -39,14 +65,41 @@
   { name: '超清', id: 4 },
]

// todo
function cameraType(video_type, name) {
   switchLivestream({
      // video_id: this.videoId,
      video_type,
   }).then(res => {
      ElMessage.success(`切换为${name}相机成功`)
function faceToCenter() {}

function faceToDown() {}

// 倍率调整
function sliderChange(val) {
   if (cameraParams.value.camera_type !== 'ir') {
      cameraParams.value.camera_type = val > 1 ? 'zoom' : 'wide'
   }
   cameraParamsChangeThrottle()
}

// 修改相机参数-节流版
const cameraParamsChangeThrottle = throttle(cameraParamsChange, 500)

// 修改相机参数
function cameraParamsChange() {
   cameraParamsChangeApi({
      sn: dockSn.value,
      ...cameraParams.value,
   })
}

function cameraType(row) {
   cameraParams.value.camera_type = row.key
   if (row.key === 'wide') {
      cameraParams.value.zoom_factor = 0
   }
   if (row.key === 'zoom') {
      cameraParams.value.zoom_factor = 5
   }
   if (row.key === 'ir') {
      cameraParams.value.zoom_factor = 0
   }
   cameraParamsChange()
}

// 画质切换
@@ -100,17 +153,33 @@
   align-items: center;
   gap: 12px;

   .qualityChange{
   .cameraZoom {
      position: absolute;
      padding: 16px 0;
      left: 1600px;
      top: -59px;
      width: 112px;
      height: 490px;
      background: rgba(64, 64, 64, 0.15);
      border-radius: 20px 20px 20px 20px;

      .el-slider {
         height: 100%;
      }
   }

   .qualityChange {
      width: 146px;
      height: 40px;
      background: rgba(74, 72, 72, 0.67);
      border:none!important;
      display:flex;
      justify-content:center;
      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{

      :deep() {
         .el-select__wrapper {
            width: 100px;
            height: 100%;
            background: transparent;
@@ -118,13 +187,13 @@
            border: none;
            box-shadow: none;
         }
         .el-select__selected-item{

         .el-select__selected-item {
            font-family: Segoe UI, Segoe UI;
            color: #ffffff;
            font-size: 14px;
         }
      }

   }

   .singleCol {
@@ -137,6 +206,12 @@
      cursor: pointer;
      background: rgba(74, 72, 72, 0.67);

      &.active {
         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;