dvcp_v2_webapp/project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue

<template>
  <ai-list class="AppLearningStatistics">
    <template slot="title">
      <ai-title title="学习统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="关键数据">
        <template #right>
          <el-radio-group v-model="search1.dateRange" size="small" @change="search1.date = [], getStatisticsKeyData()">
            <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="search1.date"
            value-format="yyyy-MM-dd"
            @change="search1.dateRange = '', getStatisticsKeyData()"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small">
          </el-date-picker>
        </template>
        <template #content>
          <div class="statistic ">
            <div class="statistic-item">
              <h2>课程数量</h2>
              <div class="bottom">
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['视频课程'] }}</h3>
                  <p>视频课程</p>
                </div>
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['图文课程'] }}</h3>
                  <p>图文课程</p>
                </div>
              </div>
            </div>
            <div class="statistic-item">
              <h2>课程学习人数</h2>
              <div class="bottom">
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['课程学习人数'] }}</h3>
                </div>
              </div>
            </div>
            <div class="statistic-item">
              <h2>课程累积学习时长</h2>
              <div class="bottom">
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['课程累积学习时长'] || 0 }}</h3>
                </div>
              </div>
            </div>
            <div class="statistic-item">
              <h2>考试人次</h2>
              <div class="bottom">
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['学富五车'] }}</h3>
                  <p>学富五车</p>
                </div>
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['才高八斗'] }}</h3>
                  <p>才高八斗</p>
                </div>
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['合格'] }}</h3>
                  <p>合格</p>
                </div>
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['不合格'] }}</h3>
                  <p>不合格</p>
                </div>
              </div>
            </div>
            <div class="statistic-item">
              <h2>获得证书人数</h2>
              <div class="bottom">
                <div class="bottom-item">
                  <h3>{{ statisticsKeyData['获得证书人数'] }}</h3>
                  <ai-download
                    :instance="instance"
                    url="/app/appcertificateinfo/exportUserInfo"
                    :params="{
                      ...search1,
                      areaId
                    }"
                    fileName="证书统计">
                    <el-button icon="iconfont iconExported">导出</el-button>
                  </ai-download>
                </div>
              </div>
            </div>
          </div>
        </template>
      </ai-card>
      <div class="middle">
        <ai-card class="rank-card" title="热度榜单">
          <template #title>
            <div class="rank-title">
              <h2>热度榜单</h2>
              <el-radio-group v-model="type" size="small" @change="search2.date = [], getStatisticsHot()">
                <el-radio-button :label="0">课程</el-radio-button>
                <el-radio-button :label="1">考试</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <template #right>
            <el-radio-group v-model="search2.dateRange" size="small" @change="search2.date = [], getStatisticsHot()">
              <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="search2.date"
              value-format="yyyy-MM-dd"
              @change="search2.dateRange = '', getStatisticsHot()"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small">
            </el-date-picker>
          </template>
          <template #content>
            <ai-table
              v-if="type === 0"
              :tableData="tableData1"
              :col-configs="colConfigs1"
              :isShowPagination="false"
              style="margin-top: 6px;"
              @getList="getStatisticsHot">
            </ai-table>
            <ai-table
              v-else
              :tableData="tableData2"
              :isShowPagination="false"
              :col-configs="colConfigs2"
              style="margin-top: 6px;"
              @getList="getStatisticsHot">
            </ai-table>
          </template>
        </ai-card>
        <ai-card class="resident" title="居民统计">
          <template #right>
            <el-radio-group v-model="search4.dateRange" size="small" @change="search4.date = [], getStatisticsUse()">
              <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="search4.date"
              value-format="yyyy-MM-dd"
              @change="search4.dateRange = '', getStatisticsUse()"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small">
            </el-date-picker>
          </template>
          <template #content>
            <div class="chart" style="width: 100%; height: 340px"></div>
          </template>
        </ai-card>
      </div>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'AppLearningStatistics',
    label: '学习统计',

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

    data () {
      return {
        date: '',
        today: '',
        search1: {
          title: '',
          areaId: '',
          dateRange: '1',
          date: []
        },
        search2: {
          areaId: '',
          dateRange: '1',
          date: []
        },
        search3: {
          areaId: '',
          dateRange: '1',
          date: []
        },
        search4: {
          areaId: '',
          dateRange: '1',
          date: []
        },
        type: 0,
        colConfigs1: [
          { type: 'index',  label: '排名', align: 'left' },
          { prop: 'name',  label: '课程名称', align: 'center' },
          { prop: 'number',  label: '学习人数', align: 'center' }
        ],
        colConfigs2: [
          { type: 'index',  label: '排名', align: 'left' },
          { prop: 'name',  label: '考试名称', align: 'center' },
          { prop: 'number',  label: '考试人次', align: 'center' }
        ],
        tableData1: [],
        tableData2: [],
        statisticsKeyData: {},
        statisticsUse: {},
        areaId: ''
      }
    },

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

    created () {
      this.areaId = this.user.info.areaId
      this.getStatisticsKeyData()
      this.getStatisticsHot()
      this.getStatisticsUse()
    },

    methods: {
      onChange () {
        this.getStatisticsKeyData()
        this.getStatisticsHot()
        this.getStatisticsUse()
      },

      getStatisticsKeyData () {
        this.instance.post(`/app/appexaminationinfo/statisticsKeyData`, null, {
          params: {
            ...this.search1,
            beginDate: this.search1.date ? this.search1.date[0] : '',
            endDate: this.search1.date ? this.search1.date[1] : '',
            areaId: this.areaId
          }
        }).then(res => {
          if (res.code == 0) {
            this.statisticsKeyData = res.data
          }
        })
      },

      getStatisticsUse () {
        this.instance.post(`/app/appwechatuserqujing/statisticsUse`, null, {
          params: {
            ...this.search4,
            beginDate: this.search4.date ? this.search4.date[0] : '',
            endDate: this.search4.date ? this.search4.date[1] : '',
            areaId: this.areaId
          }
        }).then(res => {
          if (res.code == 0) {
            res.data.length && this.initPieChart(res.data[0])
          }
        })
      },

      getStatisticsHot () {
        this.instance.post(`/app/appexaminationinfo/statisticsHot`, null, {
          params: {
            ...this.search2,
            size: 20,
            areaId: this.areaId,
            type: this.type,
            beginDate: this.search2.date ? this.search2.date[0] : '',
            endDate: this.search2.date ? this.search2.date[1] : '',
          }
        }).then(res => {
          if (res.code == 0) {
            if (this.type === 0) {
              this.tableData1 = res.data
            } else {
              this.tableData2 = res.data
            }
          }
        })
      },

      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>
  .AppLearningStatistics {
    .right-search {
      display: flex;
      align-items: center;

      div {
        display: flex;
        align-items: center;
      }

      span {
        margin-right: 10px;
        font-size: 14px;
        color: #686868;
      }

      div:first-child {
        margin-right: 20px;
      }
    }

    .middle {
      display: flex;

      .rank-card {
        flex: 1;
      }

      .resident {
        width: 660px;
        margin-left: 20px;
      }
    }

    .rank-title {
      display: flex;
      align-items: center;

      h2 {
        margin-right: 32px;
        color: #222;
        font-size: 16px;
        font-weight: 700;
      }
    }

    :deep(.ai-list__content--right .ai-list__content--right-wrapper ) {
      padding: 0!important;
      background: transparent!important;
      border-radius: 0!important;
      box-shadow: none!important;
    }

    .statistic {
      display: flex;
      justify-content: space-between;

      .statistic-item {
        text-align: center;
        line-height: 1;

        h2 {
          color: #333;
          font-weight: 600;
          font-size: 16px;
        }

        h3 {
          font-size: 22px;
          color: #FFA322;
        }

        p {
          margin-top: 10px;
          word-break: keep-all;
          color: #777;
          font-size: 14px;
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 30px 0 10px;

          .bottom-item {
            flex: 1;
            margin-right: 30px;

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

    :deep( .ai-list__content--right ){
      flex: 1;
      min-width: 0;
      margin-left: 1px;
      box-shadow: none;

      .ai-list__content--right-wrapper {
        width: 100%;
      }
    }
  }
</style>