From 3667807a7b7418efc090ee3fa6a6b734bc3080bf Mon Sep 17 00:00:00 2001
From: xieb <vip_xiaobin810@163.com>
Date: Wed, 13 Sep 2023 20:36:29 +0800
Subject: [PATCH] Merge branch 'develop' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_drone_web into develop
---
src/components/GMap.vue | 91 +++++++++++++++++++++++++--------------------
1 files changed, 51 insertions(+), 40 deletions(-)
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index cb8653e..e5c8775 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -1,8 +1,12 @@
<template>
<div class="g-map-wrapper">
- <div id="g-container" :style="{ width: '100%', height: '100%' }" />
+ <!-- 地图区域 -->
+ <div id="g-container" :style="{ width: '100%', height: '100%' }" >
+ <Cesium />
+ </div>
+ <!-- 绘制面板 -->
<div
- class="g-action-panle"
+ class="g-action-panel"
:style="{ right: drawVisible ? '316px' : '16px' }"
>
<div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)">
@@ -18,7 +22,8 @@
<a style="color: red;"><CloseOutlined /></a>
</div>
</div>
- <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
+ <!-- 飞机OSD -->
+ <!-- <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
<div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;">
<span>{{ osdVisible.callsign }}</span>
<span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>
@@ -136,15 +141,15 @@
{{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
</div>
</div>
- </div>
+ </div> -->
<!-- 机场OSD -->
- <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
+ <!-- <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
<div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;">
<span>{{ osdVisible.gateway_callsign }}</span>
<span><a style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>
</div>
- <!-- 机场 -->
- <div class ="flex-display" style="border-bottom: 1px solid #515151;">
+ < 机场 -->
+ <!-- <div class ="flex-display" style="border-bottom: 1px solid #515151;">
<div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model">
<div class="flex-column flex-align-center flex-justify-center" style="width: 90%;">
@@ -270,17 +275,18 @@
</a-row>
<a-row class="p5">
<a-col span="24">
- <a-button type="primary" :disabled="controlPanelVisible" size="small" @click="setControlPanelVisible(true)">
- 设备操作
+ <a-button type="primary" :disabled="dockControlPanelVisible" size="small" @click="setDockControlPanelVisible(true)">
+ Actions
</a-button>
</a-col>
</a-row>
- <DockControlPanel v-if="controlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="dockDebugOnOff">
- </DockControlPanel>
- </div>
- </div>
+ <!机场控制面板 -->
+ <!-- <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"> -->
+ <!-- </DockControlPanel> -->
+ <!-- </div> -->
+ <!-- </div> -->
<!-- 飞机-->
- <div class ="flex-display">
+ <!-- <div class ="flex-display">
<div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model">
<div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
@@ -394,9 +400,9 @@
</a-col>
</a-row>
</div>
- </div>
- <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red">
- <div style="background: #535759;" class="width-100"></div>
+ </div> -->
+ <!-- <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red"> -->
+ <!-- <div style="background: #535759;" class="width-100"></div>
<div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></div>
<div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%'}"></div>
<div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div>
@@ -404,10 +410,11 @@
<div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
{{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
{{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
- </div>
- </div>
-
- </div>
+ </div> -->
+ <!-- </div> -->
+ <!-- 飞行指令 -->
+ <!-- <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"></DroneControlPanel> -->
+ <!-- </div> -->
</div>
</template>
@@ -418,6 +425,7 @@
generatePointContent,
generatePolyContent
} from '../utils/map-layer-utils'
+import Cesium from './cesiumMap/cesium.vue'
import { postElementsReq } from '/@/api/layer'
import { MapDoodleType, MapElementEnum } from '/@/constants/map'
import { useGMapManage } from '/@/hooks/use-g-map'
@@ -444,7 +452,9 @@
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
import DockControlPanel from './g-map/DockControlPanel.vue'
-import { useDockControl } from './g-map/useDockControl'
+import { useDockControl } from './g-map/use-dock-control'
+import DroneControlPanel from './g-map/DroneControlPanel.vue'
+import { useConnectMqtt } from './g-map/use-connect-mqtt'
export default defineComponent({
components: {
@@ -466,6 +476,7 @@
ArrowUpOutlined,
ArrowDownOutlined,
DockControlPanel,
+ DroneControlPanel,
CarryOutOutlined,
RocketOutlined
},
@@ -567,7 +578,7 @@
deviceTsaUpdateHook.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude)
if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') {
deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn]
- deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.value.sn]
+ deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]
}
}
}, {
@@ -634,21 +645,21 @@
mouseMode.value = bool
}
- // dock 控制指令
+ // dock 控制面板
const {
- controlPanelVisible,
- setControlPanelVisible,
- sendDockControlCmd,
- dockDebugOnOff,
+ dockControlPanelVisible,
+ setDockControlPanelVisible,
+ onCloseControlPanel,
} = useDockControl()
+
+ // 连接或断开drc
+ useConnectMqtt()
onMounted(() => {
const app = getApp()
useGMapManageHook.globalPropertiesConfig(app)
- setInterval(() => {
- console.info(deviceInfo.dock)
- }, 1000)
})
+
function getDrawCallback ({ obj }) {
switch (state.currentType) {
case MapDoodleEnum.PIN:
@@ -816,9 +827,9 @@
EModeCode,
str,
EDockModeCode,
- controlPanelVisible,
- dockDebugOnOff,
- setControlPanelVisible,
+ dockControlPanelVisible,
+ setDockControlPanelVisible,
+ onCloseControlPanel,
NetworkStateTypeEnum,
NetworkStateQualityEnum,
RainfallEnum,
@@ -834,9 +845,9 @@
height: 100%;
width: 100%;
- .g-action-panle {
+ .g-action-panel {
position: absolute;
- top: 16px;
+ top: 32px;
right: 16px;
.g-action-item {
width: 28px;
@@ -870,12 +881,12 @@
left: 10px;
top: 10px;
width: 480px;
- background: black;
- color: white;
+ background: #000;
+ color: #fff;
border-radius: 2px;
- opacity: 0.7;
+ opacity: 0.8;
}
-.osd > div {
+.osd > div:not(.dock-control-panel) {
margin-top: 5px;
padding-left: 5px;
}
--
Gitblit v1.9.3