基地地图完成

src/views/system/base/massifForm.vue

@@ -28,7 +28,12 @@ const selectOptions = reactive({
 })
 let emit = defineEmits(['beforeSubmit','submitSuccess']);
 const loading = ref(false)
+// 显示表单抽屉
 const showDrawer = ref(false)
+const dataLoading = ref(false)
+// 页面状态 1添加 2修改 3查看
+const formStatus = ref(1)
+// 表单数据
 const formData = ref({})
 const resetForm = (params) => {
   formData.value = {
@@ -44,10 +49,19 @@ const resetForm = (params) => {
   }
 }
 const toAdd = (params = {}) => {
+  formStatus.value = 1
   resetForm(deepClone(params))
   uploadJsonData.value = []
   showDrawer.value = true
 }
+const toUpdate = (row) => {
+  formStatus.value = 2
+  showDrawer.value = true
+}
+const toView = (row) => {
+  formStatus.value = 3
+  showDrawer.value = true
+}
 // 计算地块面积(亩)
 const calculateArea = () => {
   let value = [];
@@ -104,7 +118,9 @@ const saveMassif = () => {
   },2000)
 }
 defineExpose({
-  toAdd
+  toAdd,
+  toUpdate,
+  toView
 })
 </script>
 
@@ -112,39 +128,44 @@ defineExpose({
   <div>
     <left-drawer v-model="showDrawer" width="40%">
       <div class="title">
-        新增地块
+        <div v-if="formStatus === 1">新增地块</div>
+        <div v-if="formStatus === 2">编辑地块</div>
+        <div v-if="formStatus === 3">地块详情</div>
       </div>
       <div class="form">
-        <el-form v-model="formData" label-position="top">
+        <el-form v-model="formData" :label-position="formStatus===3?'left':'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 placeholder="请输入地块名称"></el-input>
+                <el-input placeholder="请输入地块名称" v-if="formStatus!==3"></el-input>
+                <div v-else>{{formData.name}}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-tooltip
                   content="点击[亩]字可以自动计算坐标点面积"
                   placement="top"
+                  :disabled="formStatus===3"
               >
               <el-form-item label="地块面积" prop="name">
-                <el-input v-model="formData.area">
+                <el-input v-model="formData.area" v-if="formStatus!==3">
                   <template #append><el-button @click="calculateArea">亩</el-button></template>
                 </el-input>
+                <div v-if="formStatus===3">{{formData.area}}亩</div>
               </el-form-item>
               </el-tooltip>
             </el-col>
             <el-col :span="12">
               <el-form-item label="所属基地/资源圃" prop="name">
-                <el-input disabled></el-input>
+                <el-input disabled v-if="formStatus!==3"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="地块性质" prop="name">
-                <el-select placeholder="请选择地块性质" clearable>
+                <el-select placeholder="请选择地块性质" clearable v-if="formStatus!==3">
                   <el-option v-for="item in selectOptions.massifType" :key="item.value" :label="item.label"
                              :value="item.value"></el-option>
                 </el-select>
@@ -152,7 +173,7 @@ defineExpose({
             </el-col>
             <el-col :span="12">
               <el-form-item label="当前作物" prop="name">
-                <el-select placeholder="请选择当前作物" clearable multiple>
+                <el-select placeholder="请选择当前作物" clearable multiple v-if="formStatus!==3">
                   <el-option v-for="item in selectOptions.cropClass" :key="item.value" :label="item.label"
                              :value="item.value"></el-option>
                 </el-select>
@@ -160,18 +181,18 @@ defineExpose({
             </el-col>
             <el-col :span="12">
               <el-form-item label="当前状态" prop="name">
-                <el-switch></el-switch>
+                <el-switch v-if="formStatus!==3"></el-switch>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="备注" prop="name">
-                <el-input placeholder="请输入备注"></el-input>
+                <el-input placeholder="请输入备注" v-if="formStatus!==3"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <title-divider title="坐标信息" style="margin-top: 10px"/>
             </el-col>
-            <el-col :span="24">
+            <el-col :span="24" v-if="formStatus!==3">
               <el-row>
                 <el-col :span="16">
                   坐标上传方式
@@ -200,7 +221,7 @@ defineExpose({
                 </el-col>
               </el-row>
             </el-col>
-            <el-col v-if="formData.coordinateType === 1" :span="24" v-for="(item,index) in formData.coordinateList"
+            <el-col v-if="formData.coordinateType === 1 &&  formStatus!==3" :span="24" v-for="(item,index) in formData.coordinateList"
                     :key="index" style="margin-top: 10px">
               <el-row :gutter="10">
                 <el-col :span="11">
@@ -220,7 +241,7 @@ defineExpose({
                 </el-col>
               </el-row>
             </el-col>
-            <el-col :span="24" v-if="formData.coordinateType === 2">
+            <el-col :span="24" v-if="formData.coordinateType === 2 || formStatus===3">
               <el-table :data="uploadJsonData" border style="margin-top: 10px">
                 <el-table-column prop="name" label="坐标序号" width="100" align="center">
                   <template #default="scope">
@@ -235,7 +256,7 @@ defineExpose({
         </el-form>
       </div>
       <template #footer>
-        <el-button type="primary" :loading="loading" @click="saveMassif">保存</el-button>
+        <el-button v-if="formStatus!==3" type="primary" :loading="loading" @click="saveMassif">保存</el-button>
         <el-button @click="showDrawer = false">取消</el-button>
       </template>
     </left-drawer>

src/views/system/base/massifMap.vue

@@ -108,7 +108,7 @@ const polygonList = reactive([
     ],
     fillColor: undefined
   },
-    {
+  {
     id: 3,
     title: '测试地块1',
     cropType: '甘蔗',
@@ -164,10 +164,10 @@ const polygonList = reactive([
 // 垄列表
 const ridgeList = ref([
   {
-    id:1,
-    polygonId:1,
-    title:'测试垄1',
-    path:[
+    id: 1,
+    polygonId: 1,
+    title: '测试垄1',
+    path: [
       [
         116.337386,
         39.979027
@@ -179,10 +179,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:2,
-    polygonId:1,
-    title:'测试垄2',
-    path:[
+    id: 2,
+    polygonId: 1,
+    title: '测试垄2',
+    path: [
       [
         116.337528,
         39.979023
@@ -194,10 +194,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:3,
-    polygonId:2,
-    title:'测试垄3',
-    path:[
+    id: 3,
+    polygonId: 2,
+    title: '测试垄3',
+    path: [
       [
         116.338439,
         39.978878
@@ -209,10 +209,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:1,
-    polygonId:1,
-    title:'垄1',
-    path:[
+    id: 1,
+    polygonId: 1,
+    title: '垄1',
+    path: [
       [
         107.585681,
         22.481152
@@ -224,10 +224,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:2,
-    polygonId:1,
-    title:'垄28',
-    path:[
+    id: 2,
+    polygonId: 1,
+    title: '垄28',
+    path: [
       [
         107.585536,
         22.481152
@@ -239,10 +239,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:3,
-    polygonId:2,
-    title:'垄1',
-    path:[
+    id: 3,
+    polygonId: 2,
+    title: '垄1',
+    path: [
       [
         107.585526,
         22.481149
@@ -254,10 +254,10 @@ const ridgeList = ref([
     ]
   },
   {
-    id:3,
-    polygonId:2,
-    title:'垄43',
-    path:[
+    id: 3,
+    polygonId: 2,
+    title: '垄43',
+    path: [
       [
         107.585274,
         22.481137
@@ -272,9 +272,9 @@ const ridgeList = ref([
 // 植株列表
 const plantList = ref([
   {
-    id:1,
-    polygonId:1,
-    title:'001',
+    id: 1,
+    polygonId: 1,
+    title: '001',
     path:
         [
           116.337387,
@@ -282,9 +282,9 @@ const plantList = ref([
         ]
   },
   {
-    id:2,
-    polygonId:1,
-    title:'002',
+    id: 2,
+    polygonId: 1,
+    title: '002',
     path:
         [
           116.337388,
@@ -292,9 +292,9 @@ const plantList = ref([
         ]
   },
   {
-    id:3,
-    polygonId:1,
-    title:'003',
+    id: 3,
+    polygonId: 1,
+    title: '003',
     path:
         [
           116.337387,
@@ -302,9 +302,9 @@ const plantList = ref([
         ]
   },
   {
-    id:4,
-    polygonId:1,
-    title:'004',
+    id: 4,
+    polygonId: 1,
+    title: '004',
     path:
         [
           116.33739,
@@ -312,9 +312,9 @@ const plantList = ref([
         ]
   },
   {
-    id:5,
-    polygonId:1,
-    title:'005',
+    id: 5,
+    polygonId: 1,
+    title: '005',
     path:
         [
           116.337395,
@@ -322,9 +322,9 @@ const plantList = ref([
         ]
   },
   {
-    id:6,
-    polygonId:1,
-    title:'006',
+    id: 6,
+    polygonId: 1,
+    title: '006',
     path:
         [
           116.33739,
@@ -332,9 +332,9 @@ const plantList = ref([
         ]
   },
   {
-    id:7,
-    polygonId:1,
-    title:'007',
+    id: 7,
+    polygonId: 1,
+    title: '007',
     path:
         [
           116.337529,
@@ -342,9 +342,9 @@ const plantList = ref([
         ]
   },
   {
-    id:8,
-    polygonId:1,
-    title:'008',
+    id: 8,
+    polygonId: 1,
+    title: '008',
     path:
         [
           116.337531,
@@ -352,9 +352,9 @@ const plantList = ref([
         ]
   },
   {
-    id:9,
-    polygonId:2,
-    title:'002',
+    id: 9,
+    polygonId: 2,
+    title: '002',
     path:
         [
           116.338442,
@@ -362,9 +362,9 @@ const plantList = ref([
         ]
   },
   {
-    id:10,
-    polygonId:2,
-    title:'003',
+    id: 10,
+    polygonId: 2,
+    title: '003',
     path:
         [
           116.338445,
@@ -516,7 +516,7 @@ const clickCurrentMassif = (item) => {
   center.value = turf.center(points).geometry.coordinates
 }
 // 删除地块
-const delMassif = (item,index) => {
+const delMassif = (item, index) => {
   ElMessageBox.confirm(
       '地块删除后，将无法被找回，是否人要删除该地块？',
       '删除地块',
@@ -525,19 +525,25 @@ const delMassif = (item,index) => {
         cancelButtonText: '不，我再想想',
         customClass: 'message-box'
       }
-  ).then(()=>{
-    polygonList.splice(index,1)
+  ).then(() => {
+    polygonList.splice(index, 1)
     ElMessage.success(`${item.label || '地块'}删除成功`)
   })
 }
-const updMassifStatus = (item,enabled) => {
+const updMassifStatus = (item, enabled) => {
   item.enabled = enabled
-  ElMessage.success(`${item.title || '地块'}状态已更新为${enabled?'启用':'禁用'}`)
+  ElMessage.success(`${item.title || '地块'}状态已更新为${enabled ? '启用' : '禁用'}`)
 }
 // 打开添加弹窗
 const toAddMassif = () => {
   massifFormRef.value.toAdd()
 }
+const toUpdateMassif = (row) => {
+  massifFormRef.value.toUpdate(row)
+}
+const toViewMassif = (row) => {
+  massifFormRef.value.toView(row)
+}
 </script>
 
 <template>
@@ -634,7 +640,8 @@ const toAddMassif = () => {
           :visible="true"
           :zooms="[16,20]"
           :label="{content:`<span style='color: #a4e36e'>${plant.title}</span>`,offset:[0,0]}">
-        <div v-if="control.showPlant" style="border-radius: 50%;height: 15px;width: 15px" :style="{background:'#a4e36e'}"></div>
+        <div v-if="control.showPlant" style="border-radius: 50%;height: 15px;width: 15px"
+             :style="{background:'#a4e36e'}"></div>
         <div v-else></div>
       </el-amap-marker>
       <div class="top-block">
@@ -649,7 +656,8 @@ const toAddMassif = () => {
             <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"/>
+                  新增地块
+                  <i-down theme="outline" size="20" :fill="theme"/>
                 </el-button>
               </template>
               <div>
@@ -701,17 +709,17 @@ const toAddMassif = () => {
                             <i-more theme="outline" size="24" fill="#5c5e5d"/>
                           </template>
                           <div>
-                            <div class="more-item">
+                            <div class="more-item" @click="toViewMassif(item)">
                               地块详情
                             </div>
-                            <div class="more-item">
+                            <div class="more-item" @click="toUpdateMassif(item)">
                               编辑地块
                             </div>
                             <div class="more-item" @click="delMassif(item,index)">
                               删除地块
                             </div>
                             <div class="more-item" @click="updMassifStatus(item,!item.enabled)">
-                              {{ item.enabled?'禁用':'启用' }}地块
+                              {{ item.enabled ? '禁用' : '启用' }}地块
                             </div>
                           </div>
                         </el-popover>
@@ -799,6 +807,8 @@ const toAddMassif = () => {
   //地块列表
   .massif-list {
     max-height: 650px;
+    overflow: auto;
+
     .title-icon {
       padding: 6px 5px 4px 5px;
       display: inline-block;
@@ -825,7 +835,6 @@ const toAddMassif = () => {
       border-radius: 5px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       padding: 10px;
-      margin: 0 -5px;
 
       .massif-item-right {
         display: flex;
@@ -861,16 +870,19 @@ const toAddMassif = () => {
   background: none;
   color: #FFFFFF;
 }
+
 .more-item {
   text-align: center;
   //鼠标悬浮变成点击
   cursor: pointer;
   padding: 5px 0;
+
   &:hover {
     background-color: var(--el-color-primary-light-9);
     color: var(--el-color-primary);
   }
 }
+
 //绘制操作区
 .protract-control {
   position: absolute;
@@ -879,18 +891,21 @@ const toAddMassif = () => {
 }
 </style>
 <style lang="scss">
-.el-popover.el-popper{
+.el-popover.el-popper {
   min-width: 100px;
   padding: 5px;
 }
+
 //修改确认弹窗样式
 .message-box {
   --el-messagebox-width: 450px;
   padding: 20px;
-  .el-message-box__message{
+
+  .el-message-box__message {
     text-align: center;
     width: 100%;
   }
+
   .el-message-box__btns {
     justify-content: center;
   }