feat: 控制台显示一些信息

罗广辉

2025-04-18 61e6956be147e1e84e7104f16dd47e9f87f20dfd

 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="ptzResetMode(0)">云台回中</div>
         <div @click="ptzResetMode(1)">云台朝下</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" />
@@ -16,20 +22,41 @@
         <div @click="recordFun">{{ isRecording ? '录像中...' : '录像' }}</div>
      </div>
      <div class="multiCol">
         <div>喊话</div>
         <div>广播</div>
         <div @click="ElMessage.warning('加急开发中...')">喊话</div>
         <div @click="ElMessage.warning('加急开发中...')">广播</div>
      </div>

      <div class="cameraZoom">
         <el-slider
            v-model="cameraParams.zoom_factor"
            vertical
            :min="cameraParams.camera_type === 'ir' ? 2 : 0"
            :max="cameraParams.camera_type === 'ir' ? 200 : 200"
            @change="sliderChange"
         />
      </div>
   </div>
</template>

<script setup>
import EventBus from '@/event-bus'
import { callPhotoAndVideoCmd, switchLivestream } from '@/api/payload'
import { callPhotoAndVideoCmd, cameraParamsChangeApi, ptzResetModeApi } 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 +66,43 @@
   { name: '超清', id: 4 },
]

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

// 倍率调整
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() {
   const { camera_type, zoom_factor} = cameraParams.value
   cameraParamsChangeApi({
      sn: dockSn.value,
      ...cameraParams.value,
      zoom_factor: camera_type === 'wide' ? undefined : zoom_factor,
   })
}

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 = 2
   }
   cameraParamsChange()
}

// 画质切换
@@ -59,7 +115,8 @@
   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 => {

   callPhotoAndVideoCmd(dockSn.value, type).then(res => {
      ElMessage.success(msg)
      EventBus.emit(emitType)
      isRecording.value = !isRecording.value
@@ -69,7 +126,7 @@
// 拍照
function takePictures() {
   // photo拍照，video_start开始录像，video_stop结束录像
   callPhotoAndVideoCmd(droneSn.value, 'photo').then(res => {
   callPhotoAndVideoCmd(dockSn.value, 'photo').then(res => {
      ElMessage.success('拍照成功')
   })
}
@@ -99,17 +156,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;
@@ -117,13 +190,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 {
@@ -136,6 +209,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;