gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化获取位置、更换控制方向图片

Browse Source
main
刘妍 2 months ago
parent e687e1c1cd
commit c4efebbfc5
11 changed files with 144 additions and 109 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/flightoperation/bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/flightoperation/left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/flightoperation/right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/images/flightoperation/top.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

15
src/utils/eventBus.ts
Unescape Escape View File

@ -0,0 +1,15 @@
// eventBus
import { reactive } from 'vue';
export const EventBus = reactive({
events: {},
emit(event, data) {
this.events[event] && this.events[event].forEach((callback) => callback(data));
},
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
},
});

7
src/views/demo/workmanagement/flightoperation/index.vue
Unescape Escape View File

@ -13,6 +13,7 @@
:msgData="msgData"
@changeLoadControl="changeLoadControl"
@changeFlightControl="changeFlightControl"
@loadLiveStreaming="loadLiveStreaming"
/>
<!-- 远程调试 -->
<!-- <div v-if="remoteVisible">
@ -71,6 +72,7 @@
import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
import { buildGUID } from '@/utils/uuid';
import { vDrag } from '@/utils/drag';
import { EventBus } from '@/utils/eventBus';
const { createMessage } = useMessage();
const airRoute = ref({
@ -81,8 +83,10 @@
});
const locationVal: any = ref({});
const flyToThere = (e) => {
console.log(e);
locationVal.value.lat = e._lat;
locationVal.value.lng = e._lng;
EventBus.emit('obtainTheLocation', locationVal.value);
};
onMounted(() => {
destroyConnection();
@ -137,6 +141,9 @@
livePreviewVisible.value = true;
}, 2000);
};
const loadLiveStreaming = () => {
livePreviewVisible.value = !livePreviewVisible.value;
};
const changeFlyToForm = () => {
flyToFormVisible.value = false;
};

57
src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
Unescape Escape View File

@ -27,18 +27,34 @@
</div>
<div class="content-info">
<div class="info-item">
<img src="@/assets/images/flightoperation/flight_control.png" alt="" />
<div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up')"></div>
<div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up')"></div>
<div class="info-item-bottom" title="下降" @click="changeDRC('throttle', 'down')"></div>
<div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down')"></div>
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
<div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up')">
<img src="@/assets/images/flightoperation/top.png" alt="" />
</div>
<div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up')">
<img src="@/assets/images/flightoperation/right.png" alt="" />
</div>
<div class="info-item-bottom" title="下降" @click="changeDRC('throttle', 'down')">
<img src="@/assets/images/flightoperation/bottom.png" alt="" />
</div>
<div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down')">
<img src="@/assets/images/flightoperation/left.png" alt="" />
</div>
</div>
<div class="info-item">
<img src="@/assets/images/flightoperation/flight_control.png" alt="" />
<div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up')"></div>
<div class="info-item-right" title="右移" @click="changeDRC('roll', 'up')"></div>
<div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down')"></div>
<div class="info-item-left" title="左移" @click="changeDRC('roll', 'down')"></div>
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
<div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up')">
<img src="@/assets/images/flightoperation/top.png" alt="" />
</div>
<div class="info-item-right" title="右移" @click="changeDRC('roll', 'up')">
<img src="@/assets/images/flightoperation/right.png" alt="" />
</div>
<div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down')">
<img src="@/assets/images/flightoperation/bottom.png" alt="" />
</div>
<div class="info-item-left" title="左移" @click="changeDRC('roll', 'down')">
<img src="@/assets/images/flightoperation/left.png" alt="" />
</div>
</div>
</div>
</div>
@ -381,24 +397,28 @@
.info-item {
position: relative;
width: 48%;
margin: 40px 0 20px 20px;
height: 116px;
margin: 24px 0 20px 20px;
img {
width: 100px;
width: 36px;
}
.info-item-top {
width: 40px;
height: 40px;
position: absolute;
top: 0px;
left: 30px;
top: 8px;
left: 20px;
cursor: pointer;
img {
width: 62px;
}
}
.info-item-right {
width: 40px;
height: 40px;
position: absolute;
top: 30px;
right: 40px;
top: 31px;
right: 35px;
cursor: pointer;
}
.info-item-bottom {
@ -406,8 +426,11 @@
height: 40px;
position: absolute;
bottom: 0px;
left: 30px;
left: 21px;
cursor: pointer;
img {
width: 62px;
}
}
.info-item-left {
width: 40px;

39
src/views/demo/workmanagement/flightoperation/src/FlyToForm.vue
Unescape Escape View File

@ -9,24 +9,15 @@
<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 style="display: flex; flex-direction: column; align-items: center">
<a-input v-model:value="data.points.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.points.longitude" readonly style="width: 240px" />
<EnvironmentOutlined
:style="{ fontSize: '20px', color: '#3a57e8' }"
title="选择目标点位置"
@click="targetPointVisible = true"
/>
<a-input v-model:value="data.points.longitude" readonly />
</div>
</div>
<div class="content-edit">
@ -50,7 +41,7 @@
</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { reactive, ref, watch, onMounted } from 'vue';
import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
import { buildGUID, uuid } from '@/utils/uuid';
import { servicesTopicReize, services_replyTopicReize } from '@/utils/debugging/events';
@ -58,11 +49,11 @@
import { vDrag } from '@/utils/drag';
import { CloseOutlined } from '@ant-design/icons-vue';
import { Map } from '../index';
import { EventBus } from '@/utils/eventBus';
const emits = defineEmits(['changeFlyToForm']);
const props = defineProps({
msgData: Object,
locationVal: Object,
});
const data = reactive({
@ -74,17 +65,6 @@
height: 115,
},
});
data.points.latitude = props.locationVal.lat;
data.points.longitude = props.locationVal.lng;
watch(
() => props.locationVal,
(val) => {
if (val) {
data.points.latitude = val.lat;
data.points.longitude = val.lng;
}
},
);
const takeOff = () => {
const querys = {
bid: buildGUID(),
@ -104,6 +84,13 @@
emits('changeFlyToForm');
}, 1000);
};
onMounted(() => {
// 定位到某个经纬度
EventBus.on('obtainTheLocation', (val: any) => {
data.points.latitude = val.lat;
data.points.longitude = val.lng;
});
});
</script>
<style lang="less" scoped>
.takeoff-information {

36
src/views/demo/workmanagement/flightoperation/src/LivePreview.vue
Unescape Escape View File

@ -74,10 +74,12 @@
console.log(val);
if (val.message.data.result == 0) {
createMessage.success('无人机开始直播成功');
player.src('http://175.27.168.120:6012/live/3.flv');
player.src('http://175.27.168.120:6012/live/4.flv');
player.play();
} else if (val.message.data.result == 513003) {
createMessage.success('无人机直播已开启');
player.src('http://175.27.168.120:6012/live/3.flv');
player.src('http://175.27.168.120:6012/live/4.flv');
player.play();
} else {
createMessage.error('无人机开始直播失败');
}
@ -93,14 +95,16 @@
} 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.flv');
player.src('http://175.27.168.120:6012/live/4.flv');
player.play();
} else {
createMessage.error('无人机设置清晰度失败');
}
} else if (val.message.method == 'live_lens_change') {
if (val.message.data.result == 0) {
createMessage.success('无人机设置直播镜头成功');
player.src('http://175.27.168.120:6012/live/3.flv');
player.src('http://175.27.168.120:6012/live/4.flv');
player.play();
} else {
createMessage.error('无人机设置直播镜头失败');
}
@ -108,15 +112,15 @@
},
);
watch(
() => props.uavLive,
(val) => {
if (val) {
console.log('开始无人机直播');
startLiveFun();
}
},
);
// watch(
// () => props.uavLive,
// (val) => {
// if (val) {
// console.log('开始无人机直播');
// startLiveFun();
// }
// },
// );
const selectVal = reactive({
camera: 'normal',
resolution: 1,
@ -171,7 +175,7 @@
timestamp: new Date().getTime(),
data: {
url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
url: 'rtmp://175.27.168.120:6019/live/3',
url: 'rtmp://175.27.168.120:6019/live/4',
//video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
video_id: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
@ -247,10 +251,10 @@
height: 180,
sources: [
{
src: 'http://175.27.168.120:6012/live/3.flv', // 播放地址
src: 'http://175.27.168.120:6012/live/4.flv', // 播放地址
},
],
licenseUrl: 'http://175.27.168.120:6012/live/3.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
licenseUrl: 'http://175.27.168.120:6012/live/4.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
});
};
const closeLive = () => {

39
src/views/demo/workmanagement/flightoperation/src/TakeOffForm.vue
Unescape Escape View File

@ -9,22 +9,15 @@
<div class="content">
<div class="content-edit">
目标点纬度
<div>
<a-input v-model:value="data.target_latitude" readonly style="width: 240px" />
<EnvironmentOutlined
:style="{ fontSize: '20px', color: '#3a57e8' }"
title="选择目标点位置"
/>
<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 style="width: 240px" />
<EnvironmentOutlined
:style="{ fontSize: '20px', color: '#3a57e8' }"
title="选择目标点位置"
/>
<a-input v-model:value="data.target_longitude" readonly />
</div>
</div>
<div class="content-edit">
@ -97,7 +90,7 @@
</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
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';
@ -106,11 +99,11 @@
import { vDrag } from '@/utils/drag';
import { CloseOutlined } from '@ant-design/icons-vue';
import { Map } from '../index';
import { EventBus } from '@/utils/eventBus';
const emits = defineEmits(['changeTakeOffForm']);
const props = defineProps({
msgData: Object,
locationVal: Object,
});
const data = reactive({
flight_id: uuid(14, 14),
@ -187,17 +180,6 @@
}
},
);
data.target_latitude = props.locationVal.lat;
data.target_longitude = props.locationVal.lng;
watch(
() => props.locationVal,
(val) => {
if (val) {
data.target_latitude = val.lat;
data.target_longitude = val.lng;
}
},
);
const takeOff = () => {
const querys = {
bid: buildGUID(),
@ -217,9 +199,18 @@
emits('changeTakeOffForm');
}, 1000);
};
onMounted(() => {
// 定位到某个经纬度
EventBus.on('obtainTheLocation', (val: any) => {
data.target_latitude = val.lat;
data.target_longitude = val.lng;
});
});
</script>
<style lang="less" scoped>
.takeoff-information {
display: flex;
flex-direction: column;
position: absolute;
top: 120px;
left: 300px;

60
src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue
Unescape Escape View File

@ -121,7 +121,10 @@
>
</div>
<div class="content-button">
<a-button type="primary" style="background: #3a57e8; width: 100%" @click="loadLiveStreaming"
<a-button
type="primary"
style="background: #3a57e8; width: 100%"
@click="emits('loadLiveStreaming')"
>负载直播</a-button
>
</div>
@ -135,26 +138,27 @@
import { buildGUID } from '@/utils/uuid';
import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
// const emits = defineEmits(['loadLiveStreaming', 'changeLoadControl']);
// 负载直播测试
const loadLiveStreaming = async () => {
const querys = {
bid: buildGUID(),
method: 'live_start_push',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
url: 'rtmp://221.2.83.254:1935/live/2',
//video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
video_id: '8UUXN5400A079H/165-0-7/normal-0',
video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
},
};
servicesTopic(querys);
services_replyTopic();
};
// const loadLiveStreaming = async () => {
// const querys = {
// bid: buildGUID(),
// method: 'live_start_push',
// tid: buildGUID(),
// timestamp: new Date().getTime(),
// data: {
// url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
// url: 'rtmp://221.2.83.254:1935/live/2',
// //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
// video_id: '8UUXN5400A079H/165-0-7/normal-0',
// video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
// },
// };
// servicesTopic(querys);
// services_replyTopic();
// };
const emits = defineEmits(['changeLoadControl', 'changeFlightControl']);
const emits = defineEmits(['changeLoadControl', 'changeFlightControl', 'loadLiveStreaming']);
const props = defineProps({
msgData: Object,
});
@ -191,13 +195,17 @@
() => props.msgData,
(val) => {
if (val.topic == 'thing/product/8UUXN5400A079H/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;
if (val.message.data.sub_device) {
uavInformation.value.sub_device = val.message.data.sub_device;
time.value = timestampToFormattedDate(val.message.timestamp);
}
if (val.message.data.drone_battery_maintenance_info) {
uavInformation.value.drone_battery_maintenance_info =
val.message.data.drone_battery_maintenance_info;
time.value = timestampToFormattedDate(val.message.timestamp);
}
if (val.message.data.wireless_link) {
uavInformation.value.wireless_link = val.message.data.wireless_link;
time.value = timestampToFormattedDate(val.message.timestamp);
}
}

Write Preview
Loading…
Cancel
Save