SeviceRatio.vue

<template>
  <div class="Dashboard-DataCard">
    <div class="Dashboard-title">
      <div class="Dashboard-title-icon service">
        <img src="@/assets/images/dashboard/icon_zhanbi@2x.png" />
      </div>
      <div class="Dashboard-title-text">各服务消费占比</div>
      <div class="Dashboard-title-top">TOP1</div>
    </div>
    <SeviceRatioChart
      :data="seviceRatioList"
      :changeServiceHandle="changeServiceHandle"
    />
    <div class="SeviceRatio-title">{{areaName}}</div>
  </div>
</template>

<script>
import SeviceRatioChart from './SeviceRatioChart';
import { mapActions, mapGetters } from 'vuex';
export default {
  name: 'SeviceRatio',
  components: { SeviceRatioChart },
  computed: {
    ...mapGetters('Dashboard', ['seviceRatioList', 'areaName']),
  },
  methods: {
    ...mapActions('Dashboard', ['fetchConsumeList']),
    changeServiceHandle(data) {
      this.fetchConsumeList({
        serviceId: data.serviceId,
        updateEuipmentList: true,
      });
    },
  },
};
</script>

<style lang="scss">
.SeviceRatio-title {
  font-size: 16px;
  text-align: center;
  padding-bottom: 12px;
}
</style>