增加表单

src/assets/styles/element-ui.scss

@@ -94,3 +94,6 @@
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
 }
+.el-form-item--default{
+  margin-bottom: 5px;
+}

src/components/baseSelection/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

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>

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-popover placement="bottom" :width="70" trigger="hover">
-              添加地块
+              <template #reference>
-            </el-button>
+                <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>