dvcp_v2_webapp/project/fengdu/AppBIBoard/AppBIBoard.vue

<template>
  <section class="AppBIBoard" :class="{fullscreen}">
    <ai-fit-view @scale="v=>scale=v">
      <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
        <template v-slot:head="head">
          <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
        </template>
        <div class="left">
          <fd-card label="社群动态概况">
            <div class="grid c-2 pad-t14 pad-b20">
              <div class="staPanel" v-for="(v,k) in sta" :key="k">
                <div v-text="k"/>
                <b v-text="v"/>
              </div>
              <div class="chart">
                <div class="title">群活跃率（7日）</div>
                <ai-echart :ops="chart" :data="calcProgress()">
                  <div class="legend">
                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
                  </div>
                </ai-echart>
              </div>
              <div class="chart">
                <div class="title">人员活跃（7日）</div>
                <ai-echart :ops="chart" :data="calcProgress()">
                  <div class="legend">
                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
                  </div>
                </ai-echart>
              </div>
            </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">
          <fd-card label="实时动态">

          </fd-card>
        </div>
        <div class="right">
          <fd-card label="功德银行">

          </fd-card>
          <fd-card label="门户应用统计">

          </fd-card>
        </div>
      </ai-dv-wrapper>
    </ai-fit-view>
  </section>
</template>
<script>
import AiFitView from "dui/packages/layout/AiFitView.vue";
import FengduHead from "./components/fengduHead.vue";
import FdCard from "./components/fdCard.vue";
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",
  label: "丰都指挥舱",
  components: {AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      scale: 1,
      fullscreen: false,
      sta: {
        群总数: 5118,
        群主人数: 956,
        '活跃群成员(30天)': '214,098',
        '群消息(30天)': '1,214,098',
      },
      chart: {
        legend: {show: false},
        series: {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          center: ['50%', 74],
          radius: 50,
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {offset: 0, color: '#139AFF'},
                  {offset: 1, color: '#0ED5A6'},
                ]
              }
            },
          },
          pointer: {show: false},
          splitLine: {show: false},
          axisTick: {show: false},
          axisLabel: {show: false},
          axisLine: {
            lineStyle: {width: 6, color: [[1, 'rgba(102, 121, 138, 0.4)']]},
          },
          detail: {
            valueAnimation: true,
            offsetCenter: [0, 0],
            fontSize: 24,
            formatter: '{value}%',
            color: "#02FEFF",
            fontFamily: "DINAlternate-Bold",
            width: 50,
            lineHeight: 50,
            padding: 12,
            borderWidth: 1,
            borderColor: 'rgba(102, 121, 138, 0.4)',
            borderRadius: 50
          },
        },
      },
      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()
    },
    handleSetting(v) {
      this.$refs.fddv.dialog = v
    },
    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">
.AppBIBoard {
  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;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  :deep(.viewPanel) {
    background-image: url("./assets/img_bg.png");

    & > .fill {
      display: flex;
      gap: 20px;
      padding: 12px 24px 0;
    }
  }

  .left, .right {
    width: 480px;
    flex-shrink: 0;
  }

  .grid {
    display: grid;
    gap: 14px;

    &.c-2 {
      grid-template-columns:1fr 1fr
    }
  }

  .staPanel {
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    background-size: 100% 100%;
    background: url("./assets/staPanel-bg.png") no-repeat;
    height: 80px;
    padding-top: 14px;

    &.simple {
      background: #ffffff0a;
      padding-top: 0;
    }


    b {
      font-family: DINAlternate-Bold;
      font-size: 22px;
      color: #02FEFF;
      letter-spacing: 0;
      line-height: 36px;
    }
  }

  .chart {
    height: 200px;

    .legend {
      position: absolute;
      left: 0;
      right: 0;
      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>