修改首页活跃有数据不重刷

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

@@ -6,7 +6,8 @@
     <div class="Dashboard-SearchBar">
       <search-item label="年份">
         <el-date-picker
-          v-model.trim="campusFilters.year"
+          :value="filters.reportYear"
+          @input="val => updateFilters({reportYear: val})"
           type="year"
           value-format="yyyy"
           placeholder="请选择"
@@ -15,7 +16,8 @@
       </search-item>
       <search-item label="校区">
         <area-select
-          v-model.trim="campusFilters.areaId"
+          :value="filters.reportAreaId"
+          @input="val => updateFilters({reportAreaId: val})"
           :accessType="isAdmin?0:1"
         />
       </search-item>
@@ -57,6 +59,7 @@ import { mapGetters, mapActions } from 'vuex';
 import RegisterByMonth from './components/RegisterByMonth';
 import RegisterByDay from './components/RegisterByDay';
 import ActiveUserByMonth from './components/ActiveUserByMonth';
+import { getFilters } from '@/utils/index';
 
 export default {
   name: 'CustomerRegister',
@@ -84,10 +87,19 @@ export default {
       'registePerMonth',
       'activeUser',
       'loading',
+      'reportMounted',
+      'filters',
     ]),
   },
+  mounted() {
+    if (!this.reportMounted) {
+      this.fetchReportList({
+        isAdmin: this.isAdmin ? 1 : 0,
+      });
+    }
+  },
   methods: {
-    ...mapActions('Dashboard', ['fetchReportList']),
+    ...mapActions('Dashboard', ['fetchReportList', 'updateFilters']),
     changeReportYearHandle(val) {
       if (val) {
         let areaId = this.campusFilters.areaId;
@@ -110,22 +122,20 @@ export default {
     },
     changeReportMonthHandle(month) {
       console.log(month);
-      let year = this.campusFilters.year;
-      let areaId = this.campusFilters.areaId;
+      let filters = getFilters(this.filters);
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: year ? year : null,
-        areaId: areaId ? areaId : null,
+        year: filters.reportYear ? filters.reportYear : null,
+        areaId: filters.reportAreaId ? filters.reportAreaId : null,
         month: month,
       });
     },
     searchList() {
-      let year = this.campusFilters.year;
-      let areaId = this.campusFilters.areaId;
+      let filters = getFilters(this.filters);
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: year ? year : null,
-        areaId: areaId ? areaId : null,
+        year: filters.reportYear ? filters.reportYear : null,
+        areaId: filters.reportAreaId ? filters.reportAreaId : null,
       });
     },
   },

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

@@ -50,6 +50,7 @@ export default {
           position: 'top',
           title: null,
           marker: 'square',
+          clickable: false,
         })
         .interval()
         .position('month*count')

src/containers/Dashboard/Dashboard.js

@@ -26,6 +26,8 @@ const initFilters = () => ({
   operateId: undefined,
   choiceareaIds: [],
   timeType: 0, // 0 本日，1 本月， 2 本年
+  reportYear: '',
+  reportAreaId: undefined,
 });
 const filtersStore = initFiltersStore(initFilters);
 const nowTime = new Date();
@@ -51,6 +53,7 @@ const state = () => ({
     percentList: [],
   },
   report: {
+    mounted: false,
     year: new Date().getFullYear(),
     month: new Date().getMonth() + 1,
     registePerDay: [],
@@ -65,6 +68,7 @@ const state = () => ({
 });
 
 const getters = {
+  reportMounted: state => state.report.mounted,
   reportYear: state => state.report.year,
   reportMonth: state => state.report.month,
   registePerDay: state => state.report.registePerDay,
@@ -277,6 +281,9 @@ const mutations = {
     state.loading.equipment = fetching;
   },
   [LOADING_REGIST](state, fetching) {
+    if (fetching) {
+      state.report.mounted = true;
+    }
     state.loading.regist = fetching;
   },
 };

src/containers/HomePage/Home.vue

@@ -34,15 +34,9 @@ export default {
       item => item.menuCode === process.env.VUE_APP_REGISTER_DASHBOARD_CODE
     );
     if (item) {
-      this.fetchReportList({
-        isAdmin: this.isAdmin ? 1 : 0,
-      });
       this.show = true;
     }
   },
-  methods: {
-    ...mapActions('Dashboard', ['fetchReportList']),
-  },
 };
 </script>