fix: 认养申请团长角色，地图分区范围和名称

src/views/home/components/applyList.vue

@@ -64,9 +64,11 @@
                                 placement="top"
                             >
                             <template #content>
-                                <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
-                                    {{ owner.userName }}
-                                    <span v-show="oI<owners.length-1">/</span>
+                                <div class="user-wrap">
+                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
+                                        {{ owner.userName }}
+                                        <span v-show="oI<owners.length-1">/</span>
+                                    </div>
                                 </div>
                             </template>
                             <div class="tooltip-user-item">
@@ -84,6 +86,24 @@
                         <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
                     </div>
                 </div>
+
+                <div class="team-users apply-wrap">
+                    <div class="apply-item" v-for="(item, index) in 2" :key="index">
+                    <div class="apply-users">
+                        <div class="user-item">
+                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                        </div>
+                        <div class="team-info">
+                            <div class="team-name">华国伟</div>
+                            <div class="team-time">3/25<span>10:08:32</span></div>
+                        </div>
+                    </div>
+                    <div class="apply-time">购买<span class="main-unit">15斤</span></div>
+                    <div class="apply-btn">
+                        确认分配
+                    </div>
+                </div>
+                </div>
               </div>
             </div>
         </div>
@@ -99,7 +119,7 @@ const owners = ref([{userName: "王丽丽", value: 50}, {userName: "张山", val
 
 const ROLE = store.state.home.userRole;
 
-onMounted(() => {});
+onMounted(() => {console.log('ROLE', ROLE);});
 </script>
 
 <style lang="scss" scoped>
@@ -211,6 +231,9 @@ onMounted(() => {});
                 text-align: center;
                 font-size: 14px;
                 color: #999999;
+                .main-unit {
+                    color: #FFD489;
+                }
             }
             .apply-btn {
                 padding: 4px 7px;
@@ -218,12 +241,36 @@ onMounted(() => {});
                 border-radius: 20px;
                 color: #FFD489;
                 font-size: 12px;
+                cursor: pointer;
             }
         }
         
         .apply-item + .apply-item {
             margin-top: 8px;
         }
+
+        &.team-users {
+            margin-top: 8px;
+            background: rgba(255, 255, 255, 0.04);
+            border-radius: 8px;
+            .apply-item {
+                background: none;
+                padding: 6px 8px;
+            }
+            .apply-users {
+                .team-info {
+                    padding-left: 8px;
+                    .team-name {
+                        color: #fff;
+                        font-size: 14px;
+                    }
+                    .team-time {
+                        color: #999999;
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
     }
     .p-t-2 {
         padding-top: 2px;
@@ -244,20 +291,22 @@ onMounted(() => {});
                 padding-right: 10px;
             }
             .apply-tooltip {
-                padding: 4px 10px;
+                padding: 0px 10px;
                 border-radius: 20px;
                 background: #3B3B3B;
                 .tooltip-user-item {
-                    display: flex;
+                    display: inline-block;
                     font-size: 12px;
                     color: #F2D677;
-                    max-width: 170px;
+                    max-width: 182px;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
+                    height: 26px;
+                    line-height: 30px;
                 }
                 .user-detail {
-                    display: flex;
+                    display: inline-block;
                 }
             }
         }
@@ -267,6 +316,7 @@ onMounted(() => {});
             padding-top: 8px;
             display: flex;
             align-items: center;
+            font-size: 12px;
             .user-item {
                 display: flex;
                 align-items: center;
@@ -287,4 +337,9 @@ onMounted(() => {});
         }
     }
 }
+
+                    
+.user-wrap {
+    display: flex;
+}
 </style>

src/views/home/homeMap.vue

@@ -24,6 +24,7 @@ import { newPoint } from "@/utils/map.js";
 import { Circle, Fill, Stroke, Style, Text } from "ol/style.js";
 import { Cluster, Vector as VectorSource } from "ol/source.js";
 import { boundingExtent } from "ol/extent.js";
+import RegionLayer from "./map/regionLayer";
 
 import { onMounted, ref } from "vue";
 import { useStore } from "vuex";
@@ -95,7 +96,7 @@ onMounted(() => {
     let level = 16;
     let 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);
 });
 let styleCache = {};
 let listenKey;
@@ -264,7 +265,14 @@ function zoomToFeatures(features) {
     kmap.getView().fit(extent, { duration: 500, padding: [200, 250, 120, 250] });
 }
 
-defineExpose({ addCluster, enableBoxSelect, stopBoxSelect });
+defineExpose({ addCluster, enableBoxSelect, stopBoxSelect, initAreaMap });
+
+// 分区
+let regionLayer = null;
+function initAreaMap(arr) {
+    console.log('aaa', arr);
+    regionLayer.initData(arr);
+}
 </script>
 
 <style lang="less" scoped>

src/views/home/index.vue

@@ -102,8 +102,8 @@ const router = useRouter();
 const mapRef = ref(null);
 
 const activeName = ref('认养列表')
+store.commit("home/SET_USER_ROLE", 2);
 onMounted(() => {
-    store.commit("home/SET_USER_ROLE", 2);
     //区域切换监听事件
     eventBus.on("area:id", areaId);
 });
@@ -131,6 +131,12 @@ const getPointList = () =>{
     })
 }
 
+function getBlueRegionList() {
+    VE_API.region.list({farmId: organId.value}).then(({data}) =>{
+        mapRef.value.initAreaMap(data);
+    })
+}
+
 const checkShow = ref(false)
 const hanldeCheck = () =>{
     checkShow.value = true
@@ -161,9 +167,8 @@ const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
     legendArr.value = colorObj?.list
     tabName.value = name;
     tabId.value = id;
-    if (id === 0) {
-        // getBlueRegionList();
-    }
+    // if (id === 0) {
+    // }
 };
 
 //区域切换监听事件
@@ -173,6 +178,8 @@ function areaId({ areaId, farmId }) {
 
     // 树点位
     getPointList()
+    // 分区
+    getBlueRegionList();
 }
 
 const urls = ref([]);

src/views/home/map/blueRegionLayer.js

@@ -1,6 +1,8 @@
 import config from "@/api/config.js";
 import * as KMap from "@/utils/ol-map/KMap";
 import { newAreaFeature } from "@/utils/util";
+import Style from "ol/style/Style";
+import { Fill, Text, Stroke } from "ol/style.js";
 
 /**
  * @description 地图层对象
@@ -12,6 +14,29 @@ class BlueRegionLayer {
 
         this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99, {
             minZoom: 15,
+            style: (f) => {
+                const style = new Style({
+                    fill: new Fill({
+                        color: "#0000004d",
+                    }),
+                    stroke: new Stroke({
+                        color: "#53f893", // 边框
+                        width: 2,
+                    }),
+                    text: new Text({
+                        text: f.get("name"), // 显示的文字
+                        font: "16px sans-serif",
+                        fill: new Fill({
+                            color: "black", // 文字颜色
+                        }),
+                        stroke: new Stroke({
+                            color: "white", // 文字描边
+                            width: 2,
+                        }),
+                    }),
+                });
+                return style;
+            },
         });
 
         map.addLayer(this.blueRegionLayer.layer);
@@ -27,7 +52,7 @@ class BlueRegionLayer {
                 let feature = newAreaFeature(item);
                 let strokeColor = "#FFFFFF";
                 // feature.setStyle(this.vectorStyle.getPolygonStyle("transparent", item.color, 2));
-                feature.setStyle(this.vectorStyle.getPolygonStyle("transparent", "rgba(255, 255, 255, 0.6)", 2));
+                // feature.setStyle(this.vectorStyle.getPolygonStyle("transparent", "rgba(255, 255, 255, 0.6)", 2));
                 // feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
                 this.blueRegionLayer.addFeature(feature);
             }

src/views/home/map/regionLayer.js

@@ -11,70 +11,68 @@ import { unByKey } from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { Vector as VectorSource } from "ol/source";
-import {newRegionFeature} from "@/utils/map";
+import {newRegionFeature, newPoint} from "@/utils/map";
 import Stroke from "ol/style/Stroke";
 
 /**
  * @description 地图层对象
  */
 class RegionLayer {
-    constructor(map, farm) {
+    constructor(map) {
         let that = this;
-        this.farmId = farm.id;
         this.vectorStyle = new KMap.VectorStyle();
 
         this.area = null
         this.index = null
 
-        const colorObj = {
-            "defalut":["#fba50410","#eee5e5"],
-            "blue":["#2199f894","#2199f894"],
-            "blue1":["#2199f804","#2199f804"],
-            "blue2":["#2199f87a","#2199f87a"],
-            "red":["#b8150094","#b8150094"],
-            "red1":["#FF733F94","#FF733F94"],
-            "red2":["#FFA96C94","#FFA96C94"],
-            "red3":["#FF26267a","#FF26267a"],
-            "green":["#006f0b94","#006f0b94"],
-            "green1":["#32b81a94","#32b81a94"],
-            "green2":["#B7FFAA94","#B7FFAA94"],
-            "red4":["#ff262663","#ff262663"]
-        }
-
         this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
             minZoom: 15,
             style: (f) => {
-                const color = colorObj[f.get("bgColor")]
-                const style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
-                // let style2 = null
-                // if(f.get("id")==0){
-                //     style2 = new Style({
-                //         image: new Icon({
-                //             src: require("@/assets/images/map/yellow-block.png"),
-                //             scale: 0.4,
-                //         }),
-                //         // text: new Text({
-                //         //     text: f.get("id"),
-                //         //     color: "#120046",
-                //         //     stroke: new Stroke({
-                //         //         color: "#FFFFFF",
-                //         //         width: 2,
-                //         //     }),
-                //         //     backgroundFill: new Fill({
-                //         //         color: "#f8f9fa10",
-                //         //         width: 2,
-                //         //     }),
-                //         //     font: "30px sans-serif",
-                //         // }),
-                //     });
-                // }
-                return [style1];
+                const style = new Style({
+                    fill: new Fill({
+                        color: "#0000004d",
+                    }),
+                    stroke: new Stroke({
+                        color: "#FFE17E80", // 边框
+                        width: 2,
+                    }),
+                });
+                return [style];
             },
         });
 
+        this.gardenPointLayer = new KMap.VectorLayer("gardenUserLayer", 100, {
+            minZoom: 15,
+            maxZoom: 22,
+            source: new VectorSource({}),
+            style: (feature) => {
+                let style1 = new Style({
+                    image: new Icon({
+                        src: require("@/assets/images/foster-home/area-bg.png"),
+                        scale: 1,
+                        // displacement: [70, 25],  // 向右30px，向上30px
+                    }),
+                    text: new Text({
+                        text: feature.get("name"), // 显示的文字
+                        font: "30px PangMenZhengDao",
+                        fill: new Fill({
+                            color: "#FFFFFF", // 文字颜色
+                        }),
+                        stroke: new Stroke({
+                            color: "#000", // 文字描边
+                            width: 1,
+                        }),
+                    }),
+                });
+                return [style1];
+            },
+            });
+
         map.addLayer(this.regionLayer.layer);
+        map.addLayer(this.gardenPointLayer.layer);
         this.initData(this.farmId);
     }
+
     //得到点样式
     getStyle(feature) {
         return this.getIconStyle(feature);
@@ -104,31 +102,24 @@ class RegionLayer {
         })
     }
 
-    initData(farmId) {
+    initData(data) {
+        console.log('da', data);
+        if (!data) return
         let that = this;
-        VE_API.region.listArea().then(({ data }) => {
-            let features = [];
-            for (let item of data) {
-                let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
-                features.push(f);
-            }
-            features.push(
-                newRegionFeature({
-                    highYield:1,
-                    id:"0",
-                    blueZone:"0",
-                    dateValue:"",
-                    bgName:"defalut",
-                    bgColor:"red4",
-                    wkt:"MULTIPOLYGON (((113.61390710255375 23.586379215663726,113.6140224799741 23.586530760891492,113.61429532483612 23.586727463001182,113.61471252366596 23.587019343551333,113.6151313088028 23.587376262702094,113.61544063873373 23.587220804583183,113.61557230224264 23.58706376015681,113.61544222504097 23.586978099560497,113.6151614486422 23.586913060959716,113.61506827952462 23.586818940057697,113.61491218688275 23.58671519555776,113.61477512992872 23.58657909038834,113.61452195527784 23.586449647709514,113.61430590021848 23.586303072911505,113.61396420961808 23.58621741231542,113.61390710255375 23.586379215663726)))"
-                },"wkt")
-            )
-            that.area = features
-            const source = new VectorSource({
-                features: features,
-            });
-            that.regionLayer.layer.setSource(source);
+        let features = [];
+        for (let item of data) {
+            item.regionWkt = item.wkt
+            let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
+            features.push(f);
+
+            item.wkt = item.pointWkt
+            this.gardenPointLayer.source.addFeature(newPoint(item, "wktVal", "myGarden"))
+        }
+        that.area = features
+        const source = new VectorSource({
+            features: features,
         });
+        that.regionLayer.layer.setSource(source);
     }
 
     reset(farm, region) {