fix

config/routerConfig.ts

@@ -337,6 +337,12 @@ const gameDataStatistics = {
                     access: 'gameTotal',
                     component: './gameDataStatistics/medium/gameTotal',
                 },
+                {
+                    path: '/gameDataStatistics/medium/mediumActive',
+                    name: '游戏媒体留存数据',
+                    access: 'mediumActive',
+                    component: './gameDataStatistics/medium/mediumActive',
+                },
             ]
         },
         {

src/components/QueryForm/const.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 // 排行默认时间
 export const getPresetsRanking = () => {
-    let date = {
+    let date: { [x: string]: any[] } = {
         '今天排行': [moment(), moment()],
         '昨天排行': [moment().subtract(1, 'd'), moment().subtract(1, 'd')],
         '7日排行': [moment().subtract(7, 'd'), moment()],
@@ -16,7 +16,7 @@ export const getPresetsRanking = () => {
 
 // 获取默认设置时间
 export const getPresets = () => {
-    let date = {
+    let date: { [x: string]: any[] } = {
         '今天': [moment(), moment()],
         '昨天': [moment().subtract(1, 'd'), moment().subtract(1, 'd')],
         '7日': [moment().subtract(7, 'd'), moment()],

src/pages/gameDataStatistics/adlist/tencentMonitor/tableConfig.tsx

@@ -98,7 +98,7 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
                 },
                 {
                     title: '投放媒体', dataIndex: 'accountType', label: '账户信息', align: 'center', width: 70,
-                    render: (a: string, b: any) => (<WidthEllipsis value={TYPE[a]} />)
+                    render: (a: string, b: any) => (<WidthEllipsis value={TYPE[a as keyof typeof TYPE]} />)
                 },
                 {
                     title: '余额', dataIndex: 'balance', label: '账户信息', align: 'center', width: 70, sorter: true,
@@ -115,7 +115,7 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
                 },
                 {
                     title: '推广游戏应用类型', dataIndex: 'classify', label: '推广内容', align: 'center', width: 95,
-                    render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
+                    render: (a: string) => (<span>{gameClassifyEnum[a as keyof typeof gameClassifyEnum]}</span>)
                 }
             ]
         },
@@ -132,23 +132,23 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
                 },
                 {
                     title: '项目名称', dataIndex: 'projectName', label: '广告信息', align: 'center', width: 130,
-                    render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />)
+                    render: (a: string) => (<WidthEllipsis isCopy value={a} />)
                 },
                 {
                     title: '项目ID', dataIndex: 'projectId', label: '广告信息', align: 'center', width: 90,
-                    render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />)
+                    render: (a: string) => (<WidthEllipsis isCopy value={a} />)
                 },
                 {
                     title: '广告状态', dataIndex: 'status', label: '广告信息', align: 'left', width: 120, default: 7,
-                    render: (a: string, b: any) => (<WidthEllipsis value={ADSTATUSEnum[a]} />)
+                    render: (a: string) => (ADSTATUSEnum[a as keyof typeof ADSTATUSEnum])
                 },
                 {
                     title: '推广目标', dataIndex: 'landingType', label: '广告信息', align: 'center', width: 80,
-                    render: (a: string, b: any) => (<WidthEllipsis value={LANDINGTYPEEnum[a]} />)
+                    render: (a: string, b: any) => (<WidthEllipsis value={LANDINGTYPEEnum[a as keyof typeof LANDINGTYPEEnum]} />)
                 },
                 {
                     title: '出价方式', dataIndex: 'pricing', label: '广告信息', align: 'center', width: 100, default: 8,
-                    render: (a: string, b: any) => (<WidthEllipsis value={PRICINGEnum[a]} />)
+                    render: (a: string, b: any) => (<WidthEllipsis value={PRICINGEnum[a as keyof typeof PRICINGEnum]} />)
                 },
                 {
                     title: '当前出价', dataIndex: 'cpaBid', label: '广告信息', align: 'center', width: 70, default: 9,

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import TableData, { version } from "../../components/TableData"
+import TableData from "../../components/TableData"
 import QueryForm from "@/components/QueryForm"
 import { useAjax } from "@/Hook/useAjax"
 import { ActiveDataProps, getActiveDataListApi, getActiveDataTotalApi } from "@/services/gameData/game"
@@ -102,4 +102,4 @@ const Active: React.FC = () => {
     </div>
 }
 
-export default React.memo(Active)
+export default Active

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

@@ -11,7 +11,7 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
     // 留存数据
     const activeDay = Array(90).fill('').map((_item: string, index: number) => {
         let field = `da${index + 1}Trend`
-        let data = {
+        let data: any = {
             title: `D${index + 1}`,
             dataIndex: field,
             label: "留存数据",
@@ -150,7 +150,7 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
     let defaultStartM = 103
     let activeMonth = [4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => {
         let field = `m${item}Trend`
-        let data = {
+        let data: any = {
             title: `M${item}`,
             dataIndex: field,
             label: "留存数据",
@@ -295,7 +295,7 @@ function columnsUser12(): { label: string, fieldSHow?: { label: string, saveFiel
                 },
                 {
                     title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 80,
-                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
+                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a as keyof typeof gameClassifyEnum]} />)
                 }
             ]
         },

src/pages/gameDataStatistics/medium/gameTotal/tableConfig.tsx

@@ -33,11 +33,11 @@ function columns12() {
                 },
                 {
                     title: '推广游戏应用类型', dataIndex: 'gameType', label: '基本信息', align: 'center', width: 95, default: 3,
-                    render: (a: string, b: any) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
+                    render: (a: string, b: any) => (<WidthEllipsis value={gameClassifyEnum[a as keyof typeof gameClassifyEnum]} />)
                 },
                 {
                     title: '推广媒体', dataIndex: 'accountType', label: '基本信息', align: 'center', width: 95, default: 4,
-                    render: (a: string, b: any) => (<WidthEllipsis value={TYPE[a]} />)
+                    render: (a: string, b: any) => (<WidthEllipsis value={TYPE[a as keyof typeof TYPE]} />)
                 },
                 {
                     title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'center', width: 70, default: 5, sorter: true,

src/pages/gameDataStatistics/medium/mediumActive/index.less

@@ -0,0 +1,27 @@
+.dbox {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    font-size: 12px;
+    // padding: 10px;
+    >span {
+        display: flex;
+        justify-content: left;
+        width: 100%;
+    }
+}
+
+.tabsBottom0 .ant-tabs-nav {
+    margin-bottom: 0;
+}
+
+.userPopover {
+
+    .ant-popover-inner-content {
+        padding: 3px 6px;
+    }
+
+    .ant-pagination {
+        margin: 8px 0 4px;
+    }
+}

src/pages/gameDataStatistics/medium/mediumActive/index.tsx

@@ -0,0 +1,104 @@
+import { ActiveEnum, getPresets } from "@/components/QueryForm/const"
+import React, { useEffect, useState } from "react"
+import TableData from "../../components/TableData"
+import QueryForm from "@/components/QueryForm"
+import { useAjax } from "@/Hook/useAjax"
+import moment from "moment"
+import columns12 from "./tableConfig"
+import { getMediumActiveDataListApi, getMediumActiveDataTotalApi, MediumActiveDataProps } from "@/services/gameData/medium"
+
+/**
+ * 游戏媒体留存
+ * @returns 
+ */
+const MediumActive: React.FC = () => {
+ 
+    /************************************/
+    const [queryForm, setQueryForm] = useState<MediumActiveDataProps>({
+        activeTypes: 'reg' as ActiveEnum,
+        pageNum: 1, pageSize: 40,
+        registeredBeginDate: moment().format('YYYY-MM-DD'),
+        registeredEndDate: moment().format('YYYY-MM-DD'),
+        sourceSystem: 'ZX_ONE'
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getMediumActiveDataList = useAjax((params) => getMediumActiveDataListApi(params))
+    const getMediumActiveDataTotal = useAjax((params) => getMediumActiveDataTotalApi(params))
+    /************************************/
+
+    useEffect(() => {
+        getMediumActiveDataList.run(queryForm)
+        getMediumActiveDataTotal.run(queryForm).then((res: { id: number; costDate: string; beginDay: string | undefined, activeTypes: any }) => {
+            res.id = 1
+            res.costDate = '总计'
+            res.beginDay = queryForm.registeredBeginDate || moment().subtract(366, 'days').format('YYYY-MM-DD')
+            res.activeTypes = queryForm.activeTypes
+            setTotalData([res])
+        })
+    }, [queryForm])
+
+    return <div>
+        <TableData
+            leftChild={<QueryForm
+                initialValues={{ regDay: [moment(), moment()], sourceSystem: 'ZX_ONE', activeTypes: 'reg' }}
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { regStartDay, gameClassify, 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
+                    }
+                    newQueryForm.classify = gameClassify
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+                isSource
+                isRegDay={{ ranges: getPresets() }}
+                isGameIds
+                isBGGameClassify
+                isActiveTypes
+                isType
+                isGameDimension
+            />}
+            isZj
+            totalData={totalData}
+            scroll={{ x: 1000, y: 600 }}
+            ajax={getMediumActiveDataList}
+            fixed={{ left: 2, right: 0 }}
+            dataSource={getMediumActiveDataList?.data?.records?.map((item: any, index: number) => ({ ...item, activeTypes: queryForm?.activeTypes, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
+            total={getMediumActiveDataList?.data?.total}
+            page={queryForm.pageNum}
+            pageSize={queryForm.pageSize}
+            sortData={{
+                field: queryForm?.sortFiled,
+                order: queryForm?.sortType === 'asc' ? 'ascend' : 'descend'
+            }}
+            estimatedRowHeight={() => 41}
+            title={`游戏媒体留存数据(用户活跃数据2023-08-20开始统计)`}
+            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()}
+            configName={'游戏媒体留存数据'}
+        />
+    </div>
+}
+
+export default MediumActive

src/pages/gameDataStatistics/medium/mediumActive/tableConfig.tsx

@@ -0,0 +1,505 @@
+import React from "react"
+import { Statistic, Tooltip } from "antd"
+import { gameClassifyEnum, TYPE } from "@/components/QueryForm/const"
+import WidthEllipsis from "@/components/widthEllipsis"
+import moment from "moment"
+import style from './index.less'
+
+function columnsUser12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+    let defaultStart = 14
+    // 留存数据
+    const activeDay = Array(90).fill('').map((_item: string, index: number) => {
+        let field = `da${index + 1}Trend`
+        let data: any = {
+            title: `D${index + 1}`,
+            dataIndex: field,
+            label: "留存数据",
+            align: "center",
+            width: 125,
+            render: (_: 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');
+                if (index <= day) {
+                    let data: any = {}
+                    switch (b?.activeTypes) {
+                        case 'reg':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数：<span>{data?.activeNum}</span></span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率：<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        case 'role':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
+                                        角色留存
+                                        <Tooltip title="鼠标悬停展示完整名称">
+                                            <QuestionCircleOutlined />
+                                        </Tooltip>
+                                    </div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的活跃用户数" placement='left'>
+                                                <span>活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewActiveUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#faad14', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的新增创角用户数" placement='left'>
+                                                <span>新增创角：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewUserNum}</span>
+                                        </span>
+                                        <span style={{ color: '#0f538a', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的创角用户数" placement='left'>
+                                                <span>累计创角：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#eb2f96', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的老活跃用户数" placement='left'>
+                                                <span>老活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleOldActiveUserNum}</span>
+                                        </span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
+                                            <Tooltip title="创角留存率" placement='left'>
+                                                <span>留存率：</span>
+                                            </Tooltip>
+                                            <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        case 'amount':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
+                                        付费留存
+                                        <Tooltip title="鼠标悬停展示完整名称">
+                                            <QuestionCircleOutlined />
+                                        </Tooltip>
+                                    </div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的活跃用户数" placement='left'>
+                                                <span>活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.newActiveUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#faad14', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的新增付费用户" placement='left'>
+                                                <span>新增付费：</span>
+                                            </Tooltip>
+                                            <span>{data?.newUserAmountNum}</span>
+                                        </span>
+                                        <span style={{ color: '#0f538a', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的付费用户数" placement='left'>
+                                                <span>付费人数：</span>
+                                            </Tooltip>
+                                            <span>{data?.newUserTotalAmountNum}</span>
+                                        </span>
+                                        <span style={{ color: '#eb2f96', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的老活跃用户数" placement='left'>
+                                                <span>老活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.oldActiveUserNum}</span>
+                                        </span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
+                                            <Tooltip title="付费留存率" placement='left'>
+                                                <span>留存率：</span>
+                                            </Tooltip>
+                                            <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        default:
+                            return '--'
+                    }
+                }
+                return '--'
+            }
+        }
+        data['default'] = defaultStart + index
+        return data
+    })
+
+    // 用户LTV月
+    let defaultStartM = 104
+    let activeMonth = [4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => {
+        let field = `m${item}Trend`
+        let data: any = {
+            title: `M${item}`,
+            dataIndex: field,
+            label: "留存数据",
+            align: "center",
+            width: 125,
+            render: (_: 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');
+                if (item * 30 <= day) {
+                    let data: any = {}
+                    switch (b?.activeTypes) {
+                        case 'reg':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数：<span>{data?.activeNum}</span></span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率：<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        case 'role':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
+                                        角色留存
+                                        <Tooltip title="鼠标悬停展示完整名称">
+                                            <QuestionCircleOutlined />
+                                        </Tooltip>
+                                    </div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的活跃用户数" placement='left'>
+                                                <span>活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewActiveUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#faad14', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的新增创角用户数" placement='left'>
+                                                <span>新增创角：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewUserNum}</span>
+                                        </span>
+                                        <span style={{ color: '#0f538a', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的创角用户数" placement='left'>
+                                                <span>累计创角：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleNewUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#eb2f96', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的老活跃用户数" placement='left'>
+                                                <span>老活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.roleOldActiveUserNum}</span>
+                                        </span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
+                                            <Tooltip title="创角留存率" placement='left'>
+                                                <span>留存率：</span>
+                                            </Tooltip>
+                                            <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        case 'amount':
+                            if (b?.[field]) {
+                                data = b?.[field]
+                                return <div>
+                                    {/* <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
+                                        付费留存
+                                        <Tooltip title="鼠标悬停展示完整名称">
+                                            <QuestionCircleOutlined />
+                                        </Tooltip>
+                                    </div> */}
+                                    <div className={style.dbox}>
+                                        <span style={{ color: '#d81b60', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的活跃用户数" placement='left'>
+                                                <span>活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.newActiveUserTotalNum}</span>
+                                        </span>
+                                        <span style={{ color: '#faad14', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的新增付费用户" placement='left'>
+                                                <span>新增付费：</span>
+                                            </Tooltip>
+                                            <span>{data?.newUserAmountNum}</span>
+                                        </span>
+                                        <span style={{ color: '#0f538a', fontWeight: 600 }}>
+                                            <Tooltip title="累计到第N天的付费用户数" placement='left'>
+                                                <span>付费人数：</span>
+                                            </Tooltip>
+                                            <span>{data?.newUserTotalAmountNum}</span>
+                                        </span>
+                                        <span style={{ color: '#eb2f96', fontWeight: 600 }}>
+                                            <Tooltip title="第N天的老活跃用户数" placement='left'>
+                                                <span>老活跃数：</span>
+                                            </Tooltip>
+                                            <span>{data?.oldActiveUserNum}</span>
+                                        </span>
+                                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
+                                            <Tooltip title="付费留存率" placement='left'>
+                                                <span>留存率：</span>
+                                            </Tooltip>
+                                            <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            }
+                            return '--'
+                        default:
+                            return '--'
+                    }
+                }
+                return '--'
+            }
+        }
+        data['default'] = defaultStartM + index
+        return data
+    })
+
+    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 as keyof typeof gameClassifyEnum]} />)
+                },
+                {
+                    title: '推广媒体', dataIndex: 'accountType', label: '基本信息', align: 'center', width: 95, default: 3,
+                    render: (a: string, b: any) => (<WidthEllipsis value={TYPE[a as keyof typeof TYPE]} />)
+                },
+            ]
+        },
+        {
+            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: 4,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
+            ]
+        },
+        {
+            label: '用户数据',
+            data: [
+                {
+                    title: '注册人数', dataIndex: 'regNum', label: '用户数据', align: 'center', width: 70, sorter: true, default: 5,
+                    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: 6,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 7,
+                    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: 8,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 9,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '首日ROI', dataIndex: 'firstRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 10,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总ROI', dataIndex: 'totalRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 13,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : 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 ? {} : 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 ? {} : 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 ? {} : 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: 11,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总充值成本', dataIndex: 'totalRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 12,
+                    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 ? {} : 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 ? {} : 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 ? {} : 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 ? {} : 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} />
+                }
+            ]
+        },
+        {
+            label: '留存数据',
+            data: [
+                ...activeDay,
+                ...activeMonth
+            ]
+        },
+    ]
+}
+
+export default columnsUser12

src/services/gameData/medium.ts

@@ -1,6 +1,7 @@
 import { request } from 'umi';
 import { api } from '../api';
 import { Paging, SortProps } from './rankingList';
+import { ActiveEnum } from '@/components/QueryForm/const';
 let wapi = api + '/gameData'
 
 export interface MediaPromotionTotalProps extends Paging, SortProps {
@@ -201,4 +202,38 @@ export async function getMediaGameTotalSumApi(data: MediaGameTotalProps) {
         method: 'POST',
         data
     });
+}
+
+
+export interface MediumActiveDataProps extends Paging, SortProps {
+    activeTypes: ActiveEnum,
+    classify?: number,
+    gameId?: number,
+    // 注册开始时间
+    registeredBeginDate?: string,
+    registeredEndDate?: string,
+    accountType?: string
+}
+/**
+ * 媒体留存数据
+ * @param data 
+ * @returns 
+ */
+export async function getMediumActiveDataListApi(data: MediumActiveDataProps) {
+    return request(wapi + `/gameData/mediaActiveData/day`, {
+        method: 'POST',
+        data
+    });
+}
+
+/**
+ * 媒体留存总计
+ * @param data 
+ * @returns 
+ */
+export async function getMediumActiveDataTotalApi(data: MediumActiveDataProps) {
+    return request(wapi + `/gameData/mediaActiveData/total`, {
+        method: 'POST',
+        data
+    });
 }