首页统计

mayf

2024-10-25 3995f4bd129fee27b1085534e2231d68b7a970d8

首页统计

 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,
              },

 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>

 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: {

 pages/order/list/index.vue

@@ -124,7 +124,7 @@
                  },
                  // code: 'ORDER_STATUS_BACKEND',
                },
                default: '',
                default: this.$route.query.statusBackend || '',
                span: 24,
                searchImmediately: true,
                on: {

 tailwind.config.js

@@ -32,6 +32,8 @@
        mainTitle: '#333',
        subTitle: '#666',
        tip: '#999',
        danger: 'rgb(245, 108, 108)',
        success: '#67c23a',
      },
    },
    // 内边距