土地资源布局调整

.eslintrc.js

@@ -48,7 +48,8 @@ module.exports = {
     'camelcase': [0, {
       'properties': 'always'
     }],
-    'comma-dangle': [1, 'off'],
+    // 'comma-dangle': [1, 'off'],
+    "comma-dangle": ["error", "never"],
     'comma-spacing': [2, {
       'before': false,
       'after': true

src/views/dataV/layOutLand.vue

@@ -22,35 +22,31 @@
     <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftTop">
       <div class="title">{{ title[0] }}</div>
       <div class="content">
-        <slot name="five" />
+        <slot name="one" />
       </div>
     </div>
     <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftCenter">
       <div class="title">{{ title[1] }}</div>
       <div class="content">
-        <slot name="five" />
+        <slot name="two" />
       </div>
     </div>
     <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftBottom">
       <div class="title">{{ title[2] }}</div>
       <div class="content">
-        <slot name="four" />
+        <slot name="three" />
       </div>
     </div>
-    <div class="boxTop" />
-    <div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
-      <slot name="one" />
-    </div>
     <div class="boxRightTop">
       <div class="title">{{ title[3] }}</div>
       <div class="content">
-        <slot name="two" />
+        <slot name="four" />
       </div>
     </div>
     <div class="boxRightCenter">
       <div class="title">{{ title[4] }}</div>
       <div class="content">
-        <slot name="three" />
+        <slot name="five" />
       </div>
     </div>
     <div class="boxRightBottom">
@@ -59,11 +55,6 @@
         <slot name="six" />
       </div>
     </div>
-    <div v-if="type == 'pageFive' || type == 'pageFour'" class="left">
-      <div class="content">
-        <slot name="seven" />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -110,11 +101,13 @@ export default {
       });
       this.checkedlist = val ? list : [];
       this.isIndeterminate = false;
+      this.upLayersIds(this.checkedlist)
     },
     doSingleChange(value) {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.options.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
+      this.upLayersIds(this.checkedlist)
     },
   },
 };

src/views/dataV/mapland.js

@@ -132,9 +132,12 @@ const mapMixinLand = {
           devicePointList.push(marker);
         }
       });
-       this.map.add(new this.AMap.OverlayGroup(devicePointList));
+      this.map.add(new this.AMap.OverlayGroup(devicePointList));
       this.loading = false;
     },
+    upLayersIds(ids) {
+     console.info('upLayersIds**********',ids)
+    },
     /** 获取地块中心点 */
     getAreaCenter(location) {
       var total = location.length;

src/views/dataV/pageLand/index.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="industrialBase">
     <layOutLand :baseId="baseId" :title="title">
+      <template v-slot:one>
+       <land-area-total :baseId="baseId"></land-area-total>
+      </template>
       <template v-slot:two>
-        <land-type-compose :baseId="baseId"></land-type-compose>
+        <land-resource-pro :baseId="baseId"></land-resource-pro>
       </template>
       <template v-slot:three>
-        <land-type-distribution :baseId="baseId"></land-type-distribution>
+         <landProbenefit :baseId="baseId"></landProbenefit>
       </template>
       <template v-slot:four>
-        <land-area-total :baseId="baseId"></land-area-total>
+        <land-type-compose :baseId="baseId"></land-type-compose>
       </template>
       <template v-slot:five>
-        <plant-area :baseId="baseId"></plant-area> 
+          <land-type-distribution :baseId="baseId"></land-type-distribution>
       </template>
       <template v-slot:six>
-        <land-type-area :baseId="baseId"></land-type-area> 
+        <land-type-area :baseId="baseId"></land-type-area>
       </template>
     </layOutLand>
     <el-dialog :visible.sync="show" width="60%" custom-class="taskDetail" :modal="false">
@@ -29,11 +32,12 @@ import layOutLand from '../layOutLand.vue';
 import baseInfo from './baseInfo.vue';
 import productPrices from './productPrices.vue';
 import farmTask from './farmTask.vue';
-import plantArea from './plantArea.vue';
+import landResourcePro from './landResourcePro.vue';
 import landTypeCompose from './landTypeCompose.vue';
 import landTypeDistribution from './landTypeDistribution.vue';
 import landTypeArea from './landTypeArea.vue';
 import landAreaTotal from './landAreaTotal.vue';
+import landProbenefit from './landProbenefit.vue'
 import task from './task.vue';
 export default {
   components: {
@@ -41,11 +45,12 @@ export default {
     baseInfo,
     productPrices,
     farmTask,
-    plantArea,
+    landResourcePro,
     landTypeCompose,
     landTypeDistribution,
     landTypeArea,
     landAreaTotal,
+    landProbenefit,
     task,
   },
   props: {
@@ -53,7 +58,7 @@ export default {
   },
   data() {
     return {
-      title: ['耕地面积统计', '农村土地资源项目', '项目效益分析', '耕地类型', '根底类型面积统计','作物情况'],
+      title: ['耕地面积统计', '农村土地资源项目', '项目效益分析','耕地类型', '耕地类型面积统计', '作物情况', ],
       show: false,
     };
   },

src/views/dataV/pageLand/landProbenefit.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="land-Pro-benefit-warp">
+    <div class="filter-warp">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentType && currentType.id ? currentType.name : '请选择地区' }}
+          <el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <div id="landProbenefit" class="charts-content"></div>
+  </div>
+</template>
+
+<script>
+import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
+import { bar, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      typelist: [
+        { name: '勐佑镇', id: '01' },
+        { name: '三岔河镇', id: '02' },
+        { name: '小湾镇', id: '03' },
+        { name: '洛党镇', id: '04' },
+        { name: '雪山镇', id: '05' },
+        { name: '营盘镇', id: '06' },
+        { name: '郭大寨乡', id: '07' },
+        { name: '大寺乡', id: '08' },
+        { name: '鲁史镇', id: '09' },
+        { name: '诗礼乡', id: '010' },
+        { name: '新华乡', id: '011' },
+        { name: '腰街乡', id: '012' },
+      ],
+      currentType: { name: '勐佑镇', id: '01' },
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          const { rows } = await selectBatchInfo(this.baseId);
+          let product = [
+            { name: '2020', value: 35 },
+            { name: '2021', value: 9 },
+            { name: '2022', value: 12 },
+            { name: '2023', value: 30 },
+            { name: '2024', value: 4 },
+            { name: '2025', value: 9 },
+          ];
+          let option = {
+            // tooltip: {
+            //   trigger: 'axis',
+            //   showContent: false,
+            //   axisPointer: {
+            //     type: 'shadow',
+            //     crossStyle: {
+            //       color: '#999',
+            //     },
+            //   },
+            // },
+            grid: {
+              left: 30,
+              top: 20,
+              right: 20,
+              bottom: 20,
+            },
+            xAxis: {
+              // show:false,
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: product.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: product.map((item) => item.value),
+                type: 'line',
+                smooth: true,
+                areaStyle: {
+                  color: {
+                    type: 'linear', // 线性渐变
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: '#99dcf3' },
+                      { offset: 1, color: '#01589c' },
+                    ],
+                    global: false, // 默认为 false
+                  },
+                },
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('landProbenefit'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    handleCommand(data) {
+      console.info('handleCommand', data);
+      this.currentType = data;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.land-Pro-benefit-warp {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .filter-warp {
+    width: 100px;
+    height: 100%;
+    .el-dropdown {
+      width: 100px;
+      padding: 0 8px;
+      cursor: pointer;
+      span {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+  }
+  .charts-content {
+    width: calc(100% - 100px);
+    height: 100%;
+  }
+}
+</style>

src/views/dataV/pageLand/landResourcePro.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="land-type-area-warp">
+    <!-- <div class="filter-warp">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentType && currentType.id ? currentType.name : '请选择地区' }}
+          <el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div> -->
+    <div id="landResourcePro" class="charts-content"></div>
+  </div>
+</template>
+
+<script>
+import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
+import { bar, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      typelist: [
+        { name: '勐佑镇', id: '01' },
+        { name: '三岔河镇', id: '02' },
+        { name: '小湾镇', id: '03' },
+        { name: '洛党镇', id: '04' },
+        { name: '雪山镇', id: '05' },
+        { name: '营盘镇', id: '06' },
+        { name: '郭大寨乡', id: '07' },
+        { name: '大寺乡', id: '08' },
+        { name: '鲁史镇', id: '09' },
+        { name: '诗礼乡', id: '010' },
+        { name: '新华乡', id: '011' },
+        { name: '腰街乡', id: '012' },
+      ],
+      currentType: { name: '勐佑镇', id: '01' },
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          const { rows } = await selectBatchInfo(this.baseId);
+          let product = [
+            { name: '凤山镇', value: 35 },
+            { name: '勐佑镇', value: 12 },
+            { name: '三岔河镇', value: 30 },
+            { name: '小湾镇', value: 4 },
+            { name: '洛党镇', value: 9 },
+            { name: '雪山镇', value: 12 },
+            { name: '营盘镇', value: 32 },
+            { name: '郭大寨乡', value: 13 },
+            { name: '大寺乡', value: 35 },
+            { name: '鲁史镇', value: 4 },
+            { name: '诗礼乡', value: 9 },
+            { name: '新华乡', value: 11 },
+            { name: '腰街乡', value: 15 },
+          ];
+          let option = {
+            // tooltip: {
+            //   trigger: 'axis',
+            //   showContent: false,
+            //   axisPointer: {
+            //     type: 'shadow',
+            //     crossStyle: {
+            //       color: '#999',
+            //     },
+            //   },
+            // },
+            grid: {
+              left: 30,
+              top: 20,
+              right: 20,
+              bottom: 20,
+            },
+            // xAxis: {
+            //   // show:false,
+            //   type: 'category',
+            //   // data: rows.map((item) => item.name),
+            //   data: product.map((item) => item.name),
+            //   axisLabel: {
+            //     color: '#fff',
+            //   },
+            //   splitLine: {
+            //     show: false, // 显示分割线
+            //     lineStyle: {
+            //       type: 'dashed', // 设置为虚线
+            //       width: 0.5, // 分割线宽度
+            //     },
+            //   },
+            // },
+            // yAxis: {
+            //   type: 'value',
+            //   axisLabel: {
+            //     color: '#fff',
+            //   },
+            //   splitLine: {
+            //     show: false, // 显示分割线
+            //     lineStyle: {
+            //       type: 'dashed', // 设置为虚线
+            //       width: 0.5, // 分割线宽度
+            //     },
+            //   },
+            // },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: product,
+                type: 'pie',
+                roseType: 'area',
+                center: ['50%', '50%'],
+                radius: ['20%', '80%'],
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}个',
+                    position: 'top',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                barWidth: 20,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 8,
+                    // borderRadius: [20, 20, 0, 0],
+                    color: (params) => {
+                      return this.$colorList[params.dataIndex];
+                    },
+                    // color: {
+                    //   type: 'linear', // 线性渐变
+                    //   x: 0,
+                    //   y: 0,
+                    //   x2: 0,
+                    //   y2: 1,
+                    //   colorStops: [
+                    //     { offset: 0, color: '#adf5a1' },
+                    //     { offset: 1, color: '#198905' },
+                    //   ],
+                    //   global: false, // 默认为 false
+                    // },
+                  },
+                },
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('landResourcePro'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    handleCommand(data) {
+      console.info('handleCommand', data);
+      this.currentType = data;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.land-type-area-warp {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .filter-warp {
+    width: 100px;
+    height: 100%;
+    .el-dropdown {
+      width: 100px;
+      padding: 0 8px;
+      cursor: pointer;
+      span {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+  }
+  .charts-content {
+    // width: calc(100% - 100px);
+    width: calc(100% - 0px);
+    height: 100%;
+  }
+}
+</style>

src/views/dataV/pageLand/landTypeArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="land-type-area-warp">
-    <div class="filter-warp">
+    <!-- <div class="filter-warp">
       <el-dropdown @command="handleCommand">
         <span class="el-dropdown-link">
           {{ currentType && currentType.id ? currentType.name : '请选择地区' }}
@@ -12,7 +12,7 @@
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-    </div>
+    </div> -->
     <div id="landTypeArea" class="charts-content"></div>
   </div>
 </template>
@@ -50,64 +50,67 @@ export default {
           await this.$nextTick();
           const { rows } = await selectBatchInfo(this.baseId);
           let product = [
-            { name: '旱地', value: 3.5 },
+            { name: '旱地', value: 3.2 },
             { name: '果园', value: 1.2 },
-            { name: '水浇地', value: 3.0 },
+            { name: '水浇地', value: 3.5 },
-            { name: '沟渠', value: 0.4 },
+            { name: '灌溉水田', value: 1.6 },
-            { name: '田坎', value: 0.4},
+            { name: '茶园', value: 3.5 },
-            { name: '茶园', value: 3.8 },
+            { name: '菜地', value: 1.2 },
-            { name: '设施农用地', value: 0.9 },
           ];
           let option = {
-            tooltip: {
+            // tooltip: {
-              trigger: 'axis',
+            //   trigger: 'axis',
-              showContent: false,
+            //   showContent: false,
-              axisPointer: {
+            //   axisPointer: {
-                type: 'shadow',
+            //     type: 'shadow',
-                crossStyle: {
+            //     crossStyle: {
-                  color: '#999',
+            //       color: '#999',
-                },
+            //     },
-              },
+            //   },
-            },
+            // },
             grid: {
               left: 30,
               top: 20,
               right: 20,
               bottom: 20,
             },
-            xAxis: {
+            // xAxis: {
-              type: 'category',
+            //   // show:false,
-              // data: rows.map((item) => item.name),
+            //   type: 'category',
-              data: product.map((item) => item.name),
+            //   // data: rows.map((item) => item.name),
-              axisLabel: {
+            //   data: product.map((item) => item.name),
-                color: '#fff',
+            //   axisLabel: {
-              },
+            //     color: '#fff',
-              splitLine: {
+            //   },
-                show: false, // 显示分割线
+            //   splitLine: {
-                lineStyle: {
+            //     show: false, // 显示分割线
-                  type: 'dashed', // 设置为虚线
+            //     lineStyle: {
-                  width: 0.5, // 分割线宽度
+            //       type: 'dashed', // 设置为虚线
-                },
+            //       width: 0.5, // 分割线宽度
-              },
+            //     },
-            },
+            //   },
-            yAxis: {
+            // },
-              type: 'value',
+            // yAxis: {
-              axisLabel: {
+            //   type: 'value',
-                color: '#fff',
+            //   axisLabel: {
-              },
+            //     color: '#fff',
-              splitLine: {
+            //   },
-                show: false, // 显示分割线
+            //   splitLine: {
-                lineStyle: {
+            //     show: false, // 显示分割线
-                  type: 'dashed', // 设置为虚线
+            //     lineStyle: {
-                  width: 0.5, // 分割线宽度
+            //       type: 'dashed', // 设置为虚线
-                },
+            //       width: 0.5, // 分割线宽度
-              },
+            //     },
-            },
+            //   },
+            // },
             series: [
               {
                 // data: rows.map((item) => item.value),
-                data: product.map((item) => item.value),
+                data:product,
-                type: 'bar',
+                type: 'pie',
+                roseType: 'area',
+                center: ['50%', '50%'],
+                radius: ['20%', '80%'],
                 emphasis: {
                   label: {
                     show: true,
@@ -121,22 +124,23 @@ export default {
                 barWidth: 20,
                 itemStyle: {
                   normal: {
-                    borderRadius: [20, 20, 0, 0],
+                    borderRadius: 8,
-                    // color: (params) => {
+                    // borderRadius: [20, 20, 0, 0],
-                    //   return this.$colorList[params.dataIndex];
+                    color: (params) => {
-                    // },
+                      return this.$colorList[params.dataIndex];
-                    color: {
-                      type: 'linear', // 线性渐变
-                      x: 0,
-                      y: 0,
-                      x2: 0,
-                      y2: 1,
-                      colorStops: [
-                        { offset: 0, color: '#adf5a1' },
-                        { offset: 1, color: '#198905' },
-                      ],
-                      global: false, // 默认为 false
                     },
+                    // color: {
+                    //   type: 'linear', // 线性渐变
+                    //   x: 0,
+                    //   y: 0,
+                    //   x2: 0,
+                    //   y2: 1,
+                    //   colorStops: [
+                    //     { offset: 0, color: '#adf5a1' },
+                    //     { offset: 1, color: '#198905' },
+                    //   ],
+                    //   global: false, // 默认为 false
+                    // },
                   },
                 },
               },
@@ -151,7 +155,7 @@ export default {
     },
   },
   mounted() {},
-  methods:{
+  methods: {
     handleCommand(data) {
       console.info('handleCommand', data);
       this.currentType = data;
@@ -179,7 +183,8 @@ export default {
     }
   }
   .charts-content {
-    width: calc(100% - 100px);
+    // width: calc(100% - 100px);
+     width: calc(100% - 0px);
     height: 100%;
   }
 }

src/views/dataV/pageLand/plantArea.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="plantArea" id="plnatArea"></div>
-</template>
-
-<script>
-import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
-import { bar, autoHover } from '../echartsOption';
-export default {
-  data() {
-    return {
-      datalist: [],
-    };
-  },
-  props: {
-    baseId: Number,
-  },
-  watch: {
-    baseId: {
-      handler: async function (n) {
-        if (n) {
-          await this.$nextTick();
-          const { rows } = await selectBatchInfo(this.baseId);
-          this.datalist = [
-            { name: '凤山镇', value: 35 },
-            { name: '勐佑镇', value: 12 },
-            { name: '三岔河镇', value: 30 },
-            { name: '小湾镇', value: 4 },
-            { name: '洛党镇', value: 9 },
-            { name: '雪山镇', value: 12 },
-            { name: '营盘镇', value: 32 },
-            { name: '郭大寨乡', value: 13 },
-            { name: '大寺乡', value: 35 },
-            { name: '鲁史镇', value: 4 },
-            { name: '诗礼乡', value: 9 },
-            { name: '新华乡', value: 11 },
-            { name: '腰街乡', value: 15 },
-          ];
-          let option = {
-            tooltip: {
-              trigger: 'axis',
-              showContent: false,
-              axisPointer: {
-                type: 'shadow',
-                crossStyle: {
-                  color: '#999',
-                },
-              },
-            },
-            grid: {
-              left: 30,
-              top: 20,
-              right: 20,
-              bottom: 20,
-            },
-            xAxis: {
-              type: 'category',
-              // data: rows.map((item) => item.name),
-              data: this.datalist.map((item) => item.name),
-              axisLabel: {
-                color: '#fff',
-              },
-              splitLine: {
-                show: false, // 显示分割线
-                lineStyle: {
-                  type: 'dashed', // 设置为虚线
-                  width: 0.5, // 分割线宽度
-                },
-              },
-            },
-            yAxis: {
-              type: 'value',
-              axisLabel: {
-                color: '#fff',
-              },
-              splitLine: {
-                show: false, // 显示分割线
-                lineStyle: {
-                  type: 'dashed', // 设置为虚线
-                  width: 0.5, // 分割线宽度
-                },
-              },
-            },
-            series: [
-              {
-                // data: rows.map((item) => item.value),
-                data: this.datalist.map((item) => item.value),
-                type: 'bar',
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: 12,
-                    formatter: '{c}个',
-                    position: 'top',
-                    color: '#fff',
-                    textBorderColor: 'transparent',
-                  },
-                },
-                barWidth: 20,
-                itemStyle: {
-                  normal: {
-                    borderRadius: [20, 20, 0, 0],
-                    // color: (params) => {
-                    //   return this.$colorList[params.dataIndex];
-                    // },
-                    color: {
-                      type: 'linear', // 线性渐变
-                      x: 0,
-                      y: 0,
-                      x2: 0,
-                      y2: 1,
-                      colorStops: [
-                        { offset: 0, color: '#b6fdf7' },
-                        { offset: 1, color: '#019c8f' },
-                      ],
-                      global: false, // 默认为 false
-                    },
-                  },
-                },
-              },
-            ],
-          };
-          let myChart = this.$echarts.init(document.getElementById('plnatArea'));
-          myChart.setOption(option);
-          autoHover(myChart, option, 1500);
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {},
-};
-</script>
-
-<style lang="scss" scoped>
-.plantArea {
-  height: 100%;
-  width: 100%;
-}
-</style>