57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
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>
|