jnc-admin/playground/src/views/dashboard/analytics/statistics-overview.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {
  getStatisticsOverview,
} from '#/api/agent';
import type { AgentApi } from '#/api/agent';

interface OverviewItem {
  title: string;
  value: number;
  prefix?: string;
  suffix?: string;
}

const loading = ref(false);
const overviews = ref<OverviewItem[]>([]);

async function loadOverview() {
  loading.value = true;
  try {
    const data = await getStatisticsOverview();
    overviews.value = [
      {
        title: '代理总数',
        value: data.total_agents,
      },
      {
        title: '今日新增代理',
        value: data.today_new_agents,
      },
      {
        title: '总订单数',
        value: data.total_orders,
      },
      {
        title: '今日订单数',
        value: data.today_orders,
      },
      {
        title: '总订单金额',
        value: data.total_order_amount,
        prefix: '¥',
      },
      {
        title: '今日订单金额',
        value: data.today_order_amount,
        prefix: '¥',
      },
      {
        title: '总佣金支出',
        value: data.total_commission,
        prefix: '¥',
      },
      {
        title: '今日佣金支出',
        value: data.today_commission,
        prefix: '¥',
      },
      {
        title: '本月订单金额',
        value: data.month_order_amount,
        prefix: '¥',
      },
      {
        title: '本月佣金支出',
        value: data.month_commission,
        prefix: '¥',
      },
      {
        title: '待审核提现',
        value: data.pending_withdraw,
        prefix: '¥',
      },
    ];
  } catch (error) {
    console.error('Failed to load statistics overview:', error);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  loadOverview();
});
</script>

<template>
  <div class="statistics-overview">
    <a-spin :spinning="loading">
      <a-row :gutter="[16, 16]">
        <a-col
          v-for="(item, index) in overviews"
          :key="index"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <a-card class="overview-card">
            <a-statistic
              :title="item.title"
              :value="item.value"
              :prefix="item.prefix"
              :precision="item.prefix ? 2 : 0"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<style lang="less" scoped>
.statistics-overview {
  .overview-card {
    :deep(.ant-card-body) {
      padding: 20px;
    }
  }
}
</style>