Skip to content

D
dcxy-system
Commit c0f64b97 by 姜雷
Options

修改首页滑动方式

parent f020ca35
Showing with 89 additions and 62 deletions
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 }) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment