视频地址修改，飞行控制逻辑更换
parent
49cd03a170
commit
030dd2cc9a
|
|
@ -31,3 +31,7 @@ export const drcDownTopicReize = (data) => {
|
|||
// 发送消息thing/product/{gateway_sn}/drc/down
|
||||
clientReizePublish('thing/product/8UUXN5400A079H/drc/down', data);
|
||||
};
|
||||
export const eventsTopicSubscribeReize = () => {
|
||||
// 发送消息
|
||||
clientReizeSubscribe('thing/product/8UUXN5400A079H/events');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,3 +38,20 @@ export const services_replyUAVTopic = () => {
|
|||
// 订阅消息
|
||||
clientSubscribe('thing/product/1581F8HGX254V00A0BUY/services_reply');
|
||||
};
|
||||
export const eventsTopic = (data) => {
|
||||
// 发送消息
|
||||
clientPublish('thing/product/8UUXN5400A079H/events', data);
|
||||
};
|
||||
export const events_replyTopic = () => {
|
||||
// 订阅消息
|
||||
clientSubscribe('thing/product/8UUXN5400A079H/events_reply');
|
||||
};
|
||||
export const drcDownTopic = (data) => {
|
||||
// 发送消息thing/product/{gateway_sn}/drc/down
|
||||
clientPublish('thing/product/8UUXN5400A079H/drc/down', data);
|
||||
};
|
||||
|
||||
export const eventsTopicSubscribe = () => {
|
||||
// 发送消息
|
||||
clientSubscribe('thing/product/8UUXN5400A079H/events');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@ export { default as RemoteDebugging } from './src/RemoteDebugging.vue';
|
|||
export { default as LoadControl } from './src/LoadControl.vue';
|
||||
export { default as FlightControl } from './src/FlightControl.vue';
|
||||
export { default as TakeOffForm } from './src/TakeOffForm.vue';
|
||||
export { default as FlyToForm } from './src/FlyToForm.vue';
|
||||
export { default as Map } from '../workplan/components/map.vue';
|
||||
|
|
|
|||
|
|
@ -24,12 +24,21 @@
|
|||
</div>
|
||||
<!-- 飞行控制 -->
|
||||
<div v-if="flightControlVisible">
|
||||
<FlightControl @changeFlightControl="changeFlightControl" @clickTakeOff="clickTakeOff" />
|
||||
<FlightControl
|
||||
@changeFlightControl="changeFlightControl"
|
||||
@clickTakeOff="clickTakeOff"
|
||||
@clickFlyTo="clickFlyTo"
|
||||
/>
|
||||
</div>
|
||||
<!-- 一键起飞表单 -->
|
||||
<div v-if="takeOffFormVisible">
|
||||
<TakeOffForm @changeTakeOffForm="changeTakeOffForm" />
|
||||
</div>
|
||||
<!-- 指点飞行表单 -->
|
||||
|
||||
<div v-if="flyToFormVisible">
|
||||
<FlyToForm @changeFlyToForm="changeFlyToForm" />
|
||||
</div>
|
||||
<div class="AirportLive" v-if="airportLiveVisible" v-drag>
|
||||
<AirportLive :msgData="msgData" />
|
||||
</div>
|
||||
|
|
@ -56,6 +65,7 @@
|
|||
LoadControl,
|
||||
FlightControl,
|
||||
TakeOffForm,
|
||||
FlyToForm,
|
||||
} from './index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { getClient, createConnection, clientSubscribe } from '@/utils/mqtt';
|
||||
|
|
@ -88,6 +98,8 @@
|
|||
const flightControlVisible = ref(false);
|
||||
// 一键起飞表单
|
||||
const takeOffFormVisible = ref(false);
|
||||
// 指点飞行表单
|
||||
const flyToFormVisible = ref(false);
|
||||
const changeAirportLive = () => {
|
||||
airportLiveVisible.value = !airportLiveVisible.value;
|
||||
};
|
||||
|
|
@ -104,9 +116,15 @@
|
|||
console.log('clickTakeOff');
|
||||
takeOffFormVisible.value = true;
|
||||
};
|
||||
const clickFlyTo = () => {
|
||||
flyToFormVisible.value = true;
|
||||
};
|
||||
const changeTakeOffForm = () => {
|
||||
takeOffFormVisible.value = false;
|
||||
};
|
||||
const changeFlyToForm = () => {
|
||||
flyToFormVisible.value = false;
|
||||
};
|
||||
const msgData = ref();
|
||||
const changeSelect = async (value?: any) => {
|
||||
console.log(value);
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
console.log(val);
|
||||
if (val.message.data.result == 0) {
|
||||
createMessage.success('开始直播成功');
|
||||
player.src('http://175.27.168.120:6012/live/2.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/2.flv');
|
||||
} else if (val.message.data.result == 513003) {
|
||||
createMessage.success('直播已开启');
|
||||
player.src('http://175.27.168.120:6012/live/2.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/2.flv');
|
||||
} else {
|
||||
createMessage.error('开始直播失败');
|
||||
}
|
||||
|
|
@ -96,10 +96,10 @@
|
|||
// height: 200,
|
||||
// sources: [
|
||||
// {
|
||||
// src: 'http://175.27.168.120:6012/live/2.m3u8', // 播放地址
|
||||
// src: 'http://175.27.168.120:6012/live/2.flv', // 播放地址
|
||||
// },
|
||||
// ],
|
||||
// licenseUrl: 'http://175.27.168.120:6012/live/2.m3u8', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
// licenseUrl: 'http://175.27.168.120:6012/live/2.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
// });
|
||||
// });
|
||||
};
|
||||
|
|
@ -129,10 +129,10 @@
|
|||
height: 200,
|
||||
sources: [
|
||||
{
|
||||
src: 'http://175.27.168.120:6012/live/2.m3u8', // 播放地址
|
||||
src: 'http://175.27.168.120:6012/live/2.flv', // 播放地址
|
||||
},
|
||||
],
|
||||
licenseUrl: 'http://175.27.168.120:6012/live/2.m3u8', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
licenseUrl: 'http://175.27.168.120:6012/live/2.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="content">
|
||||
<div class="content-button">
|
||||
<a-button @click="emits('clickTakeOff')">一键起飞</a-button>
|
||||
<a-button>指点飞行</a-button>
|
||||
<a-button @click="emits('clickFlyTo')">指点飞行</a-button>
|
||||
<!-- <a-button>智能环绕</a-button> -->
|
||||
<a-button @click="returnVoyage">一键返航</a-button>
|
||||
<a-button @click="obtain">获取飞行器控制权</a-button>
|
||||
|
|
@ -36,25 +36,22 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, reactive } from 'vue';
|
||||
import { onMounted, ref, watch, reactive, onUnmounted } from 'vue';
|
||||
import { getClient, createConnection } from '@/utils/mqtt';
|
||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||
import { vDrag } from '@/utils/drag';
|
||||
import { getReizeClient, createSeizeConnection, clientReizePublish } from '@/utils/mqtt';
|
||||
import { drcDownTopicReize, eventsTopicSubscribeReize } from '@/utils/debugging/events';
|
||||
import {
|
||||
eventsTopicReize,
|
||||
events_replyTopicReize,
|
||||
drcDownTopicReize,
|
||||
servicesTopicReize,
|
||||
services_replyTopicReize,
|
||||
return_home_status,
|
||||
} from '@/utils/debugging/events';
|
||||
import { servicesTopic } from '@/utils/debugging/remote';
|
||||
servicesTopic,
|
||||
services_replyTopic,
|
||||
drcDownTopic,
|
||||
eventsTopicSubscribe,
|
||||
} from '@/utils/debugging/remote';
|
||||
import { buildGUID } from '@/utils/uuid';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const emits = defineEmits(['changeFlightControl', 'clickTakeOff']);
|
||||
const emits = defineEmits(['changeFlightControl', 'clickTakeOff', 'clickFlyTo']);
|
||||
const props = defineProps({
|
||||
airportAllVal: Object,
|
||||
});
|
||||
|
|
@ -89,12 +86,12 @@
|
|||
);
|
||||
// 获取
|
||||
const obtain = () => {
|
||||
if (!getReizeClient()) {
|
||||
createSeizeConnection();
|
||||
if (!getClient()) {
|
||||
createConnection();
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 飞行控制权抢夺
|
||||
servicesTopicReize({
|
||||
servicesTopic({
|
||||
bid: buildGUID(),
|
||||
method: 'flight_authority_grab',
|
||||
tid: buildGUID(),
|
||||
|
|
@ -102,7 +99,7 @@
|
|||
data: {},
|
||||
});
|
||||
// 负载控制权抢夺
|
||||
servicesTopicReize({
|
||||
servicesTopic({
|
||||
bid: buildGUID(),
|
||||
method: 'payload_authority_grab',
|
||||
tid: buildGUID(),
|
||||
|
|
@ -111,28 +108,7 @@
|
|||
payload_index: '99-0-0',
|
||||
},
|
||||
});
|
||||
events_replyTopicReize();
|
||||
services_replyTopicReize();
|
||||
// // 接收消息
|
||||
getReizeClient().on('message', (topic, message) => {
|
||||
const rs = JSON.parse(message);
|
||||
console.log(rs);
|
||||
// 一键返航
|
||||
if (rs.method === 'return_home') {
|
||||
if (rs.data.result == 0) {
|
||||
createMessage.success('一键返航成功');
|
||||
} else {
|
||||
createMessage.error('一键返航失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
if (rs.method === 'takeoff_to_point') {
|
||||
if (rs.data.result == 0) {
|
||||
createMessage.success('一键起飞成功');
|
||||
} else {
|
||||
createMessage.error('一键起飞失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
});
|
||||
services_replyTopic();
|
||||
}, 1000);
|
||||
};
|
||||
// 一键返航
|
||||
|
|
@ -159,18 +135,23 @@
|
|||
seq: seq.value,
|
||||
method: 'stick_control',
|
||||
data: data,
|
||||
bid: buildGUID(),
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
};
|
||||
console.log(querys);
|
||||
drcDownTopicReize(querys);
|
||||
};
|
||||
const drcSeq = ref(1);
|
||||
const enterDRC = () => {
|
||||
// http://175.27.168.120:6012/players/srs_player.html?schema=http&port=6012&api=6012
|
||||
// 进入指令飞行控制模式
|
||||
const querys = {
|
||||
bid: buildGUID(),
|
||||
data: {
|
||||
hsi_frequency: 10,
|
||||
mqtt_broker: {
|
||||
address: 'http://175.27.168.120:6010',
|
||||
address: 'ws://175.27.168.120:6010/mqtt',
|
||||
// client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
|
||||
client_id: 'mqtt_client_1581F8HGX254V00A0BUY_seize',
|
||||
enable_tls: false,
|
||||
expire_time: 3600,
|
||||
|
|
@ -184,7 +165,29 @@
|
|||
method: 'drc_mode_enter',
|
||||
};
|
||||
console.log(querys);
|
||||
servicesTopicReize(querys);
|
||||
servicesTopic(querys);
|
||||
drc_eart_beat();
|
||||
};
|
||||
let timer;
|
||||
const drc_eart_beat = () => {
|
||||
// 每隔五秒发送drc心跳包
|
||||
timer = window.setInterval(() => {
|
||||
drcSeq.value = drcSeq.value + 1;
|
||||
const drcQuerys = {
|
||||
bid: buildGUID(),
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
method: 'heart_beat',
|
||||
data: {
|
||||
timestamp: new Date().getTime(),
|
||||
},
|
||||
seq: drcSeq.value,
|
||||
};
|
||||
console.log(drcQuerys);
|
||||
drcDownTopic(drcQuerys);
|
||||
}, 5000);
|
||||
// 订阅drc链路状态通知
|
||||
eventsTopicSubscribe();
|
||||
};
|
||||
const exitDRC = () => {
|
||||
const querys = {
|
||||
|
|
@ -194,11 +197,11 @@
|
|||
timestamp: new Date().getTime(),
|
||||
method: 'drc_mode_exit',
|
||||
};
|
||||
servicesTopicReize(querys);
|
||||
servicesTopic(querys);
|
||||
};
|
||||
onMounted(() => {
|
||||
// // 接收消息
|
||||
getReizeClient().on('message', (topic, message) => {
|
||||
getClient().on('message', (topic, message) => {
|
||||
const rs = JSON.parse(message);
|
||||
if (rs.method == 'drc_mode_enter') {
|
||||
console.log(rs);
|
||||
|
|
@ -216,8 +219,36 @@
|
|||
createMessage.error('退出指令飞行控制模式失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
// 一键返航
|
||||
if (rs.method === 'return_home') {
|
||||
if (rs.data.result == 0) {
|
||||
createMessage.success('一键返航成功');
|
||||
} else {
|
||||
createMessage.error('一键返航失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
if (rs.method === 'takeoff_to_point') {
|
||||
if (rs.data.result == 0) {
|
||||
createMessage.success('一键起飞成功');
|
||||
} else {
|
||||
createMessage.error('一键起飞失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
if (rs.method === 'drc_status_notify') {
|
||||
console.log(rs);
|
||||
if (rs.data.result == 0) {
|
||||
if (rs.data.drc_state == 0) {
|
||||
drc_eart_beat();
|
||||
}
|
||||
} else {
|
||||
createMessage.error('DRC连接失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.flight-control {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<div class="takeoff-information">
|
||||
<div class="title"
|
||||
>指点飞行
|
||||
<div @click="emits('changeFlyToForm')">
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-edit">
|
||||
目标点纬度
|
||||
<div>
|
||||
<a-input v-model:value="data.points.latitude" readonly style="width: 240px" />
|
||||
<EnvironmentOutlined
|
||||
:style="{ fontSize: '20px', color: '#3a57e8' }"
|
||||
title="选择目标点位置"
|
||||
@click="targetPointVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
目标点经度
|
||||
<div>
|
||||
<a-input v-model:value="data.points.longitude" readonly style="width: 240px" />
|
||||
<EnvironmentOutlined
|
||||
:style="{ fontSize: '20px', color: '#3a57e8' }"
|
||||
title="选择目标点位置"
|
||||
@click="targetPointVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
目标点高度
|
||||
<div>
|
||||
<a-input v-model:value="data.points.height" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button
|
||||
type="primary"
|
||||
style="background: #0a99eb; width: 40%"
|
||||
@click="emits('changeFlyToForm')"
|
||||
>关闭</a-button
|
||||
>
|
||||
<a-button type="primary" style="background: #3a57e8; width: 40%" @click="takeOff"
|
||||
>起飞</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:visible="targetPointVisible" title="目标点" @ok="handleOk">
|
||||
<div>
|
||||
<span style="color: #f2762d">右击选择目标点位置</span>
|
||||
<div style="width: 100%; height: 500px">
|
||||
<Map :airRoute="airRoute" @flyToThere="flyToThere" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
|
||||
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';
|
||||
|
||||
const emits = defineEmits(['changeFlyToForm']);
|
||||
const props = defineProps({
|
||||
msgData: Object,
|
||||
});
|
||||
const locationVal: any = ref({});
|
||||
const flyToThere = (e) => {
|
||||
console.log(e);
|
||||
locationVal.value.lat = e._lat;
|
||||
locationVal.value.lng = e._lng;
|
||||
};
|
||||
const handleOk = () => {
|
||||
data.points.latitude = locationVal.value.lat;
|
||||
data.points.longitude = locationVal.value.lng;
|
||||
targetPointVisible.value = false;
|
||||
};
|
||||
const airRoute = ref({
|
||||
airLineType: null,
|
||||
airType: null,
|
||||
airModel: null,
|
||||
name: null,
|
||||
});
|
||||
const targetPointVisible = ref(false);
|
||||
const data = reactive({
|
||||
flight_id: buildGUID(),
|
||||
max_speed: 10,
|
||||
points: {
|
||||
latitude: 35.134615,
|
||||
longitude: 118.296676,
|
||||
height: 115,
|
||||
},
|
||||
});
|
||||
const takeOff = () => {
|
||||
const querys = {
|
||||
bid: buildGUID(),
|
||||
data: data,
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
method: 'fly_to_point',
|
||||
};
|
||||
console.log(querys);
|
||||
// 新的
|
||||
// servicesTopicReize(querys);
|
||||
// services_replyTopicReize();
|
||||
// 老的
|
||||
servicesTopic(querys);
|
||||
services_replyTopic();
|
||||
setTimeout(() => {
|
||||
emits('changeFlyToForm');
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.takeoff-information {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 300px;
|
||||
z-index: 999;
|
||||
width: 460px;
|
||||
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>
|
||||
|
|
@ -74,10 +74,10 @@
|
|||
console.log(val);
|
||||
if (val.message.data.result == 0) {
|
||||
createMessage.success('开始直播成功');
|
||||
player.src('http://175.27.168.120:6012/live/3.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/3.flv');
|
||||
} else if (val.message.data.result == 513003) {
|
||||
createMessage.success('直播已开启');
|
||||
player.src('http://175.27.168.120:6012/live/3.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/3.flv');
|
||||
} else {
|
||||
createMessage.error('开始直播失败');
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
} else if (val.message.method == 'live_set_quality') {
|
||||
if (val.message.data.result == 0) {
|
||||
createMessage.success('设置清晰度成功');
|
||||
player.src('http://175.27.168.120:6012/live/3.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/3.flv');
|
||||
} else {
|
||||
createMessage.error('设置清晰度失败');
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
if (val.message.data.result == 0) {
|
||||
createMessage.success('设置直播镜头成功');
|
||||
player.src('http://175.27.168.120:6012/live/3.m3u8');
|
||||
player.src('http://175.27.168.120:6012/live/3.flv');
|
||||
} else {
|
||||
createMessage.error('设置直播镜头失败');
|
||||
}
|
||||
|
|
@ -241,10 +241,10 @@
|
|||
height: 180,
|
||||
sources: [
|
||||
{
|
||||
src: 'http://175.27.168.120:6012/live/3.m3u8', // 播放地址
|
||||
src: 'http://175.27.168.120:6012/live/3.flv', // 播放地址
|
||||
},
|
||||
],
|
||||
licenseUrl: 'http://175.27.168.120:6012/live/3.m3u8', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
licenseUrl: 'http://175.27.168.120:6012/live/3.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||||
});
|
||||
};
|
||||
const closeLive = () => {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
<span>拍照</span>
|
||||
<a-button @click="singleShot">单拍</a-button>
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button @click="enterDRC">进入飞行控制</a-button>
|
||||
<a-button @click="exitDRC">退出飞行控制</a-button>
|
||||
</div>
|
||||
<div class="direction-controller">
|
||||
<img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
|
||||
<div class="direction-controller-top" title="前进" @click="changeDrc('pitch', 'top')"></div>
|
||||
|
|
@ -42,18 +46,16 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, reactive } from 'vue';
|
||||
import { getReizeClient, createSeizeConnection, clientReizePublish } from '@/utils/mqtt';
|
||||
import { onMounted, ref, watch, reactive, onUnmounted } from 'vue';
|
||||
import { getClient, createConnection } from '@/utils/mqtt';
|
||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||
import { vDrag } from '@/utils/drag';
|
||||
import { buildGUID } from '@/utils/uuid';
|
||||
import {
|
||||
eventsTopicReize,
|
||||
events_replyTopicReize,
|
||||
drcDownTopicReize,
|
||||
servicesTopicReize,
|
||||
} from '@/utils/debugging/events';
|
||||
import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
|
||||
import { drcDownTopicReize, eventsTopicSubscribeReize } from '@/utils/debugging/events';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const emits = defineEmits(['changeLoadControl']);
|
||||
const props = defineProps({
|
||||
msgData: Object,
|
||||
|
|
@ -90,12 +92,12 @@
|
|||
);
|
||||
|
||||
const obtain = () => {
|
||||
if (!getReizeClient()) {
|
||||
createSeizeConnection();
|
||||
if (!getClient()) {
|
||||
createConnection();
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 飞行控制权抢夺
|
||||
servicesTopicReize({
|
||||
servicesTopic({
|
||||
bid: buildGUID(),
|
||||
method: 'flight_authority_grab',
|
||||
tid: buildGUID(),
|
||||
|
|
@ -103,7 +105,7 @@
|
|||
data: {},
|
||||
});
|
||||
// 负载控制权抢夺
|
||||
servicesTopicReize({
|
||||
servicesTopic({
|
||||
bid: buildGUID(),
|
||||
method: 'payload_authority_grab',
|
||||
tid: buildGUID(),
|
||||
|
|
@ -112,7 +114,7 @@
|
|||
payload_index: '99-0-0',
|
||||
},
|
||||
});
|
||||
events_replyTopicReize();
|
||||
services_replyTopic();
|
||||
}, 1000);
|
||||
};
|
||||
// 单拍
|
||||
|
|
@ -128,6 +130,61 @@
|
|||
},
|
||||
});
|
||||
};
|
||||
const drcSeq = ref(1);
|
||||
const enterDRC = () => {
|
||||
// 进入指令飞行控制模式
|
||||
const querys = {
|
||||
bid: buildGUID(),
|
||||
data: {
|
||||
hsi_frequency: 10,
|
||||
mqtt_broker: {
|
||||
address: 'http://175.27.168.120:6010',
|
||||
client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
|
||||
enable_tls: false,
|
||||
expire_time: 3600,
|
||||
password: '',
|
||||
username: 'sdhc',
|
||||
},
|
||||
osd_frequency: 5,
|
||||
},
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
method: 'drc_mode_enter',
|
||||
};
|
||||
console.log(querys);
|
||||
servicesTopic(querys);
|
||||
drc_eart_beat();
|
||||
};
|
||||
let timer;
|
||||
const drc_eart_beat = () => {
|
||||
// 每隔五秒发送drc心跳包
|
||||
drcSeq.value = drcSeq.value + 1;
|
||||
timer = window.setInterval(() => {
|
||||
const drcQuerys = {
|
||||
bid: buildGUID(),
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
method: 'heart_beat',
|
||||
data: {
|
||||
timestamp: new Date().getTime(),
|
||||
},
|
||||
seq: drcSeq.value,
|
||||
};
|
||||
drcDownTopicReize(drcQuerys);
|
||||
}, 5000);
|
||||
// 订阅drc链路状态通知
|
||||
eventsTopicSubscribeReize();
|
||||
};
|
||||
const exitDRC = () => {
|
||||
const querys = {
|
||||
bid: buildGUID(),
|
||||
data: {},
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
method: 'drc_mode_exit',
|
||||
};
|
||||
servicesTopic(querys);
|
||||
};
|
||||
// 控制方向
|
||||
const changeDrc = (type, val) => {
|
||||
if (val == 'up') {
|
||||
|
|
@ -144,13 +201,26 @@
|
|||
};
|
||||
onMounted(() => {
|
||||
// // 接收消息
|
||||
getReizeClient().on('message', (topic, message) => {
|
||||
getClient().on('message', (topic, message) => {
|
||||
const rs = JSON.parse(message);
|
||||
if (rs.method == 'takeoff_to_point') {
|
||||
console.log(rs);
|
||||
}
|
||||
if (rs.method === 'drc_status_notify') {
|
||||
console.log(rs);
|
||||
if (rs.data.result == 0) {
|
||||
if (rs.data.drc_state == 0) {
|
||||
drc_eart_beat();
|
||||
}
|
||||
} else {
|
||||
createMessage.error('DRC连接失败，状态码' + rs.data.result);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.remote-debugging {
|
||||
|
|
@ -208,10 +278,12 @@
|
|||
}
|
||||
}
|
||||
.content-button {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
button {
|
||||
background: none;
|
||||
margin: 10px 0 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.direction-controller {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -10,13 +10,23 @@
|
|||
<div class="content-edit">
|
||||
目标点纬度
|
||||
<div>
|
||||
<a-input v-model:value="data.target_latitude" readonly />
|
||||
<a-input v-model:value="data.target_latitude" readonly style="width: 240px" />
|
||||
<EnvironmentOutlined
|
||||
:style="{ fontSize: '20px', color: '#3a57e8' }"
|
||||
title="选择目标点位置"
|
||||
@click="targetPointVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
目标点经度
|
||||
<div>
|
||||
<a-input v-model:value="data.target_longitude" readonly />
|
||||
<a-input v-model:value="data.target_longitude" readonly style="width: 240px" />
|
||||
<EnvironmentOutlined
|
||||
:style="{ fontSize: '20px', color: '#3a57e8' }"
|
||||
title="选择目标点位置"
|
||||
@click="targetPointVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
|
|
@ -86,22 +96,49 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:visible="targetPointVisible" title="目标点" @ok="handleOk">
|
||||
<div>
|
||||
<span style="color: #f2762d">右击选择目标点位置</span>
|
||||
<div style="width: 100%; height: 500px">
|
||||
<Map :airRoute="airRoute" @flyToThere="flyToThere" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { CopyOutlined, EditOutlined } from '@ant-design/icons-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';
|
||||
|
||||
const emits = defineEmits(['changeTakeOffForm']);
|
||||
const props = defineProps({
|
||||
msgData: Object,
|
||||
});
|
||||
const locationVal: any = ref({});
|
||||
const flyToThere = (e) => {
|
||||
console.log(e);
|
||||
locationVal.value.lat = e._lat;
|
||||
locationVal.value.lng = e._lng;
|
||||
};
|
||||
const handleOk = () => {
|
||||
data.target_latitude = locationVal.value.lat;
|
||||
data.target_longitude = locationVal.value.lng;
|
||||
targetPointVisible.value = false;
|
||||
};
|
||||
const airRoute = ref({
|
||||
airLineType: null,
|
||||
airType: null,
|
||||
airModel: null,
|
||||
name: null,
|
||||
});
|
||||
const targetPointVisible = ref(false);
|
||||
const data = reactive({
|
||||
flight_id: uuid(14, 14),
|
||||
target_latitude: 35.134615,
|
||||
|
|
|
|||
Loading…
Reference in New Issue