|
|
|
@ -1,6 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<VueDragResize :w="width" :h="height" :x="left" :y="top" :isActive="true" :parentLimitation="true"
|
|
|
|
|
:isResizable="false">
|
|
|
|
|
<VueDragResize
|
|
|
|
|
:w="width"
|
|
|
|
|
:h="height"
|
|
|
|
|
:x="left"
|
|
|
|
|
:y="top"
|
|
|
|
|
:isActive="true"
|
|
|
|
|
:parentLimitation="true"
|
|
|
|
|
:isResizable="false"
|
|
|
|
|
>
|
|
|
|
|
<div class="flight-control" v-if="airportVal" v-drag>
|
|
|
|
|
<div class="title">
|
|
|
|
|
<div>
|
|
|
|
@ -20,7 +27,7 @@
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="content-button">
|
|
|
|
|
<a-button @click="takeOff">一键起飞</a-button>
|
|
|
|
|
<a-button @click="emits('clickFlyTo')">指点飞行</a-button>
|
|
|
|
|
<a-button @click="flyTo">指点飞行</a-button>
|
|
|
|
|
<!-- <a-button>智能环绕</a-button> -->
|
|
|
|
|
<a-button @click="returnVoyage">一键返航</a-button>
|
|
|
|
|
<a-button @click="obtain" style="background-color: #1b71e8; border: none">
|
|
|
|
@ -35,53 +42,118 @@
|
|
|
|
|
</template>
|
|
|
|
|
进入飞行控制
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button @click="exitDRC" style="background-color: #e3150e; border: none">退出飞行控制</a-button>
|
|
|
|
|
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
|
|
|
|
|
>退出飞行控制</a-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-info">
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
|
|
|
|
|
<div class="info-item-top" title="上升" @mousedown="changeDRC('throttle', 'up', '上升')"
|
|
|
|
|
@mouseup="changeDRC('throttle', 'up', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/top-active.png" alt="" v-if="selectName == '上升'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-top"
|
|
|
|
|
title="上升"
|
|
|
|
|
@mousedown="changeDRC('throttle', 'up', '上升')"
|
|
|
|
|
@mouseup="changeDRC('throttle', 'up', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/top-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '上升'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/top.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-right" title="右旋转" @mousedown="changeDRC('yaw', 'up', '右旋转')"
|
|
|
|
|
@mouseup="changeDRC('yaw', 'up', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/right-active.png" alt="" v-if="selectName == '右旋转'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-right"
|
|
|
|
|
title="右旋转"
|
|
|
|
|
@mousedown="changeDRC('yaw', 'up', '右旋转')"
|
|
|
|
|
@mouseup="changeDRC('yaw', 'up', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/right-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '右旋转'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/right.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-bottom" title="下降" @mousedown="changeDRC('throttle', 'down', '下降')"
|
|
|
|
|
@mouseup="changeDRC('throttle', 'down', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/bottom-active.png" alt="" v-if="selectName == '下降'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-bottom"
|
|
|
|
|
title="下降"
|
|
|
|
|
@mousedown="changeDRC('throttle', 'down', '下降')"
|
|
|
|
|
@mouseup="changeDRC('throttle', 'down', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/bottom-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '下降'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-left" title="左旋转" @mousedown="changeDRC('yaw', 'down', '左旋转')"
|
|
|
|
|
@mouseup="changeDRC('yaw', 'down', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/left-active.png" alt="" v-if="selectName == '左旋转'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-left"
|
|
|
|
|
title="左旋转"
|
|
|
|
|
@mousedown="changeDRC('yaw', 'down', '左旋转')"
|
|
|
|
|
@mouseup="changeDRC('yaw', 'down', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/left-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '左旋转'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/left.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
|
|
|
|
|
<div class="info-item-top" title="前进"
|
|
|
|
|
@mousedown="changeDRC('pitch', 'up', '前进')" @mouseup="changeDRC('pitch', 'up', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/top-active.png" alt=""
|
|
|
|
|
v-if="selectName == '前进'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-top"
|
|
|
|
|
title="前进"
|
|
|
|
|
@mousedown="changeDRC('pitch', 'up', '前进')"
|
|
|
|
|
@mouseup="changeDRC('pitch', 'up', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/top-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '前进'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/top.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-right" title="右移"
|
|
|
|
|
@mousedown="changeDRC('roll', 'up', '右移')" @mouseup="changeDRC('roll', 'up', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/right-active.png" alt="" v-if="selectName == '右移'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-right"
|
|
|
|
|
title="右移"
|
|
|
|
|
@mousedown="changeDRC('roll', 'up', '右移')"
|
|
|
|
|
@mouseup="changeDRC('roll', 'up', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/right-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '右移'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/right.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-bottom" title="后退"
|
|
|
|
|
@mousedown="changeDRC('pitch', 'down', '后退')" @mouseup="changeDRC('pitch', 'down', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/bottom-active.png" alt="" v-if="selectName == '后退'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-bottom"
|
|
|
|
|
title="后退"
|
|
|
|
|
@mousedown="changeDRC('pitch', 'down', '后退')"
|
|
|
|
|
@mouseup="changeDRC('pitch', 'down', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/bottom-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '后退'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item-left" title="左移"
|
|
|
|
|
@mousedown="changeDRC('roll', 'down', '左移')" @mouseup="changeDRC('roll', 'down', '')">
|
|
|
|
|
<img src="@/assets/images/flightoperation/left-active.png" alt="" v-if="selectName == '左移'" />
|
|
|
|
|
<div
|
|
|
|
|
class="info-item-left"
|
|
|
|
|
title="左移"
|
|
|
|
|
@mousedown="changeDRC('roll', 'down', '左移')"
|
|
|
|
|
@mouseup="changeDRC('roll', 'down', '')"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/flightoperation/left-active.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="selectName == '左移'"
|
|
|
|
|
/>
|
|
|
|
|
<img src="@/assets/images/flightoperation/left.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -120,10 +192,15 @@ import { useUserStore } from '@/store/modules/user';
|
|
|
|
|
import { timestampToFormattedDate } from '@/utils/index';
|
|
|
|
|
import VueDragResize from 'vue-drag-resize/src';
|
|
|
|
|
import { airPortStore } from '@/store/modules/airport';
|
|
|
|
|
import { EventBus } from '@/utils/eventBus';
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
uavStatus: Number,
|
|
|
|
|
});
|
|
|
|
|
console.log(props.uavStatus);
|
|
|
|
|
const airPortStoreVal = airPortStore();
|
|
|
|
|
const uav = airPortStoreVal.getUAV;
|
|
|
|
|
|
|
|
|
|
const isTakeOff = ref(false);
|
|
|
|
|
const width = ref(380);
|
|
|
|
|
const height = ref(390);
|
|
|
|
|
const left = ref(700);
|
|
|
|
@ -169,10 +246,24 @@ const takeOff = () => {
|
|
|
|
|
createMessage.warning('当前有用户正在操作,请稍后再试');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isTakeOff.value) {
|
|
|
|
|
createMessage.warning('请勿重复操作');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
emits('clickTakeOff');
|
|
|
|
|
changeRedisUser(true);
|
|
|
|
|
};
|
|
|
|
|
// 指点飞行
|
|
|
|
|
const flyTo = () => {
|
|
|
|
|
console.log('飞行器状态', props.uavStatus);
|
|
|
|
|
console.log('是否一键起飞', !isTakeOff.value);
|
|
|
|
|
console.log(props.uavStatus == 0 && !isTakeOff.value);
|
|
|
|
|
if (!props.uavStatus && !isTakeOff.value) {
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
emits('clickFlyTo');
|
|
|
|
|
};
|
|
|
|
|
// 获取
|
|
|
|
|
const obtain = () => {
|
|
|
|
|
// if (!getClient()) {
|
|
|
|
@ -182,6 +273,10 @@ const obtain = () => {
|
|
|
|
|
createMessage.warning('当前有用户正在操作,请稍后再试');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (props.uavStatus == 0 && !isTakeOff.value) {
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (flightGrab.value) {
|
|
|
|
|
createMessage.warning('已经获取了飞行器控制权');
|
|
|
|
|
return;
|
|
|
|
@ -211,6 +306,10 @@ const obtain = () => {
|
|
|
|
|
// 一键返航
|
|
|
|
|
const returnBtn = ref(false);
|
|
|
|
|
const returnVoyage = () => {
|
|
|
|
|
if (props.uavStatus == 0 && !isTakeOff.value) {
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (returnBtn.value) {
|
|
|
|
|
createMessage.warning('正在返航或已返航,请勿重复操作');
|
|
|
|
|
return;
|
|
|
|
@ -249,7 +348,7 @@ const changeDRC = (type, value, name) => {
|
|
|
|
|
let querys = getDRCFlightQuery(type, value, seq);
|
|
|
|
|
drcDownTopicReize(querys);
|
|
|
|
|
createMessage.info(name + '指令已发送');
|
|
|
|
|
}, 1000)
|
|
|
|
|
}, 1000);
|
|
|
|
|
}, longPressDuration.value);
|
|
|
|
|
if (isLongPress) {
|
|
|
|
|
isLongPress = false;
|
|
|
|
@ -259,7 +358,6 @@ const changeDRC = (type, value, name) => {
|
|
|
|
|
let querys = getDRCFlightQuery(type, value, seq);
|
|
|
|
|
drcDownTopicReize(querys);
|
|
|
|
|
createMessage.info(name + '指令已发送');
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
if (longPressTimer.value) {
|
|
|
|
|
clearTimeout(longPressTimer.value);
|
|
|
|
@ -299,7 +397,13 @@ const getDRCFlightQuery = (type, value, seq) => {
|
|
|
|
|
return querys;
|
|
|
|
|
};
|
|
|
|
|
const drcSeq = ref(1);
|
|
|
|
|
let drc_mode_enter_timer;
|
|
|
|
|
const drc_mode_enter_val = ref(1);
|
|
|
|
|
const enterDRC = () => {
|
|
|
|
|
if (props.uavStatus == 0 && !isTakeOff.value) {
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
|
createMessage.warning('请先获取飞行控制权');
|
|
|
|
|
return;
|
|
|
|
@ -317,6 +421,7 @@ const enterDRC = () => {
|
|
|
|
|
address: connectUrl,
|
|
|
|
|
// client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
|
|
|
|
|
client_id: 'mqtt_client_1581F8HGX254V00A0BUYSeize',
|
|
|
|
|
// client_id: 'mqttx_' + Math.random().toString(16).substring(2, 8),
|
|
|
|
|
enable_tls: false,
|
|
|
|
|
expire_time: 3600,
|
|
|
|
|
password: '',
|
|
|
|
@ -331,6 +436,16 @@ const enterDRC = () => {
|
|
|
|
|
servicesTopic(querys);
|
|
|
|
|
drc_eart_beat();
|
|
|
|
|
drcUpTopic();
|
|
|
|
|
drc_mode_enter_timer = window.setInterval(() => {
|
|
|
|
|
if (drc_mode_enter_val.value > 30) {
|
|
|
|
|
window.clearInterval(drc_mode_enter_timer);
|
|
|
|
|
drc_mode_enter_timer = null;
|
|
|
|
|
drc_mode_enter_val.value = 0;
|
|
|
|
|
createMessage.error('进入指令飞行控制模式失败,无响应');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
drc_mode_enter_val.value++;
|
|
|
|
|
}, 1000);
|
|
|
|
|
};
|
|
|
|
|
let timer;
|
|
|
|
|
const drc_eart_beat = () => {
|
|
|
|
@ -354,6 +469,10 @@ const drc_eart_beat = () => {
|
|
|
|
|
eventsTopicSubscribe();
|
|
|
|
|
};
|
|
|
|
|
const exitDRC = () => {
|
|
|
|
|
if (props.uavStatus == 0 && !isTakeOff.value) {
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
createMessage.info('正在退出飞行控制,请稍后');
|
|
|
|
|
const querys = {
|
|
|
|
|
bid: bid,
|
|
|
|
@ -401,8 +520,10 @@ onMounted(() => {
|
|
|
|
|
modeEnter.value = false;
|
|
|
|
|
createMessage.success('退出指令飞行控制模式成功');
|
|
|
|
|
changeRedisUser(false);
|
|
|
|
|
window.clearInterval(drc_mode_enter_timer);
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('退出指令飞行控制模式失败,' + errorName(rs.data.result));
|
|
|
|
|
window.clearInterval(drc_mode_enter_timer);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 一键返航
|
|
|
|
@ -419,6 +540,8 @@ onMounted(() => {
|
|
|
|
|
if (rs.method === 'takeoff_to_point') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
createMessage.success('一键起飞成功');
|
|
|
|
|
isTakeOff.value = true;
|
|
|
|
|
EventBus.emit('closeTranslation', null);
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('一键起飞失败,' + errorName(rs.data.result));
|
|
|
|
|
}
|
|
|
|
@ -437,6 +560,7 @@ onMounted(() => {
|
|
|
|
|
if (rs.method == 'fly_to_point') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
createMessage.success('指点飞行成功');
|
|
|
|
|
EventBus.emit('closeTranslation', null);
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('指点飞行失败,' + errorName(rs.data.result));
|
|
|
|
|
}
|
|
|
|
@ -445,6 +569,7 @@ onMounted(() => {
|
|
|
|
|
});
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
window.clearInterval(timer);
|
|
|
|
|
window.clearInterval(drc_mode_enter_timer);
|
|
|
|
|
destroySeizeConnection();
|
|
|
|
|
changeRedisUser(false);
|
|
|
|
|
monitorDRC.value = false;
|
|
|
|
|