<template>
|
<div class="manualControl" v-if="false">
|
<div class="manualControlBg">
|
<div class="manualControlBorder">
|
<div class="manualControlCenter" @click="airAlleyOop">
|
<img :src="controlCenterImg" alt="" />
|
</div>
|
</div>
|
<div
|
v-for="item in controlBtnList"
|
:key="item.name"
|
:style="item.style"
|
:title="item.name"
|
:class="{
|
operateBtn: true,
|
active: item.active,
|
disable: item.disable || (item.name === '控制台' ? false : apiDisable),
|
}"
|
@click="funBtnClick(item)"
|
></div>
|
<SvgIcon
|
v-for="(item, index) in controlBtnList"
|
:name="item.svg"
|
:class="`${'btnIcon-' + index} btnIcon ${item.active ? 'active' : ''}`"
|
:style="item.imgStyle"
|
/>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { stopRecording } from '@/api/drc'
|
import { checkControllUserMeApi, closeSendWsApi, setWidgetSetApi, stopVoiceApi } from '@/api/payload'
|
import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
|
import SvgIcon from '@/components/SvgIcon.vue'
|
import EventBus from '@/utils/eventBus'
|
import { ElMessage } from 'element-plus'
|
import { useStore } from 'vuex'
|
import _, { throttle } from 'lodash'
|
import { useRunOnce } from '@/hooks'
|
import { showToast } from 'vant'
|
const store = useStore()
|
|
const isAutoControl = inject('isAutoControl')
|
const isBackDock = inject('isBackDock')
|
const droneStatus = inject('droneStatus')
|
const showUpKeyPanel = inject('showUpKeyPanel')
|
const isManualControl = inject('isManualControl')
|
const dockSn = inject('dockSn')
|
const isAiLive = inject('isAiLive')
|
const droneSn = inject('droneSn')
|
const usedControl = inject('usedControl')
|
const apiDisable = inject('apiDisable')
|
const airAlleyOopShow = ref(false)
|
const recordingId = inject('recordingId')
|
const isRouteRecord = inject('isRouteRecord')
|
const controlBtnList = ref([
|
{
|
name: '自动控制',
|
svg: 'autoControl',
|
style: { top: '-70%' },
|
active: true,
|
handle: autoControl,
|
},
|
{ name: '控制台', svg: 'consoleBtn', style: { left: '70%' }, active: false, handle: showConsole },
|
{
|
name: '手动控制',
|
svg: 'manualControl',
|
style: { top: '70%' },
|
active: false,
|
handle: manualControl,
|
},
|
{ name: '返航/取消返航', svg: 'turnBack', style: { left: '-70%' }, active: false, handle: turnBack },
|
])
|
|
// 自动控制
|
function autoControl() {
|
EventBus.emit('controlPanel-cancelManualControl')
|
}
|
|
function funBtnClick(item) {
|
if (item.name !== '控制台' && apiDisable.value) {
|
return
|
}
|
!item.disable && item.handle()
|
}
|
|
// 切换控制台显示
|
function showConsole() {
|
if (!showUpKeyPanel.value && [undefined, 0, 14].includes(droneStatus.value.mode_code)) {
|
return showToast('当前状态无法操作')
|
}
|
showUpKeyPanel.value = !showUpKeyPanel.value
|
if (showUpKeyPanel.value) {
|
EventBus.emit('controlPanel-getPayloadControl')
|
}
|
}
|
|
// 手动控制
|
function manualControl() {
|
usedControl.value = true
|
EventBus.emit('controlPanel-control')
|
}
|
|
// 返航
|
function turnBack() {
|
EventBus.emit('controlPanel-returnOrCancelReturn')
|
}
|
// 设置回显状态
|
function setSelectStatus() {
|
const modeCode = droneStatus?.value?.mode_code
|
|
if (modeCode === undefined) return
|
// 自动控制
|
if ([0, 1, 2, 4, 5, 14].includes(modeCode)) {
|
controlBtnList.value = controlBtnList.value.map(item => ({ ...item, active: false }))
|
controlBtnList.value[0].active = true
|
isAutoControl.value = true
|
isBackDock.value = false
|
isManualControl.value = false
|
}
|
// 控制中
|
if ([3, 16, 17].includes(modeCode)) {
|
controlBtnList.value = controlBtnList.value.map(item => ({ ...item, active: false }))
|
controlBtnList.value[2].active = true
|
isManualControl.value = true
|
isAutoControl.value = false
|
isBackDock.value = false
|
}
|
// 降落中
|
if ([9, 10, 11, 12].includes(modeCode)) {
|
controlBtnList.value = controlBtnList.value.map(item => ({ ...item, active: false }))
|
controlBtnList.value[3].active = true
|
isAutoControl.value = false
|
isManualControl.value = false
|
isAiLive.value && closeAiFunOnce()
|
isBackDock.value = true
|
if (recordingId.value) {
|
getstopRecording()
|
recordingId.value = ''
|
}
|
if (modeCode === 10) {
|
showUpKeyPanel.value = false
|
}
|
}
|
}
|
|
// 停止录制
|
const getstopRecording = useRunOnce(() => {
|
if (!droneSn.value) return
|
isRouteRecord.value = false
|
stopRecording(recordingId.value).then(res => {
|
recordingId.value = ''
|
showToast('航线录制结束')
|
})
|
})
|
|
// 设置按钮禁用状态
|
function setButtonDisabledStatus() {
|
const modeCode = droneStatus?.value?.mode_code
|
controlBtnList.value[0].disable = [undefined, 0, 14, 9, 10, 11, 12].includes(modeCode)
|
controlBtnList.value[1].disable = [undefined, 0, 10, 14].includes(modeCode)
|
controlBtnList.value[2].disable = [undefined, 0, 14, 9, 10].includes(modeCode)
|
if ([undefined, 0, 14].includes(modeCode)) {
|
controlBtnList.value[3].disable = true
|
} else {
|
controlBtnList.value[3].disable = false
|
if ([9, 10, 11, 12].includes(modeCode)) {
|
controlBtnList.value[3].disable = modeCode !== 9
|
}
|
}
|
}
|
|
// 获取控制 只触发一次
|
const getControlFunOnce = useRunOnce(() => {
|
usedControl.value ||
|
checkControllUserMeApi(dockSn.value).then(res => {
|
const isMe = res.data.data
|
isMe && EventBus.emit('controlPanel-control', { hasTips: false })
|
})
|
})
|
|
const closeAiFunOnce = throttle(()=>{
|
EventBus.emit('CurrentTaskDetails-getDroneLiveUrl')
|
closeSendWsApi(droneSn.value, { type: 'AI' })
|
}, 4000)
|
|
// 统一节流
|
const statusThrottle = throttle(() => {
|
setButtonDisabledStatus()
|
setSelectStatus()
|
}, 1000)
|
|
function airAlleyOop() {
|
// airAlleyOopShow.value = true
|
}
|
|
watch(droneStatus, statusThrottle, { deep: true, immediate: true })
|
</script>
|
|
<style scoped lang="scss">
|
.manualControl {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 188px;
|
height: 188px;
|
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
|
border-radius: 40px 40px 40px 40px;
|
|
.manualControlBg {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
width: 165px;
|
height: 165px;
|
border-radius: 50%;
|
position: relative;
|
background: radial-gradient(circle, #5d5c5e 0%, #514f52 50%, #3d3b3d 100%);
|
|
.operateBtn {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
transform: rotate(45deg);
|
|
&.active,
|
&:hover {
|
cursor: pointer;
|
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
|
z-index: 1;
|
background: rgba(255, 255, 255, 0.19);
|
}
|
|
&.active {
|
z-index: 2;
|
background: radial-gradient(circle, #5d5c5e 0%, #6d6d6d 50%, #4a454a 100%);
|
}
|
|
&.disable {
|
cursor: not-allowed;
|
}
|
}
|
|
.btnIcon {
|
position: absolute;
|
font-size: 24px;
|
pointer-events: none;
|
color: #8e8e8f;
|
z-index: 2;
|
|
&.active {
|
color: #fff;
|
}
|
|
&-0 {
|
left: 50%;
|
top: 20px;
|
transform: translateX(-50%);
|
}
|
|
&-1 {
|
top: 50%;
|
right: 20px;
|
transform: translateY(-50%);
|
}
|
|
&-2 {
|
bottom: 20px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
&-3 {
|
top: 50%;
|
left: 20px;
|
transform: translateY(-50%);
|
}
|
}
|
|
.manualControlBorder {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 135px;
|
height: 135px;
|
border-radius: 50%;
|
border: 2px solid #ffffff;
|
|
.manualControlCenter {
|
cursor: pointer;
|
z-index: 5;
|
width: 50px;
|
height: 50px;
|
background: #404040;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 18px;
|
height: 18px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
