feat：对接新平台首页头部和菜单和地图联动接口

src/api/modules/home.js

@@ -9,14 +9,18 @@ export default {
     url: config.base_url + "device/closeStreamConverters/{farmId}/{converterId}",
     type: "get",
   },
-  getYellowList: {
-    url: config.base_url + "temp_yellow_board/list",
-    type: "get",
-  },
   userGarden: {
     url: config.base_url + "farm/list",
     type: "post",
   },
+  listByFarmId: {
+    url: config.base_url + "container_phenology_monitor/list_by_farmId",
+    type: "get",
+  },
+  queryWorkCodeSampleParams: {
+    url: config.base_url + "container_phenology_monitor/query_work_code_sample_params",
+    type: "get",
+  },
   farmIndexReport: {
     url: config.base_url + "farm/farmIndexReport2",
     type: "get",

src/components/navigation.vue

@@ -3,29 +3,29 @@
         <el-select class="select" v-model="areaId" size="large" @change="changeSelect" popper-class="focus-farm-select">
             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
-        <div class="tabs" v-for="(ele, idx) in list" :key="idx">
-            <div
-                class="tab-item"
-                @click="handleHomeTab(item)"
-                :class="{ active: active === item.name }"
-                v-for="(item, index) in ele"
-                :key="index"
-            >
-                {{ item.name }}
-            </div>
+        <div class="tabs" v-if="list.length">
+            <template v-for="(item, index) in list" :key="index">
+                <div
+                    class="tab-item"
+                    @click="handleHomeTab(item)"
+                    :class="{ active: active === item.name }"
+                    
+                >
+                    {{ item.name }}
+                </div>
+                <el-checkbox-group
+                    v-show="item.monitorItems && item.name == active"
+                    class="checkbox-group"
+                    v-model="checkedChildren"
+                    @change="handleCheckedChange"
+                    :min="1"
+                >
+                    <el-checkbox v-for="ele in item.monitorItems" :key="ele.id" :label="ele.indicatorName" :value="ele.id">
+                        {{ ele.indicatorName }}
+                    </el-checkbox>
+                </el-checkbox-group>
+            </template>
         </div>
-        <el-checkbox-group
-            v-show="childrenData && childrenData.length"
-            class="checkbox-group"
-            v-model="checkedChildren"
-            @change="handleCheckedChange"
-            :min="1"
-        >
-            <el-checkbox v-for="item in childrenData" :key="item" :label="item" :value="item">
-                {{ item }}
-            </el-checkbox>
-        </el-checkbox-group>
-        <!-- <div class="btn" @click="toPage">农场确权</div> -->
         <!-- 对比 -->
         <el-checkbox-group
             class="checkbox-group compare-btn"
@@ -35,9 +35,6 @@
             <el-checkbox label="指标对比" value="1">
                 指标对比
             </el-checkbox>
-            <el-checkbox label="作物分布" value="2">
-                作物分布
-            </el-checkbox>
         </el-checkbox-group>
 
         <div class="compare-tips" v-show="checkedCompareChildren.length && !checkedCompareChildren.includes('2')">
@@ -62,7 +59,7 @@ eventBus.on('garden:organId',gardenOrganId)
 const organId = ref()
 function gardenOrganId(farmId){
     organId.value = farmId
-    console.log('organId.value', organId.value, farmId);
+    getListByFarmId()
     VE_API.region.list({farmId}).then(res =>{
         options.value = res.data
         options.value.unshift({
@@ -76,13 +73,19 @@ function gardenOrganId(farmId){
 }
 
 const changeSelect = (e) =>{
-    console.log('changeSelect', e);
     eventBus.emit('area:id',{areaId:areaId.value,farmId:organId.value})
     sessionStorage.setItem('regionId',e)
     eventBus.emit('handleTab',)
     active.value = "果园总览"
 }
 
+const getListByFarmId = () =>{
+    VE_API.home.listByFarmId({farmId:organId.value}).then(res =>{
+        list.value = res.data || []
+        monitorData.value = res.data[0].monitorItems || []
+    })
+}
+
 onMounted(()=>{
     gardenOrganId(sessionStorage.getItem('farmId')*1)
     eventBus.on('handleActive',handleActive)
@@ -95,19 +98,82 @@ onUnmounted(()=>{
     eventBus.off('quitCompare', handleQuitCompare)
 })
 
-const emit = defineEmits(["handleTab","handleTabItem"])
+const emit = defineEmits(["handleTab","updateLegend"])
 
 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])
+        const monitorIndicatorId = [e[e.length -1]][0]
+        const legendConfig = monitorData.value.filter(item => item.id === monitorIndicatorId)
+        VE_API.home.queryWorkCodeSampleParams({monitorIndicatorId,farmId:organId.value,regionId:areaId.value || null}).then(res =>{
+            // 解析legendConfig
+            const parsedLegendConfig = JSON.parse(legendConfig[0].legendConfig)
+            // 根据接口返回的val字段匹配range区间
+            let matchedData = matchDataByVal(res.data, parsedLegendConfig)
+            emit('updateLegend',matchedData,parsedLegendConfig)
+        })
     }
 };
 
+// 根据val字段匹配range区间的函数
+const matchDataByVal = (sampleData, legendConfig) => {
+    if (!sampleData || !legendConfig) {
+        return []
+    }
+    
+    // 检查不同的数据结构可能性
+    let legendList = null;
+    if (legendConfig.legendList) {
+        legendList = legendConfig.legendList;
+    } else if (Array.isArray(legendConfig)) {
+        legendList = legendConfig;
+    } else if (legendConfig.list) {
+        legendList = [legendConfig];
+    }
+    
+    if (!legendList) {
+        return []
+    }
+    
+    const matchedResults = []
+    
+    // 遍历样本数据
+    sampleData.forEach((sample) => {
+        const sampleVal = sample.val || sample.value || sample.data
+        
+        if (sampleVal === undefined || sampleVal === null) {
+            return;
+        }
+        
+        // 遍历legend配置中的每个分类
+        legendList.forEach((legendItem) => {
+            // 获取list数组
+            const itemList = legendItem.list || legendItem.items || [legendItem];
+            
+            // 遍历每个分类下的具体项
+            itemList.forEach((configItem) => {
+                // 检查val是否在range区间内
+                if (configItem.range && Array.isArray(configItem.range) && configItem.range.length === 2) {
+                    const [min, max] = configItem.range
+                    
+                    if (sampleVal >= min && sampleVal < max) {
+                        matchedResults.push({
+                            ...sample, // 保留原始样本数据
+                            key: legendItem.key || legendItem.name || 'unknown',
+                            color: configItem.color,
+                            label: configItem.label,
+                            name: configItem.name,
+                        })
+                    }
+                }
+            })
+        })
+    })
+    
+    return matchedResults
+}
+
 function handleActive({name,key}){
     childrenData.value = []
     const menuItem = mainMenuArr.value.find(item =>item.name===key)
@@ -119,11 +185,12 @@ function handleActive({name,key}){
 }
 
 const active = ref("果园总览");
-const handleHomeTab = ({ id, name }) => {
+const monitorData = ref([]);
+const handleHomeTab = ({ id, name , monitorItems}) => {
     active.value = name;
     childrenData.value = []
+    monitorData.value = monitorItems || []
     const menuItem = mainMenuArr.value.find(item =>item.name===name)
-    console.log('menuItem', menuItem);
     if(menuItem){
         childrenData.value = menuItem.btnGroup
         checkedChildren.value = [menuItem.btnGroup[0]];
@@ -133,53 +200,7 @@ const handleHomeTab = ({ id, name }) => {
     eventBus.emit('handleTab',name)
 };
 
-const list = ref([
-    [
-        {
-            name: "果园总览",
-            id: 0,
-        },
-        // {
-        //     name: "基本指标",
-        //     id: 1,
-        //     children: ["树高", "冠幅"],
-        // },
-        // {
-        //     name: "物候指标",
-        //     id: 2,
-        //     children: ["花穗长度", "单树花穗率"],
-        // },
-        {
-            name: "生态指标",
-            id: 3,
-            children: [],
-        },
-        {
-            name: "生长指标",
-            id: 4,
-            children: [],
-        },
-        {
-            name: "病虫指标",
-            id: 5,
-            children: [],
-        },
-        {
-            name: "农事处方",
-            id: 1,
-        },
-    ],
-    // [
-    //     {
-    //         name: "指标对比",
-    //         id: 11,
-    //     },
-    // ],
-]);
-
-const toPage = () => {
-    router.push("/authentic");
-};
+const list = ref([]);
 
 // 对比
 const checkedCompareChildren = ref([]);
@@ -262,8 +283,8 @@ function handleQuitCompare() {
 
     .checkbox-group {
         position: absolute;
-        top: 74px;
-        right: 26px;
+        top: 65px;
+        right: 36px;
         background: rgba(35, 35, 35, 0.8);
         border-radius: 8px;
         border: 1px solid #555555;
@@ -271,7 +292,7 @@ function handleQuitCompare() {
         display: flex;
         flex-direction: column;
         &.compare-btn {
-            right: 26px;
+            right: 40px;
             top: 0px;
         }
         ::v-deep {

src/views/home/index.vue

@@ -2,7 +2,7 @@
     <div class="base-container no-events">
         <fnHeader showDate></fnHeader>
         <div class="content">
-            <navigation style="margin-left: 50px" @handleTab="handleTab"></navigation>
+            <navigation style="margin-left: 50px" @handleTab="handleTab" @updateLegend="updateLegend"></navigation>
             <div class="left yes-events" :class="{ 'collapsed-left': isLeftShrink }">
                 <div class="home-btn">
                     <div class="btn" @click="changeLeftComponent(0)" :class="{ active: activeBtn === 0 }">实时感知</div>
@@ -252,13 +252,11 @@ onMounted(() => {
         // staticMapLayers.
     }
 
-    getYellow();
     // getFarmLog()
 
     //区域切换监听事件
     eventBus.on("area:id", areaId);
     //选项卡子项事件监听
-    // eventBus.on("handleTabItem", handleTabItem);
     // 是否开启指标对比
     eventBus.on("compareTree", handleCompare);
     eventBus.on("clickToCompare:point", toggleCompare);
@@ -266,7 +264,6 @@ onMounted(() => {
 
 onUnmounted(() => {
     eventBus.off("area:id", areaId);
-    // eventBus.off("handleTabItem", handleTabItem);
     eventBus.off("compareTree", handleCompare);
     eventBus.off("clickToCompare:point", toggleCompare);
 });
@@ -338,31 +335,39 @@ const organId = ref(null);
 const regionId = ref(null);
 const tabName = ref("");
 const tabId = ref(0);
-eventBus.off("changePointLegend", toggleLegend);
-eventBus.on("changePointLegend", toggleLegend);
-function toggleLegend({ colorObj }) {
-    legendArr.value = colorObj?.list;
+// eventBus.off("changePointLegend", toggleLegend);
+// eventBus.on("changePointLegend", toggleLegend);
+// function toggleLegend({ colorObj }) {
+//     legendArr.value = colorObj?.list;
+// }
+
+function updateLegend(matchedData,parsedLegendConfig) {
+    legendArr.value = parsedLegendConfig;
+    // 将匹配的数据传递给samplePointLayer进行点位颜色更新
+    if (samplePointLayer && matchedData && matchedData.length > 0) {
+        samplePointLayer.updatePointColors(matchedData);
+    }
 }
+
 //选项卡事件监听
 const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
     eventBus.emit("changePointType", { legend, colorObj });
     legendArr.value = colorObj?.list;
-    console.log("name, id, isUpdate, params", name, id, isUpdate, params, legend, colorObj);
     tabName.value = name;
     tabId.value = id;
-    if (id === 0) {
-        getBlueRegionList(() => {
-            if (isUpdate) {
-                handleTabItem(params);
-            }
-        });
-    } else {
-        getFarmIndexReport(() => {
-            if (isUpdate) {
-                handleTabItem(params);
-            }
-        });
-    }
+    // if (id === 0) {
+    //     getBlueRegionList(() => {
+    //         if (isUpdate) {
+    //             handleTabItem(params);
+    //         }
+    //     });
+    // } else {
+    //     getFarmIndexReport(() => {
+    //         if (isUpdate) {
+    //             handleTabItem(params);
+    //         }
+    //     });
+    // }
     // 切换点位数据
     // samplePointLayer.changePointType(name, params)
 };
@@ -379,18 +384,6 @@ 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");
-    // }
-};
-
 const getFarmIndexReport = (callback) => {
     // const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
     //   VE_API.farm.farmIndexReport(params).then(({data,code}) => {
@@ -424,25 +417,6 @@ const getFarmLog = () => {
 
 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("");

src/views/home/index有认养管理.vue

@@ -1,1096 +0,0 @@
-<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('left')">
-                    <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
-                </div>
-            </div>
-            <div class="home-bottom">
-                <div class="garden-file" :class="{ isShrink: isShrink }">
-                    <home-file></home-file>
-                </div>
-            </div>
-            <div class="right yes-events">
-              <div class="list adopt-list-wrap">
-                <chart-box name="认养管理" arrow="">
-                  <el-tabs v-model="activeName" class="demo-tabs">
-                    <el-tab-pane label="认养列表" name="认养列表">
-                      <adopt-list></adopt-list>
-                    </el-tab-pane>
-                    <el-tab-pane label="客户列表" name="客户列表">
-                      <client-list></client-list>
-                    </el-tab-pane>
-                    <el-tab-pane label="认养申请" name="认养申请">
-                      <apply-list></apply-list>
-                    </el-tab-pane>
-                    <el-tab-pane label="确认地址" name="确认地址">
-                      <address-list></address-list>
-                    </el-tab-pane>
-                  </el-tabs>
-                </chart-box>
-              </div>
-            </div>
-
-            <!-- 图例 -->
-            <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="" /> -->
-            <div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
-                <div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
-                    <span class="legend-block" :style="{background: legend.color}"></span>
-                    {{ legend.name }}
-                </div>
-            </div>
-            <div v-else class="map-bg map-legend yes-events">
-                <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 class="item">
-                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
-                    正常
-                </div>
-                <!-- <div class="item">
-                    <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
-                    无照片
-                </div> -->
-            </div>
-        </div>
-    </div>
-    <div ref="mapRef" class="bottom-map"></div>
-
-    <!-- 图片弹窗 -->
-    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
-    <album-carousel></album-carousel>
-    <PdfDialog title="果园报告"></PdfDialog>
-    <ImageDialog title="溯源报告"></ImageDialog>
-
-    <!-- 对比 -->
-    <compareDialog></compareDialog>
-
-    <div class="compare-start-btn yes-events" v-show="showCompareBtn" @click="showCompare">
-        <img src="@/assets/images/home/compare-btn.png" alt="" />
-    </div>
-
-    <!-- 作物档案 -->
-    <div class="file-wrap map-file" id="popup-file">
-        <div class="file-title">
-            <img src="@/assets/images/common/chart-yellow.png" alt="" />
-            作物档案
-            <span id="tag-nh" class="tag">小农户</span>
-        </div>
-        <div class="overview-file">
-            <div class="box-title">总体档案</div>
-            <div class="base-data" id="file-overview">
-            </div>
-            <div class="list" id="file-text">
-                <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">
-            <div class="box-title">产量信息</div>
-            <div class="box-wrap" id="file-output">
-                <div class="box-item">
-                    <div class="item-name"></div>
-                    <div class="item-val"></div>
-                </div>
-            </div>
-        </div>
-
-        <div class="overview-file">
-            <div class="box-title">生态评估</div>
-            <div class="box-wrap" id="file-quality">
-                <div class="box-item">
-                    <div class="item-name"></div>
-                    <div class="item-val"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { onMounted, onUnmounted, ref } from "vue";
-import config from "@/api/config.js";
-import timeLine from "@/components/timeLine.vue";
-import PicturePreview from "@/components/PicturePreview.vue";
-import fnHeader from "@/components/fnHeader.vue";
-import navigation from "@/components/navigation.vue";
-import chartBox from "@/components/chartBox.vue";
-import toolList from "@/components/toolList.vue";
-import fileBar from "@/components/fileBar.vue";
-import HomeMap from "./map/homeMap";
-import homePage from "./components/homePage.vue";
-import weatherPage from "./components/weatherPage.vue";
-import phenologyPage from "./components/phenologyPage.vue";
-import indicatorChart from "./components/indicatorChart.vue";
-import homeFile from "./components/homeFile - 副本副本.vue";
-import { useRouter } from "vue-router";
-import SamplePointLayer from "./map/samplePointLayer";
-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 compareDialog from "./album_compoents/compareDialog.vue";
-import album from "./album/index.vue";
-import PdfDialog from "../../components/PdfDialog";
-import StaticMapLayers from "@/components/static_map_change/Layers.js"
-import adoptList from "./components/foster/adoptList.vue";
-import clientList from "./components/foster/clientList.vue";
-import applyList from "./components/foster/applyList.vue";
-import addressList from "./components/foster/addressList.vue";
-import ImageDialog from "../../components/ImageDialog";
-
-let store = useStore();
-const components = {
-    homePage,
-    weatherPage,
-    phenologyPage,
-};
-//当前农场
-const currentFarm = {
-    id: store.getters.userinfo.curFarmId,
-    name: store.getters.userinfo.curFarmName,
-};
-const activeName = ref('认养列表')
-//当前区域
-const currentRegion = {
-    id: null,
-    name: null,
-};
-let homeMap = new HomeMap();
-let staticMapLayers = 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);
-    VE_API.warning.fetchWarningLayer({
-      k: "feiniao_static_map",
-      resultType: "json",
-    }).then(({data}) => {
-      staticMapLayers = new StaticMapLayers(homeMap.kmap, data)
-    })
-    blueRegionLayer = new BlueRegionLayer(homeMap.kmap);
-    function changeStaticMapLayers(e){
-      // staticMapLayers.
-    }
-
-    getYellow();
-    // getFarmLog()
-
-    //区域切换监听事件
-    eventBus.on("area:id", areaId);
-    //选项卡子项事件监听
-    // eventBus.on("handleTabItem", handleTabItem);
-    // 是否开启指标对比
-    eventBus.on("compareTree", handleCompare)
-    eventBus.on("clickToCompare:point", toggleCompare);
-});
-
-onUnmounted(() => {
-    eventBus.off("area:id", areaId);
-    // eventBus.off("handleTabItem", handleTabItem);
-    eventBus.off("compareTree", handleCompare)
-    eventBus.off("clickToCompare:point", toggleCompare);
-});
-
-
-function handleCompare(v) {
-    isShrink.value = v
-    if (v === false) {
-        showCompareBtn.value = v
-    }
-}
-
-const blueList = ref([]);
-const getBlueRegionList = (callback) => {
-    let selectAll = undefined;
-    if (regionId.value === 0) {
-        selectAll = 1;
-    }
-    const areaId = selectAll ? undefined : regionId.value;
-    VE_API.farm.blueRegionList({ farmId: organId.value, regionId: areaId, selectAll }).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)";
-                color = "#2BFE00";
-            }
-            if (item.status === 3) {
-                //生长异常
-                // color = "rgba(255, 252, 61, 0.5)";
-                color = "#FF7410";
-            }
-            if (item.status === 4) {
-                //病虫害
-                // color = "rgba(255, 73, 73, 0.5)";
-                color = "#F82121";
-            }
-            return {
-                ...item,
-                color,
-            };
-        });
-        blueRegionLayer.initData(blueList.value);
-        callback && callback();
-    });
-};
-// 图例
-const legendArr = ref([])
-
-const organId = ref(null);
-const regionId = ref(null);
-const tabName = ref("");
-const tabId = ref(0);
-eventBus.off("changePointLegend", toggleLegend)
-eventBus.on("changePointLegend", toggleLegend)
-function toggleLegend({colorObj}) {
-    legendArr.value = colorObj?.list
-}
-//选项卡事件监听
-const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
-    eventBus.emit("changePointType", {legend, colorObj})
-    legendArr.value = colorObj?.list
-    console.log('name, id, isUpdate, params', name, id, isUpdate, params, legend, colorObj);
-    tabName.value = name;
-    tabId.value = id;
-    if (id === 0) {
-        getBlueRegionList(() => {
-            if (isUpdate) {
-                handleTabItem(params);
-            }
-        });
-    } else {
-        getFarmIndexReport(() => {
-            if (isUpdate) {
-                handleTabItem(params);
-            }
-        });
-    }
-    // 切换点位数据
-    // samplePointLayer.changePointType(name, params)
-};
-
-//区域切换监听事件
-function areaId({ areaId, farmId }) {
-    organId.value = farmId;
-    regionId.value = areaId;
-    samplePointLayer.initData(farmId, areaId);
-    if (tabId.value === 0) {
-        getBlueRegionList();
-    } else {
-        getFarmIndexReport();
-    }
-}
-
-//选项卡子项事件监听
-const handleTabItem = (e) => {
-    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({});
-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 {
-                    ...ele,
-                    level: key,
-                    name: filterData[0].name,
-                    color: filterData[0].color,
-                };
-            });
-            list.push(...updateList);
-        });
-    }
-    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 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 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 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" },
-        ]);
-    }
-};
-
-//柱状图点击事件监听
-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: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");
-    }
-};
-const leftToolList = [
-    {
-        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 hanleRightIndex = (num) => {
-    rightIndex.value = num;
-    eventBus.emit("tool:updateAct", num);
-};
-const rightToolList = [
-    {
-        title: "农事列表",
-        index: 0,
-    },
-    {
-        title: "处方分析",
-        index: 2,
-    },
-    {
-        title: "复核对比",
-        index: 1,
-    },
-];
-
-// 跳转果园档案
-const toFilePage = () => {
-    router.push("/garden-file");
-};
-
-// 地图图例
-const showMapLegend = ref(true);
-const handleLegend = (e) => {
-    blueRegionLayer.toggleLayer(e);
-};
-
-// 对比
-const compareData = ref([]);
-const showCompareBtn = ref(false);
-function toggleCompare(arr) {
-    // eventBus.emit("clickToCompare:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
-    compareData.value = [];
-    arr.map((fs) => {
-        compareData.value.push({ farmId: fs.get("farmId"), sampleId: fs.get("id"), data: fs.getProperties() });
-    });
-    console.log("compareData", compareData.value);
-    showCompareBtn.value = compareData.value.length > 1 ? true : false;
-}
-function showCompare() {
-    eventBus.emit("showCompareDialog", compareData.value);
-}
-
-const isShrink = ref(false);
-const isLeftShrink = ref(false);
-const isRightShrink = ref(false);
-const handleShrink = (position) => {
-    switch (position) {
-        case "bottom":
-            isShrink.value = !isShrink.value;
-            break;
-        case "left":
-            isLeftShrink.value = !isLeftShrink.value;
-            break;
-        case "rigth":
-            isRightShrink.value = !isRightShrink.value;
-            break;
-    }
-};
-
-const photoList = ref([
-    {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
-    {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
-    {key: "营养", statement: "无营养异常"},
-]);
-
-</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;
-        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 {
-            width: calc(376px + 54px + 10px);
-
-            .adopt-list-wrap {
-              ::v-deep {
-                .el-tabs {
-                  height: 100%;
-                }
-                .el-tabs__content {
-                  height: calc(100% - 40px - 15px);
-                  position: static;
-                }
-                .el-tabs__item {
-                  color: #727272;
-                }
-                .el-tabs__active-bar {
-                  background-color: #FFFFFF;
-                  height: 1px;
-                }
-                .el-tabs__item.is-active {
-                  color: #fff;
-                }
-                .el-tabs__nav-wrap:after {
-                  height: 1px;
-                  background-color: rgba(127, 127, 127, 0.3);
-                }
-                .el-tabs__nav {
-                  left: 50%;
-                  transform: translateX(-50%) !important;
-                }
-                .el-tab-pane {
-                  height: 100%;
-                }
-              }
-            }
-            .album-r {
-                .list-wrap {
-                    width: 375px;
-                }
-            }
-            .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% - 20px - 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;
-                    }
-                }
-            }
-
-            .garden-file {
-                position: relative;
-                top: 10px;
-                // height: 30%;
-                // min-height: 210px;
-                // width: 640px;
-                transition: all 0.3s;
-                // width: 800px;
-                // height: 320px;
-                width: 100vw;
-                height: 100vh;
-                overflow: hidden;
-                &.isShrink {
-                    height: 66px;
-                    width: 450px;
-                    overflow: hidden;
-                    .arrow {
-                        .icon {
-                            transform: rotate(90deg);
-                        }
-                    }
-                }
-                .arrow {
-                    position: absolute;
-                    right: 56px;
-                    top: 36px;
-                    background: #fff;
-                    height: 16px;
-                    width: 80px;
-                    line-height: 16px;
-                    border-radius: 0 0 5px 5px;
-                    text-align: center;
-                    cursor: pointer;
-                    .icon {
-                        transform: rotate(270deg);
-                    }
-                }
-            }
-
-            .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;
-                }
-            }
-        }
-        .legend {
-            position: fixed;
-            bottom: 8px;
-            right: 64px;
-            // width: 525px;
-            height: 20px;
-        }
-        .map-bg {
-            position: fixed;
-            z-index: 2;
-            background: rgba(35, 35, 35, 0.8);
-            border-radius: 18px;
-            padding: 7px 16px;
-            right: 460px;
-        }
-        .map-btn {
-            top: 19px;
-            cursor: pointer;
-        }
-        .map-legend {
-            bottom: 34px;
-            .item {
-                display: flex;
-                align-items: center;
-                font-size: 14px;
-                img {
-                    width: 16px;
-                    margin-right: 6px;
-                }
-                .legend-block {
-                    width: 16px;
-                    height: 16px;
-                    box-sizing: border-box;
-                    border-radius: 50%;
-                    border: 2px solid #fff;
-                    margin-right: 6px;
-                }
-            }
-            .legend-title {
-                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
-            }
-            .item + .item {
-                padding-top: 10px;
-            }
-        }
-    }
-}
-.bottom-map {
-    width: 100%;
-    height: 100vh;
-    position: absolute;
-    z-index: 0;
-}
-
-.compare-start-btn {
-    position: absolute;
-    z-index: 2;
-    left: 50%;
-    transform: translateX(-50%);
-    cursor: pointer;
-    bottom: 106px;
-    // right: 445px;
-    img {
-        height: 55px;
-    }
-}
-</style>
-
-<style lang="less">
-.file-wrap {
-    &.map-file {
-        width: 367px;
-        position: relative;
-        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;
-            .tag {
-                border: 1px solid #FFD489;
-                border-radius: 4px;
-                font-size: 12px;
-                display: inline-block;
-                width: 44px;
-                height: 20px;
-                text-align: center;
-                line-height: 18px;
-                margin-left: 8px;
-                padding: 1px 4px;
-            }
-        }
-        .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;
-                min-width: 109px;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                padding: 6px;
-                box-sizing: border-box;
-                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>

src/views/home/map/samplePointLayer.js

@@ -95,7 +95,6 @@ class SamplePointLayer {
     // 切换点位图标
     eventBus.off("changePointType")
     eventBus.on("changePointType", ({ legend, colorObj }) => {
-      console.log('legend, colorObj', legend, colorObj);
       that.togglePointType(legend, colorObj)
     })
 
@@ -162,7 +161,6 @@ class SamplePointLayer {
         that.getIcon(item)
         let point = newPoint(item);
         features.push(point)
-        // console.log('item.dyImg',item.dyImg);
       }
       const source = new VectorSource({
         features: features,
@@ -184,7 +182,6 @@ class SamplePointLayer {
   }
 
   togglePointType(sampleData, colorObj, isFile) {
-    console.log('toggle3PointType------------', sampleData, colorObj);
     let that = this
     that.clearCluster()
     if (!sampleData) {
@@ -204,7 +201,6 @@ class SamplePointLayer {
         }
         let point = newPoint(item);
         features.push(point)
-        // console.log('item.dyImg',item.dyImg);
       }
       const source = new VectorSource({
         features: features,
@@ -443,7 +439,6 @@ class SamplePointLayer {
 
   resetPoint() {
     this.isUpdatePoint = null
-    console.log('this.curPoint', this.curPoint);
     if (this.curPoint) {
       // this.curPoint.set("iconName", "defalut");
       this.curPoint.set("activeCompare", false);
@@ -499,6 +494,88 @@ class SamplePointLayer {
     this.initData(farm.id, region.id)
   }
 
+  // 根据matchedData更新点位颜色
+  updatePointColors(matchedData) {
+    let that = this;
+    
+    if (!this.pointArr || this.pointArr.length === 0) {
+      console.warn('pointArr is empty, cannot update point colors');
+      return;
+    }
+    
+    if (!matchedData || matchedData.length === 0) {
+      console.warn('matchedData is empty, cannot update point colors');
+      return;
+    }
+    
+    // 创建匹配数据的映射表，尝试多种可能的匹配字段
+    const matchedDataMap = new Map();
+    matchedData.forEach(item => {
+      // 尝试多种可能的匹配字段
+      const possibleKeys = [
+        item.geoHashSample,
+        item.sampleId, 
+        item.id,
+        item.workCode,
+        item.sampleCode
+      ].filter(key => key !== undefined && key !== null);
+      
+      possibleKeys.forEach(key => {
+        matchedDataMap.set(String(key), item);
+      });
+    });
+    
+    // 更新pointArr中的颜色
+    let features = [];
+    let matchedCount = 0;
+    
+    this.pointArr.forEach(point => {
+      // 尝试多种可能的匹配字段
+      const possibleKeys = [
+        point.geoHashSample,
+        point.sampleId,
+        point.id,
+        point.workCode,
+        point.sampleCode
+      ].filter(key => key !== undefined && key !== null);
+      
+      let matchedItem = null;
+      for (const key of possibleKeys) {
+        matchedItem = matchedDataMap.get(String(key));
+        if (matchedItem) {
+          matchedCount++;
+          break;
+        }
+      }
+      
+      if (matchedItem) {
+        // 找到匹配的数据，使用其颜色
+        point.iconName = 'defalut';
+        point.color = matchedItem.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);
+    
+    // 更新features引用
+    that.features = features;
+    
+  }
+
   // 清除聚合图层，解除绑定
   clearCluster() {
     if (this.treeClusterLayer && this.treeClusterLayer.layer.getSource().getSource()) {