feat(admin): add country dashboard game metrics table

apps/src/api/legacy/datav.ts

@@ -65,6 +65,25 @@ export interface CountryDashboardRechargeDetail {
   userNickname: string;
 }
 
+export interface CountryDashboardGameMetric {
+  consumeAmount: number | string;
+  countryCode: string;
+  countryName: string;
+  gameId: string;
+  gameName: string;
+  gameProvider: string;
+  orderCount: number;
+  payoutAmount: number | string;
+  payoutRate: number | string;
+  periodKey: string;
+  periodName: string;
+  profitAmount: number | string;
+  profitRate: number | string;
+  refreshedAt: string;
+  statTimezone: string;
+  userCount: number;
+}
+
 export async function countryDashboard(params: Record<string, any> = {}) {
   return requestClient.get<CountryDashboardResult>('/datav/country-dashboard', {
     params,
@@ -84,6 +103,19 @@ export async function countryDashboardRechargeDetails(
   });
 }
 
+export async function countryDashboardGameMetrics(
+  params: Record<string, any> = {},
+) {
+  return requestClient.get<{
+    current: number;
+    records: CountryDashboardGameMetric[];
+    size: number;
+    total: number;
+  }>('/datav/country-dashboard/game-metrics', {
+    params,
+  });
+}
+
 export async function latestActiveUserCountryCode(params: Record<string, any> = {}) {
   return requestClient.get<Array<Record<string, any>>>(
     '/datav/active/user-country-code',

apps/src/views/statistics/datav.vue

@@ -2,6 +2,7 @@
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import type {
+  CountryDashboardGameMetric,
   CountryDashboardMetric,
   CountryDashboardRechargeDetail,
   CountryDashboardResult,
@@ -24,13 +25,14 @@ import {
   Button,
   DateRangePicker,
   Empty,
+  Input,
   message,
   Modal,
   Select,
   Space,
   Spin,
-  TabPane,
   Table,
+  TabPane,
   Tabs,
   Tooltip,
 } from 'antdv-next';
@@ -40,6 +42,7 @@ import utc from 'dayjs/plugin/utc';
 
 import {
   countryDashboard,
+  countryDashboardGameMetrics,
   countryDashboardRechargeDetails,
 } from '#/api/legacy/datav';
 import SysOriginSelect from '#/components/sys-origin-select.vue';
@@ -62,7 +65,7 @@ const fullscreen = ref(false);
 const visualMode = ref(false);
 const loading = ref(false);
 const dashboard = ref<CountryDashboardResult | null>(null);
-const activeTableTab = ref<'overview' | 'recharge'>('overview');
+const activeTableTab = ref<'game' | 'overview' | 'recharge'>('overview');
 const arpuDashboards = ref<{
   day: CountryDashboardResult | null;
   threeDay: CountryDashboardResult | null;
@@ -86,6 +89,27 @@ const rechargeDetailPagination = reactive({
   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 gameQuery = reactive<{
+  gameKeyword: string;
+  gameProvider?: string;
+}>({
+  gameKeyword: '',
+  gameProvider: undefined,
+});
 
 const query = reactive({
   periodType: 'DAY',
@@ -125,6 +149,18 @@ const statTimezoneOptions = [
   { 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',
@@ -132,7 +168,6 @@ const metricColumns = new Set([
   'd30RetentionRate',
   'dailyActiveUser',
   'dealerRecharge',
-  'googleRecharge',
   'gamePayout',
   'gamePayoutRate',
   'gameProfit',
@@ -140,6 +175,7 @@ const metricColumns = new Set([
   'gameTotalFlow',
   'gameUser',
   'giftConsume',
+  'googleRecharge',
   'luckyGiftPayout',
   'luckyGiftPayoutRate',
   'luckyGiftProfit',
@@ -288,6 +324,79 @@ const rechargeColumns: any[] = [
   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[] = [
+  { dataIndex: 'periodName', fixed: 'left' as const, key: 'periodName', title: '日期/周期', width: 120 },
+  { dataIndex: 'countryName', key: 'countryName', title: '国家', width: 150 },
+  { dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 86 },
+  { dataIndex: 'gameProvider', key: 'gameProvider', title: '游戏厂商', width: 120 },
+  { dataIndex: 'gameId', key: 'gameId', title: '游戏 ID', width: 130 },
+  { dataIndex: 'gameName', key: 'gameName', title: '游戏名称', width: 180 },
+  {
+    align: 'right' as const,
+    dataIndex: 'consumeAmount',
+    key: 'consumeAmount',
+    sortDirections: ['descend', 'ascend'],
+    sorter: true,
+    title: '消耗',
+    width: 130,
+  },
+  {
+    align: 'right' as const,
+    dataIndex: 'payoutAmount',
+    key: 'payoutAmount',
+    sortDirections: ['descend', 'ascend'],
+    sorter: true,
+    title: '返奖',
+    width: 130,
+  },
+  {
+    align: 'right' as const,
+    dataIndex: 'profitAmount',
+    key: 'profitAmount',
+    sortDirections: ['descend', 'ascend'],
+    sorter: true,
+    title: '收益',
+    width: 130,
+  },
+  { align: 'right' as const, dataIndex: 'payoutRate', key: 'payoutRate', title: '返奖率', width: 110 },
+  { align: 'right' as const, dataIndex: 'profitRate', key: 'profitRate', title: '收益率', width: 110 },
+  {
+    align: 'right' as const,
+    dataIndex: 'userCount',
+    key: 'userCount',
+    sortDirections: ['descend', 'ascend'],
+    sorter: true,
+    title: '游戏用户数',
+    width: 130,
+  },
+  {
+    align: 'right' as const,
+    dataIndex: 'orderCount',
+    key: 'orderCount',
+    sortDirections: ['descend', 'ascend'],
+    sorter: true,
+    title: '流水笔数',
+    width: 120,
+  },
+  { dataIndex: 'refreshedAt', key: 'refreshedAt', title: '更新时间', width: 170 },
+];
+const gameTableScrollX = gameMetricColumns.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 },
@@ -478,6 +587,9 @@ async function loadDashboard() {
       threeDay: threeDayArpuDashboard,
       week: weekArpuDashboard,
     };
+    if (activeTableTab.value === 'game') {
+      await loadGameMetrics();
+    }
   } catch (error) {
     dashboard.value = null;
     arpuDashboards.value = {
@@ -493,6 +605,66 @@ async function loadDashboard() {
   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 countryDashboardGameMetrics(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;
+  }
+}
+
+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 {
@@ -524,6 +696,16 @@ function rechargeDetailRowKey(record: Record<string, any>) {
   return `${record.sourceType}-${record.recordId}`;
 }
 
+function gameMetricRowKey(record: Record<string, any>) {
+  return [
+    record.periodKey,
+    record.statTimezone,
+    record.countryCode,
+    record.gameProvider,
+    record.gameId,
+  ].join('-');
+}
+
 function rechargeSourceName(sourceType: string) {
   return rechargeSourceNameMap[sourceType] || sourceType || '-';
 }
@@ -541,6 +723,10 @@ 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;
@@ -730,6 +916,19 @@ function tableCellText(record: Record<string, any>, key: string) {
   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)) {
@@ -921,6 +1120,20 @@ watch(countryOptions, (options) => {
   );
 });
 
+watch(activeTableTab, (value) => {
+  if (value === 'game') {
+    gameMetricPagination.current = 1;
+    void loadGameMetrics();
+  }
+});
+
+watch(selectedCountryCodes, () => {
+  if (activeTableTab.value === 'game') {
+    gameMetricPagination.current = 1;
+    void loadGameMetrics();
+  }
+});
+
 onMounted(() => {
   document.addEventListener('fullscreenchange', syncFullscreenState);
   loadDashboard();
@@ -1004,7 +1217,24 @@ onBeforeUnmount(() => {
               show-search
               style="width: 300px"
             />
-            <Button :loading="loading" type="primary" @click="loadDashboard">
+            <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>
@@ -1105,12 +1335,43 @@ onBeforeUnmount(() => {
               <Empty v-else />
             </template>
             <template v-else>
-              <Tabs v-model:activeKey="activeTableTab" class="dashboard-tabs" size="small">
+              <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="records.length > 0"
+                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, record }">
+                  <template
+                    v-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 }"