修改首页滑动方式

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/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 }) {