<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="multiCol">
|
<div>云台回中</div>
|
<div>云台朝下</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" />
|
</el-select>
|
<div class="multiCol">
|
<div @click="takePictures">拍照</div>
|
<div @click="recordFun">{{ isRecording ? '录像中...' : '录像' }}</div>
|
</div>
|
<div class="multiCol">
|
<div>喊话</div>
|
<div>广播</div>
|
</div>
|
</div>
|
</template>
|
|
<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 {
|
z-index: 2;
|
position: absolute;
|
left: 18px;
|
top: 50%;
|
transform: translateY(-60%);
|
width: 178px;
|
height: 409px;
|
background: rgba(0, 0, 0, 0.5);
|
backdrop-filter: blur(5px);
|
border-radius: 20px 20px 20px 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
line-height: 18px;
|
text-align: center;
|
align-items: center;
|
gap: 12px;
|
|
.qualityChange{
|
width: 146px;
|
height: 40px;
|
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);
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.78);
|
color: #3d3b3b;
|
border: 1px solid rgba(255, 255, 255, 0.99);
|
}
|
}
|
|
.multiCol {
|
display: flex;
|
gap: 12px;
|
|
> 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);
|
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);
|
}
|
}
|
}
|
}
|
</style>
|
