feat: 果园档案

src/api/modules/mini_farm.js

@@ -62,5 +62,10 @@ module.exports = {
     weather_warning_land_check: {
         url: config.base_dev_url + "land_check/weather_warning_land_check?key="+config.mini_key,
         type: "post",
-    }
+    },
+    
+    getSampleFiles: {
+        url: config.base_dev_url + "image/getSampleFiles?key="+config.mini_key,
+        type: "get",
+    },
 }

src/components/fnHeader.vue

@@ -14,6 +14,9 @@
                 @change="toggleFarm"
             >
                 <el-option v-for="item in options" :key="item.organId" :label="item.name" :value="item.organId" />
+                <el-option label="从化凤二基地" value="90264" />
+                <el-option label="从化井岗基地" value="90263" />
+                <el-option label="创业果园" value="26196" />
             </el-select>
         </div>
         <div class="date" v-show="showDate">

src/views/home/album_compoents/albumCarousel.vue

@@ -1,28 +1,92 @@
 <template>
-  <el-dialog
-      v-model="dialogVisible"
-      width="60%"
-      align-center
-      class="picture-preview-wrap v-dialog"
-      :show-close="false"
-      append-to-body
-  >
-    <album-carousel-item v-if="images" :farmId="farmId" :images="images" :lock="lock"></album-carousel-item>
-  </el-dialog>
+    <el-dialog
+        v-model="dialogVisible"
+        width="60%"
+        align-center
+        class="picture-preview-wrap v-dialog"
+        :show-close="false"
+        append-to-body
+    >
+        <div class="picture-file">
+            <album-carousel-item
+                lbum-carousel-item
+                v-if="images"
+                :farmId="farmId"
+                :images="images"
+                :lock="lock"
+            ></album-carousel-item>
+            <div class="file-wrap">
+                <div class="file-title">
+                    <img src="@/assets/images/common/chart-yellow.png" alt="" />
+                    果树档案
+                </div>
+                <div class="overview-file">
+                    <div class="box-title">总体档案</div>
+                    <div class="base-data">
+                        <div class="base-item" v-for="item in photoBaseData" :key="item.label">
+                            <span class="label">{{ item.label }}</span>
+                            <div class="value">{{ item.value }}</div>
+                        </div>
+                    </div>
+                    <div class="list">
+                        <div class="list-item" v-for="item in photoList" :key="item.key">
+                            <div class="list-name">
+                                <img src="@/assets/images/common/title-icon.png" alt="" />
+                                {{ item.key }}
+                            </div>
+                            {{ item.statement }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="overview-file" v-if="images && images.length && images[currentIndex]?.detail1">
+                    <div class="box-title">产量详情</div>
+                    <div class="box-wrap">
+                        <div
+                            class="box-item"
+                            v-for="(value, key) in images[currentIndex].detail1"
+                            :key="key"
+                            @click="toggleAcitve(key)"
+                            :class="{ active: activeOuput === key }"
+                        >
+                            <div class="item-name">{{ key }}</div>
+                            <div class="item-val">{{ value }}{{ key !== "总枝条数" ? "%" : "" }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="overview-file" v-if="images && images.length && images[currentIndex]?.detail2">
+                    <div class="box-title">质量详情</div>
+                    <div class="box-wrap">
+                      <div
+                            class="box-item"
+                            v-for="(value, key) in images[currentIndex].detail2"
+                            :key="key"
+                            @click="toggleAcitve(key)"
+                            :class="{ active: activeOuput === key }"
+                        >
+                            <div class="item-name">{{ key }}</div>
+                            <div class="item-val">{{ value }}%</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import "./cacheImg.js"
+import "./cacheImg.js";
 import AlbumCarouselItem from "./albumCarouselItem";
-import {dateFormat} from "@/utils/date_util.js"
+import { dateFormat } from "@/utils/date_util.js";
 import eventBus from "@/api/eventBus";
 
 const lock = ref(false);
 const farmId = ref(766);
 
 const images = ref(null);
-const dialogVisible = ref(false)
+const dialogVisible = ref(false);
 // 获取当前日期
 const currentDate = new Date();
 // 获取当前日期的前一个月
@@ -30,23 +94,229 @@ const startDate = new Date(currentDate);
 startDate.setMonth(currentDate.getMonth() - 1);
 
 // 格式化日期
-const formattedStartDate = dateFormat(startDate, 'YY-mm-dd');
-const formattedEndDate = dateFormat(currentDate, 'YY-mm-dd');
-
-eventBus.on("click:point",function({farmId,sampleId}){
-  let params = {sampleId,farmId}
-  VE_API.miniimage.list(params).then(res => {
-    if(res.code === 0){
-      images.value = res.data
-      dialogVisible.value = true
-    }
-  })
-})
+const formattedStartDate = dateFormat(startDate, "YY-mm-dd");
+const formattedEndDate = dateFormat(currentDate, "YY-mm-dd");
+
+eventBus.on("click:point", function ({ farmId, sampleId, geoHash }) {
+    let params = { sampleId, farmId, geoHash };
+    console.log("geoHash", geoHash);
+    getSampleFiles(geoHash);
+    VE_API.miniimage.list(params).then((res) => {
+        if (res.code === 0) {
+            res.data.map((item) => {
+                item.detail1 = { 总枝条数: "11000", 开花率: "56", 雄花比例: "38", 花穗率: "78" };
+                item.detail2 = {
+                    地形条件: "81",
+                    透光率: "66",
+                    通风率: "78",
+                };
+            });
+            images.value = res.data;
+            dialogVisible.value = true;
+            console.log("images", images.value);
+        }
+    });
+});
+
+eventBus.off("albumCarousel", toggleActiveImg);
+eventBus.on("albumCarousel", toggleActiveImg);
+
+const currentIndex = ref(0);
+function toggleActiveImg(index) {
+    currentIndex.value = index;
+}
 
+const getSampleFiles = (geoHash) => {
+    photoList.value = [];
+    VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash }).then((res) => {
+        photoBaseData.value[0].value = res.data.meta_info.type_id;
+        photoBaseData.value[1].value = res.data.meta_info.crown + "米";
+        photoBaseData.value[2].value = res.data.meta_info.production + "斤";
+        photoBaseData.value[3].value = res.data.meta_info.quality + "%";
+        photoList.value.push(res.data.dp_alert_info);
+        photoList.value.push(res.data.grow_alert_info);
+        photoList.value.push(res.data.nutrition_info);
+    });
+};
 
+const photoBaseData = ref([
+    {
+        label: "品种",
+        value: "桂味",
+    },
+    {
+        label: "冠幅",
+        value: "10米",
+    },
+    {
+        label: "预估产量",
+        value: "2000斤",
+    },
+    {
+        label: "高质果率",
+        value: "72棵",
+    },
+]);
 
+const photoList = ref([
+    { key: "营养", statement: "营养老熟 延迟，12月10日 末次老熟" },
+    { key: "病虫", statement: "2月3日爆发啃食类虫害。" },
+    { key: "异常", statement: "1月3日，花带叶30%。3月4日，花量过大。" },
+]);
+
+const activeOuput = ref(1);
+const outputBox = ref([
+    { id: 1, name: "花穗率", value: "78%" },
+    { id: 2, name: "总枝条数", value: "11000" },
+    { id: 3, name: "开花率", value: "56%" },
+    { id: 4, name: "雄花比例", value: "38%" },
+]);
+
+const qualityBox = ref([
+    { id: 5, name: "通风率", value: "78%" },
+    { id: 6, name: "透光率", value: "66%" },
+    { id: 7, name: "地形条件", value: "81%" },
+]);
+
+function toggleAcitve(id) {
+    activeOuput.value = id;
+}
 </script>
 
 <style lang="scss" scoped>
 @import "src/styles/index";
+.picture-file {
+    display: flex;
+    .file-wrap {
+        background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
+        margin-left: 12px;
+        padding: 12px;
+        .file-title {
+            font-size: 20px;
+            color: #ffd489;
+        }
+        .overview-file {
+            padding-top: 20px;
+            .box-title {
+                font-size: 16px;
+                padding-left: 13px;
+                margin-bottom: 16px;
+                position: relative;
+                display: flex;
+                justify-content: space-between;
+                color: #fff;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 3px;
+                    width: 3px;
+                    height: 16px;
+                    background: #fff;
+                    border-radius: 11px;
+                }
+            }
+            .title {
+                color: #f3c11d;
+                font-size: 16px;
+                font-family: "PangMenZhengDao";
+                margin-bottom: 20px;
+                .big {
+                    width: 13px;
+                    height: 13px;
+                    margin: -10px 0 0 4px;
+                }
+                .small {
+                    width: 7px;
+                    height: 7px;
+                    margin-left: -3px;
+                }
+            }
+            .base-data {
+                background: rgba(207, 207, 207, 0.1);
+                border-radius: 4px;
+                padding: 6px 0;
+                display: flex;
+                .base-item {
+                    flex: 1;
+                    text-align: center;
+                    .label {
+                        font-size: 12px;
+                        color: #666666;
+                    }
+                    .value {
+                        padding-top: 2px;
+                        font-size: 16px;
+                        color: #ffffff;
+                    }
+                }
+                .base-item + .base-item {
+                    border-left: 1px solid rgba(102, 102, 102, 0.42);
+                }
+            }
+            .list {
+                margin-top: 15px;
+                width: max-content;
+                font-size: 14px;
+                .list-item {
+                    color: #bbbbbb;
+                    display: flex;
+                    margin-bottom: 8px;
+                    .list-name {
+                        color: #f3c11d;
+                        margin-right: 6px;
+                        img {
+                            width: 17px;
+                            height: 13px;
+                        }
+                    }
+                }
+            }
+        }
+        .overview-file + .overview-file {
+            margin-top: 8px;
+        }
+        .box-wrap {
+            display: flex;
+            .box-item {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 16px;
+                background: rgba(207, 207, 207, 0.1);
+                border-radius: 4px;
+                border: 1px solid rgba(207, 207, 207, 0.1);
+                cursor: pointer;
+                .item-name {
+                    font-size: 12px;
+                    color: #666666;
+                    width: max-content;
+                }
+                .item-val {
+                    font-size: 18px;
+                    color: #fff;
+                    width: max-content;
+                    padding-top: 3px;
+                }
+                &.active {
+                    background: rgba(255, 212, 137, 0.16);
+                    border: 1px solid #ffd489;
+                    .item-name {
+                        color: #bbbbbb;
+                    }
+                }
+            }
+            .box-item + .box-item {
+                margin-left: 8px;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.picture-preview-wrap {
+    background: none;
+}
 </style>

src/views/home/album_compoents/albumCarouselItem.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script setup>
+import eventBus from "@/api/eventBus";
 import { toRefs, ref, computed, onMounted, onUnmounted } from "vue";
 import AlbumDrawBox from "./albumDrawBox";
 import "./cacheImg.js"
@@ -97,6 +98,7 @@ const next = () => {
   currentIndex.value = (currentIndex.value + 1) % totalImages;
   updateImagePosition();
   clearAndRestartTimer();
+  eventBus.emit("albumCarousel", currentIndex.value)
 };
 
 // 上一张图片
@@ -106,6 +108,7 @@ const prev = () => {
   currentIndex.value = (currentIndex.value - 1 + totalImages) % totalImages;
   updateImagePosition();
   clearAndRestartTimer();
+  eventBus.emit("albumCarousel", currentIndex.value)
 };
 
 const clearAndRestartTimer = () => {

src/views/home/album_compoents/albumDrawBox.vue

@@ -241,6 +241,7 @@ const formatDate = (date) => {
 .carousel-item img {
   width: 100%;
   display: block;
+  border-radius: 12px;
 }
 canvas {
   position: absolute;

src/views/home/index.vue

@@ -1,24 +1,20 @@
 <template>
-  <div class="base-container no-events">
-    <fnHeader showDate></fnHeader>
-    <div class="content">
-      <navigation @handleTab="handleTab"></navigation>
-      <div class="left yes-events">
-        <tool-list
-          direction="left"
-          :list="leftToolList"
-          @handleActive="handleActiveLeft"
-        ></tool-list>
-        <component :is="components[currentComponent]" />
-        <!-- 箭头 -->
-        <div class="arrow" @click="handleShrink">
-            <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
-        </div>
-      </div>
-      <!-- <div class="home-bottom"> -->
-        <!-- <time-line class="time-wrap yes-events"></time-line>
+    <div class="base-container no-events">
+        <fnHeader showDate></fnHeader>
+        <div class="content">
+            <navigation @handleTab="handleTab"></navigation>
+            <div class="left yes-events">
+                <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list>
+                <component :is="components[currentComponent]" />
+                <!-- 箭头 -->
+                <div class="arrow" @click="handleShrink">
+                    <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
+                </div>
+            </div>
+            <!-- <div class="home-bottom"> -->
+            <!-- <time-line class="time-wrap yes-events"></time-line>
         <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
-        <!-- <div class="log-box yes-events">
+            <!-- <div class="log-box yes-events">
           <chart-box class="overflow">
             <template #title-name>
               <div class="box-name" @click="handleSelectArea">果园日志</div>
@@ -31,7 +27,7 @@
             </div>
           </chart-box>
         </div> -->
-        <!-- <div class="file-box yes-events">
+            <!-- <div class="file-box yes-events">
           <chart-box name="果园档案">
             <template #title-right>
               <el-icon class="arrow-icon cursor-pointer" color="#141414"
@@ -42,62 +38,84 @@
             <file-bar></file-bar>
           </chart-box>
         </div> -->
-      <!-- </div> -->
-      <div class="right yes-events">
-        <div class="list">
-          <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">
-            <template v-if="rightIndex===0">
-              <album></album>
-              <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
+            <!-- </div> -->
+            <div class="right yes-events">
+                <div class="list">
+                    <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
+                        <template v-if="rightIndex === 0">
+                            <album></album>
+                            <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
               <div class="img-box">
                 <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
               </div> -->
-            </template>
-            <template v-if="rightIndex===1">
-              <div class="img-box1">
-                <img  src="@/assets/images/home/fh01.png" alt="">
-                <img src="@/assets/images/home/fh02.png" alt="">
-              </div>
-            </template>
-            <template v-if="rightIndex===2">
-              <div class="btn-wrap">
-                <div :class="{active:btnIndex===0}" @click="handleBtn(0)">{{btnIndex===0&&btnName!=''?'采样分区：'+ btnName:'选择采样分区'}}</div>
-                <div :class="{active:btnIndex===1}" @click="handleBtn(1)">{{btnIndex===1&&btnName!=''?'单树编号：'+ btnName:'选择树'}}</div>
-              </div>
-                <div class="img-box2" v-show="showPoint">
-                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart.png" alt="">
-                  <img v-else src="@/assets/images/home/line-chart2.png" alt="">
-                  <img src="@/assets/images/home/fh01.png" alt="">
+                        </template>
+                        <template v-if="rightIndex === 1">
+                            <div class="img-box1">
+                                <img src="@/assets/images/home/fh01.png" alt="" />
+                                <img src="@/assets/images/home/fh02.png" alt="" />
+                            </div>
+                        </template>
+                        <template v-if="rightIndex === 2">
+                            <div class="btn-wrap">
+                                <div :class="{ active: btnIndex === 0 }" @click="handleBtn(0)">
+                                    {{ btnIndex === 0 && btnName != "" ? "采样分区：" + btnName : "选择采样分区" }}
+                                </div>
+                                <div :class="{ active: btnIndex === 1 }" @click="handleBtn(1)">
+                                    {{ btnIndex === 1 && btnName != "" ? "单树编号：" + btnName : "选择树" }}
+                                </div>
+                            </div>
+                            <div class="img-box2" v-show="showPoint">
+                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart.png" alt="" />
+                                <img v-else src="@/assets/images/home/line-chart2.png" alt="" />
+                                <img src="@/assets/images/home/fh01.png" alt="" />
+                            </div>
+                            <div class="img-box2" v-show="!showPoint">
+                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart1.png" alt="" />
+                                <img v-else src="@/assets/images/home/line-chart3.png" alt="" />
+                                <img src="@/assets/images/home/fh02.png" alt="" />
+                            </div>
+                        </template>
+                    </chart-box>
                 </div>
-                <div class="img-box2" v-show="!showPoint">
-                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart1.png" alt="">
-                  <img v-else src="@/assets/images/home/line-chart3.png" alt="">
-                  <img src="@/assets/images/home/fh02.png" alt="">
+                <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
+            </div>
+
+            <!-- 图例 -->
+            <!-- <img class="legend yes-events" src="@/assets/images/home/legend.png" alt=""> -->
+            <div class="map-bg map-legend yes-events">
+                <div class="legend-item legend-title">
+                    <el-checkbox v-model="showMapLegend" @change="handleLegend" label="分区状态" size="large" />
                 </div>
-            </template>
-          </chart-box>
+                <div class="item">
+                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
+                    正常
+                </div>
+                <div class="item">
+                    <img src="@/assets/images/map/status/status-szyc.png" alt="" />
+                    生长异常
+                </div>
+                <div class="item">
+                    <img src="@/assets/images/map/status/status-bh.png" alt="" />
+                    病害异常
+                </div>
+                <div class="item">
+                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
+                    虫害异常
+                </div>
+            </div>
         </div>
-        <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
-      </div>
-
-      <!-- 图例 -->
-      <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="">
     </div>
-  </div>
-  <div ref="mapRef" class="bottom-map"></div>
+    <div ref="mapRef" class="bottom-map"></div>
 
-  <!-- 图片弹窗 -->
-  <PicturePreview
-    :imageUrl="urls"
-    :curIndex="urlsIndex"
-  ></PicturePreview>
+    <!-- 图片弹窗 -->
+    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
     <album-carousel></album-carousel>
-  <PdfDialog title="果园报告" ></PdfDialog>
+    <PdfDialog title="果园报告"></PdfDialog>
 </template>
 
 <script setup>
 import { onMounted, onUnmounted, ref } from "vue";
-import config from "@/api/config.js"
+import config from "@/api/config.js";
 import timeLine from "@/components/timeLine.vue";
 import PicturePreview from "@/components/PicturePreview.vue";
 import fnHeader from "@/components/fnHeader.vue";
@@ -112,578 +130,618 @@ import phenologyPage from "./components/phenologyPage.vue";
 import indicatorChart from "./components/indicatorChart.vue";
 import { useRouter } from "vue-router";
 import SamplePointLayer from "./map/samplePointLayer";
-import {useStore} from "vuex";
+import { useStore } from "vuex";
 import RegionLayer from "./map/regionLayer";
 import BlueRegionLayer from "./map/blueRegionLayer";
 import eventBus from "@/api/eventBus";
 import AlbumCarousel from "./album_compoents/albumCarousel.vue";
 import album from "./album/index.vue";
-import PdfDialog from "../../components/PdfDialog"
-let store = useStore()
+import PdfDialog from "../../components/PdfDialog";
+let store = useStore();
 const components = {
-  homePage,
-  weatherPage,
-  phenologyPage,
+    homePage,
+    weatherPage,
+    phenologyPage,
 };
 //当前农场
 const currentFarm = {
-  id: store.getters.userinfo.curFarmId,
-  name: store.getters.userinfo.curFarmName,
-}
+    id: store.getters.userinfo.curFarmId,
+    name: store.getters.userinfo.curFarmName,
+};
 //当前区域
 const currentRegion = {
-  id: null,
-  name: null
-}
+    id: null,
+    name: null,
+};
 let homeMap = new HomeMap();
-let samplePointLayer = null
-let regionLayer = null
-let blueRegionLayer = null
+let samplePointLayer = null;
+let regionLayer = null;
+let blueRegionLayer = null;
 const router = useRouter();
 const mapRef = ref();
 onMounted(() => {
-  homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
-  // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
-  // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
-  samplePointLayer = new SamplePointLayer(homeMap.kmap.map)
-  blueRegionLayer = new BlueRegionLayer(homeMap.kmap)
+    homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+    // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
+    // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
+    samplePointLayer = new SamplePointLayer(homeMap.kmap.map);
+    blueRegionLayer = new BlueRegionLayer(homeMap.kmap);
 
-  getYellow()
-  // getFarmLog()
+    getYellow();
+    // getFarmLog()
 
-  //区域切换监听事件
-  eventBus.on('area:id',areaId)
-  //选项卡子项事件监听
-  eventBus.on('handleTabItem',handleTabItem)
+    //区域切换监听事件
+    eventBus.on("area:id", areaId);
+    //选项卡子项事件监听
+    eventBus.on("handleTabItem", handleTabItem);
 });
 
-onUnmounted(()=>{
-  eventBus.off('area:id',areaId)
-  eventBus.off('handleTabItem',handleTabItem)
-})
+onUnmounted(() => {
+    eventBus.off("area:id", areaId);
+    eventBus.off("handleTabItem", handleTabItem);
+});
 
-const blueList = ref([])
-const getBlueRegionList = (callback) =>{
-  VE_API.farm.blueRegionList({farmId:organId.value,regionId:regionId.value}).then(({ data }) => {
-      blueList.value = data.map(item =>{
-        let color = 'rgba(255, 255, 255, 0.5)' //失效区域
-        if(item.status===2){ //物候期风险
-          color = 'rgba(63, 255, 53, 0.5)'
-        }
-        if(item.status===3){ //生长异常
-          color = 'rgba(255, 252, 61, 0.5)'
-        }
-        if(item.status===4){ //病虫害
-          color = 'rgba(255, 73, 73, 0.5)'
-        }
-        return {
-          ...item,
-          color
-        }
-      })
-      blueRegionLayer.initData(blueList.value)
-      callback && callback()
-  });
-}
+const blueList = ref([]);
+const getBlueRegionList = (callback) => {
+    VE_API.farm.blueRegionList({ farmId: organId.value, regionId: regionId.value }).then(({ data }) => {
+        blueList.value = data.map((item) => {
+            let color = "rgba(255, 255, 255, 0.5)"; //失效区域
+            if (item.status === 2) {
+                //物候期风险
+                color = "rgba(63, 255, 53, 0.5)";
+            }
+            if (item.status === 3) {
+                //生长异常
+                color = "rgba(255, 252, 61, 0.5)";
+            }
+            if (item.status === 4) {
+                //病虫害
+                color = "rgba(255, 73, 73, 0.5)";
+            }
+            return {
+                ...item,
+                color,
+            };
+        });
+        blueRegionLayer.initData(blueList.value);
+        callback && callback();
+    });
+};
 
-const organId = ref(null)
-const regionId = ref(null)
-const tabName = ref('')
-const tabId = ref(0)
+const organId = ref(null);
+const regionId = ref(null);
+const tabName = ref("");
+const tabId = ref(0);
 //选项卡事件监听
-const handleTab = async ({name,id,isUpdate,params}) =>{
-    tabName.value = name
-    tabId.value = id
-    if(id===0){
-      getBlueRegionList(()=>{
-        if(isUpdate){
-          handleTabItem(params)
-        }
-      })
-    }else{
-      getFarmIndexReport((()=>{
-        if(isUpdate){
-          handleTabItem(params)
-        }
-      }))
+const handleTab = async ({ name, id, isUpdate, params }) => {
+    tabName.value = name;
+    tabId.value = id;
+    if (id === 0) {
+        getBlueRegionList(() => {
+            if (isUpdate) {
+                handleTabItem(params);
+            }
+        });
+    } else {
+        getFarmIndexReport(() => {
+            if (isUpdate) {
+                handleTabItem(params);
+            }
+        });
     }
-}
+};
 
 //区域切换监听事件
-function areaId({areaId,farmId}){
-  organId.value = farmId
-  regionId.value = areaId
-  samplePointLayer.initData(farmId,areaId)
-  if(tabId.value===0){
-    getBlueRegionList()
-  }else{
-    getFarmIndexReport()
-  }
+function areaId({ areaId, farmId }) {
+    organId.value = farmId;
+    regionId.value = areaId;
+    samplePointLayer.initData(farmId, areaId);
+    if (tabId.value === 0) {
+        getBlueRegionList();
+    } else {
+        getFarmIndexReport();
+    }
 }
 
 //选项卡子项事件监听
-const handleTabItem = (e) =>{
-  if(reportData.value.blueZoneList){
-    const index = reportData.value.blueZoneList.findIndex(item => item.key===e)
-    let arr = []
-    if(reportData.value.blueZoneList.length){
-      arr = blueListConvert(reportData.value.blueZoneList[index].obj,index)
+const handleTabItem = (e) => {
+    if (reportData.value.blueZoneList) {
+        const index = reportData.value.blueZoneList.findIndex((item) => item.key === e);
+        let arr = [];
+        if (reportData.value.blueZoneList.length) {
+            arr = blueListConvert(reportData.value.blueZoneList[index].obj, index);
+        }
+        blueRegionLayer.initData(arr, "87");
     }
-    blueRegionLayer.initData(arr,'87')
-  }
-}
+};
 
-const reportData = ref({})
-const blueListConvert = (data,index)=>{
-    const list = []
+const reportData = ref({});
+const blueListConvert = (data, index) => {
+    const list = [];
     for (let key in data) {
-        const filterData = reportData.value.blueZoneLegendList[index].list.filter(item => item.val === key)
-        const arr = data[key]
-        arr.forEach(item =>{
-            const listObj = blueList.value.filter(ele =>ele.blueZoneCode === item)
-            const updateList = listObj.map(ele => {
-                return{
+        const filterData = reportData.value.blueZoneLegendList[index].list.filter((item) => item.val === key);
+        const arr = data[key];
+        arr.forEach((item) => {
+            const listObj = blueList.value.filter((ele) => ele.blueZoneCode === item);
+            const updateList = listObj.map((ele) => {
+                return {
                     ...ele,
                     level: key,
-                    name:filterData[0].name,
-                    color:filterData[0].color
-                }
-            })
-            list.push(...updateList)
-        })
+                    name: filterData[0].name,
+                    color: filterData[0].color,
+                };
+            });
+            list.push(...updateList);
+        });
     }
-    return list
-}
+    return list;
+};
 
-const getFarmIndexReport = (callback) =>{
-  // const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
-  //   VE_API.farm.farmIndexReport(params).then(({data,code}) => {
-  //     if (code === 0) {
-  //         reportData.value = data || {};
-  //         let arr = []
-  //         if(data.blueZoneList.length){
-  //           arr = blueListConvert(data.blueZoneList[0].obj,0)
-  //         }
-  //         blueRegionLayer.initData(arr,'87')
-  //         callback && callback()
-  //     }
-  // });
-}
+const getFarmIndexReport = (callback) => {
+    // const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
+    //   VE_API.farm.farmIndexReport(params).then(({data,code}) => {
+    //     if (code === 0) {
+    //         reportData.value = data || {};
+    //         let arr = []
+    //         if(data.blueZoneList.length){
+    //           arr = blueListConvert(data.blueZoneList[0].obj,0)
+    //         }
+    //         blueRegionLayer.initData(arr,'87')
+    //         callback && callback()
+    //     }
+    // });
+};
 
-const indicatorChartData = ref({})
-const blueZone = ref('ws0y1meyhxp4')
+const indicatorChartData = ref({});
+const blueZone = ref("ws0y1meyhxp4");
 
-const getFarmLog = () =>{
-  console.log('getfarmlog')
-  const params = {
-    id: null,
-    farmId: 766,
-    blueZone:blueZone.value
-  }
-  VE_API.warning.fetchFarmLog(params).then(({data}) => {
-        indicatorChartData.value = data || {}
-        eventBus.emit('chart:updateOption',data)
-    })
-}
+const getFarmLog = () => {
+    console.log("getfarmlog");
+    const params = {
+        id: null,
+        farmId: 766,
+        blueZone: blueZone.value,
+    };
+    VE_API.warning.fetchFarmLog(params).then(({ data }) => {
+        indicatorChartData.value = data || {};
+        eventBus.emit("chart:updateOption", data);
+    });
+};
 
-const urls = ref([])
-const urlsIndex = ref(0)
-const getYellow = () =>{
-  VE_API.home.getYellowList().then(res =>{
-    // urls.value = res.data.map(item =>{
-    //   return {
-    //     ...item,
-    //     imgPath:config.base_img_url2+item.cloudFilename
-    //   }
-    // })
-    // urls.value = [
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
-    // ]
-  })
-}
+const urls = ref([]);
+const urlsIndex = ref(0);
+const getYellow = () => {
+    VE_API.home.getYellowList().then((res) => {
+        // urls.value = res.data.map(item =>{
+        //   return {
+        //     ...item,
+        //     imgPath:config.base_img_url2+item.cloudFilename
+        //   }
+        // })
+        // urls.value = [
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
+        // ]
+    });
+};
 
-const btnIndex = ref(null)
-const btnName = ref("")
-const handleBtn = (e) =>{
-  btnName.value = ""
-  btnIndex.value = e
-  eventBus.emit("clear:area")
-  samplePointLayer.updateAreaStatus(e===0?true:false)
-  regionLayer.resetData()
-  samplePointLayer.resetPoint()
-}
+const btnIndex = ref(null);
+const btnName = ref("");
+const handleBtn = (e) => {
+    btnName.value = "";
+    btnIndex.value = e;
+    eventBus.emit("clear:area");
+    samplePointLayer.updateAreaStatus(e === 0 ? true : false);
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+};
 
 //点击果园日志
-const handleSelectArea = () =>{
-  btnName.value = ""
-  btnIndex.value = null
-  eventBus.emit("clear:area")
-  regionLayer.resetData()
-  samplePointLayer.resetPoint()
-  samplePointLayer.updateAreaStatus(true)
-}
+const handleSelectArea = () => {
+    btnName.value = "";
+    btnIndex.value = null;
+    eventBus.emit("clear:area");
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+    samplePointLayer.updateAreaStatus(true);
+};
 
 //农事点击高亮
-const act = ref(null)
-const handleAct = (v) =>{
-  act.value = v
-  samplePointLayer.resetPoint()
-  if(v===1){
-    regionLayer.selectAreaMultiple([
-      {value:2,color:"blue"},
-      {value:4,color:"blue1"},
-      {value:5,color:"blue2"},
-      {value:7,color:"blue"},
-      {value:13,color:"blue2"},
-    ])
-  }
-  if(v===2){
-    regionLayer.selectAreaMultiple([
-      {value:1,color:"blue"},
-      {value:2,color:"blue1"},
-      {value:9,color:"blue2"},
-      {value:12,color:"blue2"},
-    ])
-  }
-}
+const act = ref(null);
+const handleAct = (v) => {
+    act.value = v;
+    samplePointLayer.resetPoint();
+    if (v === 1) {
+        regionLayer.selectAreaMultiple([
+            { value: 2, color: "blue" },
+            { value: 4, color: "blue1" },
+            { value: 5, color: "blue2" },
+            { value: 7, color: "blue" },
+            { value: 13, color: "blue2" },
+        ]);
+    }
+    if (v === 2) {
+        regionLayer.selectAreaMultiple([
+            { value: 1, color: "blue" },
+            { value: 2, color: "blue1" },
+            { value: 9, color: "blue2" },
+            { value: 12, color: "blue2" },
+        ]);
+    }
+};
 
 //柱状图点击事件监听
-eventBus.on('echart:barClick',(e)=>{
-  btnName.value = ""
-  btnIndex.value = null
-  eventBus.emit("clear:area")
-  samplePointLayer.updateAreaStatus(false)
-  const arr =  ["花穗伸长", "啃食虫害","毛毡病"]
-  const isDraw = arr.includes(e)
-  const index = arr.indexOf(e)
-  if(isDraw){
-    if(index===0){
-      regionLayer.selectAreaMultiple([
-        {value:0,color:"green"},
-        {value:1,color:"green"},
-        {value:2,color:"green"},
-        {value:3,color:"green1"},
-        {value:4,color:"green1"},
-        {value:5,color:"green2"},
-        {value:6,color:"green1"},
-        {value:7,color:"green2"},
-        {value:8,color:"green2"},
-        {value:9,color:"green"},
-        {value:10,color:"green"},
-        {value:11,color:"green1"},
-        {value:12,color:"green2"},
-        {value:13,color:"green"},
-        {value:14,color:"green2"},
-      ])
-    }else if(index===1){
-      regionLayer.selectAreaMultiple([{value:6,color:"red"}])
-    }else{
-      regionLayer.selectAreaMultiple([
-        {value:12,color:"red2"},
-        {value:10,color:"red"},
-        {value:1,color:"red"}
-      ])
+eventBus.on("echart:barClick", (e) => {
+    btnName.value = "";
+    btnIndex.value = null;
+    eventBus.emit("clear:area");
+    samplePointLayer.updateAreaStatus(false);
+    const arr = ["花穗伸长", "啃食虫害", "毛毡病"];
+    const isDraw = arr.includes(e);
+    const index = arr.indexOf(e);
+    if (isDraw) {
+        if (index === 0) {
+            regionLayer.selectAreaMultiple([
+                { value: 0, color: "green" },
+                { value: 1, color: "green" },
+                { value: 2, color: "green" },
+                { value: 3, color: "green1" },
+                { value: 4, color: "green1" },
+                { value: 5, color: "green2" },
+                { value: 6, color: "green1" },
+                { value: 7, color: "green2" },
+                { value: 8, color: "green2" },
+                { value: 9, color: "green" },
+                { value: 10, color: "green" },
+                { value: 11, color: "green1" },
+                { value: 12, color: "green2" },
+                { value: 13, color: "green" },
+                { value: 14, color: "green2" },
+            ]);
+        } else if (index === 1) {
+            regionLayer.selectAreaMultiple([{ value: 6, color: "red" }]);
+        } else {
+            regionLayer.selectAreaMultiple([
+                { value: 12, color: "red2" },
+                { value: 10, color: "red" },
+                { value: 1, color: "red" },
+            ]);
+        }
     }
-  }
-})
+});
 
 //黄板点击事件监听
-eventBus.on('click:yellowBlock',(e)=>{
-  const arr = ["113.61396985128522","113.61390710255375","113.61491218688275"]
-  if(arr[0]==e){
-    urls.value = ["HB-ws0y1menggxv"]
-    urlsIndex.value = 0
-  }
-  if(arr[1]==e){
-    urls.value = ["HB-ws0y1mg0pvd" ]
-    urlsIndex.value = 3
-  }
-if(arr[2]==e){
-    urls.value = ["HB-ws0y1mg9wpcp"]
-    urlsIndex.value = 6
-  }
-  eventBus.emit('dialog:show',true)
-})
-
-const showPoint = ref(true)
-const showType = ref("point")
+eventBus.on("click:yellowBlock", (e) => {
+    const arr = ["113.61396985128522", "113.61390710255375", "113.61491218688275"];
+    if (arr[0] == e) {
+        urls.value = ["HB-ws0y1menggxv"];
+        urlsIndex.value = 0;
+    }
+    if (arr[1] == e) {
+        urls.value = ["HB-ws0y1mg0pvd"];
+        urlsIndex.value = 3;
+    }
+    if (arr[2] == e) {
+        urls.value = ["HB-ws0y1mg9wpcp"];
+        urlsIndex.value = 6;
+    }
+    eventBus.emit("dialog:show", true);
+});
 
+const showPoint = ref(true);
+const showType = ref("point");
 
-eventBus.on('click:updateArea',(e)=>{
-  blueZone.value = e.value
-  btnName.value=e.name
-  regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
-  //getFarmLog()
-})
+eventBus.on("click:updateArea", (e) => {
+    blueZone.value = e.value;
+    btnName.value = e.name;
+    regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
+    //getFarmLog()
+});
 
 const currentComponent = ref("homePage");
 const handleActiveLeft = (e) => {
-  currentComponent.value = e.componentName;
-  if(e.title==='首页'){
-    router.push('/warningHome')
-  }
+    currentComponent.value = e.componentName;
+    if (e.title === "首页") {
+        router.push("/warningHome");
+    }
 };
 const leftToolList = [
-  {
-    title: "首页",
-    name: "home",
-    componentName: "homePage",
-  },
-  {
-    title: "气象预警",
-    componentName: "weatherPage",
-  },
-  {
-    title: "物候调节",
-    componentName: "phenologyPage",
-  },
-  {
-    title: "病虫测报",
-  },
-  {
-    title: "营养评估",
-  },
+    {
+        title: "首页",
+        name: "home",
+        componentName: "homePage",
+    },
+    {
+        title: "气象预警",
+        componentName: "weatherPage",
+    },
+    {
+        title: "物候调节",
+        componentName: "phenologyPage",
+    },
+    {
+        title: "病虫测报",
+    },
+    {
+        title: "营养评估",
+    },
 ];
 
-const rightIndex = ref(0)
-const handleActiveRight = ({index}) => {
-    rightIndex.value = index
-    btnIndex.value = null
-    btnName.value = ""
-    samplePointLayer.updateAreaStatus(false)
-    regionLayer.resetData()
-    samplePointLayer.resetPoint()
-    if(index!==0){
-      act.value = null
+const rightIndex = ref(0);
+const handleActiveRight = ({ index }) => {
+    rightIndex.value = index;
+    btnIndex.value = null;
+    btnName.value = "";
+    samplePointLayer.updateAreaStatus(false);
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+    if (index !== 0) {
+        act.value = null;
     }
 };
-const hanleRightIndex = (num) =>{
-  rightIndex.value = num
-  eventBus.emit('tool:updateAct',num)
-}
+const hanleRightIndex = (num) => {
+    rightIndex.value = num;
+    eventBus.emit("tool:updateAct", num);
+};
 const rightToolList = [
-  {
-    title: "农事列表",
-    index:0,
-  },
-  {
-    title: "处方分析",
-    index:2,
-  },
-  {
-    title: "复核对比",
-    index:1,
-  },
+    {
+        title: "农事列表",
+        index: 0,
+    },
+    {
+        title: "处方分析",
+        index: 2,
+    },
+    {
+        title: "复核对比",
+        index: 1,
+    },
 ];
 
 // 跳转果园档案
 const toFilePage = () => {
-  router.push('/garden-file')
-}
+    router.push("/garden-file");
+};
+
+
+// 地图图例
+const showMapLegend = ref(true);
+const handleLegend = (e) => {
+  blueRegionLayer.toggleLayer(e);
+};
+
 </script>
 
 <style lang="scss" scoped>
 .base-container {
-  width: 100%;
-  height: 100vh;
-  color: #fff;
-  position: absolute;
-  box-sizing: border-box;
-  z-index: 1;
-
-  .content {
     width: 100%;
-    height: calc(100% - 74px - 48px);
-    display: flex;
-    justify-content: space-between;
+    height: 100vh;
+    color: #fff;
+    position: absolute;
     box-sizing: border-box;
-    .left,
-    .right {
-      width: calc(376px + 54px);
-      height: 100%;
-      margin-top: 10px;
-      box-sizing: border-box;
-      display: flex;
-      position: relative;
-    }
-    .left{
-      background: #101010;
-      border-radius: 4px;
-      border: 1px solid #444444;
-      .arrow{
-        position: absolute;
-        right: -16px;
-        top:calc(50% - 40px);
-        background: #fff;
-        width: 16px;
-        height: 80px;
-        line-height: 80px;
-        border-radius: 0 5px 5px 0;
-        text-align: center;
-        cursor: pointer;
-      }
-    }
-    .right {
-      .list {
+    z-index: 1;
+
+    .content {
         width: 100%;
-        height: 100%;
-        .btn-wrap{
-          width: 100%;
-          height: 25px;
-          line-height: 25px;
-          margin: 10px 0;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          div{
-            width: 48%;
+        height: calc(100% - 74px - 48px);
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        .left,
+        .right {
+            width: calc(376px + 54px);
             height: 100%;
-            color: #FFD489;
-            border: 1px solid rgba(255,213,137,0.6);
-            border-radius: 2px;
-            text-align: center;
-            font-size: 12px;
-            cursor: pointer;
-            &.active{
-              background: #FFD489;
-              color: #000;
-            }
-          }
-        }
-        .img-box{
-          width: 100%;
-          height: calc(100% - 35px);
-          overflow: auto;
-        }
-        .img-box1{
-          width: 100%;
-          height: calc(100% - 10px);
-          overflow: auto;
-          margin-top: 10px;
-        }
-        .img-box2{
-          width: 100%;
-          height: calc(100% - 45px);
-          overflow: auto;
-          margin-top: 10px;
-        }
-        img{
-          width: 100%;
-          height: auto;
-          object-fit: cover;
-          margin-bottom: 12px;
-          cursor: pointer;
+            margin-top: 10px;
+            box-sizing: border-box;
+            display: flex;
+            position: relative;
         }
-        .mt{
-          margin-top: -12px;
+        .left {
+            background: #101010;
+            border-radius: 4px;
+            border: 1px solid #444444;
+            .arrow {
+                position: absolute;
+                right: -16px;
+                top: calc(50% - 40px);
+                background: #fff;
+                width: 16px;
+                height: 80px;
+                line-height: 80px;
+                border-radius: 0 5px 5px 0;
+                text-align: center;
+                cursor: pointer;
+            }
         }
-        .list-wrap {
-          ::v-deep {
-            .chart-content {
-              padding: 16px 0 0 0;
+        .right {
+            .list {
+                width: 100%;
+                height: 100%;
+                .btn-wrap {
+                    width: 100%;
+                    height: 25px;
+                    line-height: 25px;
+                    margin: 10px 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    div {
+                        width: 48%;
+                        height: 100%;
+                        color: #ffd489;
+                        border: 1px solid rgba(255, 213, 137, 0.6);
+                        border-radius: 2px;
+                        text-align: center;
+                        font-size: 12px;
+                        cursor: pointer;
+                        &.active {
+                            background: #ffd489;
+                            color: #000;
+                        }
+                    }
+                }
+                .img-box {
+                    width: 100%;
+                    height: calc(100% - 35px);
+                    overflow: auto;
+                }
+                .img-box1 {
+                    width: 100%;
+                    height: calc(100% - 10px);
+                    overflow: auto;
+                    margin-top: 10px;
+                }
+                .img-box2 {
+                    width: 100%;
+                    height: calc(100% - 45px);
+                    overflow: auto;
+                    margin-top: 10px;
+                }
+                img {
+                    width: 100%;
+                    height: auto;
+                    object-fit: cover;
+                    margin-bottom: 12px;
+                    cursor: pointer;
+                }
+                .mt {
+                    margin-top: -12px;
+                }
+                .list-wrap {
+                    ::v-deep {
+                        .chart-content {
+                            padding: 16px 0 0 0;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
-    }
-    .overflow{
-      overflow: auto;
-    }
-    .home-bottom {
-      display: flex;
-      align-items: flex-end;
-      width: calc(100% -  60px - 430px * 2 );
-      height: 152px;
-      align-self: flex-end;
-      .time-wrap{
-        height: 85px;
-      }
-      .fly-icon{
-        width: 148px;
-        height: 100%;
-        margin-left: 27px;
-      }
-      .log-box {
-        height: 34%;
-        width: calc(100% - 340px - 28px);
-        margin-right: 28px;
-        .box-name{
-          width: 89px;
-          height: 22px;
-          text-align: center;
-          line-height: 22px;
-          border-radius: 20px;
-          margin: 10px 0 5px 6px;
-          cursor: pointer;
-          background: linear-gradient(0deg,#BBA269 0%, #3D3523 100%);
+        .overflow {
+            overflow: auto;
         }
-        .log-content {
-          font-size: 12px;
-          line-height: 1.5;
-          padding: 0 18px;
+        .home-bottom {
+            display: flex;
+            align-items: flex-end;
+            width: calc(100% - 60px - 430px * 2);
+            height: 152px;
+            align-self: flex-end;
+            .time-wrap {
+                height: 85px;
+            }
+            .fly-icon {
+                width: 148px;
+                height: 100%;
+                margin-left: 27px;
+            }
+            .log-box {
+                height: 34%;
+                width: calc(100% - 340px - 28px);
+                margin-right: 28px;
+                .box-name {
+                    width: 89px;
+                    height: 22px;
+                    text-align: center;
+                    line-height: 22px;
+                    border-radius: 20px;
+                    margin: 10px 0 5px 6px;
+                    cursor: pointer;
+                    background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
+                }
+                .log-content {
+                    font-size: 12px;
+                    line-height: 1.5;
+                    padding: 0 18px;
+                }
+                .chart-wrap {
+                    width: 100%;
+                    height: calc(100% - 50px);
+                    .line {
+                        margin-top: 10px;
+                        margin-bottom: 12px;
+                    }
+                    img {
+                        width: 100%;
+                        margin-bottom: 10px;
+                    }
+                }
+            }
+
+            .file-box {
+                height: 25%;
+                min-height: 210px;
+                width: 340px;
+                position: relative;
+                img {
+                    width: 100%;
+                    margin-top: 12px;
+                }
+                .arrow-icon {
+                    top: -32px;
+                    left: 50%;
+                    position: absolute;
+                    background: #fff;
+                    width: 16px;
+                    height: 80px;
+                    line-height: 80px;
+                    border-radius: 5px 0 0 5px;
+                    text-align: center;
+                    transform: translateX(-50%) rotate(270deg);
+                }
+                .edit-btn {
+                    padding: 2px 24px;
+                    background: #ffd489;
+                    border-radius: 4px;
+                    color: #000;
+                }
+            }
         }
-        .chart-wrap{
-          width: 100%;
-          height: calc(100% - 50px);
-          .line{
-            margin-top: 10px;
-            margin-bottom: 12px;
-          }
-          img{
-            width: 100%;
-            margin-bottom: 10px;
-          }
+        .legend {
+            position: fixed;
+            bottom: 8px;
+            right: 64px;
+            width: 525px;
+            height: 16px;
         }
-      }
-
-      .file-box {
-        height: 25%;
-        min-height: 210px;
-        width: 340px;
-        position: relative;
-        img{
-          width: 100%;
-          margin-top: 12px;
+        .map-bg {
+            position: fixed;
+            z-index: 2;
+            background: rgba(35, 35, 35, 0.8);
+            border-radius: 18px;
+            padding: 7px 16px;
+            right: 440px;
         }
-        .arrow-icon {
-          top: -32px;
-          left: 50%;
-          position: absolute;
-          background: #fff;
-          width: 16px;
-          height: 80px;
-          line-height: 80px;
-          border-radius: 5px 0 0 5px;
-          text-align: center;
-          transform: translateX(-50%) rotate(270deg);
+        .map-btn {
+            top: 19px;
+            cursor: pointer;
         }
-        .edit-btn {
-          padding: 2px 24px;
-          background: #FFD489;
-          border-radius: 4px;
-          color: #000;
+        .map-legend {
+            bottom: 34px;
+            .item {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                img {
+                    width: 16px;
+                    margin-right: 6px;
+                }
+            }
+            .legend-title {
+                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
+            }
+            .item + .item {
+                padding-top: 10px;
+            }
         }
-      }
-    }
-    .legend{
-      position: fixed;
-      bottom: 8px;
-      right: 64px;
-      width: 525px;
-      height: 16px;
     }
-  }
 }
 .bottom-map {
-  width: 100%;
-  height: 100vh;
-  position: absolute;
-  z-index: 0;
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    z-index: 0;
 }
 </style>

src/views/home/map/blueRegionLayer.js

@@ -32,6 +32,10 @@ class BlueRegionLayer {
             this.kmap.fit(this.blueRegionLayer.source.getExtent(), {padding:[100,100,100,100]});
         }
     }
+
+    toggleLayer(val) {
+        this.blueRegionLayer.layer.setVisible(val)
+    }
 }
 
 export default BlueRegionLayer;

src/views/home/map/samplePointLayer.js

@@ -123,7 +123,7 @@ class SamplePointLayer {
           if(that.isUpdatePoint){
             fs.set("iconName", "active");
           }
-          eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId")})
+          eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), geoHash:fs.get("geoHash")})
         }
         if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
           hasFeature = true