地图聚合

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -32,7 +32,7 @@
               </div>
             </div>
           </fd-card>
-          <fd-card class="mar-t14" label="志愿者" v-loading="fraternityLoading">
+          <fd-card class="mar-t14" label="志愿者">
             <div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
               <div class="el-icon-position"/>
             </div>
@@ -172,6 +172,31 @@ const tableConfigs = {
 const genderDict = {
   1: '男', 2: '女', 3: '未知', 0: '未知'
 }
+const getCluster = (points, options = {big: {}, normal: {}}, num = 10) => {
+  const big = [], {distance = 0.05} = options
+  const pointInsideCircle = (point, circle, r) => {
+    if (r === 0) return false
+    const dx = circle[0] - point[0]
+    const dy = circle[1] - point[1]
+    return dx * dx + dy * dy <= r * r
+  }
+  return points.map(e => {
+    e.coord = e.coord.map(c => Number(c))
+    if (big.length == 0 ||
+        !big.find(b => pointInsideCircle(e.coord, b, distance)) && big.length < num) {
+      big.push(e.coord)
+      return {
+        ...e,
+        ...options.big,
+      }
+    } else {
+      return {
+        ...e,
+        ...options.normal
+      }
+    }
+  })
+}
 
 export default {
   name: "AppBIBoard",
@@ -308,7 +333,6 @@ export default {
       detail: {},
       areaStaType: 'grid',
       fraternities: [],
-      fraternityLoading: false
     }
   },
   computed: {
@@ -388,16 +412,18 @@ export default {
     getData(c = 0) {
       const {areaId} = this.$data
       if (areaId) {
-        this.getMiniAppInfo()
+        const loading = this.$loading({
-        this.getRealTimeDynamic(areaId)
+          text: "正在加载数据...",
-        this.getWxGroupOverview(areaId)
+          background: 'rgba(0,0,0,.91)',
-        this.getGdyh(areaId)
+        })
-        this.getMapData(areaId)
-        this.fraternityLoading = true
         Promise.all([
-          this.getFraternitySta(areaId),
+          this.getMiniAppInfo(),
-          this.getFraternities(areaId)
+          this.getRealTimeDynamic(areaId),
-        ]).finally(() => this.fraternityLoading = false)
+          this.getWxGroupOverview(areaId),
+          this.getGdyh(areaId),
+          this.getFraternitySta(this.transferAreaCode(areaId)),
+          this.getFraternities(this.transferAreaCode(areaId)).then(() => this.getMapData(areaId))
+        ]).finally(() => loading.close())
       } else if (c < 10) setTimeout(() => this.getData(++c), 500)
       else console.error(`尝试${c}次加载数据,无法过去数据`)
     },
@@ -484,11 +510,14 @@ export default {
           initMap.then(() => {
             this.map.clear()
             this.$refs.map.init()
-            const {records} = res.data
+            const {records} = res.data,
+                fraternities = this.fraternities.filter(e => !!e.longtitude)
             this.map.on('click', e => {
               console.log(e)
               if (e.data?.marker == 'store') {//点击店铺
                 this.getMapStore(e.data)
+              } else if (e.data?.marker == 'fraternity') {//点击互助会
+                this.getMapFraternityData(e.data)
               } else if (e.data?.unique_id) {//点击地区
                 this.getMapArea(e.data)
               }
@@ -501,16 +530,40 @@ export default {
                     show: true,
                     position: 'right',
                     formatter: '{b}',
-                    distance: 2
+                    distance: 2,
                   },
-                  data: records.map(e => ({
+                  data: [
-                    ...e,
+                    ...getCluster(records.filter(e => !!e.lng).map(e => ({
-                    marker: 'store',
+                      ...e,
-                    coord: [e.lng, e.lat],
+                      marker: 'store',
-                    name: e.title,
+                      coord: [e.lng, e.lat],
-                    label: {color: "#FECA86"},
+                      name: e.title,
-                    symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png",
+                      label: {color: "#FECA86"},
-                  }))
+                    })), {
+                      big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png"},
+                      normal: {
+                        itemStyle: {color: "#FECA86"},
+                        label: {show: false, emphasis: {show: true, color: "#FECA86"}},
+                        symbol: 'circle',
+                        symbolSize: 6
+                      }
+                    }),
+                    ...getCluster(fraternities.map(e => ({
+                      ...e,
+                      marker: 'fraternity',
+                      coord: [e.longtitude, e.latitude],
+                      name: e.fraternity_name,
+                      label: {color: "#70FF8A"},
+                    })), {
+                      big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdFraternitIcon.png"},
+                      normal: {
+                        itemStyle: {color: "#70FF8A"},
+                        label: {show: false, emphasis: {show: true, color: "#70FF8A"}},
+                        symbol: 'circle',
+                        symbolSize: 6
+                      }
+                    })
+                  ],
                 }
               }
             })
@@ -539,6 +592,13 @@ export default {
         }
       })
     },
+    getMapFraternityData(area) {
+      console.log(area)
+      this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code: undefined}}).then(res => {
+        if (res?.data) {
+        }
+      })
+    },
     handleRealtimeEventDialog({rowIndex}) {
       const row = this.realtimeEvents.meta[rowIndex]
       if (row.bizId) {
@@ -619,8 +679,8 @@ export default {
       window.open("http://datas.fdxjtjyhzzyfw.cn/")
     },
     getVolunteerData(area_code) {
-      area_code = area_code.substring(0, 8)
+      area_code = this.transferAreaCode(area_code)
-      this.instance.get("/hzh/find-volunteer-list-detail", {
+      return this.instance.get("/hzh/find-volunteer-list-detail", {
         params: {
           page_size: 40,
           area_code,
@@ -636,17 +696,16 @@ export default {
       })
     },
     getFraternities(area_code) {
-      area_code = area_code.substring(0, 8)
+      return this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code}}).then(res => {
-      this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code}}).then(res => {
         if (res?.data) {
           this.fraternity = res.data[0]?.fraternity_name
-          this.fraternities = res.data
+          return this.fraternities = res.data || []
         }
       })
     },
     getFraternitySta(area_code) {
       area_code = area_code.substring(0, 8)
-      this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
+      return this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
         if (res?.data) {
           let 团队数量 = 0, 志愿者数量 = 0, 服务学员数量 = 0
           res.data.forEach(e => {
@@ -657,6 +716,10 @@ export default {
           this.volunteers = {团队数量, 志愿者数量, 服务学员数量}
         }
       })
+    },
+    transferAreaCode(code) {//与互助会地区编码互通
+      const format = str => Number(str).toString().padStart(2, '0')
+      return code.substring(0, 6) + format(code.substring(6, 9))
     }
   },
   created() {