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="志愿者">

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

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},
      ]
    }
  },
  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}]
    }
  },
}
</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%);
    }

    .legend {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>