1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <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 AnalyticsTrends from './analytics-trends.vue';
| import AnalyticsVisits from './analytics-visits.vue';
| import AnalyticsVisitsData from './analytics-visits-data.vue';
| import AnalyticsVisitsSales from './analytics-visits-sales.vue';
| import AnalyticsVisitsSource from './analytics-visits-source.vue';
|
| const overviewItems: AnalysisOverviewItem[] = [
| {
| icon: SvgCardIcon,
| title: '用户量',
| totalTitle: '总用户量',
| totalValue: 120_000,
| value: 2000,
| },
| {
| icon: SvgCakeIcon,
| title: '访问量',
| totalTitle: '总访问量',
| totalValue: 500_000,
| value: 20_000,
| },
| {
| icon: SvgDownloadIcon,
| title: '下载量',
| totalTitle: '总下载量',
| totalValue: 120_000,
| value: 8000,
| },
| {
| icon: SvgBellIcon,
| title: '使用量',
| totalTitle: '总使用量',
| totalValue: 50_000,
| value: 5000,
| },
| ];
|
| const chartTabs: TabOption[] = [
| {
| label: '流量趋势',
| value: 'trends',
| },
| {
| label: '月访问量',
| value: 'visits',
| },
| ];
| </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>
|
|
