调整数据首页样式

src/containers/Dashboard/CampusRank/CampusRank.vue

@@ -4,8 +4,8 @@
       <search-item label="运营商">
         <operator-select
           :accessType="1"
-          :value="filters.operatorId"
-          @input="val => fetchConsumeList({ operatorId: val })"
+          :value="filters.operateId"
+          @input="val => fetchConsumeList({ operateId: val })"
         />
       </search-item>
       <el-radio-group

src/containers/Dashboard/CampusRank/CampusRankChart.vue

 <template>
   <div class="CampusRank">
-    <div id="CampusRank"></div>
+    <div id="CampusRank">
+      <div class="CampusRank-legend">
+        <template v-if="this.data && this.data.length === 10">
+          其他校区：<span>{{other}}</span><br>
+          前十校区：<span>{{topTen}}</span>
+        </template>
+        <template v-else-if="this.data.length">
+          校区汇总：<span>{{topTen}}</span>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,7 +19,7 @@ import chartMixin from '../chartMixin';
 import { mapActions } from 'vuex';
 
 export default {
-  name: 'CampusRank',
+  name: 'CampusRankChart',
   mixins: [chartMixin],
   props: {
     changeCampusHandle: {
@@ -17,11 +27,13 @@ export default {
     },
   },
   data() {
-    let totle = this.data.reduce((count, item) => count + item.count, 0);
+    let total = this.data.reduce((count, item) => count + item.count, 0);
     return {
       chart: null,
       today: this.$formatDate(new Date(), 'yyyy-MM-dd'),
-      totle: totle,
+      total: total,
+      topTen: 0,
+      other: 0,
       percentDom: null,
       areaNameDom: null,
       SelectedDataIndex: null,
@@ -36,7 +48,7 @@ export default {
         container: 'CampusRank',
         forceFit: true,
         height: this.height,
-        padding: [0, 130, 0, 0],
+        padding: [20, 160, 20, 0],
       });
       this.chart.source(this.data);
       this.chart.coord('theta', {
@@ -45,54 +57,7 @@ export default {
       });
       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.chart.legend(false);
       // 坐标系及着色
       this.chartGeom = this.chart
         .intervalStack()
@@ -126,7 +91,14 @@ export default {
     },
     updateData() {
       if (this.data.length) {
-        this.totle = this.data.reduce((count, item) => count + item.count, 0);
+        this.total = this.data.reduce((count, item) => count + item.count, 0);
+        if (this.data.length === 10) {
+          this.other = this.data[this.data.length - 1].count;
+          this.topTen = this.total - this.other;
+        } else {
+          this.other = 0;
+          this.topTen = this.total;
+        }
         let data = this.SelectedDataIndex;
 
         this.chartGeom.setSelected(this.data[0]);
@@ -148,7 +120,7 @@ export default {
       this.percentDom = document.querySelector('.CampusRank-percent');
       this.areaNameDom = document.querySelector('.CampusRank-areaName');
       if (this.percentDom) {
-        this.percentDom.innerHTML = ((data.count / this.totle) * 100).toFixed(
+        this.percentDom.innerHTML = ((data.count / this.total) * 100).toFixed(
           2
         );
       }
@@ -162,10 +134,19 @@ export default {
 
 <style lang="scss">
 .CampusRank {
+  position: relative;
   .CampusRank-title {
     font-size: 16px;
     text-align: center;
     padding-bottom: 12px;
   }
+  .CampusRank-legend {
+    position: absolute;
+    width: 160px;
+    transform: translateY(-50%);
+    line-height: 30px;
+    top: 50%;
+    right: 0;
+  }
 }
 </style>

src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue

@@ -4,8 +4,8 @@
       <search-item label="运营商">
         <operator-select
           :accessType="1"
-          :value="filters.operatorId"
-          @input="val => getConsumeOrderList({operatorId: val})"
+          :value="filters.operateId"
+          @input="val => getConsumeOrderList({operateId: val})"
         />
       </search-item>
       <search-item label="区域">
@@ -34,7 +34,7 @@
         >本年</el-radio>
       </el-radio-group>
     </div>
-    <div class="Dashboard-title">会员消费数据
+    <div class="Dashboard-title">消费视图
       <div
         class="CustomerConsumptionChart-tip"
         style="color:#333;font-size:14px;text-align: center;"
@@ -96,7 +96,6 @@ export default {
   .CustomerConsumptionChart-tip {
     position: absolute;
     right: 0;
-    top: 50px;
     margin-left: 10px;
     color: #333;
     font-size: 14px;

src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js

@@ -4,7 +4,7 @@ import { getFilters, formatDate } from '@/utils/index';
 const FETCH_CONSUME_LIST = 'FETCH_CONSUME_LIST';
 
 const initFilters = () => ({
-  operatorId: undefined,
+  operateId: undefined,
   areaId: undefined,
   timeType: 0, // 0 本日，1 本月， 2 本年
 });

src/containers/Dashboard/CustomerConsumption/chart.vue

@@ -56,18 +56,6 @@ export default {
         this.consumeCount && this.consumeCount.payMen
           ? 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.render();
       this.chart.guide().text({

src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue

@@ -4,8 +4,8 @@
       <search-item label="运营商">
         <operator-select
           :accessType="1"
-          :value="filters.operatorId"
-          @input="val => getRechargeOrderList({operatorId: val})"
+          :value="filters.operateId"
+          @input="val => getRechargeOrderList({operateId: val})"
         />
       </search-item>
       <el-radio-group
@@ -27,12 +27,12 @@
         >本年</el-radio>
       </el-radio-group>
     </div>
-    <div class="Dashboard-title">会员充值数据
+    <div class="Dashboard-title">充值视图
       <div class="CustomerRechargeChart-tip">
         <span
           class="CustomerRecharge-tooltip"
           style="background-color:#4e82fb;"
-        ></span> 累计充值：
+        ></span> 总充值：
         <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}元</span>
         <span
           class="CustomerRecharge-tooltip"
@@ -85,8 +85,6 @@ export default {
   .CustomerRechargeChart-tip {
     position: absolute;
     right: 0;
-    top: 50px;
-    margin-right: 10px;
     color: #333;
     font-size: 14px;
     font-weight: normal;

src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js

@@ -4,7 +4,7 @@ import { getFilters, formatDate } from '@/utils';
 const FETCH_RECHARGE_LIST = 'FETCH_RECHARGE_LIST';
 
 const initFilters = () => ({
-  operatorId: undefined,
+  operateId: undefined,
   timeType: 0, // 0 本日，1 本月， 2 本年
 });
 const filtersStore = initFiltersStore(initFilters);

src/containers/Dashboard/CustomerRecharge/chart.vue

 <template>
   <div class="CustomerRechargeChart">
-    <div id='CustomerRechargeChart'></div>
-    <div id='CustomerRechangeSlider'></div>
+    <div
+      id='CustomerRechargeChart'
+      :style="`height: ${height}px;width: ${width?width+'px':'auto'}`"
+    ></div>
+    <!-- <div id='CustomerRechangeSlider'></div> -->
   </div>
 </template>
 
@@ -41,8 +44,7 @@ Shape.registerShape('interval', 'left', {
   draw: function draw(cfg, container) {
     var points = this.parsePoints(cfg.points);
     var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
-
-    var rectCfg = getRectRange(points, cfg.size); // cfg.size 对应 .size(25)
+    var rectCfg = getRectRange(points, cfg.size / 2); // cfg.size 对应 .size(25)
 
     return container.addShape('rect', {
       className: 'interval',
@@ -55,7 +57,7 @@ Shape.registerShape('interval', 'right', {
   draw: function draw(cfg, container) {
     var points = this.parsePoints(cfg.points);
     var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
-    var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25
+    var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25)
 
     return container.addShape('rect', {
       className: 'interval',
@@ -125,7 +127,7 @@ export default {
         container: 'CustomerRechargeChart',
         forceFit: true,
         height: this.height,
-        padding: [50, 50, 50, 120],
+        padding: [50, 50, 20, 120],
       });
 
       this.chart.source(dv, {
@@ -136,6 +138,11 @@ export default {
           alias: '充值人数',
         },
       });
+      this.chart.axis('areaName', {
+        label: {
+          offsetX: 10,
+        },
+      });
       this.chart.axis('rechargeMoney', {
         grid: null,
       });
@@ -146,18 +153,18 @@ export default {
         .position('areaName*rechargeMoney')
         .color('#4e82fb')
         .shape('left')
-        .size(10);
+        .size(18);
       this.chart
         .interval()
         .position('areaName*rechargeMen')
         .shape('right')
         .color('#26c9a8')
-        .size(10);
+        .size(18);
 
       this.chart.legend(false);
       this.chart.render();
 
-      this.initSlider();
+      // this.initSlider();
     },
     initSlider() {
       const wrapDom = document.getElementById('CustomerRechargeChart');
@@ -235,11 +242,13 @@ export default {
         let spanNum = 4 / arrLength;
         this.ds.setState('endRadio', spanNum);
         this.dv.source(this.data);
-        this.updateSlider();
+        let height = this.data.length * 20;
+        this.chart.changeHeight(height);
+        // this.updateSlider();
         this.updateData();
       } else {
         this.initData();
-        this.initSlider();
+        // this.initSlider();
       }
     },
   },
@@ -249,6 +258,11 @@ export default {
 <style lang="scss">
 .CustomerRechargeChart {
   position: relative;
+  #CustomerRechargeChart {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
   #CustomerRechangeSlider {
     margin-left: -30px;
     width: 100%;

src/containers/Dashboard/Dashboard.js

@@ -17,7 +17,7 @@ const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
 const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA';
 
 const initFilters = () => ({
-  operatorId: undefined,
+  operateId: undefined,
   timeType: 0, // 0 本日，1 本月， 2 本年
 });
 const filtersStore = initFiltersStore(initFilters);
@@ -62,15 +62,14 @@ const getters = {
 const actions = {
   fetchConsumeList({ commit, dispatch, getters }, data) {
     if (data) {
-      const { timeType, operatorId } = data;
+      const { timeType, operateId } = data;
       (timeType || timeType == 0) &&
         dispatch('updateFilters', {
           timeType: timeType,
         });
-      operatorId &&
-        dispatch('updateFilters', {
-          operatorId,
-        });
+      dispatch('updateFilters', {
+        operateId,
+      });
     }
     let entity = getFilters(getters.filters);
     switch (entity.timeType) {

src/containers/Dashboard/chartMixin.js

@@ -9,6 +9,7 @@ export default {
     return {
       chart: null,
       height: 270,
+      width: 0,
       chartGeom: null,
     };
   },
@@ -23,6 +24,7 @@ export default {
     if (innerWidth < 1600) {
       this.height = (innerHeight - 270) / 2;
     }
+    this.width = this.$el.clientWidth;
     this.initData();
   },
   methods: {