修改数据首页

src/App.vue

@@ -10,6 +10,7 @@
           :routers="allRoutes"
           :dashboardVisiable="dashboardVisiable"
           :toggleFastLink="toggleFastLink"
+          :selectRouteMenu="selectRouteMenu"
         />
       </div>
       <template v-if="dashboardVisiable">
@@ -25,6 +26,10 @@
             :routers="route"
           />
           <sidebar-nav
+            v-else-if="showSelected"
+            :routers="selectedRoute"
+          />
+          <sidebar-nav
             v-else
             :routers="route"
           />
@@ -63,9 +68,11 @@ export default {
   },
   data() {
     return {
+      selectedRoute: [],
       routerDone: false,
       isInnerPage: true,
       showFastLink: false,
+      showSelected: false,
     };
   },
   computed: {
@@ -104,7 +111,20 @@ export default {
       }
     },
     toggleFastLink(entity) {
-      this.showFastLink = entity;
+      if (entity) {
+        this.$router.push({
+          path: '/',
+        });
+        this.showFastLink = entity;
+      } else {
+        this.showFastLink = entity;
+        this.showSelected = false;
+      }
+    },
+    selectRouteMenu(routes) {
+      this.selectedRoute = routes;
+      this.showSelected = true;
+      this.showFastLink = false;
     },
   },
 };

src/containers/Dashboard/CampusRank/CampusRank.vue

@@ -45,8 +45,9 @@ export default {
     ...mapGetters('Dashboard', ['campusRankList', 'filters']),
   },
   methods: {
-    ...mapActions('Dashboard', ['fetchConsumeList']),
+    ...mapActions('Dashboard', ['fetchConsumeList', 'updateCampusName']),
     changeCampusHandle(data) {
+      this.updateCampusName(data.areaName);
       this.fetchConsumeList({
         areaId: data.areaId,
         updatePercentList: true,

src/containers/Dashboard/CampusRank/CampusRankChart.vue

@@ -31,7 +31,6 @@ export default {
     this.initChart();
   },
   methods: {
-    ...mapActions('Dashboard', ['updateCampusName']),
     initChart() {
       this.chart = new G2.Chart({
         container: 'CampusRank',
@@ -129,14 +128,10 @@ export default {
       if (this.data.length) {
         this.totle = this.data.reduce((count, item) => count + item.count, 0);
         let data = this.SelectedDataIndex;
-        if (data) {
-          this.changeSelected(data);
-          this.chartGeom.setSelected(data);
-        } else {
-          this.chartGeom.setSelected(this.data[0]);
-          this.changeSelected(this.data[0]);
-          this.SelectedDataIndex = this.data[0];
-        }
+
+        this.chartGeom.setSelected(this.data[0]);
+        this.changeSelected(this.data[0]);
+        this.SelectedDataIndex = this.data[0];
       }
     },
     clickHandle(ev) {
@@ -144,11 +139,12 @@ export default {
       if (this.SelectedDataIndex.areaId !== data.areaId) {
         this.SelectedDataIndex = data;
         this.changeSelected(data);
-        this.changeCampusHandle(data);
+        if (data.areaId) {
+          this.changeCampusHandle(data);
+        }
       }
     },
     changeSelected(data) {
-      this.updateCampusName(data.areaName);
       this.percentDom = document.querySelector('.CampusRank-percent');
       this.areaNameDom = document.querySelector('.CampusRank-areaName');
       if (this.percentDom) {

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -121,7 +121,6 @@ export default {
     },
     initSlider() {
       const wrapDom = document.getElementById('CustomerRechangeChart');
-      console.log(wrapDom.clientHeight);
       let height = wrapDom.clientHeight;
 
       // const arrLength = this.data.length;
@@ -154,6 +153,9 @@ export default {
       this.slider.render(); // 渲染
     },
     updateSlider() {
+      const wrapDom = document.getElementById('CustomerRechangeChart');
+      let height = wrapDom.clientHeight;
+
       let dom = this.sliderDom;
       dom.innerHTML = '';
       const arrLength = this.data.length;
@@ -162,7 +164,7 @@ export default {
         this.slider = new Slider({
           container: this.sliderDom,
           width: 26,
-          height: 300,
+          height: height,
           xAxis: 'value',
           yAxis: 'areaName',
           startRadio: this.ds.state.startRadio,

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

@@ -22,7 +22,10 @@
     <div class="Dashboard-CampusData">
       <div class="Dashboard-CampusItem">
         <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
-        <RegisterByMonth :data="registePerMonth"></RegisterByMonth>
+        <RegisterByMonth
+          :data="registePerMonth"
+          :changeReportMonthHandle="changeReportMonthHandle"
+        />
       </div>
       <div class="Dashboard-CampusItem">
         <div class="Dashboard-title">
@@ -88,6 +91,16 @@ export default {
         });
       }
     },
+    changeReportMonthHandle(month) {
+      console.log(month);
+      let year = this.campusFilters.year;
+      let areaId = this.campusFilters.areaId;
+      this.fetchReportList({
+        year: year ? year : null,
+        areaId: areaId ? areaId : null,
+        month: month,
+      });
+    },
   },
 };
 </script>

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

@@ -7,6 +7,11 @@ import chartMixin from '../../chartMixin';
 
 export default {
   name: 'RegisterByMonth',
+  props: {
+    changeReportMonthHandle: {
+      type: Function,
+    },
+  },
   mixins: [chartMixin],
   data() {
     return {
@@ -47,6 +52,11 @@ export default {
         .position('month*count')
         .color('#4e82fb');
       this.chart.render();
+      this.chart.on('interval:click', this.clickHandle);
+    },
+    clickHandle(ev) {
+      let data = ev.data._origin;
+      this.changeReportMonthHandle(data.month);
     },
   },
 };

src/containers/Dashboard/Dashboard.js

@@ -85,6 +85,9 @@ const actions = {
         entity.date = formatDate(nowTime, 'yyyy-MM-dd');
         break;
     }
+    if (data && data.areaId) {
+      entity.areaId = data.areaId;
+    }
     return fetchConsumeList({
       data: {
         ...entity,
@@ -131,7 +134,22 @@ const mutations = {
     state.consume.consumeAfterVos = data.consumeAfterVos
       ? data.consumeAfterVos
       : [];
-    state.consume.list = data.list ? data.list : [];
+    let campusList = data.list ? data.list : [];
+    if (campusList.length > 2) {
+      let arrStart = campusList.slice(0, 2);
+      let arrEnd = campusList.slice(2).reduce(
+        (item, curentVal) => ({
+          ...item,
+          count: item.count + curentVal.count,
+        }),
+        {
+          areaName: '其他校区',
+          count: 0,
+        }
+      );
+      campusList = [...arrStart, arrEnd];
+    }
+    state.consume.list = campusList;
     state.consume.percentList = data.percentList ? data.percentList : [];
   },
   [GET_PERCENT_DATA]: (state, data) => {

src/containers/layout/IconMenu/IconMenu.vue

@@ -16,6 +16,7 @@
         v-if="customerManage && customerManage.length"
         menuName="会员管理"
         :menuList="customerManage[0].children"
+        :selectRouteMenu="selectRouteMenu"
       >
       <img
         slot="icon"
@@ -32,6 +33,7 @@
         v-if="baseManage && baseManage.length"
         menuName="基础数据"
         :menuList="baseManage[0].children"
+        :selectRouteMenu="selectRouteMenu"
       >
       <img
         slot="icon"
@@ -48,6 +50,7 @@
         v-if="systemManage && systemManage.length"
         menuName="系统管理"
         :menuList="systemManage[0].children"
+        :selectRouteMenu="selectRouteMenu"
       >
       <img
         slot="icon"
@@ -110,6 +113,9 @@ export default {
     toggleFastLink: {
       type: Function,
     },
+    selectRouteMenu: {
+      type: Function,
+    },
   },
   data() {
     return {

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

@@ -5,13 +5,16 @@
     @mouseenter="toggleSubmenus"
     @mouseleave="toggleSubmenus"
   >
-    <div class="IconMenus">
-      <div class="IconMenus-icon">
+    <div
+      class="IconMenu"
+      @click="selectHandle"
+    >
+      <div class="IconMenu-icon">
         <slot name="icon">
           <img src="@/assets/images/layout/icon_huiyuanguanli@2x.png" />
         </slot>
       </div>
-      <div class="IconMenus-name">{{ menuName }}</div>
+      <div class="IconMenu-name">{{ menuName }}</div>
     </div>
     <div
       :class="`SubmenuBox ${showSubMenus?'show':''}`"
@@ -67,6 +70,9 @@ export default {
       type: Array,
       default: () => [],
     },
+    selectRouteMenu: {
+      type: Function,
+    },
   },
   data() {
     return {
@@ -89,6 +95,11 @@ export default {
     toggleSubmenus() {
       this.showSubMenus = !this.showSubMenus;
     },
+    selectHandle() {
+      if (typeof this.selectRouteMenu === 'function') {
+        this.selectRouteMenu(this.menuList);
+      }
+    },
   },
 };
 </script>
@@ -104,7 +115,7 @@ export default {
   &:hover {
     background-color: #68aaff;
   }
-  .IconMenus {
+  .IconMenu {
     display: flex;
     width: 100%;
     height: 100%;
@@ -112,12 +123,12 @@ export default {
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    .IconMenus-icon {
+    .IconMenu-icon {
       width: 17px;
       height: 17px;
       margin-bottom: 5px;
     }
-    .IconMenus-name {
+    .IconMenu-name {
       font-size: 14px;
     }
   }
@@ -176,13 +187,13 @@ export default {
   .MenuItem {
     width: 112px;
     height: 80px;
-    .IconMenus {
-      .IconMenus-icon {
+    .IconMenu {
+      .IconMenu-icon {
         width: 34px;
         height: 34px;
         margin-bottom: 10px;
       }
-      .IconMenus-name {
+      .IconMenu-name {
         font-size: 18px;
       }
     }