<script lang="ts" setup>
|
import type { TabOption } from '@vben/types';
|
|
import { computed, ref } from 'vue';
|
|
import { AnalysisChartCard, AnalysisChartsTabs } from '@vben/common-ui';
|
|
import { useBaseStore } from '#/store';
|
|
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 GrowCard from './grow-card.vue';
|
|
const chartTabs: TabOption[] = [
|
{
|
label: '流量趋势',
|
value: 'trends',
|
},
|
{
|
label: '月访问量',
|
value: 'visits',
|
},
|
];
|
const loading = ref(true);
|
const baseStore = useBaseStore();
|
|
const getSysConfig = computed(() => baseStore.getSysConfig);
|
|
setTimeout(() => {
|
loading.value = false;
|
}, 500);
|
</script>
|
|
<template>
|
<div class="home-default-container">
|
<GrowCard :loading="loading" class="enter-y" />
|
<AnalysisChartsTabs :tabs="chartTabs" class="enter-y !my-[10px]" :loading="loading">
|
<template #trends>
|
<AnalyticsTrends />
|
</template>
|
<template #visits>
|
<AnalyticsVisits />
|
</template>
|
</AnalysisChartsTabs>
|
<div class="enter-y w-full md:flex">
|
<AnalysisChartCard class="mt-[10px] md:mr-[10px] md:mt-0 md:w-1/3" title="访问数量" :loading="loading">
|
<AnalyticsVisitsData />
|
</AnalysisChartCard>
|
<AnalysisChartCard class="mt-[10px] md:mr-[10px] md:mt-0 md:w-1/3" title="访问来源" :loading="loading">
|
<AnalyticsVisitsSource />
|
</AnalysisChartCard>
|
<AnalysisChartCard class="mt-[10px] md:mt-0 md:w-1/3" title="成交占比" :loading="loading">
|
<AnalyticsVisitsSales />
|
</AnalysisChartCard>
|
</div>
|
<p class="copyright enter-y">{{ getSysConfig?.copyright }}</p>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.home-default-container {
|
position: relative;
|
height: 100%;
|
overflow: hidden auto;
|
|
.card-box,
|
.bg-card {
|
border: unset;
|
}
|
|
.copyright {
|
padding: 20px 0 10px;
|
font-size: 14px;
|
color: #999;
|
text-align: center;
|
}
|
}
|
</style>
|
