dvcp_v2_webapp/project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue

<template>
  <ai-list class="AppNewsStatistics">
    <template slot="title">
      <ai-title title="新闻统计" isShowBottomBorder @change="onChange()">
        <template #rightBtn>
          <div class="flex" flex>
            <AiAreaGet :valueLevel="3" style="width: 250px" clearable always-show :instance="instance" v-model="search.areaId"></AiAreaGet>
            <el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []">
              <el-radio-button label="0">今天</el-radio-button>
              <el-radio-button label="1">本周</el-radio-button>
              <el-radio-button label="2">本月</el-radio-button>
            </el-radio-group>
            <el-date-picker
              style="width: 240px"
              v-model="search.date"
              value-format="yyyy-MM-dd"
              @change="search.dateRange = ''"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small">
            </el-date-picker>
          </div>
        </template>
      </ai-title>
    </template>
    <template slot="content">
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>发布文章总数</span>
          <h2 style="color: #2266FF;">{{ info.total }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>浏览量总数</span>
          <h2 style="color: #22AA99;">{{ info.today }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>平均浏览量</span>
          <h2 style="color: #F8B425">{{ info.unReport }}</h2>
        </div>
      </div>
      <div class="bottom">
        <ai-card title="文章浏览排行">

        </ai-card>
        <ai-card title="地区浏览排行">

        </ai-card>
      </div>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  import * as echarts from 'echarts'
  export default {
    name: 'AppNewsStatistics',
    label: '新闻统计',

    props: {
      instance: Function,
      dict: Object
    },

    data () {
      return {
        date: '',
        today: '',
        search: {
          title: '',
          areaId: '',
          dateRange: '1',
          date: []
        },
        info: {}
      }
    },

    computed: {
      ...mapState(['user'])
    },

    created () {
      // this.areaId = this.user.info.areaId
    },

    methods: {
      onChange () {
      },

      initPieChart (data) {
        let chart = echarts.init(document.querySelector('.chart'))
        const option = {
          tooltip: {},
          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
          legend: {
            show: true
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: Object.keys(data).map(v => {
                return {
                  value: data[v],
                  name: v
                }
              }),
              label : {
                normal : {
                formatter: '{b}：{c}',
                textStyle : {
                  fontWeight : 'normal',
                    fontSize : 15
                  }
                }
              }
            }
          ]
        }

        chart.setOption(option)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppNewsStatistics {

    .bottom {
      display: flex;
      align-items: center;

      & > .ai-card {
        flex: 1;

        &:last-child {
          margin-left: 20px;
        }
      }
    }

    :deep( .ai-list__content ){
      padding: 0!important;

      .ai-list__content--right-wrapper {
        background: transparent!important;
        box-shadow: none!important;
        margin: 0!important;
        padding: 12px 16px 12px!important;
      }
    }

    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }

    .content {
      padding: 16px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
    }
  }
</style>