Merge branch 'develop' into 'test'

src/App.vue

@@ -73,7 +73,7 @@ export default {
       title: '',
       selectedRoute: [],
       routerDone: false,
-      isInnerPage: true,
+      isInnerPage: false,
       showFastLink: true,
       showSelected: false,
     };

src/api/base/customer.js

@@ -12,3 +12,8 @@ export const fetchUserBaseInfoByPhone = entity =>
     url: path + '/dcxy/customerInfo/baseCustomer',
     params: entity,
   });
+export const fetchUserAccount = entity =>
+  fetch({
+    url: path + '/dcxy/customerInfo/queryAccount',
+    params: entity,
+  });

src/components/UserCard/UserInfo.vue

@@ -61,6 +61,19 @@
       </div>
       <div class="UserInfo-Content-Col">注册时间：{{$formatDate(customerBaseInfo.createAt,'yyyy-MM-dd')}}</div>
       <div class="UserInfo-Content-Col UserInfo-CampusName">{{customerBaseInfo.areaName}}</div>
+      <div
+        class="UserInfo-Content-serviceBox"
+        v-if="showMoney"
+      >
+        <div
+          v-for="(item, index) in serviceList"
+          :key="index"
+          class="UserInfo-Content-serviceBox-item"
+        >
+          <div>{{getServiceName(item.serviceId)}}</div>
+          <div>{{item.money}}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -71,10 +84,6 @@ import UserBaseInfoMixin from '../../mixins/user/userBaseInfo.js';
 import getUserInfoLabelMixin from '@/mixins/user/getUserInfoLabel.js';
 
 export default {
-  props: {
-    customerId: Number,
-    customerPhone: String,
-  },
   mixins: [UserBaseInfoMixin, getUserInfoLabelMixin],
 };
 </script>
@@ -132,7 +141,7 @@ export default {
     }
   }
   .UserInfo-Content {
-    height: 90px;
+    // height: 90px;
     background-color: #fff;
     padding: 10px;
     .UserInfo-Content-Col {
@@ -156,6 +165,13 @@ export default {
       line-height: 1;
       margin-top: 0px;
     }
+    .UserInfo-Content-serviceBox {
+      line-height: 24px;
+      .UserInfo-Content-serviceBox-item {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
   }
 }
 @media screen and (min-width: $bigScreenWidth) {
@@ -187,7 +203,7 @@ export default {
       }
     }
     .UserInfo-Content {
-      height: 180px;
+      // height: 180px;
       padding: 20px;
       .UserInfo-Content-Col {
         line-height: 38px;

src/components/UserCard/UserWithContent.vue

@@ -5,6 +5,7 @@
         class="left-part"
         :customerId="customerId"
         :customerPhone="customerPhone"
+        :showMoney="showMoney"
         :visible="visible"
       />
       <div class="right-part">
@@ -39,6 +40,10 @@ export default {
       default: true,
     },
     customerPhone: String,
+    showMoney: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

src/components/input/AreaDashboard/AreaSelect.vue

@@ -6,7 +6,7 @@
     @change="changeHandle"
     :multiple="multiple"
   >
-    <el-option :value="-1">全选</el-option>
+    <slot></slot>
     <el-option
       v-for="(item, index) in dashboardArea"
       :key="index"

src/config/index.js

@@ -72,6 +72,15 @@ export const operClassifyName4User = [
   { label: '新增', value: '05' },
 ];
 
+export const serviceMap = [
+  { label: '艾米', value: '0' },
+  { label: '通用', value: '1' },
+  { label: '洗衣', value: '2' },
+  { label: '饮水', value: '3' },
+  { label: '吹风', value: '4' },
+  { label: '洗浴', value: '5' },
+];
+
 export default {
   selectTypeMapping,
   customerStateOptions,

src/containers/Dashboard/CampusRank/CampusRank.vue

@@ -17,7 +17,9 @@
           :value="filters.choiceareaIds"
           multiple
           @input="val => updateFilters({choiceareaIds: val})"
-        />
+        >
+          <el-option :value="-1">全选</el-option>
+        </dashboard-area-select>
       </search-item>
       <el-radio-group
         class="Dashboard-Radio"
@@ -43,7 +45,7 @@
       >搜索</el-button>
     </div>
     <CampusRankChart
-      :data="campusRankList"
+      :data="campusRankListFillAreaname"
       :changeCampusHandle="changeCampusHandle"
       :updateCampusName="updateCampusName"
       :showOtherNameHandle="showOtherNameHandle"
@@ -55,10 +57,12 @@
 <script>
 import CampusRankChart from './CampusRankChart';
 import { mapGetters, mapActions } from 'vuex';
+import AreaDashboardMixin from '../../../components/input/AreaDashboard/mixin';
 
 export default {
   name: 'CampusRank',
   components: { CampusRankChart },
+  mixins: [AreaDashboardMixin],
   computed: {
     ...mapGetters('Dashboard', [
       'campusRankList',
@@ -66,6 +70,19 @@ export default {
       'areaInfo',
       'loading',
     ]),
+    campusRankListFillAreaname() {
+      return this.campusRankList.map(item => {
+        if (item.areaName) {
+          return item;
+        } else {
+          let areaName = this.getAreaName(item.areaId);
+          return {
+            ...item,
+            areaName: areaName,
+          };
+        }
+      });
+    },
   },
   data() {
     return { showOther: false };

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -4,13 +4,13 @@
       id='CustomerRechargeChart'
       :style="`height: ${height}px;width: ${width?width+'px':'auto'}`"
     ></div>
-    <!-- <div id='CustomerRechangeSlider'></div> -->
-    <CustomerRechangeSlider
+    <div id='CustomerRechangeSlider'></div>
+    <!-- <CustomerRechangeSlider
       class="CustomerRechangeSlider"
       :data="data"
       :span="4"
       :onChange="wheelHandle"
-    />
+    /> -->
   </div>
 </template>
 
@@ -20,7 +20,7 @@ import Slider from '@antv/g2-plugin-slider';
 import chartMixin from '../chartMixin';
 import DataSet from '@antv/data-set';
 import _ from 'lodash';
-import CustomerRechangeSlider from './slider';
+// import CustomerRechangeSlider from './slider';
 
 const Shape = G2.Shape;
 const Util = G2.Util;
@@ -75,7 +75,7 @@ Shape.registerShape('interval', 'right', {
 
 export default {
   name: 'CustomerRechargeChart',
-  components: { CustomerRechangeSlider },
+  // components: { CustomerRechangeSlider },
   mixins: [chartMixin],
   props: {
     rechargeCount: {
@@ -101,32 +101,36 @@ export default {
       SelectedDataIndex: null,
     };
   },
+  computed: {
+    dataList() {
+      return this.data.map((item, index) => ({ ...item, index: index }));
+    },
+  },
   methods: {
     initData() {
       this.ds = new DataSet({
         state: {
-          startRadio: 0,
-          endRadio: 0.2,
+          start: 0,
+          end: 3,
         },
       });
-      const dv = this.ds.createView().source(this.data);
+      const dv = this.ds.createView().source(this.dataList);
       this.dv = dv;
+      // dv.transform({
+      //   type: 'map',
+      //   callback(row, index) {
+      //     // 加工数据后返回新的一行，默认返回行数据本身
+      //     row.index = index;
+      //     return row;
+      //   },
+      // });
       dv.transform({
         type: 'filter',
         callback: obj => {
-          if (
-            _.isNil(this.ds.state.startRadio) ||
-            _.isNil(this.ds.state.endRadio)
-          ) {
-            return true;
-          }
-          const dataIndex = _.findIndex(this.data, {
-            areaName: obj.areaName,
-          });
-          const currentRadio = dataIndex / this.data.length;
+          const currentRadio = obj.index;
           return (
-            currentRadio >= this.ds.state.startRadio &&
-            currentRadio <= this.ds.state.endRadio
+            currentRadio >= this.ds.state.start &&
+            currentRadio <= this.ds.state.end
           );
         },
       });
@@ -146,14 +150,11 @@ export default {
           alias: '充值人数',
         },
       });
-      // this.chart.tooltip({
-      //   offset: 250,
-      // });
 
       this.chart.axis('areaName', {
         label: {
           offsetX: -80,
-          htmlTemplate(text, item, index) {
+          htmlTemplate: (text, item, index) => {
             return `<div class="CustomerRechargeChart-areaTitle">${text}</div>`;
           },
         },
@@ -168,13 +169,13 @@ export default {
         .position('areaName*rechargeMoney')
         .color('#4e82fb')
         .shape('left')
-        .size(18);
+        .size(15);
       this.chart
         .interval()
         .position('areaName*rechargeMen')
         .shape('right')
         .color('#26c9a8')
-        .size(18);
+        .size(15);
 
       this.chart.legend(false);
 
@@ -196,27 +197,29 @@ export default {
 
       this.chart.render();
 
-      // this.initSlider();
+      this.initSlider();
     },
     initSlider() {
       const wrapDom = document.getElementById('CustomerRechargeChart');
-      let height = wrapDom.clientHeight;
+      // let height = wrapDom.clientHeight;
 
       // const arrLength = this.data.length;
       // let spanNum = 4 / arrLength;
       this.sliderDom = document.getElementById('CustomerRechangeSlider');
+      this.sliderDom.style = `height:${this.height}px`;
 
-      this.sliderDom.style = `height:${height}px`;
       this.slider = new Slider({
         container: this.sliderDom, // dom 容器 id 或者 dom 容器对象
         width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度
-        height: height, // slider 的高度，默认为 '26px'
-        padding: [50, 0, 50, 0],
+        height: this.height, // slider 的高度，默认为 '26px'
+        padding: [20, 0, 20, 0],
         xAxis: 'rechargeMen', // 背景图的横轴对应字段，同时为数据筛选的字段
-        yAxis: 'areaName', // 背景图的纵轴对应字段
-        startRadio: this.ds.state.startRadio, // 新增
-        endRadio: this.ds.state.endRadio, // 新增
-        data: this.data, // slider 的数据源
+        yAxis: 'index', // 背景图的纵轴对应字段
+        start: 0,
+        end: 3,
+        minSpan: 4,
+        maxSpan: 4,
+        data: this.dataList, // slider 的数据源
         textStyle: {
           display: 'none',
         },
@@ -225,44 +228,51 @@ export default {
           width: 26,
           height: 5,
         },
-        onChange: ({ startRadio, endRadio }) => {
-          this.ds.setState('startRadio', startRadio);
-          this.ds.setState('endRadio', endRadio);
+        onChange: ({ startValue, endValue }) => {
+          this.ds.setState('start', startValue);
+          this.ds.setState('end', endValue);
         }, // 更新数据状态量的回调函数
       });
       this.slider.layout = 'vertical';
       this.slider.render(); // 渲染
     },
     updateSlider() {
-      const wrapDom = document.getElementById('CustomerRechargeChart');
-      let height = wrapDom.clientHeight;
+      this.sliderDom.innerHTML = '';
 
-      let dom = this.sliderDom;
-      dom.innerHTML = '';
       const arrLength = this.data.length;
+      console.log('2222', this.data.length - 1);
 
       if (arrLength) {
         // let spanNum = 4 / arrLength;
         this.slider = new Slider({
           container: this.sliderDom,
           width: 26,
-          height: height,
-          padding: [50, 0, 50, 0],
-          xAxis: 'value',
-          yAxis: 'areaName',
-          startRadio: this.ds.state.startRadio,
-          endRadio: this.ds.state.endRadio,
-          data: this.data,
-          // minSpan: this.ds.state.endRadio,
-          // maxSpan: this.ds.state.endRadio,
+          height: this.height,
+          padding: [20, 0, 20, 0],
+          xAxis: 'rechargeMen',
+          yAxis: 'index',
+          scales: {
+            index: {
+              formatter: val => {
+                return parseInt(val, 10);
+              },
+            },
+          },
+          start: this.data.length - 4,
+          end: this.data.length - -1,
+          minSpan: 4,
+          maxSpan: 4,
+          data: this.dataList,
+
           handleStyle: {
             img: require('@/assets/images/dashboard/QXtfhORGlDuRvLXFzpsQ.png'),
             width: 26,
             height: 5,
           },
-          onChange: ({ startRadio, endRadio }) => {
-            this.ds.setState('startRadio', startRadio);
-            this.ds.setState('endRadio', endRadio);
+          onChange: ({ startValue, endValue }) => {
+            // console.log('update:', startValue, endValue);
+            this.ds.setState('start', startValue);
+            this.ds.setState('end', endValue);
           },
         });
         this.slider.layout = 'vertical';
@@ -274,16 +284,16 @@ export default {
         const arrLength = this.data.length;
         let spanNum = 4 / arrLength;
 
-        this.ds.setState('startRadio', Math.abs(1 - spanNum));
-        this.ds.setState('endRadio', 1);
-        this.dv.source(this.data);
+        this.ds.setState('start', this.data.length - 4);
+        this.ds.setState('end', this.data.length - 1);
+        this.dv.source(this.dataList);
         // let height = this.data.length * 50;
         // this.chart.changeHeight(height);
-        // this.updateSlider();
+        this.updateSlider();
         this.updateData();
       } else {
         this.initData();
-        // this.initSlider();
+        this.initSlider();
       }
     },
     wheelHandle({ startRadio, endRadio }) {

src/mixins/user/userBaseInfo.js

 import { mapActions, mapGetters } from 'vuex';
+import { fetchUserAccount } from '../../api/base/customer';
+import { serviceMap } from '@/config';
 
 export default {
   props: {
     visible: { type: Boolean, default: false },
     customerId: Number,
     customerPhone: String,
+    showMoney: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      serviceList: [],
+    };
   },
   watch: {
     visible(newVal) {
@@ -12,6 +23,7 @@ export default {
         this.fetchUserBaseInfo({
           customerId: this.customerId,
         });
+        this.getAllData();
       }
     },
     customerId(newId) {
@@ -19,6 +31,7 @@ export default {
         this.fetchUserBaseInfo({
           customerId: this.customerId,
         });
+        this.getAllData();
       }
     },
     customerPhone(newPhone) {
@@ -26,6 +39,7 @@ export default {
         this.fetchUserBaseInfoByPhone({
           customerPhone: this.customerPhone,
         });
+        this.getAllData();
       }
     },
   },
@@ -34,11 +48,13 @@ export default {
       this.fetchUserBaseInfo({
         customerId: this.customerId,
       });
+      this.getAllData();
     }
     if (this.visible && !this.customerId && this.customerPhone) {
       this.fetchUserBaseInfoByPhone({
         customerPhone: this.customerPhone,
       });
+      this.getAllData();
     }
   },
   computed: {
@@ -46,5 +62,24 @@ export default {
   },
   methods: {
     ...mapActions(['fetchUserBaseInfo', 'fetchUserBaseInfoByPhone']),
+    getAllData() {
+      console.log('in getAllData', this.showMoney);
+
+      if (this.showMoney) {
+        fetchUserAccount({
+          customerId: this.customerId,
+        })
+          .then(res => {
+            this.serviceList = res.data;
+          })
+          .catch(err => {
+            console.error(err);
+          });
+      }
+    },
+    getServiceName(id) {
+      let item = serviceMap.find(item => item.value === id);
+      return item ? item.label : id;
+    },
   },
 };