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

无人机位置、轨迹展示

Browse Source
main
刘妍 2 months ago
parent 140456bfc6
commit 832f220e2d
6 changed files with 250 additions and 151 deletions
Show Stats Download Patch File Download Diff File

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

@ -78,6 +78,7 @@
const airPortStoreVal = airPortStore();
const airPortInfo = airPortStoreVal.getAirport;
const UAVinfo = airPortStoreVal.getUAV;
const { createMessage } = useMessage();
const airRoute = ref({
airLineType: null,
@ -158,10 +159,30 @@
};
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) => {
@ -178,14 +199,11 @@
// relative_alternate_land_point 都是0
// self_converge_coordinate 飞不飞没什么变化
// alternate_land_point 都是0
if (rs.method == 'osd_info_push') {
if (topic == topicUAVUrl) {
if (rs.data.latitude && rs.data.longitude) {
uavTrack.value = rs.data;
}
}
if (rs.data.live_capacity) {
console.log(rs.data.live_capacity);
}
}
});
};

2
src/views/demo/workmanagement/flightoperation/src/AirportLive.vue
Unescape Escape View File

@ -81,6 +81,7 @@
video_quality: 3, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
},
};
console.log(querys);
servicesTopic(querys);
services_replyTopic();
};
@ -97,7 +98,6 @@
servicesTopic(querys);
};
onMounted(() => {
console.log(props.msgData);
setTimeout(() => {
startLiveFun();
player = TCPlayer('player-container-id', {

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

@ -1,69 +1,73 @@
<template>
<div class="flight-control" v-if="airportVal" v-drag>
<div class="title">
<div>
飞行控制：
<!-- {"0":"空闲中","1":"现场调试","2":"远程调试","3":"固件升级中","4":"作业中","5":"待标定"} -->
<i v-if="airportVal.mode_code == 0">空闲中 </i>
<i v-else-if="airportVal.mode_code == 1">现场调试 </i>
<i v-else-if="airportVal.mode_code == 2">远程调试 </i>
<i v-else-if="airportVal.mode_code == 3">固件升级中 </i>
<i v-else-if="airportVal.mode_code == 4">作业中 </i>
<i v-else-if="airportVal.mode_code == 5">待标定 </i>
</div>
<div @click="emits('changeFlightControl')">
<CloseOutlined />
</div>
</div>
<div class="content">
<div class="content-button">
<a-button @click="takeOff">一键起飞</a-button>
<a-button @click="emits('clickFlyTo')">指点飞行</a-button>
<!-- <a-button>智能环绕</a-button> -->
<a-button @click="returnVoyage">一键返航</a-button>
<a-button @click="obtain" style="background-color: #1b71e8; border: none"
>获取飞行器控制权</a-button
>
<a-button @click="enterDRC" style="background-color: #24d365; border: none"
>进入飞行控制</a-button
>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
>退出飞行控制</a-button
>
</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')">
<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 id="flight">
<VueDragResize :w="width" :h="height" :x="left" :y="top" :isActive="true" :isResizable="false">
<div class="flight-control" v-if="airportVal" v-drag>
<div class="title">
<div>
飞行控制：
<!-- {"0":"空闲中","1":"现场调试","2":"远程调试","3":"固件升级中","4":"作业中","5":"待标定"} -->
<i v-if="airportVal.mode_code == 0">空闲中 </i>
<i v-else-if="airportVal.mode_code == 1">现场调试 </i>
<i v-else-if="airportVal.mode_code == 2">远程调试 </i>
<i v-else-if="airportVal.mode_code == 3">固件升级中 </i>
<i v-else-if="airportVal.mode_code == 4">作业中 </i>
<i v-else-if="airportVal.mode_code == 5">待标定 </i>
</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 @click="emits('changeFlightControl')">
<CloseOutlined />
</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')">
<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 class="content">
<div class="content-button">
<a-button @click="takeOff">一键起飞</a-button>
<a-button @click="emits('clickFlyTo')">指点飞行</a-button>
<!-- <a-button>智能环绕</a-button> -->
<a-button @click="returnVoyage">一键返航</a-button>
<a-button @click="obtain" style="background-color: #1b71e8; border: none"
>获取飞行器控制权</a-button
>
<a-button @click="enterDRC" style="background-color: #24d365; border: none"
>进入飞行控制</a-button
>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
>退出飞行控制</a-button
>
</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 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')">
<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')">
<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>
</div>
</div>
</VueDragResize>
</div>
</template>
<script setup lang="ts">
@ -88,7 +92,12 @@
} from '@/api/workmanagement/airportMaintenance';
import { useUserStore } from '@/store/modules/user';
import { timestampToFormattedDate } from '@/utils/index';
import VueDragResize from 'vue-drag-resize/src';
const width = ref(380);
const height = ref(390);
const left = ref(700);
const top = ref(100);
const userStore = useUserStore();
const userInfo = userStore.getUserInfo;
const redisUser = ref({});
@ -366,12 +375,13 @@
});
</script>
<style lang="less" scoped>
#flight {
width: 380px;
height: 390px;
}
.flight-control {
position: absolute;
bottom: 100px;
left: 700px;
width: 360px;
height: 350px;
width: 96%;
height: 98%;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: #0d0e15;

104
src/views/demo/workmanagement/flightoperation/src/LoadControl.vue
Unescape Escape View File

@ -1,54 +1,62 @@
<template>
<div class="remote-debugging" v-if="airportVal" v-drag>
<div class="title">
<span> 云台相机控制 </span>
<div @click="emits('changeLoadControl')">
<CloseOutlined />
</div>
</div>
<div class="content">
<!-- <div class="content-item">
<div id="remote">
<VueDragResize :w="width" :h="height" :x="left" :y="top" :isActive="true" :isResizable="false">
<div class="remote-debugging" v-if="airportVal" v-drag>
<div class="title">
<span> 云台相机控制 </span>
<div @click="emits('changeLoadControl')">
<CloseOutlined />
</div>
</div>
<div class="content">
<!-- <div class="content-item">
<span>相机控制权</span>
<a-button @click="obtain">获取</a-button>
</div> -->
<!-- <div class="content-item">
<!-- <div class="content-item">
<span>切换相机模式</span>
<a-button>抢夺负载控制</a-button>
</div> -->
<!-- <div class="content-item">
<!-- <div class="content-item">
<span>拍照</span>
<a-button @click="singleShot">单拍</a-button>
</div> -->
<div class="content-button">
<a-button @click="obtain">获取相机控制权</a-button>
<a-button @click="singleShot">单拍</a-button>
<a-button @click="enterDRC" style="background-color: #24d365; border: none"
>进入飞行控制</a-button
>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
>退出飞行控制</a-button
>
<div class="content-button">
<a-button @click="obtain">获取相机控制权</a-button>
<a-button @click="singleShot">单拍</a-button>
<a-button @click="enterDRC" style="background-color: #24d365; border: none"
>进入飞行控制</a-button
>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
>退出飞行控制</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>
<div
class="direction-controller-right"
title="右移"
@click="changeDrc('roll', 'right')"
></div>
<div
class="direction-controller-bottom"
title="后退"
@click="changeDrc('pitch', 'bottom')"
></div>
<div
class="direction-controller-left"
title="左移"
@click="changeDrc('roll', 'left')"
></div>
</div>
</div>
</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>
<div
class="direction-controller-right"
title="右移"
@click="changeDrc('roll', 'right')"
></div>
<div
class="direction-controller-bottom"
title="后退"
@click="changeDrc('pitch', 'bottom')"
></div>
<div
class="direction-controller-left"
title="左移"
@click="changeDrc('roll', 'left')"
></div>
</div>
</div>
</VueDragResize>
</div>
</template>
<script setup lang="ts">
@ -73,7 +81,12 @@
import { useUserStore } from '@/store/modules/user';
import { timestampToFormattedDate } from '@/utils/index';
import { airPortStore } from '@/store/modules/airport';
import VueDragResize from 'vue-drag-resize/src';
const width = ref(400);
const height = ref(440);
const left = ref(300);
const top = ref(100);
const airPortStoreVal = airPortStore();
const airPort = airPortStoreVal.getAirport;
@ -326,12 +339,13 @@
});
</script>
<style lang="less" scoped>
#remote {
width: 400px;
height: 440px;
}
.remote-debugging {
position: absolute;
bottom: 100px;
left: 300px;
width: 360px;
height: 420px;
width: 96%;
height: 98%;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: #0d0e15;

12
src/views/demo/workmanagement/flightoperation/src/SelectComponent.vue
Unescape Escape View File

@ -69,6 +69,10 @@
});
selectVal.project = optionsArr.projectOptions[0].value;
getAirPort(selectVal.project);
} else {
optionsArr.projectOptions = [];
selectVal.project = null;
getAirPort(selectVal.project);
}
});
};
@ -90,6 +94,11 @@
});
selectVal.airport = optionsArr.airportOptions[0].value;
getUAV(selectVal.airport);
} else {
optionsArr.airportOptions = [];
selectVal.airport = null;
optionsArr.equipmentOptions = [];
selectVal.equipment = null;
}
});
};
@ -113,6 +122,9 @@
});
selectVal.equipment = optionsArr.equipmentOptions[0].value;
handleChange();
} else {
optionsArr.equipmentOptions = [];
selectVal.equipment = null;
}
});
};

119
src/views/demo/workmanagement/workplan/components/map.vue
Unescape Escape View File

@ -1555,6 +1555,14 @@
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: '机场',
font_size: 14,
color: '#ffffff',
outline: true,
outlineColor: '#000000',
pixelOffsetY: -70,
},
},
});
} else {
@ -1568,15 +1576,20 @@
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: '机场',
font_size: 14,
color: '#ffffff',
outline: true,
outlineColor: '#000000',
pixelOffsetY: -70,
},
},
});
graphicLayer.addGraphic(startGraphic);
}
};
const uavList = ref([
// [118.29665332645175, 35.13459536363883, 81.6864700317383],
// [118.29665332645185, 35.13459536363883, 81.6894700317393],
]);
const uavList = ref([]);
// 设置无人机轨迹
const setUAVPosition = () => {
const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
@ -1586,45 +1599,77 @@
if (flag1 == -1) {
uavList.value.push(position);
}
// const fixedRoute = new mars3d.graphic.FixedRoute({
// name: '步行路线',
// position: {
// type: 'time', // 时序动态坐标
// speed: 700,
// pauseTime: 0.5,
// list: uavList.value,
// },
// frameRate: 1,
// showStop: true,
// model: {
// // url: '/projecthome/walk.gltf',
// url: 'https://data.mars3d.cn/gltf/mars/man/walk.gltf',
// scale: 5,
// minimumPixelSize: 50,
// },
// polyline: {
// color: '#ffff00',
// width: 2,
// },
// });
// graphicLayer.addGraphic(fixedRoute);
const graphic = new mars3d.graphic.BillboardPrimitive({
const fixedRoute = new mars3d.graphic.FixedRoute({
name: '步行路线',
position: {
type: 'time', // 时序动态坐标
speed: 600,
speed: 700,
pauseTime: 0.5,
list: uavList.value,
},
style: {
image: '/projecthome/flightOperation.png',
width: 117,
height: 105,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
frameRate: 1,
showStop: true,
polyline: {
color: '#3388ff',
width: 2,
},
attr: { remark: '点状数据time类型position' },
});
graphicLayer.addGraphic(graphic);
graphicLayer.addGraphic(fixedRoute);
// fixedRoute.openPopup() // 显示popup
if (uavList.value.length > 1) {
fixedRoute.start();
}
let point = graphicLayer.getGraphicById('set-uav');
// 更新航点
if (point) {
point.setOptions({
id: 'set-uav',
name: '飞行器位置',
position: position,
style: {
image: '/projecthome/uav.png',
width: 35,
height: 59,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: '飞行器',
font_size: 14,
color: '#ffffff',
outline: true,
outlineColor: '#000000',
pixelOffsetY: -70,
},
},
});
} else {
let startGraphic = new mars3d.graphic.BillboardEntity({
id: 'set-uav',
name: '飞行器位置',
position: position,
style: {
image: '/projecthome/uav.png',
width: 35,
height: 59,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: '飞行器',
font_size: 14,
color: '#ffffff',
outline: true,
outlineColor: '#000000',
pixelOffsetY: -70,
},
},
});
graphicLayer.addGraphic(startGraphic);
}
};
</script>

Write Preview
Loading…
Cancel
Save