From a86b26c5b454b2e694e33a63f8c479b73229f6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Thu, 16 May 2024 13:33:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=9C=B0=E5=9B=BE=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue            |   4 +-
 src/views/system/base/baseRightControl.vue    | 146 ++++++++++++++++++
 .../system/base/{list.vue => baseTable.vue}   |   4 +-
 src/views/system/base/mapMarkers.vue          |  83 +++++++++-
 4 files changed, 231 insertions(+), 6 deletions(-)
 create mode 100644 src/views/system/base/baseRightControl.vue
 rename src/views/system/base/{list.vue => baseTable.vue} (68%)

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 951f1c1..473647a 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -77,8 +77,8 @@ const menuList = ref([
   },
   {
     label: '环境数据', children: [
-      {label: '基地地图',href:'/system/base/map'},
-      {label: '地块管理'},
+      {label: '基地地图',href:'/system/base/mapMarkers'},
+      {label: '地块管理',href:'/system/base/baseTable'},
       {label: '土壤数据'},
       {label: '气象数据'},
       {label: '监控数据'},
diff --git a/src/views/system/base/baseRightControl.vue b/src/views/system/base/baseRightControl.vue
new file mode 100644
index 0000000..31f560f
--- /dev/null
+++ b/src/views/system/base/baseRightControl.vue
@@ -0,0 +1,146 @@
+<!--地图右侧控件-->
+<script setup>
+const plantingSeason = ref(2023)
+// 种植季选项
+const plantingSeasonList = [
+  {value: 2023, label: '2023年种植季'},
+  {value: 2024, label: '2024年种植季'},
+]
+const router = useRouter()
+const toBaseTable = () => {
+  router.push('/system/base/baseTable')
+}
+const control = ref({
+  // 地图类型
+  dataType:1,
+  // 显示地块标签
+  massifLabel:false,
+  // 显示网格地块
+  massifGrid:false,
+  // 显示垄
+  showRidge:false,
+  // 显示垄标签
+  ridgeLabel:false,
+  // 显示植株
+  showPlant:false,
+  // 显示植株标签
+  plantLabel:false,
+})
+</script>
+
+<template>
+  <div class="right-control">
+    <el-select v-model="plantingSeason" class="operate" style="width: 150px">
+      <el-option v-for="item in plantingSeasonList" :value="item.value" :label="item.label"></el-option>
+    </el-select>
+    <div style="display: flex;
+    justify-content: flex-end;">
+      <el-dropdown class="operate" trigger="click" style="margin-right: 10px">
+        <div class="map-type">
+          <i-map-draw theme="outline" size="20" fill="#333"/>
+          地图模式
+          <el-icon class="el-icon--right">
+            <arrow-down/>
+          </el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item disabled>
+              <i-map-draw theme="outline" size="20" fill="#333" style="margin-right: 5px"/>
+              地图模式
+              <el-icon style="margin-left: 5px"><Select /></el-icon>
+            </el-dropdown-item>
+            <el-dropdown-item @click="toBaseTable">
+              <i-list-checkbox theme="outline" size="20" fill="#333" style="margin-right: 5px"/>
+              列表模式
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <el-dropdown class="operate" trigger="click" :hide-on-click="false">
+        <div class="map-type map-option">
+          <i-filter theme="outline" size="22" fill="#333"/>
+          地图选项
+          <el-icon class="el-icon--right">
+            <arrow-down/>
+          </el-icon>
+        </div>
+        <template #dropdown>
+          <div>
+            地图类型
+            <el-dropdown-item>
+              卫星地图
+            </el-dropdown-item>
+            地块
+
+            <el-dropdown-item>
+              显示地块标签
+            </el-dropdown-item>
+            <el-dropdown-item>
+              显示网格地块
+            </el-dropdown-item>
+            <el-dropdown-item>
+              显示垄
+            </el-dropdown-item>
+            <el-dropdown-item>
+              显示垄标签
+            </el-dropdown-item>
+            <el-dropdown-item>
+              显示植株
+            </el-dropdown-item>
+            <el-dropdown-item>
+              显示植株标签
+            </el-dropdown-item>
+          </div>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.map-type {
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+  //鼠标悬浮变成点击
+  cursor: pointer;
+  width: 115px;
+  background: #FFFFFF;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+
+  .i-icon {
+    margin-right: 5px;
+  }
+}
+
+.right-control {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  width: 350px;
+  text-align: right;
+}
+
+.operate {
+  margin: 5px 0;
+  //该控件可以点击
+  pointer-events: all;
+}
+.choose{
+  border: 1px solid var(--el-dropdown-menuItem-hover-color);
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+  margin-left: 10px;
+  .change{
+    margin: 1.5px auto;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background: var(--el-dropdown-menuItem-hover-color);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/base/list.vue b/src/views/system/base/baseTable.vue
similarity index 68%
rename from src/views/system/base/list.vue
rename to src/views/system/base/baseTable.vue
index 0f9effd..87ae2b0 100644
--- a/src/views/system/base/list.vue
+++ b/src/views/system/base/baseTable.vue
@@ -3,7 +3,9 @@
 </script>
 
 <template>
-
+<div>
+  地块列表
+</div>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/system/base/mapMarkers.vue b/src/views/system/base/mapMarkers.vue
index c57e38a..d21da16 100644
--- a/src/views/system/base/mapMarkers.vue
+++ b/src/views/system/base/mapMarkers.vue
@@ -1,12 +1,89 @@
 <!--基地点坐标-->
 <script setup>
-
+import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
+import BaseRightControl from "@/views/system/base/baseRightControl.vue";
+const maxHeight = ref(window.innerHeight - 100);
+const zoom = ref(13);
+const center = ref([
+  116.338461,
+  39.97947
+]);
+const markerPosition = ref([
+  116.338461,
+  39.97947
+])
+// 显示模式 1为查看基地地图 2为点击进入显示基地地块
+const showType = ref(1)
+// 点击的基地
+const clickBase = ref(null)
+onBeforeMount(() => {
+  // 获取当前定位
+  // lazyAMapApiLoaderInstance.then(() => {
+  //   useGeolocation({
+  //     enableHighAccuracy: true,
+  //     needAddress: true
+  //   }).then(res => {
+  //     const {getCurrentPosition, getCityInfo} = res;
+  //     getCurrentPosition().then(currentPosition => {
+  //       center.value = currentPosition.position.toArray();
+  //       markerPosition.value = currentPosition.position.toArray();
+  //       console.log('currentPosition: ', markerPosition.value)
+  //     });
+  //     // getCityInfo().then(cityResult => {
+  //     //   console.log('cityResult: ', cityResult)
+  //     // })
+  //   })
+  // })
+})
+// 进入搜索选择的位置
+const selectPoi = ({poi}) => {
+  center.value = poi.location.toArray()
+}
 </script>
 
 <template>
-
+  <div class="app-container" :style="{height:maxHeight+'px'}">
+    <el-amap
+        :center="center"
+        :zoom="zoom"
+    >
+      <!--卫星云图-->
+      <el-amap-layer-satellite :visible="true" />
+      <!--定位控件-->
+      <el-amap-control-geolocation :visible="false"/>
+      <!--地图缩放控件-->
+      <el-amap-control-tool-bar :visible="true" />
+      <!--比例尺-->
+      <el-amap-control-scale :visible="true" />
+      <!--    点标记-->
+      <el-amap-marker
+          :position="markerPosition"
+          title="当前位置"
+          label="当前位置"
+      />
+      <!--搜索控件-->
+      <el-amap-search-box
+          :visible="false"
+          :debounce="1000"
+          @select="selectPoi"
+      />
+      <div class="top-block">
+        <base-right-control />
+      </div>
+    </el-amap>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.top-block{
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
+  .operate{
+    //该控件可以点击
+    pointer-events: all;
+  }
+}
 </style>
\ No newline at end of file