Merge remote-tracking branch 'origin/feature/0908'

src/api/layer.ts

@@ -51,3 +51,12 @@ export const deleteLayerEleReq = async (id: string, body: {}): Promise<any> => {
   const result = await request.delete(url, body)
   return result.data
 }
+export const importKmlFile = async function (workspaceId: string, file: {}, id:any): Promise<IWorkspaceResponse<any>> {
+  const url = `${PREFIX}/workspaces/${workspaceId}/elements/file/upload/${id}`
+  const result = await request.post(url, file, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    }
+  })
+  return result.data
+}

src/hooks/use-g-map-wayline.ts

@@ -0,0 +1,20 @@
+import { getRoot } from '/@/root'
+import { GeojsonCoordinate } from '/@/types/map'
+/* 航线定位 */
+export function initPloyline (path:GeojsonCoordinate[]) {
+  const root = getRoot()
+  const AMap = root.$aMap
+  const map = root.$map
+  const polyline = new AMap.Polyline({
+    path: path,
+    strokeWeight: 10, // 线条宽度，默认为 1
+    strokeColor: '#3366bb', // 线条颜色
+    lineJoin: 'round',
+    lineCap: 'round',
+    showDir: true // 折线拐点连接处样式
+  })
+  map.add(polyline)
+  map.setCenter(path[0])
+  map.setZoom(12)
+  return polyline
+}

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

@@ -108,15 +108,18 @@
     </a-drawer>
     <a-modal v-model:visible="importVisible" :closable="false"  :maskClosable="false" class="modal-layer-content">
       <template #title>
-        <div class="model-title">移动到</div>
+        <div class="model-title">导入</div>
       </template>
-      <a-form :model="state" class="form-content">
-        <a-form-item label="文件" style="color:#fff">
+      <a-form :model="state" :rules="rules" class="form-content" ref="fileModalRef">
+        <a-form-item label="文件" style="color:#fff" name="file">
           <a-upload
           accept=".kml"
           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          :file-list="fileList"
-          @change="handleChange"
+          :file-list="state.file"
+          :show-upload-list="true"
+          :before-upload="beforeUpload"
+          :remove="removeFile"
+
           >
             <a-button class="btn-color">
               <upload-outlined></upload-outlined>
@@ -124,14 +127,14 @@
             </a-button>
           </a-upload>
         </a-form-item>
-        <a-form-item label="文件夹" style="color:#fff">
+        <a-form-item label="文件夹" style="color:#fff" name="id">
           <a-tree-select
-          v-model:value="state.file"
+          v-model:value="state.id"
           style="width: 100%"
-          :tree-data="fileTree"
+          :tree-data="mapLayers"
+          :replace-fields="{children:'elements', label:'name', value: 'id' }"
           allow-clear
           placeholder="Please select"
-          tree-node-filter-prop="label"
           />
         </a-form-item>
       </a-form>
@@ -150,13 +153,15 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import {
   deleteElementReq,
   getElementGroupsReq,
-  updateElementsReq
+  updateElementsReq,
+  importKmlFile
 } from '/@/api/layer'
 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 { ELocalStorageKey } from '/@/types'
 import { GeojsonCoordinate, LayerResource } from '/@/types/map'
 import { Color, GeoType } from '/@/types/mapLayer'
 import { generatePoint } from '/@/utils/genjson'
@@ -369,7 +374,6 @@ async function getElementGroups (type?: string) {
     isDistributed: true
   })
   mapLayers.value = result.data
-  console.log('lizhao2', result)
   mapLayers.value = updateWgs84togcj02()
   if (type && type === 'init') {
     store.dispatch('setLayerInfo', mapLayers.value)
@@ -483,63 +487,57 @@ function updateCoordinates (transformType: string, element: LayerResource) {
   }
 }
 /** 导入文件--------------start */
+interface FileItem {
+  uid: string;
+  name?: string;
+  status?: string;
+  response?: string;
+  url?: string;
+}
+const fileModalRef = ref()
+const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || ''
 const importVisible = ref(false)
-const state = reactive({ name: '', file: '' })
-const fileList = ref()
-const fileTree = [
-  {
-    label: 'Node1',
-    value: '0-0',
-    children: [
-      {
-        label: 'Child Node1',
-        value: '0-0-0',
-      },
-    ],
-  },
-  {
-    label: 'Node2',
-    value: '0-1',
-
-    children: [
-      {
-        label: 'Child Node3',
-        value: '0-1-0',
-        disabled: true,
-      },
-      {
-        label: 'Child Node4',
-        value: '0-1-1',
-      },
-      {
-        label: 'Child Node5',
-        value: '0-1-2',
-      },
-    ],
-  },
-]
-
+const state = reactive({ id: '', file: [] })
 // 打开文件导入弹框
 const openFileDialog = () => {
+  state.id = ''
+  state.file = []
   importVisible.value = true
 }
 // 确认导入操作
 const importSubmit = () => {
-
+  fileModalRef.value.validate().then(() => {
+    state.file.forEach(async (file: any) => {
+      const fileData = new FormData()
+      fileData.append('file', file, file.name)
+      await importKmlFile(workspaceId, fileData, state.id).then((res:any) => {
+        importVisible.value = false
+        getElementGroups()
+      })
+    })
+  })
 }
-// const beforeUpload = (file:any) => {
-// //   fileList.value = [file]
-// // }
-const handleChange = (info: any) => {
-  let resFileList = [...info.fileList]
-  resFileList = resFileList.slice(-1)
-  resFileList = resFileList.map(file => {
-    if (file.response) {
-      file.url = file.response.url
+function beforeUpload (file: FileItem) {
+  fileModalRef.value.validate()
+  state.file = [file]
+  return true
+}
+const rules = {
+  id: [{ required: true, message: '请选择文件夹', trigger: 'change' }],
+  file: [
+    {
+      required: true,
+      trigger: 'change',
+      validator: async (rule: any, value: string) => {
+        if (!value.length) {
+          throw new Error('请上传文件')
+        }
+      },
     }
-    return file
-  })
-  fileList.value = resFileList
+  ],
+}
+const removeFile = () => {
+  state.file = []
 }
 
 /** 导入文件--------------end */
@@ -569,6 +567,19 @@ const handleChange = (info: any) => {
     background-color:#3c3c3c !important;
     border:none !important;
   }
+  ::v-deep{
+    .ant-upload-list-item-name{
+      color:#fff;
+    }
+    .anticon-paper-clip,.ant-upload-list-item-card-actions .anticon{
+      color: #fff;
+    }
+    .ant-upload-list-item-info{
+      &:hover{
+        background: #1c1c1c;
+      }
+    }
+  }
 }
 .img-icon{
   cursor: pointer;

src/pages/page-web/projects/wayline.vue

@@ -101,6 +101,7 @@ import { CURRENT_CONFIG } from '/@/api/http/config'
 import { load } from '@amap/amap-jsapi-loader'
 import { getRoot } from '/@/root'
 import { wgs84togcj02 } from '/@/vendors/coordtransform'
+import {initPloyline} from '/@/hooks/use-g-map-wayline.ts'
 import line from '/@/assets/icons/line.svg'
 const lineType = ref(['航点飞行', '航点飞行', '建图航拍', '倾斜摄影', '带状航线'])
 const polyline = ref()
@@ -209,17 +210,7 @@ function selectRoute (wayline: WaylineFile, index:any) {
           item[1]
         )
       })
-      polyline.value = new root.$aMap.Polyline({
-        path: path,
-        strokeWeight: 10, // 线条宽度，默认为 1
-        strokeColor: '#3366bb', // 线条颜色
-        lineJoin: 'round',
-        lineCap: 'round',
-        showDir: true // 折线拐点连接处样式
-      })
-      map.add(polyline.value)
-      map.setCenter(path[0])
-      map.setZoom(12)
+      polyline.value = initPloyline(path)
       store.commit('SET_NEVIGATION_VISIBLE', true)
       const { scheduled_time, line_length, geometry_point_size } = res.data
       store.commit('SET_NEVIGATION_INFO', { scheduled_time, line_length, geometry_point_size })