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

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,44 +163,52 @@ export default {
 .Dashboard {
   .Dashboard-Row.Dashboard-Register {
     height: auto;
-  }
-  .Dashboard-DataCard {
-    background-color: #fff;
-    border-radius: 8px;
-    margin-right: 8px;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  .Dashboard-SearchBar {
-    display: flex;
-    padding: 10px 0 20px;
-    .filter-item-input {
-      width: 200px;
-      .el-input {
-        width: 100%;
+    .Dashboard-DataCard {
+      background-color: #fff;
+      border-radius: 8px;
+      margin-right: 8px;
+      &:last-child {
+        margin-right: 0;
       }
     }
-  }
-  .Dashboard-CampusData {
-    display: flex;
-    padding: 0 15px;
-    .Dashboard-title {
-      position: relative;
-    }
-    .Dashboard-title::before {
-      content: '';
-      position: absolute;
-      bottom: -12px;
-      left: 0;
-      width: 32px;
-      height: 4px;
-      background-color: #4e82fb;
+    .Dashboard-SearchBar {
+      display: flex;
+      padding: 10px 0 20px;
+      .filter-item-label {
+        min-width: auto;
+        width: auto;
+      }
+      .filter-item-input {
+        width: 200px;
+        .el-input {
+          width: 100%;
+        }
+      }
     }
-    .Dashboard-CampusItem {
-      flex: 1;
-      &:nth-child(2) {
-        flex: 1.4;
+    .Dashboard-CampusData {
+      display: flex;
+      padding: 0 15px;
+      .Dashboard-title {
+        position: relative;
+        .more-info {
+          margin-left: 20px;
+          font-weight: normal;
+        }
+      }
+      .Dashboard-title::before {
+        content: '';
+        position: absolute;
+        bottom: -12px;
+        left: 0;
+        width: 32px;
+        height: 4px;
+        background-color: #4e82fb;
+      }
+      .Dashboard-CampusItem {
+        flex: 1;
+        &:nth-child(2) {
+          flex: 1.4;
+        }
       }
     }
   }

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;