fix: 切换区域数据，高亮树

src/views/home/components/treeDetail.vue

@@ -31,6 +31,11 @@
                             <span>92分</span>
                             <div>生态指标</div>
                         </div>
+
+                        <div class="progress-wrap" v-show="ROLE == 2">
+                            <div class="progress-text"><span class="over">150</span>/215</div>
+                            <el-progress class="progress-val" :percentage="60" color="#FFD887"></el-progress>
+                        </div>
                     </div>
                     <img class="tree" src="@/assets/images/foster-home/tree.png" alt="" />
                     <div class="photo-box">
@@ -43,11 +48,17 @@
                                 <!-- photo-img-2.JPG -->
                                 <!-- <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${1}.JPG`)" alt="" /> -->
                                 <photo-provider>
-                                    <photo-consumer :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)">
-                                        <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)" alt="" />
+                                    <photo-consumer
+                                        :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)"
+                                    >
+                                        <img
+                                            class="img"
+                                            :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)"
+                                            alt=""
+                                        />
                                     </photo-consumer>
-                                    </photo-provider>
-                                
+                                </photo-provider>
+
                                 <div class="date">{{ item.date }}</div>
                             </div>
                         </div>
@@ -106,6 +117,10 @@ import { useRouter } from "vue-router";
 import chartBox from "@/components/chartBox.vue";
 import subTitle from "@/components/subTitle.vue";
 const router = useRouter();
+import { useStore } from "vuex";
+let store = useStore();
+
+const ROLE = store.state.home.userRole;
 
 const active = ref(0);
 const tabsList = ["全部", "标准", "气象"];
@@ -114,13 +129,13 @@ const handleActive = (index) => {
     handleItem(index);
 };
 
-const emit = defineEmits(['backHome'])
+const emit = defineEmits(["backHome"]);
 function backToHome() {
-    emit('backHome')
+    emit("backHome");
 }
 
 function toCustomPage() {
-    router.push("/customTree")
+    router.push("/customTree");
 }
 
 const photoList = ref([
@@ -272,13 +287,13 @@ const handleMore = () => {
     width: 100%;
     height: 100%;
     .back {
-        background: #4F4F4F;
+        background: #4f4f4f;
         border-radius: 4px;
         padding: 6px 22px;
         font-size: 12px;
         cursor: pointer;
     }
-    
+
     .center-btn {
         position: absolute;
         bottom: 64px;
@@ -318,7 +333,8 @@ const handleMore = () => {
                     justify-content: center;
                     align-items: center;
                     color: rgba(255, 255, 255, 0.55);
-                    background: url("@/assets/images/foster-home/tree/bubble-bg.png") no-repeat center center / 100% 100%;
+                    background: url("@/assets/images/foster-home/tree/bubble-bg.png") no-repeat center center / 100%
+                        100%;
                     span {
                         font-size: 14px;
                         font-weight: 500;
@@ -363,6 +379,39 @@ const handleMore = () => {
                     }
                 }
             }
+
+            .progress-wrap {
+                position: absolute;
+                top: 40px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 110px;
+                .progress-text {
+                    font-size: 12px;
+                    color: #999999;
+                    background: rgba(0, 0, 0, 0.6);
+                    padding: 2px 8px 3px 8px;
+                    border-radius: 20px;
+                    width: max-content;
+                    margin: 0 auto;
+                    margin-bottom: 5px;
+                    .over {
+                        font-size: 14px;
+                        color: #ffd489;
+                    }
+                }
+                ::v-deep {
+                    .el-progress-bar__outer {
+                        width: 108px;
+                        background: rgba(0, 0, 0, 0.8);
+                    }
+                    .progress-val {
+                        .el-progress__text {
+                            display: none;
+                        }
+                    }
+                }
+            }
             .tree {
                 width: 258px;
                 height: 258px;
@@ -420,7 +469,7 @@ const handleMore = () => {
             border-radius: 10px 10px 0 0;
             .source-title {
                 padding: 10px 10px 0 10px;
-                            
+
                 .title-right {
                     background: rgba(255, 212, 137, 0.1);
                     border-radius: 20px;
@@ -447,14 +496,14 @@ const handleMore = () => {
                 .tabs-item {
                     padding: 6px;
                     border-radius: 20px;
-                    color: #FFFFFF;
+                    color: #ffffff;
                     flex: 1;
                     text-align: center;
                     cursor: pointer;
                     background: rgba(255, 255, 255, 0.08);
                     &.active {
-                        background: linear-gradient(180deg, #FFD887, #ED9E1E);
-                        color: #1D1D1D;
+                        background: linear-gradient(180deg, #ffd887, #ed9e1e);
+                        color: #1d1d1d;
                     }
                 }
                 .tabs-item + .tabs-item {
@@ -467,7 +516,7 @@ const handleMore = () => {
                 border-radius: 5px;
                 .item-title {
                     font-size: 16px;
-                    color: #FFFFFF;
+                    color: #ffffff;
                 }
             }
             .list-item {
@@ -509,7 +558,7 @@ const handleMore = () => {
             .name {
                 // display: flex;
                 // align-items: center;
-                color: #6C6C6C;
+                color: #6c6c6c;
                 font-size: 12px;
                 .main-name {
                     font-size: 16px;

src/views/home/homeMap.vue

@@ -22,6 +22,8 @@ import { useStore } from "vuex";
 import { unByKey } from "ol/Observable";
 let store = useStore();
 
+const ROLE = store.state.home.userRole;
+
 // 选中样式（高亮）
 // const selectedStyle = new Style({
 //     image: new Icon({
@@ -34,6 +36,8 @@ let kmap = null;
 const areaRef = ref(null);
 let dragBox;
 
+const currentTree = ref(null)
+
 const isDrawing = ref(false);
 const enableBoxSelect = () => {
     const data = mapPoint.value.filter((item) => item.fosterStatus === 0);
@@ -99,7 +103,6 @@ function addCluster(treeListData, distanceVal) {
         mapPoint.value = treeListData;
     }
     clearCluster();
-    let that = this;
     let features = [];
     // 根据状态加上对应的图标
     for (let item of treeListData) {
@@ -130,6 +133,7 @@ function addCluster(treeListData, distanceVal) {
                 let style = false;
                 if (!style) {
                     const highlight = featureOne.get("highlight");
+                    const currentTree = featureOne.get("currentTree");
                     if (highlight) {
                         style = new Style({
                             image: new Icon({
@@ -137,6 +141,13 @@ function addCluster(treeListData, distanceVal) {
                                 scale: 0.6,
                             }),
                         });
+                    } else if (currentTree) {
+                        style = new Style({
+                            image: new Icon({
+                                src: require("@/assets/images/map/status/current-icon.png"),
+                                scale: 0.8,
+                            }),
+                        });
                     } else {
                         style = new Style({
                             image: new Circle({
@@ -144,12 +155,12 @@ function addCluster(treeListData, distanceVal) {
                                 fill: new Fill({
                                     color:
                                         featureOne.get("fosterStatus") === 0
-                                            ? "#ffffff00"
+                                            ? (ROLE == 1 ? "#ffffff00" : "#BBBBBB99")
                                             : featureOne.get("fosterStatus") === 1
                                             ? "#EEEEEE"
                                             : featureOne.get("fosterStatus") === 2
                                             ? "#F0AC37"
-                                            : "#ffffff00",
+                                            : (ROLE == 1 ? "#ffffff00" : "#BBBBBB99"),
                                 }),
                                 stroke: new Stroke({
                                     color: "#fff",
@@ -191,6 +202,7 @@ function addCluster(treeListData, distanceVal) {
                 });
 
                 const highlight = featureObj.get("highlight");
+                const currentTree = featureObj.get("currentTree");
                 if (highlight) {
                     style = new Style({
                         image: new Icon({
@@ -198,6 +210,13 @@ function addCluster(treeListData, distanceVal) {
                             scale: 0.6,
                         }),
                     });
+                } else if (currentTree) {
+                    style = new Style({
+                        image: new Icon({
+                            src: require("@/assets/images/map/status/current-icon.png"),
+                            scale: 0.8,
+                        }),
+                    });
                 } else {
                     // 已认养--显示图标
                     if (imgIcon) {
@@ -215,12 +234,12 @@ function addCluster(treeListData, distanceVal) {
                                 fill: new Fill({
                                     color:
                                         featureObj.get("fosterStatus") === 0
-                                            ? "#ffffff00"
+                                            ? (ROLE == 1 ? "#ffffff00" : "#BBBBBB99")
                                             : featureObj.get("fosterStatus") === 1
                                             ? "#EEEEEE"
                                             : featureObj.get("fosterStatus") === 2
                                             ? "#F0AC37"
-                                            : "#ffffff00",
+                                            : (ROLE == 1 ? "#ffffff00" : "#BBBBBB99"),
                                 }),
                                 stroke: new Stroke({
                                     color: "#fff",
@@ -268,6 +287,9 @@ function addCluster(treeListData, distanceVal) {
                         features[0].set("highlight", true);
                         // features[0].setStyle(selectedStyle)
                     } else if (!hasFeatures) {
+                        resetCurrentTree()
+                        features[0].set("currentTree", true)
+                        currentTree.value = features[0]
                         eventBus.emit("clickMapPoint", features[0])
                     }
                 }
@@ -291,7 +313,11 @@ function zoomToFeatures(features) {
     kmap.getView().fit(extent, { duration: 500, padding: [200, 250, 120, 250] });
 }
 
-defineExpose({ addCluster, enableBoxSelect, stopBoxSelect, initAreaMap });
+function resetCurrentTree() {
+    currentTree.value && currentTree.value.set("currentTree", false)
+}
+
+defineExpose({ addCluster, enableBoxSelect, stopBoxSelect, initAreaMap, resetCurrentTree });
 
 // 分区
 let regionLayer = null;

src/views/home/index.vue

@@ -36,13 +36,17 @@
                 </div>
             </div>
             <div v-else class="map-bg map-legend yes-events">
-                <div class="item">
+                <div class="item" v-if="ROLE == 1">
                     <img src="@/assets/images/map/status/wry.png" alt="" />
                     未开放认养
                 </div>
+                <div class="item" v-if="ROLE == 2">
+                    <img src="@/assets/images/map/status/other.png" alt="" />
+                    其他树
+                </div>
                 <div class="item" v-show="!checkShow">
                     <img src="@/assets/images/map/status/dry.png" alt="" />
-                    待认养
+                    {{ ROLE == 1 ? "待认养" : "可团购" }}
                 </div>
                 <div class="item" v-show="!checkShow">
                     <img src="@/assets/images/map/status/yry.png" alt="" />
@@ -60,7 +64,7 @@
                 </div>
             </div>
 
-            <div v-show="!checkShow" class="right-button yes-events" @click="hanldeCheck">勾选认养区域</div>
+            <div v-show="!checkShow && ROLE == 1" class="right-button yes-events" @click="hanldeCheck">勾选认养区域</div>
             <div v-show="checkShow" class="center-button">
                 <div class="cancel yes-events" @click="handleCancel">取消</div>
                 <div class="yes-events" @click="handleCancel">确认开放认养权限</div>
@@ -108,9 +112,12 @@ const mapRef = ref(null);
 const activeName = ref('认养列表')
 // 用户角色
 store.commit("home/SET_USER_ROLE", 2);
+
+let ROLE = ref(null);
 onMounted(() => {
     //区域切换监听事件
     eventBus.on("area:id", areaId);
+    ROLE.value = store.state.home.userRole;
 });
 
 onUnmounted(() => {
@@ -118,7 +125,12 @@ onUnmounted(() => {
 });
 
 const getPointList = () =>{
-    VE_API.variety.pointList({ farmId:organId.value, selectAll:1 }).then(({ data }) => {
+    let selectAll = undefined
+    if (regionId.value === 0) {
+      selectAll = 1
+    }
+    const areaId = selectAll ? undefined : regionId.value
+    VE_API.variety.pointList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
         // const arr = data.map(item =>{
         //     return{
         //         ...item,
@@ -130,12 +142,12 @@ const getPointList = () =>{
             nextTick(() => {
                 data[0].icon = "1"
                 data[1].icon = "1"
-                data[100].icon = "1"
-                data[170].icon = "1"
-                data[190].icon = "2"
                 data[10].icon = "2"
                 data[20].icon = "2"
                 data[30].icon = "2"
+                data[35].icon = "1"
+                data[40].icon = "1"
+                data[50].icon = "2"
                 mapRef.value.addCluster(data)
                 // mapRef.value.initData(arr)
                 // mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))
@@ -144,8 +156,10 @@ const getPointList = () =>{
     })
 }
 
+const regionData = ref([])
 function getBlueRegionList() {
     VE_API.region.list({farmId: organId.value}).then(({data}) =>{
+        regionData.value = data
         mapRef.value.initAreaMap(data);
     })
 }
@@ -192,7 +206,10 @@ function areaId({ areaId, farmId }) {
     // 树点位
     getPointList()
     // 分区
-    getBlueRegionList();
+    if (!regionData.value.length) {
+        // 全部区域
+        getBlueRegionList();
+    }
 }
 
 const urls = ref([]);
@@ -206,8 +223,8 @@ function toggleLeftComponet() {
 }
 
 function backHome() {
-    console.log('home');
     currentComponent.value = "homePage"
+    mapRef.value.resetCurrentTree()
 }
 </script>
 

src/views/home/map/regionLayer.js

@@ -94,11 +94,6 @@ class RegionLayer {
         this.initData(this.farmId);
     }
 
-    //得到点样式
-    getStyle(feature) {
-        return this.getIconStyle(feature);
-    }
-
     selectArea(index, color) {
         if (this.index != null) {
             this.resetData()
@@ -125,6 +120,7 @@ class RegionLayer {
 
     initData(data) {
         if (!data) return
+        this.clearLayer()
         let that = this;
         let features = [];
         for (let item of data) {
@@ -151,9 +147,15 @@ class RegionLayer {
 
     // 清除聚合图层，解除绑定
     clearLayer() {
+        console.log('clear');
         if (this.regionLayer) {
+            console.log('clear222');
             this.regionLayer.layer.getSource().clear();
         }
+        if (this.gardenPointLayer) {
+            console.log('clear333',this.gardenPointLayer);
+            this.gardenPointLayer.source.clear();
+        }
     }