feat:修改地图首页为高德地图

src/views/home/homeMap.vue

@@ -128,46 +128,46 @@ const initData = (data) =>{
     defalutAllPoints.value = []
     totalList.value.forEach(item => map.value.remove(item.icon))
     totalList.value = []
-    // allPoints.value.forEach(item =>{
-    //     item.icon = new window.AMap.Marker({
-    //         position: item.lngLat,
-    //         map: map.value,
-    //         content: createMarkerContent(item.color),
-    //         offset: new window.AMap.Pixel(-7, -7),
-    //         extData: { id: item.id, priority: item.status > item.noImg > item.wys } // 标记优先级
-    //     });
-    //     item.type = 'defalutIcon'
+    allPoints.value.forEach(item =>{
+        item.icon = new window.AMap.Marker({
+            position: item.lnglat,
+            map: map.value,
+            content: createMarkerContent(item.color),
+            offset: new window.AMap.Pixel(-7, -7),
+            extData: { id: item.id, priority: item.status > item.noImg > item.wys } // 标记优先级
+        });
+        item.type = 'defalutIcon'
 
-    //     // 绑定点击事件
-    //     item.icon.on('click', () => {
-    //         mapEventType.value = 'click'
-    //         if(item.type === 'defalutIcon'){
-    //             item.icon.setContent(createMarkerImg()); 
-    //             item.icon.setOffset(new window.AMap.Pixel(-18, -18))
-    //             item.type = 'activeIcon'
-    //             const arr = pointList.value.filter(ele => ele.id === item.id)
-    //             if(arr.length===0){
-    //                 pointList.value.push(item)
-    //             }
-    //         }else{
-    //             item.icon.setContent(createMarkerContent(item.color)); 
-    //             item.icon.setOffset(new window.AMap.Pixel(-7, -7))
-    //             item.type = 'defalutIcon'
-    //         }
+        // 绑定点击事件
+        item.icon.on('click', () => {
+            mapEventType.value = 'click'
+            if(item.type === 'defalutIcon'){
+                item.icon.setContent(createMarkerImg()); 
+                item.icon.setOffset(new window.AMap.Pixel(-18, -18))
+                item.type = 'activeIcon'
+                const arr = pointList.value.filter(ele => ele.id === item.id)
+                if(arr.length===0){
+                    pointList.value.push(item)
+                }
+            }else{
+                item.icon.setContent(createMarkerContent(item.color)); 
+                item.icon.setOffset(new window.AMap.Pixel(-7, -7))
+                item.type = 'defalutIcon'
+            }
 
-    //         setTimeout(()=>{
-    //             mapEventType.value = 'draw'
-    //         },100)
-    //     });
-    //     defalutAllPoints.value.push(item)
-    // })
+            setTimeout(()=>{
+                mapEventType.value = 'draw'
+            },100)
+        });
+        defalutAllPoints.value.push(item)
+    })
     // 初始化点聚合
-    console.log('data',data);
-    const cluster = new window.AMap.MarkerCluster(map.value, data, {
-        gridSize: 60,          // 聚合网格像素大小
-        // maxZoom: 15,           // 最大聚合级别
-        // renderClusterMarker: customizeCluster // 自定义聚合样式
-    });
+    // console.log('data',data);
+    // const cluster = new window.AMap.MarkerCluster(map.value, data, {
+    //     gridSize: 30,          // 聚合网格像素大小
+    //     // maxZoom: 15,           // 最大聚合级别
+    //     // renderClusterMarker: customizeCluster // 自定义聚合样式
+    // });
     setTimeout(()=>{
         map.value.setFitView(null, false, [0, 0, 0, 0]);
     },100)
@@ -208,7 +208,7 @@ const checkPointsInArea = () => {
     if (!selectedArea.value) return;
     const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
     selectedPoints.value = allPoints.value.filter((point) => {
-        return bounds.contains(point.lngLat); // 判断点位是否在框选区域内
+        return bounds.contains(point.lnglat); // 判断点位是否在框选区域内
     });
     
     selectedPoints.value.forEach(item =>{
@@ -224,25 +224,6 @@ const checkPointsInArea = () => {
     })
 };
 
-const speciesArr = ref([])
-const getList = () =>{
-    const params = {
-        farmId:sessionStorage.getItem('farmId'),
-        regionId:sessionStorage.getItem('regionId')
-    }
-    VE_API.variety.pointList(params).then(res =>{
-        allPoints.value = res.data.map(item =>{
-            const bgColor = speciesArr.value.filter(ele =>ele.speciesItemId === item.speciesItemId)
-            return{
-                ...item,
-                color:bgColor[0].color,
-                lngLat:convertPointToArray(item.point)
-            }
-        })
-        initData()
-    })
-}
-
 const totalList = ref([])
 
 function getSelectPoint(){
@@ -251,28 +232,15 @@ function getSelectPoint(){
     return arr
 }
 
-defineExpose({getSelectPoint,initData})
-
-function getSpeciesList(arr){
-    speciesArr.value = arr
-    getList()
-}
+defineExpose({getSelectPoint,initData,startRectangleSelection,stopDrawRectangle,clearSelection})
 
 // 组件挂载时初始化地图
 onMounted(() => {
     initMap()
-    eventBus.on('handle:clear',clearSelection)
-    eventBus.on('species:list',getSpeciesList)
-    eventBus.on('handle:start',startRectangleSelection)
-    eventBus.on('handle:end',stopDrawRectangle)
 });
 
 onUnmounted(()=>{
     map.value.destroy()// 销毁地图实例以释放资源
-    eventBus.off('handle:clear',clearSelection)
-    eventBus.off('species:list',getSpeciesList)
-    eventBus.off('handle:start',startRectangleSelection)
-    eventBus.off('handle:end',stopDrawRectangle)
 })
 </script>
 

src/views/home/index.vue

@@ -6,14 +6,7 @@
             <div class="left yes-events">
                 <component :is="components[currentComponent]" />
             </div>
-            <!-- <div class="home-bottom">
-                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
-                    <home-file></home-file>
-                    <div class="arrow" @click="handleShrink('bottom')">
-                        <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
-                    </div>
-                </div>
-            </div> -->
+            
             <div class="right yes-events">
                 <div class="list adopt-list-wrap">
                     <chart-box name="认养管理" arrow="">
@@ -44,21 +37,29 @@
             </div>
             <div v-else class="map-bg map-legend yes-events">
                 <div class="item">
-                    <img src="@/assets/images/map/status/status-bh.png" alt="" />
-                    病害异常
+                    <img src="@/assets/images/map/status/wry.png" alt="" />
+                    未开放认养
                 </div>
                 <div class="item">
-                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
-                    虫害异常
+                    <img src="@/assets/images/map/status/dry.png" alt="" />
+                    待认养
                 </div>
                 <div class="item">
-                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
-                    正常
+                    <img src="@/assets/images/map/status/yry.png" alt="" />
+                    已认养
                 </div>
-                <!-- <div class="item">
-                    <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
-                    无照片
-                </div> -->
+            </div>
+
+            <div class="tips" v-show="checkShow">
+                <div class="text">
+                    <span>提示：</span>请在底图上点选 <span>认养的果树</span>，或框选 <span>认养的区域</span>
+                </div>
+            </div>
+
+            <div v-show="!checkShow" class="right-button yes-events" @click="hanldeCheck">勾选认养区域</div>
+            <div v-show="checkShow" class="center-button yes-events">
+                <div class="cancel" @click="handleCancel">取消</div>
+                <div @click="handleCancel">确认开放认养权限</div>
             </div>
         </div>
     </div>
@@ -78,7 +79,6 @@ 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 fileBar from "@/components/fileBar.vue";
 import homePage from "./components/homePage.vue";
 import adoptList from "./components/adoptList.vue";
 import clientList from "./components/clientList.vue";
@@ -117,7 +117,7 @@ const getPointList = () =>{
         const arr = data.map(item =>{
             return{
                 ...item,
-                lngLat:convertPointToArray(item.point)
+                lnglat:convertPointToArray(item.point)
             }
         })
         if(mapRef.value){
@@ -126,6 +126,18 @@ const getPointList = () =>{
     })
 }
 
+const checkShow = ref(false)
+const hanldeCheck = () =>{
+    checkShow.value = true
+    mapRef.value.startRectangleSelection()
+}
+
+const handleCancel = () =>{
+    checkShow.value = false
+    mapRef.value.clearSelection()
+    mapRef.value.stopDrawRectangle()
+}
+
 const blueList = ref([]);
 const getBlueRegionList = (callback) => {
     let selectAll = undefined;
@@ -334,124 +346,10 @@ const currentComponent = ref("homePage");
         .overflow {
             overflow: auto;
         }
-        .home-bottom {
-            display: flex;
-            align-items: flex-end;
-            width: calc(100% - 60px - 376px * 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;
-                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 {
@@ -460,14 +358,70 @@ const currentComponent = ref("homePage");
             background: rgba(35, 35, 35, 0.8);
             border-radius: 18px;
             padding: 7px 16px;
+            left: 460px;
+        }
+        .tips{
+            position: fixed;
+            z-index: 2;
+            top: 105px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            .text{
+                font-size: 20px;
+                padding: 6px 16px;
+                font-family: "PangMenZhengDao";
+                background: rgba(4, 3, 0, 0.6);
+                border-radius: 20px;
+                span{
+                    color: #FFD489;
+                }
+            }
+        }
+        .right-button{
+            position: fixed;
+            z-index: 2;
             right: 460px;
+            bottom: 36px;
+            font-size: 24px;
+            font-family: "PangMenZhengDao";
+            padding: 16px 32px 20px 32px;
+            cursor: pointer;
+            background: url('@/assets/images/foster-home/btn-bg.png') no-repeat center center /100% 100%;
+        }
+        .center-button{
+            position: fixed;
+            z-index: 2;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            bottom: 116px;
+            div{
+                cursor: pointer;
+                width: 248px;
+                text-align: center;
+                padding: 15px;
+                font-family: "PangMenZhengDao";
+                color: #000;
+                font-size: 20px;
+                background: linear-gradient(0deg,#FFD887,#ED9E1E);
+                border: 2px solid rgba(255, 255, 255, 0.61);
+                border-radius: 12px;
+            }
+            .cancel{
+                margin-right: 20px;
+                background: #EEEEEE;
+            }
         }
         .map-btn {
             top: 19px;
             cursor: pointer;
         }
         .map-legend {
-            bottom: 34px;
+            bottom: 36px;
+            display: flex;
+            align-items: center;
             .item {
                 display: flex;
                 align-items: center;
@@ -489,7 +443,7 @@ const currentComponent = ref("homePage");
                 border-bottom: 1px solid rgba(102, 102, 102, 0.35);
             }
             .item + .item {
-                padding-top: 10px;
+                padding-left: 12px;
             }
         }
     }