项目工作空间

Web/src/api/http/request.ts

@@ -30,7 +30,6 @@ instance.interceptors.request.use(
 
 instance.interceptors.response.use(
   response => {
-    console.info('URL: ' + response.config.baseURL + response.config.url, '\nData: ', response.data, '\nResponse:', response)
     if (response.data.code && response.data.code !== 0) {
       message.error(response.data.message)
     }
@@ -41,8 +40,6 @@ instance.interceptors.response.use(
     if (requestId) {
       console.info(REQUEST_ID, '：', requestId)
     }
-    console.info('url: ', err?.config?.url, `【${err?.config?.method}】 \n>>>> err: `, err)
-
     let description = '-'
     if (err.response?.data && err.response.data.message) {
       description = err.response.data.message

Web/src/components/GMap.vue

@@ -16,7 +16,7 @@
       <div :class="state.currentType === 'polygon' && !state.isFlightArea ? 'g-action-item selection' : 'g-action-item'" @click="draw('polygon', true)">
         <a><BorderOutlined class="fz18" /></a>
       </div>
-      <FlightAreaActionIcon class="g-action-item mt10" :class="{'selection': mouseMode && state.isFlightArea}" @select-action="selectFlightAreaAction" @click="selectFlightAreaAction"/>
+      <!-- <FlightAreaActionIcon class="g-action-item mt10" :class="{'selection': mouseMode && state.isFlightArea}" @select-action="selectFlightAreaAction" @click="selectFlightAreaAction"/> -->
       <div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
         <a style="color: red;"><CloseOutlined /></a>
       </div>
@@ -628,7 +628,7 @@ export default defineComponent({
         const event = newData
         let exist = false
         if (Object.keys(event.mapElementCreat).length !== 0) {
-          console.log(event.mapElementCreat)
+          // console.log(event.mapElementCreat)
           const ele = event.mapElementCreat
           store.state.Layers.forEach(layer => {
             layer.elements.forEach(e => {
@@ -638,13 +638,12 @@ export default defineComponent({
               }
             })
           })
-          if (exist === false) {
+          if (true) {
             setLayers({
               id: ele.id,
               name: ele.name,
               resource: ele.resource
             })
-
             updateCoordinates('wgs84-gcj02', ele)
             const data = { id: ele.id, name: ele.name }
             if (MapElementEnum.PIN === ele.resource?.type) {
@@ -806,7 +805,6 @@ export default defineComponent({
       if (layer?.elements) {
         ;(layer?.elements as any[]).push(resource)
       }
-      console.log('layers', layers)
       store.commit('SET_LAYER_INFO', layers)
     }
     function closeLivestreamOthers () {

Web/src/components/LayersTree.vue

@@ -1,29 +1,35 @@
 <template>
   <span>
-    <a-tree
-      draggable
-      :defaultExpandAll="true"
-      class="device-map-layers"
-      @drop="onDrop"
-      v-bind="$attrs"
-    >
-      <a-tree-node
-        :title="layer.name"
-        :id="layer.id"
-        v-for="layer in getTreeData"
-        :key="layer.id"
-      >
-        <!-- <template #title>
-                {{layer.name}}
-              </template> -->
+    <a-tree draggable :defaultExpandAll="true" class="device-map-layers" @drop="onDrop" v-bind="$attrs">
+      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id">
+        <template #title>
+          <div style="display: flex;align-items: center;">
+            <FolderOutlined />
+            <div style="margin-left: 10px;">
+              {{ layer.name }}
+            </div>
+          </div>
+        </template>
         <template v-if="layer.elements">
-          <a-tree-node
-            v-for="resource in layer.elements"
-            :id="getLayerTreeKey('resource', resource.id)"
-            :key="getLayerTreeKey('resource', resource.id)"
-          >
+          <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
+            :key="getLayerTreeKey('resource', resource.id)">
             <template #title>
-              {{ resource.name }}
+              <div style="display: flex;align-items: center;">
+                <Icon v-if="resource.resource.type === 0">
+                  <template #component>
+                    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+                      <path
+                        d="M512 1006.34L203.038 512 512 17.66 820.962 512 512 1006.34zM320.962 512L512 817.66 703.037 512 512 206.34 320.962 512z"
+                        p-id="4348" />
+                    </svg>
+                  </template>
+                </Icon>
+                <LineOutlined :rotate="135" v-else-if="resource.resource.type === 1" />
+                <GatewayOutlined v-else-if="resource.resource.type === 2" />
+                <div style="margin-left: 10px;">
+                  {{ resource.name }}
+                </div>
+              </div>
             </template>
           </a-tree-node>
         </template>
@@ -34,9 +40,12 @@
 
 <script lang="ts" setup>
 import { computed, defineProps, PropType, reactive } from 'vue'
+import Icon from '@ant-design/icons-vue';
+import { FolderOutlined, LineOutlined, GatewayOutlined } from '@ant-design/icons-vue';
 import { useMyStore } from '/@/store'
 import { DropEvent, mapLayer } from '/@/types/mapLayer'
 import { getLayerTreeKey } from '/@/utils/layer-tree'
+
 const store = useMyStore()
 const props = defineProps({
   layerData: Array as PropType<mapLayer[]>
@@ -55,14 +64,16 @@ const shareId = computed(() => {
 const defaultId = computed(() => {
   return store.state.layerBaseInfo.default
 })
-async function onDrop ({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
+async function onDrop({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
+  console.log('2132132131');
+
   let _treeData = props.layerData || []
   let dragKey = dragNode.eventKey
   dragKey = dragKey.replaceAll('resource__', '')
   const dropPos = node.pos.split('-')
   let dropKey =
     node.eventKey.includes(shareId.value) ||
-    node.eventKey.includes(defaultId.value)
+      node.eventKey.includes(defaultId.value)
       ? node.eventKey
       : node.$parent.eventKey
   if (!dragKey || !dropKey) return
@@ -97,13 +108,14 @@ async function onDrop ({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
   // console.log('_treeData', _treeData)
 }
 </script>
+
 <style lang="scss">
 $antPrefix: 'ant';
+
 .device-map-layers.#{$antPrefix}-tree {
   color: #fff;
 
-  .#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked)
-    .#{$antPrefix}-tree-checkbox-inner {
+  .#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked) .#{$antPrefix}-tree-checkbox-inner {
     background-color: unset;
   }
 
@@ -112,7 +124,7 @@ $antPrefix: 'ant';
   }
 
   // 第一个层级的 li，有左边距 16px
-  > li {
+  >li {
     padding-left: 16px;
     padding-right: 16px;
   }
@@ -128,14 +140,15 @@ $antPrefix: 'ant';
       padding-top: 4px;
     }
 
-    &.#{$antPrefix}-tree-treenode-disabled
-      > .#{$antPrefix}-tree-node-content-wrapper {
+    &.#{$antPrefix}-tree-treenode-disabled>.#{$antPrefix}-tree-node-content-wrapper {
       height: 20px;
+
       span {
         color: #fff;
       }
     }
-    > ul {
+
+    >ul {
       width: 100%;
     }
 
@@ -149,9 +162,9 @@ $antPrefix: 'ant';
     .#{$antPrefix}-tree-checkbox {
       z-index: 1;
     }
+
     .#{$antPrefix}-tree-checkbox:hover::after,
-    .#{$antPrefix}-tree-checkbox-wrapper:hover
-      .#{$antPrefix}-tree-checkbox::after {
+    .#{$antPrefix}-tree-checkbox-wrapper:hover .#{$antPrefix}-tree-checkbox::after {
       visibility: collapse;
     }
 
@@ -177,7 +190,7 @@ $antPrefix: 'ant';
         background-color: transparent;
       }
 
-      > span {
+      >span {
         &::before {
           // position: absolute;
           // right: 0;
@@ -188,7 +201,7 @@ $antPrefix: 'ant';
         }
 
         // 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative
-        > *:not(.progress-wrapper) {
+        >*:not(.progress-wrapper) {
           position: relative;
           z-index: 1;
         }
@@ -197,7 +210,8 @@ $antPrefix: 'ant';
       &.#{$antPrefix}-tree-node-selected {
         background-color: transparent;
         color: #2d8cf0;
-        > span {
+
+        >span {
           &::before {
             background-color: #4f4f4f;
           }
@@ -205,13 +219,13 @@ $antPrefix: 'ant';
       }
     }
   }
-  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open
-    .#{$antPrefix}-tree-switcher-icon {
+
+  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open .#{$antPrefix}-tree-switcher-icon {
     transform: rotate(0deg) !important;
   }
-  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close
-    .#{$antPrefix}-tree-switcher-icon {
+
+  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close .#{$antPrefix}-tree-switcher-icon {
     transform: rotate(0deg) !important;
   }
 }
-</style>
+</style>

Web/src/components/flight-area/use-flight-area.ts

@@ -14,7 +14,7 @@ import { useGMapCover } from '/@/hooks/use-g-map-cover'
 import moment from 'moment'
 import { DATE_FORMAT } from '/@/utils/constants'
 
-export function useFlightArea () {
+export function useFlightArea() {
   const root = getRoot()
   const store = rootStore
   const coverMap = store.state.coverMap
@@ -22,19 +22,19 @@ export function useFlightArea () {
   let useGMapCoverHook = useGMapCover()
 
   const MIN_RADIUS = 10
-  function checkCircle (obj: any): boolean {
+  function checkCircle(obj: any): boolean {
     if (obj.getRadius() < MIN_RADIUS) {
-      message.error(`The radius must be greater than ${MIN_RADIUS}m.`)
+      message.error(`半径必须大于${MIN_RADIUS}米`)
       root.$map.remove(obj)
       return false
     }
     return true
   }
 
-  function checkPolygon (obj: any): boolean {
+  function checkPolygon(obj: any): boolean {
     const path: any[][] = obj.getPath()
     if (path.length < 3) {
-      message.error('The path of the polygon cannot be crossed.')
+      message.error('多边形的路径不能交叉')
       root.$map.remove(obj)
       return false
     }
@@ -42,7 +42,7 @@ export function useFlightArea () {
     return true
   }
 
-  function setExtData (obj: any) {
+  function setExtData(obj: any) {
     let ext = obj.getExtData()
     const id = uuidv4()
     const name = `${ext.type}-${moment().format(DATE_FORMAT)}`
@@ -50,7 +50,7 @@ export function useFlightArea () {
     obj.setExtData(ext)
     return ext
   }
-  function createFlightArea (obj: any) {
+  function createFlightArea(obj: any) {
     const ext = obj.getExtData()
     const data = {
       id: ext.id,
@@ -82,7 +82,7 @@ export function useFlightArea () {
     }).finally(() => root.$map.remove(obj))
   }
 
-  function getDrawFlightAreaCallback (obj: any) {
+  function getDrawFlightAreaCallback(obj: any) {
     useGMapCoverHook = useGMapCover()
     const ext = setExtData(obj)
     switch (ext.mapType) {

Web/src/hooks/use-g-map-cover.ts

@@ -9,7 +9,7 @@ import { getRoot } from '/@/root'
 import rootStore from '/@/store'
 import { GeojsonCoordinate } from '/@/types/map'
 
-export function useGMapCover () {
+export function useGMapCover() {
   const root = getRoot()
   const AMap = root.$aMap
 
@@ -22,15 +22,14 @@ export function useGMapCover () {
   }
   const disableColor = '#b3b3b3'
 
-  function AddCoverToMap (cover :any) {
+  function AddCoverToMap(cover: any) {
     root.$map.add(cover)
     coverMap[cover.getExtData().id] = [cover]
   }
 
-  function getPinIcon (color?:string) {
-    // console.log('color', color)
+  function getPinIcon(color?: string) {
     const colorObj: {
-      [key: number| string]: any
+      [key: number | string]: any
     } = {
       '2d8cf0': pin2d8cf0,
       '19be6b': pin19be6b,
@@ -41,32 +40,26 @@ export function useGMapCover () {
     }
     const iconName = (color?.replaceAll('#', '') || '').toLocaleLowerCase()
     return new AMap.Icon({
-      // size: new AMap.Size(40, 50),
       image: colorObj[iconName],
-      // imageOffset: new AMap.Pixel(0, -60),
-      // imageSize: new AMap.Size(40, 50)
     })
   }
 
-  function init2DPin (name: string, coordinates:GeojsonCoordinate, color?:string, data?:{}) {
-    const pin = new AMap.Marker({
+  function init2DPin(name: string, coordinates: GeojsonCoordinate, color?: string, data?: {}) {
+    const marker = new AMap.Marker({
       position: new AMap.LngLat(coordinates[0], coordinates[1]),
       title: name,
       icon: getPinIcon(color),
-      // strokeColor: color || normalColor,
-      // fillColor: color || normalColor,
       extData: data
     })
-    // console.log('coordinates pin', pin)
-    AddCoverToMap(pin)
+    marker.on('click', function (e: any) {
+      const options = marker.getOptions()
+      const id = options.extData.id;
+      store.commit('SET_MAP_CLICK_ID', id);
+    })
+    AddCoverToMap(marker)
   }
 
-  function AddOverlayGroup (overlayGroup) {
-    root.$map.add(overlayGroup)
-    const id = overlayGroup.getExtData().id
-    coverMap[id] = [...(coverMap[id] || []), overlayGroup]
-  }
-  function initPolyline (name: string, coordinates:GeojsonCoordinate[], color?:string, data?:{}) {
+  function initPolyline(name: string, coordinates: GeojsonCoordinate[], color?: string, data?: {}) {
     const path = [] as GeojsonCoordinate[]
     coordinates.forEach(coordinate => {
       path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
@@ -78,40 +71,55 @@ export function useGMapCover () {
       strokeWeight: 2,
       strokeStyle: 'solid',
       extData: data
-      // draggable: true,
+    })
+    polyline.on('click', function () {
+      const options = polyline.getOptions()
+      const id = options.extData.id;
+      store.commit('SET_MAP_CLICK_ID', id);
     })
     AddOverlayGroup(polyline)
   }
 
-  function initPolygon (name: string, coordinates:GeojsonCoordinate[][], color?:string, data?:{}) {
+  function initPolygon(name: string, coordinates: GeojsonCoordinate[][], color?: string, data?: {}) {
     const path = [] as GeojsonCoordinate[]
     coordinates[0].forEach(coordinate => {
       path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
     })
-    // console.log('Polygon', path)
-    const Polygon = new AMap.Polygon({
+    const polygon = new AMap.Polygon({
       path: path,
       strokeOpacity: 1,
       strokeWeight: 2,
       fillColor: color || normalColor,
       fillOpacity: 0.4,
-      // draggable: true,
       strokeColor: color || normalColor,
       extData: data
     })
-    AddOverlayGroup(Polygon)
+    polygon.on('click', function () {
+      const options = polygon.getOptions()
+      const id = options.extData.id;
+      store.commit('SET_MAP_CLICK_ID', id);
+    })
+    AddOverlayGroup(polygon)
+  }
+
+  function AddOverlayGroup(overlayGroup: any) {
+    console.log(111111);
+
+    root.$map.add(overlayGroup)
+    const id = overlayGroup.getExtData().id
+    coverMap[id] = [...(coverMap[id] || []), overlayGroup]
   }
 
-  function removeCoverFromMap (id:string) {
+  function removeCoverFromMap(id: string) {
     coverMap[id].forEach(cover => root.$map.remove(cover))
     coverMap[id] = []
   }
 
-  function getElementFromMap (id:string): any[] {
+  function getElementFromMap(id: string): any[] {
     return coverMap[id]
   }
 
-  function updatePinElement (id:string, name: string, coordinates:GeojsonCoordinate, color?:string) {
+  function updatePinElement(id: string, name: string, coordinates: GeojsonCoordinate, color?: string) {
     const elements = getElementFromMap(id)
     if (elements && elements.length > 0) {
       const element = elements[0]
@@ -120,7 +128,6 @@ export function useGMapCover () {
       element.setIcon(icon)
       element.setTitle(name)
     } else {
-      // console.log('into init PIN')
       init2DPin(name, coordinates, color, {
         id: id,
         name: name
@@ -128,7 +135,7 @@ export function useGMapCover () {
     }
   }
 
-  function updatePolylineElement (id:string, name: string, coordinates:GeojsonCoordinate[], color?:string) {
+  function updatePolylineElement(id: string, name: string, coordinates: GeojsonCoordinate[], color?: string) {
     const elements = getElementFromMap(id)
     if (elements && elements.length > 0) {
       const element = elements[0]
@@ -143,7 +150,7 @@ export function useGMapCover () {
     }
   }
 
-  function updatePolygonElement (id:string, name: string, coordinates:GeojsonCoordinate[][], color?:string) {
+  function updatePolygonElement(id: string, name: string, coordinates: GeojsonCoordinate[][], color?: string) {
     const elements = getElementFromMap(id)
     if (elements && elements.length > 0) {
       const element = elements[0]
@@ -159,7 +166,7 @@ export function useGMapCover () {
     }
   }
 
-  function initTextInfo (content: string, coordinates: GeojsonCoordinate, id: string) {
+  function initTextInfo(content: string, coordinates: GeojsonCoordinate, id: string) {
     const info = new AMap.Text({
       text: content,
       position: new AMap.LngLat(coordinates[0], coordinates[1]),
@@ -174,7 +181,7 @@ export function useGMapCover () {
     AddOverlayGroup(info)
   }
 
-  function initFlightAreaCircle (name: string, radius: number, position: GeojsonCoordinate, data: { id: string, type: EFlightAreaType, enable: boolean }) {
+  function initFlightAreaCircle(name: string, radius: number, position: GeojsonCoordinate, data: { id: string, type: EFlightAreaType, enable: boolean }) {
     const circle = new AMap.Circle({
       strokeColor: data.enable ? flightAreaColorMap[data.type] : disableColor,
       strokeOpacity: 1,
@@ -191,7 +198,7 @@ export function useGMapCover () {
     initTextInfo(name, position, data.id)
   }
 
-  function updateFlightAreaCircle (id: string, name: string, radius: number, position: GeojsonCoordinate, enable: boolean, type: EFlightAreaType) {
+  function updateFlightAreaCircle(id: string, name: string, radius: number, position: GeojsonCoordinate, enable: boolean, type: EFlightAreaType) {
     const elements = getElementFromMap(id)
     if (elements && elements.length > 0) {
       let textIndex = elements.findIndex(ele => ele.getExtData()?.type === 'text')
@@ -216,12 +223,12 @@ export function useGMapCover () {
     }
   }
 
-  function calcPolygonPosition (coordinate: GeojsonCoordinate[]): GeojsonCoordinate {
+  function calcPolygonPosition(coordinate: GeojsonCoordinate[]): GeojsonCoordinate {
     const index = coordinate.length - 1
     return [(coordinate[0][0] + coordinate[index][0]) / 2.0, (coordinate[0][1] + coordinate[index][1]) / 2]
   }
 
-  function initFlightAreaPolygon (name: string, coordinates: GeojsonCoordinate[], data: { id: string, type: EFlightAreaType, enable: boolean }) {
+  function initFlightAreaPolygon(name: string, coordinates: GeojsonCoordinate[], data: { id: string, type: EFlightAreaType, enable: boolean }) {
     const path = [] as GeojsonCoordinate[]
     coordinates.forEach(coordinate => {
       path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
@@ -242,7 +249,7 @@ export function useGMapCover () {
     initTextInfo(name, calcPolygonPosition(coordinates), data.id)
   }
 
-  function updateFlightAreaPolygon (id: string, name: string, coordinates: GeojsonCoordinate[], enable: boolean, type: EFlightAreaType) {
+  function updateFlightAreaPolygon(id: string, name: string, coordinates: GeojsonCoordinate[], enable: boolean, type: EFlightAreaType) {
     const elements = getElementFromMap(id)
     if (elements && elements.length > 0) {
       let textIndex = elements.findIndex(ele => ele.getExtData()?.type === 'text')
@@ -284,4 +291,4 @@ export function useGMapCover () {
     updateFlightAreaCircle,
     calcPolygonPosition,
   }
-}
+}

Web/src/hooks/use-g-map-tsa.ts

@@ -7,7 +7,7 @@ import dockIcon from '/@/assets/icons/dock.png'
 import rcIcon from '/@/assets/icons/rc.png'
 import droneIcon from '/@/assets/icons/drone.png'
 
-export function deviceTsaUpdate () {
+export function deviceTsaUpdate() {
   const root = getRoot()
   let AMap = root.$aMap
 
@@ -20,7 +20,7 @@ export function deviceTsaUpdate () {
   const paths = store.state.markerInfo.pathMap
 
   let trackLine = null as any
-  function getTrackLineInstance () {
+  function getTrackLineInstance() {
     if (!trackLine) {
       trackLine = new AMap.Polyline({
         map: root.$map,
@@ -30,7 +30,7 @@ export function deviceTsaUpdate () {
     return trackLine
   }
 
-  function initIcon (type: number) {
+  function initIcon(type: number) {
     return new AMap.Icon({
       image: icons.get(type),
       imageSize: new AMap.Size(40, 40),
@@ -38,7 +38,7 @@ export function deviceTsaUpdate () {
     })
   }
 
-  function initMarker (type: number, name: string, sn: string, lng?: number, lat?: number) {
+  function initMarker(type: number, name: string, sn: string, lng?: number, lat?: number) {
     if (markers[sn]) {
       return
     }
@@ -54,19 +54,9 @@ export function deviceTsaUpdate () {
       offset: [0, -20],
     })
     root.$map.add(markers[sn])
-    // markers[sn].on('moving', function (e: any) {
-    //   let path = paths[sn]
-    //   if (!path) {
-    //     paths[sn] = e.passedPath
-    //     return
-    //   }
-    //   path.push(e.passedPath[0])
-    //   path.push(e.passedPath[1])
-    //   getTrackLineInstance().setPath(path)
-    // })
   }
 
-  function removeMarker (sn: string) {
+  function removeMarker(sn: string) {
     if (!markers[sn]) {
       return
     }
@@ -76,7 +66,7 @@ export function deviceTsaUpdate () {
     delete paths[sn]
   }
 
-  function addMarker (sn: string, lng?: number, lat?: number) {
+  function addMarker(sn: string, lng?: number, lat?: number) {
     getDeviceBySn(localStorage.getItem(ELocalStorageKey.WorkspaceId)!, sn)
       .then(data => {
         if (data.code !== 0) {
@@ -87,7 +77,7 @@ export function deviceTsaUpdate () {
       })
   }
 
-  function moveTo (sn: string, lng: number, lat: number) {
+  function moveTo(sn: string, lng: number, lat: number) {
     let marker = markers[sn]
     if (!marker) {
       addMarker(sn, lng, lat)
@@ -106,4 +96,4 @@ export function deviceTsaUpdate () {
     removeMarker,
     moveTo
   }
-}
+}

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

@@ -4,34 +4,53 @@
       <LayersTree :layer-data="mapLayers" class="project-layer-content" @check="checkLayer" @select="selectLayer"
         v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" />
     </div>
-    <a-drawer title="Map Element" placement="right" :closable="true" v-model:visible="visible" :mask="false"
+    <a-drawer title="地图元素" placement="right" :closable="true" v-model:visible="visible" :mask="false"
       wrapClassName="drawer-element-wrapper" @close="closeDrawer" width="300">
       <div class="drawer-element-content">
         <div class="name element-item">
-          <span class="title">Name:</span>
-          <a-input v-model:value="layerState.layerName" style="width:120px" placeholder="element name"
+          <span class="mr30">名称:</span>
+          <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
             @change="changeLayer" />
         </div>
         <div class="longitude element-item" v-if="layerState.currentType === geoType.Point">
-          <span class="title">Longitude:</span>
-          <a-input v-model:value="layerState.longitude" style="width:120px" placeholder="longitude"
-            @change="changeLayer" />
+          <span class="mr30">经度:</span>
+          {{ layerState.longitude || '--' }}
         </div>
         <div class="latitude element-item" v-if="layerState.currentType === geoType.Point">
-          <span class="title">Latitude:</span>
-          <a-input v-model:value="layerState.latitude" style="width:120px" placeholder="latitude"
-            @change="changeLayer" />
+          <span class="mr30">纬度:</span>
+          {{ layerState.latitude || '--' }}
+        </div>
+        <div class="latitude element-item" v-if="layerState.currentType === geoType.Point">
+          <span class="mr30">高度:</span>
+          {{ layerState.height || '--' }}
         </div>
         <div class="color-content">
-          <span class="mr30">Color: </span>
+          <span class="mr30">颜色: </span>
           <div v-for="item in colors" :key="item.id" class="color-item" :style="'background:' + item.color"
             @click="changeColor(item)">
             <svg-icon v-if="item.color === layerState.color" :size="18" name="check"></svg-icon>
           </div>
         </div>
+        <div class="element-item">
+          <span class="mr30">用户:</span>
+          {{ layerState.user_name || '--' }}
+        </div>
+        <div class="element-item">
+          <span class="mr30">来源:</span>
+          <Icon v-if="layerState.element_from === 2">
+            <template #component>
+              <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+                <path
+                  d="M1024 418.21v576H0v-576h1024z m-672 192c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z m320 0c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM236.59 29.79h125.55v320H236.59v-320z m425.28 0h125.55v320H661.87v-320z"
+                  p-id="4408" />
+              </svg>
+            </template>
+          </Icon>
+          <DesktopOutlined v-else />
+        </div>
       </div>
       <div class="flex-row flex-justify-around flex-align-center mt20">
-        <a-button type="primary" @click="deleteElement">Delete</a-button>
+        <a-button type="primary" @click="deleteElement">删除</a-button>
       </div>
     </a-drawer>
   </div>
@@ -44,20 +63,37 @@ import {
   getElementGroupsReq,
   updateElementsReq
 } from '/@/api/layer'
+import Icon from '@ant-design/icons-vue';
+import { DesktopOutlined } from '@ant-design/icons-vue';
 import LayersTree from '/@/components/LayersTree.vue'
 import { MapDoodleColor, MapElementEnum } from '/@/constants/map'
 import { useGMapCover } from '/@/hooks/use-g-map-cover'
-import { getRoot } from '/@/root'
 import { useMyStore } from '/@/store'
 import { GeojsonCoordinate, LayerResource } from '/@/types/map'
 import { Color, GeoType } from '/@/types/mapLayer'
 import { generatePoint } from '/@/utils/genjson'
 import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
 
-const root = getRoot()
+interface Props {
+  mapClickId: string,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+
+watch(() => props.mapClickId, (newValue, oldValue) => {
+  if (newValue) {
+    selectedKey.value = newValue
+    selectedLayer.value = getCurrentLayer(selectedKey.value)
+    setBaseInfo()
+    visible.value = true
+    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+  }
+});
+
 const store = useMyStore()
-let useGMapCoverHook = useGMapCover(store)
-console.log('store', store)
+let useGMapCoverHook = useGMapCover()
 const mapLayers = ref(store.state.Layers)
 const checkedKeys = ref<string[]>([])
 const selectedKeys = ref<string[]>([])
@@ -66,14 +102,19 @@ const selectedLayer = ref<any>(null)
 const visible = ref<boolean>(false)
 store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
 const geoType = GeoType
+
 const layerState = reactive({
-  layerName: '',
   layerId: '',
+  layerName: '',
   longitude: 0,
   latitude: 0,
-  currentType: '', // “LineString”,"Polygon","Point"
-  color: '#212121'
+  height: 0,
+  currentType: '',// “LineString”,"Polygon","Point"
+  color: '#212121',
+  user_name: '',
+  element_from: 1,// 1-web 2-遥控器
 })
+
 const colors = ref<Color[]>([
   { id: 1, name: 'BLUE', color: '#2D8CF0', selected: true },
   { id: 2, name: 'GREEN', color: '#19BE6B', selected: false },
@@ -82,6 +123,7 @@ const colors = ref<Color[]>([
   { id: 5, name: 'RED', color: '#E23C39', selected: false },
   { id: 6, name: 'NAME_DEFAULT', color: '#212121', selected: false }
 ])
+
 const scorllHeight = ref()
 
 async function getAllElement() {
@@ -115,6 +157,7 @@ function setMapCoverByElement(elements: LayerResource[]) {
     updateMapElement(element, name, color)
   })
 }
+
 function updateMapElement(
   element: LayerResource,
   name: string,
@@ -137,11 +180,12 @@ function updateMapElement(
     useGMapCoverHook.updatePolygonElement(id, name, coordinates, color)
   }
 }
+
 function checkLayer(keys: string[]) {
   console.log('checkLayer', keys, selectedKeys.value, checkedKeys.value)
 }
+
 function selectLayer(keys: string[], e) {
-  // console.log('selectLayer', e.node.eventKey, e.selected)
   if (e.selected) {
     selectedKey.value = e.node.eventKey
     selectedLayer.value = getCurrentLayer(selectedKey.value)
@@ -154,7 +198,6 @@ function selectLayer(keys: string[], e) {
 function getCurrentLayer(id: string) {
   const Layers = store.state.Layers
   const key = id.replaceAll('resource__', '')
-  // console.log('selectedKey.value', selectedKey.value)
   let layer = null
   const findCan = function (V) {
     V.forEach(item => {
@@ -168,7 +211,6 @@ function getCurrentLayer(id: string) {
   }
   findCan(Layers)
   // const layer = Layers.find(item => item.elements.find(el => el.id === key))
-  console.log('layer', layer)
   return layer
 }
 function setBaseInfo() {
@@ -180,6 +222,9 @@ function setBaseInfo() {
     layerState.layerName = layer.name
     layerState.layerId = layer.id
     layerState.color = layer.resource?.content.properties.color
+    layerState.user_name = layer.resource?.user_name
+    layerState.element_from = layer.element_from
+    layerState.height = layer.height
     let coordinate: GeojsonCoordinate
     switch (geoType) {
       case GeoType.Point:
@@ -194,12 +239,14 @@ function setBaseInfo() {
     }
   }
 }
+
 onMounted(() => {
   const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
   const parent = element?.parentNode as HTMLDivElement
   scorllHeight.value = parent?.clientHeight - parent.firstElementChild!.clientHeight
   getAllElement()
 })
+
 function closeDrawer() {
   store.commit('SET_DRAW_VISIBLE_INFO', false)
   selectedKeys.value = []
@@ -216,7 +263,6 @@ async function deleteElement() {
   const elementid = selectedLayer.value.id
 
   await deleteElementReq(elementid, {}).then(async (res: any) => {
-    // console.log('delete element res:', res)
     if (res.code !== 0) {
       console.warn(res)
       return
@@ -232,13 +278,24 @@ async function getElementGroups(type?: string) {
     groupId: '',
     isDistributed: true
   })
-  mapLayers.value = result.data
+  mapLayers.value = result.data.map((item: any) => {
+    return {
+      ...item,
+      elements: item.elements.map((o: any) => {
+        return {
+          ...o,
+          height: o.resource.content.geometry.coordinates[2]
+        }
+      })
+    }
+  })
   mapLayers.value = updateWgs84togcj02()
   if (type && type === 'init') {
     store.dispatch('setLayerInfo', mapLayers.value)
   }
   store.commit('SET_LAYER_INFO', mapLayers.value)
 }
+
 async function updateElements() {
   let content = null
   if (layerState.currentType === GeoType.Point) {
@@ -283,6 +340,7 @@ function updateWgs84togcj02() {
   })
   return layers
 }
+
 function updateCoordinates(transformType: string, element: LayerResource) {
   const geoType = element.resource?.content.geometry.type
   const type = element.resource?.type as number
@@ -378,7 +436,7 @@ function updateCoordinates(transformType: string, element: LayerResource) {
   .color-content {
     display: flex;
     align-items: center;
-    margin-top: 8px;
+    margin: 8px 0 10px;
 
     .color-item {
       cursor: pointer;
@@ -387,7 +445,7 @@ function updateCoordinates(transformType: string, element: LayerResource) {
       line-height: 18px;
       display: flex;
       align-items: center;
-      margin-left: 5px;
+      margin-right: 5px;
     }
   }
 

Web/src/pages/page-web/projects/media/detail/components/FileInfo.vue

@@ -71,7 +71,7 @@
                   文件大小
                 </div>
                 <div class="fileInfo-detail-info-item-content">
-                  {{ state.info.size || '--' }}
+                  {{ state.info.size > 0 ? (state.info.size / 1024 / 1024).toFixed(1) + 'M' : '--' }}
                 </div>
               </div>
               <div class="fileInfo-detail-info-item">
@@ -122,7 +122,7 @@
       </div>
       <div class="fileInfo-previewList">
         <div class="fileInfo-previewList-item">
-          <img :src="state.info.url" />
+          <img :src="state.info.thumbnail_url" />
         </div>
       </div>
     </a-spin>
@@ -153,6 +153,7 @@ const state = reactive({
   imgLoading: false,// 图片加载
   info: {
     url: '',
+    thumbnail_url: '',// 缩略图
     media_type: null,
     file_id: '',
     file_name: '',
@@ -161,7 +162,7 @@ const state = reactive({
     wayline_name: '',
     image_width: '',// 照片分辨率-宽度
     image_height: '',// 照片分辨率-高度
-    size: '',
+    size: 0,
     payload: '',
     picture_time: '',
     longitude: '',// 经度

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="mediaList">
+  <div class="trajectoryList">
     <Search :mode="state.mode" :selectedRowKeys="state.selectedRowKeys" :onClickDownload="onClickBatchDownload"
       :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div style="background: #FFFFFF;padding: 20px;">
-      <div class="mediaList-info">
+      <div class="trajectoryList-info">
         <div>
           轨迹回放文件
         </div>
-        <div class="mediaList-info-right">
-          <div class="mediaList-info-right-text">
+        <div class="trajectoryList-info-right">
+          <div class="trajectoryList-info-right-text">
             <div>
               已选/全部：
             </div>
@@ -26,8 +26,8 @@
           </a-button>
         </div>
       </div>
-      <div v-if="false">
-        <div class="mediaList-table" v-if="state.mode === 'table'">
+      <div>
+        <div class="trajectoryList-table" v-if="state.mode === 'table'">
           <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="id" :loading="state.listLoading"
             :columns="columns" :dataSource="state.list" :rowClassName="rowClassName" :pagination="paginationConfig"
             :rowSelection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
@@ -55,7 +55,7 @@
             </template>
           </a-table>
         </div>
-        <div class="mediaList-list" v-else>
+        <div class="trajectoryList-list" v-else>
           <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 8, xxl: 12 }" :loading="state.listLoading"
             :dataSource="state.list" :pagination="paginationConfig">
             <template #renderItem="{ item }">
@@ -69,7 +69,7 @@
                   <a-card-meta>
                     <template #description>
                       <a-tooltip placement="bottom" :title="item.dir_name">
-                        <div class="mediaList-list-name">
+                        <div class="trajectoryList-list-name">
                           {{ item.dir_name }}
                         </div>
                       </a-tooltip>
@@ -258,7 +258,7 @@ const onClickTrajectory = () => {
 </script>
 
 <style lang="scss">
-.mediaList {
+.trajectoryList {
   padding: 20px;
 
   &-info {

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

@@ -2,8 +2,8 @@
   <div class="project-tsa-wrapper ">
     <div class="scrollbar" :style="{ height: scorllHeight + 'px' }">
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Dock" header="机场" style="border-bottom: 1px solid #4f4f4f;">
-          <div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">
+        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :key="EDeviceTypeName.Dock" header="机场">
+          <div v-if="onlineDocks.data.length === 0" style="height: 100px; color: white;">
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
           <div v-else class="fz12" style="color: white;">
@@ -152,10 +152,8 @@
             </div>
           </div>
         </a-collapse-panel>
-      </a-collapse>
-      <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="在线设备" style="border-bottom: 1px solid #4f4f4f;">
-          <div v-if="onlineDevices.data.length === 0" style="height: 150px; color: white;">
+        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :key="EDeviceTypeName.Aircraft" header="在线设备">
+          <div v-if="onlineDevices.data.length === 0" style="height: 100px; color: white;">
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
           <div v-else class="fz12" style="color: white;">
@@ -220,14 +218,13 @@
             </div>
           </div>
         </a-collapse-panel>
-      </a-collapse>
-      <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="地图标注管理" style="border-bottom: 1px solid #4f4f4f;">
-          <Layer />
+        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :forceRender="true" :key="EDeviceTypeName.Marker"
+          header="地图标注管理">
+          <Layer :mapClickId="mapClickId" />
         </a-collapse-panel>
       </a-collapse>
     </div>
-    <div style="width: 100%;display: flex;justify-content: center; align-items: center;">
+    <div style="width: 100%;padding-top: 10px; display: flex;justify-content: center;align-items: center;">
       <a-tooltip title="返回" placement="right">
         <a-button type="primary" @click="onClickGoHome">
           <ImportOutlined style="font-size: 22px; color: white" />
@@ -238,12 +235,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import Layer from '/@/pages/page-web/projects/layer.vue'
 import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
 import noData from '/@/assets/icons/no-data.png'
 import rc from '/@/assets/icons/rc.png'
-import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd } from '/@/types/device'
+import { OnlineDevice, EModeCode, EDockModeCode } from '/@/types/device'
 import { useMyStore } from '/@/store'
 import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
 import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined, ImportOutlined } from '@ant-design/icons-vue'
@@ -251,7 +248,6 @@ import { EHmsLevel, ERouterName } from '/@/types/enums'
 import { getRoot } from '/@/root'
 
 const store = useMyStore()
-const username = ref(localStorage.getItem(ELocalStorageKey.Username))
 const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)
 const osdVisible = computed(() => store.state.osdVisible)
 const hmsVisible = new Map<string, boolean>()
@@ -265,6 +261,7 @@ const onlineDocks = reactive({
   data: [] as OnlineDevice[]
 })
 
+const mapClickId = computed(() => store.state.mapClickId)
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
 const dockInfo = computed(() => store.state.deviceState.dockInfo)
 const hmsInfo = computed({

Web/src/store/index.ts

@@ -6,28 +6,28 @@ import { getLayers } from '/@/api/layer'
 import { LayerType } from '/@/types/mapLayer'
 import { WaylineFile } from '/@/types/wayline'
 import { DevicesCmdExecuteInfo } from '/@/types/device-cmd'
-import { FlightAreaStatus } from '../api/flight-area'
 
 const initStateFunc = () => ({
+  mapClickId: '',
   Layers: [
-    {
-      name: 'default',
-      id: '',
-      is_distributed: true,
-      elements: [],
-      is_check: false,
-      is_select: false,
-      type: 1
-    },
-    {
-      name: 'share',
-      id: '',
-      is_distributed: true,
-      elements: [],
-      is_check: false,
-      is_select: false,
-      type: 2
-    }
+    // {
+    //   name: '默认',
+    //   id: '',
+    //   is_distributed: true,
+    //   elements: [],
+    //   is_check: false,
+    //   is_select: false,
+    //   type: 1
+    // },
+    // {
+    //   name: '分享',
+    //   id: '',
+    //   is_distributed: true,
+    //   elements: [],
+    //   is_check: false,
+    //   is_select: false,
+    //   type: 2
+    // }
   ],
   layerBaseInfo: {} as {
     [key: string]: string
@@ -100,6 +100,9 @@ export type RootStateType = ReturnType<typeof initStateFunc>
 const getters: GetterTree<RootStateType, RootStateType> = {
 }
 const mutations: MutationTree<RootStateType> = {
+  SET_MAP_CLICK_ID(state, id) {
+    state.mapClickId = id
+  },
   SET_LAYER_INFO(state, info) {
     state.Layers = info
   },
@@ -238,7 +241,6 @@ const actions: ActionTree<RootStateType, RootStateType> = {
       }
     })
     state.layerBaseInfo = obj
-    console.log('state.layerBaseInfo', state.layerBaseInfo)
   },
   getLayerInfo({ state }, id: string) {
     return state.layerBaseInfo[id]

Web/src/types/enums.ts

@@ -137,6 +137,7 @@ export enum EDeviceTypeName {
     Aircraft = 0,
     Gateway = 2,
     Dock = 3,
+    Marker = 4,
 }
 
 export enum EHmsLevel {

Web/src/websocket/index.ts

@@ -9,7 +9,7 @@ interface WebSocketOptions {
 }
 
 export interface MessageHandler {
-  (data : {[key: string]: any}): void
+  (data: { [key: string]: any }): void
 }
 
 export interface CommonHostWs<T> {
@@ -27,17 +27,18 @@ class ConnectWebSocket {
   _hasInit: boolean
   _messageHandler: MessageHandler | null
 
-  constructor (url: string) {
+  constructor(url: string) {
     this._url = url
     this._socket = null
     this._hasInit = false
     this._messageHandler = null
   }
 
-  initSocket () {
+  initSocket() {
     if (this._hasInit) {
       return
     }
+
     if (!this._url) {
       return
     }
@@ -50,30 +51,30 @@ class ConnectWebSocket {
     })
 
     this._hasInit = true
-
+    
     this._socket.addEventListener('open', this._onOpen.bind(this))
     this._socket.addEventListener('close', this._onClose.bind(this))
     this._socket.addEventListener('error', this._onError.bind(this))
     this._socket.addEventListener('message', this._onMessage.bind(this))
   }
 
-  _onOpen () {
-    console.log('连接成功')
+  _onOpen() {
+    // console.log('连接成功')
   }
 
-  _onClose () {
-    console.log('连接已断开')
+  _onClose() {
+    // console.log('连接已断开')
   }
 
-  _onError () {
-    console.log('连接 error')
+  _onError() {
+    // console.log('连接 error')
   }
 
-  registerMessageHandler (messageHandler: MessageHandler) {
+  registerMessageHandler(messageHandler: MessageHandler) {
     this._messageHandler = messageHandler
   }
 
-  _onMessage (msg: MessageEvent) {
+  _onMessage(msg: MessageEvent) {
     const data = JSON.parse(msg.data)
     this._messageHandler && this._messageHandler(data)
     // console.log('接受消息', message)
@@ -83,7 +84,7 @@ class ConnectWebSocket {
     this._socket?.send(JSON.stringify(message.data))
   }
 
-  close () {
+  close() {
     this._socket?.close()
   }
 }

Web/vite.config.ts

@@ -20,7 +20,7 @@ export default defineConfig(({ mode, command }: ConfigEnv) => {
           find: '/@',
           replacement: path.resolve(__dirname, './src'),
         }
-      ]
+      ],
     },
     server: {
       // 监听所有地址