Merge branch 'develop' of http://git.168cad.top/jianglei/dcxy-manage-shell into develop

package.json

@@ -34,7 +34,7 @@
     "nprogress": "^0.2.0",
     "popmotion": "^8.1.22",
     "qiniu-js": "^2.2.0",
-    "rym-element-ui": "^0.1.56",
+    "rym-element-ui": "^0.1.61",
     "vue-qr": "^1.2.8",
     "vuedraggable": "^2.16.0",
     "wangeditor": "^3.1.1"

src/App.vue

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

src/api/base/index.js

@@ -35,6 +35,13 @@ export const fetchServiceList = req =>
     method: 'get',
     ...req,
   });
+// 根据区域获取服务
+export const fetchAreaService = req =>
+  fetch({
+    url: path + '/dcxy/api/base/service/together/relation',
+    method: 'get',
+    ...req,
+  });
 // 获取运营商
 export const fetchOperatorList = req =>
   fetch({

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/components/input/AreaSelect/AreaSelect.vue

@@ -31,11 +31,6 @@ export default {
     },
   },
   mixins: [areaMixin],
-  computed: {
-    areaList() {
-      return this[`areaList${this.accessType}`];
-    },
-  },
   methods: {
     changeHandle(val) {
       if (val) {

src/components/input/AreaSelect/mixin.js

@@ -28,6 +28,9 @@ export default {
   },
   computed: {
     ...mapGetters('area', getterList),
+    areaList() {
+      return this[`areaList${this.accessType}`];
+    },
   },
   methods: {
     ...mapActions('area', actionsList),

src/components/input/AreaServiceSelect/AreaServiceSelect.vue

+<template>
+  <el-select
+    :clearable="clearable"
+    :disabled="disabled"
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in areaServiceList"
+      :disabled="disabledValue(item.serviceId)"
+      :key="index"
+      :value="item.serviceId"
+      :label="item.serviceName"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import areaServiceMixin from './mixin.js';
+
+export default {
+  name: 'area-service-select',
+  props: {
+    value: {
+      type: Number,
+      default: null,
+    },
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    filterList: {
+      type: Array,
+    },
+  },
+  mixins: [areaServiceMixin],
+  methods: {
+    changeHandle(val) {
+      if (val || val === 0) {
+        this.$emit('input', val);
+      } else {
+        this.$emit('input', null);
+      }
+    },
+    disabledValue(val) {
+      if (this.filterList && this.filterList.length) {
+        return this.filterList.indexOf(val) > -1;
+      }
+      return false;
+    },
+  },
+};
+</script>
+

src/components/input/AreaServiceSelect/areaServiceStore.js

+import { fetchAreaService } from '@/api/base/index';
+
+const AREA_SERVICE_LIST = 'AREA_SERVICE_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+const UPDATE_FILTER_ID = 'UPDATE_FILTER_ID';
+
+const state = () => ({
+  list: [],
+  filterId: undefined,
+  fetching: false,
+});
+
+const getters = {
+  areaServiceList: state =>
+    state.list.filter(item =>
+      state.filterId
+        ? item.areaId === state.filterId &&
+          item.serviceId !== 0 &&
+          item.serviceId !== 1
+        : true
+    ),
+};
+
+const actions = {
+  fetchAreaServiceList({ state, commit }, entity) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchAreaService({
+      params: entity,
+    })
+      .then(res => {
+        const { data } = res;
+        commit(AREA_SERVICE_LIST, data);
+        commit(FETCH_STATE, false);
+      })
+      .catch(err => {
+        commit(FETCH_STATE, false);
+      });
+  },
+  updateFilterId({ commit }, id) {
+    commit(UPDATE_FILTER_ID, id);
+  },
+};
+
+const mutations = {
+  [AREA_SERVICE_LIST](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, value) {
+    state.fetching = value;
+  },
+  [UPDATE_FILTER_ID](state, id) {
+    state.filterId = id;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/AreaServiceSelect/index.js

+import AreaServiceSelect from './AreaServiceSelect.vue';
+import areaServiceMixin from './mixin';
+
+export { areaServiceMixin };
+export default AreaServiceSelect;

src/components/input/AreaServiceSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  props: {
+    // 所属区域
+    areaId: {
+      type: Number,
+      default: null,
+    },
+  },
+  created() {
+    store.install(this.$store);
+    if (!this.areaServiceList.length) {
+      this.fetchAreaServiceList({
+        areaId: this.areaId,
+      });
+    }
+    if (this.areaId) {
+      this.updateFilterId(this.areaId);
+    }
+  },
+  computed: {
+    ...mapGetters('areaServiceOption', ['areaServiceList']),
+  },
+  watch: {
+    areaId(val) {
+      this.updateFilterId(val);
+    },
+  },
+  methods: {
+    ...mapActions('areaServiceOption', [
+      'fetchAreaServiceList',
+      'updateFilterId',
+    ]),
+    getServiceName(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? item.serviceName : '';
+    },
+    getServiceInfo() {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item
+        ? { serviceId: item.serviceId, serviceName: item.serviceName }
+        : null;
+    },
+    getOperatorInfo(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item
+        ? { operateId: item.operateId, operateName: item.operateName }
+        : null;
+    },
+    getAreaInfo() {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? { areaId: item.areaId, areaName: item.areaName } : null;
+    },
+    getAllItemInfo(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? item : null;
+    },
+  },
+};

src/components/input/AreaServiceSelect/store.js

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

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"
-    v-loading="loading.regist"
-  >
+  <div class="Dashboard-Row Dashboard-DataCard Dashboard-Register">
     <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,28 +13,55 @@
       </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
+          :loading="loading.regist"
+          @click="searchList"
+          type="primary"
+        >搜索</el-button>
+      </search-item>
+    </div>
+    <div class="more-info">
+      {{ reportYear }}年注册人数为：{{ registeYearTotal }}人；平台注册会员总数: {{ registeTotal }}人；平台活跃会员总数：{{ activeTotal }}人
     </div>
     <div class="Dashboard-CampusData">
-      <div class="Dashboard-CampusItem">
-        <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist"
+      >
+        <div class="Dashboard-title">
+          {{ reportYear }}年每月注册数据
+        </div>
         <RegisterByMonth
           :data="registePerMonth"
           :changeReportMonthHandle="changeReportMonthHandle"
         />
       </div>
-      <div class="Dashboard-CampusItem">
+    </div>
+    <div class="Dashboard-CampusData">
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist || loading.registByDay"
+      >
         <div class="Dashboard-title">
           {{ reportYear }}年{{ reportMonth }}月注册数据
         </div>
         <RegisterByDay :data="registePerDay" />
       </div>
-      <div class="Dashboard-CampusItem">
-        <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
+    </div>
+    <div class="Dashboard-CampusData">
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist"
+      >
+        <div class="Dashboard-title">
+          {{ reportYear }}年每月活跃数据
+        </div>
         <ActiveUserByMonth :data="activeUser" />
       </div>
     </div>
@@ -49,6 +73,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',
@@ -61,11 +86,9 @@ export default {
     isAdmin: Boolean,
   },
   data() {
+    let today = this.$formatDate(new Date(), 'yyyy-MM-dd');
     return {
-      campusFilters: {
-        year: '',
-        areaId: undefined,
-      },
+      today: today,
     };
   },
   computed: {
@@ -76,10 +99,26 @@ export default {
       'registePerMonth',
       'activeUser',
       'loading',
+      'reportMounted',
+      'filters',
+      'registeTotal',
+      'activeTotal',
     ]),
+    registeYearTotal() {
+      return this.registePerMonth.reduce((pre, curItem) => {
+        return pre + curItem.count;
+      }, 0);
+    },
+  },
+  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,13 +141,15 @@ export default {
     },
     changeReportMonthHandle(month) {
       console.log(month);
-      let year = this.campusFilters.year;
-      let areaId = this.campusFilters.areaId;
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: year ? year : null,
-        areaId: areaId ? areaId : null,
         month: month,
+        updateRegisteByDay: true,
+      });
+    },
+    searchList() {
+      this.fetchReportList({
+        isAdmin: this.isAdmin ? 1 : 0,
       });
     },
   },
@@ -116,7 +157,27 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/variables.scss';
 .Dashboard {
+  .Dashboard-Row.Dashboard-Register {
+    height: auto;
+    .Dashboard-SearchBar {
+      .filter-item-label {
+        min-width: auto;
+        width: auto;
+      }
+    }
+  }
+  .Dashboard-title {
+    font-size: 20px;
+    color: #333;
+    font-weight: 700;
+  }
+  @media screen and (max-width: $bigScreenWidth) {
+    .Dashboard-title {
+      font-size: 14px;
+    }
+  }
   .Dashboard-DataCard {
     background-color: #fff;
     border-radius: 8px;
@@ -125,9 +186,17 @@ export default {
       margin-right: 0;
     }
   }
+  .more-info {
+    margin: 15px;
+    font-weight: normal;
+    color: #f70707;
+  }
   .Dashboard-SearchBar {
     display: flex;
     padding: 10px 0 20px;
+    .filter-item {
+      margin: 0 0 0 34px;
+    }
     .filter-item-input {
       width: 200px;
       .el-input {
@@ -138,6 +207,7 @@ export default {
   .Dashboard-CampusData {
     display: flex;
     padding: 0 15px;
+    margin-bottom: 16px;
     .Dashboard-title {
       position: relative;
     }

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, {
@@ -32,6 +32,12 @@ export default {
           },
           count: {
             alias: '人数',
+            formatter: val => {
+              if (/\./.test(val)) {
+                return '';
+              }
+              return val;
+            },
           },
         })
         .tooltip({
@@ -39,7 +45,7 @@ export default {
         })
         .line()
         .position('days*count');
-      this.chart.area().position('days*count');
+      this.chart.line().position('days*count');
       this.chart.render();
     },
   },

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

@@ -24,20 +24,20 @@ 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: '人数',
+            formatter: val => {
+              if (/\./.test(val)) {
+                return '';
+              }
+              return val;
+            },
           },
         })
-        .axis('count', false)
         .axis('month', {
           label: {
             textStyle: {
@@ -50,13 +50,20 @@ export default {
         })
         .interval()
         .position('month*count')
-        .color('#4e82fb');
+        .color('#4e82fb')
+        .label('count', {
+          // position: 'middle',
+          offset: 10,
+        });
       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

@@ -21,11 +21,14 @@ const LOADING_AREA = 'LOADING_AREA';
 const LOADING_SERVICE = 'LOADING_SERVICE';
 const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT';
 const LOADING_REGIST = 'LOADING_REGIST';
+const LOADING_REGIST_BY_DAY = 'LOADING_REGIST_BY_DAY';
 
 const initFilters = () => ({
   operateId: undefined,
   choiceareaIds: [],
   timeType: 0, // 0 本日，1 本月， 2 本年
+  reportYear: new Date().getFullYear().toString(),
+  reportAreaId: undefined,
 });
 const filtersStore = initFiltersStore(initFilters);
 const nowTime = new Date();
@@ -36,6 +39,7 @@ const state = () => ({
     service: false,
     equipment: false,
     regist: false,
+    registByDay: false,
   },
   consume: {
     areaInfo: {
@@ -51,11 +55,14 @@ const state = () => ({
     percentList: [],
   },
   report: {
+    mounted: false,
     year: new Date().getFullYear(),
     month: new Date().getMonth() + 1,
     registePerDay: [],
     registePerMonth: [],
     activeUser: [],
+    customerCount: 0,
+    activeCount: 0,
   },
   title: {
     activeCount: 0,
@@ -65,10 +72,13 @@ const state = () => ({
 });
 
 const getters = {
+  reportMounted: state => state.report.mounted,
   reportYear: state => state.report.year,
   reportMonth: state => state.report.month,
   registePerDay: state => state.report.registePerDay,
   registePerMonth: state => state.report.registePerMonth,
+  registeTotal: state => state.report.customerCount,
+  activeTotal: state => state.report.activeCount,
   activeUser: state => state.report.activeUser,
   titleData: state => state.title,
   areaInfo: state => state.consume.areaInfo,
@@ -150,8 +160,19 @@ const actions = {
         commit(LOADING_AREA, false);
       });
   },
-  fetchReportList({ commit }, entity) {
-    commit(LOADING_REGIST, true);
+  fetchReportList({ commit, getters }, entity) {
+    let filters = getFilters(getters.filters);
+    if (filters.reportYear) {
+      entity.year = filters.reportYear;
+    }
+    if (filters.reportAreaId) {
+      entity.areaId = filters.reportAreaId;
+    }
+    if (entity && entity.updateRegisteByDay) {
+      commit(LOADING_REGIST_BY_DAY, true);
+    } else {
+      commit(LOADING_REGIST, true);
+    }
     return fetchReportList({
       params: {
         ...entity,
@@ -160,11 +181,19 @@ const actions = {
       .then(res => {
         let list = res.data;
         commit(GET_REPORT_DATA, list);
-        commit(LOADING_REGIST, false);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
+          commit(LOADING_REGIST, false);
+        }
       })
       .catch(err => {
         console.error(err);
-        commit(LOADING_REGIST, false);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
+          commit(LOADING_REGIST, false);
+        }
       });
   },
   fetchTitleList({ commit }) {
@@ -208,8 +237,12 @@ const mutations = {
       : [];
   },
   [GET_REPORT_DATA]: (state, data) => {
+    state.report.customerCount = data.customerCount ? data.customerCount : 0;
+    state.report.activeCount = data.activeCount ? data.activeCount : 0;
+
     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 +250,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,8 +309,14 @@ const mutations = {
     state.loading.equipment = fetching;
   },
   [LOADING_REGIST](state, fetching) {
+    if (fetching) {
+      state.report.mounted = true;
+    }
     state.loading.regist = fetching;
   },
+  [LOADING_REGIST_BY_DAY](state, fetching) {
+    state.loading.registByDay = fetching;
+  },
 };
 
 export default {

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -76,6 +76,7 @@ export default {
         'g2-legend': {
           width: '215px',
           'max-width': '215px',
+          'max-height': this.height - 30 + 'px',
           // left: '-20px',
         },
         'g2-legend-list-item': {
@@ -168,6 +169,7 @@ export default {
         this.SelectedDataIndex = data;
         this.chartGeom.setSelected(data);
         this.changeSelected(data);
+        this.changeServiceHandle(data);
       }
     },
     changeSelected(data) {

src/containers/HomePage/Demo.vue

@@ -5,17 +5,32 @@
         <operator-select
           :accessType="1"
           :value="filters.operateId"
-          @input="val => updateFilters({operateId: val,areaId:[]})"
+          @input="val => updateFilters({operateId: val,areaIdArr:[]})"
         />
       </search-item>
-      <search-item label="区域">
+      <!-- <search-item label="区域">
         <dashboard-area-select
           :operateId="filters.operateId"
-          :value="filters.areaId"
+          :value="filters.areaIdArr"
           multiple
+          @input="val => updateFilters({areaIdArr: val})"
+        />
+      </search-item> -->
+      <search-item label="区域">
+        <area-select
+          :value="filters.areaId"
           @input="val => updateFilters({areaId: val})"
         />
       </search-item>
+
+      <search-item label="服务">
+        <area-service-select
+          :areaId="filters.areaId"
+          :filterList="[3]"
+          :value="filters.service"
+          @input="val => updateFilters({service: val})"
+        />
+      </search-item>
     </template>
   </list-layout>
 </template>
@@ -26,7 +41,9 @@ export default {
     return {
       filters: {
         operateId: undefined,
-        areaId: [],
+        areaIdArr: [],
+        areaId: undefined,
+        service: undefined,
       },
     };
   },

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,21 +34,16 @@ 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>
 
 <style lang="scss">
 .Home-Dashboard.Dashboard {
-  padding: 22px 34px 0;
-  overflow-y: hidden;
+  padding: 22px 34px;
+  height: 100%;
+  overflow-y: scroll;
 }
 </style>

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/mixins.js

@@ -12,6 +12,7 @@ import BaseData from '../components/input/BaseDataSelect/mixin';
 import BeanType from '../components/input/BeanTypeSelect/mixin';
 import OperatorOptions from '../components/input/OperatorSelect/mixin';
 import ServiceType from '../components/input/ServiceTypeSelect/mixin';
+import AreaService from '../components/input/AreaServiceSelect/mixin';
 import SearchBar from '../mixins/searchBar';
 
 export default {
@@ -33,5 +34,6 @@ export default {
     BeanType,
     OperatorOptions,
     ServiceType,
+    AreaService,
   },
 };

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();
+        });
       }
     }
   });

src/utils/extends.js

@@ -23,6 +23,7 @@ import BaseDataSelect from '../components/input/BaseDataSelect/index';
 import OperatorSelect from '../components/input/OperatorSelect/index';
 import BeansSelect from '../components/input/BeanTypeSelect/index';
 import ImageUploader from '../components/input/ImageUploader/index';
+import AreaServiceSelect from '../components/input/AreaServiceSelect/index';
 
 const extendVue = Vue => {
   Vue.use(rymUi);
@@ -48,6 +49,7 @@ const extendVue = Vue => {
   Vue.component(OperatorSelect.name, OperatorSelect);
   Vue.component(BeansSelect.name, BeansSelect);
   Vue.component(ImageUploader.name, ImageUploader);
+  Vue.component(AreaServiceSelect.name, AreaServiceSelect);
 };
 
 export default extendVue;