Skip to content

D
dcxy-manage-shell
Commit a691b653 by 姜雷
Options

Merge branch 'develop' into 'test'

Develop See merge request !31
parents e9291a62 c0f64b97
Showing with 166 additions and 69 deletions
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;
},
},
};
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