From 970ede7dd4c77893836d2721fe1bdfd18bfa1afc Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Thu, 14 Sep 2023 15:56:48 +0800
Subject: [PATCH] Merge branch 'demo' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_drone_web into demo
---
src/components/GMap.vue | 71 ++++++++++++++++++-----------------
1 files changed, 36 insertions(+), 35 deletions(-)
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index 3f77a7e..1a99fcc 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -1,8 +1,10 @@
<template>
<div class="g-map-wrapper">
+ <!-- 地图区域 -->
<div id="g-container" :style="{ width: '100%', height: '100%' }" />
+ <!-- 绘制面板 -->
<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,6 +20,7 @@
<a style="color: red;"><CloseOutlined /></a>
</div>
</div>
+ <!-- 飞机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>
@@ -270,12 +273,13 @@
</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 v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel">
</DockControlPanel>
</div>
</div>
@@ -406,7 +410,8 @@
{{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
</div>
</div>
-
+ <!-- 飞行指令 -->
+ <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"></DroneControlPanel>
</div>
</div>
</template>
@@ -444,7 +449,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 +473,7 @@
ArrowUpOutlined,
ArrowDownOutlined,
DockControlPanel,
+ DroneControlPanel,
CarryOutOutlined,
RocketOutlined
},
@@ -474,7 +482,7 @@
setup () {
const useMouseToolHook = useMouseTool()
const useGMapManageHook = useGMapManage()
- const deviceTsaUpdateHook = ref()
+ const deviceTsaUpdateHook = deviceTsaUpdate()
const root = getRoot()
const mouseMode = ref(false)
@@ -532,16 +540,12 @@
watch(() => store.state.deviceStatusEvent,
data => {
- if (root.$map === undefined) {
- return
- }
- deviceTsaUpdateHook.value = deviceTsaUpdate()
if (Object.keys(data.deviceOnline).length !== 0) {
- deviceTsaUpdateHook.value.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
+ deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus
}
if (Object.keys(data.deviceOffline).length !== 0) {
- deviceTsaUpdateHook.value.removeMarker(data.deviceOffline.sn)
+ deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)
if ((data.deviceOffline.sn === osdVisible.value.sn) || (osdVisible.value.is_dock && data.deviceOffline.sn === osdVisible.value.gateway_sn)) {
osdVisible.value.visible = false
store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
@@ -555,26 +559,20 @@
)
watch(() => store.state.deviceState, data => {
- if (root.$aMap === undefined) {
- return
- }
- if (!deviceTsaUpdateHook.value) {
- deviceTsaUpdateHook.value = deviceTsaUpdate()
- }
if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
- deviceTsaUpdateHook.value.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
+ deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
deviceInfo.gateway = data.gatewayInfo[osdVisible.value.gateway_sn]
}
}
if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
- deviceTsaUpdateHook.value.moveTo(data.currentSn, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude)
+ deviceTsaUpdateHook.moveTo(data.currentSn, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude)
if (osdVisible.value.visible && osdVisible.value.sn !== '') {
deviceInfo.device = data.deviceInfo[osdVisible.value.sn]
}
}
if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
- deviceTsaUpdateHook.value.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude)
+ 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]
@@ -644,18 +642,21 @@
mouseMode.value = bool
}
- // dock 控制指令
+ // dock 控制面板
const {
- controlPanelVisible,
- setControlPanelVisible,
- sendDockControlCmd,
- dockDebugOnOff,
+ dockControlPanelVisible,
+ setDockControlPanelVisible,
+ onCloseControlPanel,
} = useDockControl()
+
+ // 连接或断开drc
+ useConnectMqtt()
onMounted(() => {
const app = getApp()
useGMapManageHook.globalPropertiesConfig(app)
})
+
function getDrawCallback ({ obj }) {
switch (state.currentType) {
case MapDoodleEnum.PIN:
@@ -823,9 +824,9 @@
EModeCode,
str,
EDockModeCode,
- controlPanelVisible,
- dockDebugOnOff,
- setControlPanelVisible,
+ dockControlPanelVisible,
+ setDockControlPanelVisible,
+ onCloseControlPanel,
NetworkStateTypeEnum,
NetworkStateQualityEnum,
RainfallEnum,
@@ -841,7 +842,7 @@
height: 100%;
width: 100%;
- .g-action-panle {
+ .g-action-panel {
position: absolute;
top: 16px;
right: 16px;
@@ -877,12 +878,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