From b80dbbcb1340a5d02b2137efc9ff0e5d84c50647 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 17 Apr 2025 17:12:39 +0800
Subject: [PATCH] feat: 控制台相机控制
---
src/components/CurrentTaskDetails/TaskDetailsLeft.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 96 insertions(+), 21 deletions(-)
diff --git a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
index ce9f85d..812bd86 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
+++ b/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;
--
Gitblit v1.9.3