<template>
|
<div class="pointControl">
|
<div class="direction">
|
<div class="blackBg directionUp">
|
<el-button type="primary" @click="control">控制</el-button>
|
<el-button type="primary" @click="cancelControl">取消控制</el-button>
|
<el-button type="primary" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @mouseup="onMouseUp">q</el-button>
|
</div>
|
<div class="blackBg directionDown"></div>
|
</div>
|
|
<ControlComPass />
|
</div>
|
</template>
|
<script setup>
|
import ControlComPass from './ControlComPass/ControlComPass.vue'
|
import {
|
KeyCode,
|
useManualControl,
|
} from '@/hooks/controlDrone/useManualControl'
|
import { useMqtt } from '@/hooks/controlDrone/useMqtt'
|
import { useConnectDrone } from '@/hooks/controlDrone/useConnectDrone'
|
import { droneController, exitController, postDrcExit } from '@/api/drc'
|
import { ElMessage } from 'element-plus'
|
import { useStore } from 'vuex'
|
|
const deviceOsdInfo = inject('deviceOsdInfo')
|
const taskDetails = inject('taskDetails')
|
|
|
const deviceTopicInfo = ref({
|
sn: deviceOsdInfo.value?.data?.sn,
|
pubTopic: '',
|
subTopic: '',
|
})
|
const flightController = ref(false)
|
console.log('控制面板')
|
|
// 连接无人机mqtt 成功获得有效控制
|
useConnectDrone()
|
|
// 订阅消息
|
useMqtt(deviceTopicInfo.value)
|
|
// 使用手动控制
|
const { handleKeyup, handleEmergencyStop, resetControlState } = useManualControl(
|
deviceTopicInfo.value,
|
flightController
|
)
|
|
function onMouseDown(type) {
|
console.log('anxia')
|
handleKeyup(type)
|
}
|
|
const store = useStore()
|
const clientId = computed(() => store.state.common.clientId)
|
const dock_sn = computed(() => taskDetails.value.device_sns[0])
|
|
function cancelControl() {
|
exitController({ client_id: clientId.value, dock_sn:dock_sn.value })
|
.then(res => {
|
flightController.value = false
|
deviceTopicInfo.value.subTopic = ''
|
deviceTopicInfo.value.pubTopic = ''
|
ElMessage.success('退出飞行控制成功')
|
})
|
.catch(e => {})
|
}
|
|
// 控制
|
function control() {
|
if (!clientId.value) return ElMessage.error('无人机不在空中，不能进入指挥飞行模式。')
|
if (!dock_sn.value) return ElMessage.error('系统错误，未获取到dock_sn')
|
droneController({ client_id: clientId.value, dock_sn:dock_sn.value }).then(res => {
|
flightController.value = true
|
const { data } = res.data
|
if (data.sub && data.sub?.length > 0) {
|
deviceTopicInfo.value.subTopic = data.sub[0]
|
}
|
if (data.pub && data.pub?.length > 0) {
|
deviceTopicInfo.value.pubTopic = data.pub[0]
|
}
|
ElMessage.success('控制成功')
|
})
|
}
|
|
function onMouseUp() {
|
console.log('弹起')
|
resetControlState()
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.f-c {
|
display: flex;
|
align-items: center;
|
}
|
|
.pointControl {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
width: 1540px;
|
height: 217px;
|
background: rgba(255, 255, 255, 0.3);
|
border-radius: 40px 0px 40px 40px;
|
display: flex;
|
justify-content: center;
|
align-items: flex-end;
|
color: white;
|
gap: 0 10px;
|
pointer-events: all;
|
}
|
</style>
|
