From 51a9f4dd591b6ad567a47fa6b436eed114647ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Fri, 17 May 2024 17:51:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss      |  3 +
 src/components/baseSelection/index.vue | 11 ++++
 src/views/system/base/massifForm.vue   | 77 ++++++++++++++++++++++++++
 src/views/system/base/massifMap.vue    | 29 +++++++++-
 4 files changed, 117 insertions(+), 3 deletions(-)
 create mode 100644 src/components/baseSelection/index.vue
 create mode 100644 src/views/system/base/massifForm.vue

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index bb5414d..2aaea96 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -93,4 +93,7 @@
 
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
+}
+.el-form-item--default{
+  margin-bottom: 5px;
 }
\ No newline at end of file
diff --git a/src/components/baseSelection/index.vue b/src/components/baseSelection/index.vue
new file mode 100644
index 0000000..0f9effd
--- /dev/null
+++ b/src/components/baseSelection/index.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/base/massifForm.vue b/src/views/system/base/massifForm.vue
new file mode 100644
index 0000000..5d6cbcc
--- /dev/null
+++ b/src/views/system/base/massifForm.vue
@@ -0,0 +1,77 @@
+<script setup>
+
+import LeftDrawer from "@/components/LeftDrawer/index.vue";
+import TitleDivider from "@/components/titleDivider/index.vue";
+import {deepClone} from "@/utils/index.js";
+const props = defineProps({})
+const showDrawer = ref(false)
+const formData = ref({})
+const toAdd = (params = {}) => {
+  formData.value = deepClone(params)
+  showDrawer.value = true
+}
+defineExpose({
+  toAdd
+})
+</script>
+
+<template>
+<div>
+  <left-drawer v-model="showDrawer" width="40%">
+    <div class="title">
+      新增地块
+    </div>
+    <div class="form">
+      <el-form v-model="formData" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="24"><title-divider title="基本信息"/></el-col>
+          <el-col :span="12">
+            <el-form-item label="地块名称" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地块面积" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属基地/资源圃" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地块性质" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="当前作物" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="当前状态" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="name">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24"><title-divider title="坐标信息" style="margin-top: 20px"/></el-col>
+        </el-row>
+      </el-form>
+
+    </div>
+  </left-drawer>
+</div>
+</template>
+
+<style scoped lang="scss">
+.title{
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue
index 90b748c..d7ea00b 100644
--- a/src/views/system/base/massifMap.vue
+++ b/src/views/system/base/massifMap.vue
@@ -6,12 +6,16 @@ import {areaConversion, calculateCenter, drawGridLines} from "@/utils/ruoyi.js";
 import {ElMessage, ElMessageBox} from "element-plus";
 import useSettingsStore from "@/store/modules/settings.js";
 import * as turf from '@turf/turf'
+import MassifForm from "@/views/system/base/massifForm.vue";
 
 const polygonRef = ref(null)
 const settingsStore = useSettingsStore()
 const theme = computed(() => settingsStore.theme)
 // 显示地块列表
 const showMassifList = ref(true)
+// 显示地块表单
+const showMassifForm = ref(false)
+const massifFormRef = ref(null)
 // 当前地块
 const currentMassif = ref(null)
 const router = useRouter()
@@ -272,6 +276,10 @@ const updMassifStatus = (item,enabled) => {
   item.enabled = enabled
   ElMessage.success(`${item.title || '地块'}状态已更新为${enabled?'启用':'禁用'}`)
 }
+// 打开添加弹窗
+const toAddMassif = () => {
+  massifFormRef.value.toAdd()
+}
 </script>
 
 <template>
@@ -347,9 +355,22 @@ const updMassifStatus = (item,enabled) => {
             <div class="all-area">{{ baseInfo.area }}亩</div>
           </div>
           <div class="massif-control">
-            <el-button @click="addMassif" type="primary" plain icon="Plus">
-              添加地块
-            </el-button>
+            <el-popover placement="bottom" :width="70" trigger="hover">
+              <template #reference>
+                <el-button type="primary" plain icon="Plus">
+                  新增地块<i-down theme="outline" size="20" :fill="theme"/>
+                </el-button>
+              </template>
+              <div>
+                <div class="more-item" @click="toAddMassif">
+                  添加坐标点
+                </div>
+                <div class="more-item" @click="addMassif">
+                  绘制地块
+                </div>
+              </div>
+            </el-popover>
+
             <div class="show-massif" @click="showMassifList = !showMassifList">
               {{ showMassifList ? '收起' : '展开' }}地块
               <i-down v-if="!showMassifList" theme="outline" size="20" fill="#5c5e5d"/>
@@ -420,6 +441,8 @@ const updMassifStatus = (item,enabled) => {
         </div>
       </div>
     </el-amap>
+    <!--地块表单-->
+    <massif-form v-model="showMassifForm" ref="massifFormRef"/>
   </div>
 </template>