From b64f63ef9b6df6e652e50d58e68bf51a1bc197e0 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 31 Oct 2023 16:09:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=B8=8B=E8=A7=92=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/fengdu/AppBIBoard/AppBIBoard.vue      | 211 +++++++++++-------
 .../fengdu/AppBIBoard/components/fdDialog.vue |  15 +-
 2 files changed, 146 insertions(+), 80 deletions(-)

diff --git a/project/fengdu/AppBIBoard/AppBIBoard.vue b/project/fengdu/AppBIBoard/AppBIBoard.vue
index 6bf6787c..63f5e686 100644
--- a/project/fengdu/AppBIBoard/AppBIBoard.vue
+++ b/project/fengdu/AppBIBoard/AppBIBoard.vue
@@ -32,25 +32,31 @@
               </div>
             </div>
           </fd-card>
-          <fd-card class="mar-t14" label="志愿者">
-            <div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
+          <fd-card class="mar-t14" :label="leftBottom">
+            <div v-if="leftBottom=='志愿者'" class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
               <div class="el-icon-position"/>
             </div>
-            <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"/>
-              </div>
-            </div>
-            <div class="flex mar-v12">
-              <b class="fill title">志愿者名单</b>
-              <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">
-              <div class="dot" v-for="i in tablePages" :key="i" :class="{current:current==i}"/>
-            </div>
+            <el-carousel arrow="never" class="mar-t8" @change="v=>leftBottom=['志愿者','互助会'][v]">
+              <el-carousel-item name="志愿者">
+                <div class="staPanel simple flex mar-t10">
+                  <div class="fill" v-for="(v,k) in volunteers" :key="k">
+                    <div v-text="k"/>
+                    <b v-text="v"/>
+                  </div>
+                </div>
+                <div class="flex mar-v12">
+                  <b class="fill title">志愿者名单</b>
+                  <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 :config="volunteerConfig"/>
+              </el-carousel-item>
+              <el-carousel-item name="互助会">
+                <dv-scroll-board class="origin" :config="fraternityTypeConfig" @click="getFraternityData"
+                                 style="height:360px"/>
+              </el-carousel-item>
+            </el-carousel>
           </fd-card>
         </div>
         <div class="center fill relative">
@@ -102,7 +108,8 @@
           </fd-card>
         </div>
       </ai-dv-wrapper>
-      <fd-dialog v-model="dialog" :title="detail.eventType">
+      <fd-dialog v-model="dialog" :title="detail.eventType" :extra-dialog.sync="fraternityExtra"
+                 :extra-title="detail.extraTitle">
         <template v-if="detail.mapType=='store'">
           <b class="title mar-t8 mar-b16">店铺商品</b>
           <carousel autoplay :perPage="3" autoplayHoverPause navigationEnabled :paginationEnabled="false"
@@ -119,7 +126,11 @@
         <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"/>
+          <dv-scroll-board v-loading="fraternityLoading" :config="fraternityConfig" style="height: 380px"
+                           element-loading-background="rgba(0, 0, 0, 0.2)" @click="handleFraternityTableClick"/>
+          <div slot="extra">
+            <dv-scroll-board :config="fraternityExtraConfig" style="height: 380px"/>
+          </div>
         </template>
         <template v-else-if="detail.mapType=='fraternity'">
           <div class="flex normal">
@@ -175,9 +186,9 @@ import {Carousel, Slide} from "vue-carousel"
 
 const tableConfigs = {
   headerBGC: 'rgba(33, 180, 253, 0.1)',
+  headerHeight: 38,
   oddRowBGC: 'rgba(112, 112, 112, 0)',
   evenRowBGC: 'rgba(112, 112, 112, 0)',
-  headerHeight: 38,
   rowNum: 3,
 }
 const genderDict = {
@@ -344,11 +355,14 @@ export default {
       detail: {},
       areaStaType: 'grid',
       fraternities: [],
-      fraternityFilter: ''
+      fraternityTypes: [],
+      fraternityFilter: '',
+      fraternityLoading: false,
+      fraternityExtra: false,
+      leftBottom: '志愿者'
     }
   },
   computed: {
-    tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0,
     shortcuts: () => [
       {k: '3', v: '昨日'},
       {k: '0', v: '近七天'},
@@ -392,10 +406,31 @@ export default {
     fraternityConfig: v => ({
       ...tableConfigs,
       header: ['互助会', '家长数量', '学生数量', '活动数量'],
-      columnWidth: [250],
+      columnWidth: [280],
       align: ['left', 'right', 'right', 'right'],
       rowNum: 9,
-      data: v.detail.list.map(e => [])
+      data: v.detail.list.filter(e => !v.fraternityFilter || e.fraternity_name.indexOf(v.fraternityFilter) > -1)
+          .map(e => [e.fraternity_name, e.par_num, e.stu_num, e.act_num])
+    }),
+    fraternityExtraConfig: v => ({
+      ...tableConfigs, rowNum: 10,
+      header: ['姓名', '性别', '年龄'],
+      align: ['left', 'center', 'right'],
+      data: v.detail.extra,
+      ...v.detail.others
+    }),
+    fraternityTypeConfig: v => ({
+      oddRowBGC: 'rgba(112, 112, 112, 0)',
+      evenRowBGC: 'rgba(112, 112, 112, 0)',
+      rowNum: 3,
+      data: v.fraternityTypes.map(e => [`
+      <div class="title mar-t10">${e.type}</div>
+      <div class="staPanel simple flex mar-t10" >
+      <div class="fill"><div>互助会</div><b>${e.number || 0}</b></div>
+      <div class="fill"><div>会员数量</div><b>${e.member_number || 0}</b></div>
+      <div class="fill"><div>活动数量</div><b>${e.activity_number || 0}</b></div>
+</div>
+      `])
     })
   },
   watch: {
@@ -420,15 +455,6 @@ export default {
       const value = data.length > 0 ? (data[0].value / data.at(-1).value * 100 || 0).toFixed(0) : 0
       return [{value}]
     },
-    watchTablePageChange(c = 0) {
-      if (this.$refs.volunteerTable) {
-        this.$refs.volunteerTable.$watch('animationIndex', i => {
-          this.current = Math.floor(i / 4) + 1
-        })
-      } else if (c < 5) {
-        setTimeout(() => this.watchTablePageChange(++c), 500)
-      }
-    },
     getData(c = 0) {
       const {areaId} = this.$data
       if (areaId) {
@@ -442,6 +468,7 @@ export default {
           this.getWxGroupOverview(areaId),
           this.getGdyh(areaId),
           this.getFraternitySta(this.transferAreaCode(areaId)),
+          this.getFraternityTypes(areaId).then(data => this.fraternityTypes = data),
           this.getFraternities(this.transferAreaCode(areaId)).then(() => this.getMapData(areaId))
         ]).finally(() => loading.close())
       } else if (c < 10) setTimeout(() => this.getData(++c), 500)
@@ -601,7 +628,6 @@ export default {
       })
     },
     getMapArea(area) {
-      const area_code = this.transferAreaCode(area.unique_id)
       let info = {}, fraternity = {}
       Promise.all([
         this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
@@ -609,15 +635,13 @@ export default {
             return info = res.data
           }
         }),
-        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}
-          }
+        this.getFraternities(area.unique_id).then(list => {
+          let 互助会 = 0, 会员数量 = 0
+          list.forEach(e => {
+            互助会 += e.number
+            会员数量 += e.member_number
+          })
+          return fraternity = {互助会, 会员数量, list}
         })
       ]).then(() => {
         this.dialog = true
@@ -736,7 +760,6 @@ export default {
       })
     },
     getFraternitySta(area_code) {
-      area_code = area_code.substring(0, 8)
       return this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
         if (res?.data) {
           let 团队数量 = 0, 志愿者数量 = 0, 服务学员数量 = 0
@@ -754,23 +777,48 @@ export default {
           last = /0{6}$/.test(code) ? '' : format(code.substring(6, 9))
       return code.substring(0, 6) + last
     },
-    getFraternityData() {
+    getFraternityData(args) {
+      this.dialog = true
+      this.detail = {eventType: "互助会信息", mapType: 'fraternitySta', list: []}
       const area_code = this.transferAreaCode(this.areaId)
+      this.fraternityLoading = true
       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}
+          this.detail = {...this.detail, list: res.data}
+        }
+      }).finally(() => this.fraternityLoading = false)
+    },
+    handleFraternityTableClick(args) {
+      const {columnIndex: type, rowIndex} = args
+      if (type > 0) {
+        const current = this.detail.list[rowIndex]
+        console.log(current)
+        this.fraternityExtra = true
+        this.$set(this.detail, 'extraType', type)
+        this.$set(this.detail, 'extra', current[{
+          1: 'parent', 2: 'student'
+        }[type]]?.map(e => [e.name, genderDict[e.gender], e.age]) || [])
+        this.$set(this.detail, 'extraTitle', {
+          1: '家长名单', 2: '学生名单', 3: '活动清单'
+        }[type])
+        if (type == 3) {
+
+        }
+      }
+    },
+    getFraternityTypes(area_code) {
+      area_code = this.transferAreaCode(area_code)
+      return this.instance.get("/hzh/count-fraternity", {params: {area_code}}).then(res => {
+        if (res?.data) {
+          return res.data
         }
       })
-    },
+    }
   },
   created() {
     Vue.use(scrollBoard)
     this.dict.load('appIntegralApplyEventStatus', 'yesOrNo', 'integralSGOStatus')
   },
-  mounted() {
-    this.watchTablePageChange()
-  }
 }
 </script>
 <style scoped lang="scss">
@@ -843,7 +891,7 @@ export default {
     }
   }
 
-  .staPanel {
+  :deep(.staPanel) {
     text-align: center;
     font-size: 15px;
     line-height: 20px;
@@ -908,7 +956,7 @@ export default {
     }
   }
 
-  .title {
+  :deep(.title ) {
     padding-left: 10px;
     line-height: 30px;
     background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
@@ -931,6 +979,18 @@ export default {
   :deep(.dv-scroll-board) {
     height: 200px;
 
+    &.origin {
+      .row-item {
+        border: none;
+        height: unset;
+        line-height: normal;
+      }
+
+      .ceil {
+        padding: 0;
+      }
+    }
+
     .header-item {
       color: #02FEFF;
     }
@@ -960,29 +1020,6 @@ export default {
     }
   }
 
-  .dots {
-    height: 36px;
-    padding-top: 22px;
-    padding-bottom: 8px;
-
-    .dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #679a9a80;
-      margin-right: 8px;
-      flex-shrink: 0;
-
-      &.current {
-        background: #02FEFF;
-      }
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-
   .centerBottom {
     position: absolute;
     bottom: 0;
@@ -1102,5 +1139,27 @@ export default {
     height: 268px;
     flex-shrink: 0;
   }
+
+  :deep(.el-carousel) {
+    .el-carousel__container {
+      height: 372px;
+    }
+
+    .el-carousel__indicators {
+      .el-carousel__indicator {
+        .el-carousel__button {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #679a9a80;
+          flex-shrink: 0;
+        }
+
+        &.is-active > .el-carousel__button {
+          background: #02FEFF;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/project/fengdu/AppBIBoard/components/fdDialog.vue b/project/fengdu/AppBIBoard/components/fdDialog.vue
index ec1782f4..62fb9391 100644
--- a/project/fengdu/AppBIBoard/components/fdDialog.vue
+++ b/project/fengdu/AppBIBoard/components/fdDialog.vue
@@ -7,6 +7,13 @@
         <slot/>
       </div>
     </div>
+    <div class="dialog mar-l16" v-if="$slots.extra&&extraDialog">
+      <div class="header mar-b8" v-text="extraTitle"/>
+      <div class="closeIcon" @click="$emit('update:extraDialog',false)"/>
+      <div class="content">
+        <slot name="extra"/>
+      </div>
+    </div>
   </section>
 </template>
 <script>
@@ -18,10 +25,9 @@ export default {
   },
   props: {
     visible: Boolean,
-    title: {default: "弹窗标题"}
-  },
-  data() {
-    return {}
+    title: {default: "弹窗标题"},
+    extraTitle:{default:"额外内容标题"},
+    extraDialog: Boolean
   },
   methods: {},
 }
@@ -33,6 +39,7 @@ export default {
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 202310231147;
+  display: flex;
 
   .dialog {
     position: relative;