375 lines
9.4 KiB
Vue
375 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<div v-loading="loading">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="queryParams.dateRange"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
@change="getList"
|
|||
|
|
size="mini"
|
|||
|
|
:clearable="false"
|
|||
|
|
:picker-options="DatePickerOptions.DEFAULT"
|
|||
|
|
/>
|
|||
|
|
<div ref="chart" :style="{width: width, height: height}"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getDailySettleAmount } from '@/api/dashboard/dashboard';
|
|||
|
|
import { getLastDateStr } from '@/utils';
|
|||
|
|
import { DatePickerOptions } from '@/utils/constants';
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'DailySettleAmountStat',
|
|||
|
|
props: {
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: '100%'
|
|||
|
|
},
|
|||
|
|
height: {
|
|||
|
|
type: String,
|
|||
|
|
default: '300px'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
DatePickerOptions,
|
|||
|
|
loading: false,
|
|||
|
|
chartData: [],
|
|||
|
|
queryParams: {
|
|||
|
|
dateRange: [
|
|||
|
|
getLastDateStr(7),
|
|||
|
|
getLastDateStr(0)
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
chart: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initChart();
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
if (this.chart) {
|
|||
|
|
this.chart.dispose();
|
|||
|
|
this.chart = null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getList() {
|
|||
|
|
this.loading = true;
|
|||
|
|
Object.assign(this.queryParams, this.query);
|
|||
|
|
getDailySettleAmount(this.queryParams).then(res => {
|
|||
|
|
this.chartData = res.data;
|
|||
|
|
this.updateChart();
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
initChart() {
|
|||
|
|
this.chart = echarts.init(this.$refs.chart);
|
|||
|
|
this.updateChart();
|
|||
|
|
},
|
|||
|
|
resizeChart() {
|
|||
|
|
if (this.chart) {
|
|||
|
|
this.chart.resize();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
updateChart() {
|
|||
|
|
if (!this.chart || !this.chartData.length) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dates = this.chartData.map(item => item.date);
|
|||
|
|
const orderSettleAmounts = this.chartData.map(item => item.orderSettleAmount || 0);
|
|||
|
|
const refundAmounts = this.chartData.map(item => item.refundAmount || 0);
|
|||
|
|
const bonusSettleAmounts = this.chartData.map(item => item.bonusSettleAmount || 0);
|
|||
|
|
const bonusRefundAmounts = this.chartData.map(item => item.bonusRefundAmount || 0);
|
|||
|
|
const orderNetAmounts = this.chartData.map((item) =>
|
|||
|
|
(item.orderSettleAmount || 0) - (item.refundAmount || 0)
|
|||
|
|
);
|
|||
|
|
const bonusNetAmounts = this.chartData.map((item) =>
|
|||
|
|
(item.bonusSettleAmount || 0) - (item.bonusRefundAmount || 0)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
color: [
|
|||
|
|
'#67C23A', // 支付金额
|
|||
|
|
'#F56C6C', // 退款金额
|
|||
|
|
'#E6A23C', // 订单实收
|
|||
|
|
'#909399', // 分成结算金额
|
|||
|
|
'#F56C6C', // 分成退款金额
|
|||
|
|
'#67C23A' // 分成实收
|
|||
|
|
],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|||
|
|
borderColor: '#ccc',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#333'
|
|||
|
|
},
|
|||
|
|
formatter: function(params) {
|
|||
|
|
let result = params[0].axisValueLabel + '<br/>';
|
|||
|
|
params.forEach(param => {
|
|||
|
|
const value = param.value;
|
|||
|
|
const marker = param.marker;
|
|||
|
|
const seriesName = param.seriesName;
|
|||
|
|
result += marker + seriesName + '：<span style="float: right; margin-left: 20px;">' + value.toFixed(2) + ' 元</span><br/>';
|
|||
|
|
});
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['支付金额', '退款金额', '订单实收', '分成结算金额', '分成退款金额', '分成实收'],
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#666'
|
|||
|
|
},
|
|||
|
|
selected: {
|
|||
|
|
'支付金额': false,
|
|||
|
|
'退款金额': false,
|
|||
|
|
'订单实收': true,
|
|||
|
|
'分成结算金额': false,
|
|||
|
|
'分成退款金额': false,
|
|||
|
|
'分成实收': true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '40px',
|
|||
|
|
top: '15%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: dates,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 'auto',
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#666'
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#ddd'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
boundaryGap: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name: '金额',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: value => {
|
|||
|
|
return value.toFixed(2) + ' 元'
|
|||
|
|
},
|
|||
|
|
color: '#666'
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#ddd'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#eee'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '支付金额',
|
|||
|
|
type: 'line',
|
|||
|
|
data: orderSettleAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(103, 194, 58, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(103, 194, 58, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '退款金额',
|
|||
|
|
type: 'line',
|
|||
|
|
data: refundAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(245, 108, 108, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(245, 108, 108, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '订单实收',
|
|||
|
|
type: 'line',
|
|||
|
|
data: orderNetAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(230, 162, 60, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(230, 162, 60, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '分成结算金额',
|
|||
|
|
type: 'line',
|
|||
|
|
data: bonusSettleAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(144, 147, 153, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(144, 147, 153, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '分成退款金额',
|
|||
|
|
type: 'line',
|
|||
|
|
data: bonusRefundAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(245, 108, 108, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(245, 108, 108, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '分成实收',
|
|||
|
|
type: 'line',
|
|||
|
|
data: bonusNetAmounts,
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 4,
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(103, 194, 58, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(103, 194, 58, 0.1)'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.chart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.el-date-picker {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|