左下角互助会板面数据对接完成

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
-    <ai-fit-view @scale="v=>scale=v">
+    <ai-fit-view>
       <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
           <fengdu-head v-model="areaId" v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
@@ -32,7 +32,7 @@
               </div>
             </div>
           </fd-card>
-          <fd-card class="mar-t14" label="志愿者">
+          <fd-card class="mar-t14" label="志愿者" v-loading="fraternityLoading">
             <div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
               <div class="el-icon-position"/>
             </div>
@@ -44,7 +44,8 @@
             </div>
             <div class="flex mar-v12">
               <b class="fill title">志愿者名单</b>
-              <ai-select class="areaPicker" placeholder="团队选择"/>
+              <ai-select v-model="fraternity" class="areaPicker" placeholder="团队选择" :select-list="fraternities"
+                         :prop="{label:'fraternity_name',value:'fraternity_name'}" @select="getVolunteerData(areaId)"/>
             </div>
             <dv-scroll-board ref="volunteerTable" :config="volunteerConfig"/>
             <div class="dots flex center">
@@ -168,6 +169,9 @@ const tableConfigs = {
   headerHeight: 38,
   rowNum: 3,
 }
+const genderDict = {
+  1: '男', 2: '女', 3: '未知', 0: '未知'
+}
 
 export default {
   name: "AppBIBoard",
@@ -183,7 +187,7 @@ export default {
   data() {
     return {
       areaId: '',
-      scale: 1,
+      fraternity: '',
       fullscreen: false,
       sta: {},
       chart: {
@@ -241,31 +245,27 @@ export default {
         // {name: "全部居民群", value: 5118},
       ],
       chartData2: [],
-      volunteers: {
+      volunteers: {},
-        团队数量: 125,
-        志愿者数量: 13,
-        服务学员数量: 5
-      },
       volunteerConfig: {
         ...tableConfigs,
         header: ['所属团队', '姓名', '性别', '年龄'],
         rowNum: 4,
-        columnWidth: [250],
+        columnWidth: [250, 80],
         align: ['left', 'left', 'left', 'center'],
         carousel: 'page',
         data: [
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
-          ['三合街道丁庄社区互助会', '王富贵', '女', 32],
+          // ['三合街道丁庄社区互助会', '王富贵', '女', 32],
-          ['三合街道丁庄社区互助会', '阿萨德', '男', 23],
+          // ['三合街道丁庄社区互助会', '阿萨德', '男', 23],
-          ['三合街道丁庄社区互助会', '阿连德', '男', 54],
+          // ['三合街道丁庄社区互助会', '阿连德', '男', 54],
-          ['三合街道丁庄社区互助会', '王柏柏', '女', 66],
+          // ['三合街道丁庄社区互助会', '王柏柏', '女', 66],
-          ['三合街道丁庄社区互助会', '赵二狗', '男', 41],
+          // ['三合街道丁庄社区互助会', '赵二狗', '男', 41],
-          ['三合街道丁庄社区互助会', '唯一键', '女', 13],
+          // ['三合街道丁庄社区互助会', '唯一键', '女', 13],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
         ]
       },
       appSta: {
@@ -306,7 +306,9 @@ export default {
       map: null,
       dialog: false,
       detail: {},
-      areaStaType: 'grid'
+      areaStaType: 'grid',
+      fraternities: [],
+      fraternityLoading: false
     }
   },
   computed: {
@@ -391,7 +393,11 @@ export default {
         this.getWxGroupOverview(areaId)
         this.getGdyh(areaId)
         this.getMapData(areaId)
-        this.getVolunteerData(areaId)
+        this.fraternityLoading = true
+        Promise.all([
+          this.getFraternitySta(areaId),
+          this.getFraternities(areaId)
+        ]).finally(() => this.fraternityLoading = false)
       } else if (c < 10) setTimeout(() => this.getData(++c), 500)
       else console.error(`尝试${c}次加载数据,无法过去数据`)
     },
@@ -612,10 +618,45 @@ export default {
     handleJump() {
       window.open("http://datas.fdxjtjyhzzyfw.cn/")
     },
-    getVolunteerData(area_code){
+    getVolunteerData(area_code) {
-      // fetch("https://datas.fdxjtjyhzzyfw.cn/find-fraternity-detail?page=1&page_size=999").then(res=>res.json()).then(res=>{
+      area_code = area_code.substring(0, 8)
-      //   console.log(res)
+      this.instance.get("/hzh/find-volunteer-list-detail", {
-      // })
+        params: {
+          page_size: 40,
+          area_code,
+          team_name: this.fraternity
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.volunteerConfig = {
+            ...this.volunteerConfig,
+            data: res.data.map(e => [e.team_name, e.vol_name, genderDict[e.vol_gender], e.vol_age])
+          }
+        }
+      })
+    },
+    getFraternities(area_code) {
+      area_code = area_code.substring(0, 8)
+      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
+        }
+      })
+    },
+    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 => {
+        if (res?.data) {
+          let 团队数量 = 0, 志愿者数量 = 0, 服务学员数量 = 0
+          res.data.forEach(e => {
+            团队数量++
+            志愿者数量 += e.vol_num
+            服务学员数量 += e.stu_num
+          })
+          this.volunteers = {团队数量, 志愿者数量, 服务学员数量}
+        }
+      })
     }
   },
   created() {
@@ -641,6 +682,14 @@ export default {
       border-radius: 2.2px;
       color: #B3DDE5;
       cursor: pointer;
+
+      &::placeholder {
+        color: inherit;
+      }
+    }
+
+    .el-input__icon {
+      color: #B3DDE5;
     }
 
     .el-input__suffix {
@@ -817,6 +866,7 @@ export default {
       border-radius: 50%;
       background: #679a9a80;
       margin-right: 8px;
+      flex-shrink: 0;
 
       &.current {
         background: #02FEFF;
@@ -875,7 +925,8 @@ export default {
         color: #02FEFF;
       }
     }
-    &.box2{
+
+    &.box2 {
       background-image: url("./assets/box2.png");
     }
   }