左下角交互调整

2023-10-31 16:09:11 +08:00
parent ff9491490c
commit b64f63ef9b
2 changed files with 146 additions and 80 deletions
--- 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>
--- 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;