336 lines
9.2 KiB
Vue
336 lines
9.2 KiB
Vue
<template>
|
|
<VueDragResize
|
|
:w="width"
|
|
:h="height"
|
|
:x="left"
|
|
:y="top"
|
|
:isActive="true"
|
|
:parentLimitation="true"
|
|
:isResizable="false"
|
|
>
|
|
<div class="takeoff-information">
|
|
<div class="title"
|
|
>一键起飞
|
|
<div @click="emits('changeTakeOffForm', true)">
|
|
<CloseOutlined />
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-edit">
|
|
目标点纬度
|
|
<div style="display: flex; flex-direction: column; align-items: center">
|
|
<a-input v-model:value="data.target_latitude" readonly />
|
|
<span style="margin-top: 4px; font-size: 12px; color: #f2762d">地图右键选择目标点</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
目标点经度
|
|
<div>
|
|
<a-input v-model:value="data.target_longitude" readonly />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
目标点高度
|
|
<div>
|
|
<a-input v-model:value="data.target_height" />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
安全起飞高度
|
|
<div>
|
|
<a-input v-model:value="data.security_takeoff_height" />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
返航模式
|
|
<div>
|
|
<a-select v-model:value="data.rth_mode" :options="rth_modeOptions" />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
返航高度
|
|
<div>
|
|
<a-input v-model:value="data.rth_altitude" />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
遥控器失控动作
|
|
<div>
|
|
<a-select v-model:value="data.rc_lost_action" :options="rc_lost_actionOptions" />
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
指点飞行失控动作
|
|
<div>
|
|
<a-select
|
|
v-model:value="data.commander_mode_lost_action"
|
|
:options="commander_mode_lost_actionOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
指点飞行模式
|
|
<div>
|
|
<a-select
|
|
v-model:value="data.commander_flight_mode"
|
|
:options="commander_flight_modeOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="content-edit">
|
|
指点飞行高度
|
|
<div>
|
|
<a-input v-model:value="data.commander_flight_height" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-button">
|
|
<a-button
|
|
type="primary"
|
|
style="background: #0a99eb; width: 40%"
|
|
@click="emits('changeTakeOffForm')"
|
|
>关闭</a-button
|
|
>
|
|
<a-button type="primary" style="background: #3a57e8; width: 40%" @click="takeOff"
|
|
>起飞</a-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</VueDragResize>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive, ref, watch, onMounted } from 'vue';
|
|
import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
|
|
import { timestampToFormattedDate } from '@/utils/index';
|
|
import { buildGUID, uuid } from '@/utils/uuid';
|
|
import { servicesTopicReize, services_replyTopicReize } from '@/utils/debugging/events';
|
|
import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
|
|
import { vDrag } from '@/utils/drag';
|
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
|
import { Map } from '../index';
|
|
import { EventBus } from '@/utils/eventBus';
|
|
import { airPortStore } from '@/store/modules/airport';
|
|
import VueDragResize from 'vue-drag-resize/src';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
|
|
const { createMessage } = useMessage();
|
|
const width = ref(460);
|
|
const height = ref(620);
|
|
const left = ref(300);
|
|
const top = ref(100);
|
|
const airPortStoreVal = airPortStore();
|
|
const airPort = airPortStoreVal.getAirport;
|
|
|
|
const emits = defineEmits(['changeTakeOffForm']);
|
|
const props = defineProps({
|
|
msgData: Object,
|
|
});
|
|
const data = reactive({
|
|
flight_id: uuid(14, 14),
|
|
target_latitude: null,
|
|
target_longitude: null,
|
|
target_height: null,
|
|
security_takeoff_height: 100,
|
|
rth_altitude: 115,
|
|
rth_mode: 1,
|
|
max_speed: 10,
|
|
commander_flight_mode: 1,
|
|
rc_lost_action: 2,
|
|
commander_mode_lost_action: 1,
|
|
commander_flight_height: 115.0,
|
|
flight_safety_advance_check: 1,
|
|
// simulate_mission: {
|
|
// is_enable: 1, // 是否开启模拟任务{"0":"不开启","1":"开启"}
|
|
// latitude: 35.143567, // 模拟器纬度
|
|
// longitude: 118.305623, // 模拟器经度
|
|
// },
|
|
});
|
|
const uavInformation = ref({
|
|
sub_device: {
|
|
// 飞行器状态
|
|
device_online_status: 0,
|
|
},
|
|
drone_battery_maintenance_info: {
|
|
// 电池剩余电量
|
|
capacity_percent: 0,
|
|
},
|
|
wireless_link: {
|
|
// 飞行器上 Dongle 数量
|
|
dongle_number: 0,
|
|
sdr_quality: 0,
|
|
'4g_quality': 0,
|
|
'4g_uav_quality': 0,
|
|
'4g_gnd_quality': 0,
|
|
remain_upload: 0,
|
|
sdr_link_state: 0,
|
|
sdr_freq_band: 0,
|
|
},
|
|
});
|
|
const time = ref(timestampToFormattedDate(new Date().getTime()));
|
|
const rth_modeOptions = ref([
|
|
{ label: '智能高度', value: 0 },
|
|
{ label: '设定高度', value: 1 },
|
|
]);
|
|
const rc_lost_actionOptions = ref([
|
|
{ label: '悬停', value: 0 },
|
|
{ label: '着陆(降落)', value: 1 },
|
|
{ label: '返航', value: 2 },
|
|
]);
|
|
const commander_mode_lost_actionOptions = ref([
|
|
{ label: '继续执行指点飞行任务', value: 0 },
|
|
{ label: '退出指点飞行任务，执行普通失控行为', value: 1 },
|
|
]);
|
|
const commander_flight_modeOptions = ref([
|
|
{ label: '智能高度飞行', value: 0 },
|
|
{ label: '设定高度飞行', value: 1 },
|
|
]);
|
|
watch(
|
|
() => props.msgData,
|
|
(val) => {
|
|
if (val.topic == 'thing/product/' + airPort.sn + '/osd') {
|
|
if (
|
|
val.message.data.sub_device ||
|
|
val.message.data.drone_battery_maintenance_info ||
|
|
val.message.data.wireless_link
|
|
) {
|
|
// console.log(val);
|
|
uavInformation.value = val.message.data;
|
|
time.value = timestampToFormattedDate(val.message.timestamp);
|
|
}
|
|
}
|
|
},
|
|
);
|
|
const takeOff = () => {
|
|
if (
|
|
data.target_latitude == null ||
|
|
data.target_longitude == null ||
|
|
data.target_height == null
|
|
) {
|
|
createMessage.warning('请先选择目标点');
|
|
return;
|
|
}
|
|
const querys = {
|
|
bid: buildGUID(),
|
|
data: data,
|
|
tid: buildGUID(),
|
|
timestamp: new Date().getTime(),
|
|
method: 'takeoff_to_point',
|
|
};
|
|
console.log(querys);
|
|
// 新的
|
|
// servicesTopicReize(querys);
|
|
// services_replyTopicReize();
|
|
// 老的
|
|
servicesTopic(querys);
|
|
services_replyTopic();
|
|
setTimeout(() => {
|
|
emits('changeTakeOffForm');
|
|
}, 1000);
|
|
};
|
|
onMounted(() => {
|
|
// 定位到某个经纬度
|
|
EventBus.on('obtainTheLocation', (val: any) => {
|
|
data.target_latitude = val.lat;
|
|
data.target_longitude = val.lng;
|
|
data.target_height = val.alt;
|
|
});
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.takeoff-information {
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999;
|
|
width: 96%;
|
|
height: 98%;
|
|
padding: 10px;
|
|
background: #0d0e15;
|
|
margin: 10px 0 0 10px;
|
|
box-shadow:
|
|
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
|
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
|
border-radius: 6px;
|
|
backdrop-filter: blur(3px);
|
|
color: #fff;
|
|
.title {
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
|
border-bottom: 1px solid #4e5778;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content-title {
|
|
font-size: 14px;
|
|
padding: 10px 0;
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.content-item {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #4e5778;
|
|
padding: 10px 0;
|
|
.item-div {
|
|
width: 49%;
|
|
img {
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
.content-button {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.content-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// border: 1px solid #4e5778;
|
|
margin-top: 10px;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
input {
|
|
background: none;
|
|
width: 260px;
|
|
text-align: right;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .ant-input-number,
|
|
.ant-input-number-group-wrapper {
|
|
background: none;
|
|
width: 260px !important;
|
|
text-align: right;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .ant-input-number-group-wrapper {
|
|
input {
|
|
background: none;
|
|
width: 260px !important;
|
|
text-align: right;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
::v-deep .ant-select-selector {
|
|
background: none;
|
|
width: 260px;
|
|
text-align: right;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|