fix: 地图点位大小根据层级变化，日历区别显示是否有照片

src/api/modules/manage_interface.js

@@ -41,6 +41,10 @@ module.exports = {
         url: config.base_url + "adm/images/{organId}/{areaId}",
         type: "get",
     },
+    fetchGardenImgsDate: {
+        url: config.base_url + "adm/findHasImagesDate",
+        type: "get",
+    },
     fetchGroupList: {
         url: config.base_url + "z_sample_lighten_card_offline_take/groupList",
         type: "get",

src/components/editClientPopup.vue

@@ -48,9 +48,9 @@
                             </template>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="头像" prop="photo">
+                    <!-- <el-form-item label="头像" prop="photo">
                         <upload></upload>
-                    </el-form-item>
+                    </el-form-item> -->
                 </el-form>
             </div>
             <div class="popup-footer">

src/views/home/album_compoents/albumCarousel.vue

@@ -94,9 +94,9 @@
                                                 <el-avatar :size="36" :src="treeItemData.icon" />
                                                 <div class="avatar-name">{{ treeItemData.userNickName || treeItemData.miniUserId }}</div>
                                             </div>
-                                            <div class="avatar-r" @click="warningMessage(treeItemData)">
+                                            <!-- <div class="avatar-r" @click="warningMessage(treeItemData)">
                                                 取消守护权限
-                                            </div>
+                                            </div> -->
                                         </div>
                                     </el-form-item>
                                     <el-form-item v-else label="预留守护人" prop="user">

src/views/home/components/clientList.vue

@@ -4,7 +4,7 @@
             <el-collapse v-model="activeNames" expand-icon-position="left">
                 <el-collapse-item
                     title="Consistency"
-                    v-for="(group, groupIndex) in groupList"
+                    v-for="(group, groupIndex) in list"
                     :key="groupIndex"
                     :name="groupIndex"
                 >
@@ -16,7 +16,7 @@
                                 <span class="group-length">（{{ group.list.length }}）</span>
                             </div>
                             <div class="title-r" @click.stop="handleRightClick">
-                                <span class="title-manage">管理</span>
+                                <span class="title-manage" @click.stop="hadnleManage(group,groupIndex)">{{isManage?'管理':'取消管理'}}</span>
                                 <el-checkbox
                                     v-show="toSelectClient"
                                     v-model="groupCheckStates[groupIndex].checkAll"
@@ -35,6 +35,7 @@
                         <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                             <div v-for="(ele, index) in group.list" :key="index" class="list-item">
                                 <el-checkbox v-show="toSelectClient" label="" :value="ele.tel"> </el-checkbox>
+                                <el-checkbox class="checkbox" v-show="setingShow" @change="changeCheck($event,ele)" label="" :value="ele.energy"></el-checkbox>
                                 <div class="item-flex">
                                     <img
                                         class="photo"
@@ -67,8 +68,32 @@
         </div>
         <div class="no-data" v-show="!groupList || !groupList.length">暂无数据</div>
 
+        <div class="list-footer">
+          <!-- <div class="settings" v-show="!isSetting && isManage" @click="handleGroup">新增分组</div> -->
+          <div class="settings" v-show="!isSetting && !isManage" @click="handleSetting">批量设置</div>
+          <div class="operation flex" v-show="isSetting && !setingShow">
+            <div class="delete" @click="handleDelete"><el-button size="large" type="primary">删除分组</el-button></div>
+            <div class="btn-group flex">
+              <div class="add" @click="handleAdd">添加</div>
+              <div class="add" @click="handleRemove">移除</div>
+            </div>
+          </div>
+          <div class="controls flex" v-show="isSetting && setingShow">
+            <div class="personnel flex">
+              <div class="circle flex" v-show="filterList.length"><el-icon color="#000" size="11"><ArrowUpBold /></el-icon></div>
+              <div class="text van-ellipsis">
+                <template v-for="(item,index) in filterList" :key="index">
+                  {{item.name}}<span v-show="filterList.length - 1 !== index">/</span>
+                </template>
+              </div>
+            </div>
+            <div class="delete" @click="handleGroup" v-show="listType==='other'">设置分组</div>
+            <div class="delete" @click="handleOperation" v-show="listType!=='other'">{{operationType==='add'?'添加':'移出'}}({{filterList.length}})</div>
+          </div>
+        </div>
+
         <!-- 渐变主色按钮 -->
-        <div class="center-btn" v-show="!toSelectClient" @click="toCustomPage">一键分配</div>
+        <div class="center-btn" v-show="!toSelectClient && !isSetting" @click="toCustomPage">一键分配</div>
         <div class="global-wrap" v-show="toSelectClient">
             <div class="global-btn" @click="handleGlobalCheckAllChange">全选</div>
         </div>
@@ -85,6 +110,8 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 import { useStore } from "vuex";
+import { deepClone } from "@/common/commonFun";
+import { ElMessage } from "element-plus";
 const store = useStore();
 
 const currentFarmId = store.getters.userinfo.curFarmId
@@ -149,6 +176,7 @@ function getUserList() {
                 name: key,
                 list: data[key]
             }));
+        list.value = groupList.value
         emit("update:listCount", extData?.count)
         initGroupCheckStates(); // 初始化分组选择状态
     });
@@ -200,16 +228,98 @@ const updateGroupCheckStatus = (groupIndex) => {
 
 // 修改 handleCheckedCitiesChange 方法
 const handleCheckedCitiesChange = (value) => {
+    if (setingShow.value) return
     // 遍历所有分组，更新每个分组的选中状态
     groupList.value.forEach((group, groupIndex) => {
         updateGroupCheckStatus(groupIndex);
     });
+    list.value = groupList.value
 };
 
 function handleRightClick() {
     // 点击事件处理
 }
 
+
+const isSetting = ref(false)
+const list = ref([])
+const listType = ref('')
+const isManage = ref(true)
+
+//设置
+const handleSetting = () =>{
+  isSetting.value = true
+  if(listType.value==='other'){
+    setingShow.value = true
+  }
+}
+
+// 管理
+const hadnleManage = (value,index) => {
+  // console.log('val',value);
+  listType.value = 'often'
+  isSetting.value = true
+  if(value.name==='未分组列表'){
+    listType.value = 'other'
+    isSetting.value = false
+  }
+  // curIndex.value = index
+  isManage.value = !isManage.value
+  if(!isManage.value){
+    list.value = deepClone([groupList.value[index]])
+  }else{
+    resetList()
+  }
+};
+const resetList = () =>{
+  list.value = deepClone(groupList.value)
+  setingShow.value = false
+  isSetting.value = false
+  isManage.value = true
+  filterList.value = []
+}
+
+const operationType = ref('')
+//添加
+const handleAdd = () =>{
+  operationType.value = 'add'
+  setingShow.value = true
+}
+
+//移除
+const setingShow = ref(false)
+
+const filterList = ref([]);
+const changeCheck = (v, d) =>{
+    if (v) {
+        filterList.value.push(d)
+    } else {
+        filterList.value.pop()
+    }
+    console.log('list.value', d, v);
+//   filterList.value = list.value[0].list.filter((item) => item.energy);
+}
+const handleRemove = () =>{
+  operationType.value = 'remove'
+  setingShow.value = true
+}
+
+//移出、添加
+const handleOperation = () =>{
+  if(filterList.value.length<1) return ElMessage.warning('请选择用户')
+  if(operationType.value === 'add'){
+    ElMessage.success('添加成功')
+  }else{
+    ElMessage.success('移出成功')
+  }
+  resetList()
+}
+
+function handleDelete() {
+    
+}
+
+
 watch(
     () => props.checkDistributeShow,
     (newVal) => {
@@ -510,11 +620,11 @@ const emit = defineEmits(["update:checkDistributeShow", "update:checkData", "upd
             align-items: center;
         }
         .delete {
-            border: 1px solid #ffd489;
-            border-radius: 4px;
-            padding: 8px 19px;
-            color: #ffd489;
-            cursor: pointer;
+            // border: 1px solid #ffd489;
+            // border-radius: 4px;
+            // padding: 8px 19px;
+            // color: #ffd489;
+            // cursor: pointer;
         }
         .operation {
             width: 100%;
@@ -527,6 +637,7 @@ const emit = defineEmits(["update:checkDistributeShow", "update:checkData", "upd
                     cursor: pointer;
                 }
                 .add {
+                    border: 1px solid #2199f8;
                     margin-right: 10px;
                 }
             }

src/views/home/components/leftTabs/imgManage.vue

@@ -10,7 +10,14 @@
                 format="YYYY年MM月DD日"
                 value-format="YYYY-MM-DD"
                 :style="{ width: '100%' }"
-            />
+            >
+                <template #default="cell">
+                    <div class="cell" :class="{ current: cell.isCurrent }">
+                        <span class="text">{{ cell.text }}</span>
+                        <span v-if="isHoliday(cell)" class="holiday" />
+                    </div>
+                </template>
+            </el-date-picker>
             <el-select class="select" @change="changeArea" v-model="areaValue" size="large">
                 <el-option v-for="(item, index) in areaOptions" :key="index" :label="item.name" :value="item.id" />
             </el-select>
@@ -26,7 +33,12 @@
             </div>
         </div> -->
         <div class="photo-list">
-            <div class="photo-item" v-for="(item, index) in imageList" :class="{'m-l-10': index % 2 !== 0}" :key="index">
+            <div
+                class="photo-item"
+                v-for="(item, index) in imageList"
+                :class="{ 'm-l-10': index % 2 !== 0 }"
+                :key="index"
+            >
                 <album-carousel-item
                     lbum-carousel-item
                     :key="index"
@@ -59,7 +71,7 @@ import albumCarouselItem from "../../album_compoents/albumCarouselItem.vue";
 import { useStore } from "vuex";
 const store = useStore();
 
-const currentFarmId = store.getters.userinfo.curFarmId
+const currentFarmId = store.getters.userinfo.curFarmId;
 const resize = "?imageView/1/w/240/h/240";
 
 function getCurrentMonth() {
@@ -81,26 +93,49 @@ const totalVal = ref(0);
 
 const imageList = ref([]);
 const geImgaeList = () => {
-    VE_API.manage_interface.fetchGardenImgs({ date: dateTime.value, organId: currentFarmId, areaId: areaValue.value, limit: pageSize.value, page: currentPage.value - 1 }).then((res) => {
-        imageList.value = res.data;
-        totalVal.value = res.count;
-    });
+    VE_API.manage_interface
+        .fetchGardenImgs({
+            date: dateTime.value,
+            organId: currentFarmId,
+            areaId: areaValue.value,
+            limit: pageSize.value,
+            page: currentPage.value - 1,
+        })
+        .then((res) => {
+            imageList.value = res.data;
+            totalVal.value = res.count;
+        });
 };
 
 function changeArea() {
     currentPage.value = 1; // 重置页码
-    geImgaeList();
+    getDates();
 }
 
 onMounted(() => {
-    getBlueRegionList()
+    getBlueRegionList();
 });
 
+const isHoliday = ({ dayjs }) => {
+    return allImgsDates.value.includes(dayjs.format("YYYY-MM-DD"));
+};
+
+const allImgsDates = ref([]);
+function getDates() {
+    VE_API.manage_interface
+        .fetchGardenImgsDate({ farmId: currentFarmId, regionId: areaValue.value })
+        .then(({ data }) => {
+            allImgsDates.value = data;
+            dateTime.value = data[data.length - 1];
+            geImgaeList();
+        });
+}
+
 function getBlueRegionList() {
     VE_API.manage_interface.fetchRegionList({ farmId: currentFarmId }).then(({ data }) => {
         areaOptions.value = data;
-        areaValue.value = data[0].id
-        geImgaeList();
+        areaValue.value = data[0].id;
+        getDates();
     });
 }
 
@@ -134,7 +169,8 @@ function formatDatePart(originalStr) {
         }
         ::v-deep {
             //日历
-            .el-input__prefix,.el-input__suffix {
+            .el-input__prefix,
+            .el-input__suffix {
                 color: #fff;
                 text-align: center;
             }
@@ -146,12 +182,13 @@ function formatDatePart(originalStr) {
                 color: #fff;
             }
             //下拉框
-            .el-select__placeholder,.el-select__caret{
+            .el-select__placeholder,
+            .el-select__caret {
                 color: #2199f8;
             }
             .el-select__wrapper {
                 box-shadow: none;
-                border: 1px solid #2199F8;
+                border: 1px solid #2199f8;
             }
         }
     }
@@ -235,3 +272,47 @@ function formatDatePart(originalStr) {
     }
 }
 </style>
+
+<style lang="less">
+.cell {
+    height: 30px;
+    padding: 3px 0;
+    box-sizing: border-box;
+}
+
+.cell .text {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin: 0 auto;
+    line-height: 24px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+}
+
+.cell.current .text {
+    background: #409eff;
+    color: #fff;
+}
+.available.today {
+    .cell .text {
+        color: #409eff;
+    }
+    .cell.current .text {
+        color: #fff;
+    }
+}
+
+.cell .holiday {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: #2199f8;
+    border-radius: 50%;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

src/views/home/homeMap.vue

@@ -43,7 +43,7 @@ import { onMounted, ref } from "vue";
 import { useStore } from "vuex";
 import { unByKey } from "ol/Observable";
 import { deepClone } from "@/common/commonFun";
-import { Search } from '@element-plus/icons-vue';
+import { Search } from "@element-plus/icons-vue";
 
 const store = useStore();
 const areaRef = ref(null);
@@ -57,7 +57,7 @@ let listenKey = null;
 let regionLayer = null;
 let clusterSource = null;
 
-const currentFarmId = store.getters.userinfo.curFarmId
+const currentFarmId = store.getters.userinfo.curFarmId;
 // const currentFarmId = sessionStorage.getItem('userinfo').curFarmId
 
 // 样式缓存优化
@@ -70,27 +70,44 @@ const styleCache = {
             stroke: new Stroke({ color: "#fff", width: 1 }),
         }),
     }),
+    default1: (zoomLevel) =>
+        new Style({
+        image: new Circle({
+            radius: zoomLevel > 19 ? 10 : 6,
+            fill: new Fill({ color: "#ffffff00" }),
+            stroke: new Stroke({ color: "#fff", width: 1 }),
+        }),
+    }),
     selected: new Style({
         image: new Icon({
             src: require("@/assets/images/map/status/active-icon.png"),
             scale: 0.6,
-            crossOrigin: 'anonymous' // 添加crossOrigin属性
+            crossOrigin: "anonymous", // 添加crossOrigin属性
         }),
     }),
     current: new Style({
         image: new Icon({
             src: require("@/assets/images/map/status/current-icon.png"),
             scale: 0.8,
-            crossOrigin: 'anonymous'
+            crossOrigin: "anonymous",
         }),
     }),
-    renYang1: new Style({
-        image: new Circle({
-            radius: 12,
-            fill: new Fill({ color: "#EEEEEE" }),
-            stroke: new Stroke({ color: "#fff", width: 1 }),
+    renYang1: () =>
+        new Style({
+            image: new Circle({
+                radius: 12,
+                fill: new Fill({ color: "#EEEEEE" }),
+                stroke: new Stroke({ color: "#fff", width: 1 }),
+            }),
+        }),
+    renYang11: (zoomLevel) =>
+        new Style({
+            image: new Circle({
+                radius: zoomLevel > 19 ? 10 : 6, // 层级大于19时半径为10，小于等于19时为6
+                fill: new Fill({ color: "#EEEEEE" }),
+                stroke: new Stroke({ color: "#fff", width: 1 }),
+            }),
         }),
-    }),
     renYang2: new Style({
         image: new Circle({
             radius: 12,
@@ -98,14 +115,15 @@ const styleCache = {
             stroke: new Stroke({ color: "#fff", width: 1 }),
         }),
     }),
-    clusterText: (size, isRenyang) => new Style({
-        text: new Text({
-            text: size.toString(),
-            font: "bold 10px sans-serif",
-            fill: new Fill({ color: isRenyang === 1 ? "#000" : "#fff" }),
+    clusterText: (size, isRenyang) =>
+        new Style({
+            text: new Text({
+                text: size.toString(),
+                font: "bold 10px sans-serif",
+                fill: new Fill({ color: isRenyang === 1 ? "#000" : "#fff" }),
+            }),
+            zIndex: 3,
         }),
-        zIndex: 3,
-    }),
     photoStyle: (src) => {
         try {
             return new Style({
@@ -118,10 +136,10 @@ const styleCache = {
                     displacement: [0, 0],
                     stroke: new Stroke({ width: 2, color: "#fff" }),
                 }),
-                zIndex: 4
+                zIndex: 4,
             });
         } catch (e) {
-            console.warn('Failed to create photo style:', e);
+            console.warn("Failed to create photo style:", e);
             return new Style({
                 image: new Circle({
                     radius: 12,
@@ -130,7 +148,7 @@ const styleCache = {
                 }),
             });
         }
-    }
+    },
 };
 
 // 初始化地图
@@ -139,14 +157,21 @@ onMounted(() => {
     const coordinate = util.wktCastGeom(store.getters.userinfo.location).getFirstCoordinate();
     kmap = new KMap.Map(areaRef.value, level, coordinate[0], coordinate[1], null, 1, 22, "img", true, true);
     regionLayer = new RegionLayer(kmap);
+
+    // 添加地图层级变化监听
+    kmap.getView().on("change:resolution", () => {
+        if (treeClusterLayer) {
+            refreshClusterStyle();
+        }
+    });
 });
 
 // 启用框选
 const enableBoxSelect = () => {
-    const data = mapPoint.value.filter(item => !item.isRenyang);
+    const data = mapPoint.value.filter((item) => !item.isRenyang);
     updateClusterData(data, 1);
     isDrawing.value = true;
-    
+
     dragBox = new DragBox({
         condition: platformModifierKeyOnly,
     });
@@ -160,14 +185,14 @@ const enableBoxSelect = () => {
 
 // 启用框选--分配果树
 const enableDistributeBoxSelect = () => {
-    const data = mapPoint.value.filter(item => item.isRenyang === 1);
-    const treeData = deepClone(data)
-    treeData.map(item => {
-        item.isTreePoint = true
-    })
+    const data = mapPoint.value.filter((item) => item.isRenyang === 1);
+    const treeData = deepClone(data);
+    treeData.map((item) => {
+        item.isTreePoint = true;
+    });
     updateClusterData(treeData, 1);
     isDrawing.value = true;
-    
+
     dragBox = new DragBox({
         condition: platformModifierKeyOnly,
     });
@@ -193,15 +218,19 @@ const handleKeyUp = (e) => {
 
 const handleBoxEnd = () => {
     const extent = dragBox.getGeometry().getExtent();
-    treeClusterLayer.layer.getSource().getSource().getFeatures().forEach(feature => {
-        // 只对当前框选范围内且未被认养的树进行操作
-        if (feature.getGeometry().intersectsExtent(extent)) {
-            // 累加选中状态（不会取消之前选中的）
-            feature.set("highlight", true);
-            // if (!feature.get("isRenyang")) {
-            // }
-        }
-    });
+    treeClusterLayer.layer
+        .getSource()
+        .getSource()
+        .getFeatures()
+        .forEach((feature) => {
+            // 只对当前框选范围内且未被认养的树进行操作
+            if (feature.getGeometry().intersectsExtent(extent)) {
+                // 累加选中状态（不会取消之前选中的）
+                feature.set("highlight", true);
+                // if (!feature.get("isRenyang")) {
+                // }
+            }
+        });
     refreshClusterStyle();
 };
 
@@ -217,19 +246,24 @@ const stopBoxSelect = () => {
 // 保存选择
 const saveSelect = (callback) => {
     const sampleIds = [];
-    treeClusterLayer.layer.getSource().getSource().getFeatures().forEach(feature => {
-        if (feature.get("highlight")) {
-            sampleIds.push(feature.get("sampleId"));
-        }
-    });
-    
+    treeClusterLayer.layer
+        .getSource()
+        .getSource()
+        .getFeatures()
+        .forEach((feature) => {
+            if (feature.get("highlight")) {
+                sampleIds.push(feature.get("sampleId"));
+            }
+        });
+
     const params = {
         sampleIds,
         isRenyang: 1,
-        farmId: currentFarmId
+        farmId: currentFarmId,
     };
-    
-    VE_API.manage_interface.batchOpenOrCloseSample(params).then(() => {// 保存成功后刷新数据
+
+    VE_API.manage_interface.batchOpenOrCloseSample(params).then(() => {
+        // 保存成功后刷新数据
         callback?.();
     });
 };
@@ -237,21 +271,23 @@ const saveSelect = (callback) => {
 // 更新集群数据而不重新渲染整个图层
 const updateClusterData = (treeListData, distanceVal = 20) => {
     if (!treeListData || !Array.isArray(treeListData)) {
-        console.error('Invalid data provided to updateClusterData');
+        console.error("Invalid data provided to updateClusterData");
         return;
     }
     if (distanceVal === 20) {
         mapPoint.value = treeListData;
     }
-    const features = treeListData.map(item => {
-        try {
-            item.wkt = item.geom;
-            return newPoint(item);
-        } catch (err) {
-            console.error('Error creating point:', err);
-            return null;
-        }
-    }).filter(Boolean);
+    const features = treeListData
+        .map((item) => {
+            try {
+                item.wkt = item.geom;
+                return newPoint(item);
+            } catch (err) {
+                console.error("Error creating point:", err);
+                return null;
+            }
+        })
+        .filter(Boolean);
 
     if (!treeClusterLayer) {
         createClusterLayer(features, distanceVal);
@@ -260,7 +296,7 @@ const updateClusterData = (treeListData, distanceVal = 20) => {
         clusterSource.getSource().clear();
         clusterSource.getSource().addFeatures(features);
         clusterSource.setDistance(distanceVal);
-        
+
         if (!distanceVal) {
             zoomToFeatures(features);
         }
@@ -275,7 +311,7 @@ const createClusterLayer = (features, distance) => {
     treeClusterLayer = new KMap.VectorLayer("forest-cluster", 1000, {
         minZoom: 15,
         source: clusterSource,
-        style: clusterStyleFunction
+        style: clusterStyleFunction,
     });
 
     kmap.addLayer(treeClusterLayer.layer);
@@ -290,7 +326,7 @@ const createClusterLayer = (features, distance) => {
 const clusterStyleFunction = (feature) => {
     const size = feature.get("features").length;
     const features = feature.get("features");
-    
+
     if (!features || features.length === 0) {
         return new Style({}); // 返回空样式作为fallback
     }
@@ -298,7 +334,7 @@ const clusterStyleFunction = (feature) => {
     if (size === 1) {
         return getSingleFeatureStyle(features[0]);
     }
-    
+
     return getClusterFeatureStyle(features[0], size);
 };
 
@@ -306,51 +342,62 @@ const clusterStyleFunction = (feature) => {
 const getSingleFeatureStyle = (feature) => {
     if (!feature) return new Style({}); // 防御性编程
 
+    // 获取当前地图层级
+    const zoomLevel = kmap.getView().getZoom();
     // 有图标的使用照片样式优先
-    const imgIcon = feature.get('icon');
-    const isTreePoint = feature.get('isTreePoint');
+    const imgIcon = feature.get("icon");
+    const isTreePoint = feature.get("isTreePoint");
     if (imgIcon && !isTreePoint) {
         try {
             return styleCache.photoStyle(imgIcon);
         } catch (e) {
-            console.warn('Failed to create photo style:', e);
+            console.warn("Failed to create photo style:", e);
             return styleCache.default;
         }
     }
-    
-        
+
     // 高亮样式其次
     if (feature.get("highlight")) {
         return styleCache.selected;
     }
-    
+
     // 当前树样式其次
     if (feature.get("currentTree")) {
         return styleCache.current;
     }
-    
 
     // 根据认养状态返回不同样式
     const isRenyang = feature.get("isRenyang");
     switch (isRenyang) {
-        case 1: return styleCache.renYang1;
-        case 2: return styleCache.renYang2;
-        default: return styleCache.default;
+        case 1:
+            if (isDrawing.value) {
+                return styleCache.renYang11(zoomLevel); // 传入当前层级
+            } else {
+                return styleCache.renYang1(); // 传入当前层级
+            }
+        case 2:
+            return styleCache.renYang2;
+        default:
+            if (isDrawing.value) {
+                return styleCache.default1(zoomLevel); // 传入当前层级
+            } else {
+                return styleCache.default
+            }
     }
 };
 
 // 更新后的获取集群要素样式函数
 const getClusterFeatureStyle = (feature, size) => {
     if (!feature) return [styleCache.default];
-    
+
     const styles = [];
     const baseStyle = getSingleFeatureStyle(feature);
-    
+
     // 确保基础样式有效
     if (baseStyle) {
         styles.push(baseStyle);
     }
-    
+
     // 添加集群文字样式
     if (size > 1) {
         const textStyle = styleCache.clusterText(size, feature.get("isRenyang"));
@@ -358,7 +405,7 @@ const getClusterFeatureStyle = (feature, size) => {
             styles.push(textStyle);
         }
     }
-    
+
     return styles.length > 0 ? styles : [styleCache.default];
 };
 
@@ -369,11 +416,15 @@ const refreshClusterStyle = () => {
     }
     if (isDrawing.value) {
         const sampleIds = [];
-        treeClusterLayer.layer.getSource().getSource().getFeatures().forEach(feature => {
-            if (feature.get("highlight")) {
-                sampleIds.push(feature.get("sampleId"));
-            }
-        });
+        treeClusterLayer.layer
+            .getSource()
+            .getSource()
+            .getFeatures()
+            .forEach((feature) => {
+                if (feature.get("highlight")) {
+                    sampleIds.push(feature.get("sampleId"));
+                }
+            });
         // 数据处理
         emit("update:selectedTree", sampleIds);
     }
@@ -384,10 +435,10 @@ const setupMapClickHandler = () => {
     if (listenKey) {
         unByKey(listenKey);
     }
-    
+
     listenKey = kmap.on("click", (e) => {
         if (!treeClusterLayer) return;
-        
+
         treeClusterLayer.layer.getFeatures(e.pixel).then((clickedFeatures) => {
             if (!clickedFeatures.length) return;
             
@@ -403,12 +454,12 @@ const setupMapClickHandler = () => {
 
 // 处理集群点击
 const handleClusterClick = (features) => {
-    const extent = boundingExtent(features.map(r => r.getGeometry().getCoordinates()));
+    const extent = boundingExtent(features.map((r) => r.getGeometry().getCoordinates()));
     kmap.getView().fit(extent, { duration: 1000, padding: [250, 250, 250, 250] });
 
     const currentZoom = kmap.getView().getZoom();
-    if (currentZoom > 17) {
-        kmap.getView().setZoom(17);
+    if (currentZoom > 20) {
+        kmap.getView().setZoom(20);
     }
 };
 
@@ -421,11 +472,11 @@ const handleSingleFeatureClick = (feature) => {
         resetCurrentTree();
         feature.set("currentTree", true);
         currentTree.value = feature;
-        
-        eventBus.emit("click:point", { 
-            farmId: currentFarmId, 
-            sampleId: feature.get("sampleId"), 
-            data: feature.getProperties() 
+
+        eventBus.emit("click:point", {
+            farmId: currentFarmId,
+            sampleId: feature.get("sampleId"),
+            data: feature.getProperties(),
         });
     }
 };
@@ -442,7 +493,7 @@ const clearCluster = () => {
 
 // 缩放到要素范围
 const zoomToFeatures = (features) => {
-    const extent = boundingExtent(features.map(r => r.getGeometry().getCoordinates()));
+    const extent = boundingExtent(features.map((r) => r.getGeometry().getCoordinates()));
     kmap.getView().fit(extent, { duration: 500, padding: [80, 250, 100, 250] });
 };
 
@@ -456,58 +507,51 @@ const resetCurrentTree = () => {
 
 // 搜索
 // 搜索相关代码
-const searchWord = ref('')
-const searchResults = ref([])
-
+const searchWord = ref("");
+const searchResults = ref([]);
 
 // 搜索方法
 const querySearch = (queryString, cb) => {
     if (!queryString || !mapPoint.value?.length) {
-        cb([])
-        return
+        cb([]);
+        return;
     }
-    const results = mapPoint.value.filter(item => {
-        const searchFields = [
-            item.tel,
-            item.userNickName,
-            item.makeTel,
-            item.makeName
-        ].filter(Boolean).map(f => f.toString().toLowerCase())
-        return searchFields.some(field => 
-            field.includes(queryString.toLowerCase())
-        )
-    })
-        console.log('results', results, mapPoint.value);
-    
+    const results = mapPoint.value.filter((item) => {
+        const searchFields = [item.tel, item.userNickName, item.makeTel, item.makeName]
+            .filter(Boolean)
+            .map((f) => f.toString().toLowerCase());
+        return searchFields.some((field) => field.includes(queryString.toLowerCase()));
+    });
+
     // 格式化结果供el-autocomplete使用
-    const formattedResults = results.map(item => ({
+    const formattedResults = results.map((item) => ({
         ...item,
-        value: item.userNickName || item.makeName || '未命名点位'
-    }))
-    
-    cb(formattedResults)
-}
+        value: item.userNickName || item.makeName || "未命名点位",
+    }));
+
+    cb(formattedResults);
+};
 
 // 选中搜索结果项
 const handleSelect = (item) => {
-    if (!item || !item.geom) return
-    
+    if (!item || !item.geom) return;
+
     try {
         // 定位到选中的点位
-        const coordinate = util.wktCastGeom(item.geom).getFirstCoordinate()
+        const coordinate = util.wktCastGeom(item.geom).getFirstCoordinate();
         kmap.getView().animate({
             center: coordinate,
             zoom: 22,
-            duration: 500
-        })
-        
+            duration: 500,
+        });
+
         // 高亮显示选中的点位
         // if (treeClusterLayer) {
         //     treeClusterLayer.layer.getSource().getSource().getFeatures().forEach(feature => {
         //         if (feature.get('sampleId') === item.sampleId) {
         //             feature.set('highlight', true)
         //             refreshClusterStyle()
-                    
+
         //             // 3秒后取消高亮
         //             setTimeout(() => {
         //                 feature.set('highlight', false)
@@ -518,32 +562,31 @@ const handleSelect = (item) => {
         // }
 
         setTimeout(() => {
-            eventBus.emit("click:point", { 
-                farmId: currentFarmId, 
-                sampleId: item.sampleId, 
-                data: item
+            eventBus.emit("click:point", {
+                farmId: currentFarmId,
+                sampleId: item.sampleId,
+                data: item,
             });
-        }, 1000)
+        }, 1000);
     } catch (e) {
-        console.error('定位失败:', e)
+        console.error("定位失败:", e);
     }
-}
-
+};
 
 // 初始化区域地图
 const initAreaMap = (arr) => {
     regionLayer?.initData(arr);
 };
 
-defineExpose({ 
-    addCluster: updateClusterData, 
+defineExpose({
+    addCluster: updateClusterData,
     enableBoxSelect,
     enableDistributeBoxSelect,
-    stopBoxSelect, 
-    initAreaMap, 
-    resetCurrentTree, 
+    stopBoxSelect,
+    initAreaMap,
+    resetCurrentTree,
     saveSelect,
-    refreshClusterStyle // 暴露刷新方法
+    refreshClusterStyle, // 暴露刷新方法
 });
 
 const emit = defineEmits(["update:selectedTree"]);
@@ -572,14 +615,13 @@ const emit = defineEmits(["update:selectedTree"]);
     right: 410px;
     z-index: 10;
     width: 300px;
-    
+
     ::v-deep {
         .el-input__wrapper {
             background: rgba(255, 255, 255, 0.8);
             box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88) inset;
         }
     }
-    
 }
 </style>
 
@@ -588,15 +630,15 @@ const emit = defineEmits(["update:selectedTree"]);
     display: flex;
     align-items: center;
     padding: 5px 0;
-    
+
     .name {
         font-weight: bold;
         padding: 0 8px;
     }
-    
+
     .tel {
         color: #888;
         font-size: 12px;
     }
 }
-</style>
+</style>

src/views/home/index.vue

@@ -475,7 +475,7 @@ function updateUser() {
         .tips {
             position: fixed;
             z-index: 2;
-            top: 105px;
+            top: 130px;
             width: 100%;
             display: flex;
             justify-content: center;