更新统计数据
This commit is contained in:
磷叶
parent
0790456789
commit
71e591b18a
|
|
@ -232,6 +232,7 @@ export const StatKeys = {
|
|||
ORDER_USER_COUNT: "order_user_count", // 累计订单用户
|
||||
ORDER_COUNT: "order_count", // 订单数量
|
||||
ORDER_PAY_AMOUNT: "order_pay_amount", // 订单支付金额
|
||||
ORDER_FINISHED_PAY_AMOUNT: "order_finished_pay_amount", // 订单结算支付金额
|
||||
ORDER_REFUND_AMOUNT: "order_refund_amount", // 订单退款金额
|
||||
ORDER_WAIT_VERIFY_COUNT: "order_wait_verify_count", // 待审核的订单
|
||||
ORDER_STATUS_COUNT: "order_status_count", // 订单状态数量
|
||||
|
|
|
|||
|
|
@ -13,48 +13,68 @@
|
|||
:picker-options="DatePickerOptions.DEFAULT"
|
||||
/>
|
||||
|
||||
<el-row>
|
||||
<el-row style="margin: 8px 0;">
|
||||
<!-- 第一行：突出显示收入相关数据 -->
|
||||
<el-col :sm="24" :md="14" >
|
||||
<el-col :sm="24" :md="11" >
|
||||
<el-row class="income-stat-row">
|
||||
<el-col :span="12" class="stat-card income-card">
|
||||
<div class="icon-bg cyan"><i class="el-icon-s-finance"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">订单实收</div>
|
||||
<div class="stat-label">
|
||||
订单实收
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>订单实收 = 结算支付金额（结算时间） - 支付退款金额（退款时间）</div>
|
||||
<div>结算支付金额：{{ stat.orderFinishedPayAmount | fix2 | dv }} 元</div>
|
||||
<div>支付退款金额：{{ stat.orderRefundAmount | fix2 | dv }} 元</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="stat-value">{{ stat.orderActualAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="stat-card income-card">
|
||||
<div class="icon-bg red"><i class="el-icon-money"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">我的收入</div>
|
||||
<div class="stat-label">我的收入
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>我的收入 = 结算分成（结算时间） - 分成退款（退款时间）</div>
|
||||
<div>结算分成：{{ stat.bonusAmount | fix2 | dv }} 元</div>
|
||||
<div>分成退款：{{ stat.bonusRefundAmount | fix2 | dv }} 元</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="stat-value">{{ stat.bonusActualAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg blue"><i class="el-icon-bank-card"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">订单金额</div>
|
||||
<div class="mini-value">{{ stat.orderActualTotalAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<div class="icon-bg green"><i class="el-icon-document"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">订单数量</div>
|
||||
<div class="mini-value">{{ stat.orderCount | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<div class="icon-bg orange"><i class="el-icon-finished"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">已完成</div>
|
||||
<div class="mini-value">{{ orderFinishedCount | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<div class="icon-bg purple"><i class="el-icon-bicycle"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">进行中</div>
|
||||
|
|
@ -64,47 +84,164 @@
|
|||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="24" :md="10" class="detail-stat-row">
|
||||
<el-col :sm="24" :md="13" class="detail-stat-row">
|
||||
<el-row>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg blue"><i class="el-icon-bicycle"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">骑行费</div>
|
||||
<div class="mini-label">
|
||||
骑行费
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>用户结束订单后，实际收取到的骑行费</div>
|
||||
<div>骑行费不会超过预存款</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderRiddingFee | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg green"><i class="el-icon-truck"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">调度费</div>
|
||||
<div class="mini-label">
|
||||
调度费
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>用户结束订单后，实际收取到的调度费</div>
|
||||
<div>当【预存款 - 骑行费】不足以支付调度费时，</div>
|
||||
<div>将剩余金额全部收取为调度费</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderDispatchFee | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg orange"><i class="el-icon-setting"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">管理费</div>
|
||||
<div class="mini-label">
|
||||
管理费
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>用户结束订单后，实际收取到的管理费</div>
|
||||
<div>当【预存款 - 骑行费】不足以支付管理费时，</div>
|
||||
<div>将剩余金额全部收取为管理费</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderManageFee | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg purple"><i class="el-icon-warning"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">车损费</div>
|
||||
<div class="mini-label">
|
||||
车损费
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>当商户进行还车审核时填写的车损费</div>
|
||||
<div>当【预存款 - 骑行费】不足以支付车损费时，</div>
|
||||
<div>将剩余金额全部收取为车损费</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderDeductionFee | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg blue"><i class="el-icon-bank-card"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">
|
||||
结算金额
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>结算金额 = 骑行费 + 调度费 + 管理费 + 车损费</div>
|
||||
<div>仅当订单结束后，结算金额才会更新</div>
|
||||
<div>结算金额不会超过预存款（支付金额）</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderActualTotalAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg blue"><i class="el-icon-s-finance"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">
|
||||
支付金额
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>支付金额包含预存款，是当天支付的金额，而非结算金额</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderPayAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg cyan"><i class="el-icon-refresh"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">自动退款</div>
|
||||
<div class="mini-label">自动退款
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>订单结束后将自动退款，若退款失败，则需要人工退款</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderAutoRefundAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mini-stat-card">
|
||||
<el-col :span="6" class="mini-stat-card">
|
||||
<div class="icon-bg red"><i class="el-icon-user"></i></div>
|
||||
<div class="stat-info">
|
||||
<div class="mini-label">人工退款</div>
|
||||
<div class="mini-label">人工退款
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="fit-content"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<div>人工退款是管理员手动操作的退款金额</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-question" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="mini-value">{{ stat.orderAdminRefundAmount | fix2 | dv }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -155,7 +292,9 @@ export default {
|
|||
StatKeys.ORDER_DEDUCTION_FEE,
|
||||
StatKeys.ORDER_DISPATCH_FEE,
|
||||
StatKeys.ORDER_MANAGE_FEE,
|
||||
StatKeys.ORDER_REFUND_AMOUNT
|
||||
StatKeys.ORDER_REFUND_AMOUNT,
|
||||
StatKeys.ORDER_PAY_AMOUNT,
|
||||
StatKeys.ORDER_FINISHED_PAY_AMOUNT,
|
||||
]
|
||||
},
|
||||
stat: {
|
||||
|
|
@ -213,25 +352,23 @@ export default {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
gap: 8px;
|
||||
padding: 18px 0;
|
||||
.income-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
gap: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
.icon-bg {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
|
|
@ -241,8 +378,7 @@ export default {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
|
@ -268,11 +404,12 @@ export default {
|
|||
.stat-info {
|
||||
flex: 1;
|
||||
.mini-label {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.mini-value {
|
||||
font-size: 20px;
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,19 +90,17 @@ export default {
|
|||
const dates = this.dailyIncome.map(item => item.date);
|
||||
const bonusAmounts = this.dailyIncome.map(item => item.bonusAmount || 0);
|
||||
const bonusRefundAmounts = this.dailyIncome.map(item => item.bonusRefundAmount || 0);
|
||||
const bonusActualAmounts = this.dailyIncome.map(item => {
|
||||
const bonus = item.bonusAmount || 0;
|
||||
const refund = item.bonusRefundAmount || 0;
|
||||
return bonus - refund;
|
||||
});
|
||||
const bonusActualAmounts = this.dailyIncome.map(item => item.bonusActualAmount || 0);
|
||||
const withdrawServiceCharges = this.dailyIncome.map(item => item.withdrawServiceCharge || 0);
|
||||
const totalIncomes = this.dailyIncome.map(item => item.totalIncome || 0);
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#67C23A', // 订单服务费实收 - 绿色
|
||||
'#409EFF', // 订单服务费 - 蓝色
|
||||
'#F56C6C', // 订单服务费退款 - 红色
|
||||
'#E6A23C' // 提现服务费 - 橙色
|
||||
'#909399', // 订单服务费退款 - 灰色
|
||||
'#E6A23C', // 提现服务费 - 橙色
|
||||
'#F56C6C', // 总收益 - 红色
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -128,7 +126,7 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['订单服务费实收', '订单服务费', '订单服务费退款', '提现服务费'],
|
||||
data: ['订单服务费实收', '订单服务费', '订单服务费退款', '提现服务费', '总收益'],
|
||||
bottom: 0,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
|
|
@ -138,7 +136,8 @@ export default {
|
|||
'订单服务费实收': true,
|
||||
'订单服务费': false,
|
||||
'订单服务费退款': false,
|
||||
'提现服务费': true
|
||||
'提现服务费': true,
|
||||
'总收益': true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -295,6 +294,21 @@ export default {
|
|||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '总收益',
|
||||
type: 'line',
|
||||
data: totalIncomes,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user