dvcp_v2_webapp/project/fengdu/AppBIBoard/AppBIBoard.vue

<template>
  <section class="AppBIBoard" :class="{fullscreen}">
    <ai-fit-view>
      <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="chartData"/>
              </div>
              <div class="chart">
                <div class="title">人员活跃（7日）</div>
                <ai-echart :ops="chart" :data="chartData"/>
              </div>
            </div>
          </fd-card>
          <fd-card class="mar-t14" label="志愿者">

          </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";

export default {
  name: "AppBIBoard",
  label: "丰都指挥舱",
  components: {AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      fullscreen: false,
      sta: {
        群总数: 5118,
        群主人数: 956,
        '活跃群成员(30天)': '214,098',
        '群消息(30天)': '1,214,098',
      },
      chart: {
        series: {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          center: ['50%', 74],
          radius: 50,
          progress: {
            overlap: false,
            roundCap: true,
            clip: false,
          },
          splitLine: false,
          axisTick: false,
          axisLine: {
            lineStyle: {width: 6}
          }
        }
      },
      chartData: []
    }
  },
  methods: {
    handleFullScreen() {
      this.fullscreen = this.$refs.fddv.handleFullScreen()
    },
    handleSetting(v) {
      this.$refs.fddv.dialog = v
    }
  },
}
</script>
<style scoped lang="scss">
.AppBIBoard {
  color: #CDDBEA;
  font-size: 14px;

  &.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;


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

  .chart {
    height: 200px;

    .title {
      padding-left: 10px;
      line-height: 30px;
      background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
    }
  }
}
</style>