Merge branch 'test' into 'master'

src/App.vue

@@ -220,6 +220,12 @@ export default {
     display: none;
   }
 }
+.record-List {
+  .record-Item {
+    display: inline-block;
+    width: 30%;
+  }
+}
 @media screen and (max-width: $bigScreenWidth) {
   .topTitle {
     .complate-logo {

src/components/input/AreaDashboard/AreaSelect.vue

@@ -6,6 +6,7 @@
     filterable
     :value="value"
     @change="changeHandle"
+    @visible-change="resetFilterText"
     :multiple="multiple"
     ref="select"
   >
@@ -14,6 +15,7 @@
       <el-input
         v-if="multiple"
         class="out-input"
+        :value="filterText"
         clearable
         @click.stop
         @input="debouncedQueryChange"
@@ -111,6 +113,9 @@ export default {
     handleQueryChange(val) {
       this.filterText = val;
     },
+    resetFilterText(visible) {
+      if (!visible) this.filterText = '';
+    },
   },
 };
 </script>

src/containers/Dashboard/CustomerData/CustomerData.vue

@@ -12,6 +12,7 @@
         <dashboard-area-select
           :operateId="filters.operateId"
           :value="filters.areaId"
+          multiple
           @input="val => updateFilters({areaId: val})"
         />
       </search-item>
@@ -114,6 +115,21 @@ export default {
       flex: 1;
     }
   }
+  .el-select {
+    .el-select__tags {
+      height: 90%;
+      overflow: hidden;
+      input {
+        display: none;
+      }
+    }
+    .el-input {
+      overflow: hidden;
+    }
+    .el-input__inner {
+      height: 100% !important;
+    }
+  }
 }
 </style>
 

src/containers/Dashboard/CustomerData/CustomerDataStore.js

@@ -4,7 +4,7 @@ import initFiltersStore from '@/store/modules/filters';
 
 const initFilters = () => ({
   operateId: undefined,
-  areaId: undefined,
+  areaId: [],
   timeType: 0, // 0 本日，1 本月， 2 本年
 });
 const filtersStore = initFiltersStore(initFilters);

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"
+          :value="filters.reportYear"
+          @input="val => updateFilters({reportYear: val})"
           type="year"
           value-format="yyyy"
           placeholder="请选择"
@@ -16,11 +16,17 @@
       </search-item>
       <search-item label="校区">
         <area-select
-          v-model.trim="campusFilters.areaId"
-          @input="changeReportAreaHandle"
+          :value="filters.reportAreaId"
+          @input="val => updateFilters({reportAreaId: val})"
           :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 +42,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>
@@ -49,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',
@@ -76,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;
@@ -102,21 +122,31 @@ 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 filters = getFilters(this.filters);
+      this.fetchReportList({
+        isAdmin: this.isAdmin ? 1 : 0,
+        year: filters.reportYear ? filters.reportYear : null,
+        areaId: filters.reportAreaId ? filters.reportAreaId : 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

@@ -15,7 +15,8 @@ export default {
       serviceList: [
         { value: 'monthAppActive', name: 'APP活跃用户' },
         { value: 'monthHardActive', name: '硬件活跃用户' },
-        { value: 'allActive', 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, 50],
       });
       this.chart
         .source(this.data, {
           month: {
-            min: 1,
-            max: 12,
-            tickCount: 12,
+            type: 'cat',
           },
           mark: {
             type: 'cat',
@@ -51,17 +50,17 @@ export default {
           position: 'top',
           title: null,
           marker: 'square',
+          clickable: false,
         })
-        .axis('count', false)
-        .axis('mark', {
-          formatter: value => {
-            let service = this.serviceList.find(item => item.value === value);
-            return service ? `${service.name}` : '';
-          },
-        })
-        .intervalStack()
+        .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/RegisterByDay.vue

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

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

@@ -24,20 +24,14 @@ export default {
         container: 'RegisterByMonth',
         forceFit: true,
         height: this.height,
-        padding: [0, 20, 30, 20],
+        padding: [30, 20, 30, 50],
       });
       this.chart
         .source(this.data, {
-          month: {
-            min: 1,
-            max: 12,
-            tickCount: 12,
-          },
           count: {
             alias: '人数',
           },
         })
-        .axis('count', false)
         .axis('month', {
           label: {
             textStyle: {
@@ -52,11 +46,14 @@ export default {
         .position('month*count')
         .color('#4e82fb');
       this.chart.render();
-      this.chart.on('interval:click', this.clickHandle);
+      this.chart.on('plotclick', this.clickHandle);
     },
     clickHandle(ev) {
-      let data = ev.data._origin;
-      this.changeReportMonthHandle(data.month);
+      let records = this.chart.getSnapRecords({ x: ev.x, y: ev.y });
+      if (records && records.length) {
+        let data = records[0]._origin;
+        this.changeReportMonthHandle(data.month);
+      }
     },
   },
 };

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,
@@ -210,6 +214,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 => {
@@ -217,8 +222,40 @@ const mutations = {
       dayList[idx].count = val.count;
     });
     state.report.registePerDay = dayList;
-    state.report.registePerMonth = data.list;
-    state.report.activeUser = data.listCount;
+
+    let registerList = new Array(12)
+      .fill({ count: 0, mark: null })
+      .map((v, idx) => ({ ...v, month: (idx + 1).toString() }));
+    data.list.map(val => {
+      let idx = val.month - 1;
+      registerList[idx].count += val.count;
+    });
+    state.report.registePerMonth = registerList;
+
+    let activeList = new Array(12)
+      .fill({ count: 0, mark: 'allActive' })
+      .map((v, idx) => ({ ...v, month: (idx + 1).toString() }));
+    let activeAppList = new Array(12)
+      .fill({ count: 0, mark: 'monthAppActive' })
+      .map((v, idx) => ({ ...v, month: (idx + 1).toString() }));
+    let activeDeviceList = new Array(12)
+      .fill({ count: 0, mark: 'monthHardActive' })
+      .map((v, idx) => ({ ...v, month: (idx + 1).toString() }));
+    data.listCount.map(val => {
+      let idx = val.month - 1;
+      if (val.mark === 'allActive') {
+        activeList[idx].count += val.count;
+      }
+      if (val.mark === 'monthAppActive') {
+        activeAppList[idx].count += val.count;
+      }
+      if (val.mark === 'monthHardActive') {
+        activeDeviceList[idx].count += val.count;
+      }
+    });
+    activeList.push.apply(activeList, activeAppList);
+    activeList.push.apply(activeList, activeDeviceList);
+    state.report.activeUser = activeList;
   },
   [GET_TITLE_DATA](state, data) {
     state.title = data;
@@ -244,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/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -168,6 +168,7 @@ export default {
         this.SelectedDataIndex = data;
         this.chartGeom.setSelected(data);
         this.changeSelected(data);
+        this.changeServiceHandle(data);
       }
     },
     changeSelected(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>
@@ -35,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>
 

src/containers/layout/IconMenu/components/MenuItem.vue

@@ -115,6 +115,11 @@ export default {
       this.style = 'left: 0;';
     }
   },
+  watch: {
+    $route() {
+      this.toggleSubmenus(false);
+    },
+  },
   methods: {
     toggleSubmenus(visiable) {
       this.showSubMenus = visiable;

src/lib/permission.js

@@ -63,8 +63,10 @@ const configRoutePermission = (
       if (whiteList.indexOf(to.path) !== -1) {
         next();
       } else {
-        next('/login');
-        NProgress.done();
+        store.dispatch('FedLogOut').then(() => {
+          next({ path: '/login' });
+          NProgress.done();
+        });
       }
     }
   });