<template>
|
<div class="home-page">
|
<div class="block-container">
|
<div class="block-container__title">待办事项</div>
|
<el-row :gutter="30">
|
<el-col v-for="item in todoList" :key="item.key" :span="6">
|
<div class="simple-item is-cursor" @click="toRoute(item.url)">
|
<img :src="item.icon" class="simple-item__img" />
|
<div>
|
<div class="simple-item__value">
|
{{ statistic[item.key] || 0 }}
|
</div>
|
<div class="simple-item__label">{{ item.label }}</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="block-container">
|
<div class="block-container__title">销售数据</div>
|
<el-row :gutter="30">
|
<el-col
|
v-for="item in saleList"
|
:key="item.key"
|
:span="6"
|
class="bg-wrapper"
|
>
|
<div class="bg-item">
|
<div class="bg-item__label">{{ item.label }}</div>
|
<div class="bg-item__value">{{ statistic[item.key] || 0 }}</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="block-container">
|
<div class="block-container__title">供应商财务</div>
|
<el-row :gutter="30">
|
<el-col v-for="item in supplierFinanceList" :key="item.key" :span="6">
|
<div class="simple-item">
|
<img :src="item.icon" class="simple-item__img" />
|
<div>
|
<div class="simple-item__value">
|
{{ statistic[item.key] || 0 }}
|
</div>
|
<div class="simple-item__label">{{ item.label }}</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="block-container">
|
<div class="block-container__title">商品数据</div>
|
<el-row :gutter="30">
|
<el-col v-for="item in goodsList" :key="item.key" :span="6">
|
<div class="simple-item is-cursor" @click="toRoute(item.url)">
|
<img :src="item.icon" class="simple-item__img" />
|
<div>
|
<div class="simple-item__value">
|
{{ statistic[item.key] || 0 }}
|
</div>
|
<div class="simple-item__label">{{ item.label }}</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="block-container">
|
<div class="block-container__title">店铺数据</div>
|
<el-row :gutter="30">
|
<el-col v-for="item in shopList" :key="item.key" :span="6">
|
<div class="rate-container">
|
<div class="rate-container__title">
|
{{ item.title }}：{{ getRateValue(item.key, 'count') || 0 }}
|
</div>
|
<div class="rate-container__desc">
|
<div>
|
{{ item.desc }}：{{ getRateValue(item.key, 'countToday') || 0 }}
|
</div>
|
<div :class="getRateClass(getRateValue(item.key, 'countRate'))">
|
日环比：{{ getRateValue(item.key, 'countRate') || 0 }}%
|
<img
|
v-if="getRateValue(item.key, 'countRate') > 0"
|
src="~static/images/home/up.png"
|
class="rate-container__img"
|
/>
|
<img
|
v-if="getRateValue(item.key, 'countRate') < 0"
|
src="~static/images/home/down.png"
|
class="rate-container__img"
|
/>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentDate: this.$elBusUtil.toDate(),
|
statistic: {},
|
orderStatistic: {},
|
supplierStatistic: {},
|
userStatistic: {},
|
visitStatistic: {},
|
saleStatistic: {},
|
todoList: [
|
{
|
label: '待发货',
|
key: 'orderSendCount',
|
icon: require('@/static/images/home/dfh.png'),
|
url: '/order/list?statusBackend=SEND',
|
},
|
{
|
label: '待审核商品',
|
key: 'flowerPendingCount',
|
icon: require('@/static/images/home/dshsp.png'),
|
url: '/goods/list?status=PENDING',
|
},
|
{
|
label: '待售后处理',
|
key: 'orderSalesCount',
|
icon: require('@/static/images/home/dshcl.png'),
|
url: '/order/after-sale?status=PENDING',
|
},
|
],
|
saleList: [
|
{
|
label: '今日销售额（元）',
|
key: 'saleAmount',
|
},
|
{
|
label: '今日销售扎数（个）',
|
key: 'saleFlowerCount',
|
},
|
{
|
label: '总销售金额（元）',
|
key: 'totalSaleAmount',
|
},
|
{
|
label: '总销售扎数（个）',
|
key: 'totalSaleFlowerCount',
|
},
|
],
|
supplierFinanceList: [
|
{
|
label: '供应商待提现（元）',
|
key: 'supplierPendingAmount',
|
icon: require('@/static/images/home/gysdtx.png'),
|
},
|
{
|
label: '供应商已提现（元）',
|
key: 'supplierCompleteAmount',
|
icon: require('@/static/images/home/gysytx.png'),
|
},
|
],
|
goodsList: [
|
{
|
label: '商品管理',
|
key: 'flowerCount',
|
icon: require('@/static/images/home/spgl.png'),
|
url: '/goods/list',
|
},
|
{
|
label: '在售商品',
|
key: 'flowerUpCount',
|
icon: require('@/static/images/home/zssp.png'),
|
url: '/goods/list?status=UP',
|
},
|
{
|
label: '用户管理',
|
key: 'customerCount',
|
icon: require('@/static/images/home/yhgl.png'),
|
url: '/shop/list',
|
},
|
{
|
label: '订单管理',
|
key: 'orderCount',
|
icon: require('@/static/images/home/ddgl.png'),
|
url: '/order/list',
|
},
|
],
|
shopList: [
|
{
|
title: '订单量',
|
desc: '新增订单量',
|
key: 'orderStatistic',
|
},
|
{
|
title: '供应商数量',
|
desc: '新增供应商',
|
key: 'supplierStatistic',
|
},
|
{
|
title: '全部用户量',
|
desc: '新增用户量',
|
key: 'userStatistic',
|
},
|
{
|
title: '用户访问量',
|
desc: '昨日访问量',
|
key: 'visitStatistic',
|
},
|
{
|
title: '售后订单数量',
|
desc: '新增售后量',
|
key: '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 'text-danger'
|
} else {
|
return ''
|
}
|
},
|
toRoute(url) {
|
this.$router.push(url)
|
},
|
getRateValue(key1, key2) {
|
return this[key1]?.[key2]
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/* prettier-ignore */
|
.home-page {
|
.block-container {
|
&:not(:last-child) {
|
margin-bottom: 36PX;
|
}
|
&__title {
|
font-size: 24PX;
|
color: $main-title-color;
|
font-weight: bold;
|
margin-bottom: 10PX;
|
}
|
.simple-item {
|
width: 100%;
|
height: 123PX;
|
background-color: #fff;
|
box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&.is-cursor {
|
cursor: pointer;
|
}
|
&__img {
|
width: 60PX;
|
height: 60PX;
|
margin-right: 22PX;
|
}
|
&__value {
|
font-size: 24PX;
|
color: $main-title-color;
|
font-weight: bold;
|
text-align: center;
|
}
|
&__label {
|
font-size: 18PX;
|
color: $sub-title-color;
|
text-align: center;
|
}
|
}
|
.bg-item {
|
width: 100%;
|
height: 123PX;
|
position: relative;
|
padding-left: 24PX;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
|
&::after {
|
content: '';
|
width: 111PX;
|
height: 94PX;
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
&__value {
|
font-size: 28PX;
|
color: #fff;
|
font-weight: bold;
|
}
|
&__label {
|
font-size: 18PX;
|
color: #fff;
|
}
|
}
|
.bg-wrapper {
|
&:nth-child(1),
|
&:nth-child(2) {
|
.bg-item {
|
background: linear-gradient(136deg, #31bdff 0%, #1688fe 100%);
|
}
|
}
|
&:nth-child(3),
|
&:nth-child(4) {
|
.bg-item {
|
background: linear-gradient(135deg, #3ad1ea 0%, #01c0d6 100%);
|
}
|
}
|
&:nth-child(odd) {
|
.bg-item {
|
&::after {
|
background: url(~static/images/home/jrxse.png) no-repeat center/cover;
|
}
|
}
|
}
|
&:nth-child(even) {
|
.bg-item {
|
&::after {
|
background: url(~static/images/home/jrxszs.png) no-repeat center/cover;
|
}
|
}
|
}
|
}
|
.rate-container {
|
width: 100%;
|
height: 123PX;
|
background-color: #fff;
|
box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 0 24PX;
|
margin-bottom: 24PX;
|
&::after {
|
content: '今日';
|
width: 59PX;
|
height: 24PX;
|
background-color: #dcedff;
|
font-size: 14PX;
|
color: $primary-color;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
&__title {
|
font-size: 20PX;
|
color: $main-title-color;
|
font-weight: bold;
|
margin-bottom: 10PX;
|
}
|
&__desc {
|
font-size: 16PX;
|
color: $sub-title-color;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
&__img {
|
width: 16PX;
|
height: 16PX;
|
position: relative;
|
top: 2PX;
|
}
|
}
|
}
|
}
|
</style>
|
