<template>
|
<div class="taskDetailsLeft">
|
<div class="title">负载控制</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 @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" />
|
</el-select>
|
<div class="multiCol">
|
<div @click="takePictures">拍照</div>
|
<div @click="recordFun">{{ isRecording ? '录像中...' : '录像' }}</div>
|
</div>
|
<div class="multiCol">
|
<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, 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 },
|
{ name: '流畅', id: 1 },
|
{ name: '标清', id: 2 },
|
{ name: '高清', id: 3 },
|
{ name: '超清', id: 4 },
|
]
|
|
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()
|
}
|
|
// 画质切换
|
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(dockSn.value, type).then(res => {
|
ElMessage.success(msg)
|
EventBus.emit(emitType)
|
isRecording.value = !isRecording.value
|
})
|
}
|
|
// 拍照
|
function takePictures() {
|
// photo拍照，video_start开始录像，video_stop结束录像
|
callPhotoAndVideoCmd(dockSn.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;
|
|
.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;
|
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);
|
|
&.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;
|
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>
|
