地块左侧地块列表完成

src/main.js

@@ -5,7 +5,8 @@ import Cookies from 'js-cookie'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
-
+// fade/zoom
+import 'element-plus/theme-chalk/base.css'
 import '@/assets/styles/index.scss' // global css
 // iconpark样式
 import {install} from '@icon-park/vue-next/es/all';
@@ -52,6 +53,8 @@ import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
 // import VueAMapLoca from '@vuemap/vue-amap-loca';
 // 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',
@@ -82,7 +85,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('LeftDrawer', LeftDrawer)
-
+app.component(ElCollapseTransition.name, ElCollapseTransition)
 app.use(VueAMap)
 app.use(router)
 app.use(store)

src/views/system/base/massifMap.vue

@@ -6,30 +6,41 @@ 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'
+
 const polygonRef = ref(null)
 const settingsStore = useSettingsStore()
+const theme = computed(()=>settingsStore.theme)
+// 显示地块列表
+const showMassifList = ref(true)
 // 当前地块
 const currentMassif = ref(null)
+const router = useRouter()
+const route = useRoute();
+// 基地id
+const baseId = Number(route.params.baseId)
+const baseInfo = ref({
+  baseId: baseId,
+  baseName: '测试基地1',
+  area: 1232.45
+})
 const control = reactive({
-    // 地图类型
+  // 地图类型
-    dataType: 1,
+  dataType: 1,
-    // 显示地块标签
+  // 显示地块标签
-    massifLabel: true,
+  massifLabel: true,
-    // 显示网格地块
+  // 显示网格地块
-    massifGrid: false,
+  massifGrid: false,
-    // 显示垄
+  // 显示垄
-    showRidge: false,
+  showRidge: false,
-    // 显示垄标签
+  // 显示垄标签
-    ridgeLabel: false,
+  ridgeLabel: false,
-    // 显示植株
+  // 显示植株
-    showPlant: false,
+  showPlant: false,
-    // 显示植株标签
+  // 显示植株标签
-    plantLabel: false,
+  plantLabel: false,
 })
 // 鼠标工具ref
 const mouseToolRef = ref(null)
-const router = useRouter()
-const route = useRoute();
 // 绘制面积(亩)
 const floorSpace = ref(0)
 const maxHeight = ref(window.innerHeight - 100);
@@ -38,8 +49,7 @@ const zoom = ref(17);
 const protract = ref(false)
 // 显示鼠标绘制
 const createdMouse = ref(false)
-// 基地id
+
-const baseId = Number(route.params.baseId)
 // 文本标记
 const componentText = ref([])
 // 折线标记
@@ -49,7 +59,8 @@ const polygonList = reactive([
   {
     id: 1,
     title: '测试地块1',
-    path:[
+    cropType: '甘蔗',
+    path: [
       [
         116.337325,
         39.979046
@@ -71,12 +82,13 @@ const polygonList = reactive([
         39.97906
       ]
     ],
-    fillColor:'#09a882'
+    fillColor: undefined
   },
   {
-    id:2,
+    id: 2,
-    title:'测试地块2',
+    title: '测试地块2',
-    path:[
+    cropType: '甘蔗',
+    path: [
       [
         116.338296,
         39.978921
@@ -93,7 +105,8 @@ const polygonList = reactive([
         116.33859,
         39.978905
       ]
-    ]
+    ],
+    fillColor:undefined
   }
 ])
 const polygonTemp = ref(null)
@@ -118,7 +131,7 @@ const computeArea = (value) => {
 // 修改多边形事件
 const updateMassif = (value) => {
   // 获取多边形路径
-  let newPath = polygonRef.value.$$getInstance().getPath().map(item =>item.toArray())
+  let newPath = polygonRef.value.$$getInstance().getPath().map(item => item.toArray())
   polygonTemp.value = newPath
   computeArea(newPath)
 }
@@ -151,11 +164,11 @@ const resetMassif = () => {
       {
         confirmButtonText: '确认重置',
         cancelButtonText: '不，我再想想',
-        customClass:'message-box'
+        customClass: 'message-box'
       }
   )
       .then(() => {
-        if (mouseToolRef.value){
+        if (mouseToolRef.value) {
           mouseToolRef.value.$$close(true)
           mouseToolRef.value.$$open()
         }
@@ -167,43 +180,65 @@ const resetMassif = () => {
 // 点击确定完成绘制
 const submitMassif = () => {
   lazyAMapApiLoaderInstance.then(() => {
-    if (polygonTemp.value.length<3){
+    if (polygonTemp.value.length < 3) {
       ElMessage.error('地块至少需要三个点')
       return
     }
     for (let item of polygonList) {
-      if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(item.path,polygonTemp.value)){
+      if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(item.path, polygonTemp.value)) {
         ElMessage.error('当前地块与已有地块边界重合,请修改后再确认')
         return
       }
     }
-    polygonList.push({path:polygonTemp.value,edit:false})
+    polygonList.push({path: polygonTemp.value, edit: false})
     polygonTemp.value = undefined
     createdMouse.value = false
     protract.value = false
   })
 
 }
-watch(()=>polygonList,(value)=>{
+watch(() => polygonList, (value) => {
   componentText.value = []
-    value.forEach(item=>{
+  let sumArea = 0
-      let points = turf.points(item.path);
+  value.forEach(item => {
-      // 格式化标签位置
+    let points = turf.points(item.path);
-      componentText.value.push({text:item.title,position:turf.center(points).geometry.coordinates})
+    // 格式化标签位置
-      // 格式化网格线显示
+    componentText.value.push({text: item.title, position: turf.center(points).geometry.coordinates})
-      // gridLines.value.push(drawGridLines(item.path))
+    // 格式化网格线显示
-      var bbox = turf.bbox(turf.lineString(item.path));
+    // gridLines.value.push(drawGridLines(item.path))
-      // 网格密度 km
+    var bbox = turf.bbox(turf.lineString(item.path));
-      var cellSide = 0.01;
+    // 网格密度 km
-      var options = {units: 'kilometers'};
+    var cellSide = 0.01;
-      var squareGrid = turf.squareGrid(bbox, cellSide, options);
+    var options = {units: 'kilometers'};
-      let newList = []
+    var squareGrid = turf.squareGrid(bbox, cellSide, options);
-      squareGrid.features.map(item => item.geometry.coordinates).forEach(item =>{
+    let newList = []
-        newList.push(...item)
+    squareGrid.features.map(item => item.geometry.coordinates).forEach(item => {
-      })
+      newList.push(...item)
-      gridLines.value.push(newList)
+    })
+    gridLines.value.push(newList)
+    //   计算基地全部地块面积
+    lazyAMapApiLoaderInstance.then(() => {
+      // 算出平米
+      let number = Math.round(AMap.GeometryUtil.ringArea(item.path));
+      let number1 = areaConversion(number);
+      item.area = parseFloat(number1.toFixed(2))
+      // 算出亩
+      sumArea += number1
+      baseInfo.value.area = parseFloat(sumArea.toFixed(2))
     })
-},{deep:true,immediate:true})
+  })
+}, {deep: true, immediate: true})
+// 点击当前地块
+const clickCurrentMassif = (item) => {
+  currentMassif.value = item
+  let points = turf.points(item.path);
+  polygonList.forEach(polygon =>{
+    polygon.fillColor = '#00B2D5'
+  })
+  item.fillColor = theme.value
+  // 点击的中心点
+   center.value = turf.center(points).geometry.coordinates
+}
 </script>
 
 <template>
@@ -241,6 +276,7 @@ watch(()=>polygonList,(value)=>{
           :visible="true"
           :fillColor="polygon.fillColor"
           :editable="false"
+          @mousedown="clickCurrentMassif(polygon)"
       />
       <!--多边形-->
       <el-amap-polygon
@@ -272,7 +308,56 @@ watch(()=>polygonList,(value)=>{
         <base-right-control v-if="!protract" v-model="control"/>
         <!--左侧操作区-->
         <div v-if="!protract" class="operate map-left">
-          <el-button @click="addMassif">添加地块</el-button>
+          <div class="massif-head">
+            <div class="title">{{ baseInfo.baseName }}</div>
+            <div class="all-area">{{ baseInfo.area }}亩</div>
+          </div>
+          <div class="massif-control">
+            <el-button @click="addMassif" type="primary" plain icon="Plus">
+              添加地块
+            </el-button>
+            <div class="show-massif" @click="showMassifList = !showMassifList">
+              {{ showMassifList ? '收起' : '展开' }}地块
+              <i-down v-if="!showMassifList" theme="outline" size="20" fill="#5c5e5d"/>
+              <i-up v-if="showMassifList" theme="outline" size="20" fill="#5c5e5d"/>
+            </div>
+          </div>
+          <el-collapse-transition>
+            <div class="massif-list" v-show="showMassifList">
+              <div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}" v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
+                <el-row>
+                  <el-col :span="12">
+                    <div class="title">
+                      <div class="title-icon" :style="{background:theme}">
+                        <i-more-app theme="outline" size="24" fill="#FFFFFF"/>
+                      </div>
+                      <div class="title-text">
+                        {{ item.title || '' }}
+                        <div class="crop">
+                          {{ item.cropType || '' }}
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="massif-item-right">
+                      <div class="area">
+                        {{ item.area || 0 }}亩
+                      </div>
+                      |
+                      <div class="enabled">
+                        {{ item.enabled ? '启用' : '禁用' }}
+                      </div>
+                      <div class="more">
+                        <i-more theme="outline" size="24" fill="#5c5e5d"/>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+
+          </el-collapse-transition>
         </div>
         <!--绘制操作区-->
         <div v-if="protract" class="protract-control operate">
@@ -298,45 +383,128 @@ watch(()=>polygonList,(value)=>{
     pointer-events: all;
   }
 }
+
 //地图左侧操作区
-.map-left{
+.map-left {
   background: #FFFFFF;
   width: 350px;
   border-radius: 5px;
-  padding: 10px;
+  padding: 15px;
   position: absolute;
   left: 10px;
   top: 20px;
   //透明度
-  opacity:0.9;
+  opacity: 0.9;
+
+  .massif-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .all-area {
+      font-size: 14px;
+      color: #5c5e5d;
+    }
+  }
+
+  .massif-control {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+
+    .show-massif {
+      font-size: 14px;
+      align-items: center;
+      color: #5c5e5d;
+      display: flex;
+      //鼠标悬浮变成点击
+      cursor: pointer;
+    }
+  }
+
+  //地块列表
+  .massif-list {
+    .title-icon {
+      padding: 6px 5px 4px 5px;
+      display: inline-block;
+      border-radius: 5px;
+      float: left;
+    }
+    .title-text{
+      margin-left: 10px;
+      float: left;
+      font-size: 16px;
+      .crop{
+        font-size: 12px;
+        margin-top: 2px;
+      }
+    }
+    .massif-item-click{
+      border: 1px solid v-bind(theme) !important;
+    }
+    .massif-item {
+      border-radius: 5px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 10px;
+      margin: 0 -5px;
+      .massif-item-right{
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-size: 14px;
+        color: #5c5e5d;
+        div{
+          margin: 0 3px;
+        }
+        .more{
+          //鼠标悬浮变成点击
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
+
 //点标记图标样式
 .local-icon {
   width: 30px;
   height: 30px;
 }
+
 //灵活点标记样式
 :deep(.amap-marker-label) {
   border: none;
   border-radius: 5px;
-  padding: 5px 10px;
+  //padding: 5px 10px;
+  background: none;
+  color: #FFFFFF;
 }
+
 //绘制操作区
 .protract-control {
   position: absolute;
-  right: 20px;
+  right: 30px;
-  top: 10px;
+  top: 50px;
 }
 </style>
 <style lang="scss">
 //修改确认弹窗样式
-.message-box{
+.message-box {
   --el-messagebox-width: 450px;
   padding: 20px;
-  .el-message-box__btns{
+
+  .el-message-box__btns {
     justify-content: center;
   }
-  .el-button{
+
+  .el-button {
     border-radius: 20px;
   }
 }