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

merge

Browse Source
main
徐景良 2 months ago
parent 0ab7e0941d ecaf734628
commit d5a233b1b9
13 changed files with 1448 additions and 1315 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,7 +1,7 @@
<template>
<div>
<div style="width: 100%; height: 100vh">
<Map :airRoute="airRoute" @flyToThere="flyToThere" />
<Map :airRoute="airRoute" @flyToThere="flyToThere" :airPort="airPort" />
</div>
<SelectComponent @selectChange="changeSelect" />
<AirportInformation
@ -46,7 +46,7 @@
<div
class="LivePreview"
v-if="livePreviewVisible"
:style="{ bottom: airportLiveVisible ? '300px' : '20px' }"
:style="{ bottom: airportLiveVisible ? '400px' : '20px' }"
v-drag
>
<LivePreview :msgData="msgData" :uavLive="uavLive" />
@ -54,7 +54,7 @@
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { onMounted, ref, onBeforeUnmount, reactive } from 'vue';
import {
SelectComponent,
AirportInformation,
@ -88,6 +88,10 @@
locationVal.value.lng = e._lng;
EventBus.emit('obtainTheLocation', locationVal.value);
};
const airPort = ref({
latitude: null,
longitude: null,
});
onMounted(() => {
destroyConnection();
createConnection();
@ -100,7 +104,7 @@
});
const changeSelectValue = ref();
// 机场直播
const airportLiveVisible = ref(true);
const airportLiveVisible = ref(false);
// 无人机直播
const livePreviewVisible = ref(false);
// 远程调试
@ -162,6 +166,10 @@
topic: topic,
message: rs,
};
if (rs.data.latitude && rs.data.longitude) {
airPort.value.latitude = rs.data.latitude;
airPort.value.longitude = rs.data.longitude;
}
}
});
};

16
src/views/demo/workmanagement/flightoperation/src/AirportInformation.vue
Unescape Escape View File

@ -61,19 +61,22 @@
{{ airportVal.drone_charge_state ? airportVal.drone_charge_state.capacity_percent : 0 }} %
</div>
</div>
<!-- <div class="content-button">
<a-button type="primary" style="background: #3a57e8" @click="emits('changeLive')"
<div class="content-button">
<a-button
type="primary"
style="background: #3a57e8; width: 100%"
@click="emits('changeLive')"
>机场直播</a-button
>
<a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
<!-- <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
>远程调试</a-button
>
</div> -->
> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { getClient, createConnection } from '@/utils/mqtt';
import { timestampToFormattedDate } from '@/utils/index';
@ -109,6 +112,7 @@
},
);
onMounted(() => {});
onUnmounted(() => {});
</script>
<style lang="less" scoped>
.airport-information {

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

@ -127,8 +127,8 @@
setTimeout(() => {
startLiveFun();
player = TCPlayer('player-container-id', {
width: 360,
height: 200,
width: 460,
height: 300,
sources: [
{
src: 'http://175.27.168.120:6012/live/2.flv', // 播放地址
@ -143,12 +143,13 @@
onBeforeUnmount(() => {
player.dispose();
player = null;
closeLive();
});
</script>
<style lang="less" scoped>
.airport-live {
width: 400px;
height: 248px;
width: 500px;
height: 348px;
padding: 10px 20px;
background: #0d0e15;
box-shadow:
@ -183,7 +184,7 @@
}
}
.player {
height: 200px;
height: 300px;
#player-container-id-live {
height: 100%;
}

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

@ -152,6 +152,7 @@
createMessage.success('当前有用户正在操作，请稍后再试');
return;
}
createMessage.info('正在获取飞行器控制权，请稍候');
changeRedisUser(true);
// 飞行控制权抢夺
servicesTopic({
@ -221,6 +222,7 @@
return;
}
createSeizeConnection();
createMessage.info('正在进入飞行控制，请稍后');
// 进入指令飞行控制模式
const querys = {
bid: buildGUID(),
@ -266,6 +268,7 @@
eventsTopicSubscribe();
};
const exitDRC = () => {
createMessage.info('正在退出飞行控制，请稍后');
const querys = {
bid: buildGUID(),
data: {},

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

@ -47,7 +47,7 @@
</template>
<script setup lang="ts">
import { RedoOutlined, ExpandOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
import { reactive, onMounted, ref, watch } from 'vue';
import { reactive, onMounted, ref, watch, onBeforeUnmount } from 'vue';
import { buildGUID } from '@/utils/uuid';
import { getClient, createConnection } from '@/utils/mqtt';
import {
@ -247,8 +247,8 @@
});
const playVideo = () => {
player = TCPlayer('player-container-id-live', {
width: 380,
height: 180,
width: 480,
height: 280,
sources: [
{
src: 'http://175.27.168.120:6012/live/4.flv', // 播放地址
@ -281,11 +281,17 @@
}, 1000);
// resolutionChange(1);
});
// 销毁视频控件
onBeforeUnmount(() => {
player.dispose();
player = null;
closeLive();
});
</script>
<style lang="less" scoped>
.live-preview {
width: 400px;
height: 248px;
width: 500px;
height: 348px;
padding: 10px;
background: #0d0e15;
box-shadow:
@ -363,7 +369,7 @@
z-index: 3;
}
.player {
height: 180px;
height: 280px;
#player-container-id-live {
height: 100%;
}

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

@ -4,9 +4,9 @@
>无人机信息：<span>
<template
v-if="uavInformation.sub_device && uavInformation.sub_device.device_online_status == 1"
>开机</template
>已开机</template
>
<template v-else>关机</template>
<template v-else>已关机</template>
</span></div
>
<div class="content">
@ -215,7 +215,7 @@
<style lang="less" scoped>
.airport-information {
position: absolute;
top: 320px;
top: 360px;
left: 0;
z-index: 999;
width: 260px;

136
src/views/demo/workmanagement/workplan/components/airLineList.vue
Unescape Escape View File

@ -77,48 +77,48 @@
<PlusOutlined @click="createAirLine" />
</div>
</div>
<div class="ari-line" v-for="(item,index) in ariLineList" :key="index"
>
<div class="title">
<div style="flex:1;">
{{item.airLineName}}
<div class="slide-container">
<div class="ari-line" v-for="(item,index) in ariLineList" :key="index" >
<div class="title">
<div style="flex:1;">
{{item.airLineName}}
</div>
<div style="">
<!-- <EditOutlined @click="editLine" /> -->
&nbsp;
<a-dropdown>
<MoreOutlined />
<template #overlay>
<a-menu>
<a-menu-item @click="checkAriLine(item)" >
<a href="javascript:;">选择</a>
</a-menu-item>
<a-menu-item @click="airLineDetail(item)" >
<a href="javascript:;">预览</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">编辑</a>
</a-menu-item>
<a-menu-item @click="deletePlan(item.id)">
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
<div style="">
<!-- <EditOutlined @click="editLine" /> -->
&nbsp;
<a-dropdown>
<MoreOutlined />
<template #overlay>
<a-menu>
<a-menu-item @click="checkAriLine(item)" >
<a href="javascript:;">选择</a>
</a-menu-item>
<a-menu-item @click="airLineDetail(item)" >
<a href="javascript:;">预览</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">编辑</a>
</a-menu-item>
<a-menu-item @click="deletePlan(item.id)">
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<div class="type" >
<img src="/public/iocn/uav.png" alt="">
{{item.uavId}}Matrice 4TD
</div>
</div>
<div class="type" >
<img src="/public/iocn/uav.png" alt="">
{{item.uavId}}
</div>
<div class="time">
<div>
更新时间：{{item.createTime}}
<div class="time">
<div>
更新时间：{{item.createTime}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -292,7 +292,7 @@
const parser = new XMLParser();
const jsonObj = parser.parse(xmlData);
emit("previewAirLine",jsonObj.kml.Document,currentPreviewWayLine)
}catch(e){
console.error(e);
}
@ -396,6 +396,10 @@
.container{
width:100%;
height:100%;
background: #0D0E15;
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
border-radius: 6px;
opacity: 0.8;
}
.title{
padding:15px;
@ -429,7 +433,6 @@
}
.routers-container{
display:flex;
gap:10px;
font-size:14px;
border-top:1px solid rgba(204, 204, 204, 0.219) ;
height: 100%;
@ -438,38 +441,77 @@
.file-container{
width:220px;
border-right: 1px solid rgba(204, 204, 204, 0.227) ;
padding:15px
padding:0px;
display:flex;
flex-direction: column;
gap:20px;
}
.file-container .tip{
display: flex;
color:#fff;
padding:8px 0px;
padding:15px 10px;
background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
position:relative;
}
.file-container .tip::before{
content:"";
height: 0px;
width:0px;
border-top:6px solid #2C45B8;
border-left:6px solid #2C45B8;
border-right: 6px solid rgba(0,0,0,0);
border-bottom: 6px solid rgba(0,0,0,0);
position:absolute;
top:0px;
left:0px;
}
.file-container .tip .info{
flex:1;
}
.routers-list{
flex:1;
padding:15px;
}
.routers-list .tip{
display: flex;
color:#fff;
padding:8px 0px;
padding:15px 10px;
background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
position:relative;
}
.routers-list .tip .info{
flex:1;
}
.routers-list .tip::before{
content:"";
height: 0px;
width:0px;
border-top:6px solid #2C45B8;
border-left:6px solid #2C45B8;
border-right: 6px solid rgba(0,0,0,0);
border-bottom: 6px solid rgba(0,0,0,0);
position:absolute;
top:0px;
left:0px;
}
.routers-list .slide-container{
padding:20px;
}
.ari-line{
background:#3F4150;
color:#fff;
padding:5px 10px;
margin-bottom:10px;
position:relative;
font-size: 13px;
border-radius: 3px;
background: linear-gradient( 132deg, #323D62 0%, #525F83 100%);
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
border-radius: 10px;
}
.ari-line::before{

2
src/views/demo/workmanagement/workplan/components/airPointConfig.vue
Unescape Escape View File

@ -71,7 +71,6 @@
<a-slider v-model:value="props.currentAirPoint.cameraHorizontalAngle" :min="-180" :max="180" :step="0.01" />
</div>
</div>
<div class="config-item">
<div class="item-title">
<div class="label">
@ -80,7 +79,6 @@
<div class="">
{{ props.currentAirPoint.cameraVerticalAngle }} °
</div>
</div>
<div class="item-content">
<a-slider v-model:value="props.currentAirPoint.cameraVerticalAngle" :min="-180" :max="180" :step="0.01" />

24
src/views/demo/workmanagement/workplan/components/createAirLine.vue
Unescape Escape View File

@ -2,9 +2,11 @@
<div class="container">
<div class="title">
<div style="flex:1;">
<LeftOutlined @click="checkAriLine(null);"/> &nbsp; 新建航线
创建新航线
</div>
<div>
<LeftOutlined @click="checkAriLine(null);"/> &nbsp;
</div>
</div>
<div class="item-label">航线类型</div>
@ -200,14 +202,26 @@
color:#fff;
}
.title{
padding:15px;
padding:15px 0px;
color:#fff;
font-size:14px;
display:flex;
}
.item-label{
padding:10px 0px;
color:#999;
padding:15px 0px;
color:#fff;
position:relative;
}
.item-label::before{
content:"";
height:14px;
width:3px;
position:absolute;
top:15px;
left:-8px;
background: linear-gradient( 180deg, #234AFF 0%, #4981FF 100%);
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
border-radius: 2px;
}
.draw-type{
display:grid;

20
src/views/demo/workmanagement/workplan/components/createWorkPlan.vue
Unescape Escape View File

@ -354,6 +354,10 @@ const resetForm = () => {
.container{
width:100%;
height:100%;
background: #0D0E15;
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
border-radius: 6px;
opacity: 0.8;
padding:10px 20px;
}
.title{
@ -388,14 +392,15 @@ const resetForm = () => {
width:100%;
display: flex;
color:#fff;
border:1px solid rgba(204, 204, 204, 0.787);
border:1px solid #3B4154;
padding:0px;
border-radius: 15px;
}
.select-item .item-name{
flex:1;
border-right:1px solid rgba(204, 204, 204, 0.787);
border-right:1px solid #3B4154;
padding:4px;
}
.select-item .item-operate{
@ -410,13 +415,16 @@ const resetForm = () => {
display: flex;
overflow: hidden;
border:0.5px solid #3B4154 ;
background:#050608;
font-size:13px;
border-radius: 15px;
}
.radio-box .radio-item{
flex:1;
color:#8A92A6 ;
text-align: center;
background:#222738 ;
padding:5px;
cursor:pointer;
@ -428,6 +436,7 @@ const resetForm = () => {
text-align: center;
background:#3A57E8 ;
padding:5px;
border-radius: 15px;
cursor:pointer;
}
@ -444,6 +453,7 @@ const resetForm = () => {
padding:3px;
text-align: center;
cursor:pointer;
border-radius: 15px;
}
::v-deep .ant-form-item-label > label{
@ -539,4 +549,8 @@ const resetForm = () => {
::v-deep .ant-input::placeholder{
color:rgba(255, 255, 255, 0.533)!important;
}
::v-deep .ant-btn{
border-radius: 15px!important;
}
</style>

2462
src/views/demo/workmanagement/workplan/components/map.vue
View File

File diff suppressed because it is too large Load Diff

43
src/views/demo/workmanagement/workplan/components/planList.vue
Unescape Escape View File

@ -4,7 +4,7 @@
<div style="flex:1;">
工作计划
</div>
<div>
<div class="create-button">
<PlusOutlined @click="createWorkPlan(null)" />
</div>
</div>
@ -12,7 +12,7 @@
<div>
<a-select
ref="select"
style="width: 140px"
style="width: 100px"
placeholder="计划状态"
>
<a-select-option value="jack">全部</a-select-option>
@ -60,11 +60,8 @@
</a-dropdown>
</div>
</div>
<div class="type" >
{{item.description}}
</div>
<div class="time">更新时间：{{item.createTime}}</div>
<div class="username"><UserOutlined />&nbsp;{{item.createId}}</div>
<div class="time">更新时间：{{item.createTime}}</div>
</div>
</div>
</div>
@ -217,13 +214,23 @@
.container{
width:100%;
height:100%;
background: #0D0E15;
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
border-radius: 6px;
opacity: 0.8;
padding:0px 10px;
}
.title{
padding:30px 15px;
color:#fff;
color:#ffffff;
font-size:16px;
display:flex;
}
.create-button{
border:1px solid #fff;
padding:4px 6px;
font-size:12px;
}
.filter-container{
padding:0px 15px;
display:flex;
@ -285,13 +292,15 @@
flex:1;
}
.ari-line{
background:#3F4150;
color:#fff;
padding:5px 10px;
margin-bottom:10px;
position:relative;
font-size: 13px;
border-radius: 3px;
background: linear-gradient( 315deg, #515F84 0%, #313C62 100%);
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
border-radius: 10px;
}
.ari-line .title{
@ -316,8 +325,8 @@
}
.ari-line .state-no{
border:1px solid rgb(246, 18, 18);
color:rgb(246, 18, 18);;
border:1px solid #F6B50A;
color:#F6B50A;
font-size:12px;
height:24px;
line-height:20px;
@ -343,8 +352,8 @@
}
.ari-line .username{
margin-top:10px;
color:#ccc;
margin:12px 0px;
}
.pagenation{
@ -354,8 +363,10 @@
::v-deep .ant-select-selector{
border:none!important;
color:#fff!important;
background:#3F4150!important ;
background: linear-gradient( 101deg, #3F4B71 0%, #1F2840 100%)!important ;
border-radius: 3px!important;
border-top-left-radius: 15px!important;
border-bottom-left-radius: 15px!important;
}
@ -426,13 +437,19 @@
}
::v-deep .ant-input{
background:#3c3c3c!important ;
background: #364167!important ;
border:none!important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
color:#fff!important;
}
::v-deep .ant-input-search-button{
border-top-right-radius: 15px!important;
border-bottom-right-radius: 15px!important;
}
::v-deep .ant-input::placeholder{
color:rgba(255, 255, 255, 0.533)!important;
}

6
src/views/demo/workmanagement/workplan/index.vue
Unescape Escape View File

@ -5,17 +5,17 @@
</div>
<!-- 工作计划列表 -->
<div v-show="planListShow" style="width:360px;background:#0d0e15c1 ;position:absolute;top:0px;left:0px;z-index:1;height: calc( 100vh - 104px);overflow-y:hidden;">
<div v-show="planListShow" style="width:360px;position:absolute;top:20px;left:20px;z-index:1;height: calc( 100vh - 144px);overflow-y:hidden;">
<planList :planListShow="planListShow" @planDetail="planDetail" @createWorkPlan="toCreateWorkPlan" ></planList>
</div>
<!-- 创建计划弹窗 -->
<div v-if="workPlanFormShow" style="width:380px;background:#0d0e15ce ;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
<div v-if="workPlanFormShow" style="width:380px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
<createWorkPlan :formData="formData" @successCreatePlan="successCreatePlan" @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine" :checkedAriLine="checkedAriLine" :checkedDronePort="checkedDronePort"></createWorkPlan>
</div>
<!-- 航线库 -->
<div v-if="ariLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
<div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
<airLineList @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
</div>

Write Preview
Loading…
Cancel
Save