地块左侧地块列表完成

5 months ago · 9f85f98957
parent 1a624e005e
commit 9f85f98957
2 changed files with 231 additions and 60 deletions
--- a/src/main.js
+++ b/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)
--- a/src/views/system/base/massifMap.vue
+++ b/src/views/system/base/massifMap.vue
@ -6,10 +6,23 @@ 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,
@ -28,8 +41,6 @@ const control = reactive({
 })
 // 鼠标工具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,6 +59,7 @@ const polygonList = reactive([
  {
    id: 1,
    title: '测试地块1',
+    cropType: '甘蔗',
    path: [
      [
        116.337325,
@ -71,11 +82,12 @@ const polygonList = reactive([
        39.97906
      ]
    ],
-    fillColor:'#09a882'
+    fillColor: undefined
  },
  {
    id: 2,
    title: '测试地块2',
+    cropType: '甘蔗',
    path: [
      [
        116.338296,
@ -93,7 +105,8 @@ const polygonList = reactive([
        116.33859,
        39.978905
      ]
-    ]
+    ],
+    fillColor:undefined
  }
 ])
 const polygonTemp = ref(null)
@ -186,6 +199,7 @@ const submitMassif = () => {
 }
 watch(() => polygonList, (value) => {
  componentText.value = []
+  let sumArea = 0
  value.forEach(item => {
    let points = turf.points(item.path);
    // 格式化标签位置
@ -202,8 +216,29 @@ watch(()=>polygonList,(value)=>{
      newList.push(...item)
    })
    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})
+// 点击当前地块
+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,34 +383,115 @@ watch(()=>polygonList,(value)=>{
    pointer-events: all;
  }
 }
+
 //地图左侧操作区
 .map-left {
  background: #FFFFFF;
  width: 350px;
  border-radius: 5px;
-  padding: 10px;
+  padding: 15px;
  position: absolute;
  left: 10px;
  top: 20px;
  //透明度
  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;
-  top: 10px;
+  right: 30px;
+  top: 50px;
 }
 </style>
 <style lang="scss">
@ -333,9 +499,11 @@ watch(()=>polygonList,(value)=>{
 .message-box {
  --el-messagebox-width: 450px;
  padding: 20px;
+
  .el-message-box__btns {
    justify-content: center;
  }
+
  .el-button {
    border-radius: 20px;
  }