<template>
|
<div class="home-page">
|
<div class="top-container">
|
<div class="top-container__item">
|
<div class="top-container__label">今日销售额</div>
|
<div class="top-container__value">{{ statistic.saleAmount || 0 }}</div>
|
</div>
|
<div class="top-container__item">
|
<div class="top-container__label">今日销售扎数</div>
|
<div class="top-container__value">
|
{{ statistic.saleFlowerCount || 0 }}
|
</div>
|
</div>
|
<div
|
class="top-container__item cursor-pointer"
|
@click="toRoute('/goods/list')"
|
>
|
<div class="top-container__label">商品管理</div>
|
<div class="top-container__value">{{ statistic.flowerCount || 0 }}</div>
|
</div>
|
<div
|
class="top-container__item cursor-pointer"
|
@click="toRoute('/shop/list')"
|
>
|
<div class="top-container__label">用户管理</div>
|
<div class="top-container__value">
|
{{ statistic.customerCount || 0 }}
|
</div>
|
</div>
|
<div
|
class="top-container__item cursor-pointer"
|
@click="toRoute('/order/list')"
|
>
|
<div class="top-container__label">订单管理</div>
|
<div class="top-container__value">
|
{{ statistic.orderCount || 0 }}
|
</div>
|
</div>
|
</div>
|
<el-row :gutter="22" class="mt-22">
|
<el-col :span="6">
|
<div
|
class="statistic-container cursor-pointer"
|
@click="toRoute('/order/list?statusBackend=SEND')"
|
>
|
<div class="statistic-title">待发货</div>
|
<div class="statistic-num">{{ statistic.orderSendCount || 0 }}</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div
|
class="statistic-container cursor-pointer"
|
@click="toRoute('/goods/list?status=UP')"
|
>
|
<div class="statistic-title">在售商品</div>
|
<div class="statistic-num">{{ statistic.flowerUpCount || 0 }}</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div
|
class="statistic-container cursor-pointer"
|
@click="toRoute('/goods/list?status=PENDING')"
|
>
|
<div class="statistic-title">待审核商品</div>
|
<div class="statistic-num">
|
{{ statistic.flowerPendingCount || 0 }}
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div
|
class="statistic-container cursor-pointer"
|
@click="toRoute('/order/after-sale?status=PENDING')"
|
>
|
<div class="statistic-title">待售后处理</div>
|
<div class="statistic-num">{{ statistic.orderSalesCount || 0 }}</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="statistic-container">
|
<div class="statistic-title">总销售金额</div>
|
<div class="statistic-num">{{ statistic.totalSaleAmount || 0 }}</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="statistic-container">
|
<div class="statistic-title">总销售扎数</div>
|
<div class="statistic-num">
|
{{ statistic.totalSaleFlowerCount || 0 }}
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="statistic-container">
|
<div class="statistic-title">供应商待提现</div>
|
<div class="statistic-num">
|
{{ statistic.supplierPendingAmount || 0 }}
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="statistic-container">
|
<div class="statistic-title">供应商已提现</div>
|
<div class="statistic-num">
|
{{ statistic.supplierCompleteAmount || 0 }}
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="22">
|
<el-col :span="8">
|
<div class="rate-container">
|
<div class="flex items-center justify-between mb-16">
|
<div class="text-20 text-mainTitle font-bold">
|
订单量：<span class="text-primary">{{
|
orderStatistic.count || 0
|
}}</span>
|
</div>
|
<el-tag type="primary">今日</el-tag>
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
新增订单量：{{ orderStatistic.countToday || 0 }}
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
日环比：<span :class="getRateClass(orderStatistic.countRate)"
|
>{{ orderStatistic.countRate || 0 }}%</span
|
>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="rate-container">
|
<div class="flex items-center justify-between mb-16">
|
<div class="text-20 text-mainTitle font-bold">
|
供应商数量：<span class="text-primary">{{
|
supplierStatistic.count || 0
|
}}</span>
|
</div>
|
<el-tag type="primary">今日</el-tag>
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
新增供应商：{{ supplierStatistic.countToday || 0 }}
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
日环比：<span :class="getRateClass(supplierStatistic.countRate)"
|
>{{ supplierStatistic.countRate || 0 }}%</span
|
>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="rate-container">
|
<div class="flex items-center justify-between mb-16">
|
<div class="text-20 text-mainTitle font-bold">
|
全部用户量：<span class="text-primary">{{
|
userStatistic.count || 0
|
}}</span>
|
</div>
|
<el-tag type="primary">今日</el-tag>
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
新增用户量：{{ userStatistic.countToday || 0 }}
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
日环比：<span :class="getRateClass(userStatistic.countRate)"
|
>{{ userStatistic.countRate || 0 }}%</span
|
>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="rate-container">
|
<div class="flex items-center justify-between mb-16">
|
<div class="text-20 text-mainTitle font-bold">
|
用户访问量：<span class="text-primary">{{
|
visitStatistic.count || 0
|
}}</span>
|
</div>
|
<el-tag type="primary">今日</el-tag>
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
昨日访问量：{{ visitStatistic.countToday || 0 }}
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
日环比：<span :class="getRateClass(visitStatistic.countRate)"
|
>{{ visitStatistic.countRate || 0 }}%</span
|
>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="rate-container">
|
<div class="flex items-center justify-between mb-16">
|
<div class="text-20 text-mainTitle font-bold">
|
售后订单数量：<span class="text-primary">{{
|
saleStatistic.count || 0
|
}}</span>
|
</div>
|
<el-tag type="primary">今日</el-tag>
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
新增售后量：{{ saleStatistic.countToday || 0 }}
|
</div>
|
<div class="text-14 text-subTitle leading-22">
|
日环比：<span :class="getRateClass(saleStatistic.countRate)"
|
>{{ saleStatistic.countRate || 0 }}%</span
|
>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentDate: this.$elBusUtil.toDate(),
|
statistic: {},
|
orderStatistic: {},
|
supplierStatistic: {},
|
userStatistic: {},
|
visitStatistic: {},
|
saleStatistic: {},
|
}
|
},
|
head() {
|
return {
|
title: '首页',
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
async init() {
|
const [
|
res1,
|
res2,
|
res3,
|
orderRes,
|
supplierRes,
|
userRes,
|
visitRes,
|
saleRes,
|
] = await Promise.all([
|
this.$elBusHttp.request('flower/api/statistics/sale/date', {
|
params: { date: this.currentDate },
|
}),
|
this.$elBusHttp.request('flower/api/statistics/flower/count'),
|
this.$elBusHttp.request('flower/api/statistics/order/amount'),
|
this.$elBusHttp.request('flower/api/statistics/order/rate', {
|
params: { date: this.currentDate },
|
}),
|
this.$elBusHttp.request('flower/api/statistics/supplier/rate', {
|
params: { date: this.currentDate },
|
}),
|
this.$elBusHttp.request('flower/api/statistics/customer/rate', {
|
params: { date: this.currentDate },
|
}),
|
this.$elBusHttp.request('flower/api/statistics/customer/visit/rate', {
|
params: { date: this.currentDate },
|
}),
|
this.$elBusHttp.request('flower/api/statistics/sales/rate', {
|
params: { date: this.currentDate },
|
}),
|
])
|
this.statistic = { ...res1?.data, ...res2?.data, ...res3?.data }
|
this.orderStatistic = orderRes?.data || {}
|
this.supplierStatistic = supplierRes?.data || {}
|
this.userStatistic = userRes?.data || {}
|
this.visitStatistic = visitRes?.data || {}
|
this.saleStatistic = saleRes?.data || {}
|
},
|
getRateClass(rate) {
|
if (rate > 0) {
|
return 'text-success'
|
} else if (rate === 0) {
|
return ''
|
} else {
|
return 'text-danger'
|
}
|
},
|
toRoute(url) {
|
this.$router.push(url)
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/statistic/index.scss';
|
.home-page {
|
.top-container {
|
width: 100%;
|
display: flex;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
|
padding: 30px;
|
&__item {
|
background-color: #f4faff;
|
border-radius: 2px;
|
text-align: center;
|
flex: 1;
|
height: 110px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
&:not(:last-child) {
|
margin-right: 22px;
|
}
|
}
|
&__label {
|
font-size: 20px;
|
color: $main-title-color;
|
font-weight: bold;
|
margin-bottom: 6px;
|
}
|
&__value {
|
font-size: 16px;
|
color: $primary-color;
|
}
|
}
|
.statistic-container {
|
background-color: #fff;
|
box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
|
border-radius: 4px;
|
height: 110px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 22px;
|
}
|
.rate-container {
|
width: 100%;
|
background-color: #fff;
|
box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
|
padding: 20px;
|
margin-bottom: 22px;
|
}
|
}
|
</style>
|
