数据大屏口径修正
This commit is contained in:
zhx
parent
00b8020599
commit
f5e1a20dd9
@ -254,6 +254,14 @@ export function DatabiApp() {
|
||||
<SelfGameScreen gameId={gameId} loading={selfGameLoading && !selfGameOverview} onGameChange={setGameId} overview={selfGameOverview} />
|
||||
) : isReportView ? (
|
||||
<ReportOverview
|
||||
grantDrilldownQuery={{
|
||||
appCode,
|
||||
countryId,
|
||||
endMs: rangeEndMs(range, timeZone),
|
||||
regionId,
|
||||
startMs: rangeStartMs(range, timeZone),
|
||||
statTz: timeZone
|
||||
}}
|
||||
loading={showSkeleton}
|
||||
model={model}
|
||||
onMetricTrend={setTrendModalItem}
|
||||
|
||||
@ -43,6 +43,20 @@ export async function fetchStatisticsOverview({ appCode, countryId, endMs, regio
|
||||
return fetchDatabiData("/v1/statistics/overview", { appCode, query });
|
||||
}
|
||||
|
||||
export async function fetchPlatformGrantUsers({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz }) {
|
||||
return fetchDatabiData("/v1/statistics/platform-grants/users", {
|
||||
appCode,
|
||||
query: platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz })
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchPlatformGrantRecords({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId }) {
|
||||
return fetchDatabiData("/v1/statistics/platform-grants/records", {
|
||||
appCode,
|
||||
query: platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId })
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchSelfGameStatisticsOverview({ appCode, countryId, endMs, gameId, regionId, startMs, statTz }) {
|
||||
const query = { app_code: normalizeAppCode(appCode) || "lalu" };
|
||||
if (statTz) {
|
||||
@ -67,6 +81,38 @@ export async function fetchSelfGameStatisticsOverview({ appCode, countryId, endM
|
||||
return fetchDatabiData("/v1/statistics/self-games/overview", { appCode, query });
|
||||
}
|
||||
|
||||
function platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId }) {
|
||||
const query = { app_code: normalizeAppCode(appCode) || "lalu" };
|
||||
if (statTz) {
|
||||
query.stat_tz = statTz;
|
||||
}
|
||||
if (startMs) {
|
||||
query.start_ms = String(startMs);
|
||||
}
|
||||
if (endMs) {
|
||||
query.end_ms = String(endMs);
|
||||
}
|
||||
if (statDay) {
|
||||
query.stat_day = statDay;
|
||||
}
|
||||
if (countryId) {
|
||||
query.country_id = String(countryId);
|
||||
}
|
||||
if (regionId && regionId !== "all") {
|
||||
query.region_id = String(regionId);
|
||||
}
|
||||
if (userId) {
|
||||
query.user_id = String(userId);
|
||||
}
|
||||
if (page) {
|
||||
query.page = String(page);
|
||||
}
|
||||
if (pageSize) {
|
||||
query.page_size = String(pageSize);
|
||||
}
|
||||
return query;
|
||||
}
|
||||
|
||||
export async function fetchFilterOptions({ appCode } = {}) {
|
||||
const [apps, regions, countries] = await Promise.all([
|
||||
fetchDatabiData(apiEndpointPath(API_OPERATIONS.listApps), { appCode }),
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Fragment, useCallback, useMemo, useState } from "react";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { fetchPlatformGrantRecords, fetchPlatformGrantUsers } from "../api.js";
|
||||
import { EChart } from "../charts/EChart.jsx";
|
||||
import { createReportRevenueOption } from "../charts/options/createReportRevenueOption.js";
|
||||
import { formatCoin, formatMoneyFull, formatPercent } from "../utils/format.js";
|
||||
@ -34,7 +35,7 @@ const countryColumns = [
|
||||
{ key: "gift_coin_spent", label: "礼物流水", render: (row) => formatOptionalCoin(row.gift_coin_spent), sortable: false },
|
||||
{ key: "coin_total", label: "金币数量(总和)", render: (row) => formatOptionalCoin(row.coin_total), sortable: false },
|
||||
{ key: "consumed_coin", label: "消耗金币", render: (row) => formatOptionalCoin(row.consumed_coin), sortable: false },
|
||||
{ key: "platform_grant_coin", label: "平台发放金币", render: (row) => formatOptionalCoin(row.platform_grant_coin), sortable: false },
|
||||
{ key: "platform_grant_coin", label: "平台发放金币", render: (row, context) => <PlatformGrantCoinCell context={context} row={row} />, sortable: false },
|
||||
{ key: "manual_grant_coin", label: "人工发放金币", render: (row) => formatOptionalCoin(row.manual_grant_coin), sortable: false },
|
||||
{ key: "salary_usd_minor", label: "工资总和(主播/代理)", render: (row) => formatOptionalMoney(row.salary_usd_minor), sortable: false },
|
||||
{ key: "salary_transfer_coin", label: "工资兑换金币", render: (row) => formatOptionalCoin(row.salary_transfer_coin), sortable: false },
|
||||
@ -88,7 +89,7 @@ const metricColumns = [
|
||||
{ key: "delta", label: "变化", render: (row) => <DeltaText value={row.delta} />, sortable: false }
|
||||
];
|
||||
|
||||
export function ReportOverview({ loading = false, model, onMetricTrend, onOpenLuckyGiftPools }) {
|
||||
export function ReportOverview({ grantDrilldownQuery, loading = false, model, onMetricTrend, onOpenLuckyGiftPools }) {
|
||||
const [activeTab, setActiveTab] = useState("country");
|
||||
const summaryCards = useMemo(() => createSummaryCards(model), [model]);
|
||||
|
||||
@ -116,7 +117,7 @@ export function ReportOverview({ loading = false, model, onMetricTrend, onOpenLu
|
||||
))}
|
||||
</div>
|
||||
<div className="report-tab-panel" role="tabpanel">
|
||||
{activeTab === "country" ? <CountryReport loading={loading} rows={model.reportCountryRows} /> : null}
|
||||
{activeTab === "country" ? <CountryReport grantDrilldownQuery={grantDrilldownQuery} loading={loading} rows={model.reportCountryRows} /> : null}
|
||||
{activeTab === "revenue" ? <RevenueReport loading={loading} rows={model.revenueSeries} /> : null}
|
||||
{activeTab === "gift" ? <GiftReport loading={loading} metrics={model.businessKpis} rows={model.giftRanking} /> : null}
|
||||
{activeTab === "lucky" ? <LuckyReport loading={loading} metrics={model.businessKpis} onOpenLuckyGiftPools={onOpenLuckyGiftPools} rows={model.luckyGiftPools} /> : null}
|
||||
@ -171,8 +172,11 @@ function ReportMetricCard({ card, loading, onOpenTrend }) {
|
||||
);
|
||||
}
|
||||
|
||||
function CountryReport({ loading, rows }) {
|
||||
function CountryReport({ grantDrilldownQuery, loading, rows }) {
|
||||
const [expandedRowIds, setExpandedRowIds] = useState(() => new Set());
|
||||
const [grantCountryModal, setGrantCountryModal] = useState(null);
|
||||
const [grantUsersModal, setGrantUsersModal] = useState(null);
|
||||
const [grantRecordsModal, setGrantRecordsModal] = useState(null);
|
||||
const toggleRow = useCallback((rowId) => {
|
||||
setExpandedRowIds((current) => {
|
||||
const next = new Set(current);
|
||||
@ -195,17 +199,66 @@ function CountryReport({ loading, rows }) {
|
||||
onToggle: () => toggleRow(row.row_id)
|
||||
};
|
||||
}), [expandedRowIds, rows, toggleRow]);
|
||||
const openGrantUsers = useCallback((row) => {
|
||||
setGrantCountryModal(null);
|
||||
setGrantRecordsModal(null);
|
||||
setGrantUsersModal({
|
||||
countryLabel: row.country || "国家",
|
||||
query: buildPlatformGrantQuery(grantDrilldownQuery, row)
|
||||
});
|
||||
}, [grantDrilldownQuery]);
|
||||
const openGrantCountries = useCallback((row) => {
|
||||
const countryRows = platformGrantCountryRows(row, rows);
|
||||
if (!countryRows.length) {
|
||||
return;
|
||||
}
|
||||
setGrantRecordsModal(null);
|
||||
setGrantUsersModal(null);
|
||||
setGrantCountryModal({
|
||||
rows: countryRows,
|
||||
title: row.row_type === "date_total" ? `${row.date_label} 平台发放金币` : "平台发放金币"
|
||||
});
|
||||
}, [rows]);
|
||||
const grantContext = useMemo(() => ({
|
||||
onOpenPlatformGrantCountries: openGrantCountries,
|
||||
onOpenPlatformGrantUsers: openGrantUsers
|
||||
}), [openGrantCountries, openGrantUsers]);
|
||||
|
||||
return (
|
||||
<ReportPanel>
|
||||
<ReportTable
|
||||
columns={countryColumns}
|
||||
context={grantContext}
|
||||
loading={loading}
|
||||
preserveOrder
|
||||
renderExpandedRow={(row) => <CountryDetailTable dateLabel={row.date_label} rows={row.children || []} />}
|
||||
renderExpandedRow={(row) => <CountryDetailTable context={grantContext} dateLabel={row.date_label} rows={row.children || []} />}
|
||||
rows={tableRows}
|
||||
wide
|
||||
/>
|
||||
{grantCountryModal ? (
|
||||
<PlatformGrantCountryModal
|
||||
modal={grantCountryModal}
|
||||
onClose={() => setGrantCountryModal(null)}
|
||||
onOpenUsers={openGrantUsers}
|
||||
/>
|
||||
) : null}
|
||||
{grantUsersModal ? (
|
||||
<PlatformGrantUsersModal
|
||||
modal={grantUsersModal}
|
||||
onClose={() => setGrantUsersModal(null)}
|
||||
onOpenRecords={(userRow) => setGrantRecordsModal({
|
||||
countryLabel: grantUsersModal.countryLabel,
|
||||
query: { ...grantUsersModal.query, userId: userRow.user_id },
|
||||
user: userRow
|
||||
})}
|
||||
/>
|
||||
) : null}
|
||||
{grantRecordsModal ? (
|
||||
<PlatformGrantRecordsModal
|
||||
modal={grantRecordsModal}
|
||||
onClose={() => setGrantRecordsModal(null)}
|
||||
/>
|
||||
) : null}
|
||||
</ReportPanel>
|
||||
);
|
||||
}
|
||||
@ -290,7 +343,7 @@ function ReportMetricTable({ loading, rows }) {
|
||||
);
|
||||
}
|
||||
|
||||
function ReportTable({ columns, defaultSort, loading, preserveOrder = false, renderExpandedRow, rows, wide = false }) {
|
||||
function ReportTable({ columns, context, defaultSort, loading, preserveOrder = false, renderExpandedRow, rows, wide = false }) {
|
||||
const sortableDefault = defaultSort || firstSortableColumn(columns);
|
||||
const [sortState, setSortState] = useState(sortableDefault);
|
||||
const sortedRows = useMemo(() => preserveOrder ? rows : sortRows(rows, sortState, columns), [columns, preserveOrder, rows, sortState]);
|
||||
@ -360,7 +413,7 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
|
||||
].filter(Boolean).join(" ")}
|
||||
key={column.key}
|
||||
>
|
||||
{column.render ? column.render(row) : row[column.key]}
|
||||
{column.render ? column.render(row, context) : row[column.key]}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
@ -378,7 +431,7 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
|
||||
);
|
||||
}
|
||||
|
||||
function CountryDetailTable({ dateLabel, rows }) {
|
||||
function CountryDetailTable({ context, dateLabel, rows }) {
|
||||
if (!rows.length) {
|
||||
return <div className="report-subtable-empty">当前无数据</div>;
|
||||
}
|
||||
@ -398,7 +451,7 @@ function CountryDetailTable({ dateLabel, rows }) {
|
||||
<tr key={reportRowKey(row, index)}>
|
||||
<td>{index + 1}</td>
|
||||
{countryDetailColumns.map((column) => (
|
||||
<td className={column.align === "left" ? "is-left" : ""} key={column.key}>{column.render ? column.render(row) : row[column.key]}</td>
|
||||
<td className={column.align === "left" ? "is-left" : ""} key={column.key}>{column.render ? column.render(row, context) : row[column.key]}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
@ -408,6 +461,245 @@ function CountryDetailTable({ dateLabel, rows }) {
|
||||
);
|
||||
}
|
||||
|
||||
function PlatformGrantCoinCell({ context, row }) {
|
||||
const value = Number(row.platform_grant_coin || 0);
|
||||
const clickable = value > 0 && (row.row_type === "country" ? context?.onOpenPlatformGrantUsers : context?.onOpenPlatformGrantCountries);
|
||||
if (!clickable) {
|
||||
return formatOptionalCoin(row.platform_grant_coin);
|
||||
}
|
||||
const label = row.row_type === "country"
|
||||
? `查看 ${row.country || "国家"} 平台发放金币用户明细`
|
||||
: `查看 ${row.date_label || "全部"} 平台发放金币国家明细`;
|
||||
return (
|
||||
<button
|
||||
aria-label={label}
|
||||
className="report-link-button"
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
if (row.row_type === "country") {
|
||||
context.onOpenPlatformGrantUsers(row);
|
||||
return;
|
||||
}
|
||||
context.onOpenPlatformGrantCountries(row);
|
||||
}}
|
||||
>
|
||||
{formatCoin(value)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function PlatformGrantCountryModal({ modal, onClose, onOpenUsers }) {
|
||||
return (
|
||||
<ReportDialog title={modal.title} onClose={onClose}>
|
||||
<div className="report-modal-table-wrap">
|
||||
<table className="report-modal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>国家</th>
|
||||
<th>平台发放金币</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{modal.rows.length ? modal.rows.map((row) => (
|
||||
<tr key={reportRowKey(row, row.country_id || row.country)}>
|
||||
<td>
|
||||
<button
|
||||
aria-label={`查看 ${row.country || "国家"} 平台发放金币用户明细`}
|
||||
className="report-link-button report-link-button--left"
|
||||
type="button"
|
||||
onClick={() => onOpenUsers(row)}
|
||||
>
|
||||
<CountryCell row={row} />
|
||||
</button>
|
||||
</td>
|
||||
<td>{formatOptionalCoin(row.platform_grant_coin)}</td>
|
||||
</tr>
|
||||
)) : (
|
||||
<tr className="report-table-empty-row"><td colSpan={2}>当前无数据</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ReportDialog>
|
||||
);
|
||||
}
|
||||
|
||||
function PlatformGrantUsersModal({ modal, onClose, onOpenRecords }) {
|
||||
const pageSize = 20;
|
||||
const [page, setPage] = useState(1);
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
fetchPlatformGrantUsers({ ...modal.query, page, pageSize })
|
||||
.then((nextData) => {
|
||||
if (active) {
|
||||
setData(nextData || {});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
setError(err.message || "请求失败");
|
||||
setData(null);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [modal.query, page]);
|
||||
const items = Array.isArray(data?.items) ? data.items : [];
|
||||
const total = Number(data?.total || 0);
|
||||
|
||||
return (
|
||||
<ReportDialog title={`${modal.countryLabel} 平台发放金币用户`} onClose={onClose}>
|
||||
<div className="report-modal-table-wrap">
|
||||
<table className="report-modal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户</th>
|
||||
<th>平台发放金币</th>
|
||||
<th>记录数</th>
|
||||
<th>最近发放时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? <tr className="report-table-skeleton-row"><td colSpan={4}><span className="skeleton-block report-skeleton-line" /></td></tr> : null}
|
||||
{!loading && error ? <tr className="report-table-empty-row"><td colSpan={4}>{error}</td></tr> : null}
|
||||
{!loading && !error && !items.length ? <tr className="report-table-empty-row"><td colSpan={4}>当前无数据</td></tr> : null}
|
||||
{!loading && !error ? items.map((item) => (
|
||||
<tr key={item.user_id}>
|
||||
<td>
|
||||
<button
|
||||
aria-label={`查看 ${platformGrantUserLabel(item)} 平台发放金币来源明细`}
|
||||
className="report-link-button report-link-button--left"
|
||||
type="button"
|
||||
onClick={() => onOpenRecords(item)}
|
||||
>
|
||||
<span className="report-user-cell">
|
||||
{item.avatar ? <img alt="" src={item.avatar} /> : null}
|
||||
<span>
|
||||
<b>{platformGrantUserLabel(item)}</b>
|
||||
<small>{platformGrantUserMeta(item)}</small>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>{formatOptionalCoin(item.total_coin)}</td>
|
||||
<td>{formatOptionalCoin(item.record_count)}</td>
|
||||
<td>{formatDateTime(item.last_granted_at_ms)}</td>
|
||||
</tr>
|
||||
)) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ReportPagination page={page} pageSize={pageSize} total={total} onPageChange={setPage} />
|
||||
</ReportDialog>
|
||||
);
|
||||
}
|
||||
|
||||
function PlatformGrantRecordsModal({ modal, onClose }) {
|
||||
const pageSize = 20;
|
||||
const [page, setPage] = useState(1);
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
fetchPlatformGrantRecords({ ...modal.query, page, pageSize })
|
||||
.then((nextData) => {
|
||||
if (active) {
|
||||
setData(nextData || {});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
setError(err.message || "请求失败");
|
||||
setData(null);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [modal.query, page]);
|
||||
const items = Array.isArray(data?.items) ? data.items : [];
|
||||
const total = Number(data?.total || 0);
|
||||
|
||||
return (
|
||||
<ReportDialog title={`${platformGrantUserLabel(modal.user)} 平台发放金币来源`} onClose={onClose}>
|
||||
<div className="report-modal-table-wrap">
|
||||
<table className="report-modal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>来源</th>
|
||||
<th>金币</th>
|
||||
<th>发放时间</th>
|
||||
<th>事件 ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? <tr className="report-table-skeleton-row"><td colSpan={4}><span className="skeleton-block report-skeleton-line" /></td></tr> : null}
|
||||
{!loading && error ? <tr className="report-table-empty-row"><td colSpan={4}>{error}</td></tr> : null}
|
||||
{!loading && !error && !items.length ? <tr className="report-table-empty-row"><td colSpan={4}>当前无数据</td></tr> : null}
|
||||
{!loading && !error ? items.map((item) => (
|
||||
<tr key={item.event_id}>
|
||||
<td>{platformGrantSourceLabel(item.event_type)}</td>
|
||||
<td>{formatOptionalCoin(item.amount)}</td>
|
||||
<td>{formatDateTime(item.occurred_at_ms)}</td>
|
||||
<td><span className="report-event-id">{item.event_id || "--"}</span></td>
|
||||
</tr>
|
||||
)) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ReportPagination page={page} pageSize={pageSize} total={total} onPageChange={setPage} />
|
||||
</ReportDialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ReportDialog({ children, onClose, title }) {
|
||||
return (
|
||||
<div className="report-modal-backdrop">
|
||||
<section aria-label={title} aria-modal="true" className="report-modal" role="dialog">
|
||||
<header className="report-modal-head">
|
||||
<h2>{title}</h2>
|
||||
<button className="report-modal-close" type="button" onClick={onClose}>关闭</button>
|
||||
</header>
|
||||
<div className="report-modal-body">{children}</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReportPagination({ onPageChange, page, pageSize, total }) {
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
return (
|
||||
<div className="report-pagination">
|
||||
<span>共 {formatCoin(total)} 条</span>
|
||||
<div>
|
||||
<button disabled={page <= 1} type="button" onClick={() => onPageChange(page - 1)}>上一页</button>
|
||||
<b>{page} / {totalPages}</b>
|
||||
<button disabled={page >= totalPages} type="button" onClick={() => onPageChange(page + 1)}>下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CountryCell({ row }) {
|
||||
return (
|
||||
<span className="report-country-cell">
|
||||
@ -575,6 +867,108 @@ function compareValues(leftValue, rightValue, type) {
|
||||
return leftNumber - rightNumber;
|
||||
}
|
||||
|
||||
function buildPlatformGrantQuery(baseQuery = {}, row = {}) {
|
||||
const countryId = Number(row.country_id ?? row.countryId ?? baseQuery.countryId ?? 0);
|
||||
const regionId = row.region_id ?? row.regionId ?? baseQuery.regionId;
|
||||
return {
|
||||
appCode: baseQuery.appCode,
|
||||
countryId,
|
||||
endMs: baseQuery.endMs,
|
||||
regionId,
|
||||
startMs: baseQuery.startMs,
|
||||
statDay: row.stat_day || row.statDay || "",
|
||||
statTz: baseQuery.statTz
|
||||
};
|
||||
}
|
||||
|
||||
function platformGrantCountryRows(row, rows) {
|
||||
const sourceRows = row.row_type === "date_total" && Array.isArray(row.children) && row.children.length
|
||||
? row.children
|
||||
: collectPlatformGrantCountryRows(rows);
|
||||
return aggregatePlatformGrantCountryRows(sourceRows)
|
||||
.filter((item) => Number(item.platform_grant_coin || 0) > 0)
|
||||
.sort((left, right) => Number(right.platform_grant_coin || 0) - Number(left.platform_grant_coin || 0));
|
||||
}
|
||||
|
||||
function collectPlatformGrantCountryRows(rows) {
|
||||
const out = [];
|
||||
rows.forEach((row) => {
|
||||
if (row.row_type === "country") {
|
||||
out.push(row);
|
||||
}
|
||||
if (Array.isArray(row.children)) {
|
||||
out.push(...collectPlatformGrantCountryRows(row.children));
|
||||
}
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function aggregatePlatformGrantCountryRows(rows) {
|
||||
const grouped = new Map();
|
||||
rows.forEach((row) => {
|
||||
const key = [row.country_id ?? row.country, row.region_id ?? ""].join(":");
|
||||
const current = grouped.get(key);
|
||||
if (!current) {
|
||||
grouped.set(key, { ...row, platform_grant_coin: Number(row.platform_grant_coin || 0) });
|
||||
return;
|
||||
}
|
||||
const nextStatDay = current.stat_day && row.stat_day && current.stat_day === row.stat_day ? current.stat_day : "";
|
||||
grouped.set(key, {
|
||||
...current,
|
||||
platform_grant_coin: Number(current.platform_grant_coin || 0) + Number(row.platform_grant_coin || 0),
|
||||
stat_day: nextStatDay
|
||||
});
|
||||
});
|
||||
return Array.from(grouped.values());
|
||||
}
|
||||
|
||||
function platformGrantUserLabel(item = {}) {
|
||||
return item.user?.display_user_id || item.display_user_id || item.user?.username || item.username || item.nickname || item.user_id || "用户";
|
||||
}
|
||||
|
||||
function platformGrantUserMeta(item = {}) {
|
||||
return [item.user?.username || item.username || item.nickname, item.user_id]
|
||||
.filter((value, index, values) => value && values.indexOf(value) === index)
|
||||
.join(" · ") || "--";
|
||||
}
|
||||
|
||||
function platformGrantSourceLabel(value) {
|
||||
switch (String(value || "").trim()) {
|
||||
case "WalletLuckyGiftRewardCredited":
|
||||
return "幸运礼物返奖";
|
||||
case "WalletTaskRewardCredited":
|
||||
return "任务奖励";
|
||||
case "WalletWheelRewardCredited":
|
||||
return "转盘奖励";
|
||||
case "WalletRoomTurnoverRewardCredited":
|
||||
return "房间流水奖励";
|
||||
case "WalletInviteActivityRewardCredited":
|
||||
return "邀请活动奖励";
|
||||
case "WalletAgencyOpeningRewardCredited":
|
||||
return "代理开通奖励";
|
||||
case "WalletPlatformGrantCoinCredited":
|
||||
return "平台发放";
|
||||
default:
|
||||
return value || "--";
|
||||
}
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
const ms = Number(value || 0);
|
||||
if (!ms) {
|
||||
return "--";
|
||||
}
|
||||
return new Date(ms).toLocaleString("zh-CN", {
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
hour12: false,
|
||||
minute: "2-digit",
|
||||
month: "2-digit",
|
||||
second: "2-digit",
|
||||
year: "numeric"
|
||||
});
|
||||
}
|
||||
|
||||
function formatSignedPercent(value) {
|
||||
if (value === undefined || value === null || Number.isNaN(Number(value))) {
|
||||
return "--";
|
||||
|
||||
@ -1,9 +1,20 @@
|
||||
import { render, screen, within } from "@testing-library/react";
|
||||
import { render, screen, waitFor, within } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { expect, test } from "vitest";
|
||||
import { beforeEach, expect, test, vi } from "vitest";
|
||||
import { fetchPlatformGrantRecords, fetchPlatformGrantUsers } from "../api.js";
|
||||
import { createDashboardModel } from "../data/createDashboardModel.js";
|
||||
import { ReportOverview } from "./ReportOverview.jsx";
|
||||
|
||||
vi.mock("../api.js", () => ({
|
||||
fetchPlatformGrantRecords: vi.fn(),
|
||||
fetchPlatformGrantUsers: vi.fn()
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(fetchPlatformGrantRecords).mockReset();
|
||||
vi.mocked(fetchPlatformGrantUsers).mockReset();
|
||||
});
|
||||
|
||||
test("shows daily totals first and expands daily country details on demand", async () => {
|
||||
const user = userEvent.setup();
|
||||
const model = createDashboardModel({
|
||||
@ -67,3 +78,84 @@ test("shows daily totals first and expands daily country details on demand", asy
|
||||
expect(june5Row).toHaveAttribute("aria-expanded", "false");
|
||||
expect(screen.queryByText("巴西")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("drills platform grant coin from total to country users and user records", async () => {
|
||||
const user = userEvent.setup();
|
||||
vi.mocked(fetchPlatformGrantUsers).mockResolvedValue({
|
||||
items: [{
|
||||
display_user_id: "163001",
|
||||
last_granted_at_ms: Date.UTC(2026, 5, 5, 10, 20, 30),
|
||||
record_count: 2,
|
||||
total_coin: 55,
|
||||
user_id: "7001",
|
||||
username: "Ana"
|
||||
}],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 1
|
||||
});
|
||||
vi.mocked(fetchPlatformGrantRecords).mockResolvedValue({
|
||||
items: [
|
||||
{ amount: 33, event_id: "grant:task:7001", event_type: "WalletTaskRewardCredited", occurred_at_ms: Date.UTC(2026, 5, 5, 10, 20, 30), user_id: "7001" },
|
||||
{ amount: 22, event_id: "grant:lucky:7001", event_type: "WalletLuckyGiftRewardCredited", occurred_at_ms: Date.UTC(2026, 5, 5, 9, 20, 30), user_id: "7001" }
|
||||
],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 2
|
||||
});
|
||||
const model = createDashboardModel({
|
||||
country_breakdown: [
|
||||
{ country: "巴西", country_id: 86, platform_grant_coin: 55, region_id: 10 },
|
||||
{ country: "沙特", country_id: 966, platform_grant_coin: 12, region_id: 20 }
|
||||
],
|
||||
daily_country_breakdown: [
|
||||
{ country: "巴西", country_id: 86, platform_grant_coin: 33, region_id: 10, stat_day: "2026-06-05" },
|
||||
{ country: "巴西", country_id: 86, platform_grant_coin: 22, region_id: 10, stat_day: "2026-06-06" },
|
||||
{ country: "沙特", country_id: 966, platform_grant_coin: 12, region_id: 20, stat_day: "2026-06-06" }
|
||||
],
|
||||
daily_series: [
|
||||
{ platform_grant_coin: 33, stat_day: "2026-06-05" },
|
||||
{ platform_grant_coin: 34, stat_day: "2026-06-06" }
|
||||
],
|
||||
platform_grant_coin: 67
|
||||
}, { appCode: "lalu", countryId: 0, range: { end: "2026-06-06", start: "2026-06-05" } });
|
||||
|
||||
render(
|
||||
<ReportOverview
|
||||
grantDrilldownQuery={{
|
||||
appCode: "lalu",
|
||||
countryId: 0,
|
||||
endMs: Date.UTC(2026, 5, 7),
|
||||
regionId: "all",
|
||||
startMs: Date.UTC(2026, 5, 5),
|
||||
statTz: "Asia/Shanghai"
|
||||
}}
|
||||
model={model}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "查看 全部 平台发放金币国家明细" }));
|
||||
expect(screen.getByRole("dialog", { name: "平台发放金币" })).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "查看 巴西 平台发放金币用户明细" }));
|
||||
await waitFor(() => expect(fetchPlatformGrantUsers).toHaveBeenCalledWith(expect.objectContaining({
|
||||
appCode: "lalu",
|
||||
countryId: 86,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
regionId: 10,
|
||||
statTz: "Asia/Shanghai"
|
||||
})));
|
||||
expect(await screen.findByRole("button", { name: "查看 163001 平台发放金币来源明细" })).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "查看 163001 平台发放金币来源明细" }));
|
||||
await waitFor(() => expect(fetchPlatformGrantRecords).toHaveBeenCalledWith(expect.objectContaining({
|
||||
countryId: 86,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
regionId: 10,
|
||||
userId: "7001"
|
||||
})));
|
||||
expect(await screen.findByText("任务奖励")).toBeInTheDocument();
|
||||
expect(screen.getByText("幸运礼物返奖")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@ -438,6 +438,7 @@ function normalizeCountryRow(item, index, totalRecharge) {
|
||||
? numberValue(item.recharge_conversion_rate ?? item.rechargeConversionRate)
|
||||
: ratio(rechargeUsers, activeUsers),
|
||||
recharge_users: rechargeUsers,
|
||||
region_id: numberValue(item.region_id ?? item.regionId),
|
||||
salary_usd_minor: readOptionalNumber(item, "salary_usd_minor", "salaryUsdMinor"),
|
||||
salary_transfer_coin: readOptionalNumber(item, "salary_transfer_coin", "salaryTransferCoin"),
|
||||
share: recharge / totalRecharge,
|
||||
|
||||
@ -611,6 +611,39 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.report-link-button {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #126fb2;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 780;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.report-link-button:hover {
|
||||
color: #075d99;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.report-link-button:focus-visible {
|
||||
border-radius: 4px;
|
||||
outline: 2px solid #1688d9;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.report-link-button--left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.report-country-cell {
|
||||
display: inline-flex;
|
||||
max-width: 220px;
|
||||
@ -711,6 +744,194 @@
|
||||
color: #8a98aa;
|
||||
}
|
||||
|
||||
.report-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 28px;
|
||||
background: rgba(15, 23, 42, 0.28);
|
||||
}
|
||||
|
||||
.report-modal {
|
||||
display: grid;
|
||||
width: min(960px, 100%);
|
||||
max-height: min(760px, calc(100vh - 56px));
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid #d8e5f0;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 20px 56px rgba(15, 23, 42, 0.22);
|
||||
}
|
||||
|
||||
.report-modal-head {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.report-modal-head h2 {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 780;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.report-modal-close,
|
||||
.report-pagination button {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #c7d7e7;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #126fb2;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.report-modal-close:hover,
|
||||
.report-pagination button:hover:not(:disabled) {
|
||||
border-color: #1688d9;
|
||||
background: #eef7ff;
|
||||
}
|
||||
|
||||
.report-pagination button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.report-modal-body {
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
gap: 12px;
|
||||
padding: 14px 16px 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.report-modal-table-wrap {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid #e4ebf3;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.report-modal-table {
|
||||
width: 100%;
|
||||
min-width: 640px;
|
||||
border-collapse: collapse;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.report-modal-table th,
|
||||
.report-modal-table td {
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #34445a;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.report-modal-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f8fafc;
|
||||
color: #65748a;
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.report-modal-table th:first-child,
|
||||
.report-modal-table td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.report-modal-table tbody tr:hover td {
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.report-user-cell {
|
||||
display: inline-flex;
|
||||
max-width: 260px;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.report-user-cell img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.report-user-cell > span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.report-user-cell b,
|
||||
.report-user-cell small,
|
||||
.report-event-id {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.report-user-cell b {
|
||||
color: #172033;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.report-user-cell small {
|
||||
color: #8a98aa;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.report-event-id {
|
||||
display: inline-block;
|
||||
max-width: 240px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.report-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #65748a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.report-pagination > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.report-pagination b {
|
||||
color: #34445a;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.report-pair-cell {
|
||||
display: inline-flex;
|
||||
min-width: 118px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user