fix: 对接左侧生态生长病虫指标

src/api/modules/home.js

@@ -10,7 +10,7 @@ module.exports = {
     type: "get",
   },
   farmIndexReport: {
-    url: config.base_url + "farm/farmIndexReport",
+    url: config.base_url + "farm/farmIndexReport2",
     type: "get",
   },
 };

src/components/chartBox.vue

@@ -61,6 +61,7 @@ const handleShrink = () =>{
     border-bottom: 0.6px solid rgb(255, 255, 255, 0.4);
     padding-right: 12px;
     box-sizing: border-box;
+    flex: none;
     .name {
       display: flex;
       align-items: center;

src/components/navigation.vue

@@ -7,7 +7,7 @@
             <div
                 class="tab-item"
                 @click="handleTab(item)"
-                :class="{ active: active === item.id }"
+                :class="{ active: active === item.name }"
                 v-for="(item, index) in ele"
                 :key="index"
             >
@@ -15,7 +15,7 @@
             </div>
         </div>
         <el-checkbox-group
-            v-show="childrenData.length"
+            v-show="childrenData && childrenData.length"
             class="checkbox-group"
             v-model="checkedChildren"
             @change="handleCheckedChange"
@@ -45,9 +45,11 @@
 
 <script setup>
 import { useRouter } from "vue-router";
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import { useStore } from "vuex";
 import eventBus from "@/api/eventBus";
 const router = useRouter();
+const store = useStore();
 
 const areaId = ref("");
 const options = ref([]);
@@ -79,6 +81,7 @@ onMounted(()=>{
     eventBus.on('handleActive',handleActive)
     eventBus.on('quitCompare', handleQuitCompare)
 })
+const mainMenuArr = computed(() => store.state.home.mainMenu);
 
 onUnmounted(()=>{
     eventBus.off('handleActive',handleActive)
@@ -91,6 +94,7 @@ const checkedChildren = ref([]);
 const childrenData = ref([]);
 const handleCheckedChange = (e) => {
     if(e.length){
+        console.log('handleCheckedChange', e);
         checkedChildren.value = [e[e.length -1]];
         emit('handleTabItem',checkedChildren.value[0])
         eventBus.emit('handleTabItem',checkedChildren.value[0])
@@ -99,23 +103,26 @@ const handleCheckedChange = (e) => {
 
 function handleActive({name,key}){
     childrenData.value = []
-    const arr = list.value[0].filter(item =>item.name===key)
-    active.value = arr[0].id;
-    childrenData.value = arr[0].children
+    const menuItem = mainMenuArr.value.find(item =>item.name===key)
+    active.value = menuItem.name;
+    childrenData.value = menuItem.btnGroup
     checkedChildren.value = [name]
 
-    emit('handleTab',{name:arr[0].name,id:active.value,isUpdate:true,params:name})
+    emit('handleTab',{name:menuItem.name,id:active.value,isUpdate:true,params:name, legend: menuItem?.legend, colorObj: menuItem?.colorObj})
 }
 
-const active = ref(0);
-const handleTab = ({ id, name,children }) => {
-    active.value = id;
+const active = ref("果园总览");
+const handleTab = ({ id, name }) => {
+    active.value = name;
     childrenData.value = []
-    if(children){
-        childrenData.value = children;
-        checkedChildren.value = [children[0]];
+    const menuItem = mainMenuArr.value.find(item =>item.name===name)
+    console.log('menuItem', menuItem);
+    if(menuItem){
+        childrenData.value = menuItem.btnGroup
+        checkedChildren.value = [menuItem.btnGroup[0]];
     }
-    emit('handleTab',{name,id})
+    emit('handleTab',{name,id, legend: menuItem?.legend, colorObj: menuItem?.colorObj})
+    // eventBus.emit("changePointType", {legend: menuItem?.legend, colorObj: menuItem?.colorObj})
     eventBus.emit('handleTab',name)
 };
 
@@ -138,17 +145,17 @@ const list = ref([
         {
             name: "生态指标",
             id: 3,
-            children: ["通风率", "清园程度","益草覆盖度"],
+            children: [],
         },
         {
             name: "生长指标",
             id: 4,
-            children: ["生长缓慢", "花量大","花带叶"],
+            children: [],
         },
         {
-            name: "病虫等级",
+            name: "病虫指标",
             id: 5,
-            children: ["病害比例", "虫害比例"],
+            children: [],
         },
         {
             name: "农事处方",

src/store/modules/home/index.js

@@ -0,0 +1,18 @@
+export default {
+    namespaced: true,
+    state() {
+        return {
+            mainMenu: []
+        }
+    },
+    getters: {
+    },
+    mutations: {
+        SET_MAIN_MENU(state, val) {
+            state.mainMenu = val
+        },
+    },
+    actions: {
+        
+    },
+};

src/views/home/components/homePage.vue

@@ -6,39 +6,35 @@
                     <div class="button" @click="gybg">果园报告</div>
                 </template> -->
                 <div class="base-wrap">
-                    <div
-                        class="base-item"
-                        v-for="(item, index) in baseData.labels"
-                        :key="index"
-                    >
+                    <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
                         <div class="label">{{ item }}风险</div>
-                        <div class="value">{{ baseData.valueMaxList[index].toFixed(0)}}<span>%</span></div>
+                        <div class="value">{{ baseData.valueMaxList[index].toFixed(0) }}<span>%</span></div>
                     </div>
                 </div>
                 <!-- <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart> -->
                 <weatherChart class="line-chart"></weatherChart>
             </chart-box>
         </div>
-<!--        <div class="chart-item phenology">-->
-<!--            <chart-box name="基本指标">-->
-<!--                <template #title-right>-->
-<!--                    <tabs :list="btnGroup"></tabs>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>-->
-<!--                  <div class="tips box-bg">-->
-<!--                  <div class="text" v-for="item in 3" :key="item">-->
-<!--                    桂味：<span>占比30％，分布在2区、5区</span>-->
-<!--                  </div>-->
-<!--                </div> &ndash;&gt;-->
-<!--                <div class="box-flex">-->
-<!--                    <div class="box-card">-->
-<!--                        <div class="box-desc">当前分区无品种信息，请确权</div>-->
-<!--                        <div class="box-button" @click="handlePage">立即确权</div>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </chart-box>-->
-<!--        </div>-->
-        <div class="chart-item phenology">
+        <!--        <div class="chart-item phenology">-->
+        <!--            <chart-box name="基本指标">-->
+        <!--                <template #title-right>-->
+        <!--                    <tabs :list="btnGroup"></tabs>-->
+        <!--                </template>-->
+        <!--                &lt;!&ndash; <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>-->
+        <!--                  <div class="tips box-bg">-->
+        <!--                  <div class="text" v-for="item in 3" :key="item">-->
+        <!--                    桂味：<span>占比30％，分布在2区、5区</span>-->
+        <!--                  </div>-->
+        <!--                </div> &ndash;&gt;-->
+        <!--                <div class="box-flex">-->
+        <!--                    <div class="box-card">-->
+        <!--                        <div class="box-desc">当前分区无品种信息，请确权</div>-->
+        <!--                        <div class="box-button" @click="handlePage">立即确权</div>-->
+        <!--                    </div>-->
+        <!--                </div>-->
+        <!--            </chart-box>-->
+        <!--        </div>-->
+        <!-- <div class="chart-item phenology">
             <chart-box name="物候指标">
                 <template #title-right>
                     <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
@@ -55,21 +51,21 @@
                     </div>
                 </div>
             </chart-box>
-        </div>
+        </div> -->
         <div class="chart-item phenology">
-            <chart-box name="病虫指标">
+            <chart-box name="生态指标">
                 <template #title-right>
-                    <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
+                    <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
                 </template>
                 <bar-chart
                     class="bar-chart"
                     styleName="styleName1"
-                    :xData="diseasesObj.xData"
-                    :yData="diseasesObj.yData"
+                    :xData="ecologyObj.xData"
+                    :yData="ecologyObj.yData"
                 ></bar-chart>
                 <div class="tips box-bg">
-                    <div class="text" v-for="(item, index) in diseasesObj.text" :key="index">
-                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
+                    <div class="text" v-for="(item, index) in ecologyObj.text" :key="index">
+                        {{ item.key }}：<span>{{ item.val }}</span>
                     </div>
                 </div>
             </chart-box>
@@ -92,7 +88,7 @@
                     <div class="text-item" v-for="(item, index) in growObj.text" :key="index">
                         <div class="circle"></div>
                         <div class="txt">
-                            {{ item[0].slice(0, 2) }}占比<span>{{ item[3] }}％</span>
+                            {{ item.key }}：<span>{{ item.val }}</span>
                         </div>
                     </div>
                     <!-- <div class="text" v-for="(item,index) in growObj.text" :key="index">
@@ -102,19 +98,19 @@
             </chart-box>
         </div>
         <div class="chart-item phenology">
-            <chart-box name="生态指标">
+            <chart-box name="病虫指标">
                 <template #title-right>
-                    <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
+                    <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
                 </template>
                 <bar-chart
                     class="bar-chart"
                     styleName="styleName1"
-                    :xData="ecologyObj.xData"
-                    :yData="ecologyObj.yData"
+                    :xData="diseasesObj.xData"
+                    :yData="diseasesObj.yData"
                 ></bar-chart>
                 <div class="tips box-bg">
-                    <div class="text" v-for="(item, index) in ecologyObj.text" :key="index">
-                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
+                    <div class="text" v-for="(item, index) in diseasesObj.text" :key="index">
+                        {{ item.key }}：<span>{{ item.val }}</span>
                     </div>
                 </div>
             </chart-box>
@@ -135,23 +131,23 @@ import { useRouter } from "vue-router";
 const store = useStore();
 const router = useRouter();
 
-const baseData = ref({})
-const minData = ref([])
-const lineYdata = ref([])
+const baseData = ref({});
+const minData = ref([]);
+const lineYdata = ref([]);
 
-const getBaseData = () =>{
-  const point = sessionStorage.getItem('point')
-  VE_API.mini_farm.weather_warning_land_check({point}).then(res =>{
-    baseData.value = res.data || {}
-  })
+const getBaseData = () => {
+    const point = sessionStorage.getItem("point");
+    VE_API.mini_farm.weather_warning_land_check({ point }).then((res) => {
+        baseData.value = res.data || {};
+    });
 
-  // 获取气象图表数据
-//   VE_API.mini_farm.gardenItemChart({point}).then(res =>{
-//     console.log('tq', res.data)
-//     minData.value = res.data.weatherData.map(item =>item.tempMin)
-//     lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
-//   })
-}
+    // 获取气象图表数据
+    //   VE_API.mini_farm.gardenItemChart({point}).then(res =>{
+    //     console.log('tq', res.data)
+    //     minData.value = res.data.weatherData.map(item =>item.tempMin)
+    //     lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
+    //   })
+};
 
 onMounted(() => {
     //选项子项监听事件
@@ -186,44 +182,52 @@ const handleActive = ({ index, key }) => {
     }
 };
 
-function handleData(name) {
+const menuList = ref([]);
+function handleData(name, isChange = true) {
+    console.log('handleData', name);
     const arr = reportData.value.filter((item) => item.key === name);
     const source = arr[0].obj;
-    if (!source.blueZoneLegendList) {
-        source.blueZoneLegendList = source.legendList;
-    }
-    let list1 = source.list1[curIndex.value].list;
-    let datas = [];
-    for (let item of source.blueZoneLegendList[curIndex.value].list) {
-        let data = list1.find((i) => i.key === item.name);
-        if (data) {
-            datas.push(data);
-        } else {
-            datas.push({ key: item.name, val: 0 });
-        }
-    }
+
+    let nameArr = [];
+    let valueArr = [];
+    const statItem = source.geoHashSampleStat[curIndex.value];
+    nameArr = source.legendList.find((legendSubItem) => legendSubItem.key === statItem.key);
+    valueArr = nameArr.list.map((legendSubItem) => statItem.obj[legendSubItem.val] || 0);
+
     const obj = {
-        btnGroup: source.titleList,
-        xData: datas.map((item) => item.key),
-        yData: datas.map((item) => item.val.toFixed(0)),
-        text: source.list2[curIndex.value].list,
+        // btnGroup: source.titleList,
+        btnGroup: source.geoHashSampleStat.map((item) => item.key),
+        xData: nameArr.list.map((item) => item.name),
+        yData: valueArr,
+        text: [source.list2[curIndex.value]],
         content: source.text,
     };
+    menuList.value.push({
+        name,
+        btnGroup: source.geoHashSampleStat.map((item) => item.key),
+        legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key),
+        colorObj: nameArr
+    });
+    if (isChange) {
+        eventBus.emit("changePointType", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
+        console.log(' menuList.value', menuList.value);
+    }
     return obj;
 }
 
 function areaId({ areaId, farmId }) {
     getReoprt(areaId, farmId);
-    getBaseData()
+    getBaseData();
 }
 
 const getReoprt = (areaId, farmId) => {
     VE_API.home.farmIndexReport({ farmId, regionId: areaId }).then((res) => {
         reportData.value = res.data || [];
-        phenologyObj.value = handleData("物候指标");
-        diseasesObj.value = handleData("病虫指标");
-        growObj.value = handleData("生长指标");
-        ecologyObj.value = handleData("生态指标");
+        // phenologyObj.value = handleData("物候指标");
+        diseasesObj.value = handleData("病虫指标", false);
+        growObj.value = handleData("生长指标", false);
+        ecologyObj.value = handleData("生态指标", false);
+        store.commit("home/SET_MAIN_MENU", menuList.value);
     });
 };
 
@@ -351,14 +355,14 @@ const gybg = () => {
                 .value {
                     font-size: 18px;
                     font-family: "PangMenZhengDao";
-                    span{
-                      font-size: 12px;
+                    span {
+                        font-size: 12px;
                     }
                 }
             }
         }
         .line-chart {
-          height: calc(100% - 56px);
+            height: calc(100% - 56px);
         }
         .box-bg {
             border-radius: 2px 2px 0 0;

src/views/home/components/tabs.vue

@@ -79,6 +79,7 @@ watch(()=>props.active,(newValue,oldValue)=>{
         padding: 3px 8px;
         margin-left: 8px;
         cursor: pointer;
+        flex: none;
         &.active {
             background: #4f4f4f;
         }

src/views/home/index.vue

@@ -236,7 +236,7 @@ onMounted(() => {
     //区域切换监听事件
     eventBus.on("area:id", areaId);
     //选项卡子项事件监听
-    eventBus.on("handleTabItem", handleTabItem);
+    // eventBus.on("handleTabItem", handleTabItem);
     // 是否开启指标对比
     eventBus.on("compareTree", handleCompare)
     eventBus.on("clickToCompare:point", toggleCompare);
@@ -244,7 +244,7 @@ onMounted(() => {
 
 onUnmounted(() => {
     eventBus.off("area:id", areaId);
-    eventBus.off("handleTabItem", handleTabItem);
+    // eventBus.off("handleTabItem", handleTabItem);
     eventBus.off("compareTree", handleCompare)
     eventBus.off("clickToCompare:point", toggleCompare);
 });
@@ -297,7 +297,9 @@ const regionId = ref(null);
 const tabName = ref("");
 const tabId = ref(0);
 //选项卡事件监听
-const handleTab = async ({ name, id, isUpdate, params }) => {
+const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
+    eventBus.emit("changePointType", {legend, colorObj})
+    console.log('name, id, isUpdate, params', name, id, isUpdate, params, legend, colorObj);
     tabName.value = name;
     tabId.value = id;
     if (id === 0) {
@@ -313,6 +315,8 @@ const handleTab = async ({ name, id, isUpdate, params }) => {
             }
         });
     }
+    // 切换点位数据
+    // samplePointLayer.changePointType(name, params)
 };
 
 //区域切换监听事件
@@ -329,14 +333,15 @@ function areaId({ areaId, farmId }) {
 
 //选项卡子项事件监听
 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");
-    }
+    console.log('eeeeeeeeee', e, reportData.value);
+    // 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");
+    // }
 };
 
 const reportData = ref({});

src/views/home/map/samplePointLayer.js

@@ -7,11 +7,12 @@ import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT.js";
 import ScaleLine from "ol/control/ScaleLine";
 import { useRouter } from "vue-router";
-import {unByKey} from "ol/Observable";
+import { unByKey } from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
-import {Cluster, Vector as VectorSource} from "ol/source";
-import {newPoint} from "@/utils/map";
+import { Cluster, Vector as VectorSource } from "ol/source";
+import { Fill, Circle, Stroke } from "ol/style";
+import { newPoint } from "@/utils/map";
 import eventBus from "@/api/eventBus";
 import Overlay from 'ol/Overlay'
 
@@ -36,12 +37,13 @@ class SamplePointLayer {
     this.isUpdatePoint = null
     this.isUpdateArea = null
 
-    this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
-      minZoom:15,
-      source:this.clusterSource,
-      style:(f)=> this.getStyle(f)})
-    this.yellowBlockLayer = new KMap.VectorLayer("yellow-block",999,{
-      minZoom:15,
+    this.treeClusterLayer = new KMap.VectorLayer("tree-cluster", 999, {
+      minZoom: 15,
+      source: this.clusterSource,
+      style: (f) => this.getStyle(f)
+    })
+    this.yellowBlockLayer = new KMap.VectorLayer("yellow-block", 999, {
+      minZoom: 15,
       // source:this.clusterSource,
       // source:"POINT(113.61396985128522 23.5859386716038)",
       style: () => {
@@ -56,9 +58,9 @@ class SamplePointLayer {
     map.addLayer(this.treeClusterLayer.layer)
     // map.addLayer(this.yellowBlockLayer.layer);
 
-    let point = new Feature(new Point([113.61396985128522,23.5859386716038]));
-    let point1 = new Feature(new Point([113.61390710255375 ,23.586379215663726]));
-    let point2 = new Feature(new Point([113.61491218688275 ,23.58671519555776]));
+    let point = new Feature(new Point([113.61396985128522, 23.5859386716038]));
+    let point1 = new Feature(new Point([113.61390710255375, 23.586379215663726]));
+    let point2 = new Feature(new Point([113.61491218688275, 23.58671519555776]));
     // this.yellowBlockLayer.addFeature(point);
     // this.yellowBlockLayer.addFeature(point1);
     // this.yellowBlockLayer.addFeature(point2);
@@ -84,8 +86,18 @@ class SamplePointLayer {
       console.log('name', name);
     })
     that.blueRegionLayer = null
+    that.pointType = ""
+    that.pointArr = []
+
+    // 切换点位图标
+    eventBus.off("changePointType")
+    eventBus.on("changePointType", ({ legend, colorObj }) => {
+      console.log('legend, colorObj', legend, colorObj);
+      that.togglePointType(legend, colorObj)
+    })
   }
-  getIconStyle(feature){
+  getIconStyle(feature) {
+    const color = feature.get("color")
     const activeCompare = feature.get('activeCompare')
     let style = new Style({
       image: new Icon({
@@ -94,36 +106,50 @@ class SamplePointLayer {
         scale: activeCompare ? 0.5 : feature.get('scale'),
       })
     });
-    return style
+
+    let style2 = new Style({
+      image: new Circle({
+        radius: 6,                             // 半径
+        stroke: new Stroke({           // 边界样式
+          color: '#fff',                    // 边界颜色
+          width: 2                            // 边界宽度
+        }),
+        fill: new Fill({               // 填充样式
+          color                    // 填充颜色
+        })
+      })
+    });
+    return color ? (activeCompare ? style : style2) : style
   }
   //多点的过滤方法
-  manyFeatureFilter(features){
+  manyFeatureFilter(features) {
     let res = features[0]
-    if(features.length == 1){
+    if (features.length == 1) {
       return res
     }
-    for(let item of features){
+    for (let item of features) {
       res = res.get('status') > item.get('status') && item.get('noImg') === 0 && item.get('wys') === 1 ? res : item
     }
     return res;
   }
   //得到点样式
-  getStyle(feature){
+  getStyle(feature) {
     feature = this.manyFeatureFilter(feature.get('features'))
     return this.getIconStyle(feature)
   }
 
-  initData(farmId, regionId){
+  initData(farmId, regionId) {
     let that = this
     let selectAll = undefined
-    if(regionId===0){
-        selectAll = 1
+    if (regionId === 0) {
+      selectAll = 1
     }
-    const areaId = selectAll?undefined:regionId
-    VE_API.variety.pointList({farmId, regionId: areaId, selectAll}).then(({data})=>{
+    const areaId = selectAll ? undefined : regionId
+    VE_API.variety.pointList({ farmId, regionId: areaId, selectAll }).then(({ data }) => {
+      this.pointArr = data
       let features = []
-      for(let item of data){
-        item.iconName='defalut'
+      for (let item of data) {
+        item.iconName = 'defalut'
         that.getIcon(item)
         let point = newPoint(item);
         features.push(point)
@@ -133,40 +159,94 @@ class SamplePointLayer {
         features: features,
       });
       that.clusterSource.setSource(source)
-      setTimeout(()=>{
-        that.mapRef.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
-      },100)
+      setTimeout(() => {
+        that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
+      }, 100)
     })
   }
 
-  
-toggleFilePoint(arr) {
-  let that = this
-  // 清除旧的 blueRegionLayer 图层
-  that.clearCluster()
-  if (that.blueRegionLayer) {
-    that.blueRegionLayer.source.clear();
-  }
-  if(arr&&arr.length>0){
-    let features = []
-    for(let item of arr){
-      item.iconName='defalut'
-      that.getIcon(item)
-      let point = newPoint(item);
-      features.push(point)
-      // console.log('item.dyImg',item.dyImg);
+  togglePointType(sampleData, colorObj) {
+    console.log('togglePointType------------', sampleData);
+    let that = this
+    that.clearCluster()
+    if (!sampleData) {
+      let features = []
+      for (let item of this.pointArr) {
+        item.iconName = 'defalut'
+        that.getIcon(item)
+        let point = newPoint(item);
+        features.push(point)
+        // console.log('item.dyImg',item.dyImg);
+      }
+      const source = new VectorSource({
+        features: features,
+      });
+      that.clusterSource.setSource(source)
+      setTimeout(() => {
+        that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
+      }, 100)
+      return
     }
-    const source = new VectorSource({
-      features: features,
+    // 遍历 sampleData
+    Object.entries(sampleData.obj).forEach(([key, geoHashSample]) => {
+      // 根据 key 找到 legend 中的颜色
+      const legendItem = colorObj.list.find(item => item.val === key);
+      const color = legendItem ? legendItem.color : null;
+      if (color && geoHashSample.length > 0) {
+        let features = []
+        this.pointArr.forEach(point => {
+          if (geoHashSample.includes(point.geoHashSample)) {
+            point.iconName = 'defalut'
+            point.color = color
+            that.getIcon(point)
+            let pointRes = newPoint(point);
+            features.push(pointRes)
+          } else {
+            point.iconName = 'defalut'
+            point.color = "#DDDDDD"
+            that.getIcon(point)
+            let pointRes = newPoint(point);
+            features.push(pointRes)
+          }
+        });
+        const source = new VectorSource({
+          features: features,
+        });
+        that.clusterSource.setSource(source)
+        // setTimeout(() => {
+        //   that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
+        // }, 100)
+      }
     });
-    that.clusterSource.setSource(source)
-    setTimeout(()=>{
-      that.mapRef.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
-    },100)
   }
-};
 
-  addMapSingerClick(kmap){
+
+  toggleFilePoint(arr) {
+    let that = this
+    // 清除旧的 blueRegionLayer 图层
+    // that.clearCluster()
+    if (that.blueRegionLayer) {
+      that.blueRegionLayer.source.clear();
+    }
+    if (arr && arr.length > 0) {
+      let features = []
+      for (let item of arr) {
+        item.iconName = 'defalut'
+        that.getIcon(item)
+        let point = newPoint(item);
+        features.push(point)
+      }
+      const source = new VectorSource({
+        features: features,
+      });
+      that.clusterSource.setSource(source)
+      setTimeout(() => {
+        that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
+      }, 100)
+    }
+  };
+
+  addMapSingerClick(kmap) {
     let that = this
     // 创建弹窗图层
     this.popup = new Overlay({
@@ -184,16 +264,16 @@ toggleFilePoint(arr) {
       kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
         if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster") {
           hasFeature = true
-          if(that.curPoint){
+          if (that.curPoint) {
             that.curPoint.set("iconName", "defalut");
           }
           const featureArr = feature.get("features")
           let fs = featureArr[0]
-          for(let item of featureArr){
+          for (let item of featureArr) {
             fs = fs.get('status') > item.get('status') ? fs : item
           }
           that.curPoint = fs
-          if(that.isUpdatePoint){
+          if (that.isUpdatePoint) {
             fs.set("iconName", "active");
           }
           if (!that.isCompare) {
@@ -242,51 +322,50 @@ toggleFilePoint(arr) {
                     <div class="item-val">${fs.get("khl")}%</div>
                 </div>
               `;
-              
+
               document.getElementById('tag-nh').style.display = fs.get("nonghu") == 1 ? "inline-block" : 'none'
               that.popup.setPosition(evt.coordinate)
             } else {
               console.log('fs.getProperties()', fs.getProperties());
-              eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+              eventBus.emit("click:point", { farmId: fs.get("farmId"), sampleId: fs.get("sampleId"), data: fs.getProperties() })
             }
           } else {
             // fs.set("iconName", "active")
             fs.set("activeCompare", fs.get("activeCompare") ? false : true);
             if (fs.get("activeCompare")) {
-              that.comparePointArr.push(fs) 
+              that.comparePointArr.push(fs)
             } else {
               that.comparePointArr = that.comparePointArr.filter(item => item.get("id") !== fs.get("id"))
             }
-            
+
             if (that.comparePointArr.length > 2) {
               that.comparePointArr[0].set("activeCompare", false);
               that.comparePointArr.shift();
             }
-            console.log('that.comparePointArr', that.comparePointArr);
             // fs.set("icon", require('@/assets/images/map/active-icon-small.png'));
-            eventBus.emit("clickToCompare:point",that.comparePointArr)
+            eventBus.emit("clickToCompare:point", that.comparePointArr)
           }
         }
         if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
           hasFeature = true
-          eventBus.emit("click:yellowBlock",feature.get("geometry").flatCoordinates[0])
+          eventBus.emit("click:yellowBlock", feature.get("geometry").flatCoordinates[0])
         }
       })
-      if(!hasFeature){
-          kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-            if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
-              hasFeature = false
-              if(that.curArea){
-                that.curArea.set("bgName", "defalut");
-              }
-              that.curArea = feature
-              if(that.isUpdateArea){
-                feature.set("bgName", "active");
-                eventBus.emit("click:updateArea",{name:feature.get("id"),value:feature.get("blueZone")})
-              }else{
-                eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
-              }
+      if (!hasFeature) {
+        kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+          if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
+            hasFeature = false
+            if (that.curArea) {
+              that.curArea.set("bgName", "defalut");
+            }
+            that.curArea = feature
+            if (that.isUpdateArea) {
+              feature.set("bgName", "active");
+              eventBus.emit("click:updateArea", { name: feature.get("id"), value: feature.get("blueZone") })
+            } else {
+              eventBus.emit("click:area", { name: feature.get("id"), value: feature.get("highYield") })
             }
+          }
         })
         if (that.isCompare) {
           eventBus.emit("quitCompare")
@@ -299,44 +378,46 @@ toggleFilePoint(arr) {
     })
   }
 
-  resetPoint(){
+  resetPoint() {
     this.isUpdatePoint = null
     console.log('this.curPoint', this.curPoint);
-    if(this.curPoint){
+    if (this.curPoint) {
       // this.curPoint.set("iconName", "defalut");
       this.curPoint.set("activeCompare", false);
     }
   }
 
-  updatePointStatus(e){
+  updatePointStatus(e) {
     this.isUpdatePoint = e
   }
 
-  updateAreaStatus(e){
+  updateAreaStatus(e) {
     this.isUpdateArea = e
   }
 
-  getIcon(item){
+  // 切换点位数据
+
+  getIcon(item) {
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     let imgSrc = require('@/assets/images/map/status/status-zc.png')
     let scale = 0.8
-    if(item.status == 1){
+    if (item.status == 1) {
       imgSrc = require('@/assets/images/map/status/status-szyc.png')
     }
-    if(item.status == 2){
+    if (item.status == 2) {
       imgSrc = require('@/assets/images/map/status/status-bh.png')
     }
-    if(item.status == 3){
+    if (item.status == 3) {
       imgSrc = require('@/assets/images/map/status/status-ch.png')
     }
 
-    if(item.wys === '1'){
+    if (item.wys === '1') {
       scale = 0.3
       imgSrc = require('@/assets/images/map/status/wns.png')
     }
 
-    if(item.farmId === 90263){
-      if(item.noImg === 1){
+    if (item.farmId === 90263) {
+      if (item.noImg === 1) {
         imgSrc = require('@/assets/images/map/status/defalut-icon.png')
         scale = 0.3
       }
@@ -346,14 +427,14 @@ toggleFilePoint(arr) {
     item["scale"] = scale
   }
 
-  reset(farm, region){
+  reset(farm, region) {
     this.clearCluster()
     this.initData(farm.id, region.id)
   }
 
   // 清除聚合图层，解除绑定
   clearCluster() {
-    if (this.treeClusterLayer) {
+    if (this.treeClusterLayer && this.treeClusterLayer.layer.getSource().getSource()) {
       this.treeClusterLayer.layer.getSource().getSource().clear()
     }
   }