添加数据首页载入效果

src/containers/Dashboard/CampusRank/CampusRank.vue

 <template>
-  <div class="Dashboard-DataCard">
+  <div
+    class="Dashboard-DataCard"
+    v-loading="loading.area"
+  >
     <div class="Dashboard-SearchBar">
       <search-item label="运营商">
         <operator-select
@@ -44,7 +47,12 @@ export default {
   name: 'CampusRank',
   components: { CampusRankChart },
   computed: {
-    ...mapGetters('Dashboard', ['campusRankList', 'filters', 'areaName']),
+    ...mapGetters('Dashboard', [
+      'campusRankList',
+      'filters',
+      'areaName',
+      'loading',
+    ]),
   },
   methods: {
     ...mapActions('Dashboard', [

src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue

 <template>
-  <div class="Dashboard-DataCard CustomerConsumption">
+  <div
+    class="Dashboard-DataCard CustomerConsumption"
+    v-loading="loading"
+  >
     <div class="Dashboard-SearchBar">
       <search-item label="运营商">
         <operator-select
@@ -70,6 +73,7 @@ export default {
       'consumeList',
       'consumeCount',
       'filters',
+      'loading',
     ]),
   },
   created() {

src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js

@@ -2,6 +2,7 @@ import { getConsumeOrderList } from '@/api/dashboard/dashboard';
 import initFiltersStore from '@/store/modules/filters';
 import { getFilters, formatDate } from '@/utils/index';
 const FETCH_CONSUME_LIST = 'FETCH_CONSUME_LIST';
+const FETCH_DATA = 'FETCH_DATA';
 
 const initFilters = () => ({
   operateId: undefined,
@@ -12,6 +13,7 @@ const filtersStore = initFiltersStore(initFilters);
 const nowTime = new Date();
 
 const state = () => ({
+  loading: false,
   list: [],
   consumeCountVo: {
     payMen: 0,
@@ -22,10 +24,12 @@ const state = () => ({
 const getters = {
   consumeList: state => state.list,
   consumeCount: state => state.consumeCountVo,
+  loading: state => state.loading,
 };
 
 const actions = {
   getConsumeOrderList({ commit, getters, dispatch }, data) {
+    commit(FETCH_DATA, true);
     if (data) {
       dispatch('updateFilters', data);
     }
@@ -48,6 +52,7 @@ const actions = {
       .then(res => {
         const { data, consumeCountVo } = res;
         commit(FETCH_CONSUME_LIST, { list: data, consumeCountVo });
+        commit(FETCH_DATA, false);
       })
       .catch(err => {
         console.error(err);
@@ -60,6 +65,9 @@ const mutations = {
     state.list = data.list;
     state.consumeCountVo = data.consumeCountVo;
   },
+  [FETCH_DATA](state, fetching) {
+    state.loading = fetching;
+  },
 };
 
 export default {

src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue

 <template>
-  <div class="Dashboard-DataCard CustomerRecharge">
+  <div
+    class="Dashboard-DataCard CustomerRecharge"
+    v-loading="loading"
+  >
     <div class="Dashboard-SearchBar">
       <search-item label="运营商">
         <operator-select
@@ -59,6 +62,7 @@ export default {
       'rechargeList',
       'rechargeCount',
       'filters',
+      'loading',
     ]),
   },
   created() {

src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js

@@ -2,6 +2,7 @@ import { getRechargeOrderList } from '@/api/dashboard/dashboard';
 import initFiltersStore from '@/store/modules/filters';
 import { getFilters, formatDate } from '@/utils';
 const FETCH_RECHARGE_LIST = 'FETCH_RECHARGE_LIST';
+const FETCH_DATA = 'FETCH_DATA';
 
 const initFilters = () => ({
   operateId: undefined,
@@ -11,6 +12,7 @@ const filtersStore = initFiltersStore(initFilters);
 const nowTime = new Date();
 
 const state = () => ({
+  loading: false,
   list: [],
   rechargeOrderCountVo: {
     rechargeMen: 0,
@@ -21,10 +23,12 @@ const state = () => ({
 const getters = {
   rechargeList: state => state.list,
   rechargeCount: state => state.rechargeOrderCountVo,
+  loading: state => state.loading,
 };
 
 const actions = {
   getRechargeOrderList({ commit, getters, dispatch }, data) {
+    commit(FETCH_DATA, true);
     if (data) {
       dispatch('updateFilters', data);
     }
@@ -46,6 +50,7 @@ const actions = {
     })
       .then(res => {
         const { data, rechargeOrderCountVo } = res;
+        commit(FETCH_DATA, false);
         commit(FETCH_RECHARGE_LIST, { list: data, rechargeOrderCountVo });
       })
       .catch(err => {
@@ -59,6 +64,9 @@ const mutations = {
     state.list = data.list;
     state.rechargeOrderCountVo = data.rechargeOrderCountVo;
   },
+  [FETCH_DATA](state, fetching) {
+    state.loading = fetching;
+  },
 };
 
 export default {

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

 <template>
-  <div class="Dashboard-Row Dashboard-DataCard">
+  <div
+    class="Dashboard-Row Dashboard-DataCard"
+    v-loading="loading.regist"
+  >
     <div class="Dashboard-SearchBar">
       <search-item label="年份">
         <el-date-picker
@@ -69,6 +72,7 @@ export default {
       'registePerDay',
       'registePerMonth',
       'activeUser',
+      'loading',
     ]),
   },
   methods: {

src/containers/Dashboard/CustomerRegister/components/ActiveUserByMonth.vue

@@ -35,6 +35,7 @@ export default {
             tickCount: 12,
           },
           mark: {
+            type: 'cat',
             formatter: value => {
               let service = this.serviceList.find(item => item.value === value);
               return service ? service.name : '';

src/containers/Dashboard/Dashboard.js

@@ -15,6 +15,10 @@ const GET_TITLE_DATA = 'GET_TITLE_DATA';
 const GET_PERCENT_DATA = 'GET_PERCENT_DATA';
 const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
 const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA';
+const LOADING_AREA = 'LOADING_AREA';
+const LOADING_SERVICE = 'LOADING_SERVICE';
+const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT';
+const LOADING_REGIST = 'LOADING_REGIST';
 
 const initFilters = () => ({
   operateId: undefined,
@@ -24,6 +28,12 @@ const filtersStore = initFiltersStore(initFilters);
 const nowTime = new Date();
 
 const state = () => ({
+  loading: {
+    area: false,
+    service: false,
+    equipment: false,
+    regist: false,
+  },
   consume: {
     areaName: '',
     consumeAfterVos: [],
@@ -57,6 +67,7 @@ const getters = {
   consumeHardVos: state => state.consume.consumeHardVos,
   campusRankList: state => state.consume.list,
   seviceRatioList: state => state.consume.percentList,
+  loading: state => state.loading,
 };
 
 const actions = {
@@ -76,10 +87,14 @@ const actions = {
     }
     if (data && data.updatePercentList) {
       entity.areaId = data.areaId;
-    }
-    if (data && data.updateEuipmentList) {
+      commit(LOADING_SERVICE, true);
+    } else if (data && data.updateEuipmentList) {
       entity.serviceId = data.serviceId;
+      commit(LOADING_EQUIPMENT, true);
+    } else {
+      commit(LOADING_AREA, true);
     }
+
     return fetchConsumeList({
       data: {
         ...entity,
@@ -89,24 +104,32 @@ const actions = {
       if (data && data.updatePercentList) {
         commit(GET_PERCENT_DATA, list);
         commit(GET_EUIPMENT_DATA, list);
-        return;
-      }
-      if (data && data.updateEuipmentList) {
+        commit(LOADING_SERVICE, false);
+      } else if (data && data.updateEuipmentList) {
         commit(GET_EUIPMENT_DATA, list);
-        return;
+        commit(LOADING_EQUIPMENT, false);
+      } else {
+        commit(GET_CONSUME_DATA, list);
+        commit(LOADING_AREA, false);
       }
-      commit(GET_CONSUME_DATA, list);
     });
   },
   fetchReportList({ commit }, entity) {
+    commit(LOADING_REGIST, true);
     return fetchReportList({
       params: {
         ...entity,
       },
-    }).then(res => {
-      let list = res.data;
-      commit(GET_REPORT_DATA, list);
-    });
+    })
+      .then(res => {
+        let list = res.data;
+        commit(GET_REPORT_DATA, list);
+        commit(LOADING_REGIST, false);
+      })
+      .catch(err => {
+        console.error(err);
+        commit(LOADING_REGIST, false);
+      });
   },
   fetchTitleList({ commit }) {
     return fetchTitleList().then(res => {
@@ -175,6 +198,21 @@ const mutations = {
   [GET_CAMPUS_DATA](state, name) {
     state.consume.areaName = name;
   },
+  [LOADING_AREA](state, fetching) {
+    state.loading.area = fetching;
+    state.loading.service = fetching;
+    state.loading.equipment = fetching;
+  },
+  [LOADING_SERVICE](state, fetching) {
+    state.loading.service = fetching;
+    state.loading.equipment = fetching;
+  },
+  [LOADING_EQUIPMENT](state, fetching) {
+    state.loading.equipment = fetching;
+  },
+  [LOADING_REGIST](state, fetching) {
+    state.loading.regist = fetching;
+  },
 };
 
 export default {

src/containers/Dashboard/EquipmentList/EquipmentList.vue

 <template>
-  <div class="Dashboard-DataCard EquipmentList">
+  <div
+    class="Dashboard-DataCard EquipmentList"
+    v-loading="loading.equipment"
+  >
     <div class="Dashboard-title">
       <div class="Dashboard-title-icon equipment">
         <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
@@ -29,7 +32,11 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('Dashboard', ['consumeHardVos', 'consumeAfterVos']),
+    ...mapGetters('Dashboard', [
+      'consumeHardVos',
+      'consumeAfterVos',
+      'loading',
+    ]),
   },
   methods: {
     ...mapActions('Dashboard', ['fetchConsumeList']),

src/containers/Dashboard/SeviceRatio/SeviceRatio.vue

 <template>
-  <div class="Dashboard-DataCard">
+  <div
+    class="Dashboard-DataCard"
+    v-loading="loading.service"
+  >
     <div class="Dashboard-title">
       <div class="Dashboard-title-icon service">
         <img src="@/assets/images/dashboard/icon_zhanbi@2x.png" />
@@ -22,7 +25,7 @@ export default {
   name: 'SeviceRatio',
   components: { SeviceRatioChart },
   computed: {
-    ...mapGetters('Dashboard', ['seviceRatioList', 'areaName']),
+    ...mapGetters('Dashboard', ['seviceRatioList', 'areaName', 'loading']),
   },
   methods: {
     ...mapActions('Dashboard', ['fetchConsumeList']),