From 6fd57f051d2850be68b298430792ec2619a26db1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com> Date: Mon, 20 May 2024 14:57:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E8=A1=A8=E5=8D=95=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E3=80=81=E5=9C=B0=E5=9B=BE=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Hamburger/index.vue | 2 +- src/components/LeftDrawer/index.vue | 5 +- src/main.js | 2 - src/views/system/base/massifForm.vue | 23 +++- src/views/system/base/massifMap.vue | 196 ++++++++++++++++++++++++++- 5 files changed, 214 insertions(+), 14 deletions(-) diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 602fa78..ae57250 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -3,7 +3,7 @@
- +
diff --git a/src/components/LeftDrawer/index.vue b/src/components/LeftDrawer/index.vue index 784d83e..f217762 100644 --- a/src/components/LeftDrawer/index.vue +++ b/src/components/LeftDrawer/index.vue @@ -38,7 +38,9 @@ const close = () => {
@@ -57,6 +59,7 @@ const close = () => { height: calc(100% - 50px); } .close-icon { + z-index: 200; position: fixed; top: 20px; right: 20px; diff --git a/src/main.js b/src/main.js index 8fb9136..860014f 100644 --- a/src/main.js +++ b/src/main.js @@ -55,7 +55,6 @@ import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; // import VueAMapExtra from '@vuemap/vue-amap-extra'; import '@vuemap/vue-amap/dist/style.css' // collapse -import { ElCollapseTransition } from 'element-plus' const app = createApp(App) initAMapApiLoader({ key: '62c3411d6528d67db00ad510a7ee5fb9', @@ -87,7 +86,6 @@ app.component('RightToolbar', RightToolbar) app.component('Editor', Editor) app.component('LeftDrawer', LeftDrawer) app.component('titleDivider', titleDivider) -app.component(ElCollapseTransition.name, ElCollapseTransition) app.use(VueAMap) app.use(router) app.use(store) diff --git a/src/views/system/base/massifForm.vue b/src/views/system/base/massifForm.vue index e9f9c20..f4f47a3 100644 --- a/src/views/system/base/massifForm.vue +++ b/src/views/system/base/massifForm.vue @@ -26,6 +26,8 @@ const selectOptions = reactive({ {label: '其他', value: 9}, ] }) +let emit = defineEmits(['beforeSubmit','submitSuccess']); +const loading = ref(false) const showDrawer = ref(false) const formData = ref({}) const resetForm = (params) => { @@ -35,7 +37,6 @@ const resetForm = (params) => { {}, {}, {}, - {}, ], // 坐标上传方式 coordinateType: 1, @@ -93,6 +94,15 @@ const uploadJson = (file) => { } } } +const saveMassif = () => { + emit('beforeSubmit', formData.value) + loading.value = true + setTimeout(() => { + loading.value = false + emit('submitSuccess') + showDrawer.value = false + },2000) +} defineExpose({ toAdd }) @@ -193,17 +203,17 @@ defineExpose({ - + - + - + @@ -223,8 +233,11 @@ defineExpose({ -
+
diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue index dd1bd6c..710dfd4 100644 --- a/src/views/system/base/massifMap.vue +++ b/src/views/system/base/massifMap.vue @@ -13,8 +13,6 @@ const settingsStore = useSettingsStore() const theme = computed(() => settingsStore.theme) // 显示地块列表 const showMassifList = ref(true) -// 显示地块表单 -const showMassifForm = ref(false) const massifFormRef = ref(null) // 当前地块 const currentMassif = ref(null) @@ -56,9 +54,9 @@ const protract = ref(false) // 显示鼠标绘制 const createdMouse = ref(false) -// 文本标记 +// 文本标记-地块名称 const componentText = ref([]) -// 折线标记 +// 折线标记-网格线 const gridLines = ref([]) // 地块列表 const polygonList = reactive([ @@ -115,6 +113,157 @@ const polygonList = reactive([ fillColor: undefined } ]) +// 垄列表 +const ridgeList = ref([ + { + id:1, + polygonId:1, + title:'测试垄1', + path:[ + [ + 116.337386, + 39.979027 + ], + [ + 116.337395, + 39.978409 + ] + ] + }, + { + id:2, + polygonId:1, + title:'测试垄2', + path:[ + [ + 116.337528, + 39.979023 + ], + [ + 116.337535, + 39.97841 + ] + ] + }, + { + id:3, + polygonId:2, + title:'测试垄3', + path:[ + [ + 116.338439, + 39.978878 + ], + [ + 116.338442, + 39.978705 + ] + ] + }, +]) +// 植株列表 +const plantList = ref([ + { + id:1, + polygonId:1, + title:'001', + path: + [ + 116.337387, + 39.978945 + ] + }, + { + id:2, + polygonId:1, + title:'002', + path: + [ + 116.337388, + 39.978853 + ] + }, + { + id:3, + polygonId:1, + title:'003', + path: + [ + 116.337387, + 39.978761 + ] + }, + { + id:4, + polygonId:1, + title:'004', + path: + [ + 116.33739, + 39.978668 + ] + }, + { + id:5, + polygonId:1, + title:'005', + path: + [ + 116.337395, + 39.978581 + ] + }, + { + id:6, + polygonId:1, + title:'006', + path: + [ + 116.33739, + 39.978492 + ] + }, + { + id:7, + polygonId:1, + title:'007', + path: + [ + 116.337529, + 39.978852 + ] + }, + { + id:8, + polygonId:1, + title:'008', + path: + [ + 116.337531, + 39.978672 + ] + }, + { + id:9, + polygonId:2, + title:'002', + path: + [ + 116.338442, + 39.97879 + ] + }, + { + id:10, + polygonId:2, + title:'003', + path: + [ + 116.338445, + 39.978705 + ] + }, +]) const polygonTemp = ref(null) // 鼠标绘制地块完成 const draw = (value) => { @@ -328,6 +477,7 @@ const toAddMassif = () => { :path="polygonTemp" @addnode="updateMassif" @removenode="updateMassif" + :zooms="[13,20]" @adjust="updateMassif" :visible="true" :editable="true" @@ -336,17 +486,52 @@ const toAddMassif = () => { + :label="{content:comText.text,offset:[-25,0]}">
+ + + + + + +
+ + + +
+
+
@@ -508,6 +693,7 @@ const toAddMassif = () => { //地块列表 .massif-list { + max-height: 650px; .title-icon { padding: 6px 5px 4px 5px; display: inline-block;