修改首页用户活跃展示

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

 <template>
   <div
-    class="Dashboard-Row Dashboard-DataCard"
+    class="Dashboard-Row Dashboard-DataCard Dashboard-Register"
     v-loading="loading.regist"
   >
     <div class="Dashboard-SearchBar">
       <search-item label="年份">
         <el-date-picker
           v-model.trim="campusFilters.year"
-          @change="changeReportYearHandle"
           type="year"
           value-format="yyyy"
           placeholder="请选择"
@@ -17,10 +16,15 @@
       <search-item label="校区">
         <area-select
           v-model.trim="campusFilters.areaId"
-          @input="changeReportAreaHandle"
           :accessType="isAdmin?0:1"
         />
       </search-item>
+      <search-item label="">
+        <el-button
+          @click="searchList"
+          type="primary"
+        >搜索</el-button>
+      </search-item>
     </div>
     <div class="Dashboard-CampusData">
       <div class="Dashboard-CampusItem">
@@ -36,10 +40,14 @@
         </div>
         <RegisterByDay :data="registePerDay" />
       </div>
+    </div>
+    <div class="Dashboard-CampusData">
       <div class="Dashboard-CampusItem">
         <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
         <ActiveUserByMonth :data="activeUser" />
       </div>
+      <div class="Dashboard-CampusItem">
+      </div>
     </div>
   </div>
 </template>
@@ -111,12 +119,24 @@ export default {
         month: month,
       });
     },
+    searchList() {
+      let year = this.campusFilters.year;
+      let areaId = this.campusFilters.areaId;
+      this.fetchReportList({
+        isAdmin: this.isAdmin ? 1 : 0,
+        year: year ? year : null,
+        areaId: areaId ? areaId : null,
+      });
+    },
   },
 };
 </script>
 
 <style lang="scss">
 .Dashboard {
+  .Dashboard-Row.Dashboard-Register {
+    height: auto;
+  }
   .Dashboard-DataCard {
     background-color: #fff;
     border-radius: 8px;

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

@@ -16,6 +16,7 @@ export default {
         { value: 'monthAppActive', name: 'APP活跃用户' },
         { value: 'monthHardActive', name: '硬件活跃用户' },
         { value: 'allActive', name: '两者兼具' },
+        { value: 'total', name: '全部活跃' },
       ],
     };
   },
@@ -25,14 +26,12 @@ export default {
         container: 'ActiveUserByMonth',
         forceFit: true,
         height: this.height,
-        padding: [50, 40],
+        padding: [30, 20, 30, 20],
       });
       this.chart
         .source(this.data, {
           month: {
-            min: 1,
-            max: 12,
-            tickCount: 12,
+            type: 'cat',
           },
           mark: {
             type: 'cat',
@@ -46,22 +45,28 @@ export default {
           showTitle: false,
         });
       // 图例
-      this.chart
-        .legend({
+      this.chart.legend({
         position: 'top',
         title: null,
         marker: 'square',
-        })
-        .axis('count', false)
-        .axis('mark', {
-          formatter: value => {
-            let service = this.serviceList.find(item => item.value === value);
-            return service ? `${service.name}` : '';
-          },
-        })
-        .intervalStack()
+      });
+      // .axis('count', false)
+      // .axis('mark', {
+      //   formatter: value => {
+      //     let service = this.serviceList.find(item => item.value === value);
+      //     return service ? `${service.name}` : '';
+      //   },
+      // });
+      this.chart
+        .interval()
         .position('month*count')
-        .color('mark', ['#4e82fb', '#ffc934', '#26c9a8']);
+        .color('mark', ['#4e82fb', '#ffc934', '#26c9a8'])
+        .adjust([
+          {
+            type: 'dodge',
+            marginRatio: 1 / 32,
+          },
+        ]);
 
       this.chart.render();
     },

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

@@ -24,7 +24,7 @@ export default {
         container: 'RegisterByMonth',
         forceFit: true,
         height: this.height,
-        padding: [0, 20, 30, 20],
+        padding: [30, 20, 30, 20],
       });
       this.chart
         .source(this.data, {

src/containers/Dashboard/Dashboard.js

@@ -210,6 +210,7 @@ const mutations = {
   [GET_REPORT_DATA]: (state, data) => {
     state.report.year = data.year;
     state.report.month = data.month;
+
     let dayList = new Array(31).fill({ count: 0 });
     dayList = dayList.map((v, idx) => ({ ...v, days: idx + 1 }));
     data.dayVos.map(val => {
@@ -218,7 +219,20 @@ const mutations = {
     });
     state.report.registePerDay = dayList;
     state.report.registePerMonth = data.list;
-    state.report.activeUser = data.listCount;
+
+    let activeList = new Array(12).fill({ count: 0, mark: 'total' });
+    activeList = activeList.map((v, idx) => ({ ...v, month: idx + 1 }));
+    data.listCount.map(val => {
+      let idx = val.month - 1;
+      if (val.mark === 'monthAppActive' || val.mark === 'monthHardActive') {
+        activeList[idx].count += val.count;
+      }
+    });
+    let activeAppList = data.listCount.filter(
+      val => val.mark === 'monthAppActive'
+    );
+    activeList.push.apply(activeList, activeAppList);
+    state.report.activeUser = activeList;
   },
   [GET_TITLE_DATA](state, data) {
     state.title = data;

src/containers/HomePage/Home.vue

@@ -2,7 +2,6 @@
   <div class="Dashboard Home-Dashboard">
     <CustomerRegister
       v-if="show"
-      class="Dashboard-Row Dashboard-DataCard"
       :isAdmin="isAdmin"
     />
   </div>