在线设备

Web/src/components/GMap.vue

@@ -40,128 +40,8 @@
       </div>
     </div>
     <!-- 飞机OSD -->
-    <div v-if="osdVisible.visible && !osdVisible.is_dock" v-drag-window class="osd-panel fz12">
-      <div class="pl5 pr5 flex-align-center flex-row flex-justify-between"
-        style="border-bottom: 1px solid #515151; height: 18%;">
-        <div class="drag-title">
-          <span>{{ osdVisible.callsign }}</span>
-        </div>
-        <a class="fz16" style="color: white;" @click="() => osdVisible.visible = false">
-          <CloseOutlined />
-        </a>
-      </div>
-      <div style="height: 82%;">
-        <div class="osd">
-          <a-row>
-            <a-col span="4">
-              <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>
-                  <span>{{ osdVisible.model }}</span>
-                </div>
-              </a-tooltip>
-            </a-col>
-            <a-col span="20">
-              <span>
-                飞行状态：
-              </span>
-              <span>
-                {{ getTextByModeCode(deviceInfo.device.mode_code) }}
-              </span>
-              <div class="openLiveButton" @click="state.deviceLiveStatus = true" v-if="!state.deviceLiveStatus">
-                开启直播
-              </div>
-              <div class="openLiveButton" @click="state.deviceLiveStatus = false" v-else>
-                关闭直播
-              </div>
-            </a-col>
-          </a-row>
-          <DeviceLive :sn="osdVisible.sn" v-if="state.deviceLiveStatus" />
-          <a-row>
-            <a-col span="6">
-              <a-tooltip title="GPS卫星数">
-                <span>
-                  GPS
-                  <WifiOutlined />
-                </span>
-                <span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="RTK">
-                <span>
-                  RTK
-                </span>
-                <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="电量">
-                <span>电量</span>
-                <span class="ml10">
-                  {{ deviceInfo.device.battery.capacity_percent + '%' }}
-                </span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="风向速度">
-                <span>W.S</span>
-                <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed /
-                  10).toFixed(2) + ' m/s' }}</span>
-              </a-tooltip>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col span="6">
-              <a-tooltip title="海拔高度">
-                <span>ASL</span>
-                <span class="ml10">
-                  {{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m' }}
-                </span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="离地高度">
-                <span>ALT</span>
-                <span class="ml10">
-                  {{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}
-                </span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="水平速度">
-                <span>H.S</span>
-                <span class="ml10">
-                  {{ deviceInfo.device.horizontal_speed === str ? str :
-                    deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s' }}
-                </span>
-              </a-tooltip>
-            </a-col>
-            <a-col span="6">
-              <a-tooltip title="当前高度">
-                <span>H</span>
-                <span class="ml10">
-                  {{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m'
-                  }}
-                </span>
-              </a-tooltip>
-            </a-col>
-          </a-row>
-        </div>
-      </div>
-      <div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0">
-        <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>
-        <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
-        <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>
+    <OsdInfoModal type="MANUAL" :osdInfo="osdVisible" :deviceInfo="deviceInfo"
+      v-if="osdVisible.visible && !osdVisible.is_dock" />
     <!-- 机场OSD -->
     <div v-if="osdVisible.visible && osdVisible.is_dock" v-drag-window class="osd-panel fz12">
       <div class="drag-title fz16 pl5 pr5 flex-align-center flex-row flex-justify-between"
@@ -527,6 +407,7 @@ import {
 } from '../utils/map-layer-utils'
 import { postElementsReq } from '/@/api/layer'
 import { MapDoodleType, MapElementEnum } from '/@/constants/map'
+import OsdInfoModal from '/@/components/onLineDevice/components/InfoModal.vue'
 import { useGMapManage } from '/@/hooks/use-g-map'
 import { useGMapCover } from '/@/hooks/use-g-map-cover'
 import { useMouseTool } from '/@/hooks/use-mouse-tool'
@@ -554,7 +435,6 @@ import {
 } from '@ant-design/icons-vue'
 import { EDeviceTypeName, ELocalStorageKey } from '../types'
 import DockControlPanel from './g-map/DockControlPanel.vue'
-import DeviceLive from './deviceLive/index.vue'
 import { useDockControl } from './g-map/use-dock-control'
 import DroneControlPanel from './g-map/DroneControlPanel.vue'
 import { useConnectMqtt } from './g-map/use-connect-mqtt'
@@ -563,7 +443,6 @@ import FlightAreaActionIcon from './flight-area/FlightAreaActionIcon.vue'
 import { EFlightAreaType } from '../types/flight-area'
 import { useFlightArea } from './flight-area/use-flight-area'
 import { useFlightAreaDroneLocationEvent } from './flight-area/use-flight-area-drone-location-event'
-import { getTextByModeCode } from '/@/utils/index'
 
 export default defineComponent({
   components: {
@@ -585,9 +464,9 @@ export default defineComponent({
     RobotFilled,
     ArrowUpOutlined,
     ArrowDownOutlined,
+    OsdInfoModal,
     DockControlPanel,
     DroneControlPanel,
-    DeviceLive,
     CarryOutOutlined,
     RocketOutlined,
     LivestreamOthers,
@@ -609,7 +488,6 @@ export default defineComponent({
       currentType: '',
       coverIndex: 0,
       isFlightArea: false,
-      deviceLiveStatus: false,// 设备直播状态
     })
 
     // 点击切换地图类型
@@ -859,7 +737,11 @@ export default defineComponent({
       setLayers(req)
       const coordinates = req.resource.content.geometry.coordinates
       updateCoordinates('gcj02-wgs84', req);
-      await postElementsReq(shareId.value, req)
+      const data = {
+        ...req,
+      }
+      data.resource.content.geometry.coordinates = [...data.resource.content.geometry.coordinates, 0];
+      await postElementsReq(shareId.value, data)
       obj.setExtData({ id: req.id, name: req.name })
       const title = coordinates.map((item: any, index: number) => {
         if (index < 2) {
@@ -1170,7 +1052,6 @@ export default defineComponent({
       closeLivestreamAgora,
       qualityStyle,
       selectFlightAreaAction,
-      getTextByModeCode,
     }
   }
 })
@@ -1262,12 +1143,6 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-.openLiveButton {
-  padding: 5px;
-  border: 1px solid #5c5c5c;
-  cursor: pointer;
-}
-
 .osd>div:not(.dock-control-panel) {
   margin-top: 5px;
   padding: 5px;

Web/src/components/onLineDevice/components/InfoModal.vue

@@ -0,0 +1,218 @@
+<template>
+  <div v-drag-window class="content">
+    <div class="content-title">
+      <div class="drag-title">
+        <span>{{ osdInfo.callsign }}</span>
+      </div>
+      <a class="fz16" style="color: white;" @click="() => osdInfo.visible = false">
+        <CloseOutlined />
+      </a>
+    </div>
+    <div class="content-osd">
+      <div class="content-osd-head">
+        <div class="content-osd-head-icon">
+          <a-image style="width: 85%;" :src="M30" :preview="false" />
+          <div class="content-osd-head-icon-text">
+            {{ osdInfo.model }}
+          </div>
+        </div>
+        <div class="content-osd-head-right">
+          <div class="content-osd-head-right-top">
+            <div class="content-osd-head-right-top-style">
+              飞行状态
+            </div>
+            <div>
+              {{ getTextByModeCode(deviceInfo.device.mode_code) }}
+            </div>
+          </div>
+          <div class="content-osd-head-right-bottom">
+            <div class="openLiveButton" @click="state.deviceLiveStatus = true" v-if="!state.deviceLiveStatus">
+              开启直播
+            </div>
+            <div class="openLiveButton" @click="state.deviceLiveStatus = false" v-else>
+              关闭直播
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="battery-slide">
+        <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>
+        <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
+        <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>
+
+
+
+
+      <DeviceLive :sn="osdInfo.sn" v-if="state.deviceLiveStatus" />
+      <a-row>
+        <a-col span="6">
+          <a-tooltip title="GPS卫星数">
+            <span>
+              GPS
+              <WifiOutlined />
+            </span>
+            <span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="RTK">
+            <span>
+              RTK
+            </span>
+            <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="电量">
+            <span>电量</span>
+            <span class="ml10">
+              {{ deviceInfo.device.battery.capacity_percent + '%' }}
+            </span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="风向速度">
+            <span>W.S</span>
+            <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed /
+              10).toFixed(2) + ' m/s' }}</span>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col span="6">
+          <a-tooltip title="海拔高度">
+            <span>ASL</span>
+            <span class="ml10">
+              {{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m' }}
+            </span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="离地高度">
+            <span>ALT</span>
+            <span class="ml10">
+              {{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}
+            </span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="水平速度">
+            <span>H.S</span>
+            <span class="ml10">
+              {{ deviceInfo.device.horizontal_speed === str ? str :
+                deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s' }}
+            </span>
+          </a-tooltip>
+        </a-col>
+        <a-col span="6">
+          <a-tooltip title="当前高度">
+            <span>H</span>
+            <span class="ml10">
+              {{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m'
+              }}
+            </span>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { CloseOutlined } from '@ant-design/icons-vue'
+import DeviceLive from '/@/components/deviceLive/index.vue'
+import M30 from '/@/assets/icons/m30.png'
+import { getTextByModeCode } from '/@/utils/index'
+
+interface Props {
+  type: 'MANUAL' | 'AIRPORT',
+  osdInfo: any
+  deviceInfo: any
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+
+const state = reactive({
+  deviceLiveStatus: false,// 设备直播状态
+})
+
+const str: string = '--';
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 420px;
+  color: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  // background-color: rgba(0, 0, 0, 0.8);
+  background-color: #232323;
+  position: absolute;
+  left: 10px;
+  top: 10px;
+
+  &-title {
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #515151;
+  }
+
+  &-osd {
+    font-size: 12px;
+
+    &-head {
+      display: flex;
+
+      &-icon {
+        width: 60px;
+        height: 80px;
+        padding: 5px;
+        background: #3d3d3d;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &-text {
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+
+      &-right {
+        padding: 5px;
+
+        &-top {
+          height: 20px;
+          margin: 10px 0;
+          display: flex;
+          align-items: center;
+
+          &-style {
+            width: 100px;
+            border-right: 1px solid #515151;
+          }
+        }
+
+        &-bottom {
+          height: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

Web/src/components/onLineDevice/icons/dockInfo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/dock</title>
+    <g id="Icons/dock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(1.000000, 0.000000)" fill="#FFFFFF">
+            <path d="M3,25 L27,25 L27,16 L30,16 L30,32 L0,32 L0,16 L3,16 L3,25 Z" id="形状结合"></path>
+            <path d="M30,0 L30,14 L27,14 L27,3 L3,3 L3,14 L0,14 L0,0 L30,0 Z M14,0 L16,0 L16,3 L14,3 L14,0 Z" id="形状结合"></path>
+            <path d="M15,5 L22,22 L15,19.8784894 L8,22 L15,5 Z M15,8 L15,18.6274924 L20,20.1428571 L15,8 Z" id="形状结合"></path>
+        </g>
+    </g>
+</svg>

Web/src/components/onLineDevice/index.vue

@@ -51,7 +51,8 @@
         </div>
       </div>
       <div class="content-info-right">
-        <img :src="deviceInfoSrc" @click.stop="onClickLookInfo">
+        <img :src="deviceInfoSrc" @click.stop="onClickLookInfo" v-if="type === 'MANUAL'">
+        <img :src="dockInfoSrc" @click.stop="onClickLookInfo" v-else-if="type === 'AIRPORT'">
       </div>
     </div>
   </div>
@@ -67,6 +68,7 @@ import batteryTwoSrc from './icons/batteryTwo.svg';
 import batteryThreeSrc from './icons/batteryThree.svg';
 import batteryFourSrc from './icons/batteryFour.svg';
 import deviceInfoSrc from './icons/deviceInfo.svg';
+import dockInfoSrc from './icons/dockInfo.svg';
 import { useMyStore } from '/@/store';
 import { getTextByModeCode } from '/@/utils/index'
 import { OnlineDevice, EModeCode } from '/@/types/device';

Web/src/pages/page-web/projects/layer/index.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="project-layer-wrapper height-100">
-    <div class="scrollbar">
-      <LayersTree :layer-data="mapLayers" class="project-layer-content" @select="selectLayer"
-        v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" v-model:expandedKeys="expandedKeys" />
-    </div>
+  <div class="content">
+    <LayersTree :layer-data="mapLayers" class="project-layer-content" @select="selectLayer"
+      v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" v-model:expandedKeys="expandedKeys" />
     <a-drawer title="地图元素" placement="right" :closable="true" v-model:visible="visible" :mask="true"
       getContainer="#g-container" :wrap-style="{ position: 'absolute' }" wrapClassName="drawer-element-wrapper"
       @close="closeDrawer" width="300">
@@ -476,7 +474,13 @@ function updateCoordinates(transformType: string, element: LayerResource) {
 @import '/@/styles/index.scss';
 </style>
 <style lang="scss">
+.content {
+  width: 208px;
+  overflow: auto;
+}
+
 .drawer-element-wrapper {
+
   .ant-drawer-content {
     background-color: $dark-highlight;
     color: $text-white-basic;
@@ -525,8 +529,4 @@ function updateCoordinates(transformType: string, element: LayerResource) {
     margin-bottom: 10px;
   }
 }
-
-.scrollbar {
-  overflow: auto;
-}
 </style>

Web/src/pages/page-web/projects/tsa.vue

@@ -96,7 +96,7 @@
                           style="width: 18px; height: 16px; text-align: center;">
                           <span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
                             hmsInfo[dock.sn].length
-                          }}</span>
+                            }}</span>
                           <span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' }}</span>
                         </div>
                         <a-popover trigger="click" placement="bottom" color="black"
@@ -139,8 +139,7 @@
                 </div>
                 <div style="float: right; background: #595959; height: 100%; width: 40px;"
                   class="flex-row flex-justify-center flex-align-center">
-                  <div class="fz16"
-                    @click="switchVisible($event, dock, true, dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected)">
+                  <div class="fz16" @click="switchVisible(dock, true)">
                     <a v-if="osdVisible.gateway_sn === dock.gateway.sn && osdVisible.visible">
                       <EyeOutlined />
                     </a>
@@ -160,8 +159,7 @@
           <div v-else>
             <div :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(device, index) in onlineDevices.data"
               :key="device.sn">
-              <OnLineDevice type="MANUAL" :device="device"
-                :onClickLookInfo="() => switchVisible($event, device, false, deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected)" />
+              <OnLineDevice type="MANUAL" :device="device" :onClickLookInfo="() => switchVisible(device, false)" />
             </div>
           </div>
         </a-collapse-panel>
@@ -284,11 +282,7 @@ function getOnlineTopo() {
   })
 }
 
-function switchVisible(e: any, device: OnlineDevice, isDock: boolean, isClick: boolean) {
-  if (!isClick) {
-    e.target.style.cursor = 'not-allowed'
-    return
-  }
+function switchVisible(device: OnlineDevice, isDock: boolean) {
   if (device.sn === osdVisible.value.sn) {
     osdVisible.value.visible = !osdVisible.value.visible
   } else {