Merge branch 'develop' into 'test'

src/assets/styles/element-ui.scss

@@ -65,6 +65,7 @@ $--color-danger: #ff3333;
   height: 40px;
   line-height: 40px;
 }
+.el-input__icon,
 .el-cascader,
 .el-input__inner,
 .el-button {
@@ -89,6 +90,7 @@ $--color-danger: #ff3333;
     height: 56px;
     line-height: 56px;
   }
+  .el-input__icon,
   .el-cascader,
   .el-input__inner,
   .el-button {

src/components/input/AreaSelect/mixin.js

@@ -23,5 +23,16 @@ export default {
         return '';
       }
     },
+    getAreaOperatorInfo(id) {
+      let item = this.areaList.find(area => area.id === id);
+      if (item) {
+        return {
+          rechargeOperateId: item.rechargeOperateId,
+          rechargeOperateName: item.rechargeOperateName,
+        };
+      } else {
+        return null;
+      }
+    },
   },
 };

src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue

 <template>
-  <div class="Dashboard-DataCard">
+  <div class="Dashboard-DataCard CustomerConsumption">
     <div class="Dashboard-SearchBar">
       <search-item label="运营商">
         <operator-select
           :accessType="1"
           :value="filters.operatorId"
-          @input="val => getRechargeOrderList({operatorId: val})"
+          @input="val => getConsumeOrderList({operatorId: val})"
         />
       </search-item>
       <search-item label="区域">
         <area-select
           :value="filters.areaId"
-          @input="val => getRechargeOrderList({areaId: val})"
+          @input="val => getConsumeOrderList({areaId: val})"
           type="user"
         />
       </search-item>
       <el-radio-group
         class="Dashboard-Radio"
         :value="filters.timeType"
-        @input="val => getRechargeOrderList({timeType: val})"
+        @input="val => getConsumeOrderList({timeType: val})"
       >
         <el-radio
           class="Dashboard-Radio-item"
@@ -34,7 +34,21 @@
         >本年</el-radio>
       </el-radio-group>
     </div>
-    <div class="Dashboard-title">会员消费数据</div>
+    <div class="Dashboard-title">会员消费数据
+      <div
+        class="CustomerConsumptionChart-tip"
+        style="color:#333;font-size:14px;text-align: center;"
+      >
+        合计消费总金额：<span
+          class="CustomerConsumption-total"
+          style="color:#f00;"
+        >0.00元</span>
+        合计消费人数：<span
+          class="CustomerConsumption-count"
+          style="color:#f00;"
+        >0人</span>
+      </div>
+    </div>
     <Chart
       :data="consumeList"
       :consumeCount="consumeCount"
@@ -72,3 +86,23 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.CustomerConsumption {
+  .Dashboard-title {
+    display: flex;
+    align-items: center;
+  }
+  .CustomerConsumptionChart-tip {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    margin-left: 10px;
+    color: #333;
+    font-size: 14px;
+    font-weight: normal;
+    text-align: center;
+  }
+}
+</style>
+

src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js

@@ -44,9 +44,13 @@ const actions = {
     }
     return getConsumeOrderList({
       data: entity,
-    }).then(res => {
+    })
+      .then(res => {
         const { data, consumeCountVo } = res;
         commit(FETCH_CONSUME_LIST, { list: data, consumeCountVo });
+      })
+      .catch(err => {
+        console.error(err);
       });
   },
 };

src/containers/Dashboard/CustomerConsumption/chart.vue

@@ -29,7 +29,7 @@ export default {
         container: 'CustomerConsumptionChart',
         forceFit: true,
         height: this.height,
-        padding: [100, 50, 50, 100],
+        padding: [50, 50, 50, 100],
       });
       this.chart.source(this.data);
       this.chart
@@ -57,17 +57,17 @@ export default {
           ? this.consumeCount.payMen
           : '0';
       // 辅助元素
-      this.chart.guide().html({
-        position: ['0%', '0%'],
-        htmlContent: `<div style="color:#333;font-size:14px;text-align: center;">
-            合计消费总金额：<span class="CustomerConsumption-total" style="color:#f00;">0.00元</span>
-            合计消费人数：<span class="CustomerConsumption-count" style="color:#f00;">0人</span>
-        </div>`,
-        alignX: 'left',
-        alignY: 'top',
-        offsetX: -40,
-        offsetY: -40,
-      });
+      // this.chart.guide().html({
+      //   position: ['0%', '0%'],
+      //   htmlContent: `<div style="color:#333;font-size:14px;text-align: center;">
+      //       合计消费总金额：<span class="CustomerConsumption-total" style="color:#f00;">0.00元</span>
+      //       合计消费人数：<span class="CustomerConsumption-count" style="color:#f00;">0人</span>
+      //   </div>`,
+      //   alignX: 'left',
+      //   alignY: 'top',
+      //   offsetX: -40,
+      //   offsetY: -40,
+      // });
 
       this.chart.render();
       this.chart.guide().text({

src/containers/Dashboard/CustomerFeedback/CustomerFeedback.vue

@@ -92,6 +92,10 @@ export default {
 }
 @media screen and (max-width: $bigScreenWidth) {
   .CustomerFeedback {
+    .CustomerFeedbackTitle {
+      padding: 0 10px;
+      font-size: 14px;
+    }
     .CustomerFeedback-Item {
       height: 40px;
       font-size: 14px;

src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue

 <template>
-  <div class="Dashboard-DataCard">
+  <div class="Dashboard-DataCard CustomerRecharge">
     <div class="Dashboard-SearchBar">
       <search-item label="运营商">
         <operator-select
@@ -27,11 +27,21 @@
         >本年</el-radio>
       </el-radio-group>
     </div>
-    <div class="Dashboard-title">会员充值数据</div>
-    <Chart
-      :data="rechargeList"
-      :rechargeCount="rechargeCount"
-    />
+    <div class="Dashboard-title">会员充值数据
+      <div class="CustomerRechangeChart-tip">
+        <span
+          class="CustomerRechange-tooltip"
+          style="background-color:#4e82fb;"
+        ></span> 累计充值：
+        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}元</span>
+        <span
+          class="CustomerRechange-tooltip"
+          style="background-color:#26c9a8;"
+        ></span> 充值人数：
+        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMen ? rechargeCount.rechargeMen : 0 }}人</span>
+      </div>
+    </div>
+    <Chart :data="rechargeList" />
   </div>
 </template>
 
@@ -65,3 +75,29 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.CustomerRecharge {
+  .Dashboard-title {
+    display: flex;
+    align-items: center;
+  }
+  .CustomerRechangeChart-tip {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    margin-right: 10px;
+    color: #333;
+    font-size: 14px;
+    font-weight: normal;
+    text-align: center;
+    .CustomerRechange-tooltip {
+      display: inline-block;
+      width: 10px;
+      height: 5px;
+      margin-bottom: 2px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js

@@ -43,9 +43,13 @@ const actions = {
     }
     return getRechargeOrderList({
       data: entity,
-    }).then(res => {
+    })
+      .then(res => {
         const { data, rechargeOrderCountVo } = res;
         commit(FETCH_RECHARGE_LIST, { list: data, rechargeOrderCountVo });
+      })
+      .catch(err => {
+        console.error(err);
       });
   },
 };

src/containers/Dashboard/CustomerRecharge/chart.vue

 <template>
   <div class="CustomerRechangeChart">
-    <div class="CustomerRechangeChart-tip">
-      <span
-        class="CustomerRechange-tooltip"
-        style="background-color:#4e82fb;"
-      ></span> 累计充值：
-      <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}元</span>
-      <span
-        class="CustomerRechange-tooltip"
-        style="background-color:#26c9a8;"
-      ></span> 充值人数：
-      <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMen ? rechargeCount.rechargeMen : 0 }}人</span>
-    </div>
+
     <div id='CustomerRechangeChart'></div>
     <div id='CustomerRechangeSlider'></div>
   </div>
@@ -102,7 +91,7 @@ export default {
         container: 'CustomerRechangeChart',
         forceFit: true,
         height: this.height,
-        padding: [100, 50, 50, 120],
+        padding: [50, 50, 50, 120],
       });
       this.chart.source(dv);
       this.chart.axis('areaName', {
@@ -131,13 +120,18 @@ export default {
       this.initSlider();
     },
     initSlider() {
+      const wrapDom = document.getElementById('CustomerRechangeChart');
+      console.log(wrapDom.clientHeight);
+      let height = wrapDom.clientHeight;
+
       // const arrLength = this.data.length;
       // let spanNum = 4 / arrLength;
       this.sliderDom = document.getElementById('CustomerRechangeSlider');
+      this.sliderDom.style = `height:${height}px`;
       this.slider = new Slider({
         container: this.sliderDom, // dom 容器 id 或者 dom 容器对象
         width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度
-        height: 300, // slider 的高度，默认为 '26px'
+        height: height, // slider 的高度，默认为 '26px'
         xAxis: 'value', // 背景图的横轴对应字段，同时为数据筛选的字段
         yAxis: 'areaName', // 背景图的纵轴对应字段
         startRadio: this.ds.state.startRadio, // 新增
@@ -174,8 +168,8 @@ export default {
           startRadio: this.ds.state.startRadio,
           endRadio: this.ds.state.endRadio,
           data: this.data,
-          // minSpan: spanNum,
-          // maxSpan: spanNum,
+          // minSpan: this.ds.state.endRadio,
+          // maxSpan: this.ds.state.endRadio,
           handleStyle: {
             img: require('@/assets/images/dashboard/QXtfhORGlDuRvLXFzpsQ.png'),
             width: 26,
@@ -192,8 +186,10 @@ export default {
     },
     refreshData() {
       if (this.chart) {
+        const arrLength = this.data.length;
+        let spanNum = 4 / arrLength;
+        this.ds.setState('endRadio', spanNum);
         this.dv.source(this.data);
-        console.log(this.slider);
         this.updateSlider();
         this.updateData();
       } else {
@@ -214,20 +210,5 @@ export default {
     height: 300px;
     transform: translate(100%, -100%);
   }
-  .CustomerRechangeChart-tip {
-    position: absolute;
-    left: 80px;
-    top: 60px;
-    color: #333;
-    font-size: 14px;
-    text-align: center;
-  }
-  .CustomerRechange-tooltip {
-    display: inline-block;
-    width: 10px;
-    height: 5px;
-    margin-bottom: 2px;
-    margin-left: 20px;
-  }
 }
 </style>

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

@@ -14,7 +14,7 @@
       <search-item label="校区">
         <area-select
           v-model.trim="campusFilters.areaId"
-          @change="changeReportAreaHandle"
+          @input="changeReportAreaHandle"
           type="user"
         />
       </search-item>
@@ -53,7 +53,10 @@ export default {
   },
   data() {
     return {
-      campusFilters: {},
+      campusFilters: {
+        year: '',
+        areaId: undefined,
+      },
     };
   },
   computed: {
@@ -77,9 +80,10 @@ export default {
       }
     },
     changeReportAreaHandle(val) {
-      if (val && this.campusFilters.year) {
+      if (val) {
+        let year = this.campusFilters.year;
         this.fetchReportList({
-          year: this.campusFilters.year,
+          year: year ? year : null,
           areaId: val,
         });
       }

src/containers/Dashboard/Dashboard.vue

@@ -102,7 +102,7 @@ export default {
       align-items: center;
       justify-self: flex-end;
       .Dashboard-Radio-item {
-        margin: 0 10px;
+        margin: 0 10px 0 0;
       }
     }
   }
@@ -118,10 +118,10 @@ export default {
     .Dashboard-DataCard {
       flex: 2;
       &:nth-child(2) {
-        flex: 2.3;
+        flex: 2.5;
       }
       &:last-child {
-        flex: 1.2;
+        flex: 1;
       }
     }
     .Dashboard-title {
@@ -214,6 +214,9 @@ export default {
 }
 @media screen and (max-width: $bigScreenWidth) {
   .Dashboard {
+    .Dashboard-title {
+      font-size: 16px;
+    }
     .Dashboard-SearchBar {
       padding: 10px 0 10px;
     }

src/containers/Dashboard/EquipmentList/EquipmentList.vue

 <template>
-  <div class="Dashboard-DataCard">
+  <div class="Dashboard-DataCard EquipmentList">
     <div class="Dashboard-title">
       <div class="Dashboard-title-icon equipment">
         <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
@@ -36,3 +36,13 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.EquipmentList {
+  .Dashboard-title {
+    .el-radio-button__inner {
+      line-height: 0;
+    }
+  }
+}
+</style>