jnc-admin/apps/web-antd/src/views/dashboard/analytics/index.vue

<script lang="ts" setup>
import type { TabOption } from '@vben/types';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
} from '@vben/common-ui';

import StatisticsOverview from './statistics-overview.vue';
import AgentRankingTable from './agent-ranking-table.vue';
import AgentTrendsChart from './agent-trends-chart.vue';
import OrderTrendsChart from './order-trends-chart.vue';
import ProductDistributionChart from './product-distribution-chart.vue';
import RegionDistributionChart from './region-distribution-chart.vue';

const chartTabs: TabOption[] = [
  {
    label: '订单趋势',
    value: 'order-trends',
  },
  {
    label: '代理注册趋势',
    value: 'agent-trends',
  },
];
</script>

<template>
  <div class="p-5">
    <!-- 统计概览 -->
    <StatisticsOverview />

    <!-- 趋势图表 -->
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #order-trends>
        <OrderTrendsChart />
      </template>
      <template #agent-trends>
        <AgentTrendsChart />
      </template>
    </AnalysisChartsTabs>

    <!-- 分布图表和排行榜 -->
    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="产品订单分布">
        <ProductDistributionChart />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="区域代理分布">
        <RegionDistributionChart />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="代理排行榜">
        <AgentRankingTable />
      </AnalysisChartCard>
    </div>
  </div>
</template>