CampusRank.vue 1.45 KB
<template>
  <div class="Dashboard-DataCard">
    <div class="Dashboard-SearchBar">
      <search-item label="运营商">
        <operator-select
          :accessType="1"
          :value="filters.operateId"
          @input="val => fetchConsumeList({ operateId: val })"
        />
      </search-item>
      <el-radio-group
        class="Dashboard-Radio"
        :value="filters.timeType"
        @input="val => fetchConsumeList({ timeType: val })"
      >
        <el-radio
          class="Dashboard-Radio-item"
          :label="0"
        >本日</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="1"
        >本月</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="2"
        >本年</el-radio>
      </el-radio-group>
    </div>
    <CampusRankChart
      :data="campusRankList"
      :changeCampusHandle="changeCampusHandle"
    />
  </div>
</template>

<script>
import CampusRankChart from './CampusRankChart';
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'CampusRank',
  components: { CampusRankChart },
  computed: {
    ...mapGetters('Dashboard', ['campusRankList', 'filters']),
  },
  methods: {
    ...mapActions('Dashboard', ['fetchConsumeList', 'updateCampusName']),
    changeCampusHandle(data) {
      this.updateCampusName(data.areaName);
      this.fetchConsumeList({
        areaId: data.areaId,
        updatePercentList: true,
      });
    },
  },
};
</script>