视频地址修改，飞行控制逻辑更换
parent
49cd03a170
commit
030dd2cc9a
@ -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>
|
||||
Loading…
Reference in New Issue