小说/投手应用付费趋势/广告变现收益

config/routerConfig.ts

@@ -237,11 +237,32 @@ const iaaNovelData = [
                 name: '投手每日汇总',
                 component: './iaaData/novel/tencent/pitcherEveryDayGroup',
             },
+            {
+                path: '/iaaData/novel/tencent/pitcherPayTrend',
+                name: '投手付费趋势',
+                component: './iaaData/novel/tencent/pitcherPayTrend',
+            },
+            {
+                path: '/iaaData/novel/tencent/pitcherAdRevenue',
+                name: '投手广告变现收益',
+                component: './iaaData/novel/tencent/pitcherAdRevenue',
+            },
             {
                 path: '/iaaData/novel/tencent/appEveryDayData',
                 name: '应用每日数据',
                 component: './iaaData/novel/tencent/appEveryDayData',
+            },
+            {
+                path: '/iaaData/novel/tencent/appPayTrend',
+                name: '应用付费趋势',
+                component: './iaaData/novel/tencent/appPayTrend',
+            },
+            {
+                path: '/iaaData/novel/tencent/appAdRevenue',
+                name: '应用广告变现收益',
+                component: './iaaData/novel/tencent/appAdRevenue',
             }
+
         ]
     }
 ]

src/pages/iaaData/novel/tencent/appAdRevenue/index.less

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

src/pages/iaaData/novel/tencent/appAdRevenue/index.tsx

@@ -0,0 +1,101 @@
+import { GetAppTrendListProps,  getNovelAppAdRevenueTrendTotalApi,  getNovelAppPayTrendApi } from "@/services/iaaData";
+import React, { useEffect, useState } from "react"
+import { useModel } from "umi";
+import moment from "moment";
+import { useAjax } from "@/Hook/useAjax";
+import TablePro from "@/components/TablePro";
+import QueryForm from "@/components/QueryForm";
+import columns12 from "./tableConfig";
+
+/**
+ * 应用广告变现收益
+ * @returns 
+ */
+const AppAdRevenue: React.FC = () => {
+
+    /****************************************/
+    const { initialState } = useModel('@@initialState');
+    const [queryForm, setQueryForm] = useState<GetAppTrendListProps>({
+        pageNum: 1,
+        pageSize: 30,
+        costDayBegin: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+        costDayEnd: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getNovelAppPayTrend = useAjax((params) => getNovelAppPayTrendApi(params))
+    const getNovelAppAdRevenueTrendTotal = useAjax((params) => getNovelAppAdRevenueTrendTotalApi(params))
+    /****************************************/
+
+    useEffect(() => {
+        if (initialState?.iaaApp?.length && initialState?.productType) {
+            getNovelAppPayTrend.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType })
+            getNovelAppAdRevenueTrendTotal.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType }).then((res: { data: { id: number; dt: string, costDayBegin: string } }) => {
+                if (res?.data) {
+                    let data = res?.data
+                    data.id = 1
+                    data.costDayBegin = queryForm?.costDayBegin || moment().format('YYYY-MM-DD')
+                    data.dt = '总计'
+                    setTotalData([data])
+                } else {
+                    setTotalData([{ id: 1, dt: '总计' }])
+                }
+            })
+        } else {
+            setTotalData([{ id: 1, dt: '总计' }])
+            getNovelAppPayTrend.mutate({ data: undefined })
+        }
+    }, [queryForm, initialState?.iaaApp, initialState?.productType])
+
+    return <div>
+        <TablePro
+            leftChild={<QueryForm
+                initialValues={{ day1: [moment().subtract(1, 'days'), moment().subtract(1, 'days')] }}
+                day1={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { day1, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (day1 && day1?.length === 2) {
+                        newQueryForm['costDayBegin'] = moment(day1[0]).format('YYYY-MM-DD')
+                        newQueryForm['costDayEnd'] = moment(day1[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['costDayBegin']
+                        delete newQueryForm['costDayEnd']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+            />}
+            isZj
+            totalData={totalData}
+            config={columns12()}
+            configName={'应用广告变现收益'}
+            fixed={{ left: 4, right: 0 }}
+            scroll={{ x: 1000, y: 620 }}
+            title='应用广告变现收益'
+            loading={getNovelAppPayTrend.loading}
+            ajax={getNovelAppPayTrend}
+            page={getNovelAppPayTrend?.data?.data?.current || 1}
+            pageSize={getNovelAppPayTrend?.data?.data?.size || 20}
+            total={getNovelAppPayTrend?.data?.data?.total || 0}
+            dataSource={getNovelAppPayTrend?.data?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + (index + '')) }))}
+            onChange={(pagination: any, _: any, sortData: any) => {
+                let { current, pageSize } = pagination
+                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                if (sortData && sortData?.order) {
+                    newQueryForm['sortAsc'] = sortData?.order === 'ascend' ? true : false
+                    newQueryForm['sortFiled'] = sortData?.field
+                } else {
+                    delete newQueryForm['sortAsc']
+                    delete newQueryForm['sortFiled']
+                }
+                newQueryForm.pageNum = current || newQueryForm.pageNum
+                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                setQueryForm({ ...newQueryForm })
+            }}
+        />
+    </div>
+}
+
+export default AppAdRevenue

src/pages/iaaData/novel/tencent/appAdRevenue/tableConfig.tsx

@@ -0,0 +1,124 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Progress, Statistic } from "antd"
+import React from "react"
+import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
+import {APPTYPE } from "@/pages/iaaSystem/manage/const"
+
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+
+    return [
+        {
+            label: '基本信息',
+            data: [
+                {
+                    title: '日期', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 1,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 2,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用ID', dataIndex: 'iaaAppId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 3,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '账号归属', dataIndex: 'adUnitType', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={AdUnitType_Enum[a as keyof typeof AdUnitType_Enum]} />)
+                },
+                {
+                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 4,
+                    render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
+                },
+                {
+                    title: '应用类型', dataIndex: 'appType', label: '基本信息', align: 'center', width: 80, default: 5,
+                    render: (a: string) => (<WidthEllipsis value={APPTYPE[a as keyof typeof APPTYPE]?.text} />)
+                },
+                {
+                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 6, sorter: true,
+                    className: 'padding_0',
+                    render: (a: number) => <div style={{ height: 30, position: 'relative' }}>
+                        <Progress
+                            strokeColor={{
+                                from: '#ff5900',
+                                to: '#ffd380',
+                            }}
+                            status="active"
+                            showInfo={false}
+                            percent={a ? a / 20000 * 100 : 0}
+                        />
+                        <span style={{ position: 'absolute', left: '50%', top: '50%', width: '100%', padding: '0 5px', transform: 'translate(-50%, -50%)' }}><Statistic value={a || 0} precision={2} valueStyle={a >= 20000 ? { color: '#000', fontWeight: 'bold' } : { fontWeight: 'bold' }} /></span>
+                    </div>
+                },
+                {
+                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '基本信息', align: 'right', width: 110, default: 7, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现人数', dataIndex: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 110, default: 8, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现arpu', dataIndex: 'arpu', label: '基本信息', align: 'center', width: 110, default: 9, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现arppu', dataIndex: 'arppu', label: '基本信息', align: 'center', width: 120, default: 10, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现金额', dataIndex: 'appAdPayingAmount', label: '基本信息', align: 'center', width: 110, default: 11, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现roi', dataIndex: 'appAdPayingRoi', label: '基本信息', align: 'center', width: 105, default: 12, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+
+                {
+                    title: '注册人数', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 13, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                 {
+                   title: 'arppu1', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 14, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu2', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 15, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu3', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 16, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu4', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 17, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu5', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 18, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu6', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 19, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+                {
+                   title: 'arppu7', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 20, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} /> 
+                },
+            ]
+        }
+    ]
+}
+
+export default columns12

src/pages/iaaData/novel/tencent/appPayTrend/index.less

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

src/pages/iaaData/novel/tencent/appPayTrend/index.tsx

@@ -0,0 +1,101 @@
+import { GetAppTrendListProps,  getNovelAppPayTrendApi, getNovelAppPayTrendTotalApi } from "@/services/iaaData";
+import React, { useEffect, useState } from "react"
+import { useModel } from "umi";
+import moment from "moment";
+import { useAjax } from "@/Hook/useAjax";
+import TablePro from "@/components/TablePro";
+import QueryForm from "@/components/QueryForm";
+import columns12 from "./tableConfig";
+
+/**
+ * 应用付费趋势
+ * @returns 
+ */
+const AppPayTrend: React.FC = () => {
+
+    /****************************************/
+    const { initialState } = useModel('@@initialState');
+    const [queryForm, setQueryForm] = useState<GetAppTrendListProps>({
+        pageNum: 1,
+        pageSize: 30,
+        costDayBegin: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+        costDayEnd: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getNovelAppPayTrend = useAjax((params) => getNovelAppPayTrendApi(params))
+    const getNovelAppPayTrendTotal = useAjax((params) => getNovelAppPayTrendTotalApi(params))
+    /****************************************/
+
+    useEffect(() => {
+        if (initialState?.iaaApp?.length && initialState?.productType) {
+            getNovelAppPayTrend.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType })
+            getNovelAppPayTrendTotal.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType }).then((res: { data: { id: number; dt: string, costDayBegin: string } }) => {
+                if (res?.data) {
+                    let data = res?.data
+                    data.id = 1
+                    data.costDayBegin = queryForm?.costDayBegin || moment().format('YYYY-MM-DD')
+                    data.dt = '总计'
+                    setTotalData([data])
+                } else {
+                    setTotalData([{ id: 1, dt: '总计' }])
+                }
+            })
+        } else {
+            setTotalData([{ id: 1, dt: '总计' }])
+            getNovelAppPayTrend.mutate({ data: undefined })
+        }
+    }, [queryForm, initialState?.iaaApp, initialState?.productType])
+
+    return <div>
+        <TablePro
+            leftChild={<QueryForm
+                initialValues={{ day1: [moment().subtract(1, 'days'), moment().subtract(1, 'days')] }}
+                day1={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { day1, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (day1 && day1?.length === 2) {
+                        newQueryForm['costDayBegin'] = moment(day1[0]).format('YYYY-MM-DD')
+                        newQueryForm['costDayEnd'] = moment(day1[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['costDayBegin']
+                        delete newQueryForm['costDayEnd']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+            />}
+            isZj
+            totalData={totalData}
+            config={columns12()}
+            configName={'应用付费趋势'}
+            fixed={{ left: 4, right: 0 }}
+            scroll={{ x: 1000, y: 620 }}
+            title='应用付费趋势'
+            loading={getNovelAppPayTrend.loading}
+            ajax={getNovelAppPayTrend}
+            page={getNovelAppPayTrend?.data?.data?.current || 1}
+            pageSize={getNovelAppPayTrend?.data?.data?.size || 20}
+            total={getNovelAppPayTrend?.data?.data?.total || 0}
+            dataSource={getNovelAppPayTrend?.data?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + (index + '')) }))}
+            onChange={(pagination: any, _: any, sortData: any) => {
+                let { current, pageSize } = pagination
+                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                if (sortData && sortData?.order) {
+                    newQueryForm['sortAsc'] = sortData?.order === 'ascend' ? true : false
+                    newQueryForm['sortFiled'] = sortData?.field
+                } else {
+                    delete newQueryForm['sortAsc']
+                    delete newQueryForm['sortFiled']
+                }
+                newQueryForm.pageNum = current || newQueryForm.pageNum
+                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                setQueryForm({ ...newQueryForm })
+            }}
+        />
+    </div>
+}
+
+export default AppPayTrend

src/pages/iaaData/novel/tencent/appPayTrend/tableConfig.tsx

@@ -0,0 +1,125 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Progress, Statistic } from "antd"
+import React from "react"
+import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
+import style from './index.less'
+import moment from "moment"
+import { ACCOUNTTYPE, APPTYPE } from "@/pages/iaaSystem/manage/const"
+
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+    const defaultIndex = 23
+    const trend = [1, 2, 3, 4, 5, 6, 7, 14, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 365].map((index, count) => {
+
+        const dataIndex = `da${index}`
+        return {
+            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count, width: 150,
+            render: (_: any, b: any) => {
+                if (moment().subtract(1, 'days') >= moment(b.dt === '总计' ? b.costDayBegin : b.dt).add(index - 1, 'days')) {
+                    const data = b?.[dataIndex]?.split('/')
+                    console.log(data)
+                    return <div className={style.dbox} style={{ height: 160 }}>
+                        <span style={{ color: '#F44336', fontWeight: 600, display: 'flex' }}>变现人数：<span><Statistic value={data?.[0] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#FF9800', fontWeight: 600, display: 'flex' }}>变现次数：<span><Statistic value={data?.[1] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>新增收入：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#0f538a', fontWeight: 600, display: 'flex' }}>累计收入：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#9C27B0', fontWeight: 600, display: 'flex' }}>arpu：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
+                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, display: 'flex' }}>增：<span><Statistic value={data?.[4] ? data?.[4] * 100 : 0} precision={2} valueStyle={!data?.[4] ? {} : data?.[4] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                        <span style={{ color: '#ff5722', fontWeight: 600, display: 'flex' }}>回：<span><Statistic value={data?.[5] ? data?.[5] * 100 : 0} precision={2} valueStyle={!data?.[5] ? {} : data?.[5] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>倍：<span><Statistic value={data?.[6] || 0} precision={2} /></span></span>
+                        
+                    </div>
+                }
+                return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
+            }
+        }
+    })
+
+    return [
+        {
+            label: '基本信息',
+            data: [
+                {
+                    title: '日期', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 1,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 2,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用ID', dataIndex: 'iaaAppId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 3,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '账号归属', dataIndex: 'adUnitType', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={AdUnitType_Enum[a as keyof typeof AdUnitType_Enum]} />)
+                },
+                {
+                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 4,
+                    render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
+                },
+                {
+                    title: '应用类型', dataIndex: 'appType', label: '基本信息', align: 'center', width: 80, default: 5,
+                    render: (a: string) => (<WidthEllipsis value={APPTYPE[a as keyof typeof APPTYPE]?.text} />)
+                },
+                {
+                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 6, sorter: true,
+                    className: 'padding_0',
+                    render: (a: number) => <div style={{ height: 162, position: 'relative' }}>
+                        <Progress
+                            strokeColor={{
+                                from: '#ff5900',
+                                to: '#ffd380',
+                            }}
+                            status="active"
+                            showInfo={false}
+                            percent={a ? a / 20000 * 100 : 0}
+                        />
+                        <span style={{ position: 'absolute', left: '50%', top: '50%', width: '100%', padding: '0 5px', transform: 'translate(-50%, -50%)' }}><Statistic value={a || 0} precision={2} valueStyle={a >= 20000 ? { color: '#000', fontWeight: 'bold' } : { fontWeight: 'bold' }} /></span>
+                    </div>
+                },
+                {
+                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '基本信息', align: 'right', width: 110, default: 7, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现人数', dataIndex: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 110, default: 8, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现arpu', dataIndex: 'arpu', label: '基本信息', align: 'center', width: 110, default: 9, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现arppu', dataIndex: 'arppu', label: '基本信息', align: 'center', width: 120, default: 10, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现金额', dataIndex: 'appAdPayingAmount', label: '基本信息', align: 'center', width: 110, default: 11, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现roi', dataIndex: 'appAdPayingRoi', label: '基本信息', align: 'center', width: 105, default: 12, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+
+                {
+                    title: '注册人数', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 13, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                ...trend
+            ]
+        }
+    ]
+}
+
+export default columns12

src/pages/iaaData/novel/tencent/pitcherAdRevenue/index.less

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

src/pages/iaaData/novel/tencent/pitcherAdRevenue/index.tsx

@@ -0,0 +1,102 @@
+import { GetAppTrendListProps, getNovelPitcherAdRevenueTrendTotalApi, getNovelPitcherPayTrendApi } from "@/services/iaaData";
+import React, { useEffect, useState } from "react"
+import { useModel } from "umi";
+import moment from "moment";
+import { useAjax } from "@/Hook/useAjax";
+import TablePro from "@/components/TablePro";
+import QueryForm from "@/components/QueryForm";
+import columns12 from "./tableConfig";
+
+/**
+ * 投手广告变现收益
+ * @returns 
+ */
+const AppAdRevenue: React.FC = () => {
+
+    /****************************************/
+    const { initialState } = useModel('@@initialState');
+    const [queryForm, setQueryForm] = useState<GetAppTrendListProps>({
+        pageNum: 1,
+        pageSize: 30,
+        costDayBegin: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+        costDayEnd: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getNovelPitcherPayTrend = useAjax((params) => getNovelPitcherPayTrendApi(params))
+    const getNovelPitcherAdRevenueTrendTotal = useAjax((params) => getNovelPitcherAdRevenueTrendTotalApi(params))
+    /****************************************/
+
+    useEffect(() => {
+        if (initialState?.iaaApp?.length && initialState?.productType) {
+            getNovelPitcherPayTrend.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType })
+            getNovelPitcherAdRevenueTrendTotal.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType }).then((res: { data: { id: number; dt: string, costDayBegin: string } }) => {
+                if (res?.data) {
+                    let data = res?.data
+                    data.id = 1
+                    data.costDayBegin = queryForm?.costDayBegin || moment().format('YYYY-MM-DD')
+                    data.dt = '总计'
+                    setTotalData([data])
+                } else {
+                    setTotalData([{ id: 1, dt: '总计' }])
+                }
+            })
+        } else {
+            setTotalData([{ id: 1, dt: '总计' }])
+            getNovelPitcherPayTrend.mutate({ data: undefined })
+        }
+    }, [queryForm, initialState?.iaaApp, initialState?.productType])
+
+    return <div>
+        <TablePro
+            leftChild={<QueryForm
+                initialValues={{ day1: [moment().subtract(1, 'days'), moment().subtract(1, 'days')] }}
+                day1={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
+                isPutUserIdList
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { day1, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (day1 && day1?.length === 2) {
+                        newQueryForm['costDayBegin'] = moment(day1[0]).format('YYYY-MM-DD')
+                        newQueryForm['costDayEnd'] = moment(day1[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['costDayBegin']
+                        delete newQueryForm['costDayEnd']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+            />}
+            isZj
+            totalData={totalData}
+            config={columns12()}
+            configName={'投手广告变现收益'}
+            fixed={{ left: 4, right: 0 }}
+            scroll={{ x: 1000, y: 620 }}
+            title='投手广告变现收益'
+            loading={getNovelPitcherPayTrend.loading}
+            ajax={getNovelPitcherPayTrend}
+            page={getNovelPitcherPayTrend?.data?.data?.current || 1}
+            pageSize={getNovelPitcherPayTrend?.data?.data?.size || 20}
+            total={getNovelPitcherPayTrend?.data?.data?.total || 0}
+            dataSource={getNovelPitcherPayTrend?.data?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + (index + '')) }))}
+            onChange={(pagination: any, _: any, sortData: any) => {
+                let { current, pageSize } = pagination
+                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                if (sortData && sortData?.order) {
+                    newQueryForm['sortAsc'] = sortData?.order === 'ascend' ? true : false
+                    newQueryForm['sortFiled'] = sortData?.field
+                } else {
+                    delete newQueryForm['sortAsc']
+                    delete newQueryForm['sortFiled']
+                }
+                newQueryForm.pageNum = current || newQueryForm.pageNum
+                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                setQueryForm({ ...newQueryForm })
+            }}
+        />
+    </div>
+}
+
+export default AppAdRevenue

src/pages/iaaData/novel/tencent/pitcherAdRevenue/tableConfig.tsx

@@ -0,0 +1,128 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Progress, Statistic } from "antd"
+import React from "react"
+import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
+import { APPTYPE } from "@/pages/iaaSystem/manage/const"
+
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+
+    return [
+        {
+            label: '基本信息',
+            data: [
+                {
+                    title: '日期', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 1,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 2,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用ID', dataIndex: 'iaaAppId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 3,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '账号归属', dataIndex: 'adUnitType', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={AdUnitType_Enum[a as keyof typeof AdUnitType_Enum]} />)
+                },
+                {
+                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 4,
+                    render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
+                },
+                {
+                    title: '应用类型', dataIndex: 'appType', label: '基本信息', align: 'center', width: 80, default: 5,
+                    render: (a: string) => (<WidthEllipsis value={APPTYPE[a as keyof typeof APPTYPE]?.text} />)
+                },
+                {
+                    title: '投手名称', dataIndex: 'pitcherName', label: '基本信息', align: 'center', width: 80, default: 5,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 6, sorter: true,
+                    className: 'padding_0',
+                    render: (a: number) => <div style={{ height: 30, position: 'relative' }}>
+                        <Progress
+                            strokeColor={{
+                                from: '#ff5900',
+                                to: '#ffd380',
+                            }}
+                            status="active"
+                            showInfo={false}
+                            percent={a ? a / 20000 * 100 : 0}
+                        />
+                        <span style={{ position: 'absolute', left: '50%', top: '50%', width: '100%', padding: '0 5px', transform: 'translate(-50%, -50%)' }}><Statistic value={a || 0} precision={2} valueStyle={a >= 20000 ? { color: '#000', fontWeight: 'bold' } : { fontWeight: 'bold' }} /></span>
+                    </div>
+                },
+                {
+                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '基本信息', align: 'right', width: 110, default: 7, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现人数', dataIndex: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 110, default: 8, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现arpu', dataIndex: 'arpu', label: '基本信息', align: 'center', width: 110, default: 9, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现arppu', dataIndex: 'arppu', label: '基本信息', align: 'center', width: 120, default: 10, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现金额', dataIndex: 'appAdPayingAmount', label: '基本信息', align: 'center', width: 110, default: 11, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现roi', dataIndex: 'appAdPayingRoi', label: '基本信息', align: 'center', width: 105, default: 12, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+
+                {
+                    title: '注册人数', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 13, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu1', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 14, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu2', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 15, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu3', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 16, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu4', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 17, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu5', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 18, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu6', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 19, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'arppu7', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 20, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+            ]
+        }
+    ]
+}
+
+export default columns12

src/pages/iaaData/novel/tencent/pitcherPayTrend/index.less

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

src/pages/iaaData/novel/tencent/pitcherPayTrend/index.tsx

@@ -0,0 +1,102 @@
+import { GetAppTrendListProps, getNovelPitcherPayTrendApi, getNovelPitcherPayTrendTotalApi } from "@/services/iaaData";
+import React, { useEffect, useState } from "react"
+import { useModel } from "umi";
+import moment from "moment";
+import { useAjax } from "@/Hook/useAjax";
+import TablePro from "@/components/TablePro";
+import QueryForm from "@/components/QueryForm";
+import columns12 from "./tableConfig";
+
+/**
+ * 投手付费趋势
+ * @returns 
+ */
+const AppPayTrend: React.FC = () => {
+
+    /****************************************/
+    const { initialState } = useModel('@@initialState');
+    const [queryForm, setQueryForm] = useState<GetAppTrendListProps>({
+        pageNum: 1,
+        pageSize: 30,
+        costDayBegin: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+        costDayEnd: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getNovelPitcherPayTrend = useAjax((params) => getNovelPitcherPayTrendApi(params))
+    const getNovelPitcherPayTrendTotal = useAjax((params) => getNovelPitcherPayTrendTotalApi(params))
+    /****************************************/
+
+    useEffect(() => {
+        if (initialState?.iaaApp?.length && initialState?.productType) {
+            getNovelPitcherPayTrend.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType })
+            getNovelPitcherPayTrendTotal.run({ ...queryForm, appId: initialState.iaaApp, productType: initialState.productType }).then((res: { data: { id: number; dt: string, costDayBegin: string } }) => {
+                if (res?.data) {
+                    let data = res?.data
+                    data.id = 1
+                    data.costDayBegin = queryForm?.costDayBegin || moment().format('YYYY-MM-DD')
+                    data.dt = '总计'
+                    setTotalData([data])
+                } else {
+                    setTotalData([{ id: 1, dt: '总计' }])
+                }
+            })
+        } else {
+            setTotalData([{ id: 1, dt: '总计' }])
+            getNovelPitcherPayTrend.mutate({ data: undefined })
+        }
+    }, [queryForm, initialState?.iaaApp, initialState?.productType])
+
+    return <div>
+        <TablePro
+            leftChild={<QueryForm
+                initialValues={{ day1: [moment().subtract(1, 'days'), moment().subtract(1, 'days')] }}
+                day1={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
+                isPutUserIdList
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { day1, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    if (day1 && day1?.length === 2) {
+                        newQueryForm['costDayBegin'] = moment(day1[0]).format('YYYY-MM-DD')
+                        newQueryForm['costDayEnd'] = moment(day1[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm['costDayBegin']
+                        delete newQueryForm['costDayEnd']
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+            />}
+            isZj
+            totalData={totalData}
+            config={columns12()}
+            configName={'投手付费趋势'}
+            fixed={{ left: 4, right: 0 }}
+            scroll={{ x: 1000, y: 620 }}
+            title='投手付费趋势'
+            loading={getNovelPitcherPayTrend.loading}
+            ajax={getNovelPitcherPayTrend}
+            page={getNovelPitcherPayTrend?.data?.data?.current || 1}
+            pageSize={getNovelPitcherPayTrend?.data?.data?.size || 20}
+            total={getNovelPitcherPayTrend?.data?.data?.total || 0}
+            dataSource={getNovelPitcherPayTrend?.data?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + (index + '')) }))}
+            onChange={(pagination: any, _: any, sortData: any) => {
+                let { current, pageSize } = pagination
+                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                if (sortData && sortData?.order) {
+                    newQueryForm['sortAsc'] = sortData?.order === 'ascend' ? true : false
+                    newQueryForm['sortFiled'] = sortData?.field
+                } else {
+                    delete newQueryForm['sortAsc']
+                    delete newQueryForm['sortFiled']
+                }
+                newQueryForm.pageNum = current || newQueryForm.pageNum
+                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                setQueryForm({ ...newQueryForm })
+            }}
+        />
+    </div>
+}
+
+export default AppPayTrend

src/pages/iaaData/novel/tencent/pitcherPayTrend/tableConfig.tsx

@@ -0,0 +1,129 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Progress, Statistic } from "antd"
+import React from "react"
+import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
+import style from './index.less'
+import moment from "moment"
+import { ACCOUNTTYPE, APPTYPE } from "@/pages/iaaSystem/manage/const"
+
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+    const defaultIndex = 23
+    const trend = [1, 2, 3, 4, 5, 6, 7, 14, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 365].map((index, count) => {
+
+        const dataIndex = `da${index}`
+        return {
+            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count, width: 150,
+            render: (_: any, b: any) => {
+                if (moment().subtract(1, 'days') >= moment(b.dt === '总计' ? b.costDayBegin : b.dt).add(index - 1, 'days')) {
+                    const data = b?.[dataIndex]?.split('/')
+                    console.log(data)
+                    return <div className={style.dbox} style={{ height: 160 }}>
+                        <span style={{ color: '#F44336', fontWeight: 600, display: 'flex' }}>变现人数：<span><Statistic value={data?.[0] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#FF9800', fontWeight: 600, display: 'flex' }}>变现次数：<span><Statistic value={data?.[1] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>新增收入：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#0f538a', fontWeight: 600, display: 'flex' }}>累计收入：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
+                        <span style={{ color: '#9C27B0', fontWeight: 600, display: 'flex' }}>arpu：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
+                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, display: 'flex' }}>增：<span><Statistic value={data?.[4] ? data?.[4] * 100 : 0} precision={2} valueStyle={!data?.[4] ? {} : data?.[4] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                        <span style={{ color: '#ff5722', fontWeight: 600, display: 'flex' }}>回：<span><Statistic value={data?.[5] ? data?.[5] * 100 : 0} precision={2} valueStyle={!data?.[5] ? {} : data?.[5] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>倍：<span><Statistic value={data?.[6] || 0} precision={2} /></span></span>
+
+                    </div>
+                }
+                return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
+            }
+        }
+    })
+
+    return [
+        {
+            label: '基本信息',
+            data: [
+                {
+                    title: '日期', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 1,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 2,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '应用ID', dataIndex: 'iaaAppId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 3,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '账号归属', dataIndex: 'adUnitType', label: '基本信息', align: 'center', width: 80,
+                    render: (a: string) => (<WidthEllipsis value={AdUnitType_Enum[a as keyof typeof AdUnitType_Enum]} />)
+                },
+                {
+                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 4,
+                    render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
+                },
+                {
+                    title: '应用类型', dataIndex: 'appType', label: '基本信息', align: 'center', width: 80, default: 5,
+                    render: (a: string) => (<WidthEllipsis value={APPTYPE[a as keyof typeof APPTYPE]?.text} />)
+                },
+                {
+                    title: '投手名称', dataIndex: 'pitcherName', label: '基本信息', align: 'center', width: 80, default: 6,
+                    render: (a: string) =>  (<WidthEllipsis value={a} />)
+                },
+                {
+                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 7, sorter: true,
+                    className: 'padding_0',
+                    render: (a: number) => <div style={{ height: 162, position: 'relative' }}>
+                        <Progress
+                            strokeColor={{
+                                from: '#ff5900',
+                                to: '#ffd380',
+                            }}
+                            status="active"
+                            showInfo={false}
+                            percent={a ? a / 20000 * 100 : 0}
+                        />
+                        <span style={{ position: 'absolute', left: '50%', top: '50%', width: '100%', padding: '0 5px', transform: 'translate(-50%, -50%)' }}><Statistic value={a || 0} precision={2} valueStyle={a >= 20000 ? { color: '#000', fontWeight: 'bold' } : { fontWeight: 'bold' }} /></span>
+                    </div>
+                },
+                {
+                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '基本信息', align: 'right', width: 110, default: 8, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现人数', dataIndex: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 110, default: 9, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现arpu', dataIndex: 'arpu', label: '基本信息', align: 'center', width: 110, default: 10, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现arppu', dataIndex: 'arppu', label: '基本信息', align: 'center', width: 120, default: 11, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现金额', dataIndex: 'appAdPayingAmount', label: '基本信息', align: 'center', width: 110, default: 12, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现roi', dataIndex: 'appAdPayingRoi', label: '基本信息', align: 'center', width: 105, default: 13, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+
+                {
+                    title: '注册人数', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 14, sorter: true,
+                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
+                },
+                ...trend
+            ]
+        }
+    ]
+}
+
+export default columns12

src/services/iaaData/index.ts

@@ -739,4 +739,64 @@ export async function getHomePageApi(data: HomePageProps) {
         method: 'POST',
         data
     });
-}
+}
+
+
+/**
+ * 小说应用付费趋势/广告变现收益 - 腾讯
+ * */ 
+
+export async function getNovelAppPayTrendApi(data: HomePageProps) {
+    return request(wapi + `/monitor/novel/app/cost/trend/listOfPage`, {
+        method: 'POST',
+        data
+    });
+}
+/**
+ * 小说应用付费趋势汇总 - 腾讯
+ * */ 
+export async function getNovelAppPayTrendTotalApi(data: HomePageProps) {
+    return request(wapi + `/monitor/novel/app/cost/trend/da/total`, {
+        method: 'POST',
+        data
+    });
+}
+/**
+ * 小说应用广告变现收益汇总 - 腾讯
+ * */ 
+
+export async function getNovelAppAdRevenueTrendTotalApi(data: HomePageProps) {
+    return request(wapi + `/monitor/novel/app/cost/trend/ad/total`, {
+        method: 'POST',
+        data
+    });
+}
+
+/**
+ * 小说投手付费趋势/广告变现收益 - 腾讯
+ * */ 
+export async function getNovelPitcherPayTrendApi(data: GetNovelPutUserGroupListProps) {
+    return request(wapi + `/monitor/novel/pitcher/cost/trend/listOfPage`, {
+        method: 'POST',
+        data
+    });
+}
+/**
+ * 小说投手付费趋势汇总 - 腾讯
+ * */ 
+export async function getNovelPitcherPayTrendTotalApi(data: GetNovelPutUserGroupListProps) {
+    return request(wapi + `/monitor/novel/pitcher/cost/trend/da/total`, {
+        method: 'POST',
+        data
+    });
+}
+
+/**
+ * 小说投手广告变现收益汇总 - 腾讯
+ * */
+export async function getNovelPitcherAdRevenueTrendTotalApi(data: GetNovelPutUserGroupListProps) {
+    return request(wapi + `/monitor/novel/pitcher/cost/trend/ad/total`, {
+        method: 'POST',
+        data
+    });
+}