修改首页活跃展示

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

 <template>
-  <div
-    class="Dashboard-Row Dashboard-DataCard Dashboard-Register"
-    v-loading="loading.regist"
-  >
+  <div class="Dashboard-Row Dashboard-DataCard Dashboard-Register">
     <div class="Dashboard-SearchBar">
       <search-item label="年份">
         <el-date-picker
@@ -23,20 +20,29 @@
       </search-item>
       <search-item label="">
         <el-button
+          :loading="loading.regist"
           @click="searchList"
           type="primary"
         >搜索</el-button>
       </search-item>
     </div>
     <div class="Dashboard-CampusData">
-      <div class="Dashboard-CampusItem">
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist"
+      >
         <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
         <RegisterByMonth
           :data="registePerMonth"
           :changeReportMonthHandle="changeReportMonthHandle"
         />
       </div>
-      <div class="Dashboard-CampusItem">
+    </div>
+    <div class="Dashboard-CampusData">
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist || loading.registByDay"
+      >
         <div class="Dashboard-title">
           {{ reportYear }}年{{ reportMonth }}月注册数据
         </div>
@@ -44,12 +50,13 @@
       </div>
     </div>
     <div class="Dashboard-CampusData">
-      <div class="Dashboard-CampusItem">
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist"
+      >
         <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
         <ActiveUserByMonth :data="activeUser" />
       </div>
-      <div class="Dashboard-CampusItem">
-      </div>
     </div>
   </div>
 </template>
@@ -122,20 +129,15 @@ export default {
     },
     changeReportMonthHandle(month) {
       console.log(month);
-      let filters = getFilters(this.filters);
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: filters.reportYear ? filters.reportYear : null,
-        areaId: filters.reportAreaId ? filters.reportAreaId : null,
         month: month,
+        updateRegisteByDay: true,
       });
     },
     searchList() {
-      let filters = getFilters(this.filters);
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: filters.reportYear ? filters.reportYear : null,
-        areaId: filters.reportAreaId ? filters.reportAreaId : null,
       });
     },
   },

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

@@ -39,7 +39,7 @@ export default {
         })
         .line()
         .position('days*count');
-      this.chart.area().position('days*count');
+      this.chart.line().position('days*count');
       this.chart.render();
     },
   },

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

@@ -44,7 +44,11 @@ export default {
         })
         .interval()
         .position('month*count')
-        .color('#4e82fb');
+        .color('#4e82fb')
+        .label('count', {
+          // position: 'middle',
+          offset: 10,
+        });
       this.chart.render();
       this.chart.on('plotclick', this.clickHandle);
     },

src/containers/Dashboard/Dashboard.js

@@ -21,12 +21,13 @@ const LOADING_AREA = 'LOADING_AREA';
 const LOADING_SERVICE = 'LOADING_SERVICE';
 const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT';
 const LOADING_REGIST = 'LOADING_REGIST';
+const LOADING_REGIST_BY_DAY = 'LOADING_REGIST_BY_DAY';
 
 const initFilters = () => ({
   operateId: undefined,
   choiceareaIds: [],
   timeType: 0, // 0 本日，1 本月， 2 本年
-  reportYear: '',
+  reportYear: new Date().getFullYear().toString(),
   reportAreaId: undefined,
 });
 const filtersStore = initFiltersStore(initFilters);
@@ -38,6 +39,7 @@ const state = () => ({
     service: false,
     equipment: false,
     regist: false,
+    registByDay: false,
   },
   consume: {
     areaInfo: {
@@ -154,8 +156,19 @@ const actions = {
         commit(LOADING_AREA, false);
       });
   },
-  fetchReportList({ commit }, entity) {
+  fetchReportList({ commit, getters }, entity) {
+    let filters = getFilters(getters.filters);
+    if (filters.reportYear) {
+      entity.year = filters.reportYear;
+    }
+    if (filters.reportAreaId) {
+      entity.year = filters.reportAreaId;
+    }
+    if (entity && entity.updateRegisteByDay) {
+      commit(LOADING_REGIST_BY_DAY, true);
+    } else {
       commit(LOADING_REGIST, true);
+    }
     return fetchReportList({
       params: {
         ...entity,
@@ -164,11 +177,19 @@ const actions = {
       .then(res => {
         let list = res.data;
         commit(GET_REPORT_DATA, list);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
           commit(LOADING_REGIST, false);
+        }
       })
       .catch(err => {
         console.error(err);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
           commit(LOADING_REGIST, false);
+        }
       });
   },
   fetchTitleList({ commit }) {
@@ -286,6 +307,9 @@ const mutations = {
     }
     state.loading.regist = fetching;
   },
+  [LOADING_REGIST_BY_DAY](state, fetching) {
+    state.loading.registByDay = fetching;
+  },
 };
 
 export default {

src/containers/HomePage/Home.vue

@@ -42,7 +42,6 @@ export default {
 
 <style lang="scss">
 .Home-Dashboard.Dashboard {
-  padding: 22px 34px 0;
-  overflow-y: hidden;
+  padding: 22px 34px;
 }
 </style>