electripper-v2-ui/src/views/bst/index/components/Stat.vue

80 lines
1.7 KiB
Vue
Raw Normal View History

2025-04-06 18:20:25 +08:00
<template>
<el-row :gutter="10">
<el-col :span="span">
<statistics-card
:value="stat.order.payAmount - stat.orderRefund.amount"
label="订单实收"
icon="el-icon-money"
start-color="#FF4D4F"
end-color="#FF7A45"
sub-label="今日订单实收"
:sub-value="todayStat.order.payAmount - todayStat.orderRefund.amount"
:precision="2"
/>
</el-col>
<el-col :span="span">
<statistics-card
:value="stat.device.count"
label="车辆总数"
icon="el-icon-bicycle"
start-color="#52C41A"
end-color="#73D13D"
sub-label="车型总数"
:sub-value="stat.model.count"
:show-value-change="false"
/>
</el-col>
<el-col :span="span">
<statistics-card
:value="stat.user.count"
label="用户总数"
icon="el-icon-user"
start-color="#722ED1"
end-color="#EB2F96"
sub-label="今日新增"
:sub-value="todayStat.user.count"
/>
</el-col>
<el-col :span="span">
<statistics-card
:value="stat.area.count"
label="运营区数量"
icon="el-icon-location"
start-color="#13C2C2"
end-color="#52C41A"
sub-label="商户余额"
:sub-value="stat.user.balance"
:show-value-change="false"
/>
</el-col>
</el-row>
</template>
<script>
import StatisticsCard from '@/components/StatisticsCard'
export default {
name: 'Stat',
components: {
StatisticsCard
},
props: {
stat: {
type: Object,
required: true
},
todayStat: {
type: Object,
required: true
}
},
data() {
return {
span: 6
}
},
}
</script>
<style lang="scss" scoped>
</style>