From 9810566b1ff820cbeddae33778e7ffcd073c5d6b Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Fri, 8 Sep 2023 15:04:48 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=A0=87=E6=B3=A8=E5=AF=BC=E5=85=A5?=
=?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/layer.ts | 9 ++
src/pages/page-web/projects/layer.vue | 129 ++++++++++++++------------
2 files changed, 79 insertions(+), 59 deletions(-)
diff --git a/src/api/layer.ts b/src/api/layer.ts
index 9501201..29ee38b 100644
--- a/src/api/layer.ts
+++ b/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
+}
diff --git a/src/pages/page-web/projects/layer.vue b/src/pages/page-web/projects/layer.vue
index 8110d5c..cecba51 100644
--- a/src/pages/page-web/projects/layer.vue
+++ b/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;
From 2fc47790aa55f6bfea68f7e265434f4ed7c62a7e Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Thu, 14 Sep 2023 15:37:06 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E8=88=AA=E7=BA=BF=E6=96=B9=E6=B3=95?=
=?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/hooks/use-g-map-wayline.ts | 20 ++++++++++++++++++++
src/pages/page-web/projects/wayline.vue | 13 ++-----------
2 files changed, 22 insertions(+), 11 deletions(-)
create mode 100644 src/hooks/use-g-map-wayline.ts
diff --git a/src/hooks/use-g-map-wayline.ts b/src/hooks/use-g-map-wayline.ts
new file mode 100644
index 0000000..27b788f
--- /dev/null
+++ b/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
+}
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index 5aa948a..e0daabd 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/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 })