fix

src/components/CustomList/index.less

@@ -97,6 +97,7 @@
         display: flex;
         align-items: center;
         flex: none;
+        border-top-left-radius: 6px;
       }
 
       .dataList {
@@ -152,6 +153,8 @@
       box-shadow: inset 1px 0 0 0 #e0e0e0;
       display: flex;
       flex-direction: column;
+      border-bottom-right-radius: 6px;
+      border-top-right-radius: 6px;
 
       .rightTitle {
         flex: none;
@@ -198,6 +201,7 @@
         background-color: #fafafa;
         border-top: 1px solid rgba(0, 0, 0, .08);
         box-shadow: inset 1px 0 0 0 #e0e0e0;
+        border-bottom-right-radius: 6px;
 
         &>div>button {
           border-radius: 4px;

src/components/CustomList/index.tsx

@@ -117,7 +117,6 @@ function CustomListModel(props: customProps) {
     }, [configName])
     // 获取个人配置
     const getUserList = () => {
-        console.log('获取个人配置====>')
         let mySelectData = localStorage.getItem(`myAdMonitorConfig${version}_` + configName)
         if (mySelectData) {//获取自定义配置
             let newMySelectData = JSON.parse(mySelectData)
@@ -140,7 +139,6 @@ function CustomListModel(props: customProps) {
             setListWidth(newSelectData)
         }
     }
-    console.log('selectData===>',)
     // 首次赋值默认宽
     const setListWidth = useCallback((selectData) => {
         if (selectData?.length === columns?.length && !selectData?.every((item: any) => item.width)) {

src/components/QueryForm/const.tsx

@@ -7,3 +7,9 @@ export const rangePresets: any = {
     '30日排行': [moment().subtract(30, 'd'), moment()]
 };
 
+export const czPresets: any = {
+    '今天': [moment(), moment()],
+    '昨天': [moment().subtract(1, 'd'), moment().subtract(1, 'd')],
+    '7日': [moment().subtract(7, 'd'), moment()],
+    '30日': [moment().subtract(30, 'd'), moment()]
+};

src/components/QueryForm/index.tsx

@@ -2,7 +2,7 @@ import { Button, Col, DatePicker, Form, Input, Radio, Row, Select, Space } from
 import React, { useEffect, useState } from "react"
 import moment from "moment"
 import { useAjax } from "@/Hook/useAjax"
-import { getAllOfOwnerUserApi, getChannelChoiceListApi, getGameChoiceListApi, getGameChoiceParentListType1Api, getSubUserWithSelfListApi, getTtAllUserListApi } from "@/services/gameData"
+import { getAllOfOwnerUserApi, getChannelChoiceListApi, getGameChoiceListApi, getGameChoiceParentListType1Api, getPayListApi, getSubUserWithSelfListApi, getTtAllUserListApi, getUserSystemTypeChoiceListApi } from "@/services/gameData"
 
 
 interface Props {
@@ -33,6 +33,10 @@ interface Props {
     isGameName?: boolean
     /** 是否开启 游戏ID 搜索 */
     isGameId?: boolean
+    /** 是否开启 充值游戏ID 搜索 */
+    isOrderGameId?: boolean
+    /** 是否开启 父游戏ID 搜索 */
+    isParentId?: boolean
     /** 是否开启 游戏应用类型 搜索 */
     isGameType?: boolean
     /** 是否开启 游戏角色名 搜索 */
@@ -47,6 +51,8 @@ interface Props {
     isMerchantNo?: boolean
     /** 是否开启 商户订单ID 搜索 */
     isOrderId?: boolean
+    /** 是否开启 商户订单号 搜索 */
+    isMerchantOrderNo?: boolean
     /** 是否开启 支付状态 搜索 */
     isPayStatus?: boolean
     /** 是否开启 支付方式 搜索 */
@@ -69,7 +75,7 @@ interface Props {
     isSysUserName?: boolean
     /** 是否开启 投手ID 搜索 */
     isSysUserId?: boolean
-    /** 是否开启 用户名 搜索 */
+    /** 是否开启 玩家账号 搜索 */
     isUserName?: boolean
     /** 是否开启 用户ID 搜索 */
     isUserId?: boolean
@@ -81,8 +87,16 @@ interface Props {
     rechargeDay?: {
         ranges?: any
     }
+    /** 是否开启布谷 游戏类型 筛选 */
+    isBGGameClassify?: boolean,
+    /** 是否开启 单个充值日期 选择 */
+    isRechargeDate?: boolean,
     /** 是否开启 开始时间 结束时间 搜索 */
     isBeginDay?: boolean
+    /** 是否开启 玩家ID 搜索 */
+    isGameUserId?: boolean
+    /** 是否开启 操作系统 选择 */
+    isOs?: boolean
 }
 /**
  * 游戏数据系统 请求参数
@@ -92,8 +106,9 @@ const QueryForm: React.FC<Props> = (props) => {
 
     /**************************/
     const {
-        onChange, initialValues, isAccount, isAccountId, isCompanyId, isCpId, isCpName, isCpOrderId, isCpStatus, isCreateDay, isDevice, isGameName, isRechargeGameName, isGameId, isGameRoleId, isGameRoleName, isFirstRecharge, isSwitch, isMerchantNo, isOrderId, isPayStatus, isPayWay, isProductName, isRegAgent, isAgentId, isPutAgent, isRegDay,
-        isRegGameName, isRegGameId, isSysUserName, isSysUserId, isUserName, isUserId, isSelectRanking, isGameType, isConsumeDay, rechargeDay, isBeginDay
+        onChange, initialValues, isAccount, isAccountId, isCompanyId, isCpId, isCpName, isCpOrderId, isCpStatus, isCreateDay, isDevice, isGameName, isRechargeGameName, isGameId, isOrderGameId, isGameRoleId,
+        isGameRoleName, isFirstRecharge, isSwitch, isMerchantNo, isOrderId, isMerchantOrderNo, isPayStatus, isPayWay, isProductName, isRegAgent, isAgentId, isPutAgent, isRegDay, isOs, isParentId,
+        isRegGameName, isRegGameId, isSysUserName, isRechargeDate, isBGGameClassify, isGameUserId, isSysUserId, isUserName, isUserId, isSelectRanking, isGameType, isConsumeDay, rechargeDay, isBeginDay
     } = props
     const [form] = Form.useForm()
     const [accountList, setAccountList] = useState<any[]>([])
@@ -104,6 +119,8 @@ const QueryForm: React.FC<Props> = (props) => {
     const getSubUserWithSelfList = useAjax(() => getSubUserWithSelfListApi())
     const getChannelChoiceList = useAjax(() => getChannelChoiceListApi())
     const getGameChoiceParentListType1 = useAjax(() => getGameChoiceParentListType1Api())
+    const getUserSystemTypeChoiceList = useAjax(() => getUserSystemTypeChoiceListApi())
+    const getPayList = useAjax(() => getPayListApi())
 
     /**************************/
 
@@ -124,10 +141,10 @@ const QueryForm: React.FC<Props> = (props) => {
 
     /** 游戏列表 */
     useEffect(() => {
-        if (isGameId) {
+        if (isGameId || isOrderGameId || isParentId) {
             getGameChoiceList.run()
         }
-    }, [isGameId])
+    }, [isGameId, isOrderGameId, isParentId])
 
     /** 投手列表 */
     useEffect(() => {
@@ -150,16 +167,30 @@ const QueryForm: React.FC<Props> = (props) => {
         }
     }, [isGameType])
 
+    /** 操作系统 */
+    useEffect(() => {
+        if (isOs) {
+            getUserSystemTypeChoiceList.run()
+        }
+    }, [isOs])
+
+    /** 支付方式 */
+    useEffect(() => {
+        if (isPayWay) {
+            getPayList.run()
+        }
+    }, [isPayWay])
+
     const onFinish = (data: any) => {
 
         // 处理订单创建日期
         if (isCreateDay) {
             if (data?.createDay && data?.createDay?.length > 0) {
-                data.createStartDay = moment(data?.createDay[0]).format('YYYY-MM-DD')
-                data.createEndDay = moment(data?.createDay[1]).format('YYYY-MM-DD')
+                data.beginOrderTime = moment(data?.createDay[0]).format('YYYY-MM-DD')
+                data.endOrderTime = moment(data?.createDay[1]).format('YYYY-MM-DD')
             } else {
-                data.createStartDay = ''
-                data.createEndDay = ''
+                data.beginOrderTime = ''
+                data.endOrderTime = ''
             }
             delete data.createDay
         }
@@ -217,7 +248,7 @@ const QueryForm: React.FC<Props> = (props) => {
     }
 
     return <Form layout="inline" className='queryForm' initialValues={initialValues} name="basic" form={form} onFinish={onFinish}>
-        <Row gutter={[0, 10]}>
+        <Row gutter={[0, 6]}>
             {/* 不同排行榜选择 */}
             {isSelectRanking && <Col><Form.Item name='dateType'>
                 <Radio.Group>
@@ -230,14 +261,14 @@ const QueryForm: React.FC<Props> = (props) => {
             </Form.Item></Col>}
             {/* 广告账户名称 */}
             {isAccount && <Col><Form.Item name='account'>
-                <Input placeholder="请输入广告账号" allowClear />
+                <Input placeholder="请输入广告账号" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 广告账号ID */}
             {isAccountId && <Col><Form.Item name='accountId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择广告账号'}
                     filterOption={(input, option) =>
@@ -252,7 +283,7 @@ const QueryForm: React.FC<Props> = (props) => {
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择公司'}
                     filterOption={(input, option) =>
@@ -265,14 +296,14 @@ const QueryForm: React.FC<Props> = (props) => {
             </Form.Item></Col>}
             {/* cp名 */}
             {isCpName && <Col><Form.Item name='cpName'>
-                <Input placeholder="请输入CP名称" allowClear />
+                <Input placeholder="请输入CP名称" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* CPID */}
             {isCpId && <Col><Form.Item name='cpId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择CP'}
                     filterOption={(input, option) =>
@@ -285,26 +316,14 @@ const QueryForm: React.FC<Props> = (props) => {
             </Form.Item></Col>}
             {/* CP方订单ID */}
             {isCpOrderId && <Col><Form.Item name='cpOrderId'>
-                <Select
-                    maxTagCount={1}
-                    showSearch
-                    style={{ minWidth: 150 }}
-                    allowClear
-                    placeholder={'请选择CP方订单'}
-                    filterOption={(input, option) =>
-                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    }
-                >
-                    <Select.Option value={'1'}>CP方订单001</Select.Option>
-                    <Select.Option value={'2'}>CP方订单002</Select.Option>
-                </Select>
+                <Input placeholder="输入CP订单号" style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* CP通知状态 */}
             {isCpStatus && <Col><Form.Item name='cpStatus'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择CP通知状态'}
                     filterOption={(input, option) =>
@@ -316,32 +335,30 @@ const QueryForm: React.FC<Props> = (props) => {
                     <Select.Option value={'3'}>失败</Select.Option>
                 </Select>
             </Form.Item></Col>}
-            {/* 订单创建日期搜索 */}
-            {isCreateDay && <Col><Form.Item name='createDay'>
-                <DatePicker.RangePicker placeholder={['订单创建开始日期', '订单创建结束日期']} />
-            </Form.Item></Col>}
-            {/* 充值日期搜索 */}
-            {rechargeDay && <Col><Form.Item name='rechargeDay'>
-                <DatePicker.RangePicker placeholder={['充值开始日期', '充值结束日期']} {...rechargeDay} />
-            </Form.Item></Col>}
+
+
             {/* 操作设备 */}
             {isDevice && <Col><Form.Item name='device'>
-                <Input placeholder="请输入操作设备" allowClear />
+                <Input placeholder="请输入操作设备" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 游戏名 */}
             {isRechargeGameName && <Col><Form.Item name='rechargeGameName'>
-                <Input placeholder="请输入游戏名" allowClear />
+                <Input placeholder="请输入游戏名" allowClear style={{ width: 140 }} />
+            </Form.Item></Col>}
+            {/* 玩家ID */}
+            {isGameUserId && <Col><Form.Item name='gameUserId'>
+                <Input placeholder="请输入玩家ID" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 游戏名 */}
             {isGameName && <Col><Form.Item name='gameName'>
-                <Input placeholder="请输入游戏名" allowClear />
+                <Input placeholder="请输入游戏名" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 游戏ID搜索 */}
             {isGameId && <Col><Form.Item name='gameId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择游戏'}
                     filterOption={(input, option) =>
@@ -351,12 +368,42 @@ const QueryForm: React.FC<Props> = (props) => {
                     {getGameChoiceList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                 </Select>
             </Form.Item></Col>}
+            {/* 充值游戏ID */}
+            {isOrderGameId && <Col><Form.Item name='orderGameId'>
+                <Select
+                    maxTagCount={1}
+                    showSearch
+                    style={{ minWidth: 140 }}
+                    allowClear
+                    placeholder={'请选择充值游戏'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getGameChoiceList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
+                </Select>
+            </Form.Item></Col>}
+            {/* 父游戏ID */}
+            {isParentId && <Col><Form.Item name='parentId'>
+                <Select
+                    maxTagCount={1}
+                    showSearch
+                    style={{ minWidth: 140 }}
+                    allowClear
+                    placeholder={'请选择父游戏'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getGameChoiceList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
+                </Select>
+            </Form.Item></Col>}
             {/* 游戏应用类型搜索 */}
             {isGameType && <Col><Form.Item name='gameType'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择游戏应用类型'}
                     filterOption={(input, option) =>
@@ -366,33 +413,35 @@ const QueryForm: React.FC<Props> = (props) => {
                     {getGameChoiceParentListType1?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                 </Select>
             </Form.Item></Col>}
-            {/* 游戏角色名 */}
-            {isGameRoleName && <Col><Form.Item name='gameRoleName'>
-                <Input placeholder="请输入游戏角色名" allowClear />
-            </Form.Item></Col>}
-            {/* 游戏角色名id搜索 */}
-            {isGameRoleId && <Col><Form.Item name='gameRoleId'>
+            {/* 布谷游戏应用类型搜索 */}
+            {isBGGameClassify && <Col><Form.Item name='gameClassify'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
-                    placeholder={'请选择游戏角色名'}
+                    placeholder={'请选择游戏应用类型'}
                     filterOption={(input, option) =>
                         (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }
                 >
-                    <Select.Option value={'1'}>游戏角色名1</Select.Option>
-                    <Select.Option value={'2'}>游戏角色名2</Select.Option>
-                    <Select.Option value={'3'}>游戏角色名3</Select.Option>
+                    {[{ id: 3, name: 'Android' }, { id: 4, name: 'IOS' }, { id: 5, name: 'H5' }, { id: 6, name: '小程序' }].map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                 </Select>
             </Form.Item></Col>}
+            {/* 游戏角色名 */}
+            {isGameRoleName && <Col><Form.Item name='roleName'>
+                <Input placeholder="请输入游戏角色名" allowClear style={{ width: 140 }} />
+            </Form.Item></Col>}
+            {/* 游戏角色名id搜索 */}
+            {isGameRoleId && <Col><Form.Item name='roleId'>
+                <Input placeholder="请输入角色ID" allowClear style={{ width: 140 }} />
+            </Form.Item></Col>}
             {/* 是否首充 */}
             {isFirstRecharge && <Col><Form.Item name='isFirstRecharge'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择是否首充'}
                     filterOption={(input, option) =>
@@ -408,7 +457,7 @@ const QueryForm: React.FC<Props> = (props) => {
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择是否切量'}
                     filterOption={(input, option) =>
@@ -421,20 +470,24 @@ const QueryForm: React.FC<Props> = (props) => {
             </Form.Item></Col>}
             {/* 收款商户号 */}
             {isMerchantNo && <Col><Form.Item name='merchantNo'>
-                <Input placeholder="请输入收款商户号" allowClear />
+                <Input placeholder="请输入收款商户号" allowClear style={{ width: 140 }} />
+            </Form.Item></Col>}
+            {/* 收款商户号 */}
+            {isMerchantOrderNo && <Col><Form.Item name='merchantOrderNo'>
+                <Input placeholder="商户订单号" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 收款商户号 */}
             {isOrderId && <Col><Form.Item name='orderId'>
-                <Input placeholder="请输入商户订单ID" allowClear />
+                <Input placeholder="商户订单ID" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
+
             {/* 支付状态 */}
-            {isPayStatus && <Col><Form.Item name='payStatus'>
+            {isPayStatus && <Col><Form.Item name='orderStatus'>
                 <Select
-                    maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ width: 100 }}
                     allowClear
-                    placeholder={'请选择支付状态'}
+                    placeholder={'支付状态'}
                     filterOption={(input, option) =>
                         (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }
@@ -446,23 +499,33 @@ const QueryForm: React.FC<Props> = (props) => {
             </Form.Item></Col>}
             {/* 支付方式 */}
             {isPayWay && <Col><Form.Item name='payWay'>
-                <Input placeholder="请输入支付方式" allowClear />
+                <Select
+                    showSearch
+                    style={{ width: 100 }}
+                    allowClear
+                    placeholder={'支付方式'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getPayList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.payName}</Select.Option>)}
+                </Select>
             </Form.Item></Col>}
             {/* 产品名称 */}
             {isProductName && <Col><Form.Item name='productName'>
-                <Input placeholder="请输入产品名称" allowClear />
+                <Input placeholder="请输入产品名称" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
 
             {/* 注册渠道名 */}
             {isRegAgent && <Col><Form.Item name='regAgent'>
-                <Input placeholder="请输入注册渠道名" allowClear />
+                <Input placeholder="请输入注册渠道名" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 推广渠道id */}
             {isAgentId && <Col><Form.Item name='agentId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ width: 140 }}
                     allowClear
                     placeholder={'请选择渠道'}
                     filterOption={(input, option) =>
@@ -476,24 +539,21 @@ const QueryForm: React.FC<Props> = (props) => {
 
             {/* 投放渠道名 */}
             {isPutAgent && <Col><Form.Item name='putAgent'>
-                <Input placeholder="请输入投放渠道名" allowClear />
+                <Input placeholder="请输入投放渠道名" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
 
-            {/* 用户注册日期搜索 */}
-            {isRegDay && <Col><Form.Item name='regDay'>
-                <DatePicker.RangePicker placeholder={['用户注册开始日期', '用户注册结束日期']} />
-            </Form.Item></Col>}
+
 
             {/* 注册游戏名 */}
             {isRegGameName && <Col><Form.Item name='regGameName'>
-                <Input placeholder="请输入注册游戏名" allowClear />
+                <Input placeholder="请输入注册游戏名" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 注册游戏id */}
             {isRegGameId && <Col><Form.Item name='regGameId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择注册游戏'}
                     filterOption={(input, option) =>
@@ -508,14 +568,14 @@ const QueryForm: React.FC<Props> = (props) => {
 
             {/* 投手名 */}
             {isSysUserName && <Col><Form.Item name='sysUserName'>
-                <Input placeholder="请输入投手名" allowClear />
+                <Input placeholder="请输入投手名" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 投手ID */}
             {isSysUserId && <Col><Form.Item name='pitcherId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择投手'}
                     filterOption={(input, option) =>
@@ -526,16 +586,16 @@ const QueryForm: React.FC<Props> = (props) => {
                 </Select>
             </Form.Item></Col>}
 
-            {/* 用户名 */}
-            {isUserName && <Col><Form.Item name='userName'>
-                <Input placeholder="请输入用户名" allowClear />
+            {/* 玩家账号 */}
+            {isUserName && <Col><Form.Item name='username'>
+                <Input placeholder="请输入玩家账号" allowClear style={{ width: 140 }} />
             </Form.Item></Col>}
             {/* 用户id */}
             {isUserId && <Col><Form.Item name='userId'>
                 <Select
                     maxTagCount={1}
                     showSearch
-                    style={{ minWidth: 150 }}
+                    style={{ minWidth: 140 }}
                     allowClear
                     placeholder={'请选择用户'}
                     filterOption={(input, option) =>
@@ -548,7 +608,27 @@ const QueryForm: React.FC<Props> = (props) => {
                 </Select>
             </Form.Item></Col>}
 
+            {/* 用户id */}
+            {isOs && <Col><Form.Item name='os'>
+                <Select
+                    maxTagCount={1}
+                    showSearch
+                    style={{ minWidth: 140 }}
+                    allowClear
+                    placeholder={'请选择操作系统'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getUserSystemTypeChoiceList?.data?.map((item: any) => <Select.Option value={item.os} key={item.os}>{item.os}</Select.Option>)}
+                </Select>
+            </Form.Item></Col>}
 
+            {/* 用户注册日期搜索 */}
+            {isRegDay && <Col><Form.Item name='regDay'>
+                <DatePicker.RangePicker placeholder={['用户注册开始日期', '用户注册结束日期']} />
+            </Form.Item></Col>}
+            
             {/* 消耗日期 搜索 */}
             {isConsumeDay && <Col><Form.Item name='consumeDay'>
                 <DatePicker.RangePicker placeholder={['消耗开始日期', '消耗结束日期']} />
@@ -559,6 +639,20 @@ const QueryForm: React.FC<Props> = (props) => {
                 <DatePicker.RangePicker placeholder={['开始日期', '结束日期']} />
             </Form.Item></Col>}
 
+            {/* 订单创建日期搜索 */}
+            {isCreateDay && <Col><Form.Item name='createDay'>
+                <DatePicker.RangePicker placeholder={['订单创建开始日期', '订单创建结束日期']} />
+            </Form.Item></Col>}
+            {/* 充值日期搜索 */}
+            {rechargeDay && <Col><Form.Item name='rechargeDay'>
+                <DatePicker.RangePicker placeholder={['充值开始日期', '充值结束日期']} {...rechargeDay} />
+            </Form.Item></Col>}
+
+            {/* 单个充值日期搜索 */}
+            {isRechargeDate && <Col><Form.Item name='rechargeDate'>
+                <DatePicker placeholder={'充值日期'} />
+            </Form.Item></Col>}
+
             <Col>
                 <Space>
                     <Button type="primary" htmlType="submit">搜索</Button>

src/global.less

@@ -276,4 +276,17 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+.ant-btn,
+.ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.ant-picker,
+.ant-input-affix-wrapper,
+.ant-input,
+.ant-modal-content,
+.ant-tag,
+.ant-pagination-item,
+.ant-picker-panel-container,
+.ant-select-dropdown {
+  border-radius: 6px !important;
 }

src/pages/gameDataStatistics/allSurvey/index.tsx

@@ -74,8 +74,8 @@ const AllSurvey: React.FC = () => {
     }
 
     useEffect(() => {
-        getAllSurveyTotalData.run(queryForm).then(() => {
-            setTotalData(totalData)
+        getAllSurveyTotalData.run(queryForm).then((res) => {
+            setTotalData(res)
         })
     }, [queryForm])
 
@@ -83,7 +83,7 @@ const AllSurvey: React.FC = () => {
     return <div className={style.allSurver}>
         <Space direction="vertical" style={{ width: '100%' }}>
             <div ref={ref3}>
-                <Card bordered={false} bodyStyle={{ padding: '12px 24px' }}>
+                <Card bordered={false} bodyStyle={{ padding: '12px 24px' }} style={{ borderRadius: 8 }}>
                     <QueryForm
                         onChange={(data: any) => {
                             console.log(data)
@@ -92,7 +92,7 @@ const AllSurvey: React.FC = () => {
                             newQueryForm.pageNum = 1
                             if (beginDay && beginDay?.length === 2) {
                                 newQueryForm['beginDate'] = moment(beginDay[0]).format('YYYY-MM-DD')
-                                newQueryForm['endDate'] = moment(beginDay[0]).format('YYYY-MM-DD')
+                                newQueryForm['endDate'] = moment(beginDay[1]).format('YYYY-MM-DD')
                             } else {
                                 delete newQueryForm['beginDate']
                                 delete newQueryForm['endDate']
@@ -115,7 +115,7 @@ const AllSurvey: React.FC = () => {
 
                         <div style={{ width: isPass ? '100%' : 1960 }}>
 
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left}>
                                         <UsergroupAddOutlined style={{ fontSize: 24 }} />
@@ -132,7 +132,7 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                 </div>
                             </Card>
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left} style={{ backgroundColor: '#36a3f7' }}>
                                         <TransactionOutlined style={{ fontSize: 24 }} />
@@ -149,7 +149,7 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                 </div>
                             </Card>
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left} style={{ backgroundColor: '#f4516c' }}>
                                         <MoneyCollectOutlined style={{ fontSize: 24 }} />
@@ -172,7 +172,7 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                 </div>
                             </Card>
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left} style={{ backgroundColor: '#52c41a' }}>
                                         <AppstoreOutlined style={{ fontSize: 24 }} />
@@ -189,7 +189,7 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                 </div>
                             </Card>
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left} style={{ backgroundColor: '#597ef7' }}>
                                         <BuildOutlined style={{ fontSize: 24 }} />
@@ -206,7 +206,7 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                 </div>
                             </Card>
-                            <Card bordered={false} style={{ width: 320 }}>
+                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                 <div className={style.overview}>
                                     <div className={style.left} style={{ backgroundColor: '#9254de' }}>
                                         <AccountBookOutlined style={{ fontSize: 24 }} />
@@ -214,15 +214,15 @@ const AllSurvey: React.FC = () => {
                                     </div>
                                     <div className={style.right}>
                                         <div className={style.top} style={{ borderColor: '#9254de' }}>
-                                            总回：<Statistic value={totalData?.totalRoi || 0} valueStyle={{ fontSize: 20, fontWeight: 600, color: 'red' }} suffix="%" />
+                                            总回：<Statistic value={totalData?.totalRoi || 0} valueStyle={{ fontSize: 20, fontWeight: 600, color: 'red' }} precision={2} suffix="%" />
                                         </div>
                                         <div className={style.bottom}>
                                             <div style={{ justifyContent: 'space-between' }}>
-                                                <div>首日：<Statistic value={totalData?.firstRoi || 0} suffix="%" /></div>
-                                                <div>7天：<Statistic value={totalData?.d7TotalRoi || 0} suffix="%" /></div>
+                                                <div>首日：<Statistic value={totalData?.firstRoi || 0} suffix="%" precision={2} /></div>
+                                                <div>7天：<Statistic value={totalData?.d7TotalRoi || 0} suffix="%" precision={2} /></div>
                                             </div>
                                             <div style={{ justifyContent: 'space-between', flex: 1 }}>
-                                                <div>30天：<Statistic value={totalData?.d30TotalRoi || 0} suffix="%" /></div>
+                                                <div>30天：<Statistic value={totalData?.d30TotalRoi || 0} suffix="%" precision={2} /></div>
                                             </div>
                                         </div>
                                     </div>

src/pages/gameDataStatistics/allSurvey/lineC.tsx

@@ -54,7 +54,7 @@ const LineC: React.FC<Props> = (props) => {
     return <div className={style.lineCont} ref={ref} style={{ height: `calc(100% - ${145.43 + height}px)` }}>
         <Spin wrapperClassName={'spin_100'} spinning={getAllSurveyLineData.loading}>
             <Card
-                style={{ width: '100%', height: '100%' }}
+                style={{ width: '100%', height: '100%', borderRadius: 8 }}
                 title={<Radio.Group value={type} buttonStyle="solid" onChange={(e) => setType(e.target.value)}>
                     <Radio.Button value="a">消耗&充值</Radio.Button>
                     <Radio.Button value="b">买量充值&自然量充值</Radio.Button>

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

@@ -104,9 +104,8 @@ function TableData(props: Prosp) {
                         } else {
                             item['fixed'] = false
                         }
-                        delete item?.label
-                        delete item?.default
-                        return item
+                        let { label, default: a, ...ite } = item
+                        return ite
                     }))
                 }
             }
@@ -115,7 +114,7 @@ function TableData(props: Prosp) {
             oldName.current = configName
         }
     }, [selectData, oldSelectData, dataSource, oldFixed, configName, config, timer])
-    console.log('columns12()---->', newColumns)
+
     //拖动宽度设置设置保存
     const handelResize = useCallback((columns: any) => {
         if (configName) {
@@ -164,7 +163,23 @@ function TableData(props: Prosp) {
                         onClick={toggleFull}>
                         {<Tooltip title={!isFull ? '全屏' : '退出全屏'}>{!isFull ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</Tooltip>}
                     </Button>
-                    {visible && <CustomListModel sysFixed={fixed} version={version} config={config} configName={configName} visible={visible} onClose={() => { setVisible(false) }} onChange={(arr: any) => { setTimer(moment().format('HH:mm:ss')); if (arr) { setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } }) } else { setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } }) } }} columns={newColumns} />}
+                    {visible && <CustomListModel
+                        sysFixed={fixed}
+                        version={version}
+                        config={config}
+                        configName={configName}
+                        visible={visible}
+                        onClose={() => { setVisible(false) }}
+                        onChange={(arr: any) => {
+                            setTimer(moment().format('HH:mm:ss'));
+                            if (arr) {
+                                setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } })
+                            } else {
+                                setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } })
+                            }
+                        }}
+                        columns={newColumns}
+                    />}
                 </Space>
             </Col>
         </Row>
@@ -173,10 +188,12 @@ function TableData(props: Prosp) {
         {/**table */}
         <Col span={24}>
             <Card
-                hoverable
-                title={<div style={{ textAlign: 'center', fontWeight: 'bold' }}>{title}</div>}
+                style={{ borderRadius: 8 }}
+                // title={<div style={{ textAlign: 'center', fontWeight: 'bold' }}>{title}</div>}
                 headStyle={{ textAlign: 'left' }}
+                bodyStyle={{ padding: '5px 10px' }}
             >
+                <div style={{ textAlign: 'center', fontWeight: 'bold', padding: '4px 6px 6px', fontSize: 16, marginBottom: 4 }}>{title}</div>
                 <Row gutter={[0, 16]}>
                     {header}
                     <Tab {...{ size, newColumns, handelResize, className, isZj, totalData, scroll, isFull, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, summary }} />

src/pages/gameDataStatistics/extensionData/everyday/index.tsx

@@ -5,7 +5,6 @@ import React, { useEffect, useState } from "react"
 import TableData from "../../components/TableData"
 import columns12 from "./tableConfig"
 import { getGameChoiceParentListType1Api } from "@/services/gameData"
-import { Table } from "antd"
 
 
 const Everyday: React.FC = () => {
@@ -23,7 +22,6 @@ const Everyday: React.FC = () => {
     useEffect(() => {
         getPromoteDayTotal.run(queryForm).then(res => {
             res.accountId = '总计'
-            console.log('====>', res)
             setTotalData([res])
         })
         getPromoteDayList.run(queryForm)

src/pages/gameDataStatistics/extensionData/everyday/tableConfig.tsx

@@ -75,15 +75,15 @@ function columns12(gameType: any): { label: string, fieldSHow?: { label: string,
         {
             label: '广告曝光数据',
             data: [
-                { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 70, default: 9, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 70, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 70, default: 9, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 70, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 {
                     title: '转化率', dataIndex: 'convertRate', label: '广告曝光数据', align: 'center', width: 70, default: 12, sorter: true,
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 { title: '平均转化成本', dataIndex: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 13, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 16, sorter: true,
@@ -91,25 +91,25 @@ function columns12(gameType: any): { label: string, fieldSHow?: { label: string,
                 },
                 { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 17, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, default: 18, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用下载开始率', dataIndex: 'appDownloadRate', 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: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用下载完成率', dataIndex: 'downloadFinishRate', 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: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用安装完成率', dataIndex: 'appInstallRate', 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: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
@@ -126,17 +126,17 @@ function columns12(gameType: any): { label: string, fieldSHow?: { label: string,
         {
             label: '付费数据',
             data: [
-                { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '首日回收率', dataIndex: 'todayRecoveryRate', label: '付费数据', align: 'center', width: 70, sorter: true,
@@ -183,7 +183,7 @@ function columns12(gameType: any): { label: string, fieldSHow?: { label: string,
                     title: '买量用户付费率', dataIndex: 'buyUserRechargeRate', 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: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '新用户付费比', dataIndex: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
                 { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '买量客单价', dataIndex: 'avgBuyUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '账面客单价', dataIndex: 'avgShowUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
@@ -193,10 +193,10 @@ function columns12(gameType: any): { label: string, fieldSHow?: { label: string,
                     title: '复充率', dataIndex: 'repeatRechargeRate', 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: '新增注册ARPU', dataIndex: 'newRegARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '首日付费ARPU', dataIndex: 'firstRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '当天付费ARPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '账面ARPU', dataIndex: 'showRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> }
+                { title: '新增注册ARPU', dataIndex: 'newRegARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '首日付费ARPU', dataIndex: 'firstRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '当天付费ARPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> },
+                { title: '账面ARPU', dataIndex: 'showRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0}  /> }
             ]
         },
         {

src/pages/gameDataStatistics/extensionData/total/index.tsx

@@ -66,7 +66,7 @@ const Total: React.FC = () => {
             total={getPromoteTotalList?.data?.total}
             page={queryForm.pageNum}
             pageSize={queryForm.pageSize}
-            fixed={{ left: 5, right: 1 }}
+            fixed={{ left: 5, right: 0 }}
             title='推广总数据'
             onChange={(props: any) => {
                 console.log('props--->', props)

src/pages/gameDataStatistics/extensionData/total/tableConfig.tsx

@@ -48,22 +48,22 @@ function columns12(gameType: any) {
         {
             label: '消耗',
             data: [
-                { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 110, default: 7, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 100, default: 7, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '推广计划数量', dataIndex: 'adPlanCount', key: 'adPlanCount', label: '消耗', align: 'center', width: 90, default: 8, sorter: true },
             ]
         },
         {
             label: '广告曝光数据',
             data: [
-                { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 70, default: 9, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 70, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 70, default: 9, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 70, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '转化率', dataIndex: 'convertRate', 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: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 12, sorter: true,
@@ -71,25 +71,25 @@ function columns12(gameType: any) {
                 },
                 { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 13, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用下载开始率', dataIndex: 'appDownloadRate', 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: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用下载完成率', dataIndex: 'downloadFinishRate', 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: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用安装完成率', dataIndex: 'appInstallRate', 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: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
@@ -100,27 +100,27 @@ function columns12(gameType: any) {
         {
             label: '用户数据',
             data: [
-                { title: '注册人数', dataIndex: 'regUserCount', label: '用户数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '注册人数', dataIndex: 'regUserCount', label: '用户数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} /> }
             ]
         },
         {
             label: '付费数据',
             data: [
-                { title: '新用户充值次数', dataIndex: 'userRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '新用户充值人数', dataIndex: 'userRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '新用户充值次数', dataIndex: 'userRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '新用户充值人数', dataIndex: 'userRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '新用户充值金额', dataIndex: 'userRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
-                { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 {
                     title: '首日回收率', dataIndex: 'firstRecoveryRate', label: '付费数据', align: 'center', width: 70, sorter: true,
@@ -134,26 +134,29 @@ function columns12(gameType: any) {
                     title: '当日回收率', dataIndex: 'todayRecoveryRate', label: '付费数据', align: 'center', width: 70, default: 17, sorter: true,
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
-                { title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 110, default: 18, sorter: true },
+                {
+                    title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 110, default: 18, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : {}} />
+                },
                 {
                     title: '3日ROI', dataIndex: 'roiDay3', label: '付费数据', align: 'center', width: 70, default: 19, sorter: true,
-                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
                     title: '5日ROI', dataIndex: 'roiDay5', label: '付费数据', align: 'center', width: 70, default: 20, sorter: true,
-                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.3 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
                     title: '7日ROI', dataIndex: 'roiDay7', label: '付费数据', align: 'center', width: 70, default: 21, sorter: true,
-                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.4 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
                     title: '30日ROI', dataIndex: 'roiDay30', label: '付费数据', align: 'center', width: 70, default: 22, sorter: true,
-                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.6 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
                     title: '60日ROI', dataIndex: 'roiDay60', label: '付费数据', align: 'center', width: 70, default: 23, sorter: true,
-                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.9 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
                     title: '180日ROI', dataIndex: 'roiDay180', label: '付费数据', align: 'center', width: 70, default: 24, sorter: true,
@@ -175,7 +178,7 @@ function columns12(gameType: any) {
                     title: '当天付费率', dataIndex: 'todayRechargeRate', 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: 'newUserRechargeRatio', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
+                { title: '新用户付费比', dataIndex: 'newUserRechargeRatio', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '新用户客单价', dataIndex: 'avgUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                 { title: '当天客单价', dataIndex: 'avgTodayRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
@@ -195,30 +198,30 @@ function columns12(gameType: any) {
                     title: '当天复充率', dataIndex: 'todayRepeatRechargeRate', 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: '新增注册ARPU', dataIndex: 'newRegArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '首日付费ARPU', dataIndex: 'firstRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '新用户付费ARPU', dataIndex: 'userRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '当天付费ARPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> },
-                { title: '账面ARPU', dataIndex: 'showRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} groupSeparator="" /> }
+                { title: '新增注册ARPU', dataIndex: 'newRegArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '首日付费ARPU', dataIndex: 'firstRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '新用户付费ARPU', dataIndex: 'userRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '当天付费ARPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
+                { title: '账面ARPU', dataIndex: 'showRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> }
             ]
         },
-        {
-            label: '操作',
-            data: [
-                {
-                    title: '操作',
-                    dataIndex: 'cz',
-                    label: '操作',
-                    default: 26,
-                    key: 'cz',
-                    align: 'center',
-                    width: 75,
-                    render: (a: number) => {
-                        return <a>详情</a>
-                    },
-                }
-            ]
-        }
+        // {
+        //     label: '操作',
+        //     data: [
+        //         {
+        //             title: '操作',
+        //             dataIndex: 'cz',
+        //             label: '操作',
+        //             default: 26,
+        //             key: 'cz',
+        //             align: 'center',
+        //             width: 75,
+        //             render: (a: number) => {
+        //                 return <a>详情</a>
+        //             },
+        //         }
+        //     ]
+        // }
     ]
 
     return newArr

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

@@ -0,0 +1,11 @@
+.dbox{
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    // padding: 10px;
+    >span{
+        display: flex;
+        justify-content: left;
+        width: 100%;
+    }
+}

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

@@ -1,23 +1,77 @@
-import { Button } from "antd"
-import React from "react"
+import React, { useEffect, useState } from "react"
 import TableData from "../../components/TableData"
 import columns12 from "./tableConfig"
+import { GameDayProps, getGameDayListApi } from "@/services/gameData/game"
+import { useAjax } from "@/Hook/useAjax"
+import QueryForm from "@/components/QueryForm"
+import moment from "moment"
 
+/**
+ * 游戏每日数据
+ * @returns 
+ */
+const Everyday: React.FC = () => {
 
+    /*****************************/
+    const [queryForm, setQueryForm] = useState<GameDayProps>({ pageNum: 1, pageSize: 20 })
 
-const Everyday: React.FC = () => {
+    const getGameDayList = useAjax((params) => getGameDayListApi(params))
+    /*****************************/
 
+    useEffect(() => {
+        getGameDayList.run(queryForm)
+    }, [queryForm])
 
     return <div>
-        <Button>推广30日复充趋势</Button>
         <TableData
+            leftChild={<QueryForm
+                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
+                    }
+                    if (rechargeDay && rechargeDay?.length === 2) {
+                        newQueryForm['rechargeBeginDate'] = moment(rechargeDay[0]).format('YYYY-MM-DD')
+                        newQueryForm['rechargeEndDate'] = moment(rechargeDay[0]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['rechargeBeginDate']
+                        delete newQueryForm['rechargeEndDate']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+                isRegDay
+                isGameName
+                isBGGameClassify
+            />}
             scroll={{ x: 1000, y: 600 }}
-            ajax={null}
-            fixed={{ left: 5, right: 1 }}
-            dataSource={[]}
+            ajax={getGameDayList}
+            fixed={{ left: 5, right: 0 }}
+            dataSource={getGameDayList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
+            total={getGameDayList?.data?.total}
+            page={queryForm.pageNum}
+            pageSize={queryForm.pageSize}
             title='游戏每日数据'
             onChange={(props: any) => {
-                console.log('props--->', props)
+                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={'游戏每日数据'}

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

@@ -1,163 +1,292 @@
 import React from "react"
-
+import style from './index.less'
+import { Statistic } from "antd"
 
 function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
 
+    let defaultValue = [  // 默认展示字段
+        { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
+        { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
+        { label: '增', key: 'increase', type: '付费趋势' },
+        { label: '回', key: 'back', type: '付费趋势' },
+        { label: '倍', key: 'multiples', type: '付费趋势' },
+    ]
+    let mySelectFieldData = localStorage.getItem('myAdFieldConfig1.0.0_推广每日数据')
+    let newSelectFieldData: any = {}
+    if (mySelectFieldData) {
+        newSelectFieldData = JSON.parse(mySelectFieldData).date_field
+    } else {
+        newSelectFieldData = defaultValue
+    }
+
     return [
         {
             label: '游戏信息',
             data: [
-                { title: '推广游戏CP名称', dataIndex: '1', label: '游戏信息', align: 'center', width: 95, default: 1 },
-                { title: '推广游戏名称', dataIndex: '2', label: '游戏信息', align: 'center', width: 70, default: 2 },
-                { title: '推广游戏应用类型', dataIndex: '3', label: '游戏信息', align: 'center', width: 70, default: 3 }
+                { title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 1 },
+                {
+                    title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 70, default: 2,
+                    render: (a: string) => {
+                        if (a) {
+                            let one = a?.toString()?.charAt(0)
+                            switch (one) {
+                                case '3':
+                                    return 'Android'
+                                case '4':
+                                    return 'IOS'
+                                case '5':
+                                    return 'H5'
+                                case '6':
+                                    return '小程序'
+                                default:
+                                    return a || '--'
+                            }
+                        } else return '--'
+                    }
+                }
             ]
         },
         {
             label: '时间',
             data: [
-                { title: '注册时间(小时)', dataIndex: '4', label: '时间', align: 'center', width: 100, default: 4 },
-                { title: '注册时间(天)', dataIndex: '5', label: '时间', align: 'center', width: 100, default: 5 },
+                { title: '注册时间(天)', dataIndex: 'costDate', label: '时间', align: 'center', width: 100, default: 3 },
             ]
         },
         {
             label: '买量用户数据',
             data: [
-                { title: '买量注册人数', dataIndex: 'l1', label: '买量用户数据', align: 'center', width: 70, default: 6 },
-                { title: '买量活跃用户人数', dataIndex: 'l2', label: '买量用户数据', align: 'center', width: 70, default: 7 },
-                { title: '买量创角人数', dataIndex: 'l3', label: '买量用户数据', align: 'center', width: 70, default: 8 },
-                { title: '买量首日创角人数', dataIndex: 'l4', label: '买量用户数据', align: 'center', width: 70, default: 9 },
-                { title: '买量新用户累计创角人数', dataIndex: 'l5', label: '买量用户数据', align: 'center', width: 110, default: 10 },
-                { title: '买量创角量', dataIndex: 'l6', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量首日创角量', dataIndex: 'l7', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量新用户累计创角量', dataIndex: 'l8', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量首日创角率', dataIndex: 'l9', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量新用户创角率', dataIndex: 'l10', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量游戏当日LTV', dataIndex: 'l11', label: '买量用户数据', align: 'center', width: 70 },
+                { title: '买量注册人数', dataIndex: 'buyRegNum', label: '买量用户数据', align: 'center', width: 70, default: 4 }
             ]
         },
         {
             label: '自然量用户数据',
             data: [
-                { title: '自然量注册人数', dataIndex: 'm1', label: '自然量用户数据', align: 'center', width: 70, default: 11 },
-                { title: '自然量活跃用户人数', dataIndex: 'm2', label: '自然量用户数据', align: 'center', width: 110, default: 12 },
-                { title: '自然量创角人数', dataIndex: 'm3', label: '自然量用户数据', align: 'center', width: 70, default: 13 },
-                { title: '自然量首日创角人数', dataIndex: 'm4', label: '自然量用户数据', align: 'center', width: 110, default: 14 },
-                { title: '自然量新用户累计创角人数', dataIndex: 'm5', label: '自然量用户数据', align: 'center', width: 110, default: 15 },
-                { title: '自然量创角量', dataIndex: 'm6', label: '自然量用户数据', align: 'center', width: 70, default: 16 },
-                { title: '自然量首日创角量', dataIndex: 'm7', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计创角量', dataIndex: 'm8', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量首日创角率', dataIndex: 'm9', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量新用户创角率', dataIndex: 'm10', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量小游戏当日LTV', dataIndex: 'm11', label: '自然量用户数据', align: 'center', width: 70 }
+                { title: '自然量注册人数', dataIndex: 'natureRegNum', label: '自然量用户数据', align: 'center', width: 70, default: 5 }
             ]
         },
         {
             label: '总用户数据',
             data: [
-                { title: '注册人数', dataIndex: 'o1', label: '总用户数据', align: 'center', width: 70, default: 16 },
-                { title: '活跃用户人数', dataIndex: 'o2', label: '总用户数据', align: 'center', width: 70, default: 17 },
-                { title: '创角人数', dataIndex: 'o3', label: '总用户数据', align: 'center', width: 70, default: 18 },
-                { title: '首日创角人数', dataIndex: 'o4', label: '总用户数据', align: 'center', width: 70, default: 19 },
-                { title: '新用户累计创角人数', dataIndex: 'o5', label: '总用户数据', align: 'center', width: 100, default: 20 },
-                { title: '创角量', dataIndex: 'o6', label: '总用户数据', align: 'center', width: 70, default: 21 },
-                { title: '首日创角量', dataIndex: 'o7', label: '总用户数据', align: 'center', width: 70 },
-                { title: '新用户累计创角量', dataIndex: 'o8', label: '总用户数据', align: 'center', width: 70 },
-                { title: '首日创角率', dataIndex: 'o9', label: '总用户数据', align: 'center', width: 70 },
-                { title: '新用户创角率', dataIndex: 'o10', label: '总用户数据', align: 'center', width: 70 },
-                { title: '游戏当日LTV', dataIndex: 'o11', label: '总用户数据', align: 'center', width: 70 }
+                { title: '注册人数', dataIndex: 'regNum', label: '总用户数据', align: 'center', width: 70, default: 6 }
             ]
         },
         {
             label: '买量付费数据',
             data: [
-                { title: '买量首日新用户充值次数', dataIndex: 'a4', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日新用户充值人数', dataIndex: 'a5', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日新用户充值金额', dataIndex: 'a6', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值次数', dataIndex: 'a7', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值人数', dataIndex: 'a8', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值金额', dataIndex: 'a9', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值次数', dataIndex: 'a10', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值人数', dataIndex: 'a11', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值金额', dataIndex: 'a12', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值次数', dataIndex: 'a13', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值人数', dataIndex: 'a14', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值金额', dataIndex: 'a15', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日付费率', dataIndex: 'a16', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天付费率', dataIndex: 'a18', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户付费比', dataIndex: 'a19', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量活跃用户付费率', dataIndex: 'a20', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日客单价', dataIndex: 'a21', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天客单价', dataIndex: 'a23', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面客单价', dataIndex: 'a24', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量复充率', dataIndex: 'a25', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量平均活跃付费率', dataIndex: 'a28', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新增注册ARPU', dataIndex: 'a29', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量活跃ARPPU', dataIndex: 'a30', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日付费ARPU', dataIndex: 'a31', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天付费ARPU', dataIndex: 'a33', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面ARPU', dataIndex: 'a34', label: '买量付费数据', align: 'center', width: 70 },
+                { title: '买量首日新用户充值次数', dataIndex: 'buyFirstNewUserAmountCount', label: '买量付费数据', align: 'center', width: 70, default: 7 },
+                { title: '买量首日新用户充值人数', dataIndex: 'buyFirstNewUserAmountNum', label: '买量付费数据', align: 'center', width: 70, default: 8 },
+                {
+                    title: '买量首日新用户充值金额', dataIndex: 'buyFirstNewUserAmount', label: '买量付费数据', align: 'center', width: 70, default: 9,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量老用户充值次数', dataIndex: 'buyOldUserCount', label: '买量付费数据', align: 'center', width: 70, default: 10 },
+                { title: '买量老用户充值人数', dataIndex: 'buyOldUserNum', label: '买量付费数据', align: 'center', width: 70, default: 11 },
+                {
+                    title: '买量老用户充值金额', dataIndex: 'buyOldUserAmount', label: '买量付费数据', align: 'center', width: 70, default: 12,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量账面充值次数', dataIndex: 'buyAmountCount', label: '买量付费数据', align: 'center', width: 70, default: 13 },
+                { title: '买量账面充值人数', dataIndex: 'buyAmountNum', label: '买量付费数据', align: 'center', width: 70, default: 14 },
+                {
+                    title: '买量账面充值金额', dataIndex: 'buyAmount', label: '买量付费数据', align: 'center', width: 70, default: 15,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量新用户累计充值次数', dataIndex: 'buyNewUserTotalAmountCount', label: '买量付费数据', align: 'center', width: 70 },
+                { title: '买量新用户累计充值人数', dataIndex: 'buyNewUserTotalAmountNum', label: '买量付费数据', align: 'center', width: 70 },
+                {
+                    title: '买量新用户累计充值金额', dataIndex: 'buyNewUserTotalAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量首日付费率', dataIndex: 'buyFirstRoi', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量当天付费率', dataIndex: 'buyTodayRoi', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新用户付费比', dataIndex: 'buyNewUserRate', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量首日客单价', dataIndex: 'buyFirstAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量当天客单价', dataIndex: 'buyTodayAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量账面客单价', dataIndex: 'buyAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量复充率', dataIndex: 'buyUserAgainRate', label: '买量付费数据', align: 'center', width: 70, default: 16,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新增注册ARPU', dataIndex: 'buyRegUserArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量首日付费ARPU', dataIndex: 'buyFirstAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量当天付费ARPU', dataIndex: 'buyTodayAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量账面ARPU', dataIndex: 'buyAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
             ]
         },
         {
             label: '自然量付费数据',
             data: [
-                { title: '自然量首日新用户充值次数', dataIndex: 'b4', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日新用户充值人数', dataIndex: 'b5', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日新用户充值金额', dataIndex: 'b6', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值次数', dataIndex: 'b7', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值人数', dataIndex: 'b8', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值金额', dataIndex: 'b9', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值次数', dataIndex: 'b10', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值人数', dataIndex: 'b11', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值金额', dataIndex: 'b12', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值次数', dataIndex: 'b13', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值人数', dataIndex: 'b14', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值金额', dataIndex: 'b15', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日付费率', dataIndex: 'b16', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天付费率', dataIndex: 'b18', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户付费比', dataIndex: 'b19', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量活跃用户付费率', dataIndex: 'b20', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日客单价', dataIndex: 'b21', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天客单价', dataIndex: 'b23', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面客单价', dataIndex: 'b24', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量复充率', dataIndex: 'b25', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量平均活跃付费率', dataIndex: 'b28', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新增注册ARPU', dataIndex: 'b29', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量活跃ARPPU', dataIndex: 'b30', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日付费ARPU', dataIndex: 'b31', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天付费ARPU', dataIndex: 'b33', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面ARPU', dataIndex: 'b34', label: '自然量付费数据', align: 'center', width: 70 }
+                { title: '自然量首日新用户充值次数', dataIndex: 'natureFirstNewUserAmountCount', label: '自然量付费数据', align: 'center', width: 70, default: 17 },
+                { title: '自然量首日新用户充值人数', dataIndex: 'natureFirstNewUserAmountNum', label: '自然量付费数据', align: 'center', width: 70, default: 18 },
+                {
+                    title: '自然量首日新用户充值金额', dataIndex: 'natureFirstNewUserAmount', label: '自然量付费数据', align: 'center', width: 70, default: 19,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量老用户充值次数', dataIndex: 'natureOldUserCount', label: '自然量付费数据', align: 'center', width: 70, default: 20 },
+                { title: '自然量老用户充值人数', dataIndex: 'natureOldUserNum', label: '自然量付费数据', align: 'center', width: 70, default: 21 },
+                {
+                    title: '自然量老用户充值金额', dataIndex: 'natureOldUserAmount', label: '自然量付费数据', align: 'center', width: 70, default: 22,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量账面充值次数', dataIndex: 'natureAmountCount', label: '自然量付费数据', align: 'center', width: 70 },
+                { title: '自然量账面充值人数', dataIndex: 'natureAmountNum', label: '自然量付费数据', align: 'center', width: 70 },
+                {
+                    title: '自然量账面充值金额', dataIndex: 'natureAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量新用户累计充值次数', dataIndex: 'natureNewUserTotalAmountCount', label: '自然量付费数据', align: 'center', width: 70 },
+                { title: '自然量新用户累计充值人数', dataIndex: 'natureNewUserTotalAmountNum', label: '自然量付费数据', align: 'center', width: 70 },
+                {
+                    title: '自然量新用户累计充值金额', dataIndex: 'natureNewUserTotalAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量首日付费率', dataIndex: 'natureFirstRoi', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量当天付费率', dataIndex: 'natureTodayRoi', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新用户付费比', dataIndex: 'natureNewUserRate', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量首日客单价', dataIndex: 'natureFirstAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量当天客单价', dataIndex: 'natureTodayAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量账面客单价', dataIndex: 'natureAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量复充率', dataIndex: 'natureUserAgainRate', label: '自然量付费数据', align: 'center', width: 70, default: 23,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新增注册ARPU', dataIndex: 'natureRegUserArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量首日付费ARPU', dataIndex: 'natureFirstAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量当天付费ARPU', dataIndex: 'natureTodayAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量账面ARPU', dataIndex: 'natureAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
             ]
         },
         {
             label: '总付费数据',
             data: [
-                { title: '总首日新用户充值次数', dataIndex: 'c4', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日新用户充值人数', dataIndex: 'c5', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日新用户充值金额', dataIndex: 'c6', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值次数', dataIndex: 'c7', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值人数', dataIndex: 'c8', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值金额', dataIndex: 'c9', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值次数', dataIndex: 'c10', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值人数', dataIndex: 'c11', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值金额', dataIndex: 'c12', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值次数', dataIndex: 'c13', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值人数', dataIndex: 'c14', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值金额', dataIndex: 'c15', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日付费率', dataIndex: 'c16', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天付费率', dataIndex: 'c18', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户付费比', dataIndex: 'c19', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总活跃用户付费率', dataIndex: 'c20', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日客单价', dataIndex: 'c21', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天客单价', dataIndex: 'c23', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面客单价', dataIndex: 'c24', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总复充率', dataIndex: 'c25', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总平均活跃付费率', dataIndex: 'c28', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新增注册ARPU', dataIndex: 'c29', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总活跃ARPPU', dataIndex: 'c30', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日付费ARPU', dataIndex: 'c31', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天付费ARPU', dataIndex: 'c33', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面ARPU', dataIndex: 'c34', label: '总付费数据', align: 'center', width: 70 }
+                { title: '总首日新用户充值次数', dataIndex: 'firstNewUserAmountCount', label: '总付费数据', align: 'center', width: 70, default: 24 },
+                { title: '总首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '总付费数据', align: 'center', width: 70, default: 25 },
+                {
+                    title: '总首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '总付费数据', align: 'center', width: 70, default: 26,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总老用户充值次数', dataIndex: 'oldUserCount', label: '总付费数据', align: 'center', width: 70, default: 27 },
+                { title: '总老用户充值人数', dataIndex: 'oldUserNum', label: '总付费数据', align: 'center', width: 70, default: 28 },
+                {
+                    title: '总老用户充值金额', dataIndex: 'oldUserAmount', label: '总付费数据', align: 'center', width: 70, default: 29,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总账面充值次数', dataIndex: 'amountCount', label: '总付费数据', align: 'center', width: 70 },
+                { title: '总账面充值人数', dataIndex: 'amountNum', label: '总付费数据', align: 'center', width: 70 },
+                {
+                    title: '总账面充值金额', dataIndex: 'amount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总新用户累计充值次数', dataIndex: 'newUserTotalAmountCount', label: '总付费数据', align: 'center', width: 70 },
+                { title: '总新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '总付费数据', align: 'center', width: 70 },
+                {
+                    title: '总新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总首日付费率', dataIndex: 'firstRoi', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总当天付费率', dataIndex: 'todayRoi', label: '总付费数据', align: 'center', width: 70,
+                    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,
+                    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,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总当天客单价', dataIndex: 'todayAvgAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总账面客单价', dataIndex: 'avgAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总复充率', dataIndex: 'userAgainRate', label: '总付费数据', align: 'center', width: 70, default: 30,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总新增注册ARPU', dataIndex: 'regUserArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总首日付费ARPU', dataIndex: 'firstAmountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总当天付费ARPU', dataIndex: 'todayAmountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总账面ARPU', dataIndex: 'amountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
             ]
         },
         {
@@ -165,719 +294,724 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                 label: '日期区间字段展示',
                 saveField: 'date_field',
                 defaultValue: [  // 默认展示字段
-                    { label: '创角人数', key: 'ffcjrs', type: '买量付费趋势' },
-                    { label: '创角数量', key: 'ffcjsl', type: '买量付费趋势' },
-                    { label: '活跃人数', key: 'ffhyrs', type: '买量付费趋势' },
-                    { label: '充值人数', key: 'ffczrs', type: '买量付费趋势' },
-                    { label: '充值金额', key: 'ffczje', type: '买量付费趋势' },
-                    { label: '增', key: 'ffz', type: '买量付费趋势' },
-                    { label: '回', key: 'ffh', type: '买量付费趋势' },
-                    { label: '倍', key: 'ffb', type: '买量付费趋势' },
+                    { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
+                    { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
+                    { label: '增', key: 'increase', type: '付费趋势' },
+                    { label: '回', key: 'back', type: '付费趋势' },
+                    { label: '倍', key: 'multiples', type: '付费趋势' },
                 ],
                 data: [
                     {
-                        label: '买量付费趋势',
-                        data: [
-                            { label: '创角人数', key: 'ffcjrs', type: '买量付费趋势' },
-                            { label: '创角数量', key: 'ffcjsl', type: '买量付费趋势' },
-                            { label: '活跃人数', key: 'ffhyrs', type: '买量付费趋势' },
-                            { label: '充值人数', key: 'ffczrs', type: '买量付费趋势' },
-                            { label: '充值金额', key: 'ffczje', type: '买量付费趋势' },
-                            { label: '增', key: 'ffz', type: '买量付费趋势' },
-                            { label: '回', key: 'ffh', type: '买量付费趋势' },
-                            { label: '倍', key: 'ffb', type: '买量付费趋势' },
-                        ]
-                    },
-                    {
-                        label: '买量LTV数据',
+                        label: '付费趋势',
                         data: [
-                            { label: 'LTV', key: 'LTV', type: '买量LTV数据' },
+                            { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
+                            { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
+                            { label: '增', key: 'increase', type: '付费趋势' },
+                            { label: '回', key: 'back', type: '付费趋势' },
+                            { label: '倍', key: 'multiples', type: '付费趋势' },
                         ]
-                    },
-                    {
-                        label: '买量留存分析',
-                        data: [
-                            { label: '活跃人数', key: 'lchyrs', type: '买量留存分析' },
-                            { label: '留存率', key: 'lclcl', type: '买量留存分析' },
-                        ]
-                    },
-                    {
-                        label: '买量玩家90日激活数据',
-                        data: [
-                            { label: '创角人数', key: 'cjrs1', type: '买量玩家90日激活数据' },
-                            { label: '付费人数', key: 'ffrs1', type: '买量玩家90日激活数据' },
-                            { label: '创角比', key: 'cjb', type: '买量玩家90日激活数据' },
-                            { label: '付费比', key: 'ffb1', type: '买量玩家90日激活数据' },
-                        ]
-                    },
-
-                    {
-                        label: '自然量付费趋势',
-                        data: [
-                            { label: '创角人数', key: 'ffcjrs', type: '自然量付费趋势' },
-                            { label: '创角数量', key: 'ffcjsl', type: '自然量付费趋势' },
-                            { label: '活跃人数', key: 'ffhyrs', type: '自然量付费趋势' },
-                            { label: '充值人数', key: 'ffczrs', type: '自然量付费趋势' },
-                            { label: '充值金额', key: 'ffczje', type: '自然量付费趋势' },
-                            { label: '增', key: 'ffz', type: '自然量付费趋势' },
-                            { label: '回', key: 'ffh', type: '自然量付费趋势' },
-                            { label: '倍', key: 'ffb', type: '自然量付费趋势' },
-                        ]
-                    },
-                    {
-                        label: '自然量LTV数据',
-                        data: [
-                            { label: 'LTV', key: 'LTV', type: '自然量LTV数据' },
-                        ]
-                    },
-                    {
-                        label: '自然量留存分析',
-                        data: [
-                            { label: '活跃人数', key: 'lchyrs', type: '自然量留存分析' },
-                            { label: '留存率', key: 'lclcl', type: '自然量留存分析' },
-                        ]
-                    },
-                    {
-                        label: '自然量玩家90日激活数据',
-                        data: [
-                            { label: '创角人数', key: 'cjrs1', type: '自然量玩家90日激活数据' },
-                            { label: '付费人数', key: 'ffrs1', type: '自然量玩家90日激活数据' },
-                            { label: '创角比', key: 'cjb', type: '自然量玩家90日激活数据' },
-                            { label: '付费比', key: 'ffb1', type: '自然量玩家90日激活数据' },
-                        ]
-                    },
-                    {
-                        label: '总付费趋势',
-                        data: [
-                            { label: '创角人数', key: 'ffcjrs', type: '总付费趋势' },
-                            { label: '创角数量', key: 'ffcjsl', type: '总付费趋势' },
-                            { label: '活跃人数', key: 'ffhyrs', type: '总付费趋势' },
-                            { label: '充值人数', key: 'ffczrs', type: '总付费趋势' },
-                            { label: '充值金额', key: 'ffczje', type: '总付费趋势' },
-                            { label: '增', key: 'ffz', type: '总付费趋势' },
-                            { label: '回', key: 'ffh', type: '总付费趋势' },
-                            { label: '倍', key: 'ffb', type: '总付费趋势' },
-                        ]
-                    },
-                    {
-                        label: '总LTV数据',
-                        data: [
-                            { label: 'LTV', key: 'LTV', type: '总LTV数据' },
-                        ]
-                    },
-                    {
-                        label: '总留存分析',
-                        data: [
-                            { label: '活跃人数', key: 'lchyrs', type: '总留存分析' },
-                            { label: '留存率', key: 'lclcl', type: '总留存分析' },
-                        ]
-                    },
-                    {
-                        label: '总玩家90日激活数据',
-                        data: [
-                            { label: '创角人数', key: 'cjrs1', type: '总玩家90日激活数据' },
-                            { label: '付费人数', key: 'ffrs1', type: '总玩家90日激活数据' },
-                            { label: '创角比', key: 'cjb', type: '总玩家90日激活数据' },
-                            { label: '付费比', key: 'ffb1', type: '总玩家90日激活数据' },
-                        ]
-                    },
+                    }
                 ]
             },
-            label: 'D1-D30',
+            label: '买量付费趋势',
             data: [{
-                title: "D1",
-                dataIndex: "D1",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D2",
-                dataIndex: "D2",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D3",
-                dataIndex: "D3",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D4",
-                dataIndex: "D4",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D5",
-                dataIndex: "D5",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D6",
-                dataIndex: "D6",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D7",
-                dataIndex: "D7",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D8",
-                dataIndex: "D8",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D9",
-                dataIndex: "D9",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D10",
-                dataIndex: "D10",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D11",
-                dataIndex: "D11",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D12",
-                dataIndex: "D12",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D13",
-                dataIndex: "D13",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D14",
-                dataIndex: "D14",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D15",
-                dataIndex: "D15",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D16",
-                dataIndex: "D16",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D17",
-                dataIndex: "D17",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D18",
-                dataIndex: "D18",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D19",
-                dataIndex: "D19",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D20",
-                dataIndex: "D20",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D21",
-                dataIndex: "D21",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D22",
-                dataIndex: "D22",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D23",
-                dataIndex: "D23",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D24",
-                dataIndex: "D24",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D25",
-                dataIndex: "D25",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D26",
-                dataIndex: "D26",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D27",
-                dataIndex: "D27",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D28",
-                dataIndex: "D28",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D29",
-                dataIndex: "D29",
-                label: "D1-D30",
-                align: "center",
-                width: 70
-            }, {
-                title: "D30",
-                dataIndex: "D30",
-                label: "D1-D30",
-                align: "center",
-                width: 70
+                title: "D1（买）",
+                dataIndex: "D1Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 31,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountD1Trend) {
+                                    data = b?.buyAmountD1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D3（买）",
+                dataIndex: "D3Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 32,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountD3Trend) {
+                                    data = b?.buyAmountD3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D7（买）",
+                dataIndex: "D7Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 33,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountD7Trend) {
+                                    data = b?.buyAmountD7Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D15（买）",
+                dataIndex: "D15Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 34,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountD15Trend) {
+                                    data = b?.buyAmountD15Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M1（买）",
+                dataIndex: "M1Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 35,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountM1Trend) {
+                                    data = b?.buyAmountM1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M2（买）",
+                dataIndex: "M2Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 36,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountM2Trend) {
+                                    data = b?.buyAmountM2Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M3（买）",
+                dataIndex: "M3Buy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 37,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountM3Trend) {
+                                    data = b?.buyAmountM3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "总（买）",
+                dataIndex: "totalBuy",
+                label: "买量付费趋势",
+                align: "center",
+                width: 110,
+                default: 38,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.buyAmountSumTrend) {
+                                    data = b?.buyAmountSumTrend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
             }]
         },
         {
-            label: 'D31-D60',
-            data: [{
-                title: "D31",
-                dataIndex: "D31",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D32",
-                dataIndex: "D32",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D33",
-                dataIndex: "D33",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D34",
-                dataIndex: "D34",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D35",
-                dataIndex: "D35",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D36",
-                dataIndex: "D36",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D37",
-                dataIndex: "D37",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D38",
-                dataIndex: "D38",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D39",
-                dataIndex: "D39",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D40",
-                dataIndex: "D40",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D41",
-                dataIndex: "D41",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D42",
-                dataIndex: "D42",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D43",
-                dataIndex: "D43",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D44",
-                dataIndex: "D44",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D45",
-                dataIndex: "D45",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D46",
-                dataIndex: "D46",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D47",
-                dataIndex: "D47",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D48",
-                dataIndex: "D48",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D49",
-                dataIndex: "D49",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D50",
-                dataIndex: "D50",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D51",
-                dataIndex: "D51",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D52",
-                dataIndex: "D52",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D53",
-                dataIndex: "D53",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D54",
-                dataIndex: "D54",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D55",
-                dataIndex: "D55",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D56",
-                dataIndex: "D56",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D57",
-                dataIndex: "D57",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D58",
-                dataIndex: "D58",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D59",
-                dataIndex: "D59",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }, {
-                title: "D60",
-                dataIndex: "D60",
-                label: "D31-D60",
-                align: "center",
-                width: 70
-            }],
-        },
-        {
-            label: 'D61-D90',
+            label: '自然量付费趋势',
             data: [{
-                title: "D61",
-                dataIndex: "D61",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D62",
-                dataIndex: "D62",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D63",
-                dataIndex: "D63",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D64",
-                dataIndex: "D64",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D65",
-                dataIndex: "D65",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D66",
-                dataIndex: "D66",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D67",
-                dataIndex: "D67",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D68",
-                dataIndex: "D68",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D69",
-                dataIndex: "D69",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D70",
-                dataIndex: "D70",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D71",
-                dataIndex: "D71",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D72",
-                dataIndex: "D72",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D73",
-                dataIndex: "D73",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D74",
-                dataIndex: "D74",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D75",
-                dataIndex: "D75",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D76",
-                dataIndex: "D76",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D77",
-                dataIndex: "D77",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D78",
-                dataIndex: "D78",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D79",
-                dataIndex: "D79",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D80",
-                dataIndex: "D80",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D81",
-                dataIndex: "D81",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D82",
-                dataIndex: "D82",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D83",
-                dataIndex: "D83",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D84",
-                dataIndex: "D84",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D85",
-                dataIndex: "D85",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D86",
-                dataIndex: "D86",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D87",
-                dataIndex: "D87",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D88",
-                dataIndex: "D88",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D89",
-                dataIndex: "D89",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }, {
-                title: "D90",
-                dataIndex: "D90",
-                label: "D61-D90",
-                align: "center",
-                width: 70
-            }],
+                title: "D1（自）",
+                dataIndex: "D1Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 39,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountD1Trend) {
+                                    data = b?.natureAmountD1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D3（自）",
+                dataIndex: "D3Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 40,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountD3Trend) {
+                                    data = b?.natureAmountD3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D7（自）",
+                dataIndex: "D7Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 41,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountD7Trend) {
+                                    data = b?.natureAmountD7Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D15（自）",
+                dataIndex: "D15Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 42,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountD15Trend) {
+                                    data = b?.natureAmountD15Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M1（自）",
+                dataIndex: "M1Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 43,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountM1Trend) {
+                                    data = b?.natureAmountM1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M2（自）",
+                dataIndex: "M2Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 44,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountM2Trend) {
+                                    data = b?.natureAmountM2Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M3（自）",
+                dataIndex: "M3Nature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 45,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountM3Trend) {
+                                    data = b?.natureAmountM3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "总（自）",
+                dataIndex: "totalNature",
+                label: "自然量付费趋势",
+                align: "center",
+                width: 110,
+                default: 46,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.natureAmountSumTrend) {
+                                    data = b?.natureAmountSumTrend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }]
         },
         {
-            label: '月份',
+            label: '总付费趋势',
             data: [{
-                title: "M4",
-                dataIndex: "M4",
-                label: "月份",
-                align: "center",
-                width: 70
-            }, {
-                title: "M5",
-                dataIndex: "M5",
-                label: "月份",
-                align: "center",
-                width: 70
-            }, {
-                title: "M6",
-                dataIndex: "M6",
-                label: "月份",
-                align: "center",
-                width: 70
-            }, {
-                title: "M12",
-                dataIndex: "M12",
-                label: "月份",
-                align: "center",
-                width: 70
-            },]
-        },
-        {
-            label: '操作',
-            data: [
-                {
-                    title: '操作',
-                    dataIndex: 'cz',
-                    label: '操作',
-                    default: 21,
-                    align: 'center',
-                    width: 75,
-                    render: (a: number) => {
-                        return <span>推广30日复充趋势</span>
-                    },
-                }
-            ]
+                title: "D1（总）",
+                dataIndex: "D1",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 47,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountD1Trend) {
+                                    data = b?.amountD1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D3（总）",
+                dataIndex: "D3",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 48,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountD3Trend) {
+                                    data = b?.amountD3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D7（总）",
+                dataIndex: "D7",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 49,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountD7Trend) {
+                                    data = b?.amountD7Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "D15（总）",
+                dataIndex: "D15",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 50,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountD15Trend) {
+                                    data = b?.amountD15Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M1（总）",
+                dataIndex: "M1",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 51,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountM1Trend) {
+                                    data = b?.amountM1Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M2（总）",
+                dataIndex: "M2",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 52,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountM2Trend) {
+                                    data = b?.amountM2Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "M3（总）",
+                dataIndex: "M3",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 53,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountM3Trend) {
+                                    data = b?.amountM3Trend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }, {
+                title: "总（总）",
+                dataIndex: "total",
+                label: "总付费趋势",
+                align: "center",
+                width: 110,
+                default: 54,
+                render: (a: any, b: any) => {
+                    if (newSelectFieldData?.length > 0) {
+                        let data: any = {}
+                        let keyS: string[] = newSelectFieldData?.map((item: any) => item.key)
+                        switch (newSelectFieldData[0].type) {
+                            case '付费趋势':
+                                if (b?.amountSumTrend) {
+                                    data = b?.amountSumTrend
+                                    return <div className={style.dbox}>
+                                        {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</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('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
+                                        {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples}</span></span>}
+                                    </div>
+                                }
+                                return '--'
+                        }
+                    }
+                    return '--'
+                },
+            }]
         }
+        // {
+        //     label: '操作',
+        //     data: [
+        //         {
+        //             title: '操作',
+        //             dataIndex: 'cz',
+        //             label: '操作',
+        //             default: 31,
+        //             align: 'center',
+        //             width: 75,
+        //             render: (a: number) => {
+        //                 return <span>推广30日复充趋势</span>
+        //             },
+        //         }
+        //     ]
+        // }
     ]
 }
 

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

@@ -0,0 +1,40 @@
+.h5BiomassClass {
+    padding: 0 !important;
+    height: 100%;
+}
+
+.h5BiomassTable {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 100%;
+
+    >div {
+        flex: 1;
+        min-height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &>div {
+            width: 100%;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            >span {
+                padding: 0 5px;
+                width: 100%;
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        &:not(:nth-child(1)) {
+            border-top: 1px solid #e0e0e0;
+        }
+    }
+}

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

@@ -1,11 +1,71 @@
-import React from "react"
-
+import { useAjax } from "@/Hook/useAjax"
+import { GameWaterProps, getGameWaterListApi } from "@/services/gameData/game"
+import React, { useEffect, useState } from "react"
+import TableData from "../../components/TableData"
+import QueryForm from "@/components/QueryForm"
+import columns12 from "./tableConfig"
+import moment from "moment"
 
 
 const FlowingWater: React.FC = () => {
 
+    /*************************************/
+    const [queryForm, setQueryForm] = useState<GameWaterProps>({ pageNum: 1, pageSize: 20 })
+    const getGameWaterList = useAjax((params) => getGameWaterListApi(params))
+    /*************************************/
+
+    useEffect(() => {
+        getGameWaterList.run(queryForm)
+    }, [queryForm])
+
+    return <div>
 
-    return <>每日流水贡献</>
+        <TableData
+            leftChild={<QueryForm
+                isGameName
+                isRechargeDate
+                isBGGameClassify
+                onChange={(data: any) => {
+                    // console.log(data)
+                    const { rechargeDate, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (rechargeDate) {
+                        newQueryForm['rechargeDate'] = moment(rechargeDate).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['rechargeDate']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+            />}
+            scroll={{ x: 1000, y: 600 }}
+            ajax={getGameWaterList}
+            fixed={{ left: 1, right: 0 }}
+            dataSource={getGameWaterList?.data?.records}
+            page={getGameWaterList?.data?.current || 1}
+            pageSize={getGameWaterList?.data?.size || 20}
+            total={getGameWaterList?.data?.total || 0}
+            title='每日流水贡献'
+            onChange={(props: any) => {
+                console.log('props--->', props)
+                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 FlowingWater

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

@@ -0,0 +1,258 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Statistic } from "antd"
+import React from "react"
+import './index.less'
+import { copy } from "@/utils/utils"
+
+function columns12() {
+
+    let newArr: { label: string, data: any[] }[] = [
+        {
+            label: '每日流水贡献',
+            data: [
+                { title: '排序', dataIndex: 'id', label: '每日流水贡献', align: 'center', width: 75, default: 1 },
+                { title: '游戏名称', dataIndex: 'gameName', label: '每日流水贡献', align: 'center', width: 70, default: 2 },
+                { title: '游戏ID', dataIndex: 'gameId', label: '每日流水贡献', align: 'center', width: 80, default: 3, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
+                {
+                    title: '游戏类别', dataIndex: 'gameClassify', label: '每日流水贡献', align: 'center', width: 80, default: 4,
+                    render: (a: string) => {
+                        if (a) {
+                            let one = a.charAt(0)
+                            switch (one) {
+                                case '3':
+                                    return 'Android'
+                                case '4':
+                                    return 'IOS'
+                                case '5':
+                                    return 'H5'
+                                case '6':
+                                    return '小程序'
+                                default:
+                                    return a
+                            }
+                        } else return '--'
+                    }
+                },
+                { title: '买量充值金额', dataIndex: 'buyAmount', label: '每日流水贡献', align: 'center', width: 100, default: 5, sorter: true, render: (a: number, b: any) => (<Statistic value={a || 0} valueStyle={a >= 10000 ? { color: 'red' } : { color: '#0f990f' }}/>) },
+                { title: '自然量充值金额', dataIndex: 'natureAmount', label: '每日流水贡献', align: 'center', width: 100, default: 6, sorter: true, render: (a: number, b: any) => (<Statistic value={a || 0} valueStyle={a >= 5000 ? { color: 'red' } : { color: '#0f990f' }} />) },
+                { title: '总充值金额', dataIndex: 'amount', label: '每日流水贡献', align: 'center', width: 120, default: 7, sorter: true, render: (a: number) => <Statistic value={a || 0} valueStyle={a >= 50000 ? { color: 'red' } : { color: '#0f990f' }}/> },
+                {
+                    title: '充值模板',
+                    dataIndex: 'rechargeTemplateVOList',
+                    label: '每日流水贡献',
+                    align: 'center',
+                    default: 8,
+                    children: [
+                        {
+                            title: '充值模板排序',
+                            dataIndex: 'amountOrderBy',
+                            key: 'amountOrderBy',
+                            width: 65,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
+                                        return <div key={'cc' + index}>
+                                            <div><span>{item.amountOrderBy}</span></div>
+                                        </div>
+                                    })}
+                                    {b?.rechargeTemplateVOList?.length < 10 && <>
+                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('h').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                        {
+                            title: '充值次数',
+                            dataIndex: 'amountCount',
+                            key: 'amountCount',
+                            width: 65,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
+                                        return <div key={'dd' + index}>
+                                            <div><Statistic value={item?.amountCount} valueStyle={item.amountCount >= 10 ? { color: 'red' } : { color: '#0f990f' }} groupSeparator="" /></div>
+                                        </div>
+                                    })}
+                                    {b?.rechargeTemplateVOList?.length < 10 && <>
+                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('d').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                        {
+                            title: '充值人数',
+                            dataIndex: 'amountNum',
+                            key: 'amountNum',
+                            width: 65,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
+                                        return <div key={'bb' + index}>
+                                            <div><Statistic value={item?.amountNum} valueStyle={item?.amountNum >= 30 ? { color: 'red' } : { color: '#0f990f' }} groupSeparator="" /></div>
+                                        </div>
+                                    })}
+                                    {b?.rechargeTemplateVOList?.length < 10 && <>
+                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('b').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+
+                            }
+                        },
+                        {
+                            title: '充值挡位',
+                            dataIndex: 'amountPost',
+                            key: 'amountPost',
+                            width: 65,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
+                                        return <div key={'aa' + index}>
+                                            <div><span>{item.amountPost}</span></div>
+                                        </div>
+                                    })}
+                                    {b?.rechargeTemplateVOList?.length < 10 && <>
+                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('a').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        }
+                    ]
+                },
+
+                {
+                    title: '玩家模板',
+                    dataIndex: 'playerTemplateVOS',
+                    label: '玩家模板排序',
+                    align: 'center',
+                    default: 9,
+                    children: [
+                        {
+                            title: '玩家模板排序',
+                            dataIndex: 'userOrderBy',
+                            key: 'userOrderBy',
+                            width: 65,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
+                                        return <div key={'gg' + index}>
+                                            <div><span>{item.userOrderBy || '--'}</span></div>
+                                        </div>
+                                    })}
+                                    {b?.playerTemplateVOS?.length < 10 && <>
+                                        {Array(10 - b?.playerTemplateVOS?.length).fill('g').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                        {
+                            title: '用户名称',
+                            dataIndex: 'userName',
+                            key: 'userName',
+                            width: 80,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
+                                        return <div key={'ll' + index}>
+                                            <div style={{ overflow: 'hidden' }}><span style={{ color: '#1890ff' }} onClick={() => copy(item.userName)}>{item.userName || '--'}</span></div>
+                                        </div>
+                                    })}
+                                    {b?.playerTemplateVOS?.length < 10 && <>
+                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                        {
+                            title: '用户充值金额',
+                            dataIndex: 'userAmount',
+                            key: 'userAmount',
+                            width: 80,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
+                                        return <div key={'jj' + index}>
+                                            <div><Statistic value={item?.userAmount} valueStyle={item?.userAmount >= 500 ? { color: 'red' } : { color: '#0f990f' }} /></div>
+                                        </div>
+                                    })}
+                                    {b?.playerTemplateVOS?.length < 10 && <>
+                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                        {
+                            title: '用户充值占比',
+                            dataIndex: 'proportion',
+                            key: 'proportion',
+                            width: 80,
+                            align: 'center',
+                            className: "h5BiomassClass",
+                            render: (a: any, b: any) => {
+                                return <div className='h5BiomassTable'>
+                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
+                                        return <div key={'qq' + index}>
+                                            <div><Statistic value={item?.proportion * 100} suffix='%' precision={2} valueStyle={item?.proportion >= 0.3 ? { color: 'red' } : { color: '#0f990f' }} /></div>
+                                        </div>
+                                    })}
+                                    {b?.playerTemplateVOS?.length < 10 && <>
+                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
+                                            return <div key={item + index}>
+                                                <div><span>--</span></div>
+                                            </div>
+                                        })}
+                                    </>}
+                                </div>
+                            }
+                        },
+                    ]
+                },
+            ]
+        },
+    ]
+
+    return newArr
+}
+
+export default columns12

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

@@ -1,21 +1,72 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import TableData from "../../components/TableData"
 import columns12 from "./tableConfig"
+import { useAjax } from "@/Hook/useAjax"
+import { GameTotalProps, getGameTotalListApi } from "@/services/gameData/game"
+import QueryForm from "@/components/QueryForm"
+import { czPresets } from "@/components/QueryForm/const"
 
+/**
+ * 游戏总数居
+ * @returns 
+ */
+const Total: React.FC = () => {
 
+    /*****************************/
+    const [queryForm, setQueryForm] = useState<GameTotalProps>({ pageNum: 1, pageSize: 20 })
 
-const Total: React.FC = () => {
+    const getGameTotalList = useAjax((params) => getGameTotalListApi(params))
+    /*****************************/
+
+    useEffect(() => {
+        getGameTotalList.run(queryForm)
+    }, [queryForm])
 
     return <div>
 
         <TableData
+            leftChild={<QueryForm
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { regStartDay, regEndDay, ...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 })
+                }}
+                isRegDay
+                isGameName
+                isBGGameClassify
+                rechargeDay={{ ranges: czPresets }}
+            />}
             scroll={{ x: 1000, y: 600 }}
-            ajax={null}
-            fixed={{ left: 5, right: 1 }}
-            dataSource={[]}
+            ajax={getGameTotalList}
+            fixed={{ left: 5, right: 0 }}
+            dataSource={getGameTotalList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
+            total={getGameTotalList?.data?.total}
+            page={queryForm.pageNum}
+            pageSize={queryForm.pageSize}
             title='游戏总数据'
             onChange={(props: any) => {
-                console.log('props--->', props)
+                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={'游戏总数据'}

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

@@ -1,3 +1,5 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Statistic } from "antd"
 import React from "react"
 
 
@@ -8,199 +10,360 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
         {
             label: '游戏信息',
             data: [
-                { title: '推广游戏CP名称', dataIndex: '1', label: '游戏信息', align: 'center', width: 95, default: 1 },
-                { title: '推广游戏名称', dataIndex: '2', label: '游戏信息', align: 'center', width: 70, default: 2 },
-                { title: '推广游戏应用类型', dataIndex: '3', label: '游戏信息', align: 'center', width: 70, default: 3 }
-            ]
-        },
-        {
-            label: '时间',
-            data: [
-                { title: '注册时间', dataIndex: '4', label: '时间', align: 'center', width: 100, default: 4 },
-                { title: '充值时间', dataIndex: '5', label: '时间', align: 'center', width: 100, default: 5 },
+                { title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 1, render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />) },
+                {
+                    title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 70, default: 2,
+                    render: (a: string) => {
+                        if (a) {
+                            let one = a?.toString()?.charAt(0)
+                            switch (one) {
+                                case '3':
+                                    return 'Android'
+                                case '4':
+                                    return 'IOS'
+                                case '5':
+                                    return 'H5'
+                                case '6':
+                                    return '小程序'
+                                default:
+                                    return a || '--'
+                            }
+                        } else return '--'
+                    }
+                }
             ]
         },
         {
             label: '买量用户数据',
             data: [
-                { title: '买量注册人数', dataIndex: 'l1', label: '买量用户数据', align: 'center', width: 70, default: 6 },
-                { title: '买量活跃用户人数', dataIndex: 'l2', label: '买量用户数据', align: 'center', width: 70, default: 7 },
-                { title: '买量创角人数', dataIndex: 'l3', label: '买量用户数据', align: 'center', width: 70, default: 8 },
-                { title: '买量首日创角人数', dataIndex: 'l4', label: '买量用户数据', align: 'center', width: 70, default: 9 },
-                { title: '买量新用户累计创角人数', dataIndex: 'l5', label: '买量用户数据', align: 'center', width: 110, default: 10 },
-                { title: '买量创角量', dataIndex: 'l6', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量首日创角量', dataIndex: 'l7', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量新用户累计创角量', dataIndex: 'l8', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量首日创角率', dataIndex: 'l9', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量新用户创角率', dataIndex: 'l10', label: '买量用户数据', align: 'center', width: 70 },
-                { title: '买量游戏当日LTV', dataIndex: 'l11', label: '买量用户数据', align: 'center', width: 70 },
+                { title: '买量注册人数', dataIndex: 'buyRegNum', label: '买量用户数据', align: 'center', width: 70, default: 3 }
             ]
         },
         {
             label: '自然量用户数据',
             data: [
-                { title: '自然量注册人数', dataIndex: 'm1', label: '自然量用户数据', align: 'center', width: 70, default: 11 },
-                { title: '自然量活跃用户人数', dataIndex: 'm2', label: '自然量用户数据', align: 'center', width: 110, default: 12 },
-                { title: '自然量创角人数', dataIndex: 'm3', label: '自然量用户数据', align: 'center', width: 70, default: 13 },
-                { title: '自然量首日创角人数', dataIndex: 'm4', label: '自然量用户数据', align: 'center', width: 110, default: 14 },
-                { title: '自然量新用户累计创角人数', dataIndex: 'm5', label: '自然量用户数据', align: 'center', width: 110, default: 15 },
-                { title: '自然量创角量', dataIndex: 'm6', label: '自然量用户数据', align: 'center', width: 70, default: 16 },
-                { title: '自然量首日创角量', dataIndex: 'm7', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计创角量', dataIndex: 'm8', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量首日创角率', dataIndex: 'm9', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量新用户创角率', dataIndex: 'm10', label: '自然量用户数据', align: 'center', width: 70 },
-                { title: '自然量小游戏当日LTV', dataIndex: 'm11', label: '自然量用户数据', align: 'center', width: 70 }
+                { title: '自然量注册人数', dataIndex: 'natureRegNum', label: '自然量用户数据', align: 'center', width: 70, default: 4 }
             ]
         },
         {
             label: '总用户数据',
             data: [
-                { title: '注册人数', dataIndex: 'o1', label: '总用户数据', align: 'center', width: 70, default: 16 },
-                { title: '活跃用户人数', dataIndex: 'o2', label: '总用户数据', align: 'center', width: 70, default: 17 },
-                { title: '创角人数', dataIndex: 'o3', label: '总用户数据', align: 'center', width: 70, default: 18 },
-                { title: '首日创角人数', dataIndex: 'o4', label: '总用户数据', align: 'center', width: 70, default: 19 },
-                { title: '新用户累计创角人数', dataIndex: 'o5', label: '总用户数据', align: 'center', width: 100, default: 20 },
-                { title: '创角量', dataIndex: 'o6', label: '总用户数据', align: 'center', width: 70, default: 21 },
-                { title: '首日创角量', dataIndex: 'o7', label: '总用户数据', align: 'center', width: 70 },
-                { title: '新用户累计创角量', dataIndex: 'o8', label: '总用户数据', align: 'center', width: 70 },
-                { title: '首日创角率', dataIndex: 'o9', label: '总用户数据', align: 'center', width: 70 },
-                { title: '新用户创角率', dataIndex: 'o10', label: '总用户数据', align: 'center', width: 70 },
-                { title: '游戏当日LTV', dataIndex: 'o11', label: '总用户数据', align: 'center', width: 70 }
+                { title: '注册人数', dataIndex: 'regNum', label: '总用户数据', align: 'center', width: 70, default: 5 }
             ]
         },
         {
             label: '买量付费数据',
             data: [
-                { title: '买量新用户充值次数', dataIndex: 'a1', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户充值人数', dataIndex: 'a2', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户充值金额', dataIndex: 'a3', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日新用户充值次数', dataIndex: 'a4', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日新用户充值人数', dataIndex: 'a5', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日新用户充值金额', dataIndex: 'a6', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值次数', dataIndex: 'a7', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值人数', dataIndex: 'a8', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量老用户充值金额', dataIndex: 'a9', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值次数', dataIndex: 'a10', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值人数', dataIndex: 'a11', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面充值金额', dataIndex: 'a12', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值次数', dataIndex: 'a13', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值人数', dataIndex: 'a14', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户累计充值金额', dataIndex: 'a15', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日付费率', dataIndex: 'a16', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户付费率', dataIndex: 'a17', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天付费率', dataIndex: 'a18', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户付费比', dataIndex: 'a19', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量活跃用户付费率', dataIndex: 'a20', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日客单价', dataIndex: 'a21', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户客单价', dataIndex: 'a22', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天客单价', dataIndex: 'a23', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面客单价', dataIndex: 'a24', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量复充率', dataIndex: 'a25', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户复充率', dataIndex: 'a26', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天复充率', dataIndex: 'a27', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量平均活跃付费率', dataIndex: 'a28', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新增注册ARPU', dataIndex: 'a29', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量活跃ARPPU', dataIndex: 'a30', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量首日付费ARPU', dataIndex: 'a31', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量新用户付费ARPU', dataIndex: 'a32', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量当天付费ARPU', dataIndex: 'a33', label: '买量付费数据', align: 'center', width: 70 },
-                { title: '买量账面ARPU', dataIndex: 'a34', label: '买量付费数据', align: 'center', width: 70 }
+                { title: '买量新用户充值次数', dataIndex: 'buyNewUserAmountCount', label: '买量付费数据', align: 'center', width: 70, default: 6 },
+                { title: '买量新用户充值人数', dataIndex: 'buyNewUserAmountNum', label: '买量付费数据', align: 'center', width: 70, default: 7 },
+                {
+                    title: '买量新用户充值金额', dataIndex: 'buyNewUserAmount', label: '买量付费数据', align: 'center', width: 70, default: 8,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量首日新用户充值次数', dataIndex: 'buyFirstNewUserAmountCount', label: '买量付费数据', align: 'center', width: 70, default: 9 },
+                { title: '买量首日新用户充值人数', dataIndex: 'buyFirstNewUserAmountNum', label: '买量付费数据', align: 'center', width: 70, default: 10 },
+                {
+                    title: '买量首日新用户充值金额', dataIndex: 'buyFirstNewUserAmount', label: '买量付费数据', align: 'center', width: 70, default: 11,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量老用户充值次数', dataIndex: 'buyOldUserCount', label: '买量付费数据', align: 'center', width: 70, default: 12 },
+                { title: '买量老用户充值人数', dataIndex: 'buyOldUserNum', label: '买量付费数据', align: 'center', width: 70, default: 13 },
+                {
+                    title: '买量老用户充值金额', dataIndex: 'buyOldUserAmount', label: '买量付费数据', align: 'center', width: 70, default: 14,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量账面充值次数', dataIndex: 'buyAmountCount', label: '买量付费数据', align: 'center', width: 70 },
+                { title: '买量账面充值人数', dataIndex: 'buyAmountNum', label: '买量付费数据', align: 'center', width: 70 },
+                {
+                    title: '买量账面充值金额', dataIndex: 'buyAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '买量新用户累计充值次数', dataIndex: 'buyNewUserTotalAmountCount', label: '买量付费数据', align: 'center', width: 70 },
+                { title: '买量新用户累计充值人数', dataIndex: 'buyNewUserTotalAmountNum', label: '买量付费数据', align: 'center', width: 70 },
+                {
+                    title: '买量新用户累计充值金额', dataIndex: 'buyNewUserTotalAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量首日付费率', dataIndex: 'buyFirstRoi', label: '买量付费数据', align: 'center', width: 70, default: 15,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新用户付费率', dataIndex: 'buyNewUserRoi', label: '买量付费数据', align: 'center', width: 70, default: 16,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量当天付费率', dataIndex: 'buyTodayRoi', label: '买量付费数据', align: 'center', width: 70, default: 17,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新用户付费比', dataIndex: 'buyNewUserRate', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量首日客单价', dataIndex: 'buyFirstAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量新用户客单价', dataIndex: 'buyNewUserAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量当天客单价', dataIndex: 'buyTodayAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量账面客单价', dataIndex: 'buyAvgAmount', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量复充率', dataIndex: 'buyUserAgainRate', label: '买量付费数据', align: 'center', width: 70, default: 18,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新用户复充率', dataIndex: 'buyNewUserAgainRate', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量当天复充率', dataIndex: 'buyTodayAgainRate', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '买量新增注册ARPU', dataIndex: 'buyRegUserArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量首日付费ARPU', dataIndex: 'buyFirstAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量新用户付费ARPU', dataIndex: 'buyNewUserAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量当天付费ARPU', dataIndex: 'buyTodayAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '买量账面ARPU', dataIndex: 'buyAmountArpu', label: '买量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
             ]
         },
         {
             label: '自然量付费数据',
             data: [
-                { title: '自然量新用户充值次数', dataIndex: 'b1', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户充值人数', dataIndex: 'b2', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户充值金额', dataIndex: 'b3', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日新用户充值次数', dataIndex: 'b4', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日新用户充值人数', dataIndex: 'b5', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日新用户充值金额', dataIndex: 'b6', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值次数', dataIndex: 'b7', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值人数', dataIndex: 'b8', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量老用户充值金额', dataIndex: 'b9', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值次数', dataIndex: 'b10', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值人数', dataIndex: 'b11', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面充值金额', dataIndex: 'b12', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值次数', dataIndex: 'b13', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值人数', dataIndex: 'b14', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户累计充值金额', dataIndex: 'b15', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日付费率', dataIndex: 'b16', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户付费率', dataIndex: 'b17', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天付费率', dataIndex: 'b18', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户付费比', dataIndex: 'b19', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量活跃用户付费率', dataIndex: 'b20', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日客单价', dataIndex: 'b21', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户客单价', dataIndex: 'b22', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天客单价', dataIndex: 'b23', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面客单价', dataIndex: 'b24', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量复充率', dataIndex: 'b25', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户复充率', dataIndex: 'b26', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天复充率', dataIndex: 'b27', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量平均活跃付费率', dataIndex: 'b28', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新增注册ARPU', dataIndex: 'b29', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量活跃ARPPU', dataIndex: 'b30', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量首日付费ARPU', dataIndex: 'b31', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量新用户付费ARPU', dataIndex: 'b32', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量当天付费ARPU', dataIndex: 'b33', label: '自然量付费数据', align: 'center', width: 70 },
-                { title: '自然量账面ARPU', dataIndex: 'b34', label: '自然量付费数据', align: 'center', width: 70 }
+                { title: '自然量新用户充值次数', dataIndex: 'natureNewUserAmountCount', label: '自然量付费数据', align: 'center', width: 70, default: 19 },
+                { title: '自然量新用户充值人数', dataIndex: 'natureNewUserAmountNum', label: '自然量付费数据', align: 'center', width: 70, default: 20 },
+                {
+                    title: '自然量新用户充值金额', dataIndex: 'natureNewUserAmount', label: '自然量付费数据', align: 'center', width: 70, default: 21,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量首日新用户充值次数', dataIndex: 'natureFirstNewUserAmountCount', label: '自然量付费数据', align: 'center', width: 70 },
+                { title: '自然量首日新用户充值人数', dataIndex: 'natureFirstNewUserAmountNum', label: '自然量付费数据', align: 'center', width: 70 },
+                {
+                    title: '自然量首日新用户充值金额', dataIndex: 'natureFirstNewUserAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量老用户充值次数', dataIndex: 'natureOldUserCount', label: '自然量付费数据', align: 'center', width: 70, default: 22 },
+                { title: '自然量老用户充值人数', dataIndex: 'natureOldUserNum', label: '自然量付费数据', align: 'center', width: 70, default: 23 },
+                {
+                    title: '自然量老用户充值金额', dataIndex: 'natureOldUserAmount', label: '自然量付费数据', align: 'center', width: 70, default: 24,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量账面充值次数', dataIndex: 'natureAmountCount', label: '自然量付费数据', align: 'center', width: 70 },
+                { title: '自然量账面充值人数', dataIndex: 'natureAmountNum', label: '自然量付费数据', align: 'center', width: 70 },
+                {
+                    title: '自然量账面充值金额', dataIndex: 'natureAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '自然量新用户累计充值次数', dataIndex: 'natureNewUserTotalAmountCount', label: '自然量付费数据', align: 'center', width: 70 },
+                { title: '自然量新用户累计充值人数', dataIndex: 'natureNewUserTotalAmountNum', label: '自然量付费数据', align: 'center', width: 70 },
+                {
+                    title: '自然量新用户累计充值金额', dataIndex: 'natureNewUserTotalAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量首日付费率', dataIndex: 'natureFirstRoi', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新用户付费率', dataIndex: 'natureNewUserRoi', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量当天付费率', dataIndex: 'natureTodayRoi', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新用户付费比', dataIndex: 'natureNewUserRate', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量首日客单价', dataIndex: 'natureFirstAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量新用户客单价', dataIndex: 'natureNewUserAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量当天客单价', dataIndex: 'natureTodayAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量账面客单价', dataIndex: 'natureAvgAmount', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量复充率', dataIndex: 'natureUserAgainRate', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新用户复充率', dataIndex: 'natureNewUserAgainRate', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量当天复充率', dataIndex: 'natureTodayAgainRate', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '自然量新增注册ARPU', dataIndex: 'natureRegUserArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量首日付费ARPU', dataIndex: 'natureFirstAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量新用户付费ARPU', dataIndex: 'natureNewUserAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量当天付费ARPU', dataIndex: 'natureTodayAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '自然量账面ARPU', dataIndex: 'natureAmountArpu', label: '自然量付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                }
             ]
         },
         {
             label: '总付费数据',
             data: [
-                { title: '总新用户充值次数', dataIndex: 'c1', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户充值人数', dataIndex: 'c2', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户充值金额', dataIndex: 'c3', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日新用户充值次数', dataIndex: 'c4', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日新用户充值人数', dataIndex: 'c5', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日新用户充值金额', dataIndex: 'c6', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值次数', dataIndex: 'c7', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值人数', dataIndex: 'c8', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总老用户充值金额', dataIndex: 'c9', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值次数', dataIndex: 'c10', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值人数', dataIndex: 'c11', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面充值金额', dataIndex: 'c12', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值次数', dataIndex: 'c13', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值人数', dataIndex: 'c14', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户累计充值金额', dataIndex: 'c15', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日付费率', dataIndex: 'c16', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户付费率', dataIndex: 'c17', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天付费率', dataIndex: 'c18', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户付费比', dataIndex: 'c19', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总活跃用户付费率', dataIndex: 'c20', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日客单价', dataIndex: 'c21', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户客单价', dataIndex: 'c22', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天客单价', dataIndex: 'c23', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面客单价', dataIndex: 'c24', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总复充率', dataIndex: 'c25', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户复充率', dataIndex: 'c26', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天复充率', dataIndex: 'c27', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总平均活跃付费率', dataIndex: 'c28', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新增注册ARPU', dataIndex: 'c29', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总活跃ARPPU', dataIndex: 'c30', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总首日付费ARPU', dataIndex: 'c31', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总新用户付费ARPU', dataIndex: 'c32', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总当天付费ARPU', dataIndex: 'c33', label: '总付费数据', align: 'center', width: 70 },
-                { title: '总账面ARPU', dataIndex: 'c34', label: '总付费数据', align: 'center', width: 70 }
-            ]
-        },
-        {
-            label: '操作',
-            data: [
+                { title: '总新用户充值次数', dataIndex: 'newUserAmountCount', label: '总付费数据', align: 'center', width: 70, default: 25 },
+                { title: '总新用户充值人数', dataIndex: 'newUserAmountNum', label: '总付费数据', align: 'center', width: 70, default: 26 },
+                {
+                    title: '总新用户充值金额', dataIndex: 'newUserAmount', label: '总付费数据', align: 'center', width: 70, default: 27,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总首日新用户充值次数', dataIndex: 'firstNewUserAmountCount', label: '总付费数据', align: 'center', width: 70, default: 28 },
+                { title: '总首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '总付费数据', align: 'center', width: 70, default: 29 },
+                {
+                    title: '总首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '总付费数据', align: 'center', width: 70, default: 30,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总老用户充值次数', dataIndex: 'oldUserCount', label: '总付费数据', align: 'center', width: 70, default: 31 },
+                { title: '总老用户充值人数', dataIndex: 'oldUserNum', label: '总付费数据', align: 'center', width: 70, default: 32 },
+                {
+                    title: '总老用户充值金额', dataIndex: 'oldUserAmount', label: '总付费数据', align: 'center', width: 70, default: 33,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总账面充值次数', dataIndex: 'amountCount', label: '总付费数据', align: 'center', width: 70 },
+                { title: '总账面充值人数', dataIndex: 'amountNum', label: '总付费数据', align: 'center', width: 70 },
                 {
-                    title: '操作',
-                    dataIndex: 'cz',
-                    label: '操作',
-                    default: 21,
-                    align: 'center',
-                    width: 75,
-                    render: (a: number) => {
-                        return <span>1111</span>
-                    },
+                    title: '总账面充值金额', dataIndex: 'amount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                { title: '总新用户累计充值次数', dataIndex: 'newUserTotalAmountCount', label: '总付费数据', align: 'center', width: 70 },
+                { title: '总新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '总付费数据', align: 'center', width: 70 },
+                {
+                    title: '总新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总首日付费率', dataIndex: 'firstRoi', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总新用户付费率', dataIndex: 'newUserRoi', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总当天付费率', dataIndex: 'todayRoi', label: '总付费数据', align: 'center', width: 70,
+                    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,
+                    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,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总新用户客单价', dataIndex: 'newUserAvgAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总当天客单价', dataIndex: 'todayAvgAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总账面客单价', dataIndex: 'avgAmount', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总复充率', dataIndex: 'userAgainRate', label: '总付费数据', align: 'center', width: 70, default: 34,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总新用户复充率', dataIndex: 'newUserAgainRate', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总当天复充率', dataIndex: 'todayAgainRate', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '总新增注册ARPU', dataIndex: 'regUserArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总首日付费ARPU', dataIndex: 'firstAmountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总新用户付费ARPU', dataIndex: 'newUserAmountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总当天付费ARPU', dataIndex: 'todayAmountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总账面ARPU', dataIndex: 'amountArpu', label: '总付费数据', align: 'center', width: 70,
+                    render: (a: string) => <Statistic value={a || 0} />
                 }
             ]
-        }
+        },
+        // {
+        //     label: '操作',
+        //     data: [
+        //         {
+        //             title: '操作',
+        //             dataIndex: 'cz',
+        //             label: '操作',
+        //             default: 35,
+        //             align: 'center',
+        //             width: 75,
+        //             render: (a: number) => {
+        //                 return <span>1111</span>
+        //             },
+        //         }
+        //     ]
+        // }
     ]
 }
 

src/pages/gameDataStatistics/order/index.tsx

@@ -23,36 +23,40 @@ const Order: React.FC = () => {
 
         <TableData
             leftChild={<QueryForm
-                onChange={(data: any) => setQueryForm({ ...queryForm, pageNum: 1, ...data })}
-                isAccount
+                onChange={(data: any) => {
+                    const { pitcherId, regStartDay, regEndDay, ...params } = data
+                    console.log(params, pitcherId)
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    newQueryForm.zxPitcherId = pitcherId
+                    if (regStartDay && regEndDay) {
+                        newQueryForm.beginRegTime = regStartDay
+                        newQueryForm.endRegTime = regEndDay
+                    } else {
+                        delete newQueryForm.beginRegTime
+                        delete newQueryForm.endRegTime
+                    }
+                    
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
                 isAccountId
-                isCompanyId
-                isCpId
-                isCpName
-                isCpOrderId
-                isCpStatus
-                isCreateDay
-                isDevice
-                isRechargeGameName 
+                isAgentId
                 isGameId
-                isGameRoleId
-                isGameRoleName
-                isFirstRecharge
-                isSwitch
-                isMerchantNo
+                isCpOrderId
+                isGameUserId
+                isMerchantOrderNo
+                isOrderGameId
                 isOrderId
                 isPayStatus
+                isOs
+                isParentId
                 isPayWay
-                isProductName
-                isRegAgent
-                isAgentId
-                isRegDay
-                isRegGameName
-                isRegGameId
-                isSysUserName
-                isSysUserId
+                isGameRoleName
+                isGameRoleId
                 isUserName
-                isUserId
+                isSysUserId
+                isCreateDay
+                isRegDay
             />}
             scroll={{ x: 1000, y: 600 }}
             ajax={getOrderList}
@@ -64,33 +68,45 @@ const Order: React.FC = () => {
             title='订单明细'
             onChange={(props: any) => {
                 console.log('props--->', props)
-                setQueryForm({ ...queryForm, pageNum: props?.pagination?.current || 1, pageSize: props?.pagination?.pageSize || 20 })
-            }}
-            config={columns12()}
-            configName={'订单明细'}
-            summary={() => {
-                let defSelectData = localStorage.getItem(`myAdMonitorConfig1.0.0_订单明细`)
-                let newDefSelectData: any[] = []
-                if (defSelectData) {
-                    newDefSelectData = JSON.parse(defSelectData)
+                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 {
-                    newDefSelectData = columns12()[0]?.data
+                    delete newQueryForm['sortType']
+                    delete newQueryForm['sortFiled']
                 }
-                return <Table.Summary fixed={'top'}>
-                    <Table.Summary.Row>
-                        {newDefSelectData?.map((item: { dataIndex: string }, index: number) => {
-                            if (item.dataIndex === 'amount') {
-                                return <Table.Summary.Cell index={index} align='center' key={index}><Statistic valueStyle={{ color: 'red', fontWeight: 600 }} value={getOrderList?.data?.totalData?.totalAmount || 0} precision={2}/></Table.Summary.Cell>
-                            } else if (item.dataIndex === 'realAmount') {
-                                return <Table.Summary.Cell index={index} align='center' key={index}><Statistic valueStyle={{ color: 'red', fontWeight: 600 }} value={getOrderList?.data?.totalData?.totalRealAmount || 0} precision={2}/></Table.Summary.Cell>
-                            } else if (index === 0) {
-                                return <Table.Summary.Cell index={index} align='center' key={index}><span style={{ fontSize: 16, fontWeight: 'bold' }}>汇总</span></Table.Summary.Cell>
-                            }
-                            return <Table.Summary.Cell index={index} align='center' key={index}><span>--</span></Table.Summary.Cell>
-                        })}
-                    </Table.Summary.Row>
-                </Table.Summary>
+                newQueryForm.pageNum = current
+                newQueryForm.pageSize = pageSize
+                setQueryForm({ ...newQueryForm })
             }}
+            config={columns12()}
+            configName={'订单明细'}
+            // summary={() => {
+            //     let defSelectData = localStorage.getItem(`myAdMonitorConfig1.0.0_订单明细`)
+            //     let newDefSelectData: any[] = []
+            //     if (defSelectData) {
+            //         newDefSelectData = JSON.parse(defSelectData)
+            //     } else {
+            //         newDefSelectData = columns12()[0]?.data
+            //     }
+            //     return <Table.Summary fixed={'top'}>
+            //         <Table.Summary.Row>
+            //             {newDefSelectData?.map((item: { dataIndex: string }, index: number) => {
+            //                 if (item.dataIndex === 'amount') {
+            //                     return <Table.Summary.Cell index={index} align='center' key={index}><Statistic valueStyle={{ color: 'red', fontWeight: 600 }} value={getOrderList?.data?.totalData?.totalAmount || 0} precision={2}/></Table.Summary.Cell>
+            //                 } else if (item.dataIndex === 'realAmount') {
+            //                     return <Table.Summary.Cell index={index} align='center' key={index}><Statistic valueStyle={{ color: 'red', fontWeight: 600 }} value={getOrderList?.data?.totalData?.totalRealAmount || 0} precision={2}/></Table.Summary.Cell>
+            //                 } else if (index === 0) {
+            //                     return <Table.Summary.Cell index={index} align='center' key={index}><span style={{ fontSize: 16, fontWeight: 'bold' }}>汇总</span></Table.Summary.Cell>
+            //                 }
+            //                 return <Table.Summary.Cell index={index} align='center' key={index}><span>--</span></Table.Summary.Cell>
+            //             })}
+            //         </Table.Summary.Row>
+            //     </Table.Summary>
+            // }}
         />
     </div>
 }

src/pages/gameDataStatistics/order/tableConfig.tsx

@@ -14,7 +14,7 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                     render: (a: string, b: any) => (<WidthEllipsis value={b?.day} />)
                 },
                 {
-                    title: '商户订单号', dataIndex: 'orderId', label: '订单明细', align: 'center', width: 120, default: 2,
+                    title: '商户订单号ID', dataIndex: 'orderId', label: '订单明细', align: 'center', width: 120, default: 2,
                     render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                 },
                 {
@@ -34,11 +34,20 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                     title: '玩家注册时间', dataIndex: 'regTime', label: '订单明细', align: 'center', width: 135, default: 7,
                     render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                 },
-                { title: '玩家注册渠道', dataIndex: 'agentId', label: '订单明细', align: 'center', width: 95, default: 8 },
-                { title: '玩家注册游戏', dataIndex: 'gameId', label: '订单明细', align: 'center', width: 95, default: 9 },
-                { title: 'CP名称', dataIndex: 'cpName', label: '订单明细', align: 'center', width: 95, default: 10 },
                 {
-                    title: '玩家注册游戏应用类型', dataIndex: 'classify', label: '订单明细', align: 'center', width: 110, default: 11,
+                    title: '玩家注册渠道', dataIndex: 'agentId', label: '订单明细', align: 'center', width: 95, default: 8,
+                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '玩家注册游戏', dataIndex: 'gameId', label: '订单明细', align: 'center', width: 95, default: 9,
+                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: 'CP名称', dataIndex: 'cpName', label: '订单明细', align: 'center', width: 95, default: 10,
+                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '玩家注册游戏应用类型', dataIndex: 'classify', label: '订单明细', align: 'center', width: 90, default: 11,
                     render: (a: string) => {
                         if (a) {
                             let one = a.charAt(0)

src/pages/gameDataStatistics/rankingList/game/tableConfig.tsx

@@ -27,23 +27,21 @@ function columns12(gameType: any) {
                     width: 85, 
                     default: 4,
                     render: (a: string) => {
-                        render: (a: string) => { 
-                            if (a) {
-                                let one = a.charAt(0)
-                                switch(one) {
-                                    case '3':
-                                        return 'Android'
-                                    case '4':
-                                        return 'IOS'
-                                    case '5':
-                                        return 'H5'
-                                    case '6':
-                                        return '小程序'
-                                    default:
-                                        return gameType[a] || a
-                                }
-                            } else return '--'
-                        }
+                        if (a) {
+                            let one = a.charAt(0)
+                            switch(one) {
+                                case '3':
+                                    return 'Android'
+                                case '4':
+                                    return 'IOS'
+                                case '5':
+                                    return 'H5'
+                                case '6':
+                                    return '小程序'
+                                default:
+                                    return gameType[a] || a
+                            }
+                        } else return '--'
                     }
                 },
                 { title: '当天充值金额', dataIndex: 'todayAmount', label: '游戏充值排行榜', align: 'center', width: 90, default: 5, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },

src/services/gameData/game.ts

@@ -0,0 +1,56 @@
+import { request } from 'umi';
+import { api } from '../api';
+import { Paging, SortProps } from './rankingList';
+let wapi = api + '/gameData'
+
+export interface GameWaterProps extends Paging, SortProps {
+    gameClassify?: string,
+    gameName?: string,
+    rechargeDate?: string
+}
+/**
+ * 每日流水贡献
+ * @param data 
+ * @returns 
+ */
+export async function getGameWaterListApi(data: GameWaterProps) {
+    return request(wapi + `/gameData/water`, {
+        method: 'POST',
+        data
+    });
+}
+
+export interface GameTotalProps extends Paging, SortProps {
+    gameClassify?: string,
+    gameName?: string,
+    // 充值开始时间
+    rechargeBeginDate?: string
+    rechargeEndDate?: string
+    // 注册开始时间
+    registeredBeginDate?: string
+    registeredEndDate?: string
+}
+/**
+ * 游戏总数据
+ * @param data 
+ * @returns 
+ */
+export async function getGameTotalListApi(data: GameTotalProps) {
+    return request(wapi + `/gameData/total`, {
+        method: 'POST',
+        data
+    });
+}
+
+export type GameDayProps = Omit<GameTotalProps, 'rechargeBeginDate' | 'rechargeEndDate'>
+/**
+ * 游戏每日数据
+ * @param data 
+ * @returns 
+ */
+export async function getGameDayListApi(data: GameDayProps) {
+    return request(wapi + `/gameData/day`, {
+        method: 'POST',
+        data
+    });
+}

src/services/gameData/index.ts

@@ -60,4 +60,23 @@ export async function getGameChoiceParentListType1Api() {
     return request(gameApi + `/manage/choice/game/category/list`, {
         method: 'GET',
     });
+}
+
+/**
+ * 操作系统选择列表
+ * @returns 
+ */
+export async function getUserSystemTypeChoiceListApi() {
+    return request(gameApi + `/manage/choice/os/type/list`, {
+        method: 'GET',
+    });
+}
+
+
+/**
+ * 获取支付方式列表
+ * @returns 
+ */
+export async function getPayListApi() {
+    return request(gameApi + '/manage/choice/pay/way/list');
 }