Merge branch 'test' into 'master'

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

@@ -223,7 +223,7 @@ export default {
 .record-List {
   .record-Item {
     display: inline-block;
-    width: 30%;
+    min-width: 100px;
   }
 }
 @media screen and (max-width: $bigScreenWidth) {

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

@@ -30,9 +30,13 @@ export default {
   },
   computed: {
     dashboardArea() {
+      if (this.$store.state.base['dashboardArea' + this.storeIndex]) {
         return this.$store.getters[
           `dashboardArea${this.storeIndex}/dashboardArea`
         ];
+      } else {
+        return [];
+      }
     },
   },
   methods: {

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/config/index.js

@@ -53,6 +53,7 @@ export const operClassifyList = [
   { label: '删除', value: '03' },
   { label: '开启', value: '04' },
   { label: '关闭', value: '05' },
+  { label: '模式修改', value: '06' },
 ];
 //角色操作记录
 export const operClassifyName4role = [
@@ -71,6 +72,7 @@ export const operClassifyName4User = [
   { label: '锁定', value: '03' },
   { label: '解锁', value: '04' },
   { label: '新增', value: '05' },
+ 
 ];
 
 export const serviceMap = [

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

 <template>
-  <div
-    class="Dashboard-Row Dashboard-DataCard Dashboard-Register"
-    v-loading="loading.regist"
-  >
+  <div class="Dashboard-Row Dashboard-DataCard Dashboard-Register">
     <div class="Dashboard-SearchBar">
       <search-item label="年份">
         <el-date-picker
@@ -23,20 +20,34 @@
       </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>
@@ -44,11 +55,14 @@
       </div>
     </div>
     <div class="Dashboard-CampusData">
-      <div class="Dashboard-CampusItem">
-        <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
-        <ActiveUserByMonth :data="activeUser" />
+      <div
+        class="Dashboard-CampusItem"
+        v-loading="loading.regist"
+      >
+        <div class="Dashboard-title">
+          {{ reportYear }}年每月活跃数据
         </div>
-      <div class="Dashboard-CampusItem">
+        <ActiveUserByMonth :data="activeUser" />
       </div>
     </div>
   </div>
@@ -72,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: {
@@ -89,7 +101,14 @@ export default {
       'loading',
       'reportMounted',
       'filters',
+      'registeTotal',
+      'activeTotal',
     ]),
+    registeYearTotal() {
+      return this.registePerMonth.reduce((pre, curItem) => {
+        return pre + curItem.count;
+      }, 0);
+    },
   },
   mounted() {
     if (!this.reportMounted) {
@@ -122,20 +141,15 @@ export default {
     },
     changeReportMonthHandle(month) {
       console.log(month);
-      let filters = getFilters(this.filters);
       this.fetchReportList({
         isAdmin: this.isAdmin ? 1 : 0,
-        year: filters.reportYear ? filters.reportYear : null,
-        areaId: filters.reportAreaId ? filters.reportAreaId : null,
         month: month,
+        updateRegisteByDay: true,
       });
     },
     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,
       });
     },
   },
@@ -143,9 +157,26 @@ 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;
@@ -155,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 {
@@ -168,6 +207,7 @@ export default {
   .Dashboard-CampusData {
     display: flex;
     padding: 0 15px;
+    margin-bottom: 16px;
     .Dashboard-title {
       position: relative;
     }

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

@@ -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

@@ -30,6 +30,12 @@ export default {
         .source(this.data, {
           count: {
             alias: '人数',
+            formatter: val => {
+              if (/\./.test(val)) {
+                return '';
+              }
+              return val;
+            },
           },
         })
         .axis('month', {
@@ -44,7 +50,11 @@ export default {
         })
         .interval()
         .position('month*count')
-        .color('#4e82fb');
+        .color('#4e82fb')
+        .label('count', {
+          // position: 'middle',
+          offset: 10,
+        });
       this.chart.render();
       this.chart.on('plotclick', this.clickHandle);
     },

src/containers/Dashboard/Dashboard.js

@@ -21,12 +21,13 @@ 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: '',
+  reportYear: new Date().getFullYear().toString(),
   reportAreaId: undefined,
 });
 const filtersStore = initFiltersStore(initFilters);
@@ -38,6 +39,7 @@ const state = () => ({
     service: false,
     equipment: false,
     regist: false,
+    registByDay: false,
   },
   consume: {
     areaInfo: {
@@ -59,6 +61,8 @@ const state = () => ({
     registePerDay: [],
     registePerMonth: [],
     activeUser: [],
+    customerCount: 0,
+    activeCount: 0,
   },
   title: {
     activeCount: 0,
@@ -73,6 +77,8 @@ const getters = {
   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,
@@ -154,8 +160,19 @@ const actions = {
         commit(LOADING_AREA, false);
       });
   },
-  fetchReportList({ commit }, entity) {
+  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,
@@ -164,11 +181,19 @@ const actions = {
       .then(res => {
         let list = res.data;
         commit(GET_REPORT_DATA, list);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
           commit(LOADING_REGIST, false);
+        }
       })
       .catch(err => {
         console.error(err);
+        if (entity && entity.updateRegisteByDay) {
+          commit(LOADING_REGIST_BY_DAY, false);
+        } else {
           commit(LOADING_REGIST, false);
+        }
       });
   },
   fetchTitleList({ commit }) {
@@ -212,6 +237,9 @@ 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;
 
@@ -286,6 +314,9 @@ const mutations = {
     }
     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': {

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

@@ -42,7 +42,8 @@ export default {
 
 <style lang="scss">
 .Home-Dashboard.Dashboard {
-  padding: 22px 34px 0;
-  overflow-y: hidden;
+  padding: 22px 34px;
+  height: 100%;
+  overflow-y: scroll;
 }
 </style>

src/lib/mixins.js

@@ -12,6 +12,8 @@ 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 OperatorArea from '../components/input/AreaDashboard/mixin';
 import SearchBar from '../mixins/searchBar';
 
 export default {
@@ -29,9 +31,11 @@ export default {
   },
   Input: {
     Area,
+    OperatorArea,
     BaseData,
     BeanType,
     OperatorOptions,
     ServiceType,
+    AreaService,
   },
 };

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;