From 20e5f4cd989fbe345d949c96f73009901fdfd041 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Mon, 12 Dec 2022 22:48:46 +0800
Subject: [PATCH] update device-firmware.ts
---
src/components/GMap.vue | 76 ++++++++++++++++++++++++++++----------
1 files changed, 56 insertions(+), 20 deletions(-)
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index 80d540b..d7a836b 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -137,21 +137,23 @@
</div>
</div>
</div>
- <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12" style="height: 280px;">
+ <!-- 机场OSD -->
+ <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 style="height: 45%; border-bottom: 1px solid #515151;">
- <div class="flex-column flex-align-center flex-justify-center" style="float: left; width: 60px; height: 100%; background: #2d2d2d;">
+ <!-- 机场 -->
+ <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%;">
+ <div class="flex-column flex-align-center flex-justify-center" style="width: 90%;">
<span><RobotFilled style="font-size: 48px;"/></span>
<span class="mt10">Dock</span>
</div>
</a-tooltip>
</div>
- <div class="osd">
+ <div class="osd flex-1" style="flex: 1">
<a-row>
<a-col span="16" :style="deviceInfo.dock.mode_code === EDockModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">
{{ EDockModeCode[deviceInfo.dock.mode_code] }}</a-col>
@@ -180,12 +182,12 @@
<a-row>
<a-col span="12">
<a-tooltip title="Network State">
- <span :style="deviceInfo.dock.network_state.quality === 2 ? 'color: #00ee8b' :
- deviceInfo.dock.network_state.quality === 1 ? 'color: yellow' : 'color: red'">
- <span v-if="deviceInfo.dock.network_state.type === 1"><SignalFilled /></span>
+ <span :style="deviceInfo.dock.network_state?.quality === 2 ? 'color: #00ee8b' :
+ deviceInfo.dock.network_state?.quality === 1 ? 'color: yellow' : 'color: red'">
+ <span v-if="deviceInfo.dock.network_state?.type === 1"><SignalFilled /></span>
<span v-else><GlobalOutlined /></span>
</span>
- <span class="ml10" >{{ deviceInfo.dock.network_state.rate }} KB/S</span>
+ <span class="ml10" >{{ deviceInfo.dock.network_state?.rate }} KB/S</span>
</a-tooltip>
</a-col>
<a-col span="6">
@@ -197,13 +199,13 @@
<a-col span="6">
<a-tooltip>
<template #title>
- <p>total: {{ deviceInfo.dock.storage.total }}</p>
- <p>used: {{ deviceInfo.dock.storage.used }}</p>
+ <p>total: {{ deviceInfo.dock.storage?.total }}</p>
+ <p>used: {{ deviceInfo.dock.storage?.used }}</p>
</template>
<span><FolderOpenOutlined /></span>
- <span class="ml10" v-if="deviceInfo.dock.storage.total > 0">
- <a-progress type="circle" :width="20" :percent="deviceInfo.dock.storage.used * 100/ deviceInfo.dock.storage.total"
- :strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.dock.storage.used * 100 / deviceInfo.dock.storage.total > 80 ? 'red' : '#00ee8b' "/>
+ <span class="ml10" v-if="deviceInfo.dock.storage?.total > 0">
+ <a-progress type="circle" :width="20" :percent="deviceInfo.dock.storage?.used * 100/ deviceInfo.dock.storage?.total"
+ :strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.dock.storage?.used * 100 / deviceInfo.dock.storage?.total > 80 ? 'red' : '#00ee8b' "/>
</span>
</a-tooltip>
</a-col>
@@ -260,10 +262,20 @@
</a-tooltip>
</a-col>
</a-row>
+ <a-row class="p5">
+ <a-col span="24">
+ <a-button type="primary" :disabled="controlPanelVisible" size="small" @click="setControlPanelVisible(true)">
+ 设备操作
+ </a-button>
+ </a-col>
+ </a-row>
+ <DockControlPanel v-if="controlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="dockDebugOnOff">
+ </DockControlPanel>
</div>
</div>
- <div style="height: 45%;">
- <div class="flex-column flex-align-center flex-justify-center" style="float: left; width: 60px; height: 100%; background: #2d2d2d;">
+ <!-- 飞机-->
+ <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">
<span><a-image :src="M30" :preview="false"/></span>
@@ -271,7 +283,7 @@
</div>
</a-tooltip>
</div>
- <div class="osd">
+ <div class="osd flex-1">
<a-row>
<a-col span="16" :style="!deviceInfo.device || deviceInfo.device?.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">
{{ !deviceInfo.device ? EModeCode[EModeCode.Disconnected] : EModeCode[deviceInfo.device?.mode_code] }}</a-col>
@@ -409,6 +421,8 @@
FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
+import DockControlPanel from './g-map/DockControlPanel.vue'
+import { useDockControl } from './g-map/useDockControl'
export default defineComponent({
components: {
@@ -428,7 +442,8 @@
FolderOpenOutlined,
RobotFilled,
ArrowUpOutlined,
- ArrowDownOutlined
+ ArrowDownOutlined,
+ DockControlPanel
},
name: 'GMap',
props: {},
@@ -574,6 +589,7 @@
}
}
if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
+ deviceTsaUpdateHook.value.initMarker(EDeviceTypeName.Dock, EDeviceTypeName.Dock, data.currentSn, data.dockInfo[data.currentSn].longitude, data.dockInfo[data.currentSn].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.sub_device?.device_sn]
@@ -642,6 +658,15 @@
useMouseToolHook.mouseTool(type, getDrawCallback)
mouseMode.value = bool
}
+
+ // dock 控制指令
+ const {
+ controlPanelVisible,
+ setControlPanelVisible,
+ sendDockControlCmd,
+ dockDebugOnOff,
+ } = useDockControl()
+
onMounted(() => {
const app = getApp()
useGMapManageHook.globalPropertiesConfig(app)
@@ -813,15 +838,20 @@
EModeCode,
str,
EDockModeCode,
+ controlPanelVisible,
+ dockDebugOnOff,
+ setControlPanelVisible,
}
}
})
</script>
<style lang="scss" scoped>
+
.g-map-wrapper {
height: 100%;
width: 100%;
+
.g-action-panle {
position: absolute;
top: 16px;
@@ -845,13 +875,19 @@
border: 1px solid $primary;
border-radius: 2px;
}
+
+ // antd button 光晕
+ &:deep(.ant-btn){
+ &::after {
+ display: none;
+ }
+ }
}
.osd-panel {
position: absolute;
- left: 350px;
+ left: 10px;
top: 10px;
width: 480px;
- height: 160px;
background: black;
color: white;
border-radius: 2px;
--
Gitblit v1.9.3