From 61e6956be147e1e84e7104f16dd47e9f87f20dfd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 10:57:32 +0800
Subject: [PATCH] feat: 控制台显示一些信息
---
src/components/CurrentTaskDetails/TaskDetailsLeft.vue | 129 ++++++++++++++++++++++++++++++++++--------
1 files changed, 104 insertions(+), 25 deletions(-)
diff --git a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
index 8d2e516..89b9174 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="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;
--
Gitblit v1.9.3