5cc74ac42c
Some checks are pending
CI / Test (ubuntu-latest) (push) Waiting to run
CI / Test (windows-latest) (push) Waiting to run
CI / Lint (ubuntu-latest) (push) Waiting to run
CI / Lint (windows-latest) (push) Waiting to run
CI / Check (ubuntu-latest) (push) Waiting to run
CI / Check (windows-latest) (push) Waiting to run
CI / CI OK (push) Blocked by required conditions
CodeQL / Analyze (${{ matrix.language }}) (none, javascript-typescript) (push) Waiting to run
Deploy Website on push / Deploy Push Playground Ftp (push) Waiting to run
Deploy Website on push / Deploy Push Docs Ftp (push) Waiting to run
Deploy Website on push / Deploy Push Antd Ftp (push) Waiting to run
Deploy Website on push / Deploy Push Element Ftp (push) Waiting to run
Deploy Website on push / Deploy Push Naive Ftp (push) Waiting to run
Release Drafter / update_release_draft (push) Waiting to run
112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import type { AnalysisOverviewItem } from '@vben/common-ui';
|
|
import type { TabOption } from '@vben/types';
|
|
import { getstatisticsInfo } from '#/api/core/statistics';
|
|
import {
|
|
AnalysisChartCard,
|
|
AnalysisChartsTabs,
|
|
AnalysisOverview,
|
|
} from '@vben/common-ui';
|
|
|
|
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 = ref<AnalysisOverviewItem[]>([
|
|
{
|
|
icon: 'lets-icons:user',
|
|
title: '今日注册',
|
|
totalTitle: '总用户量',
|
|
totalValue: 100,
|
|
value: 100,
|
|
},
|
|
{
|
|
icon: 'icon-park-solid:paper-money',
|
|
title: '今日充值',
|
|
totalTitle: '总充值',
|
|
totalValue: 100,
|
|
value: 100,
|
|
decimals: 2,
|
|
},
|
|
{
|
|
icon: 'fluent:people-money-24-regular',
|
|
title: '今日充值人数',
|
|
totalTitle: '总充值人数',
|
|
totalValue: 0,
|
|
value: 0,
|
|
},
|
|
{
|
|
icon: 'iconamoon:sign-percent',
|
|
title: '次留',
|
|
totalTitle: 'ARPU',
|
|
totalValue: 31.02,
|
|
value: 0.12,
|
|
decimals: 2,
|
|
},
|
|
]);
|
|
|
|
|
|
onMounted(async () => {
|
|
const data = await getstatisticsInfo({ AppId: 0 });
|
|
if (data) {
|
|
if (overviewItems.value[0]) {
|
|
overviewItems.value[0].value = data.register;
|
|
overviewItems.value[0].totalValue = data.totalRegister;
|
|
}
|
|
if (overviewItems.value[1]) {
|
|
overviewItems.value[1].value = data.recharge;
|
|
overviewItems.value[1].totalValue = data.totalRecharge;
|
|
}
|
|
if (overviewItems.value[2]) {
|
|
overviewItems.value[2].value = data.rechargeUser;
|
|
overviewItems.value[2].totalValue = data.totalRechargeUser;
|
|
}
|
|
if (overviewItems.value[3]) {
|
|
overviewItems.value[3].value = data.remain;
|
|
overviewItems.value[3].totalValue = data.totalRecharge / data.totalRegister;
|
|
}
|
|
}
|
|
|
|
});
|
|
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>
|