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

<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>学员变动</span>
      <el-button
        @click="isHistogram = !isHistogram"
        style="float: right; padding: 0px 0"
        type="text"
      >{{isHistogram ? '学员转化漏斗图' : '学员柱状图'}}</el-button>
    </div>
    <statistic :col="5" class="statistic" :cols="0">
      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
        <span>
          {{item.title}}
          <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
            <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
          </el-tooltip>
        </span>
        <span>
          <count-to :endVal="item.percent"/>{{key === 'STUDENT_CONVERSION' ? '%' : ''}}
        </span>
      </statistic-item>
    </statistic>
    <ve-histogram
      style="width: 100%;"
      height="350px"
      :data="chartData"
      :data-empty="dataEmpty"
      :data-zoom="dataZoom"
       v-if="isHistogram"
    ></ve-histogram>
    <ve-funnel v-else style="width: 100%;" height="350px" :data="funnelData" :data-empty="dataEmpty"></ve-funnel>
  </el-card>
</template>
<script>
import countTo from 'vue-count-to'
import veHistogram from 'v-charts/lib/histogram.common'
import veFunnel from 'v-charts/lib/funnel.common'
export default {
  props: ['data'],
  components: {
    've-funnel': veFunnel,
    've-histogram': veHistogram,
    'count-to': countTo
  },
  computed: {
    items() {
      return {
        MUSIC_GROUP_STUDENT: this.data['MUSIC_GROUP_STUDENT'] || {},
        OTHER_STUDENT: this.data['OTHER_STUDENT'] || {},
        NEWLY_STUDENT_NUM: this.data['NEWLY_STUDENT_NUM'] || {},
        QUIT_MUSIC_GROUP_STUDENT_NUM: this.data['QUIT_MUSIC_GROUP_STUDENT_NUM'] || {},
        STUDENT_CONVERSION: this.data['STUDENT_CONVERSION'] || {},
      }
    },
    dataZoom() {
      return [
        {
          type: 'slider',
          start: 60,
          end: 100
        }
      ]
    },
    chartData() {
      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).format('YYYY-MM-DD')
          if (!months[key]) {
            months[key] = {
              '日期': key,
            }
          }
          months[key][item.title] = row.percent
        }
      }
      return {
        columns: ['日期', ...values.map(item => item.title)],
        rows: Object.values(months)
      }
    },
    funnelData() {
      const { indexMonthData = [] } = this.data['STUDENT_CONVERSION'] || {}
      return {
        columns: ['类型', '数值'],
        rows: indexMonthData.map(item => ({
          '类型': item.title,
          '数值': item.percent
        }))
      }
    },
    dataEmpty() {
      return !this.chartData.rows.length
    },
  },
  data () {
    return {
      active: 'NEWLY_STUDENT_NUM',
      isHistogram: true,
    }
  },
}
</script>
<style lang="less" scoped>
  // .statistic{
  //   /deep/ .statistic-content{
  //     cursor: pointer;
  //     &.active > span{
  //       color: #14928a !important;
  //     }
  //   }
  // }
</style>