Skip to content

D
dcxy-manage-shell
Commit c47641bb by 姜雷
Options

添加数据首页载入效果

parent bb7aff70
Showing with 105 additions and 20 deletions
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']),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment