fix

config/routerConfig.ts

@@ -185,6 +185,12 @@ const gameDataStatistics = {
                     access: 'ltv',
                     component: './gameDataStatistics/gameData/ltv',
                 },
+                {
+                    path: '/gameDataStatistics/gameData/again',
+                    name: '游戏首日复充',
+                    access: 'again',
+                    component: './gameDataStatistics/gameData/again',
+                },
             ]
         },
         {

src/pages/gameDataStatistics/components/TableData/index.tsx

@@ -319,6 +319,7 @@ const Tab = React.memo((props: any) => {
                     hideOnSinglePage
                     current={page}
                     pageSize={pageSize}
+                    loading={ajax?.loading}
                     className={`all_table header_table_body ${className ? className : ''}`}
                     sortDirections={['ascend', 'descend', null]}
                     handelResize={((columns: any) => handelResize(columns))}

src/pages/gameDataStatistics/gameData/again/index.less

@@ -0,0 +1,15 @@
+.dbox{
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    // padding: 10px;
+    >span{
+        display: flex;
+        justify-content: left;
+        width: 100%;
+    }
+}
+
+.tabsBottom0 .ant-tabs-nav {
+    margin-bottom: 0;
+}

src/pages/gameDataStatistics/gameData/again/index.tsx

@@ -0,0 +1,101 @@
+import { AgainListProps, getAgainListApi, getAgainTotalApi } from "@/services/gameData/game"
+import React, { useEffect, useState } from "react"
+import moment from "moment"
+import { useAjax } from "@/Hook/useAjax"
+import TableData from "../../components/TableData"
+import QueryForm from "@/components/QueryForm"
+import columns12 from "./tableConfig"
+import { getPresets } from "@/components/QueryForm/const"
+
+
+const Again: React.FC = () => {
+
+    /************************************/
+    const [queryForm, setQueryForm] = useState<AgainListProps>({
+        tableTypes: 'buy',
+        pageNum: 1, pageSize: 50,
+        registeredBeginDate: moment().format('YYYY-MM-DD'),
+        registeredEndDate: moment().format('YYYY-MM-DD'),
+        sourceSystem: 'ZX_ONE'
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getAgainList = useAjax((params) => getAgainListApi(params))
+    const getAgainTotal = useAjax((params) => getAgainTotalApi(params))
+    /************************************/
+
+    useEffect(() => {
+        getAgainList.run(queryForm)
+        getAgainTotal.run(queryForm).then((res: { id: number; costDate: string; beginDay: string | undefined }) => {
+            res.id = 1
+            res.costDate = '总计'
+            res.beginDay = queryForm.registeredBeginDate
+            setTotalData([res])
+        })
+    }, [queryForm])
+
+    const userInfo = (data: any) => {
+
+    }
+
+
+    return <div>
+        <TableData
+            leftChild={<QueryForm
+                initialValues={{ regDay: [moment(), moment()], sourceSystem: 'ZX_ONE', tableTypes: 'buy' }}
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { regStartDay, regEndDay, rechargeDay, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (regStartDay && regEndDay) {
+                        newQueryForm.registeredBeginDate = regStartDay
+                        newQueryForm.registeredEndDate = regEndDay
+                    } else {
+                        delete newQueryForm.registeredBeginDate
+                        delete newQueryForm.registeredEndDate
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+                isSource
+                isRegDay={{ ranges: getPresets() }}
+                isGameId
+                isBGGameClassify
+                isUserEnterType
+            />}
+            isZj
+            totalData={totalData}
+            scroll={{ x: 1000, y: 600 }}
+            ajax={getAgainList}
+            fixed={{ left: 2, right: 1 }}
+            dataSource={getAgainList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
+            total={getAgainList?.data?.total}
+            page={queryForm.pageNum}
+            pageSize={queryForm.pageSize}
+            sortData={{
+                field: queryForm?.sortFiled,
+                order: queryForm?.sortType === 'asc' ? 'ascend' : 'descend'
+            }}
+            title={`游戏首日复充`}
+            onChange={(props: any) => {
+                let { pagination, sortData } = props
+                let { current, pageSize } = pagination
+                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                if (sortData && sortData?.order) {
+                    newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'asc' : 'desc'
+                    newQueryForm['sortFiled'] = sortData?.field
+                } else {
+                    delete newQueryForm['sortType']
+                    delete newQueryForm['sortFiled']
+                }
+                newQueryForm.pageNum = current
+                newQueryForm.pageSize = pageSize
+                setQueryForm({ ...newQueryForm })
+            }}
+            config={columns12(queryForm.sourceSystem as string)}
+            configName={'游戏首日复充'}
+        />
+    </div>
+}
+
+export default Again

src/pages/gameDataStatistics/gameData/again/tableConfig.tsx

@@ -0,0 +1,427 @@
+import React from "react"
+import { Statistic } from "antd"
+import { gameClassifyEnum } from "@/components/QueryForm/const"
+import WidthEllipsis from "@/components/widthEllipsis"
+import { version } from "../../components/TableData"
+import moment from "moment"
+import style from './index.less'
+import UserInfo from "./userInfo"
+
+function columns12(sourceSystem: string): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+    const getFieldDta = () => {
+        let defaultValue = [  // 默认展示字段
+            { label: '充值人数', key: 'rechargeCount', type: 'D1~Dn' },
+            { label: '充值金额', key: 'rechargeMoney', type: 'D1~Dn' },
+            { label: '充值占比', key: 'percentage', type: 'D1~Dn' },
+        ]
+        let mySelectFieldData = localStorage.getItem(`myAdFieldConfig${version}_游戏首日复充`)
+        let newSelectFieldData: any = {}
+        if (mySelectFieldData) {
+            newSelectFieldData = JSON.parse(mySelectFieldData).date_field
+        } else {
+            newSelectFieldData = defaultValue
+        }
+        return newSelectFieldData
+    }
+
+    let defaultStart = 13
+    // 用户LTV
+    const day = Array(30).fill('').map((_item: string, index: number) => {
+        let field = `da${index + 1}Trend`
+        let data = {
+            title: `D${index + 1}`,
+            dataIndex: field,
+            label: "D1~Dn",
+            align: "center",
+            width: 110,
+            render: (a: any, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                let fieldData = getFieldDta()
+                if (fieldData?.length > 0 && index <= day) {
+                    let data: any = {}
+                    let keyS: string[] = fieldData?.map((item: any) => item.key)
+                    switch (fieldData[0].type) {
+                        case 'D1~Dn':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div className={style.dbox}>
+                                    {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeCount}</span></span>}
+                                    {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
+                                    {keyS?.includes('percentage') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>比：<span>{(data?.percentage * 100)?.toFixed(2)}%</span></span>}
+                                    <UserInfo data={a} sourceSystem={sourceSystem} />
+                                </div>
+                            }
+                            return '--'
+                    }
+                }
+                return '--'
+            },
+        }
+        data['default'] = defaultStart + index
+        return data
+    })
+
+    // 用户LTV月
+    let defaultStartM = 43
+    let month = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
+        let field = `m${item}Trend`
+        let data = {
+            title: `M${item}`,
+            dataIndex: field,
+            label: "D1~Dn",
+            align: "center",
+            width: 110,
+            render: (a: any, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                let fieldData = getFieldDta()
+                if (fieldData?.length > 0 && item * 30 <= day) {
+                    let data: any = {}
+                    let keyS: string[] = fieldData?.map((item: any) => item.key)
+                    switch (fieldData[0].type) {
+                        case 'D1~Dn':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div className={style.dbox}>
+                                    {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeCount}</span></span>}
+                                    {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
+                                    {keyS?.includes('percentage') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>比：<span>{(data?.percentage * 100)?.toFixed(2)}%</span></span>}
+                                    <UserInfo data={a} sourceSystem={sourceSystem} />
+                                </div>
+                            }
+                            return '--'
+                    }
+                }
+                return '--'
+            },
+        }
+        data['default'] = defaultStartM + index
+        return data
+    })
+    month.push({
+        title: `Y1`,
+        dataIndex: 'y1Trend',
+        label: "D1~Dn",
+        align: "center",
+        width: 70,
+        default: 53,
+        render: (a: any, b: any) => {
+            let date1 = moment()
+            if (b?.costDate === '总计') {
+                if (b?.beginDay) {
+                    date1 = moment(b?.beginDay)
+                } else {
+                    date1 = moment()
+                }
+            } else {
+                date1 = moment(b.costDate)
+            }
+            let dt = moment()
+            let day = dt.diff(date1, 'day');
+            let fieldData = getFieldDta()
+            if (fieldData?.length > 0 && 360 <= day) {
+                let data: any = {}
+                let keyS: string[] = fieldData?.map((item: any) => item.key)
+                switch (fieldData[0].type) {
+                    case 'D1~Dn':
+                        if (b?.['y1Trend']) {
+                            data = b?.['y1Trend']
+                            return <div className={style.dbox}>
+                                {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeCount}</span></span>}
+                                {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
+                                {keyS?.includes('percentage') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>比：<span>{(data?.percentage * 100)?.toFixed(2)}%</span></span>}
+                                <UserInfo data={a} sourceSystem={sourceSystem} />
+                            </div>
+                        }
+                        return '--'
+                }
+            }
+            return '--'
+        },
+    } as any)
+    month.push({
+        title: `总`,
+        dataIndex: 'totalTrend',
+        label: "D1~Dn",
+        align: "center",
+        width: 110,
+        default: 54,
+        render: (a: any, b: any) => {
+            let fieldData = getFieldDta()
+            if (fieldData?.length > 0) {
+                let data: any = {}
+                let keyS: string[] = fieldData?.map((item: any) => item.key)
+                switch (fieldData[0].type) {
+                    case 'D1~Dn':
+                        if (b?.['totalTrend']) {
+                            data = b?.['totalTrend']
+                            return <div className={style.dbox}>
+                                {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeCount}</span></span>}
+                                {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
+                                {keyS?.includes('percentage') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>比：<span>{(data?.percentage * 100)?.toFixed(2)}%</span></span>}
+                                <UserInfo data={a} sourceSystem={sourceSystem} />
+                            </div>
+                        }
+                        return '--'
+                }
+            }
+            return '--'
+        },
+    } as any)
+
+
+    return [
+        {
+            label: '游戏信息',
+            data: [
+                {
+                    title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 2,
+                    render: (a: string, b: any) => (<WidthEllipsis isCopy={b?.costDate !== '总计'} value={a} />)
+                },
+                {
+                    title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
+                }
+            ]
+        },
+        {
+            label: '时间',
+            data: [
+                {
+                    title: '日期', dataIndex: 'costDate', label: '时间', align: 'center', width: 90, default: 1,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+            ]
+        },
+        {
+            label: '消耗',
+            data: [
+                {
+                    title: '消耗', dataIndex: 'cost', label: '消耗', align: 'center', width: 90, sorter: true, default: 3,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
+            ]
+        },
+        {
+            label: '用户数据',
+            data: [
+                {
+                    title: '注册人数', dataIndex: 'regNum', label: '用户数据', align: 'center', width: 70, sorter: true, default: 4,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
+            ]
+        },
+        {
+            label: '付费数据',
+            data: [
+                {
+                    title: '首日新用户充值次数', dataIndex: 'firstNewUserAmountCount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 5,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 6,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '老用户充值次数', dataIndex: 'oldUserCount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '老用户充值人数', dataIndex: 'oldUserNum', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '老用户充值金额', dataIndex: 'oldUserAmount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '账面充值次数', dataIndex: 'amountCount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '账面充值人数', dataIndex: 'amountNum', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '账面充值金额', dataIndex: 'amount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '新用户累计充值次数', dataIndex: 'newUserTotalAmountCount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 7,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 8,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日ROI', dataIndex: 'firstRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 9,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总ROI', dataIndex: 'totalRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 12,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '首日付费率', dataIndex: 'firstAmountRate', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '至今付费率', tips: '至今付费率（总）=新用户累计充值人数/注册人数', dataIndex: 'todayAmountRate', label: '付费数据', align: 'center', width: 80, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '新用户付费比', dataIndex: 'newUserRate', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '首日客单价', dataIndex: 'firstAvgAmount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日充值成本', dataIndex: 'firstNewUserRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 10,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总充值成本', dataIndex: 'totalRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 11,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '至今客单价', tips: '至今客单价（总）=新用户累计充值金额/新用户累计充值次数', dataIndex: 'todayAvgAmount', label: '付费数据', align: 'center', width: 80, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '账面客单价', dataIndex: 'avgAmount', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '复充率', tips: '复充率（总）=新用户复充人数/新用户累计充值人数（新用户复充人数为累计充值次数n≥2）', dataIndex: 'userAgainRate', label: '付费数据', align: 'center', width: 80, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+
+                {
+                    title: '单日付费100+人数', dataIndex: 'hundredUserNum', label: '付费数据', align: 'center', width: 90, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '单日付费100+成本', dataIndex: 'hundredUserNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '首日创角人数', dataIndex: 'firstRoleNum', label: '付费数据', align: 'center', width: 80, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '创角人数', dataIndex: 'roleNum', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '新用户累计创角人数', dataIndex: 'newUserTotalRoleNum', label: '付费数据', align: 'center', width: 85, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日创角人数成本', dataIndex: 'firstRoleNumCost', label: '付费数据', align: 'center', width: 80, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '创角人数成本', dataIndex: 'roleNumCost', label: '付费数据', align: 'center', width: 75, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '新用户累计创角人数成本', dataIndex: 'newUserTotalRoleNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '首日创角率', dataIndex: 'firstRoleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '创角率', dataIndex: 'roleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '新用户累计创角率', dataIndex: 'newUserTotalRoleNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '新增注册ARPPU', dataIndex: 'regUserArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日付费ARPPU', dataIndex: 'firstAmountArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '至今付费ARPPU', dataIndex: 'todayAmountArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '账面ARPPU', dataIndex: 'amountArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
+            ]
+        },
+        {
+            fieldSHow: {
+                label: 'D1~Dn区间字段展示',
+                saveField: 'date_field',
+                defaultValue: [  // 默认展示字段
+                    { label: '充值人数', key: 'rechargeCount', type: 'D1~Dn' },
+                    { label: '充值金额', key: 'rechargeMoney', type: 'D1~Dn' },
+                    { label: '充值占比', key: 'percentage', type: 'D1~Dn' },
+                ],
+                data: [
+                    {
+                        label: 'D1~Dn',
+                        data: [
+                            { label: '充值人数', key: 'rechargeCount', type: 'D1~Dn' },
+                            { label: '充值金额', key: 'rechargeMoney', type: 'D1~Dn' },
+                            { label: '充值占比', key: 'percentage', type: 'D1~Dn' },
+                        ]
+                    }
+                ]
+            },
+            label: 'D1~Dn',
+            data: [
+                ...day,
+                ...month
+            ]
+        }
+    ]
+}
+
+export default columns12

src/pages/gameDataStatistics/gameData/again/userInfo.tsx

@@ -0,0 +1,140 @@
+import { useAjax } from "@/Hook/useAjax"
+import WidthEllipsis from "@/components/widthEllipsis"
+import { getDetailsApi } from "@/services/gameData/game"
+import { Popover, Statistic, Table, Tag } from "antd"
+import { ColumnsType } from "antd/lib/table"
+import React, { useEffect, useState } from "react"
+
+
+
+interface Props {
+    data: any
+    sourceSystem: string
+}
+
+/**
+ * 用户详情
+ * @param param0 
+ * @returns 
+ */
+const UserInfo: React.FC<Props> = ({ data, sourceSystem }) => {
+
+    /******************************/
+    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
+    const [visible, setVisible] = useState<boolean>(false)
+    const getDetails = useAjax((params) => getDetailsApi(params))
+    /******************************/
+
+    useEffect(() => {
+        if (visible) {
+            getDetails.run({ againTrendVO: { ...data, sourceSystem }, ...queryForm })
+        }
+    }, [queryForm, visible])
+
+    const visibleChange = (visible: boolean) => {
+        setVisible(visible)
+    }
+
+    return <>
+
+        <Popover
+            overlayInnerStyle={{ width: 600, padding: 0 }}
+            content={<Table
+                size="small"
+                loading={getDetails.loading}
+                scroll={{ x: 600, y: 280 }}
+                dataSource={getDetails?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
+                columns={columns}
+                rowKey={'id'}
+                pagination={{
+                    current: queryForm.pageNum,//当前页数,需state控制配合翻页
+                    pageSize: queryForm.pageSize,
+                    total: getDetails?.data?.total || 0,
+                    defaultCurrent: 1,//默认初始的当前页数
+                    defaultPageSize: 20,//默认初始的每页条数
+                    pageSizeOptions: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
+                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
+                    hideOnSinglePage: false,//只有一页数据隐藏分页
+                    showLessItems: true,
+                }}
+                onChange={(props: any) => {
+                    let { current, pageSize } = props
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = current
+                    newQueryForm.pageSize = pageSize
+                    setQueryForm({ ...newQueryForm })
+                }}
+            />}
+            trigger="click"
+            title="用户详情"
+            placement="left"
+            destroyTooltipOnHide={true}
+            onVisibleChange={visibleChange}
+        >
+            <span style={{ fontSize: 12, fontWeight: 'bold' }}><a>用户详情</a></span>
+        </Popover>
+    </>
+}
+
+export default React.memo(UserInfo)
+
+
+const columns: ColumnsType<any> = [
+    {
+        title: '玩家ID',
+        dataIndex: 'playerId',
+        key: 'playerId',
+        width: 60,
+        fixed: 'left',
+        align: 'center'
+    },
+    {
+        title: '角色名称',
+        dataIndex: 'roleName',
+        key: 'roleName',
+        width: 90,
+        align: 'center',
+        render: (a: string) => (<WidthEllipsis value={a} />)
+    },
+    {
+        title: '游戏服',
+        dataIndex: 'serverName',
+        key: 'serverName',
+        width: 90,
+        align: 'center',
+        render: (a: string) => (<WidthEllipsis value={a} />)
+    },
+    {
+        title: '玩家操作系统',
+        dataIndex: 'playerOs',
+        key: 'playerOs',
+        width: 70,
+        align: 'center',
+        render: (a: string) => (<WidthEllipsis value={a} />)
+    },
+    {
+        title: '注册渠道名称',
+        dataIndex: 'regAgentName',
+        key: 'regAgentName',
+        width: 100,
+        align: 'center',
+        render: (a: string) => (<WidthEllipsis value={a} />)
+    },
+    {
+        title: '注册渠道ID',
+        dataIndex: 'regAgentId',
+        key: 'regAgentId',
+        width: 70,
+        align: 'center',
+        render: (a: string) => (<WidthEllipsis value={a} />)
+    },
+    {
+        title: '充值金额',
+        dataIndex: 'todayTotalAmount',
+        key: 'todayTotalAmount',
+        width: 70,
+        align: 'center',
+        fixed: 'right',
+        render: (a: string) => <Statistic value={a || 0} />
+    },
+];

src/pages/gameDataStatistics/gameData/ltv/index.tsx

@@ -40,7 +40,7 @@ const Ltv: React.FC = () => {
 
     return <div>
         <Tabs type="card" className="tabsBottom0" accessKey={accessKey} onChange={(accessKey) => setAccessKey(accessKey)}>
-            <Tabs.TabPane tab="用户" key="1" />
+            <Tabs.TabPane tab="注册" key="1" />
             <Tabs.TabPane tab="创角" key="2" />
         </Tabs>
 

src/pages/gameDataStatistics/gameData/ltv/tableConfig.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Statistic } from "antd"
 import { gameClassifyEnum } from "@/components/QueryForm/const"
 import WidthEllipsis from "@/components/widthEllipsis"
+import moment from "moment"
 
 function columnsUser12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
 
@@ -10,12 +11,29 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
     const userLtvDay = Array(90).fill('').map((_item: string, index: number) => {
         let field = `userLtv${index + 1}`
         let data = {
-            title: `用户LTV_D${index + 1}`,
+            title: `注册LTV_D${index + 1}`,
             dataIndex: field,
-            label: "用户LTV",
+            label: "注册LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (index <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         data['default'] = defaultStart + index
         return data
@@ -26,29 +44,64 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
     let userLtvMonth = [4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
         let field = `userLtvM${item}`
         let data = {
-            title: `用户LTV_M${item}`,
+            title: `注册LTV_M${item}`,
             dataIndex: field,
-            label: "用户LTV",
+            label: "注册LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (item * 30 <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         data['default'] = defaultStartM + index
         return data
     })
     userLtvMonth.push({
-        title: `用户LTV_Y1`,
+        title: `注册LTV_Y1`,
         dataIndex: 'userLtvY1',
-        label: "用户LTV",
+        label: "注册LTV",
         align: "center",
         width: 70,
         default: 111,
-        render: (a: string) => <Statistic value={a || 0} />
+        render: (a: string, b: any) => {
+            let date1 = moment()
+            if (b?.costDate === '总计') {
+                if (b?.beginDay) {
+                    date1 = moment(b?.beginDay)
+                } else {
+                    date1 = moment()
+                }
+            } else {
+                date1 = moment(b.costDate)
+            }
+            let dt = moment()
+            let day = dt.diff(date1, 'day');
+            if (365 <= day) {
+                return <Statistic value={a || 0} />
+            }
+            return '--'
+        }
     } as any)
+    
     userLtvMonth.push({
-        title: `用户LTV_总`,
+        title: `注册LTV_总`,
         dataIndex: 'userLtvTotal',
-        label: "用户LTV",
+        label: "注册LTV",
         align: "center",
         width: 70,
         default: 112,
@@ -65,10 +118,28 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
             label: "创角LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (index <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         return data
     })
+
     let roleLtvMonth = [4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
         let field = `roleLtvM${item}`
         let data = {
@@ -77,18 +148,54 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
             label: "创角LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (item * 30 <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         return data
     })
+
     roleLtvMonth.push({
         title: `创角LTV_Y1`,
         dataIndex: 'roleLtvY1',
         label: "创角LTV",
         align: "center",
         width: 70,
-        render: (a: string) => <Statistic value={a || 0} />
+        render: (a: string, b: any) => {
+            let date1 = moment()
+            if (b?.costDate === '总计') {
+                if (b?.beginDay) {
+                    date1 = moment(b?.beginDay)
+                } else {
+                    date1 = moment()
+                }
+            } else {
+                date1 = moment(b.costDate)
+            }
+            let dt = moment()
+            let day = dt.diff(date1, 'day');
+            if (365 <= day) {
+                return <Statistic value={a || 0} />
+            }
+            return '--'
+        }
     } as any)
+
     roleLtvMonth.push({
         title: `创角LTV_总`,
         dataIndex: 'roleLtvTotal',
@@ -98,7 +205,6 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
         render: (a: string) => <Statistic value={a || 0} />
     } as any)
 
-
     return [
         {
             label: '游戏信息',
@@ -303,7 +409,7 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
             ]
         },
         {
-            label: '用户LTV',
+            label: '注册LTV',
             data: [
                 ...userLtvDay,
                 ...userLtvMonth

src/pages/gameDataStatistics/gameData/ltv/tableConfigRole.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Statistic } from "antd"
 import { gameClassifyEnum } from "@/components/QueryForm/const"
 import WidthEllipsis from "@/components/widthEllipsis"
+import moment from "moment"
 
 function columnsRole12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
 
@@ -9,12 +10,29 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
     const userLtvDay = Array(90).fill('').map((_item: string, index: number) => {
         let field = `userLtv${index + 1}`
         let data = {
-            title: `用户LTV_D${index + 1}`,
+            title: `注册LTV_D${index + 1}`,
             dataIndex: field,
-            label: "用户LTV",
+            label: "注册LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (index <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         return data
     })
@@ -23,27 +41,63 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
     let userLtvMonth = [4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
         let field = `userLtvM${item}`
         let data = {
-            title: `用户LTV_M${item}`,
+            title: `注册LTV_M${item}`,
             dataIndex: field,
-            label: "用户LTV",
+            label: "注册LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (item * 30 <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         return data
     })
+
     userLtvMonth.push({
-        title: `用户LTV_Y1`,
+        title: `注册LTV_Y1`,
         dataIndex: 'userLtvY1',
-        label: "用户LTV",
+        label: "注册LTV",
         align: "center",
         width: 70,
-        render: (a: string) => <Statistic value={a || 0} />
+        render: (a: string, b: any) => {
+            let date1 = moment()
+            if (b?.costDate === '总计') {
+                if (b?.beginDay) {
+                    date1 = moment(b?.beginDay)
+                } else {
+                    date1 = moment()
+                }
+            } else {
+                date1 = moment(b.costDate)
+            }
+            let dt = moment()
+            let day = dt.diff(date1, 'day');
+            if (365 <= day) {
+                return <Statistic value={a || 0} />
+            }
+            return '--'
+        }
     } as any)
+
     userLtvMonth.push({
-        title: `用户LTV_总`,
+        title: `注册LTV_总`,
         dataIndex: 'userLtvTotal',
-        label: "用户LTV",
+        label: "注册LTV",
         align: "center",
         width: 70,
         render: (a: string) => <Statistic value={a || 0} />
@@ -59,7 +113,24 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
             label: "创角LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (index <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         data['default'] = defaultStart + index
         return data
@@ -73,11 +144,29 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
             label: "创角LTV",
             align: "center",
             width: 70,
-            render: (a: string) => <Statistic value={a || 0} />
+            render: (a: string, b: any) => {
+                let date1 = moment()
+                if (b?.costDate === '总计') {
+                    if (b?.beginDay) {
+                        date1 = moment(b?.beginDay)
+                    } else {
+                        date1 = moment()
+                    }
+                } else {
+                    date1 = moment(b.costDate)
+                }
+                let dt = moment()
+                let day = dt.diff(date1, 'day');
+                if (item * 30 <= day) {
+                    return <Statistic value={a || 0} />
+                }
+                return '--'
+            }
         }
         data['default'] = defaultStartM + index
         return data
     })
+
     roleLtvMonth.push({
         title: `创角LTV_Y1`,
         dataIndex: 'roleLtvY1',
@@ -85,8 +174,26 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
         align: "center",
         width: 70,
         default: 111,
-        render: (a: string) => <Statistic value={a || 0} />
+        render: (a: string, b: any) => {
+            let date1 = moment()
+            if (b?.costDate === '总计') {
+                if (b?.beginDay) {
+                    date1 = moment(b?.beginDay)
+                } else {
+                    date1 = moment()
+                }
+            } else {
+                date1 = moment(b.costDate)
+            }
+            let dt = moment()
+            let day = dt.diff(date1, 'day');
+            if (365 <= day) {
+                return <Statistic value={a || 0} />
+            }
+            return '--'
+        }
     } as any)
+
     roleLtvMonth.push({
         title: `创角LTV_总`,
         dataIndex: 'roleLtvTotal',
@@ -97,7 +204,6 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
         render: (a: string) => <Statistic value={a || 0} />
     } as any)
 
-
     return [
         {
             label: '游戏信息',
@@ -302,7 +408,7 @@ function columnsRole12(): { label: string, fieldSHow?: { label: string, saveFiel
             ]
         },
         {
-            label: '用户LTV',
+            label: '注册LTV',
             data: [
                 ...userLtvDay,
                 ...userLtvMonth

src/services/gameData/game.ts

@@ -143,4 +143,43 @@ export async function gteLtvTotalApi(data: LtvListProps) {
         method: 'POST',
         data
     });
+}
+
+
+export interface AgainListProps extends LtvListProps {}
+/**
+ * 游戏首日复充
+ * @param data 
+ * @returns 
+ */
+export async function getAgainListApi(data: AgainListProps) {
+    return request(wapi + `/gameData/firstNewUser/again`, {
+        method: 'POST',
+        data
+    });
+}
+
+/**
+ * 游戏首日复充 总计
+ * @param data 
+ * @returns 
+ */
+export async function getAgainTotalApi(data: AgainListProps) {
+    return request(wapi + `/gameData/firstNewUser/again/total`, {
+        method: 'POST',
+        data
+    });
+}
+
+
+/**
+ * 用户详情
+ * @param data 
+ * @returns 
+ */
+export async function getDetailsApi(data: AgainListProps) {
+    return request(wapi + `/gameData/user/details`, {
+        method: 'POST',
+        data
+    });
 }