丰都先提交一下

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -33,7 +33,23 @@
             </div>
           </fd-card>
           <fd-card class="mar-t14" label="志愿者">
-
+            <div class="jumpBtn" slot="right">前往志愿者平台
+              <div class="el-icon-position"/>
+            </div>
+            <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 class="areaPicker" placeholder="团队选择"/>
+            </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>
           </fd-card>
         </div>
         <div class="center fill">
@@ -61,6 +77,8 @@ import AiEchart from "dui/packages/tools/AiEchart.vue";
 import AiHighlight from "dui/packages/layout/AiHighlight.vue";
 import AiInfoItem from "dui/packages/basic/AiInfoItem.vue";
 import AiWrapper from "dui/packages/basic/AiWrapper.vue";
+import Vue from "vue";
+import {scrollBoard} from "@jiaminghi/data-view"
 
 export default {
   name: "AppBIBoard",
@@ -133,9 +151,43 @@ export default {
       chartData: [
         {name: "活跃居民群", value: 3502},
         {name: "全部居民群", value: 5118},
-      ]
+      ],
+      volunteers: {
+        团队数量: 125,
+        志愿者数量: 13,
+        服务学员数量: 5
+      },
+      volunteerConfig: {
+        header: ['所属团队', '姓名', '性别', '年龄'],
+        headerBGC: 'rgba(33, 180, 253, 0.1)',
+        oddRowBGC: 'rgba(112, 112, 112, 0)',
+        evenRowBGC: 'rgba(112, 112, 112, 0)',
+        rowNum: 4,
+        headerHeight: 38,
+        columnWidth: [250],
+        align: ['left', 'left', 'left', 'center'],
+        carousel: 'page',
+        data: [
+          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          ['三合街道丁庄社区互助会', '王富贵', '女', 32],
+          ['三合街道丁庄社区互助会', '阿萨德', '男', 23],
+          ['三合街道丁庄社区互助会', '阿连德', '男', 54],
+          ['三合街道丁庄社区互助会', '王柏柏', '女', 66],
+          ['三合街道丁庄社区互助会', '赵二狗', '男', 41],
+          ['三合街道丁庄社区互助会', '唯一键', '女', 13],
+          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+        ]
+      },
+      current: 1
     }
   },
+  computed: {
+    tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0
+  },
   methods: {
     handleFullScreen() {
       this.fullscreen = this.$refs.fddv.handleFullScreen()
@@ -146,8 +198,23 @@ export default {
     calcProgress() {
       const value = (this.chartData[0].value / this.chartData.at(-1).value * 100).toFixed(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)
+      }
     }
   },
+  created() {
+    Vue.use(scrollBoard)
+  },
+  mounted() {
+    this.watchTablePageChange()
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -155,6 +222,22 @@ export default {
   color: #CDDBEA;
   font-size: 14px;
 
+  :deep(.areaPicker) {
+    max-width: 300px;
+
+    input {
+      background: rgba(0, 54, 82, 0.9);
+      border: 1px solid rgba(42, 122, 146, 0.7);
+      border-radius: 2.2px;
+      color: #B3DDE5;
+      cursor: pointer;
+    }
+
+    .el-input__suffix {
+      color: #B3DDE5;
+    }
+  }
+
   &.fullscreen {
     position: fixed;
     z-index: 202310111819;
@@ -197,8 +280,13 @@ export default {
     height: 80px;
     padding-top: 14px;
 
+    &.simple {
+      background: #ffffff0a;
+      padding-top: 0;
+    }
 
-    & > b {
+
+    b {
       font-family: DINAlternate-Bold;
       font-size: 22px;
       color: #02FEFF;
@@ -210,12 +298,6 @@ export default {
   .chart {
     height: 200px;
 
-    .title {
-      padding-left: 10px;
-      line-height: 30px;
-      background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
-    }
-
     .legend {
       position: absolute;
       left: 0;
@@ -223,5 +305,59 @@ export default {
       bottom: 0;
     }
   }
+
+  .title {
+    padding-left: 10px;
+    line-height: 30px;
+    background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
+  }
+
+  .jumpBtn {
+    background-image: linear-gradient(180deg, rgba(90, 200, 246, 0.4) 0%, rgba(1, 51, 101, 0.4) 84%);
+    box-shadow: inset 0 2px 8px 0 rgba(51, 187, 255, 0.5);
+    border-radius: 15px;
+    font-weight: 500;
+    font-size: 12px;
+    color: #02FEFF;
+    padding: 8px 16px;
+    height: 30px;
+    user-select: none;
+    cursor: pointer;
+    margin-top: -7px;
+  }
+
+  :deep(.dv-scroll-board) {
+    height: 200px;
+
+    .header-item {
+      color: #02FEFF;
+    }
+
+    .row-item {
+      line-height: 38px;
+    }
+  }
+
+  .dots {
+    height: 36px;
+    padding-top: 22px;
+    padding-bottom: 8px;
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #679a9a80;
+      margin-right: 8px;
+
+      &.current {
+        background: #02FEFF;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>

project/fengdu/AppBIBoard/components/fdCard.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="fdCard">
-    <div class="label flex">
+    <div class="label">
       <label class="fill" v-text="label"/>
       <slot v-if="$slots.right" name="right"/>
     </div>
@@ -20,9 +20,10 @@ export default {
 <style scoped lang="scss">
 .fdCard {
   backdrop-filter: blur(8px);
+  background: #7583900f;
 
   .label {
-    display: block;
+    display: flex;
     color: white;
     background-image: url("../assets/card-label-icon.png"), url("../assets/card-bottom.png");
     background-repeat: no-repeat;

project/fengdu/AppBIBoard/components/fengduHead.vue

@@ -99,22 +99,6 @@ export default {
       background-clip: text;
       color: transparent;
     }
-
-    :deep(.areaPicker) {
-      max-width: 300px;
-
-      input {
-        background: rgba(0, 54, 82, 0.9);
-        border: 1px solid rgba(42, 122, 146, 0.7);
-        border-radius: 2.2px;
-        color: #B3DDE5;
-        cursor: pointer;
-      }
-
-      .el-input__suffix {
-        color: #B3DDE5;
-      }
-    }
   }
 
   .rightPane {