shuhi-ui/src/views/statistic/overview/index.vue

<template>
  <ele-page flex-table>
    <ele-card flex-table>
      <map-card class="flex-1" />

      <div class="flex gap-10">
        <div class="flex-1 stat-card">
          <el-statistic
            title="总审核单量"
            :value="268500"
            value-style="font-size:30px;color:#409eef"
          />
        </div>
        <div class="flex-1 stat-card">
          <el-statistic
            title="总审核本数"
            :value="268500"
            value-style="font-size:30px;color:#409eef"
          />
        </div>
        <div class="flex-1 stat-card">
          <el-statistic
            title="总审核金额"
            :value="268500"
            value-style="font-size:30px;color:#409eef"
          />
        </div>
        <div class="flex-1 stat-card">
          <el-statistic
            title="总用户人数"
            :value="268500"
            value-style="font-size:30px;color:#409eef"
          />
        </div>
      </div>
      <el-divider></el-divider>
      <div class="flex gap-4">
        <div class="flex-1 stat-card">
          <stat-card title="回收订单数"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="回收数量（本）"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="回收单本均价"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="待审核订单数"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="待签收订单数"></stat-card>
        </div>
      </div>
      <div class="flex gap-4 mt-4">
        <div class="flex-1 stat-card">
          <stat-card title="今日扫描次数"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="今日扫描人数"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="用户增长数"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="待审核金额"></stat-card>
        </div>
        <div class="flex-1 stat-card">
          <stat-card title="待打款金额"></stat-card>
        </div>
      </div>
      <el-divider></el-divider>

      <div class="flex gap-4">
        <div style="flex: 4" class="flex flex-col">
          <div class="flex gap-4">
            <div class="flex-1 stat-card">
              <stat-card title="回收订单数"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="回收数量（本）"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="回收单本均价"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="审核订单数"></stat-card>
            </div>
          </div>
          <div class="flex gap-4 mt-4">
            <div class="flex-1 stat-card">
              <stat-card title="签收订单数"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="扫描次数"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="扫描人数"></stat-card>
            </div>
            <div class="flex-1 stat-card">
              <stat-card title="用户增长数"></stat-card>
            </div>
          </div>
        </div>

        <div class="flex-1 flex flex-col stat-card">
            <pie-chart />
            <pie-chart />
        </div>
      </div>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import mapCard from '@/views/statistic/overview/components/map-card.vue';
  import statCard from '@/views/statistic/overview/components/stat-card.vue';
  import pieChart from '@/views/statistic/overview/components/pie-chart.vue'
</script>

<style lang="scss">
  .stat-card {
    border-radius: 10px;
    background: #f8f7f6;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .el-statistic__head {
      text-align: center;
    }
  }
</style>