From 3995f4bd129fee27b1085534e2231d68b7a970d8 Mon Sep 17 00:00:00 2001
From: mayf <m13160102112@163.com>
Date: 星期五, 25 十月 2024 17:28:52 +0800
Subject: [PATCH] 首页统计
---
tailwind.config.js | 2
pages/goods/list/index.vue | 2
pages/order/after-sale/index.vue | 2
pages/home.vue | 346 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
pages/order/list/index.vue | 2
5 files changed, 351 insertions(+), 3 deletions(-)
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index db1a79b..e0b3187 100644
--- a/pages/goods/list/index.vue
+++ b/pages/goods/list/index.vue
@@ -106,7 +106,7 @@
hasAll: true,
childType: 'el-radio-button',
},
- default: '',
+ default: this.$route.query.status || '',
span: 24,
searchImmediately: true,
},
diff --git a/pages/home.vue b/pages/home.vue
new file mode 100644
index 0000000..de37955
--- /dev/null
+++ b/pages/home.vue
@@ -0,0 +1,346 @@
+<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>
diff --git a/pages/order/after-sale/index.vue b/pages/order/after-sale/index.vue
index 5947a23..b1b99cf 100644
--- a/pages/order/after-sale/index.vue
+++ b/pages/order/after-sale/index.vue
@@ -71,7 +71,7 @@
},
// code: 'ORDER_SALES_STATUS',
},
- default: '',
+ default: this.$route.query.status || '',
span: 24,
searchImmediately: true,
on: {
diff --git a/pages/order/list/index.vue b/pages/order/list/index.vue
index 706be30..8533b52 100644
--- a/pages/order/list/index.vue
+++ b/pages/order/list/index.vue
@@ -124,7 +124,7 @@
},
// code: 'ORDER_STATUS_BACKEND',
},
- default: '',
+ default: this.$route.query.statusBackend || '',
span: 24,
searchImmediately: true,
on: {
diff --git a/tailwind.config.js b/tailwind.config.js
index db07e32..754de95 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,8 @@
mainTitle: '#333',
subTitle: '#666',
tip: '#999',
+ danger: 'rgb(245, 108, 108)',
+ success: '#67c23a',
},
},
// 内边距
--
Gitblit v1.9.3