280 lines
7.4 KiB
Vue
280 lines
7.4 KiB
Vue
<template>
|
|
<div>
|
|
<div style="width: calc(100vw - 226px); height: calc(100vh - 20px)">
|
|
<Map :airRoute="airRoute" @flyToThere="flyToThere" :airPort="airPort" :uavTrack="uavTrack" />
|
|
</div>
|
|
<SelectComponent @selectChange="changeSelect" />
|
|
<AirportInformation
|
|
@changeLive="changeAirportLive"
|
|
@changeRemote="changeRemote"
|
|
:msgData="msgData"
|
|
/>
|
|
<UAVInformation
|
|
:msgData="msgData"
|
|
@changeLoadControl="changeLoadControl"
|
|
@changeFlightControl="changeFlightControl"
|
|
@loadLiveStreaming="loadLiveStreaming"
|
|
/>
|
|
<!-- 远程调试 -->
|
|
<!-- <div v-if="remoteVisible">
|
|
<RemoteDebugging @changeRemote="changeRemote" :msgData="msgData" />
|
|
</div> -->
|
|
<!-- 负载控制 -->
|
|
<LoadControl
|
|
v-if="loadControlVisible"
|
|
@changeLoadControl="changeLoadControl"
|
|
:msgData="msgData"
|
|
:cameraType="cameraType"
|
|
/>
|
|
<!-- 飞行控制 -->
|
|
<FlightControl
|
|
@changeFlightControl="changeFlightControl"
|
|
@clickTakeOff="clickTakeOff"
|
|
@clickFlyTo="clickFlyTo"
|
|
v-if="flightControlVisible"
|
|
/>
|
|
<!-- 一键起飞表单 -->
|
|
<TakeOffForm
|
|
v-if="takeOffFormVisible"
|
|
@changeTakeOffForm="changeTakeOffForm"
|
|
:locationVal="locationVal"
|
|
/>
|
|
<!-- 指点飞行表单 -->
|
|
|
|
<FlyToForm
|
|
v-if="flyToFormVisible"
|
|
@changeFlyToForm="changeFlyToForm"
|
|
:locationVal="locationVal"
|
|
/>
|
|
<AirportLive
|
|
:msgData="msgData"
|
|
v-if="airportLiveVisible"
|
|
@changeAirportLive="airportLiveVisible = false"
|
|
/>
|
|
<LivePreview
|
|
v-if="livePreviewVisible"
|
|
:msgData="msgData"
|
|
:uavLive="uavLive"
|
|
:airportLiveVisible="airportLiveVisible"
|
|
@loadLiveStreaming="livePreviewVisible = false"
|
|
@changeCameraType="changeCameraType"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, onBeforeUnmount, reactive } from 'vue';
|
|
import {
|
|
SelectComponent,
|
|
AirportInformation,
|
|
UAVInformation,
|
|
AirportLive,
|
|
LivePreview,
|
|
Map,
|
|
RemoteDebugging,
|
|
LoadControl,
|
|
FlightControl,
|
|
TakeOffForm,
|
|
FlyToForm,
|
|
} from './index';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
|
|
import { buildGUID } from '@/utils/uuid';
|
|
import { vDrag } from '@/utils/drag';
|
|
import { EventBus } from '@/utils/eventBus';
|
|
import { drcUpTopic } from '@/utils/debugging/remote';
|
|
import { airPortStore } from '@/store/modules/airport';
|
|
|
|
const airPortStoreVal = airPortStore();
|
|
const airPortInfo = airPortStoreVal.getAirport;
|
|
const UAVinfo = airPortStoreVal.getUAV;
|
|
const { createMessage } = useMessage();
|
|
const airRoute = ref({
|
|
airLineType: null,
|
|
airType: null,
|
|
airModel: null,
|
|
name: null,
|
|
});
|
|
const locationVal: any = ref({});
|
|
const flyToThere = (e) => {
|
|
console.log(e);
|
|
locationVal.value.lat = e._lat;
|
|
locationVal.value.lng = e._lng;
|
|
locationVal.value.alt = e._alt;
|
|
EventBus.emit('obtainTheLocation', locationVal.value);
|
|
};
|
|
const airPort = ref({
|
|
latitude: null,
|
|
longitude: null,
|
|
});
|
|
const uavTrack = ref({});
|
|
onMounted(() => {
|
|
destroyConnection();
|
|
createConnection();
|
|
setTimeout(() => {
|
|
changeSelect();
|
|
}, 1000);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
destroyConnection();
|
|
});
|
|
const changeSelectValue = ref();
|
|
// 机场直播
|
|
const airportLiveVisible = ref(false);
|
|
// 无人机直播
|
|
const livePreviewVisible = ref(false);
|
|
// 远程调试
|
|
const remoteVisible = ref(false);
|
|
// 负载控制
|
|
const loadControlVisible = ref(false);
|
|
// 飞行控制
|
|
const flightControlVisible = ref(false);
|
|
// 一键起飞表单
|
|
const takeOffFormVisible = ref(false);
|
|
// 指点飞行表单
|
|
const flyToFormVisible = ref(false);
|
|
// 一键起飞后开启无人机直播
|
|
const uavLive = ref(false);
|
|
const changeAirportLive = () => {
|
|
airportLiveVisible.value = !airportLiveVisible.value;
|
|
};
|
|
const changeRemote = () => {
|
|
remoteVisible.value = !remoteVisible.value;
|
|
};
|
|
const changeLoadControl = () => {
|
|
loadControlVisible.value = !loadControlVisible.value;
|
|
};
|
|
const changeFlightControl = () => {
|
|
flightControlVisible.value = !flightControlVisible.value;
|
|
};
|
|
const clickTakeOff = () => {
|
|
takeOffFormVisible.value = true;
|
|
};
|
|
const clickFlyTo = () => {
|
|
flyToFormVisible.value = true;
|
|
};
|
|
const changeTakeOffForm = (val) => {
|
|
takeOffFormVisible.value = false;
|
|
if (!val) {
|
|
setTimeout(() => {
|
|
uavLive.value = true;
|
|
livePreviewVisible.value = true;
|
|
}, 2000);
|
|
}
|
|
};
|
|
const loadLiveStreaming = () => {
|
|
livePreviewVisible.value = !livePreviewVisible.value;
|
|
};
|
|
const changeFlyToForm = () => {
|
|
flyToFormVisible.value = false;
|
|
};
|
|
const cameraType = ref('wide');
|
|
const changeCameraType = (value: any) => {
|
|
console.log(value);
|
|
cameraType.value = value;
|
|
};
|
|
const msgData = ref();
|
|
const changeSelect = async (value?: any) => {
|
|
// 页面初始化
|
|
// 机场直播
|
|
airportLiveVisible.value = false;
|
|
// 无人机直播
|
|
livePreviewVisible.value = false;
|
|
// 远程调试
|
|
remoteVisible.value = false;
|
|
// 负载控制
|
|
loadControlVisible.value = false;
|
|
// 飞行控制
|
|
flightControlVisible.value = false;
|
|
// 一键起飞表单
|
|
takeOffFormVisible.value = false;
|
|
// 指点飞行表单
|
|
flyToFormVisible.value = false;
|
|
// 一键起飞后开启无人机直播
|
|
uavLive.value = false;
|
|
changeSelectValue.value = value;
|
|
const topicUrl = 'thing/product/' + airPortInfo.sn + '/osd';
|
|
// 订阅机场消息
|
|
clientSubscribe(topicUrl, { qos: 0 });
|
|
const topicUAVUrl = 'thing/product/' + UAVinfo.sn + '/osd';
|
|
// 订阅飞行器消息
|
|
clientSubscribe(topicUAVUrl, { qos: 0 });
|
|
|
|
// 接收消息
|
|
getClient().on('message', (topic, message) => {
|
|
const rs = JSON.parse(message);
|
|
if (rs) {
|
|
msgData.value = {
|
|
topic: topic,
|
|
message: rs,
|
|
};
|
|
if (rs.data.latitude && rs.data.longitude) {
|
|
airPort.value.latitude = rs.data.latitude;
|
|
airPort.value.longitude = rs.data.longitude;
|
|
}
|
|
// relative_alternate_land_point 都是0
|
|
// self_converge_coordinate 飞不飞没什么变化
|
|
// alternate_land_point 都是0
|
|
if (topic == topicUAVUrl) {
|
|
if (rs.data.latitude && rs.data.longitude) {
|
|
uavTrack.value = rs.data;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flightoperation-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.flightoperation-top {
|
|
display: flex;
|
|
}
|
|
.select-item {
|
|
width: 160px;
|
|
height: 38px;
|
|
margin-left: 10px;
|
|
background: #3a57e8;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
::v-deep .ant-select-selector {
|
|
background: #3a57e8;
|
|
border: none;
|
|
color: #fff;
|
|
.ant-select-selection-placeholder {
|
|
color: #fff;
|
|
}
|
|
}
|
|
::v-deep .ant-select-arrow {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.select-item:nth-child(2) {
|
|
background: #08b1ba;
|
|
::v-deep .ant-select-selector {
|
|
background: #08b1ba;
|
|
}
|
|
}
|
|
.select-item:nth-child(3) {
|
|
background: #1aa053;
|
|
::v-deep .ant-select-selector {
|
|
background: #1aa053;
|
|
}
|
|
}
|
|
.AirportLive {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 20px;
|
|
}
|
|
.LivePreview {
|
|
width: 100%;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 20px;
|
|
}
|
|
</style>
|