项目工作空间优化

Web/src/api/http/request.ts

@@ -7,9 +7,29 @@ export * from './type'
 
 const REQUEST_ID = 'X-Request-Id'
 
-function getAuthToken() {
-  return localStorage.getItem(ELocalStorageKey.Token)
-}
+export const getHeaders = () => {
+  const headers: {
+    'x-auth-token'?: string,
+    'sign': string,
+    'key': string,
+    'userCode': string,
+  } = {
+    'sign': '',
+    'key': '',
+    'userCode': '',
+  };
+  const token = localStorage.getItem(ELocalStorageKey.Token)
+  if (token) {
+    headers['x-auth-token'] = token;
+  }
+  const sign = localStorage.getItem('sign') || '';
+  const key = localStorage.getItem('key') || '';
+  const userCode = localStorage.getItem('userCode') || '';
+  headers['sign'] = sign;
+  headers['key'] = key;
+  headers['userCode'] = userCode;
+  return headers;
+};
 
 const instance = axios.create({
   headers: {
@@ -19,7 +39,7 @@ const instance = axios.create({
 
 instance.interceptors.request.use(
   config => {
-    config.headers[ELocalStorageKey.Token] = getAuthToken()
+    config.headers = getHeaders();
     config.baseURL = '/api';
     return config
   },

Web/src/components/LayersTree.vue

@@ -3,20 +3,16 @@
     <a-empty :image="noData" :image-style="{ height: '60px' }" />
   </div>
   <div v-else>
-    <a-tree class="device-map-layers" v-bind="$attrs" v-if="getTreeData.length">
-      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :disabled="true">
+    <a-directory-tree class="device-map-layers" v-bind="$attrs" :multiple="false" v-if="getTreeData.length">
+      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :selectable="false">
         <template #title>
-          <div style="display: flex;align-items: center;">
-            <FolderOutlined />
-            <div style="margin-left: 10px;">
-              {{ layer.name }}
-            </div>
-          </div>
+          {{ layer.name }}
         </template>
         <template v-if="layer.elements">
-          <a-tree-node v-for="resource in layer.elements" :type="resource.resource ? 'DEFAULT' : 'PHOTO'"
-            :id="getLayerTreeKey('resource', resource.id)" :key="getLayerTreeKey('resource', resource.id)"
-            :disabled="!resource.resource">
+          <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
+            :key="getLayerTreeKey('resource', resource.id)" :selectable="resource.resource ? true : false"
+            :label="resource.resource ? 'DEFAULT' : 'PHOTO'">
+            <template #icon></template>
             <template #title>
               <div style="display: flex;align-items: center;" v-if="resource.resource">
                 <Icon v-if="resource.resource.type === 0">
@@ -42,8 +38,9 @@
               </div>
             </template>
             <template v-if="layer.elements">
-              <a-tree-node v-for="item in resource.elements" :type="'PHOTO'" :id="getLayerTreeKey('resource', item.id)"
-                :key="getLayerTreeKey('resource', item.id)">
+              <a-tree-node v-for="item in resource.elements" :id="getLayerTreeKey('resource', item.id)"
+                :key="getLayerTreeKey('resource', item.id)" :label="'PHOTO'">
+                <template #icon></template>
                 <template #title>
                   {{ item.name }}
                 </template>
@@ -52,7 +49,7 @@
           </a-tree-node>
         </template>
       </a-tree-node>
-    </a-tree>
+    </a-directory-tree>
   </div>
 </template>
 
@@ -74,122 +71,14 @@ const getTreeData = computed(() => {
 </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 {
-    background-color: unset;
-  }
-
-  .anticon {
-    font-size: 16px;
-  }
-
-  // 第一个层级的 li，有左边距 16px
-  >li {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-
-  li {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    &:first-child {
-      padding-top: 4px;
-    }
-
-    &.#{$antPrefix}-tree-treenode-disabled>.#{$antPrefix}-tree-node-content-wrapper {
-      height: 20px;
-
-      span {
-        color: #fff;
-      }
-    }
-
-    >ul {
-      width: 100%;
-    }
-
-    .#{$antPrefix}-tree-switcher {
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .#{$antPrefix}-tree-checkbox {
-      z-index: 1;
-    }
-
-    .#{$antPrefix}-tree-checkbox:hover::after,
-    .#{$antPrefix}-tree-checkbox-wrapper:hover .#{$antPrefix}-tree-checkbox::after {
-      visibility: collapse;
-    }
-
-    .#{$antPrefix}-tree-title {
-      display: block;
-    }
-
-    .#{$antPrefix}-tree-node-content-wrapper {
-      color: #fff;
-      width: calc(100% - 46px);
-      flex: 1;
-      box-sizing: content-box;
-      height: 20px;
-      min-width: 0; // 解决文字溢出不会省略的问题
-      padding-right: 0;
-
-      &:not([draggable='true']) {
-        border-top: 2px transparent solid;
-        border-bottom: 2px transparent solid;
-      }
-
-      &:hover {
-        background-color: transparent;
-      }
-
-      >span {
-        &::before {
-          // position: absolute;
-          // right: 0;
-          // left: 0;
-          height: 28px;
-          transition: all 0.3s;
-          content: '';
-        }
-
-        // 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative
-        >*:not(.progress-wrapper) {
-          position: relative;
-          z-index: 1;
-        }
-      }
-
-      &.#{$antPrefix}-tree-node-selected {
-        background-color: transparent;
-        color: #2d8cf0;
-
-        >span {
-          &::before {
-            background-color: #4f4f4f;
-          }
-        }
-      }
-    }
-  }
-
-  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open .#{$antPrefix}-tree-switcher-icon {
-    transform: rotate(0deg) !important;
+.device-map-layers {
+  span {
+    color: #FFFFFF;
   }
+}
 
-  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close .#{$antPrefix}-tree-switcher-icon {
-    transform: rotate(0deg) !important;
-  }
+.ant-tree.ant-tree-directory>li span.ant-tree-node-content-wrapper:hover::before,
+.ant-tree.ant-tree-directory .ant-tree-child-tree>li span.ant-tree-node-content-wrapper:hover::before {
+  background: #1890ff;
 }
 </style>

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

@@ -6,7 +6,8 @@ export function useGMapTrajectory() {
   let AMap = root.$aMap;
 
   // 绘制轨迹
-  const drawTrajectory = (paths: any[]) => {
+  const drawTrajectory = (list: any[]) => {
+    const paths = list.map(item => item.paths)
     // 绘制起点图标
     const startPosition = paths[0];
     const startIcon = new AMap.Icon({
@@ -28,7 +29,22 @@ export function useGMapTrajectory() {
       strokeWeight: 6,//线宽
       strokeStyle: 'solid',
     })
-    root.$map.add([startMarker, polyline]);
+    // 渲染序号
+    const serialList = list.filter(item => [2, 3].includes(item.type));
+    const text = serialList.map((item, index) => {
+      return new AMap.Text({
+        position: new AMap.LngLat(item.paths[0], item.paths[1]),
+        // offset: new AMap.Pixel(-30, -30),
+        text: index + 1,
+        style: {
+          fontSize: 12,
+          padding: 0,
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+        }
+      })
+    })
+    root.$map.add([startMarker, polyline, ...text]);
     // 自动缩放地图到合适的视野级别
     root.$map.setFitView([startMarker, polyline]);
   }

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

@@ -238,8 +238,7 @@ function selectLayer(keys: string[], e) {
   if (e.selected) {
     selectedKey.value = e.node.eventKey
     selectedLayer.value = getCurrentLayer(selectedKey.value)
-    const info = e.selectedNodes[0];
-    const type = info.props.type;
+    const type = e.node.label;
     if (type === 'DEFAULT') {// 默认文件夹
       setBaseInfo()
       visible.value = true;

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

@@ -163,7 +163,13 @@ const onClickLookTrajectory = async (id: string) => {
   router.push({ path: '/workspace' });
   const res = await apis.fetchTrajectoryMap(id);
   const list = res.data.map((item: any) => {
-    return wgs84togcj02(item.longitude, item.latitude);
+    const data = {
+      ...item,
+      paths: wgs84togcj02(item.longitude, item.latitude),
+    }
+    delete data.latitude;
+    delete data.longitude;
+    return data;
   });
   store.commit('SET_TRAJECTORY_LIST', list)
 }

Web/src/router/index.ts

@@ -101,4 +101,16 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  const { sign, key, userCode } = from.query as any
+  if (sign && key && userCode) {
+    localStorage.setItem('sign', sign);
+    localStorage.setItem('key', key);
+    localStorage.setItem('userCode', userCode);
+    next();
+  } else {
+    next();
+  }
+})
+
 export default router

Web/src/types/mapLayer.ts

@@ -30,35 +30,39 @@ export interface DropEvent {
   dropPosition: number
   dropToGap: boolean
 }
+
 export interface mapLayer {
   key?: string
   title: string
   id: string
   name: string
+  type: number
   style: mapLayerStyle
   elements: any
 }
-export interface elementGroupsReq{
+
+export interface elementGroupsReq {
   groupId: string
   isDistributed: boolean
 }
+
 export interface PostElementsBody {
   id: string
   name: string
   resource: {
-   type: MapElementEnum,
-   user_name?: string,
-   content: {
-    type:string,
-    properties:{
-      color:string,
-      clampToGround:boolean
+    type: MapElementEnum,
+    user_name?: string,
+    content: {
+      type: string,
+      properties: {
+        color: string,
+        clampToGround: boolean
+      },
+      geometry: {
+        type: string,
+        coordinates: unknown
+      }
     },
-    geometry:{
-      type:string,
-      coordinates:unknown
-    }
-   },
   }
 }
 
@@ -74,6 +78,7 @@ export enum GeoType {
   Polygon = 'Polygon',
   Point = 'Point'
 }
+
 export enum ResourceStatus {
   NotShow,
   Show
@@ -83,6 +88,7 @@ export enum LayerElevationLoadStatus {
   Unload,
   Load
 }
+
 export interface PutElementsBody {
   name?: string
   status?: ResourceStatus
@@ -90,9 +96,10 @@ export interface PutElementsBody {
   display?: number
   elevation_load_status?: LayerElevationLoadStatus
 }
+
 export enum LayerType {
   Normal,
   Default,
   Share,
   Reconstruction
-}
+}