1790 lines
55 KiB
Vue
1790 lines
55 KiB
Vue
<script lang="ts" setup>
|
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
|
|
import type {
|
|
CountryDashboardGameMetric,
|
|
CountryDashboardMetric,
|
|
CountryDashboardRechargeDetail,
|
|
CountryDashboardResult,
|
|
} from '#/api/legacy/datav';
|
|
|
|
import {
|
|
computed,
|
|
nextTick,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
} from 'vue';
|
|
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { useAccessStore } from '@vben/stores';
|
|
|
|
import {
|
|
Button,
|
|
DateRangePicker,
|
|
Empty,
|
|
Input,
|
|
message,
|
|
Modal,
|
|
Select,
|
|
Space,
|
|
Spin,
|
|
Table,
|
|
TabPane,
|
|
Tabs,
|
|
Tooltip,
|
|
} from 'antdv-next';
|
|
import dayjs from 'dayjs';
|
|
import timezone from 'dayjs/plugin/timezone';
|
|
import utc from 'dayjs/plugin/utc';
|
|
|
|
import {
|
|
countryDashboard,
|
|
countryDashboardGameCountryRank,
|
|
countryDashboardGameSummaries,
|
|
countryDashboardRechargeDetails,
|
|
} from '#/api/legacy/datav';
|
|
import SysOriginSelect from '#/components/sys-origin-select.vue';
|
|
import { getAllowedSysOrigins } from '#/views/system/shared';
|
|
|
|
import LatestPurchaseList from './components/latest-purchase-list.vue';
|
|
import PurchaseCount from './components/purchase-count.vue';
|
|
|
|
defineOptions({ name: 'StatisticsDatav' });
|
|
|
|
dayjs.extend(utc);
|
|
dayjs.extend(timezone);
|
|
|
|
const DEFAULT_STAT_TIMEZONE = 'Asia/Riyadh';
|
|
|
|
const accessStore = useAccessStore();
|
|
|
|
const datavFullscreen = ref<HTMLElement>();
|
|
const fullscreen = ref(false);
|
|
const visualMode = ref(false);
|
|
const loading = ref(false);
|
|
const dashboard = ref<CountryDashboardResult | null>(null);
|
|
const activeTableTab = ref<'game' | 'overview' | 'recharge'>('overview');
|
|
const arpuDashboards = ref<{
|
|
day: CountryDashboardResult | null;
|
|
threeDay: CountryDashboardResult | null;
|
|
week: CountryDashboardResult | null;
|
|
}>({
|
|
day: null,
|
|
threeDay: null,
|
|
week: null,
|
|
});
|
|
const initialDate = dayjs().tz(DEFAULT_STAT_TIMEZONE);
|
|
const dateRange = ref<[string, string] | null>([
|
|
initialDate.subtract(6, 'day').format('YYYY-MM-DD'),
|
|
initialDate.format('YYYY-MM-DD'),
|
|
]);
|
|
const selectedCountryCodes = ref<string[]>([]);
|
|
const rechargeDetailOpen = ref(false);
|
|
const rechargeDetailLoading = ref(false);
|
|
const rechargeDetailRecords = ref<CountryDashboardRechargeDetail[]>([]);
|
|
const rechargeDetailPagination = reactive({
|
|
current: 1,
|
|
pageSize: 100,
|
|
total: 0,
|
|
});
|
|
const gameMetricLoading = ref(false);
|
|
const gameMetricRecords = ref<CountryDashboardGameMetric[]>([]);
|
|
const gameMetricPagination = reactive({
|
|
current: 1,
|
|
pageSize: 50,
|
|
total: 0,
|
|
});
|
|
const gameMetricSorter = reactive<{
|
|
field?: string;
|
|
order?: 'ascend' | 'descend';
|
|
}>({
|
|
field: 'consumeAmount',
|
|
order: 'descend',
|
|
});
|
|
const gameCountryRankOpen = ref(false);
|
|
const gameCountryRankLoading = ref(false);
|
|
const gameCountryRankRecords = ref<CountryDashboardGameMetric[]>([]);
|
|
const selectedGameMetric = ref<null | Partial<CountryDashboardGameMetric>>(null);
|
|
const gameQuery = reactive<{
|
|
gameKeyword: string;
|
|
gameProvider?: string;
|
|
}>({
|
|
gameKeyword: '',
|
|
gameProvider: undefined,
|
|
});
|
|
|
|
const query = reactive({
|
|
periodType: 'DAY',
|
|
statTimezone: DEFAULT_STAT_TIMEZONE,
|
|
sysOrigin: '',
|
|
});
|
|
|
|
const userRechargeChartRef = ref<EchartsUIType>();
|
|
const flowChartRef = ref<EchartsUIType>();
|
|
const profitChartRef = ref<EchartsUIType>();
|
|
const luckyChartRef = ref<EchartsUIType>();
|
|
const { renderEcharts: renderUserRechargeChart } = useEcharts(userRechargeChartRef);
|
|
const { renderEcharts: renderFlowChart } = useEcharts(flowChartRef);
|
|
const { renderEcharts: renderProfitChart } = useEcharts(profitChartRef);
|
|
const { renderEcharts: renderLuckyChart } = useEcharts(luckyChartRef);
|
|
type ChartOption = Parameters<typeof renderUserRechargeChart>[0];
|
|
|
|
const accessCodes = computed(() => accessStore.accessCodes || []);
|
|
const gameCountryRankTitle = computed(() => {
|
|
const game = selectedGameMetric.value;
|
|
if (!game) {
|
|
return '国家消耗排名';
|
|
}
|
|
return `${gameDisplayText(game)} 国家消耗排名`;
|
|
});
|
|
const sysOriginOptions = computed(() => {
|
|
const options = getAllowedSysOrigins(accessCodes.value);
|
|
return options.length > 0 ? options : getAllowedSysOrigins([]);
|
|
});
|
|
const permissionsSysOriginCode = computed(() =>
|
|
sysOriginOptions.value.map((item) => String(item.value || '')),
|
|
);
|
|
|
|
const periodTypeOptions = [
|
|
{ label: '日', value: 'DAY' },
|
|
{ label: '周', value: 'WEEK' },
|
|
{ label: '月', value: 'MONTH' },
|
|
{ label: '全部', value: 'ALL' },
|
|
];
|
|
|
|
const statTimezoneOptions = [
|
|
{ label: '利雅得（服务器）', value: 'Asia/Riyadh' },
|
|
{ label: 'UTC', value: 'UTC' },
|
|
{ label: '北京', value: 'Asia/Shanghai' },
|
|
];
|
|
|
|
const gameProviderOptions = [
|
|
{ label: '全部游戏厂商', value: '' },
|
|
{ label: '站内游戏', value: 'INTERNAL' },
|
|
{ label: '百顺', value: 'BAISHUN' },
|
|
{ label: 'Game Open', value: 'GAME_OPEN' },
|
|
{ label: '灵犀', value: 'LINGXIAN' },
|
|
{ label: 'Yomi', value: 'YOMI' },
|
|
{ label: 'HKYS', value: 'HKYS' },
|
|
{ label: 'Hot', value: 'HOT' },
|
|
{ label: '未识别', value: 'UNKNOWN' },
|
|
];
|
|
|
|
const metricColumns = new Set([
|
|
'countryNewUser',
|
|
'd1RetentionRate',
|
|
'd7RetentionRate',
|
|
'd30RetentionRate',
|
|
'dailyActiveUser',
|
|
'dealerRecharge',
|
|
'gamePayout',
|
|
'gamePayoutRate',
|
|
'gameProfit',
|
|
'gameProfitRate',
|
|
'gameTotalFlow',
|
|
'gameUser',
|
|
'giftConsume',
|
|
'googleRecharge',
|
|
'luckyGiftPayout',
|
|
'luckyGiftPayoutRate',
|
|
'luckyGiftProfit',
|
|
'luckyGiftProfitRate',
|
|
'luckyGiftTotalFlow',
|
|
'luckyGiftUser',
|
|
'luckyGiftUserRate',
|
|
'mifapayRecharge',
|
|
'newUserRecharge',
|
|
'salaryExchange',
|
|
'totalRecharge',
|
|
]);
|
|
|
|
const integerMetricColumns = new Set([
|
|
'countryNewUser',
|
|
'dailyActiveUser',
|
|
'gameUser',
|
|
'luckyGiftUser',
|
|
]);
|
|
|
|
const percentMetricColumns = new Set([
|
|
'd1RetentionRate',
|
|
'd7RetentionRate',
|
|
'd30RetentionRate',
|
|
'gamePayoutRate',
|
|
'gameProfitRate',
|
|
'luckyGiftPayoutRate',
|
|
'luckyGiftProfitRate',
|
|
'luckyGiftUserRate',
|
|
]);
|
|
|
|
const summaryMetricKeys = [
|
|
'countryNewUser',
|
|
'dailyActiveUser',
|
|
'newUserRecharge',
|
|
'dealerRecharge',
|
|
'mifapayRecharge',
|
|
'googleRecharge',
|
|
'salaryExchange',
|
|
'totalRecharge',
|
|
'giftConsume',
|
|
'luckyGiftTotalFlow',
|
|
'luckyGiftUser',
|
|
'luckyGiftPayout',
|
|
'luckyGiftProfit',
|
|
'gameTotalFlow',
|
|
'gameUser',
|
|
'gamePayout',
|
|
'gameProfit',
|
|
'd1RetentionUser',
|
|
'd1RetentionBaseUser',
|
|
'd7RetentionUser',
|
|
'd7RetentionBaseUser',
|
|
'd30RetentionUser',
|
|
'd30RetentionBaseUser',
|
|
] as const;
|
|
|
|
const summaryMetricDefinitions = [
|
|
{ key: 'countryNewUser', label: '新增' },
|
|
{ key: 'dailyActiveUser', label: '当日活跃' },
|
|
{ key: 'newUserRecharge', label: '新增充值' },
|
|
{ key: 'dealerRecharge', label: '币商充值' },
|
|
{ key: 'mifapayRecharge', label: 'MifaPay 充值' },
|
|
{ key: 'googleRecharge', label: 'Google 充值' },
|
|
{ key: 'salaryExchange', label: '工资兑换' },
|
|
{ key: 'totalRecharge', label: '总充值' },
|
|
{ key: 'giftConsume', label: '礼物消耗' },
|
|
{ key: 'luckyGiftTotalFlow', label: '幸运礼物流水' },
|
|
{ key: 'luckyGiftUser', label: '幸运礼物参与人数' },
|
|
{ key: 'luckyGiftUserRate', label: '幸运礼物付费率' },
|
|
{ key: 'luckyGiftPayout', label: '幸运礼物返奖' },
|
|
{ key: 'luckyGiftPayoutRate', label: '幸运礼物返奖率' },
|
|
{ key: 'luckyGiftProfit', label: '幸运礼物利润' },
|
|
{ key: 'luckyGiftProfitRate', label: '幸运礼物利润率' },
|
|
{ key: 'gameTotalFlow', label: '游戏流水' },
|
|
{ key: 'gameUser', label: '游戏参与人数' },
|
|
{ key: 'gamePayout', label: '游戏返奖' },
|
|
{ key: 'gamePayoutRate', label: '游戏返奖率' },
|
|
{ key: 'gameProfit', label: '游戏利润' },
|
|
{ key: 'gameProfitRate', label: '游戏利润率' },
|
|
{ key: 'd1RetentionRate', label: '次日留存率' },
|
|
{ key: 'd7RetentionRate', label: '七日留存率' },
|
|
{ key: 'd30RetentionRate', label: '30 日留存率' },
|
|
] as const;
|
|
|
|
type SummaryMetricKey = (typeof summaryMetricDefinitions)[number]['key'];
|
|
type SummaryMetric = Record<string, number>;
|
|
|
|
const summaryColumns = [
|
|
...summaryMetricDefinitions.map((item) => ({
|
|
align: 'right' as const,
|
|
dataIndex: item.key,
|
|
key: item.key,
|
|
title: item.label,
|
|
width: item.key === 'countryNewUser' ? 110 : (String(item.key).includes('Rate') ? 160 : 150),
|
|
})),
|
|
];
|
|
const summaryScrollX = summaryColumns.reduce((totalWidth, item) => totalWidth + item.width, 0);
|
|
|
|
const overviewColumns: any[] = [
|
|
{ dataIndex: 'countryName', fixed: 'left' as const, key: 'countryName', title: '国家', width: 150 },
|
|
{ dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 86 },
|
|
{ dataIndex: 'periodName', key: 'periodName', title: '周期', width: 110 },
|
|
{ align: 'right', dataIndex: 'countryNewUser', key: 'countryNewUser', title: '新增', width: 110 },
|
|
{ align: 'right', dataIndex: 'dailyActiveUser', key: 'dailyActiveUser', title: '当日活跃', width: 120 },
|
|
{ align: 'right', dataIndex: 'd1RetentionRate', key: 'd1RetentionRate', title: '次日留存率', width: 140 },
|
|
{ align: 'right', dataIndex: 'd7RetentionRate', key: 'd7RetentionRate', title: '七日留存率', width: 140 },
|
|
{ align: 'right', dataIndex: 'd30RetentionRate', key: 'd30RetentionRate', title: '30 日留存率', width: 150 },
|
|
{ align: 'right', dataIndex: 'newUserRecharge', key: 'newUserRecharge', title: '新增充值', width: 130 },
|
|
{ align: 'right', dataIndex: 'dealerRecharge', key: 'dealerRecharge', title: '币商充值', width: 130 },
|
|
{ align: 'right', dataIndex: 'mifapayRecharge', key: 'mifapayRecharge', title: 'MifaPay 充值', width: 150 },
|
|
{ align: 'right', dataIndex: 'googleRecharge', key: 'googleRecharge', title: 'Google 充值', width: 140 },
|
|
{ align: 'right', dataIndex: 'salaryExchange', key: 'salaryExchange', title: '工资兑换', width: 130 },
|
|
{ align: 'right', dataIndex: 'totalRecharge', key: 'totalRecharge', title: '总充值', width: 130 },
|
|
{ align: 'right', dataIndex: 'giftConsume', key: 'giftConsume', title: '礼物消耗', width: 130 },
|
|
{ align: 'right', dataIndex: 'luckyGiftTotalFlow', key: 'luckyGiftTotalFlow', title: '幸运礼物流水', width: 150 },
|
|
{ align: 'right', dataIndex: 'luckyGiftUser', key: 'luckyGiftUser', title: '幸运礼物参与人数', width: 170 },
|
|
{ align: 'right', dataIndex: 'luckyGiftUserRate', key: 'luckyGiftUserRate', title: '幸运礼物付费率', width: 160 },
|
|
{ align: 'right', dataIndex: 'luckyGiftPayout', key: 'luckyGiftPayout', title: '幸运礼物返奖', width: 150 },
|
|
{ align: 'right', dataIndex: 'luckyGiftPayoutRate', key: 'luckyGiftPayoutRate', title: '幸运礼物返奖率', width: 160 },
|
|
{ align: 'right', dataIndex: 'luckyGiftProfit', key: 'luckyGiftProfit', title: '幸运礼物利润', width: 150 },
|
|
{ align: 'right', dataIndex: 'luckyGiftProfitRate', key: 'luckyGiftProfitRate', title: '幸运礼物利润率', width: 160 },
|
|
{ align: 'right', dataIndex: 'gameTotalFlow', key: 'gameTotalFlow', title: '游戏流水', width: 130 },
|
|
{ align: 'right', dataIndex: 'gameUser', key: 'gameUser', title: '游戏参与人数', width: 140 },
|
|
{ align: 'right', dataIndex: 'gamePayout', key: 'gamePayout', title: '游戏返奖', width: 130 },
|
|
{ align: 'right', dataIndex: 'gamePayoutRate', key: 'gamePayoutRate', title: '游戏返奖率', width: 140 },
|
|
{ align: 'right', dataIndex: 'gameProfit', key: 'gameProfit', title: '游戏利润', width: 130 },
|
|
{ align: 'right', dataIndex: 'gameProfitRate', key: 'gameProfitRate', title: '游戏利润率', width: 140 },
|
|
].map((column) => ({
|
|
...column,
|
|
sortDirections: ['ascend', 'descend'],
|
|
sorter: compareTableColumn(String(column.dataIndex)),
|
|
}));
|
|
|
|
const rechargeColumns: any[] = [
|
|
{ dataIndex: 'countryName', fixed: 'left' as const, key: 'countryName', title: '国家', width: 150 },
|
|
{ dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 86 },
|
|
{ dataIndex: 'periodName', key: 'periodName', title: '周期', width: 110 },
|
|
{ align: 'right', dataIndex: 'dealerRecharge', key: 'dealerRecharge', title: '币商充值', width: 140 },
|
|
{ align: 'right', dataIndex: 'mifapayRecharge', key: 'mifapayRecharge', title: 'MifaPay 充值', width: 160 },
|
|
{ align: 'right', dataIndex: 'googleRecharge', key: 'googleRecharge', title: 'Google 充值', width: 150 },
|
|
{ align: 'right', dataIndex: 'totalRecharge', key: 'totalRecharge', title: '总充值', width: 140 },
|
|
].map((column) => ({
|
|
...column,
|
|
sortDirections: ['ascend', 'descend'],
|
|
sorter: compareTableColumn(String(column.dataIndex)),
|
|
}));
|
|
|
|
const gameMetricNumberColumns = new Set([
|
|
'consumeAmount',
|
|
'orderCount',
|
|
'payoutAmount',
|
|
'profitAmount',
|
|
'userCount',
|
|
]);
|
|
|
|
const gameMetricIntegerColumns = new Set(['orderCount', 'userCount']);
|
|
|
|
const gameMetricPercentColumns = new Set(['payoutRate', 'profitRate']);
|
|
|
|
const gameMetricColumns: any[] = [
|
|
{ align: 'right' as const, dataIndex: 'rank', fixed: 'left' as const, key: 'rank', title: '排名', width: 72 },
|
|
{ dataIndex: 'gameName', fixed: 'left' as const, key: 'gameName', title: '游戏', width: 240 },
|
|
{ dataIndex: 'gameProvider', key: 'gameProvider', title: '游戏厂商', width: 130 },
|
|
{ dataIndex: 'gameId', key: 'gameId', title: '游戏 ID', width: 150 },
|
|
{
|
|
align: 'right' as const,
|
|
dataIndex: 'consumeAmount',
|
|
key: 'consumeAmount',
|
|
sortDirections: ['descend', 'ascend'],
|
|
sorter: true,
|
|
title: '消耗',
|
|
width: 130,
|
|
},
|
|
{ dataIndex: 'refreshedAt', key: 'refreshedAt', title: '更新时间', width: 170 },
|
|
];
|
|
const gameTableScrollX = gameMetricColumns.reduce(
|
|
(totalWidth, item) => totalWidth + Number(item.width || 0),
|
|
0,
|
|
);
|
|
|
|
const gameCountryRankColumns: any[] = [
|
|
{ align: 'right' as const, dataIndex: 'rank', key: 'rank', title: '排名', width: 72 },
|
|
{ dataIndex: 'countryName', key: 'countryName', title: '国家', width: 180 },
|
|
{ dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 100 },
|
|
{ align: 'right' as const, dataIndex: 'consumeAmount', key: 'consumeAmount', title: '消耗', width: 150 },
|
|
{ dataIndex: 'refreshedAt', key: 'refreshedAt', title: '更新时间', width: 170 },
|
|
];
|
|
const gameCountryRankScrollX = gameCountryRankColumns.reduce(
|
|
(totalWidth, item) => totalWidth + Number(item.width || 0),
|
|
0,
|
|
);
|
|
|
|
const rechargeDetailColumns: any[] = [
|
|
{ dataIndex: 'createTime', key: 'createTime', title: '时间', width: 170 },
|
|
{ dataIndex: 'sourceType', key: 'sourceType', title: '来源', width: 120 },
|
|
{ dataIndex: 'user', key: 'user', title: '用户', width: 240 },
|
|
{ dataIndex: 'country', key: 'country', title: '国家', width: 160 },
|
|
{ align: 'right', dataIndex: 'amount', key: 'amount', title: '充值金额', width: 120 },
|
|
{ align: 'right', dataIndex: 'coinQuantity', key: 'coinQuantity', title: '金币', width: 130 },
|
|
{ dataIndex: 'sourceChannel', key: 'sourceChannel', title: '渠道/类型', width: 150 },
|
|
{ dataIndex: 'remark', key: 'remark', title: '备注', width: 220 },
|
|
];
|
|
const rechargeDetailScrollX = rechargeDetailColumns.reduce(
|
|
(totalWidth, item) => totalWidth + Number(item.width || 0),
|
|
0,
|
|
);
|
|
const rechargeSourceNameMap: Record<string, string> = {
|
|
DEALER: '币商充值',
|
|
MIFAPAY: 'MifaPay 充值',
|
|
OFFICIAL: '官方充值',
|
|
};
|
|
|
|
const activeColumns = computed(() =>
|
|
activeTableTab.value === 'recharge' ? rechargeColumns : overviewColumns,
|
|
);
|
|
const tableScrollX = computed(() =>
|
|
activeColumns.value.reduce((totalWidth, item) => totalWidth + Number(item.width || 0), 0),
|
|
);
|
|
|
|
const rawRecords = computed(() => dashboard.value?.records || []);
|
|
const countryOptions = computed(() => {
|
|
const optionMap = new Map<string, string>();
|
|
for (const item of rawRecords.value) {
|
|
const code = String(item.countryCode || '');
|
|
if (!code || code === 'ALL') {
|
|
continue;
|
|
}
|
|
optionMap.set(code, `${item.countryName || code} / ${code}`);
|
|
}
|
|
return [...optionMap.entries()]
|
|
.map(([value, label]) => ({ label, value }))
|
|
.toSorted((current, next) => current.label.localeCompare(next.label));
|
|
});
|
|
const records = computed(() => {
|
|
return filterRecordsBySelectedCountries(rawRecords.value);
|
|
});
|
|
const chartRecords = computed(() => records.value.filter((item) => item.countryCode !== 'ALL'));
|
|
const visibleSummary = computed(() => buildVisibleSummary(records.value));
|
|
const summaryDataSource = computed(() => {
|
|
const row: Record<string, string> = { key: 'summary' };
|
|
for (const item of summaryMetricDefinitions) {
|
|
row[item.key] = formatSummaryValue(item.key, visibleSummary.value);
|
|
}
|
|
return [row];
|
|
});
|
|
const luckyGameCards = computed(() => {
|
|
const summary = visibleSummary.value;
|
|
return [
|
|
{ label: '幸运礼物参与人数', value: formatInteger(summary.luckyGiftUser) },
|
|
{ label: '幸运礼物付费率', value: formatPercent(summary.luckyGiftUserRate) },
|
|
{ label: '幸运礼物返奖率', value: formatPercent(summary.luckyGiftPayoutRate) },
|
|
{ label: '游戏参与人数', value: formatInteger(summary.gameUser) },
|
|
{ label: '游戏返奖率', value: formatPercent(summary.gamePayoutRate) },
|
|
{ label: '游戏利润率', value: formatPercent(summary.gameProfitRate) },
|
|
];
|
|
});
|
|
const appDataCards = computed(() => {
|
|
const summary = visibleSummary.value;
|
|
return [
|
|
{ label: '当日活跃数', value: formatInteger(summary.dailyActiveUser) },
|
|
{ label: '次日留存率', value: formatPercent(summary.d1RetentionRate) },
|
|
{ label: '七日留存率', value: formatPercent(summary.d7RetentionRate) },
|
|
{ label: '30 日留存率', value: formatPercent(summary.d30RetentionRate) },
|
|
];
|
|
});
|
|
const arpuCards = computed(() => {
|
|
return [
|
|
{ label: '日 ARPU', value: formatArpu(arpuDashboards.value.day) },
|
|
{ label: '3 日 ARPU', value: formatArpu(arpuDashboards.value.threeDay) },
|
|
{ label: '周 ARPU', value: formatArpu(arpuDashboards.value.week) },
|
|
{ label: '筛选 ARPU', value: formatAmount(calcArpu(visibleSummary.value)) },
|
|
];
|
|
});
|
|
const totalRechargeCard = computed(() => ({
|
|
label: '总充值',
|
|
value: formatAmount(visibleSummary.value.totalRecharge),
|
|
}));
|
|
|
|
function hasPermission(code: string) {
|
|
const codes = accessCodes.value;
|
|
return codes.length === 0 || codes.includes(code);
|
|
}
|
|
|
|
const canQuery = computed(() => hasPermission('datav:query'));
|
|
const canPaidPreview = computed(() => hasPermission('datav:paid:preview'));
|
|
const currentTimezoneLabel = computed(() => {
|
|
return statTimezoneOptions.find((item) => item.value === query.statTimezone)?.label || query.statTimezone;
|
|
});
|
|
|
|
function syncFullscreenState() {
|
|
fullscreen.value = document.fullscreenElement === datavFullscreen.value;
|
|
}
|
|
|
|
async function screen() {
|
|
const element = datavFullscreen.value;
|
|
if (!element) {
|
|
return;
|
|
}
|
|
if (document.fullscreenElement === element) {
|
|
await document.exitFullscreen();
|
|
return;
|
|
}
|
|
if (document.fullscreenElement) {
|
|
await document.exitFullscreen();
|
|
}
|
|
await element.requestFullscreen();
|
|
}
|
|
|
|
async function toggleVisualMode() {
|
|
visualMode.value = !visualMode.value;
|
|
await renderVisualCharts();
|
|
}
|
|
|
|
function defaultRange(periodType: string): [string, string] | null {
|
|
const now = dayjs().tz(query.statTimezone || DEFAULT_STAT_TIMEZONE);
|
|
if (periodType === 'ALL') {
|
|
return null;
|
|
}
|
|
if (periodType === 'MONTH') {
|
|
return [now.startOf('month').format('YYYY-MM-DD'), now.format('YYYY-MM-DD')];
|
|
}
|
|
if (periodType === 'WEEK') {
|
|
const daysSinceMonday = now.day() === 0 ? 6 : now.day() - 1;
|
|
return [now.subtract(daysSinceMonday, 'day').format('YYYY-MM-DD'), now.format('YYYY-MM-DD')];
|
|
}
|
|
return [now.subtract(6, 'day').format('YYYY-MM-DD'), now.format('YYYY-MM-DD')];
|
|
}
|
|
|
|
function handlePeriodChange(value: string) {
|
|
dateRange.value = defaultRange(value);
|
|
loadDashboard();
|
|
}
|
|
|
|
function handleTimezoneChange() {
|
|
dateRange.value = defaultRange(query.periodType);
|
|
loadDashboard();
|
|
}
|
|
|
|
function buildParams() {
|
|
const params: Record<string, any> = {
|
|
periodType: query.periodType,
|
|
statTimezone: query.statTimezone || DEFAULT_STAT_TIMEZONE,
|
|
sysOrigin: query.sysOrigin || undefined,
|
|
};
|
|
if (dateRange.value?.[0] && dateRange.value?.[1]) {
|
|
params.startDate = dateRange.value[0];
|
|
params.endDate = dateRange.value[1];
|
|
}
|
|
return params;
|
|
}
|
|
|
|
function buildRecentDayParams(dayCount: number) {
|
|
const end = dayjs().tz(query.statTimezone || DEFAULT_STAT_TIMEZONE);
|
|
const start = end.subtract(dayCount - 1, 'day');
|
|
return {
|
|
periodType: 'DAY',
|
|
startDate: start.format('YYYY-MM-DD'),
|
|
endDate: end.format('YYYY-MM-DD'),
|
|
statTimezone: query.statTimezone || DEFAULT_STAT_TIMEZONE,
|
|
sysOrigin: query.sysOrigin || undefined,
|
|
};
|
|
}
|
|
|
|
async function loadDashboard() {
|
|
if (!canQuery.value) {
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
const [mainDashboard, dayArpuDashboard, threeDayArpuDashboard, weekArpuDashboard] =
|
|
await Promise.all([
|
|
countryDashboard(buildParams()),
|
|
countryDashboard(buildRecentDayParams(1)),
|
|
countryDashboard(buildRecentDayParams(3)),
|
|
countryDashboard(buildRecentDayParams(7)),
|
|
]);
|
|
dashboard.value = mainDashboard;
|
|
arpuDashboards.value = {
|
|
day: dayArpuDashboard,
|
|
threeDay: threeDayArpuDashboard,
|
|
week: weekArpuDashboard,
|
|
};
|
|
if (activeTableTab.value === 'game') {
|
|
await loadGameMetrics();
|
|
if (gameCountryRankOpen.value) {
|
|
await loadGameCountryRank();
|
|
}
|
|
}
|
|
} catch (error) {
|
|
dashboard.value = null;
|
|
arpuDashboards.value = {
|
|
day: null,
|
|
threeDay: null,
|
|
week: null,
|
|
};
|
|
message.error('数据大屏加载失败');
|
|
throw error;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
renderVisualCharts();
|
|
}
|
|
|
|
function buildGameMetricParams() {
|
|
return {
|
|
...buildParams(),
|
|
countryCodes: selectedCountryCodes.value.join(',') || undefined,
|
|
cursor: gameMetricPagination.current,
|
|
gameKeyword: gameQuery.gameKeyword.trim() || undefined,
|
|
gameProvider: gameQuery.gameProvider || undefined,
|
|
limit: gameMetricPagination.pageSize,
|
|
sortField: gameMetricSorter.field || undefined,
|
|
sortOrder: gameMetricSorter.order || undefined,
|
|
};
|
|
}
|
|
|
|
async function loadGameMetrics() {
|
|
if (!canQuery.value) {
|
|
return;
|
|
}
|
|
gameMetricLoading.value = true;
|
|
try {
|
|
const result = await countryDashboardGameSummaries(buildGameMetricParams());
|
|
gameMetricRecords.value = result.records || [];
|
|
gameMetricPagination.total = Number(result.total || 0);
|
|
gameMetricPagination.current = Number(result.current || gameMetricPagination.current || 1);
|
|
const resultPageSize = Number(result.size);
|
|
gameMetricPagination.pageSize =
|
|
Number.isFinite(resultPageSize) && resultPageSize > 0
|
|
? resultPageSize
|
|
: gameMetricPagination.pageSize;
|
|
} catch {
|
|
gameMetricRecords.value = [];
|
|
gameMetricPagination.total = 0;
|
|
message.error('游戏数据加载失败');
|
|
} finally {
|
|
gameMetricLoading.value = false;
|
|
}
|
|
}
|
|
|
|
function buildGameCountryRankParams(record: Partial<CountryDashboardGameMetric>) {
|
|
return {
|
|
...buildParams(),
|
|
countryCodes: selectedCountryCodes.value.join(',') || undefined,
|
|
gameId: record.gameId,
|
|
gameProvider: record.gameProvider,
|
|
rankLimit: 200,
|
|
};
|
|
}
|
|
|
|
async function loadGameCountryRank(record = selectedGameMetric.value) {
|
|
if (!record?.gameId || !record.gameProvider || !canQuery.value) {
|
|
return;
|
|
}
|
|
gameCountryRankLoading.value = true;
|
|
try {
|
|
gameCountryRankRecords.value = await countryDashboardGameCountryRank(
|
|
buildGameCountryRankParams(record),
|
|
);
|
|
} catch {
|
|
gameCountryRankRecords.value = [];
|
|
message.error('游戏国家排名加载失败');
|
|
} finally {
|
|
gameCountryRankLoading.value = false;
|
|
}
|
|
}
|
|
|
|
async function openGameCountryRank(record: Partial<CountryDashboardGameMetric>) {
|
|
selectedGameMetric.value = record;
|
|
gameCountryRankOpen.value = true;
|
|
await loadGameCountryRank(record);
|
|
}
|
|
|
|
async function handleGameMetricTableChange(
|
|
pagination: Record<string, any>,
|
|
_filters: Record<string, any>,
|
|
sorter: Record<string, any> | Record<string, any>[],
|
|
) {
|
|
const activeSorter = Array.isArray(sorter) ? sorter[0] : sorter;
|
|
gameMetricPagination.current = Number(pagination.current || 1);
|
|
gameMetricPagination.pageSize = Number(pagination.pageSize || gameMetricPagination.pageSize || 50);
|
|
gameMetricSorter.field = activeSorter?.field ? String(activeSorter.field) : undefined;
|
|
gameMetricSorter.order =
|
|
activeSorter?.order === 'ascend' || activeSorter?.order === 'descend'
|
|
? activeSorter.order
|
|
: undefined;
|
|
await loadGameMetrics();
|
|
}
|
|
|
|
async function handleGameMetricFilterChange() {
|
|
gameMetricPagination.current = 1;
|
|
if (activeTableTab.value === 'game') {
|
|
await loadGameMetrics();
|
|
}
|
|
}
|
|
|
|
async function loadRechargeDetails() {
|
|
rechargeDetailLoading.value = true;
|
|
try {
|
|
const result = await countryDashboardRechargeDetails({
|
|
...buildParams(),
|
|
countryCodes: selectedCountryCodes.value.join(',') || undefined,
|
|
cursor: rechargeDetailPagination.current,
|
|
limit: rechargeDetailPagination.pageSize,
|
|
});
|
|
rechargeDetailRecords.value = result.records || [];
|
|
rechargeDetailPagination.total = Number(result.total || 0);
|
|
} finally {
|
|
rechargeDetailLoading.value = false;
|
|
}
|
|
}
|
|
|
|
async function openRechargeDetails() {
|
|
rechargeDetailOpen.value = true;
|
|
rechargeDetailPagination.current = 1;
|
|
await loadRechargeDetails();
|
|
}
|
|
|
|
async function handleRechargeDetailTableChange(pagination: Record<string, any>) {
|
|
rechargeDetailPagination.current = Number(pagination.current || 1);
|
|
await loadRechargeDetails();
|
|
}
|
|
|
|
function rechargeDetailRowKey(record: Record<string, any>) {
|
|
return `${record.sourceType}-${record.recordId}`;
|
|
}
|
|
|
|
function gameMetricRowKey(record: Record<string, any>) {
|
|
return [record.gameProvider, record.gameId].join('-');
|
|
}
|
|
|
|
function gameCountryRankRowKey(record: Record<string, any>) {
|
|
return [record.countryCode, record.gameProvider, record.gameId].join('-');
|
|
}
|
|
|
|
function gameMetricRank(index: number) {
|
|
return (gameMetricPagination.current - 1) * gameMetricPagination.pageSize + index + 1;
|
|
}
|
|
|
|
function gameDisplayText(record: Partial<CountryDashboardGameMetric>) {
|
|
return record.gameName || record.gameId || '-';
|
|
}
|
|
|
|
function rechargeSourceName(sourceType: string) {
|
|
return rechargeSourceNameMap[sourceType] || sourceType || '-';
|
|
}
|
|
|
|
function rechargeDetailUserText(record: Record<string, any>) {
|
|
const account = record.userAccount || record.userId;
|
|
return [account, record.userNickname].filter(Boolean).join(' / ') || '-';
|
|
}
|
|
|
|
function rechargeDetailCountryText(record: Record<string, any>) {
|
|
return [record.countryName, record.countryCode].filter(Boolean).join(' / ') || '-';
|
|
}
|
|
|
|
function showRechargeDetailTotal(total: number) {
|
|
return `共 ${total} 条`;
|
|
}
|
|
|
|
function showGameMetricTotal(total: number) {
|
|
return `共 ${total} 条`;
|
|
}
|
|
|
|
function toAmount(value?: null | number | string) {
|
|
const number = Number(value || 0);
|
|
return Number.isFinite(number) ? number : 0;
|
|
}
|
|
|
|
function calcPercent(numerator?: null | number | string, denominator?: null | number | string) {
|
|
const fixedDenominator = toAmount(denominator);
|
|
if (fixedDenominator === 0) {
|
|
return 0;
|
|
}
|
|
return (toAmount(numerator) / fixedDenominator) * 100;
|
|
}
|
|
|
|
function formatInteger(value?: null | number | string) {
|
|
const number = Number(value || 0);
|
|
return Number.isFinite(number) ? number.toLocaleString('zh-CN', { maximumFractionDigits: 0 }) : '0';
|
|
}
|
|
|
|
function formatAmount(value?: null | number | string) {
|
|
const number = Number(value || 0);
|
|
return Number.isFinite(number)
|
|
? number.toLocaleString('zh-CN', {
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 0,
|
|
})
|
|
: '0';
|
|
}
|
|
|
|
function formatPercent(value?: null | number | string) {
|
|
const number = Number(value || 0);
|
|
return Number.isFinite(number)
|
|
? `${number.toLocaleString('zh-CN', {
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 2,
|
|
})}%`
|
|
: '0.00%';
|
|
}
|
|
|
|
function resolveLuckyGiftProfitRate(record?: null | {
|
|
luckyGiftProfit?: number | string;
|
|
luckyGiftProfitRate?: number | string;
|
|
luckyGiftTotalFlow?: number | string;
|
|
}) {
|
|
if (!record) {
|
|
return 0;
|
|
}
|
|
if (
|
|
record.luckyGiftProfitRate !== undefined &&
|
|
record.luckyGiftProfitRate !== null &&
|
|
record.luckyGiftProfitRate !== ''
|
|
) {
|
|
const rate = Number(record.luckyGiftProfitRate);
|
|
if (Number.isFinite(rate)) {
|
|
return rate;
|
|
}
|
|
}
|
|
const flow = Number(record.luckyGiftTotalFlow || 0);
|
|
if (!Number.isFinite(flow) || flow === 0) {
|
|
return 0;
|
|
}
|
|
return (Number(record.luckyGiftProfit || 0) / flow) * 100;
|
|
}
|
|
|
|
function resolveMetricRate(record: Record<string, any>, key: string) {
|
|
if (key === 'luckyGiftProfitRate') {
|
|
return resolveLuckyGiftProfitRate(record);
|
|
}
|
|
const rate = Number(record[key]);
|
|
if (Number.isFinite(rate) && record[key] !== undefined && record[key] !== null && record[key] !== '') {
|
|
return rate;
|
|
}
|
|
if (key === 'luckyGiftUserRate') {
|
|
return calcPercent(record.luckyGiftUser, record.dailyActiveUser);
|
|
}
|
|
if (key === 'luckyGiftPayoutRate') {
|
|
return calcPercent(record.luckyGiftPayout, record.luckyGiftTotalFlow);
|
|
}
|
|
if (key === 'gamePayoutRate') {
|
|
return calcPercent(record.gamePayout, record.gameTotalFlow);
|
|
}
|
|
if (key === 'gameProfitRate') {
|
|
return calcPercent(record.gameProfit, record.gameTotalFlow);
|
|
}
|
|
if (key === 'd1RetentionRate') {
|
|
return calcPercent(record.d1RetentionUser, record.d1RetentionBaseUser);
|
|
}
|
|
if (key === 'd7RetentionRate') {
|
|
return calcPercent(record.d7RetentionUser, record.d7RetentionBaseUser);
|
|
}
|
|
if (key === 'd30RetentionRate') {
|
|
return calcPercent(record.d30RetentionUser, record.d30RetentionBaseUser);
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function calcArpu(summary: Record<string, any>) {
|
|
const activeUser = toAmount(summary.dailyActiveUser);
|
|
if (activeUser === 0) {
|
|
return 0;
|
|
}
|
|
return toAmount(summary.totalRecharge) / activeUser;
|
|
}
|
|
|
|
function formatArpu(result?: CountryDashboardResult | null) {
|
|
const summary = buildVisibleSummary(filterRecordsBySelectedCountries(result?.records || []));
|
|
return formatAmount(calcArpu(summary));
|
|
}
|
|
|
|
function emptySummary(): SummaryMetric {
|
|
return {
|
|
countryNewUser: 0,
|
|
d1RetentionBaseUser: 0,
|
|
d1RetentionRate: 0,
|
|
d1RetentionUser: 0,
|
|
d7RetentionBaseUser: 0,
|
|
d7RetentionRate: 0,
|
|
d7RetentionUser: 0,
|
|
d30RetentionBaseUser: 0,
|
|
d30RetentionRate: 0,
|
|
d30RetentionUser: 0,
|
|
dailyActiveUser: 0,
|
|
dealerRecharge: 0,
|
|
googleRecharge: 0,
|
|
gamePayout: 0,
|
|
gamePayoutRate: 0,
|
|
gameProfit: 0,
|
|
gameProfitRate: 0,
|
|
gameTotalFlow: 0,
|
|
gameUser: 0,
|
|
giftConsume: 0,
|
|
luckyGiftPayout: 0,
|
|
luckyGiftPayoutRate: 0,
|
|
luckyGiftProfit: 0,
|
|
luckyGiftProfitRate: 0,
|
|
luckyGiftTotalFlow: 0,
|
|
luckyGiftUser: 0,
|
|
luckyGiftUserRate: 0,
|
|
mifapayRecharge: 0,
|
|
newUserRecharge: 0,
|
|
salaryExchange: 0,
|
|
totalRecharge: 0,
|
|
};
|
|
}
|
|
|
|
function buildVisibleSummary(list: CountryDashboardMetric[]) {
|
|
const summary = emptySummary();
|
|
for (const item of list) {
|
|
for (const key of summaryMetricKeys) {
|
|
summary[key] = toAmount(summary[key]) + toAmount(item[key] as number | string);
|
|
}
|
|
}
|
|
summary.luckyGiftUserRate = calcPercent(summary.luckyGiftUser, summary.dailyActiveUser);
|
|
summary.luckyGiftPayoutRate = calcPercent(summary.luckyGiftPayout, summary.luckyGiftTotalFlow);
|
|
summary.luckyGiftProfitRate = resolveLuckyGiftProfitRate(summary);
|
|
summary.gamePayoutRate = calcPercent(summary.gamePayout, summary.gameTotalFlow);
|
|
summary.gameProfitRate = calcPercent(summary.gameProfit, summary.gameTotalFlow);
|
|
summary.d1RetentionRate = calcPercent(summary.d1RetentionUser, summary.d1RetentionBaseUser);
|
|
summary.d7RetentionRate = calcPercent(summary.d7RetentionUser, summary.d7RetentionBaseUser);
|
|
summary.d30RetentionRate = calcPercent(summary.d30RetentionUser, summary.d30RetentionBaseUser);
|
|
return summary;
|
|
}
|
|
|
|
function formatSummaryValue(key: SummaryMetricKey, summary: SummaryMetric) {
|
|
if (integerMetricColumns.has(key)) {
|
|
return formatInteger(summary[key]);
|
|
}
|
|
if (percentMetricColumns.has(key)) {
|
|
return formatPercent(resolveMetricRate(summary, key));
|
|
}
|
|
return formatAmount(summary[key]);
|
|
}
|
|
|
|
function filterCountry(input: string, option?: Record<string, any>) {
|
|
const keyword = input.toLowerCase();
|
|
const label = String(option?.label || '').toLowerCase();
|
|
const value = String(option?.value || '').toLowerCase();
|
|
return label.includes(keyword) || value.includes(keyword);
|
|
}
|
|
|
|
function tableCellText(record: Record<string, any>, key: string) {
|
|
if (integerMetricColumns.has(key)) {
|
|
return formatInteger(record[key] as number | string);
|
|
}
|
|
if (percentMetricColumns.has(key)) {
|
|
return formatPercent(resolveMetricRate(record, key));
|
|
}
|
|
return formatAmount(record[key] as number | string);
|
|
}
|
|
|
|
function gameMetricCellText(record: Record<string, any>, key: string) {
|
|
if (gameMetricIntegerColumns.has(key)) {
|
|
return formatInteger(record[key] as number | string);
|
|
}
|
|
if (gameMetricPercentColumns.has(key)) {
|
|
return formatPercent(record[key] as number | string);
|
|
}
|
|
if (gameMetricNumberColumns.has(key)) {
|
|
return formatAmount(record[key] as number | string);
|
|
}
|
|
return record[key] || '-';
|
|
}
|
|
|
|
function compareTableColumn(key: string) {
|
|
return (current: Record<string, any>, next: Record<string, any>) => {
|
|
if (metricColumns.has(key)) {
|
|
const currentValue = percentMetricColumns.has(key)
|
|
? resolveMetricRate(current, key)
|
|
: toAmount(current[key]);
|
|
const nextValue = percentMetricColumns.has(key)
|
|
? resolveMetricRate(next, key)
|
|
: toAmount(next[key]);
|
|
return currentValue - nextValue;
|
|
}
|
|
return String(current[key] || '').localeCompare(String(next[key] || ''));
|
|
};
|
|
}
|
|
|
|
function filterRecordsBySelectedCountries(list: CountryDashboardMetric[]) {
|
|
const selected = new Set(selectedCountryCodes.value);
|
|
if (selected.size === 0) {
|
|
return list;
|
|
}
|
|
return list.filter((item) => selected.has(String(item.countryCode || '')));
|
|
}
|
|
|
|
function rowKey(record: Record<string, any>) {
|
|
return `${record.countryCode}-${record.periodKey}`;
|
|
}
|
|
|
|
function chartCategory(record: CountryDashboardMetric) {
|
|
return `${record.periodName || '-'}\n${record.countryName || record.countryCode || '-'}`;
|
|
}
|
|
|
|
function amountSeries(name: string, dataIndex: keyof CountryDashboardMetric, list: CountryDashboardMetric[]) {
|
|
return {
|
|
data: list.map((item) => toAmount(item[dataIndex] as number | string)),
|
|
emphasis: { focus: 'series' },
|
|
name,
|
|
type: 'bar',
|
|
};
|
|
}
|
|
|
|
function lineSeries(name: string, dataIndex: keyof CountryDashboardMetric, list: CountryDashboardMetric[]) {
|
|
return {
|
|
data: list.map((item) => toAmount(item[dataIndex] as number | string)),
|
|
emphasis: { focus: 'series' },
|
|
name,
|
|
smooth: true,
|
|
type: 'line',
|
|
};
|
|
}
|
|
|
|
function valueYAxis(labelFormatter?: string) {
|
|
return {
|
|
axisLabel: {
|
|
color: '#94a3b8',
|
|
formatter: labelFormatter,
|
|
},
|
|
splitLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.16)' } },
|
|
type: 'value' as const,
|
|
};
|
|
}
|
|
|
|
function baseChartOption(title: string, list: CountryDashboardMetric[], series: any[]): ChartOption {
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
dataZoom: [
|
|
{ bottom: 6, height: 18, type: 'slider' },
|
|
{ type: 'inside' },
|
|
],
|
|
grid: {
|
|
bottom: 58,
|
|
containLabel: true,
|
|
left: 16,
|
|
right: 20,
|
|
top: 74,
|
|
},
|
|
legend: {
|
|
textStyle: { color: '#cbd5e1' },
|
|
top: 30,
|
|
type: 'scroll',
|
|
},
|
|
series,
|
|
textStyle: {
|
|
color: '#e2e8f0',
|
|
},
|
|
title: {
|
|
left: 16,
|
|
text: title,
|
|
textStyle: {
|
|
color: '#f8fafc',
|
|
fontSize: 15,
|
|
fontWeight: 700,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
color: '#94a3b8',
|
|
interval: 0,
|
|
},
|
|
axisLine: { lineStyle: { color: '#334155' } },
|
|
data: list.map((item) => chartCategory(item)),
|
|
type: 'category',
|
|
},
|
|
yAxis: valueYAxis(),
|
|
};
|
|
}
|
|
|
|
function luckyChartOption(list: CountryDashboardMetric[]): ChartOption {
|
|
const option = baseChartOption('幸运礼物结构与利润率', list, [
|
|
amountSeries('幸运礼物流水', 'luckyGiftTotalFlow', list),
|
|
amountSeries('幸运礼物返奖', 'luckyGiftPayout', list),
|
|
amountSeries('幸运礼物利润', 'luckyGiftProfit', list),
|
|
{
|
|
...lineSeries('幸运礼物利润率', 'luckyGiftProfitRate', list),
|
|
yAxisIndex: 1,
|
|
},
|
|
]);
|
|
return {
|
|
...option,
|
|
yAxis: [
|
|
valueYAxis(),
|
|
{
|
|
axisLabel: {
|
|
color: '#94a3b8',
|
|
formatter: '{value}%',
|
|
},
|
|
splitLine: { show: false },
|
|
type: 'value',
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
async function renderVisualCharts() {
|
|
if (!visualMode.value || loading.value) {
|
|
return;
|
|
}
|
|
await nextTick();
|
|
await new Promise<void>((resolve) => {
|
|
requestAnimationFrame(() => resolve());
|
|
});
|
|
const list = chartRecords.value;
|
|
if (list.length === 0) {
|
|
return;
|
|
}
|
|
renderUserRechargeChart(baseChartOption('新增用户与充值', list, [
|
|
amountSeries('新增用户', 'countryNewUser', list),
|
|
amountSeries('新增充值', 'newUserRecharge', list),
|
|
amountSeries('币商充值', 'dealerRecharge', list),
|
|
amountSeries('MifaPay 充值', 'mifapayRecharge', list),
|
|
amountSeries('Google 充值', 'googleRecharge', list),
|
|
amountSeries('工资兑换', 'salaryExchange', list),
|
|
amountSeries('总充值', 'totalRecharge', list),
|
|
]));
|
|
renderFlowChart(baseChartOption('核心流水', list, [
|
|
amountSeries('礼物消耗', 'giftConsume', list),
|
|
amountSeries('幸运礼物流水', 'luckyGiftTotalFlow', list),
|
|
amountSeries('游戏流水', 'gameTotalFlow', list),
|
|
]));
|
|
renderProfitChart(baseChartOption('返奖与利润', list, [
|
|
amountSeries('幸运礼物返奖', 'luckyGiftPayout', list),
|
|
amountSeries('幸运礼物利润', 'luckyGiftProfit', list),
|
|
amountSeries('游戏返奖', 'gamePayout', list),
|
|
amountSeries('游戏利润', 'gameProfit', list),
|
|
]));
|
|
renderLuckyChart(luckyChartOption(list));
|
|
}
|
|
|
|
watch(
|
|
sysOriginOptions,
|
|
(options) => {
|
|
if (!query.sysOrigin && options[0]?.value) {
|
|
query.sysOrigin = String(options[0].value);
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch([records, visualMode], () => {
|
|
renderVisualCharts();
|
|
});
|
|
|
|
watch(countryOptions, (options) => {
|
|
const optionValues = new Set(options.map((item) => item.value));
|
|
selectedCountryCodes.value = selectedCountryCodes.value.filter((code) =>
|
|
optionValues.has(code),
|
|
);
|
|
});
|
|
|
|
watch(activeTableTab, (value) => {
|
|
if (value === 'game') {
|
|
gameMetricPagination.current = 1;
|
|
void loadGameMetrics();
|
|
}
|
|
});
|
|
|
|
watch(selectedCountryCodes, () => {
|
|
if (activeTableTab.value === 'game') {
|
|
gameMetricPagination.current = 1;
|
|
void loadGameMetrics();
|
|
if (gameCountryRankOpen.value) {
|
|
void loadGameCountryRank();
|
|
}
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('fullscreenchange', syncFullscreenState);
|
|
loadDashboard();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('fullscreenchange', syncFullscreenState);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container-datav">
|
|
<div
|
|
ref="datavFullscreen"
|
|
class="datav-shell" :class="[
|
|
fullscreen ? 'datav-shell--fullscreen' : '',
|
|
]"
|
|
@dblclick="screen"
|
|
>
|
|
<div class="datav-header">
|
|
<div>
|
|
<div class="datav-title">数据大屏</div>
|
|
<div class="datav-subtitle">
|
|
国家维度 · {{ currentTimezoneLabel }} · {{ dashboard?.computedAt || '-' }}
|
|
</div>
|
|
</div>
|
|
<div class="datav-header__center">
|
|
<Button
|
|
:type="visualMode ? 'primary' : 'default'"
|
|
@click="toggleVisualMode"
|
|
>
|
|
{{ visualMode ? '表格数据' : '可视化图表' }}
|
|
</Button>
|
|
</div>
|
|
<Space wrap>
|
|
<Button ghost @click="screen">
|
|
{{ fullscreen ? '退出全屏' : '全屏' }}
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
|
|
<div v-if="canQuery" class="datav-content">
|
|
<section class="panel filter-panel">
|
|
<Space wrap>
|
|
<SysOriginSelect
|
|
v-model:value="query.sysOrigin"
|
|
:options="sysOriginOptions"
|
|
allow-clear
|
|
placeholder="系统"
|
|
style="width: 150px"
|
|
@change="loadDashboard"
|
|
/>
|
|
<Select
|
|
v-model:value="query.statTimezone"
|
|
:options="statTimezoneOptions"
|
|
style="width: 170px"
|
|
@change="handleTimezoneChange"
|
|
/>
|
|
<Select
|
|
v-model:value="query.periodType"
|
|
:options="periodTypeOptions"
|
|
style="width: 110px"
|
|
@change="handlePeriodChange"
|
|
/>
|
|
<DateRangePicker
|
|
v-model:value="dateRange"
|
|
allow-clear
|
|
style="width: 260px"
|
|
value-format="YYYY-MM-DD"
|
|
@change="loadDashboard"
|
|
/>
|
|
<Select
|
|
v-model:value="selectedCountryCodes"
|
|
:filter-option="filterCountry"
|
|
:max-tag-count="2"
|
|
:options="countryOptions"
|
|
allow-clear
|
|
mode="multiple"
|
|
option-label-prop="label"
|
|
placeholder="国家多选"
|
|
show-search
|
|
style="width: 300px"
|
|
/>
|
|
<Select
|
|
v-if="activeTableTab === 'game'"
|
|
v-model:value="gameQuery.gameProvider"
|
|
:options="gameProviderOptions"
|
|
allow-clear
|
|
placeholder="游戏厂商"
|
|
style="width: 150px"
|
|
@change="handleGameMetricFilterChange"
|
|
/>
|
|
<Input
|
|
v-if="activeTableTab === 'game'"
|
|
v-model:value="gameQuery.gameKeyword"
|
|
allow-clear
|
|
placeholder="游戏 ID / 名称"
|
|
style="width: 220px"
|
|
@press-enter="handleGameMetricFilterChange"
|
|
/>
|
|
<Button :loading="loading || gameMetricLoading" type="primary" @click="loadDashboard">
|
|
查询
|
|
</Button>
|
|
</Space>
|
|
</section>
|
|
|
|
<section class="panel metric-section recharge-total-panel">
|
|
<div class="metric-section__title">充值</div>
|
|
<div class="metric-card-grid metric-card-grid--recharge">
|
|
<div
|
|
class="metric-card metric-card--clickable"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="openRechargeDetails"
|
|
@keydown.enter="openRechargeDetails"
|
|
>
|
|
<div class="metric-card__label">{{ totalRechargeCard.label }}</div>
|
|
<div class="metric-card__value">{{ totalRechargeCard.value }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="metric-section-grid">
|
|
<section class="panel metric-section">
|
|
<div class="metric-section__title">幸运礼物 / 游戏</div>
|
|
<div class="metric-card-grid">
|
|
<div
|
|
v-for="item in luckyGameCards"
|
|
:key="item.label"
|
|
class="metric-card"
|
|
>
|
|
<div class="metric-card__label">{{ item.label }}</div>
|
|
<div class="metric-card__value">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="panel metric-section">
|
|
<div class="metric-section__title">APP 数据</div>
|
|
<div class="metric-card-grid metric-card-grid--app">
|
|
<div
|
|
v-for="item in appDataCards"
|
|
:key="item.label"
|
|
class="metric-card"
|
|
>
|
|
<div class="metric-card__label">{{ item.label }}</div>
|
|
<div class="metric-card__value">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="panel metric-section">
|
|
<div class="metric-section__title">ARPU</div>
|
|
<div class="metric-card-grid metric-card-grid--arpu">
|
|
<div
|
|
v-for="item in arpuCards"
|
|
:key="item.label"
|
|
class="metric-card"
|
|
>
|
|
<div class="metric-card__label">{{ item.label }}</div>
|
|
<div class="metric-card__value">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="panel summary-table-panel">
|
|
<Table
|
|
:columns="summaryColumns"
|
|
:data-source="summaryDataSource"
|
|
:pagination="false"
|
|
row-key="key"
|
|
:scroll="{ x: summaryScrollX }"
|
|
size="small"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<span class="number-cell summary-value-cell">
|
|
{{ record[String(column.dataIndex)] }}
|
|
</span>
|
|
</template>
|
|
</Table>
|
|
</section>
|
|
|
|
<section class="panel dashboard-panel">
|
|
<Spin :spinning="loading">
|
|
<template v-if="visualMode">
|
|
<div v-if="chartRecords.length > 0" class="chart-grid">
|
|
<section class="chart-card">
|
|
<EchartsUI ref="userRechargeChartRef" style="height: 340px; width: 100%" />
|
|
</section>
|
|
<section class="chart-card">
|
|
<EchartsUI ref="flowChartRef" style="height: 340px; width: 100%" />
|
|
</section>
|
|
<section class="chart-card">
|
|
<EchartsUI ref="profitChartRef" style="height: 340px; width: 100%" />
|
|
</section>
|
|
<section class="chart-card">
|
|
<EchartsUI ref="luckyChartRef" style="height: 340px; width: 100%" />
|
|
</section>
|
|
</div>
|
|
<Empty v-else />
|
|
</template>
|
|
<template v-else>
|
|
<Tabs v-model:active-key="activeTableTab" class="dashboard-tabs" size="small">
|
|
<TabPane key="overview" tab="指标总览" />
|
|
<TabPane key="recharge" tab="充值相关数据" />
|
|
<TabPane key="game" tab="游戏数据" />
|
|
</Tabs>
|
|
<Table
|
|
v-if="activeTableTab === 'game'"
|
|
:columns="gameMetricColumns"
|
|
:data-source="gameMetricRecords"
|
|
:loading="gameMetricLoading"
|
|
:pagination="{
|
|
current: gameMetricPagination.current,
|
|
pageSize: gameMetricPagination.pageSize,
|
|
showSizeChanger: true,
|
|
showTotal: showGameMetricTotal,
|
|
total: gameMetricPagination.total,
|
|
}"
|
|
:row-key="gameMetricRowKey"
|
|
:scroll="{ x: gameTableScrollX }"
|
|
size="small"
|
|
@change="handleGameMetricTableChange"
|
|
>
|
|
<template #bodyCell="{ column, index, record }">
|
|
<template v-if="column.key === 'rank'">
|
|
<span class="number-cell">{{ gameMetricRank(index) }}</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'gameName'">
|
|
<Button
|
|
class="game-link-button"
|
|
size="small"
|
|
type="link"
|
|
@click="openGameCountryRank(record)"
|
|
>
|
|
{{ gameDisplayText(record) }}
|
|
</Button>
|
|
</template>
|
|
<template
|
|
v-else-if="
|
|
gameMetricNumberColumns.has(String(column.dataIndex)) ||
|
|
gameMetricPercentColumns.has(String(column.dataIndex))
|
|
"
|
|
>
|
|
<span class="number-cell">
|
|
{{ gameMetricCellText(record, String(column.dataIndex)) }}
|
|
</span>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
<Table
|
|
v-else-if="records.length > 0"
|
|
:columns="activeColumns"
|
|
:data-source="records"
|
|
:pagination="{ pageSize: 20, showSizeChanger: true }"
|
|
:row-key="rowKey"
|
|
:scroll="{ x: tableScrollX }"
|
|
size="small"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="metricColumns.has(String(column.dataIndex))">
|
|
<Tooltip v-if="column.dataIndex === 'luckyGiftProfit'">
|
|
<template #title>
|
|
主播分成：{{ formatAmount(record.luckyGiftAnchorShare) }}
|
|
</template>
|
|
<span class="number-cell">
|
|
{{ tableCellText(record, String(column.dataIndex)) }}
|
|
</span>
|
|
</Tooltip>
|
|
<span v-else class="number-cell">
|
|
{{ tableCellText(record, String(column.dataIndex)) }}
|
|
</span>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
<Empty v-else />
|
|
</template>
|
|
</Spin>
|
|
</section>
|
|
|
|
<div class="legacy-grid">
|
|
<section class="panel">
|
|
<div class="panel-title">购买用户</div>
|
|
<LatestPurchaseList :sys-origin-codes="permissionsSysOriginCode" />
|
|
</section>
|
|
<section v-if="canPaidPreview" class="panel">
|
|
<div class="panel-title">今日付费预览</div>
|
|
<PurchaseCount />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal
|
|
v-model:open="rechargeDetailOpen"
|
|
:footer="null"
|
|
title="总充值明细"
|
|
width="1180px"
|
|
>
|
|
<Table
|
|
:columns="rechargeDetailColumns"
|
|
:data-source="rechargeDetailRecords"
|
|
:loading="rechargeDetailLoading"
|
|
:pagination="{
|
|
current: rechargeDetailPagination.current,
|
|
pageSize: rechargeDetailPagination.pageSize,
|
|
showSizeChanger: false,
|
|
showTotal: showRechargeDetailTotal,
|
|
total: rechargeDetailPagination.total,
|
|
}"
|
|
:row-key="rechargeDetailRowKey"
|
|
:scroll="{ x: rechargeDetailScrollX }"
|
|
size="small"
|
|
@change="handleRechargeDetailTableChange"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'sourceType'">
|
|
{{ rechargeSourceName(record.sourceType) }}
|
|
</template>
|
|
<template v-else-if="column.key === 'user'">
|
|
{{ rechargeDetailUserText(record) }}
|
|
</template>
|
|
<template v-else-if="column.key === 'country'">
|
|
{{ rechargeDetailCountryText(record) }}
|
|
</template>
|
|
<template v-else-if="column.key === 'amount'">
|
|
<span class="number-cell">{{ formatAmount(record.amount) }}</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'coinQuantity'">
|
|
<span class="number-cell">{{ formatAmount(record.coinQuantity) }}</span>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
</Modal>
|
|
<Modal
|
|
v-model:open="gameCountryRankOpen"
|
|
:footer="null"
|
|
:title="gameCountryRankTitle"
|
|
width="860px"
|
|
>
|
|
<Table
|
|
:columns="gameCountryRankColumns"
|
|
:data-source="gameCountryRankRecords"
|
|
:loading="gameCountryRankLoading"
|
|
:pagination="false"
|
|
:row-key="gameCountryRankRowKey"
|
|
:scroll="{ x: gameCountryRankScrollX, y: 520 }"
|
|
size="small"
|
|
>
|
|
<template #bodyCell="{ column, index, record }">
|
|
<template v-if="column.key === 'rank'">
|
|
<span class="number-cell">{{ index + 1 }}</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'consumeAmount'">
|
|
<span class="number-cell">{{ formatAmount(record.consumeAmount) }}</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'countryName'">
|
|
{{ record.countryName || record.countryCode || '-' }}
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
</Modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-container-datav {
|
|
background: #111827;
|
|
min-height: calc(100vh - 120px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.datav-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.98)),
|
|
#111827;
|
|
color: #f8fafc;
|
|
min-height: inherit;
|
|
padding: 20px;
|
|
}
|
|
|
|
.datav-shell--fullscreen {
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
}
|
|
|
|
.datav-header {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.datav-header__center {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.datav-title {
|
|
color: #f8fafc;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.datav-subtitle {
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.datav-content {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.panel {
|
|
background: rgba(30, 41, 59, 0.82);
|
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-panel {
|
|
padding: 14px;
|
|
}
|
|
|
|
.metric-section-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr) minmax(260px, 2fr);
|
|
}
|
|
|
|
.metric-section {
|
|
padding: 14px;
|
|
}
|
|
|
|
.metric-section__title {
|
|
color: #2dd4bf;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.metric-card-grid {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card-grid--app {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card-grid--arpu {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card-grid--recharge {
|
|
grid-template-columns: minmax(180px, 260px);
|
|
}
|
|
|
|
.metric-card {
|
|
background: #111827;
|
|
border: 1px solid rgba(45, 212, 191, 0.18);
|
|
border-radius: 8px;
|
|
min-height: 76px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.metric-card--clickable {
|
|
cursor: pointer;
|
|
transition: border-color 0.16s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.metric-card--clickable:focus-visible,
|
|
.metric-card--clickable:hover {
|
|
border-color: rgba(45, 212, 191, 0.72);
|
|
outline: none;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.metric-card__label {
|
|
color: #cbd5e1;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.metric-card__value {
|
|
color: #f8fafc;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.summary-table-panel {
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-panel {
|
|
padding: 12px;
|
|
}
|
|
|
|
.dashboard-tabs {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dashboard-tabs :deep(.ant-tabs-nav) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dashboard-tabs :deep(.ant-tabs-tab) {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.dashboard-tabs :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
color: #2dd4bf;
|
|
}
|
|
|
|
.chart-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.chart-card {
|
|
background: #111827;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
border-radius: 8px;
|
|
min-height: 360px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.number-cell {
|
|
color: #e2e8f0;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.game-link-button {
|
|
height: auto;
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
.game-link-button :deep(span) {
|
|
overflow-wrap: anywhere;
|
|
text-align: left;
|
|
}
|
|
|
|
.summary-value-cell {
|
|
display: block;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
|
|
.legacy-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
|
|
}
|
|
|
|
.panel-title {
|
|
color: #2dd4bf;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 16px 16px 8px;
|
|
}
|
|
|
|
.panel :deep(.ant-table) {
|
|
background: transparent;
|
|
}
|
|
|
|
.panel :deep(.ant-table-cell) {
|
|
background: #111827;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.panel :deep(.ant-table-thead > tr > th) {
|
|
background: #1f2937;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.panel :deep(.ant-empty-description) {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-container-datav {
|
|
min-height: calc(100vh - 88px);
|
|
}
|
|
|
|
.datav-shell {
|
|
padding: 14px;
|
|
}
|
|
|
|
.datav-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.datav-header__center {
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.datav-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.chart-grid,
|
|
.legacy-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.metric-section-grid,
|
|
.metric-card-grid,
|
|
.metric-card-grid--app,
|
|
.metric-card-grid--arpu {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|