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> <template>
<div class="Dashboard-DataCard"> <div class="Dashboard-DataCard CustomerConsumption">
<div class="Dashboard-SearchBar"> <div class="Dashboard-SearchBar">
<search-item label="运营商"> <search-item label="运营商">
<operator-select <operator-select
:accessType="1" :accessType="1"
:value="filters.operatorId" :value="filters.operatorId"
@input="val => getRechargeOrderList({operatorId: val})" @input="val => getConsumeOrderList({operatorId: val})"
/> />
</search-item> </search-item>
<search-item label="区域"> <search-item label="区域">
<area-select <area-select
:value="filters.areaId" :value="filters.areaId"
@input="val => getRechargeOrderList({areaId: val})" @input="val => getConsumeOrderList({areaId: val})"
type="user" type="user"
/> />
</search-item> </search-item>
<el-radio-group <el-radio-group
class="Dashboard-Radio" class="Dashboard-Radio"
:value="filters.timeType" :value="filters.timeType"
@input="val => getRechargeOrderList({timeType: val})" @input="val => getConsumeOrderList({timeType: val})"
> >
<el-radio <el-radio
class="Dashboard-Radio-item" class="Dashboard-Radio-item"
...@@ -34,7 +34,21 @@ ...@@ -34,7 +34,21 @@
>本年</el-radio> >本年</el-radio>
</el-radio-group> </el-radio-group>
</div> </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 <Chart
:data="consumeList" :data="consumeList"
:consumeCount="consumeCount" :consumeCount="consumeCount"
...@@ -72,3 +86,23 @@ export default { ...@@ -72,3 +86,23 @@ export default {
}, },
}; };
</script> </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 = { ...@@ -44,10 +44,14 @@ const actions = {
} }
return getConsumeOrderList({ return getConsumeOrderList({
data: entity, data: entity,
}).then(res => { })
const { data, consumeCountVo } = res; .then(res => {
commit(FETCH_CONSUME_LIST, { list: data, consumeCountVo }); 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 { ...@@ -29,7 +29,7 @@ export default {
container: 'CustomerConsumptionChart', container: 'CustomerConsumptionChart',
forceFit: true, forceFit: true,
height: this.height, height: this.height,
padding: [100, 50, 50, 100], padding: [50, 50, 50, 100],
}); });
this.chart.source(this.data); this.chart.source(this.data);
this.chart this.chart
...@@ -57,17 +57,17 @@ export default { ...@@ -57,17 +57,17 @@ export default {
? this.consumeCount.payMen ? this.consumeCount.payMen
: '0'; : '0';
// 辅助元素 // 辅助元素
this.chart.guide().html({ // this.chart.guide().html({
position: ['0%', '0%'], // position: ['0%', '0%'],
htmlContent: `<div style="color:#333;font-size:14px;text-align: center;"> // htmlContent: `<div style="color:#333;font-size:14px;text-align: center;">
合计消费总金额：<span class="CustomerConsumption-total" style="color:#f00;">0.00元</span> // 合计消费总金额：<span class="CustomerConsumption-total" style="color:#f00;">0.00元</span>
合计消费人数：<span class="CustomerConsumption-count" style="color:#f00;">0人</span> // 合计消费人数：<span class="CustomerConsumption-count" style="color:#f00;">0人</span>
</div>`, // </div>`,
alignX: 'left', // alignX: 'left',
alignY: 'top', // alignY: 'top',
offsetX: -40, // offsetX: -40,
offsetY: -40, // offsetY: -40,
}); // });
this.chart.render(); this.chart.render();
this.chart.guide().text({ this.chart.guide().text({
......
src/containers/Dashboard/CustomerFeedback/CustomerFeedback.vue
...@@ -92,6 +92,10 @@ export default { ...@@ -92,6 +92,10 @@ export default {
} }
@media screen and (max-width: $bigScreenWidth) { @media screen and (max-width: $bigScreenWidth) {
.CustomerFeedback { .CustomerFeedback {
.CustomerFeedbackTitle {
padding: 0 10px;
font-size: 14px;
}
.CustomerFeedback-Item { .CustomerFeedback-Item {
height: 40px; height: 40px;
font-size: 14px; font-size: 14px;
......
src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue
<template> <template>
<div class="Dashboard-DataCard"> <div class="Dashboard-DataCard CustomerRecharge">
<div class="Dashboard-SearchBar"> <div class="Dashboard-SearchBar">
<search-item label="运营商"> <search-item label="运营商">
<operator-select <operator-select
...@@ -27,11 +27,21 @@ ...@@ -27,11 +27,21 @@
>本年</el-radio> >本年</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="Dashboard-title">会员充值数据</div> <div class="Dashboard-title">会员充值数据
<Chart <div class="CustomerRechangeChart-tip">
:data="rechargeList" <span
:rechargeCount="rechargeCount" 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> </div>
</template> </template>
...@@ -65,3 +75,29 @@ export default { ...@@ -65,3 +75,29 @@ export default {
}, },
}; };
</script> </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 = { ...@@ -43,10 +43,14 @@ const actions = {
} }
return getRechargeOrderList({ return getRechargeOrderList({
data: entity, data: entity,
}).then(res => { })
const { data, rechargeOrderCountVo } = res; .then(res => {
commit(FETCH_RECHARGE_LIST, { list: data, rechargeOrderCountVo }); const { data, rechargeOrderCountVo } = res;
}); commit(FETCH_RECHARGE_LIST, { list: data, rechargeOrderCountVo });
})
.catch(err => {
console.error(err);
});
}, },
}; };
......
src/containers/Dashboard/CustomerRecharge/chart.vue
<template> <template>
<div class="CustomerRechangeChart"> <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='CustomerRechangeChart'></div>
<div id='CustomerRechangeSlider'></div> <div id='CustomerRechangeSlider'></div>
</div> </div>
...@@ -102,7 +91,7 @@ export default { ...@@ -102,7 +91,7 @@ export default {
container: 'CustomerRechangeChart', container: 'CustomerRechangeChart',
forceFit: true, forceFit: true,
height: this.height, height: this.height,
padding: [100, 50, 50, 120], padding: [50, 50, 50, 120],
}); });
this.chart.source(dv); this.chart.source(dv);
this.chart.axis('areaName', { this.chart.axis('areaName', {
...@@ -131,13 +120,18 @@ export default { ...@@ -131,13 +120,18 @@ export default {
this.initSlider(); this.initSlider();
}, },
initSlider() { initSlider() {
const wrapDom = document.getElementById('CustomerRechangeChart');
console.log(wrapDom.clientHeight);
let height = wrapDom.clientHeight;
// const arrLength = this.data.length; // const arrLength = this.data.length;
// let spanNum = 4 / arrLength; // let spanNum = 4 / arrLength;
this.sliderDom = document.getElementById('CustomerRechangeSlider'); this.sliderDom = document.getElementById('CustomerRechangeSlider');
this.sliderDom.style = `height:${height}px`;
this.slider = new Slider({ this.slider = new Slider({
container: this.sliderDom, // dom 容器 id 或者 dom 容器对象 container: this.sliderDom, // dom 容器 id 或者 dom 容器对象
width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度 width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度
height: 300, // slider 的高度，默认为 '26px' height: height, // slider 的高度，默认为 '26px'
xAxis: 'value', // 背景图的横轴对应字段，同时为数据筛选的字段 xAxis: 'value', // 背景图的横轴对应字段，同时为数据筛选的字段
yAxis: 'areaName', // 背景图的纵轴对应字段 yAxis: 'areaName', // 背景图的纵轴对应字段
startRadio: this.ds.state.startRadio, // 新增 startRadio: this.ds.state.startRadio, // 新增
...@@ -174,8 +168,8 @@ export default { ...@@ -174,8 +168,8 @@ export default {
startRadio: this.ds.state.startRadio, startRadio: this.ds.state.startRadio,
endRadio: this.ds.state.endRadio, endRadio: this.ds.state.endRadio,
data: this.data, data: this.data,
// minSpan: spanNum, // minSpan: this.ds.state.endRadio,
// maxSpan: spanNum, // maxSpan: this.ds.state.endRadio,
handleStyle: { handleStyle: {
img: require('@/assets/images/dashboard/QXtfhORGlDuRvLXFzpsQ.png'), img: require('@/assets/images/dashboard/QXtfhORGlDuRvLXFzpsQ.png'),
width: 26, width: 26,
...@@ -192,8 +186,10 @@ export default { ...@@ -192,8 +186,10 @@ export default {
}, },
refreshData() { refreshData() {
if (this.chart) { if (this.chart) {
const arrLength = this.data.length;
let spanNum = 4 / arrLength;
this.ds.setState('endRadio', spanNum);
this.dv.source(this.data); this.dv.source(this.data);
console.log(this.slider);
this.updateSlider(); this.updateSlider();
this.updateData(); this.updateData();
} else { } else {
...@@ -214,20 +210,5 @@ export default { ...@@ -214,20 +210,5 @@ export default {
height: 300px; height: 300px;
transform: translate(100%, -100%); 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> </style>
src/containers/Dashboard/CustomerRegister/CustomerRegister.vue
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<search-item label="校区"> <search-item label="校区">
<area-select <area-select
v-model.trim="campusFilters.areaId" v-model.trim="campusFilters.areaId"
@change="changeReportAreaHandle" @input="changeReportAreaHandle"
type="user" type="user"
/> />
</search-item> </search-item>
...@@ -53,7 +53,10 @@ export default { ...@@ -53,7 +53,10 @@ export default {
}, },
data() { data() {
return { return {
campusFilters: {}, campusFilters: {
year: '',
areaId: undefined,
},
}; };
}, },
computed: { computed: {
...@@ -77,9 +80,10 @@ export default { ...@@ -77,9 +80,10 @@ export default {
} }
}, },
changeReportAreaHandle(val) { changeReportAreaHandle(val) {
if (val && this.campusFilters.year) { if (val) {
let year = this.campusFilters.year;
this.fetchReportList({ this.fetchReportList({
year: this.campusFilters.year, year: year ? year : null,
areaId: val, areaId: val,
}); });
} }
......
src/containers/Dashboard/Dashboard.vue
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
align-items: center; align-items: center;
justify-self: flex-end; justify-self: flex-end;
.Dashboard-Radio-item { .Dashboard-Radio-item {
margin: 0 10px; margin: 0 10px 0 0;
} }
} }
} }
...@@ -118,10 +118,10 @@ export default { ...@@ -118,10 +118,10 @@ export default {
.Dashboard-DataCard { .Dashboard-DataCard {
flex: 2; flex: 2;
&:nth-child(2) { &:nth-child(2) {
flex: 2.3; flex: 2.5;
} }
&:last-child { &:last-child {
flex: 1.2; flex: 1;
} }
} }
.Dashboard-title { .Dashboard-title {
...@@ -214,6 +214,9 @@ export default { ...@@ -214,6 +214,9 @@ export default {
} }
@media screen and (max-width: $bigScreenWidth) { @media screen and (max-width: $bigScreenWidth) {
.Dashboard { .Dashboard {
.Dashboard-title {
font-size: 16px;
}
.Dashboard-SearchBar { .Dashboard-SearchBar {
padding: 10px 0 10px; padding: 10px 0 10px;
} }
......
src/containers/Dashboard/EquipmentList/EquipmentList.vue
<template> <template>
<div class="Dashboard-DataCard"> <div class="Dashboard-DataCard EquipmentList">
<div class="Dashboard-title"> <div class="Dashboard-title">
<div class="Dashboard-title-icon equipment"> <div class="Dashboard-title-icon equipment">
<img src="@/assets/images/dashboard/icon_paiming@2x.png" /> <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
...@@ -36,3 +36,13 @@ export default { ...@@ -36,3 +36,13 @@ export default {
}, },
}; };
</script> </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