互助会地图交互完成

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -36,7 +36,7 @@
             <div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
               <div class="el-icon-position"/>
             </div>
-            <div class="staPanel simple flex mar-t10">
+            <div class="staPanel simple flex mar-t10" @click="getFraternityData">
               <div class="fill" v-for="(v,k) in volunteers" :key="k">
                 <div v-text="k"/>
                 <b v-text="v"/>
@@ -116,6 +116,17 @@
           <b class="title mar-t14 mar-b12">订单列表</b>
           <dv-scroll-board :config="goodsConfig" style="height: 152px"/>
         </template>
+        <template v-else-if="detail.mapType=='fraternitySta'">
+          <el-input placeholder="请输入互助会名称..." class="areaPicker mar-b20" size="small"
+                    v-model="fraternityFilter"/>
+          <dv-scroll-board :config="fraternityConfig" style="height: 380px"/>
+        </template>
+        <template v-else-if="detail.mapType=='fraternity'">
+          <div class="flex normal">
+            <el-image class="fraternityImg" :src="detail.cover_url"/>
+            <div class="mar-l16 fill" v-html="detail.introduction"/>
+          </div>
+        </template>
         <template v-else-if="detail.mapType=='area'">
           <div class="staPanel area right mar-t12 mar-b24 grid c-4">
             <fd-item v-for="(v,k) in detail.sta" :key="k" :label="k"><b v-text="v"/></fd-item>
@@ -173,7 +184,7 @@ const genderDict = {
   1: '男', 2: '女', 3: '未知', 0: '未知'
 }
 const getCluster = (points, options = {big: {}, normal: {}}, num = 10) => {
-  const big = [], {distance = 0.05} = options
+  const big = [], {distance = 0.03} = options
   const pointInsideCircle = (point, circle, r) => {
     if (r === 0) return false
     const dx = circle[0] - point[0]
@@ -183,7 +194,7 @@ const getCluster = (points, options = {big: {}, normal: {}}, num = 10) => {
   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.find(b => pointInsideCircle(e.coord, b, distance)) && big.length < num && e.introduction) {
       big.push(e.coord)
       return {
         ...e,
@@ -333,6 +344,7 @@ export default {
       detail: {},
       areaStaType: 'grid',
       fraternities: [],
+      fraternityFilter: ''
     }
   },
   computed: {
@@ -370,12 +382,20 @@ export default {
           data: v.detail.groupList?.map(e => [e.name, e.ownerName, e.memberCount])
         },
         volunteer: {
-          header: ['互助会名称', '会长', '会员数'],
+          header: ['互助会类型', '互助会数量', '会员数'],
-          align: ['left', 'left', 'right'],
+          align: ['left', 'right', 'right'],
           columnWidth: [250],
-          data: v.detail.volunteers?.map(e => [e.name, e.ownerName, e.memberCount])
+          data: v.detail.fraternities?.map(e => [e.type, e.number, e.member_number])
         }
       }[v.areaStaType]
+    }),
+    fraternityConfig: v => ({
+      ...tableConfigs,
+      header: ['互助会', '家长数量', '学生数量', '活动数量'],
+      columnWidth: [250],
+      align: ['left', 'right', 'right', 'right'],
+      rowNum: 9,
+      data: v.detail.list.map(e => [])
     })
   },
   watch: {
@@ -499,7 +519,7 @@ export default {
     getMapData(visibleId) {
       const initMap = new Promise(resolve => {
         const load = (c = 0) => {
-          if (this.map) {
+          if (this.map && this.$refs.map) {
             resolve()
           } else if (c < 10) setTimeout(() => load(++c), 500)
         }
@@ -513,11 +533,12 @@ export default {
             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)
+                this.dialog = true
+                const {fraternity_name, marker: mapType} = e.data
+                this.detail = {eventType: fraternity_name, mapType, ...e.data}
               } else if (e.data?.unique_id) {//点击地区
                 this.getMapArea(e.data)
               }
@@ -580,24 +601,35 @@ export default {
       })
     },
     getMapArea(area) {
-      this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
+      const area_code = this.transferAreaCode(area.unique_id)
-        if (res?.data) {
+      let info = {}, fraternity = {}
-          this.dialog = true
+      Promise.all([
-          const {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会 = 0, 会员数量 = 0} = res.data
+        this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
-          this.detail = {
+          if (res?.data) {
-            eventType: area.name,
+            return info = res.data
-            mapType: 'area', ...res.data,
-            sta: {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会, 会员数量}
           }
+        }),
+        this.instance.get("/hzh/count-fraternity", {params: {area_code}}).then(res => {
+          if (res?.data) {
+            let 互助会 = 0, 会员数量 = 0
+            res.data.forEach(e => {
+              互助会 += e.number
+              会员数量 += e.member_number
+            })
+            return fraternity = {互助会, 会员数量, list: res.data}
+          }
+        })
+      ]).then(() => {
+        this.dialog = true
+        const {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数} = info,
+            {互助会 = 0, 会员数量 = 0} = fraternity
+        this.detail = {
+          eventType: area.name,
+          mapType: 'area', ...info, fraternities: fraternity.list,
+          sta: {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会, 会员数量}
         }
       })
-    },
+
-    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]
@@ -718,9 +750,19 @@ export default {
       })
     },
     transferAreaCode(code) {//与互助会地区编码互通
-      const format = str => Number(str).toString().padStart(2, '0')
+      const format = str => Number(str).toString().padStart(3, '0'),
-      return code.substring(0, 6) + format(code.substring(6, 9))
+          last = /0{6}$/.test(code) ? '' : format(code.substring(6, 9))
-    }
+      return code.substring(0, 6) + last
+    },
+    getFraternityData() {
+      const area_code = this.transferAreaCode(this.areaId)
+      this.instance.get("/hzh/find-fraternity-member-detail", {params: {area_code}}).then(res => {
+        if (res?.data) {
+          this.dialog = true
+          this.detail = {eventType: "互助会信息", mapType: 'fraternitySta', list: res.data}
+        }
+      })
+    },
   },
   created() {
     Vue.use(scrollBoard)
@@ -1055,5 +1097,10 @@ export default {
     }
   }
 
+  .fraternityImg {
+    width: 244px;
+    height: 268px;
+    flex-shrink: 0;
+  }
 }
 </style>