首页图表添加注册和活跃人数统计

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

@@ -31,7 +31,10 @@
         class="Dashboard-CampusItem"
         v-loading="loading.regist"
       >
-        <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
+        <div class="Dashboard-title">
+          <span>{{ reportYear }}年每月注册数据</span>
+          <span class="more-info">{{ reportYear }}年注册人数为： {{ registeYearTotal }}人；截止到目前为止注册会员总数: {{ registeTotal }}人</span>
+        </div>
         <RegisterByMonth
           :data="registePerMonth"
           :changeReportMonthHandle="changeReportMonthHandle"
@@ -54,7 +57,10 @@
         class="Dashboard-CampusItem"
         v-loading="loading.regist"
       >
-        <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
+        <div class="Dashboard-title">
+          <span>{{ reportYear }}年每月活跃数据</span>
+          <span class="more-info">截止{{ today }}，系统总活跃人数为：{{ activeTotal }}人</span>
+        </div>
         <ActiveUserByMonth :data="activeUser" />
       </div>
     </div>
@@ -79,11 +85,9 @@ export default {
     isAdmin: Boolean,
   },
   data() {
+    let today = this.$formatDate(new Date(), 'yyyy-MM-dd');
     return {
-      campusFilters: {
-        year: '',
-        areaId: undefined,
-      },
+      today: today,
     };
   },
   computed: {
@@ -96,7 +100,18 @@ export default {
       'loading',
       'reportMounted',
       'filters',
+      'registeTotal',
     ]),
+    registeYearTotal() {
+      return this.registePerMonth.reduce((pre, curItem) => {
+        return pre + curItem.count;
+      }, 0);
+    },
+    activeTotal() {
+      return this.activeUser.reduce((pre, curItem) => {
+        return pre + curItem.count;
+      }, 0);
+    },
   },
   mounted() {
     if (!this.reportMounted) {
@@ -148,7 +163,6 @@ export default {
 .Dashboard {
   .Dashboard-Row.Dashboard-Register {
     height: auto;
-  }
     .Dashboard-DataCard {
       background-color: #fff;
       border-radius: 8px;
@@ -160,6 +174,10 @@ export default {
     .Dashboard-SearchBar {
       display: flex;
       padding: 10px 0 20px;
+      .filter-item-label {
+        min-width: auto;
+        width: auto;
+      }
       .filter-item-input {
         width: 200px;
         .el-input {
@@ -172,6 +190,10 @@ export default {
       padding: 0 15px;
       .Dashboard-title {
         position: relative;
+        .more-info {
+          margin-left: 20px;
+          font-weight: normal;
+        }
       }
       .Dashboard-title::before {
         content: '';
@@ -189,5 +211,6 @@ export default {
         }
       }
     }
+  }
 }
 </style>

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

@@ -32,6 +32,12 @@ export default {
           },
           count: {
             alias: '人数',
+            formatter: val => {
+              if (/\./.test(val)) {
+                return '';
+              }
+              return val;
+            },
           },
         })
         .tooltip({

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

@@ -30,6 +30,12 @@ export default {
         .source(this.data, {
           count: {
             alias: '人数',
+            formatter: val => {
+              if (/\./.test(val)) {
+                return '';
+              }
+              return val;
+            },
           },
         })
         .axis('month', {

src/containers/Dashboard/Dashboard.js

@@ -61,6 +61,7 @@ const state = () => ({
     registePerDay: [],
     registePerMonth: [],
     activeUser: [],
+    customerCount: 0,
   },
   title: {
     activeCount: 0,
@@ -75,6 +76,7 @@ const getters = {
   reportMonth: state => state.report.month,
   registePerDay: state => state.report.registePerDay,
   registePerMonth: state => state.report.registePerMonth,
+  registeTotal: state => state.report.customerCount,
   activeUser: state => state.report.activeUser,
   titleData: state => state.title,
   areaInfo: state => state.consume.areaInfo,
@@ -162,7 +164,7 @@ const actions = {
       entity.year = filters.reportYear;
     }
     if (filters.reportAreaId) {
-      entity.year = filters.reportAreaId;
+      entity.areaId = filters.reportAreaId;
     }
     if (entity && entity.updateRegisteByDay) {
       commit(LOADING_REGIST_BY_DAY, true);
@@ -233,6 +235,8 @@ const mutations = {
       : [];
   },
   [GET_REPORT_DATA]: (state, data) => {
+    state.report.customerCount = data.customerCount ? data.customerCount : 0;
+
     state.report.year = data.year;
     state.report.month = data.month;