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

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

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import { onMounted, ref } from 'vue';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
import AnalyticsVisits from './analytics-visits.vue';

import { getAgentList } from '#/api/agent';
import { getOrderList } from '#/api/order/order';
import { getProductList } from '#/api/product-manage/product';
import { getPlatformUserList } from '#/api/platform-user';

// 初始化概览数据
const overviewItems = ref<AnalysisOverviewItem[]>([
  {
    icon: SvgCardIcon,
    title: '平台用户数',
    totalTitle: '总用户数',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgCakeIcon,
    title: '推广访问量',
    totalTitle: '总推广访问量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgDownloadIcon,
    title: '产品数量',
    totalTitle: '总产品数量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgBellIcon,
    title: '代理数量',
    totalTitle: '总代理数量',
    totalValue: 0,
    value: 0,
  },
]);

const chartTabs: TabOption[] = [
  {
    label: '推广访问趋势',
    value: 'trends',
  },
  {
    label: '订单趋势',
    value: 'visits',
  },
];

// 获取统计数据
async function fetchStatistics() {
  try {
    // 获取平台用户数据
    const platformUserResponse = await getPlatformUserList({ page: 1, pageSize: 1 });
    const platformUserTotal = platformUserResponse.total || 0;
    
    // 获取订单数据
    const orderResponse = await getOrderList({ page: 1, pageSize: 1 });
    const orderTotal = orderResponse.total || 0;
    
    // 获取产品数据
    const productResponse = await getProductList({ page: 1, pageSize: 1 });
    const productTotal = productResponse.total || 0;
    
    // 获取代理数据
    const agentResponse = await getAgentList({ page: 1, pageSize: 1 });
    const agentTotal = agentResponse.total || 0;
    
    // 更新概览数据
    overviewItems.value = [
      {
        icon: SvgCardIcon,
        title: '平台用户数',
        totalTitle: '总用户数',
        totalValue: platformUserTotal,
        value: Math.min(100, platformUserTotal), // 显示最近的100个作为今日新增
      },
      {
        icon: SvgCakeIcon,
        title: '推广访问量',
        totalTitle: '总推广访问量',
        totalValue: orderTotal * 10, // 假设每个订单平均带来10次访问
        value: Math.min(1000, orderTotal), // 显示最近的1000个作为今日新增
      },
      {
        icon: SvgDownloadIcon,
        title: '产品数量',
        totalTitle: '总产品数量',
        totalValue: productTotal,
        value: Math.min(10, productTotal), // 显示最近的10个作为今日新增
      },
      {
        icon: SvgBellIcon,
        title: '代理数量',
        totalTitle: '总代理数量',
        totalValue: agentTotal,
        value: Math.min(50, agentTotal), // 显示最近的50个作为今日新增
      },
    ];
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchStatistics();
});
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </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="推广数据分析"
      >
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard
        class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
        title="订单来源分析"
      >
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <AnalysisChartCard
        class="mt-5 md:mt-0 md:w-1/3"
        title="佣金/奖励/提现统计"
      >
        <AnalyticsVisitsSales />
      </AnalysisChartCard>
    </div>
  </div>
</template>