dy-admin-manager/src/views/main/baseinfo/curriculum.vue

<template>
  <el-card header="课程数据">
    <statistic class="statistic" :cols="0">
      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
        <span>{{item.title}}</span>
        <span>
          <count-to :endVal="item.percent"/>
        </span>
      </statistic-item>
    </statistic>
    <ve-line :data="chartData"/>
  </el-card>
</template>
<script>
import countTo from 'vue-count-to'
import veLine from 'v-charts/lib/line.common'
export default {
  props: ['data'],
  components: {
    've-line': veLine,
    'count-to': countTo
  },
  computed: {
    items() {
      return {
        MUSIC_GROUP_COURSE: this.data['MUSIC_GROUP_COURSE'] || {},
        VIP_GROUP_COURSE: this.data['VIP_GROUP_COURSE'] || {},
        PRACTICE_GROUP_COURSE: this.data['PRACTICE_GROUP_COURSE'] || {},
      }
    },
    chartData() {
      const data = this.data[this.active] || {}
      const values = Object.values(this.items)
      const months = {}
      for (const item of values) {
        for (const row of (item.indexMonthData || [])) {
          const key = this.$helpers.dayjs(row.month).month() + 1 + '月'
          if (!months[key]) {
            months[key] = {
              '月份': key,
            }
          }
          months[key][item.title] = row.percent
        }
      }
      return {
        columns: ['月份', ...values.map(item => item.title)],
        rows: Object.values(months)
      }
    }
  },
  data () {
    return {
      active: 'MUSIC_GROUP_COURSE',
    }
  },
}
</script>
<style lang="less" scoped>
  .statistic{
    /deep/ .statistic-content{
      cursor: pointer;
      &.active > span{
        color: #14928a !important;
      }
    }
  }
</style>