Skip to content

D
dcxy-manage-shell
Commit 26a18bc9 by 姜雷
Options

修改数据首页

parent 6b577f4f
Showing with 151 additions and 71 deletions
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,10 +44,14 @@ const actions = {
}
return getConsumeOrderList({
data: entity,
}).then(res => {
const { data, consumeCountVo } = res;
commit(FETCH_CONSUME_LIST, { list: data, consumeCountVo });
});
})
.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,10 +43,14 @@ const actions = {
}
return getRechargeOrderList({
data: entity,
}).then(res => {
const { data, rechargeOrderCountVo } = res;
commit(FETCH_RECHARGE_LIST, { list: data, rechargeOrderCountVo });
});
})
.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>
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