整合全部模块路由

.env

-VUE_APP_LIB_BASE_MANAGER=http://ex-dev-dcxy-static.168cad.top
+VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
 VUE_APP_BASE_URL=/systemManageShell/
 VUE_APP_MENU_CODE=0003
 VUE_APP_WHITE_LIST=/login,/404,/401

package.json

@@ -18,6 +18,7 @@
     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "dependencies": {
+    "@antv/g2": "^3.5.1",
     "axios": "^0.18.0",
     "blueimp-md5": "^2.10.0",
     "element-ui": "^2.4.5",

public/index.html

@@ -5,11 +5,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
-    <!-- <script src="<%= VUE_APP_LIB_BASE_MANAGER %>/baseManage/lib/manageShell.umd.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
+    <script src="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.umd.js"></script>
+    <script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.js"></script>
+    <script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.js"></script>
     <link
       rel="stylesheet"
-      href="<%= VUE_APP_LIB_BASE_MANAGER %>/baseManage/lib/manageShell.css"
+      href="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.css"
+    />
+    <link
+      rel="stylesheet"
+      href="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.css"
+    />
+    <link
+      rel="stylesheet"
+      href="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.css"
     />
     <title>系统管理</title>
   </head>

src/App.vue

 <template>
   <div id="app">
     <app-layout v-if="isInnerPage">
-      <template slot="title">
+      <div
+        class="AppTopBar"
+        slot="title"
+      >
         <UserBox />
+        <IconMenus
+          :routers="allRoutes"
+          :dashboardVisiable="dashboardVisiable"
+        />
+      </div>
+      <template v-if="dashboardVisiable">
+        <router-view
+          class="body-container"
+          slot="container"
+        />
       </template>
-      <template slot="nav">
-        <sidebar-nav :routers="route" />
+      <template v-else>
+        <template slot="nav">
+          <sidebar-nav
+            v-if="showFastLink"
+            :routers="route"
+          />
+          <sidebar-nav
+            v-else
+            :routers="route"
+          />
+        </template>
+        <router-view v-if="routerDone" />
+        <div
+          class="loading-container"
+          v-else
+          v-loading="!routerDone"
+        ></div>
       </template>
-      <router-view v-if="routerDone" />
-      <div
-        class="loading-container"
-        v-else
-        v-loading="!routerDone"
-      ></div>
     </app-layout>
     <router-view v-else />
   </div>
@@ -20,24 +42,35 @@
 
 <script>
 import UserBox from './containers/layout/components/UserBox';
+import IconMenus from './containers/layout/components/IconMenu';
 
 const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
 
 export default {
   name: 'App',
-  components: { UserBox },
+  components: { UserBox, IconMenus },
   props: {
     route: {
       type: Array,
       default: () => [],
     },
+    allRoutes: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       routerDone: false,
       isInnerPage: true,
+      showFastLink: false,
     };
   },
+  computed: {
+    dashboardVisiable() {
+      return this.$route.name === 'dashboard';
+    },
+  },
   mounted() {
     if (this.$route.meta && this.$route.meta.store) {
       this.showComponents(this.$route.meta.store);
@@ -48,6 +81,8 @@ export default {
   watch: {
     $route(newVal) {
       this.routerDone = false;
+      console.log(newVal);
+
       if (newVal.meta && newVal.meta.store) {
         this.showComponents(newVal.meta.store);
       } else {
@@ -56,6 +91,9 @@ export default {
     },
   },
   methods: {
+    toggleDashboard() {
+      this.dashboardVisiable = !this.dashboardVisiable;
+    },
     showComponents(store) {
       this.isInnerPage =
         whiteList.indexOf(this.$route.path) !== -1 ? false : true;
@@ -73,8 +111,12 @@ export default {
 </script>
 
 <style lang="scss">
+.AppTopBar {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+}
 .loading-container {
   margin: 50px;
 }
 </style>
-

src/api/dashboard/dashboard.js

+import fetch from '../fetch';
+
+const path = process.env.VUE_APP_CUSTOMER_SERVER_URL;
+
+export const fetchConsumeList = req =>
+  fetch({
+    url: path + '/dcxy/reportInfo/queryConsumeList',
+    timeout: 30000,
+    ...req,
+  });
+export const fetchReportList = req =>
+  fetch({
+    url: path + '/dcxy/reportInfo/queryReportList',
+    ...req,
+  });
+export const fetchTitleList = req =>
+  fetch({
+    url: path + '/dcxy/reportInfo/queryTitleList',
+    ...req,
+  });

src/api/user/update.js

+import fetch from '@/api/fetch';
+
+export const updateUserinfo = req =>
+  fetch({
+    url: '/adminChange/updatePwd',
+    method: 'post',
+    ...req,
+  });
+
+export const updateUserCellphone = req =>
+  fetch({
+    url: '/adminChange/updatePhone',
+    ...req,
+  });
+export const getVcode = req =>
+  fetch({
+    url: '/adminChange/getCode',
+    ...req,
+  });

src/containers/Dashboard/Dashboard.js

+import {
+  fetchConsumeList,
+  fetchReportList,
+  fetchTitleList,
+} from '@/api/dashboard/dashboard';
+
+const GET_CONSUME_DATA = 'GET_CONSUME_DATA';
+const GET_REPORT_DATA = 'GET_REPORT_DATA';
+const GET_TITLE_DATA = 'GET_TITLE_DATA';
+
+const state = () => ({
+  consume: {
+    consumeHardVos: [],
+    list: [],
+    percentList: [],
+  },
+  report: {
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+    registePerDay: [],
+    registePerMonth: [],
+    activeUser: [],
+  },
+  title: {
+    activeCount: 0,
+    countArea: 0,
+    countCustomer: 0,
+  },
+});
+
+const getters = {
+  reportYear: state => state.report.year,
+  reportMonth: state => state.report.month,
+  registePerDay: state => state.report.registePerDay,
+  registePerMonth: state => state.report.registePerMonth,
+  activeUser: state => state.report.activeUser,
+  titleData: state => state.title,
+  consumeHardVos: state => state.consume.consumeHardVos,
+  campusRankList: state => state.consume.list,
+  seviceRatioList: state => state.consume.percentList,
+};
+
+const actions = {
+  fetchConsumeList({ commit }, entity) {
+    return fetchConsumeList({
+      params: {
+        ...entity,
+      },
+    }).then(res => {
+      let list = res.data;
+      commit(GET_CONSUME_DATA, list);
+    });
+  },
+  fetchReportList({ commit }, entity) {
+    return fetchReportList({
+      params: {
+        ...entity,
+      },
+    }).then(res => {
+      let list = res.data;
+      commit(GET_REPORT_DATA, list);
+    });
+  },
+  fetchTitleList({ commit }) {
+    return fetchTitleList().then(res => {
+      let data = res.data;
+      commit(GET_TITLE_DATA, data);
+    });
+  },
+};
+
+const mutations = {
+  [GET_CONSUME_DATA]: (state, data) => {
+    state.consume.consumeHardVos = data.consumeHardVos;
+    state.consume.list = data.list;
+    state.consume.percentList = data.percentList;
+  },
+  [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 => {
+      let idx = Number(val.days.substr(-2)) - 1;
+      dayList[idx].count = val.count;
+    });
+    state.report.registePerDay = dayList;
+    state.report.registePerMonth = data.list;
+    state.report.activeUser = data.listCount;
+  },
+  [GET_TITLE_DATA](state, data) {
+    state.title = data;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/containers/Dashboard/Dashboard.vue

+<template>
+  <div class="Dashboard">
+    <div class="Dashboard-DataCard">
+      <div class="Dashboard-SearchBar">
+        <search-item label="年份">
+          <el-date-picker
+            v-model.trim="campusFilters.year"
+            @change="changeReportYearHandle"
+            type="year"
+            value-format="yyyy"
+            placeholder="请选择"
+          >
+          </el-date-picker>
+        </search-item>
+        <search-item label="校区">
+          <area-select
+            v-model.trim="campusFilters.areaId"
+            @change="changeReportAreaHandle"
+            type="user"
+          />
+        </search-item>
+      </div>
+      <div class="Dashboard-CampusData">
+        <div class="Dashboard-CampusItem">
+          <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
+          <RegisterByMonth :data="registePerMonth"></RegisterByMonth>
+        </div>
+        <div class="Dashboard-CampusItem">
+          <div class="Dashboard-title">
+            {{ reportYear }}年{{ reportMonth }}月注册数据
+          </div>
+          <RegisterByDay :data="registePerDay" />
+        </div>
+        <div class="Dashboard-CampusItem">
+          <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
+          <ActiveUserByMonth :data="activeUser" />
+        </div>
+      </div>
+    </div>
+    <div class="Dashboard-OperatorData">
+      <div class="Dashboard-DataCard">
+        <div class="Dashboard-SearchBar">
+          <search-item label="年份">
+            <el-date-picker
+              v-model.trim="operatorFilters.year"
+              @change="changeConsumeYearHandle"
+              type="year"
+              value-format="yyyy"
+              placeholder="请选择"
+            ></el-date-picker>
+          </search-item>
+          <search-item label="月份">
+            <el-date-picker
+              v-model.trim="operatorFilters.month"
+              @change="changeConsumeMouthHandle"
+              type="month"
+              value-format="MM"
+              format="MM"
+              :picker-options="monthRange"
+              placeholder="请选择"
+            ></el-date-picker>
+          </search-item>
+          <search-item label="运营商">
+            <operator-select
+              v-model.trim="operatorFilters.operatorId"
+              @input="changeConsumeOperatorHandle"
+            />
+          </search-item>
+        </div>
+        <CampusRank :data="campusRankList" />
+      </div>
+      <div class="Dashboard-DataCard">
+        <div class="Dashboard-title">
+          <div class="Dashboard-title-icon service">
+            <img src="@/assets/images/dashboard/icon_zhanbi@2x.png" />
+          </div>
+          <div class="Dashboard-title-text">各服务消费占比</div>
+          <div class="Dashboard-title-top">TOP1</div>
+        </div>
+        <SeviceRatio :data="seviceRatioList" />
+      </div>
+      <div class="Dashboard-DataCard">
+        <div class="Dashboard-title">
+          <div class="Dashboard-title-icon equipment">
+            <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
+          </div>
+          <div class="Dashboard-title-text">各设备消费排名</div>
+          <div class="Dashboard-title-top">TOP1-5</div>
+        </div>
+        <EquipmentList :data="consumeHardVos" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import RegisterByMonth from './components/RegisterByMonth';
+import RegisterByDay from './components/RegisterByDay';
+import SeviceRatio from './components/SeviceRatio';
+import CampusRank from './components/CampusRank';
+import ActiveUserByMonth from './components/ActiveUserByMonth';
+import EquipmentList from './components/EquipmentList';
+
+export default {
+  name: 'Dashboard',
+  components: {
+    RegisterByMonth,
+    RegisterByDay,
+    ActiveUserByMonth,
+    SeviceRatio,
+    CampusRank,
+    EquipmentList,
+  },
+  data() {
+    return {
+      campusFilters: {
+        year: undefined,
+        areaId: undefined,
+      },
+      operatorFilters: {
+        year: undefined,
+        month: undefined,
+        operateId: undefined,
+      },
+      monthRange: {
+        disabledDate: time => {
+          return this.operatorFilters.year
+            ? time.getTime() < new Date(this.operatorFilters.year) ||
+                time.getTime() > new Date(this.operatorFilters.year + '-12-31')
+            : true;
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters('Dashboard', [
+      'reportYear',
+      'reportMonth',
+      'registePerDay',
+      'registePerMonth',
+      'activeUser',
+      'campusRankList',
+      'seviceRatioList',
+      'consumeHardVos',
+    ]),
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    ...mapActions('Dashboard', [
+      'fetchReportList',
+      'fetchConsumeList',
+      'fetchTitleList',
+    ]),
+    initData() {
+      this.fetchReportList();
+      this.fetchConsumeList();
+      this.fetchTitleList();
+    },
+    changeReportYearHandle(val) {
+      if (val) {
+        let areaId = this.campusFilters.areaId;
+        this.fetchReportList({
+          year: val,
+          areaId: areaId ? areaId : null,
+        });
+      }
+    },
+    changeReportAreaHandle(val) {
+      if (val && this.campusFilters.year) {
+        this.fetchReportList({
+          year: this.campusFilters.year,
+          areaId: val,
+        });
+      }
+    },
+    changeConsumeYearHandle(val) {
+      if (val) {
+        let month = this.operatorFilters.month;
+        let operateId = this.operatorFilters.operateId;
+        this.fetchConsumeList({
+          year: val,
+          month: month ? month : null,
+          operateId: operateId ? operateId : null,
+        });
+      }
+    },
+    changeConsumeMouthHandle(val) {
+      if (val && this.operatorFilters.year) {
+        let operateId = this.operatorFilters.operateId;
+        this.fetchConsumeList({
+          year: this.operatorFilters.year,
+          month: val,
+          operateId: operateId ? operateId : null,
+        });
+      }
+    },
+    changeConsumeOperatorHandle(val) {
+      if (val && this.operatorFilters.year) {
+        let month = this.operatorFilters.month;
+        this.fetchConsumeList({
+          year: this.operatorFilters.year,
+          month: month ? month : null,
+          operateId: val,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.Dashboard {
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+  padding: 0 34px;
+  .Dashboard-title {
+    font-size: 20px;
+    color: #333;
+    font-weight: 700;
+  }
+  .Dashboard-DataCard {
+    margin-top: 12px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+  .Dashboard-SearchBar {
+    display: flex;
+    padding: 20px 0 50px;
+    .el-input,
+    .el-input__inner,
+    .filter-item {
+      height: 34px;
+      line-height: 34px;
+    }
+    .filter-item {
+      margin: 0 0 0 34px;
+    }
+    .el-input,
+    .filter-item-label {
+      width: auto;
+    }
+  }
+  .Dashboard-CampusData {
+    display: flex;
+    height: 300px;
+    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-CampusItem {
+      flex: 1;
+      &:nth-child(2) {
+        flex: 1.4;
+      }
+    }
+  }
+  .Dashboard-OperatorData {
+    flex: 1;
+    display: flex;
+    padding-bottom: 12px;
+    // height: 400px;
+    .Dashboard-SearchBar {
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      min-width: 480px;
+      height: 70px;
+      border-bottom: 1px solid #f1f1f1;
+      .filter-item {
+        margin: 0 10px 0 0;
+        .filter-item-input---normal {
+          width: 113px;
+        }
+      }
+    }
+    .Dashboard-title {
+      display: flex;
+      align-items: center;
+      margin: 22px 10px 0;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #f1f1f1;
+      .Dashboard-title-icon.service {
+        width: 28px;
+        height: 28px;
+        margin-right: 13px;
+      }
+      .Dashboard-title-icon.equipment {
+        width: 36px;
+        height: 20px;
+        margin-right: 12px;
+        margin-left: 15px;
+      }
+      .Dashboard-title-text {
+        flex: 1;
+      }
+      .Dashboard-title-top {
+        font-size: 20px;
+        color: #4e83fb;
+      }
+    }
+    .Dashboard-DataCard {
+      flex: 2;
+      &:nth-child(2) {
+        flex: 1.5;
+        margin: 12px 12px 0;
+      }
+    }
+  }
+}
+</style>

src/containers/Dashboard/chartMixin.js

+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      chartGeom: null,
+    };
+  },
+  watch: {
+    data() {
+      this.refreshData();
+    },
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {},
+    updateData() {},
+    refreshData() {
+      if (this.chart) {
+        this.chart.changeData(this.data);
+        this.chart.render();
+        this.updateData();
+      }
+    },
+  },
+};

src/containers/Dashboard/components/ActiveUserByMonth.vue

+<template>
+  <div id='ActiveUserByMonth'></div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'ActiveUserByMonth',
+  mixins: [chartMixin],
+  data() {
+    return {
+      demoData: [{ month: 1, mark: 'monthAppActive', count: 12 }],
+      serviceList: [
+        { value: 'monthAppActive', name: 'APP活跃用户' },
+        { value: 'monthHardActive', name: '硬件活跃用户' },
+        { value: 'allActive', name: '两者兼具' },
+      ],
+    };
+  },
+  methods: {
+    initData() {
+      this.chart = new G2.Chart({
+        container: 'ActiveUserByMonth',
+        forceFit: true,
+        height: 270,
+        padding: [50, 40],
+      });
+      this.chart
+        .source(this.data, {
+          month: {
+            min: 1,
+            max: 12,
+            tickCount: 12,
+          },
+          mark: {
+            formatter: value => {
+              let service = this.serviceList.find(item => item.value === value);
+              return service ? service.name : '';
+            },
+          },
+        })
+        .tooltip({
+          showTitle: false,
+        });
+      // 图例
+      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()
+        .position('month*count')
+        .color('mark', ['#4e82fb', '#ffc934', '#26c9a8']);
+
+      this.chart.render();
+    },
+  },
+};
+</script>

src/containers/Dashboard/components/CampusRank.vue

+<template>
+  <div class="CampusRank">
+    <div id="CampusRank"></div>
+    <div class="CampusRank-title">截至到{{ today }}，前十校区消费汇总数据</div>
+  </div>
+</template>
+
+<script>
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'CampusRank',
+  mixins: [chartMixin],
+  data() {
+    let totle = this.data.reduce((count, item) => count + item.count, 0);
+    return {
+      chart: null,
+      today: this.$formatDate(new Date(), 'yyyy-MM-dd'),
+      totle: totle,
+      percentDom: null,
+      areaNameDom: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      this.chart = new G2.Chart({
+        container: 'CampusRank',
+        forceFit: true,
+        height: 270,
+        padding: [0, 130, 0, 0],
+      });
+      this.chart.source(this.data);
+      this.chart.coord('theta', {
+        radius: 0.9,
+        innerRadius: 0.75,
+      });
+      this.chart.tooltip(false);
+      // 图例
+      this.chart.legend({
+        position: 'right-center',
+        marker: 'square',
+        useHtml: true,
+        itemTpl: (value, color, checked, index) => {
+          const obj = this.data[index];
+          return obj.type === '8'
+            ? `
+              <li
+                class="g2-legend-list-item item-${index} ${checked}"
+                data-value="${value}"
+                data-color=${color}
+                style="cursor: pointer;font-size:14px;"
+              >
+                <i
+                  class="g2-legend-marker"
+                  style="background-color:${color};"
+                ></i>
+                <span>其他校区<br/>汇总数据</span>
+              </li>
+          `
+            : `<li
+                class="g2-legend-list-item item-noshow item-${index} ${checked}"
+                data-value="${value}"
+                data-color=${color}
+              >
+                <i
+                  class="g2-legend-marker"
+                  style="background-color:${color};"
+                ></i>
+                ${value}
+              </li>`;
+        },
+        'g2-legend-list-item': {
+          display: 'flex',
+          // color: '#333',
+        },
+        'g2-legend-marker': {
+          width: '10px',
+          height: '5px',
+          borderRadius: 'none',
+          marginTop: '8px',
+          marginRight: '10px',
+        },
+        'item-noshow': {
+          display: 'none',
+        },
+      });
+      // 坐标系及着色
+      this.chartGeom = this.chart
+        .intervalStack()
+        .position('count')
+        .color('areaName', [
+          '#ff3a34',
+          '#4e82fb',
+          '#fb774e',
+          '#ffc934',
+          '#41bf52',
+          '#9b50ff',
+          '#94de70',
+          '#b5593d',
+          '#fe8787',
+          '#254eae',
+          '#2f4554',
+        ]);
+
+      // 辅助元素
+      this.chart.guide().html({
+        position: ['50%', '50%'],
+        html: `<div style="color:#333;font-size: 20px;text-align: center;width: 4em;">
+            <span class="CampusRank-percent">0.00</span>%<br>
+            <span class="CampusRank-areaName" style="font-size:16px;"></span>
+          </div>`,
+        alignX: 'middle',
+        alignY: 'middle',
+      });
+      this.chart.render();
+      this.chart.on('plotclick', this.clickHandle);
+    },
+    updateData() {
+      if (this.data.length) {
+        this.totle = this.data.reduce((count, item) => count + item.count, 0);
+        this.chartGeom.setSelected(this.data[0]);
+        this.changeSelected(this.data[0]);
+      }
+    },
+    clickHandle(ev) {
+      if (ev.data) {
+        let data = ev.data._origin;
+        this.changeSelected(data);
+      }
+    },
+    changeSelected(data) {
+      this.percentDom = document.querySelector('.CampusRank-percent');
+      this.areaNameDom = document.querySelector('.CampusRank-areaName');
+      if (this.percentDom) {
+        this.percentDom.innerHTML = ((data.count / this.totle) * 100).toFixed(
+          2
+        );
+      }
+      if (this.areaNameDom) {
+        this.areaNameDom.innerHTML = data.areaName;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.CampusRank {
+  .CampusRank-title {
+    font-size: 16px;
+    text-align: center;
+  }
+}
+</style>

src/containers/Dashboard/components/EquipmentList.vue

+<template>
+  <div class="Dashboard-Equipment">
+    <div
+      v-for="(item, index) in data.slice(0, 5)"
+      :key="index"
+      class="Dashboard-Equipment-item"
+    >
+      <div class="Dashboard-Equipment-icon" v-if="index === 0">
+        <img src="@/assets/images/dashboard/icon_no.1@2x.png" />
+      </div>
+      <div class="Dashboard-Equipment-icon" v-else-if="index === 1">
+        <img src="@/assets/images/dashboard/icon_no.2@2x.png" />
+      </div>
+      <div class="Dashboard-Equipment-icon" v-else-if="index === 2">
+        <img src="@/assets/images/dashboard/icon_no.3@2x.png" />
+      </div>
+      <div class="Dashboard-Equipment-icon" v-else>NO.{{ index + 1 }}</div>
+      <div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
+      <div class="Dashboard-Equipment-location">
+        {{ item.equipmentPosition }}
+      </div>
+      <div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EquipmentList',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/styles/variables.scss';
+
+.Dashboard-Equipment {
+  .Dashboard-Equipment-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    color: #333;
+    text-align: center;
+    height: 35px;
+    margin: 0 10px;
+    border-bottom: 1px solid #f1f1f1;
+    &:last-child {
+      border-bottom: 0;
+    }
+    .Dashboard-Equipment-icon {
+      width: 20px;
+      img {
+        width: 16px;
+        height: 20px;
+        margin: 0 auto;
+      }
+    }
+    .Dashboard-Equipment-name {
+      width: 64px;
+    }
+    .Dashboard-Equipment-location {
+      width: 200px;
+    }
+    .Dashboard-Equipment-money {
+      font-size: 16px;
+      text-align: right;
+      width: 116px;
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .Dashboard-Equipment {
+    .Dashboard-Equipment-item {
+      font-size: 16px;
+      height: 70px;
+      margin: 0 20px;
+    }
+    .Dashboard-Equipment-icon {
+      width: 40px;
+      img {
+        width: 32px;
+        height: 40px;
+        margin: 0 auto;
+      }
+    }
+    .Dashboard-Equipment-name {
+      width: 128px;
+    }
+    .Dashboard-Equipment-location {
+      width: 200px;
+    }
+    .Dashboard-Equipment-money {
+      font-size: 20px;
+      width: 116px;
+    }
+  }
+}
+</style>

src/containers/Dashboard/components/RegisterByDay.vue

+<template>
+  <div id='RegisterByDay'></div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'RegisterByDay',
+  mixins: [chartMixin],
+  data() {
+    return {
+      demoData: [{ days: 1, count: 10 }],
+    };
+  },
+  methods: {
+    initData() {
+      this.chart = new G2.Chart({
+        container: 'RegisterByDay',
+        forceFit: true,
+        height: 270,
+        padding: [40, 20, 30, 45],
+      });
+      this.chart
+        .source(this.data, {
+          days: {
+            min: 1,
+            max: 31,
+            type: 'linear',
+            tickCount: 31,
+          },
+          count: {
+            alias: '人数',
+          },
+        })
+        .tooltip({
+          showTitle: false,
+        })
+        .line()
+        .position('days*count');
+      this.chart.area().position('days*count');
+      this.chart.render();
+    },
+  },
+};
+</script>
+

src/containers/Dashboard/components/RegisterByMonth.vue

+<template>
+  <div id="RegisterByMonth"></div>
+</template>
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'RegisterByMonth',
+  mixins: [chartMixin],
+  data() {
+    return {
+      demoData: [{ month: 1, count: 421 }],
+    };
+  },
+  methods: {
+    initData() {
+      this.chart = new G2.Chart({
+        container: 'RegisterByMonth',
+        forceFit: true,
+        height: 270,
+        padding: [0, 20, 30, 20],
+      });
+      this.chart
+        .source(this.data, {
+          month: {
+            min: 1,
+            max: 12,
+            tickCount: 12,
+          },
+          count: {
+            alias: '人数',
+          },
+        })
+        .axis('count', false)
+        .axis('month', {
+          label: {
+            textStyle: {
+              fill: '#333',
+            },
+          },
+        })
+        .tooltip({
+          showTitle: false,
+        })
+        .interval()
+        .position('month*count')
+        .color('#4e82fb');
+      this.chart.render();
+    },
+  },
+};
+</script>

src/containers/Dashboard/components/SeviceRatio.vue

+<template>
+  <div class="SeviceRatio">
+    <div id="SeviceRatio"></div>
+    <div class="SeviceRatio-title">成都师范学院</div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'SeviceRatio',
+  mixins: [chartMixin],
+  data() {
+    let totle = this.data.reduce((count, item) => count + item.count, 0);
+    return {
+      totle: totle,
+      percentDom: null,
+      serviceNameDom: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      this.totle = this.data.reduce((count, item) => count + item.count, 0);
+      this.chart = new G2.Chart({
+        container: 'SeviceRatio',
+        forceFit: true,
+        height: 270,
+        padding: [0, 130, 0, 0],
+      });
+      this.chart.source(this.data);
+      this.chart.coord('theta', {
+        radius: 0.75,
+        innerRadius: 0.6,
+      });
+      this.chart.tooltip(false);
+      // 图例
+      this.chart.legend({
+        position: 'right-center',
+        marker: 'square',
+        useHtml: true,
+        containerTpl: `
+         <div class="g2-legend">
+          <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
+         </div>`,
+        itemTpl: (value, color, checked, index) => {
+          const obj = this.data[index];
+          checked = checked ? 'checked' : 'unChecked';
+          return `
+            <li
+              class="g2-legend-list-item item-${index} ${checked}"
+              data-value="${value}"
+              data-color=${color}
+              style="cursor: pointer;font-size:14px;"
+            >
+              <i
+                class="g2-legend-marker"
+                style="display:inline-block;margin-right:10px;background-color:${color};"
+              ></i>
+              <span class="g2-legend-text">${value}： </span>
+              <span>${obj.count}</span>
+            </li>
+            `;
+        },
+        'g2-legend': {
+          width: '130px',
+          // left: '-20px',
+        },
+        'g2-legend-list-item': {
+          height: '22px',
+          color: '#333',
+        },
+        'g2-legend-marker': {
+          width: '10px',
+          height: '5px',
+          borderRadius: 'none',
+        },
+      });
+      // 坐标系及着色
+      this.chartGeom = this.chart
+        .intervalStack()
+        .position('count')
+        .color('serviceName', ['#4e82fb', '#fb774e', '#ffc934', '#41bf52']);
+
+      // 辅助元素
+      this.chart.guide().html({
+        position: ['50%', '50%'],
+        html: `<div style="color:#333;font-size:20px;text-align: center;">
+            <span class="SeviceRatio-percent">0.00</span>%<br>
+            <span class="SeviceRatio-serviceName" style="font-size:16px;"></span>
+        </div>`,
+        alignX: 'middle',
+        alignY: 'middle',
+      });
+      this.chart.render();
+      this.chart.on('plotclick', this.clickHandle);
+    },
+    updateData() {
+      if (this.data.length) {
+        this.totle = this.data.reduce((count, item) => count + item.count, 0);
+        this.chartGeom.setSelected(this.data[0]);
+        this.changeSelected(this.data[0]);
+      }
+    },
+    clickHandle(ev) {
+      if (ev.data) {
+        let data = ev.data._origin;
+        this.changeSelected(data);
+      }
+    },
+    changeSelected(data) {
+      this.percentDom = document.querySelector('.SeviceRatio-percent');
+      this.serviceNameDom = document.querySelector('.SeviceRatio-serviceName');
+
+      if (this.percentDom) {
+        this.percentDom.innerHTML = ((data.count / this.totle) * 100).toFixed(
+          2
+        );
+      }
+      if (this.serviceNameDom) {
+        this.serviceNameDom.innerHTML = data.serviceName;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.SeviceRatio-title {
+  font-size: 16px;
+  text-align: center;
+}
+</style>

src/containers/Dashboard/store.js

+import Dashboard from './Dashboard';
+
+export default {
+  install(store) {
+    if (!store.state.Dashboard) {
+      store.registerModule(['Dashboard'], Dashboard);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['Dashboard']);
+  },
+};

src/containers/layout/components/IconMenu.vue

+<template>
+  <div class="IconMenus">
+    <div
+      class="TitleData"
+      v-if="dashboardVisiable"
+    >
+      <div class="dataItem">所运营的校区<span class="dataNumber">{{titleData.countArea}}</span></div>
+      <div class="dataItem">累计用户数<span class="dataNumber">{{titleData.countCustomer}}</span></div>
+      <div class="dataItem">活跃用户数<span class="dataNumber">{{titleData.activeCount}}</span></div>
+    </div>
+    <div
+      class="IconMenus-list"
+      v-else
+    >
+      <MenuItem
+        v-if="customerManage && customerManage.length"
+        menuName="会员管理"
+        :menuList="customerManage[0].children"
+      >
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_huiyuanguanli@2x.png"
+      />
+      </MenuItem>
+      <MenuItem menuName="自助运营">
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_zizhuyunying@2x.png"
+      />
+      </MenuItem>
+      <MenuItem
+        v-if="baseManage && baseManage.length"
+        menuName="基础数据"
+        :menuList="baseManage[0].children"
+      >
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_jichu@2x.png"
+      />
+      </MenuItem>
+      <MenuItem menuName="统计系统">
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_tongji@2x.png"
+      />
+      </MenuItem>
+      <MenuItem
+        v-if="systemManage && systemManage.length"
+        menuName="系统管理"
+        :menuList="systemManage[0].children"
+      >
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_xitong@2x.png"
+      />
+      </MenuItem>
+      <MenuItem menuName="全业态">
+      <img
+        slot="icon"
+        src="@/assets/images/layout/icon_quanyetai@2x.png"
+      />
+      </MenuItem>
+
+    </div>
+    <MenuItem
+      :class="`fastLink ${dashboardVisiable?'marleft':''}`"
+      menuName="快速访问"
+    >
+    <img
+      slot="icon"
+      src="@/assets/images/layout/icon_ksfw.png"
+    />
+    </MenuItem>
+    <div
+      class="DashboardButton"
+      @click="clickHandle"
+    >
+      <img
+        v-if="dashboardVisiable"
+        src="@/assets/images/layout/icon_yewu@2x.png"
+      />
+      <img
+        v-else
+        src="@/assets/images/layout/icon_shuju@2x.png"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem';
+import { mapGetters } from 'vuex';
+import { formatRouteLink } from '@/utils/route';
+
+export default {
+  name: 'IconMenus',
+  components: { MenuItem },
+  props: {
+    routers: {
+      type: Array,
+      default: () => [],
+    },
+    dashboardVisiable: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      menuList: [
+        {
+          path: '/OperLog',
+          name: '19',
+          meta: { title: '后台操作日志', icon: '' },
+        },
+        {
+          path: '/interface',
+          name: '27',
+          meta: { title: '接口管理', icon: '' },
+          children: [
+            {
+              path: '/interface/interfaceApp',
+              name: '29',
+              meta: { title: 'APP接口', icon: '' },
+            },
+            {
+              path: '/interface/interfaceManager',
+              name: '30',
+              meta: { title: '后台接口', icon: '' },
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters('Dashboard', ['titleData']),
+    customerManage() {
+      let item = this.routers.find(
+        menu => menu.menuCode === process.env.VUE_APP_CUSTOMER_MENU_CODE
+      );
+      return item ? formatRouteLink([item]) : null;
+    },
+    baseManage() {
+      let item = this.routers.find(
+        menu => menu.menuCode === process.env.VUE_APP_BASE_MENU_CODE
+      );
+      return item ? formatRouteLink([item]) : null;
+    },
+    systemManage() {
+      let item = this.routers.find(
+        menu => menu.menuCode === process.env.VUE_APP_SYSTEM_MENU_CODE
+      );
+      return item ? formatRouteLink([item]) : null;
+    },
+  },
+  methods: {
+    clickHandle() {
+      if (this.dashboardVisiable) {
+        this.$router.go(-1);
+      } else {
+        this.$router.push({
+          path: '/dashboard',
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/styles/variables.scss';
+
+.IconMenus {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  .TitleData {
+    border-left: 2px solid #fff;
+    border-right: 2px solid #fff;
+    display: flex;
+    font-size: 14px;
+    color: #fff;
+    .dataItem {
+      width: 180px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .dataNumber {
+      margin-left: 10px;
+      font-size: 16px;
+    }
+  }
+  .IconMenus-list {
+    height: 100%;
+    display: flex;
+  }
+  .fastLink.marleft {
+    margin-left: 60px;
+  }
+  .DashboardButton {
+    height: 44px;
+    width: 44px;
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .IconMenus {
+    .TitleData {
+      font-size: 20px;
+      .dataItem {
+        width: 280px;
+      }
+      .dataNumber {
+        font-size: 26px;
+      }
+    }
+    .fastLink.marleft {
+      margin-left: 133px;
+    }
+    .DashboardButton {
+      height: 80px;
+      width: 80px;
+    }
+  }
+}
+</style>

src/containers/layout/components/MenuItem.vue

+<template>
+  <div
+    ref="MenuItem"
+    :class="`MenuItem ${showSubMenus?'Selected':''}`"
+    @mouseenter="toggleSubmenus"
+    @mouseleave="toggleSubmenus"
+  >
+    <div class="IconMenus">
+      <div class="IconMenus-icon">
+        <slot name="icon">
+          <img src="@/assets/images/layout/icon_huiyuanguanli@2x.png" />
+        </slot>
+      </div>
+      <div class="IconMenus-name">{{ menuName }}</div>
+    </div>
+    <div
+      :class="`SubmenuBox ${showSubMenus?'show':''}`"
+      :style="style"
+    >
+      <div class="Submenu">
+        <div class="Submenu-title">
+          <span>会员管理</span>
+          <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+        </div>
+        <div class="Submenu-list">
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">会员信息</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">会员反馈</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">密码管理</span>
+          </div>
+        </div>
+      </div>
+      <div class="Submenu">
+        <div class="Submenu-title">会员账务</div>
+        <div class="Submenu-list">
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">会员充值</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">会员退款</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">豆赠送处理</span>
+          </div>
+        </div>
+      </div>
+      <div class="Submenu">
+        <div class="Submenu-title">会员订单</div>
+        <div class="Submenu-list">
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">充值订单</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">失败订单</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">自助消费流水</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">支付消费流水</span>
+          </div>
+          <div class="Submenu-link">
+            <span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
+            <span class="Submenu-link-text">豆赠送流水</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+  props: {
+    menuName: {
+      type: String,
+      default: '',
+    },
+    menuList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showSubMenus: false,
+      style: '',
+    };
+  },
+  mounted() {
+    let dom = this.$refs.MenuItem;
+    let offsetRight = document.body.offsetWidth - dom.offsetLeft;
+    if (offsetRight < 390) {
+      this.style = 'right: 0;';
+    } else if (offsetRight < 560) {
+      this.style = 'right: -280px;';
+    } else {
+      this.style = 'left: 0;';
+    }
+  },
+  methods: {
+    toggleSubmenus() {
+      this.showSubMenus = !this.showSubMenus;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/styles/variables.scss';
+.MenuItem {
+  position: relative;
+  width: 80px;
+  height: 44px;
+  color: #fff;
+  &.Selected,
+  &:hover {
+    background-color: #68aaff;
+  }
+  .IconMenus {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .IconMenus-icon {
+      width: 17px;
+      height: 17px;
+      margin-bottom: 5px;
+    }
+    .IconMenus-name {
+      font-size: 14px;
+    }
+  }
+  .SubmenuBox {
+    background-color: #68aaff;
+    padding: 0 20px;
+    position: absolute;
+    top: 42px;
+    z-index: 5;
+    height: 0;
+    max-height: 0;
+    border-radius: 0 0 8px 8px;
+    transition: all 0.28s ease-in-out;
+    overflow: hidden;
+    &.show {
+      max-height: 500px;
+      height: auto;
+    }
+    .Submenu-title {
+      height: 46px;
+      line-height: 46px;
+      font-size: 18px;
+      color: #78fcf3;
+      .like-icon {
+        margin-left: 10px;
+      }
+    }
+    .Submenu-list {
+      display: flex;
+      flex-flow: wrap;
+      width: 560px;
+      .Submenu-link {
+        display: inline-block;
+        min-width: 140px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 18px;
+        color: #fff;
+      }
+      .like-icon {
+        margin-right: 10px;
+      }
+    }
+    .like-icon {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+    }
+    .like-icon,
+    .Submenu-link-text {
+      cursor: pointer;
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .MenuItem {
+    width: 112px;
+    height: 80px;
+    .IconMenus {
+      .IconMenus-icon {
+        width: 34px;
+        height: 34px;
+        margin-bottom: 10px;
+      }
+      .IconMenus-name {
+        font-size: 18px;
+      }
+    }
+    .SubmenuBox {
+      top: 80px;
+    }
+  }
+}
+</style>

src/containers/layout/components/TimeBox.vue

 <template>
   <div class="timeBox">
     <span class="time">{{ formatDate }}</span>
-    <span>{{ day }}</span>
+    <span class="time">{{ day }}</span>
+    <span>{{ formatTime }}</span>
   </div>
 </template>
 
@@ -16,10 +17,13 @@ export default {
   },
   computed: {
     formatDate() {
-      return this.$formatDate(this.date);
+      return this.$formatDate(this.date, 'yyyy-MM-dd');
     },
     day() {
-      return this.$parseTime(this.date, '周{a}');
+      return this.$parseTime(this.date, '星期{a}');
+    },
+    formatTime() {
+      return this.$formatDate(this.date, 'hh:mm:ss');
     },
   },
   created() {

src/containers/layout/components/Vcode.vue

+<script>
+import { getVcode } from '@/api/user/update';
+
+export default {
+  props: {
+    text: String,
+    cellphone: String,
+  },
+  data() {
+    return {
+      defaultText: this.text ? this.text : '获取验证码',
+      counting: false,
+      count: 60,
+      timer: null,
+      showImgBox: false,
+      vcode: null,
+      inputCode: '',
+    };
+  },
+  methods: {
+    countStart() {
+      this.counting = true;
+      this.countDown();
+    },
+    countDown() {
+      const count = this.count;
+      if (count == 1) {
+        this.counting = false;
+      } else {
+        const timer = setTimeout(() => {
+          this.countDown();
+        }, 1000);
+        this.count = count - 1;
+        this.timer = timer;
+      }
+    },
+    clickHandle() {
+      if (this.cellphone && this.cellphone.length == 11) {
+        getVcode({
+          params: {
+            cellphone: this.cellphone,
+          },
+        })
+          .then(res => {
+            this.countStart();
+            this.$message.success(res.msg || '发送成功');
+            this.vcode = null;
+            this.inputCode = '';
+          })
+          .catch(console.error);
+      } else {
+        this.$message.error('请输入正确的手机号');
+      }
+    },
+  },
+  render(h) {
+    return (
+      <div>
+        {this.counting ? (
+          <div class="Vcode Counting">{`${this.count}S后重发`}</div>
+        ) : (
+          <div class="Vcode" onClick={this.clickHandle}>
+            {this.defaultText}
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss">
+.Vcode.Counting {
+  color: #999;
+}
+</style>

src/permission.js

@@ -5,7 +5,11 @@ import 'nprogress/nprogress.css'; // Progress 进度条样式
 import { getToken } from '@/utils/auth'; // 验权
 import { getAuthRoute } from './utils/route';
 
-const allAasyncRouterMap = [];
+let allAasyncRouterMap = [
+  ...customerManage.default,
+  ...baseManage.default,
+  ...systemManage.default,
+];
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
@@ -13,9 +17,6 @@ const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白
 
 const getRouteAdd = () => {
   let allRoute = store.getters.asyncRoutes;
-  // let item = allRoute.find(
-  //   menu => menu.menuCode === process.env.VUE_APP_MENU_CODE
-  // );
   for (let index = 0; index < allRoute.length; index++) {
     const element = allRoute[index];
     if (element && element.childs) {

src/router/index.js

@@ -19,6 +19,16 @@ const constantRouterMap = [
     meta: { title: '首页', icon: HomeIcon },
     component: { render: h => <router-view /> },
   },
+  {
+    path: '/dashboard',
+    component: _import('Dashboard/Dashboard'),
+    name: 'dashboard',
+    meta: {
+      title: '数据首页',
+      store: require('@/containers/Dashboard/store').default,
+    },
+    hidden: true,
+  },
 ];
 
 const asyncRouterMap = [{ path: '*', redirect: '/404', hidden: true }];

vue.config.js

@@ -12,4 +12,11 @@ let isLib = (() => {
 module.exports = {
   publicPath: process.env.VUE_APP_BASE_URL,
   outputDir: isLib ? Path.join('dist', 'lib') : 'dist',
+  configureWebpack: {
+    externals: [
+      {
+        vue: 'Vue',
+      },
+    ],
+  },
 };