fix

config/routerConfig.ts

@@ -147,6 +147,12 @@ const iaaData = {
                     access: 'appEveryDayData',
                     component: './iaaData/tencentIaa/appEveryDayData',
                 },
+                {
+                    path: '/iaaData/tencentIaa/appCashTrend',
+                    name: '应用变现趋势',
+                    access: 'appCashTrend',
+                    component: './iaaData/tencentIaa/appCashTrend',
+                },
                 {
                     path: '/iaaData/tencentIaa/pitcherEveryDay',
                     name: '投手每日数据',

src/pages/iaaData/tencentIaa/appCashTrend/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/tencentIaa/appCashTrend/index.tsx

@@ -0,0 +1,98 @@
+import { getAppTrendListApi, GetAppTrendListProps, getAppTrendTotalApi } 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 AppCashTrend: React.FC = () => {
+
+    /****************************************/
+    const { initialState } = useModel('@@initialState');
+    const [queryForm, setQueryForm] = useState<GetAppTrendListProps>({
+        pageNum: 1,
+        pageSize: 30,
+        costDayBegin: moment().format('YYYY-MM-DD'),
+        costDayEnd: moment().format('YYYY-MM-DD'),
+    })
+    const [totalData, setTotalData] = useState<any[]>([])
+
+    const getAppTrendList = useAjax((params) => getAppTrendListApi(params))
+    const getAppTrendTotal = useAjax((params) => getAppTrendTotalApi(params))
+    /****************************************/
+
+    useEffect(() => {
+        if (initialState?.iaaApp) {
+            const [appId, productType] = initialState.iaaApp.split('||')
+            getAppTrendList.run({ ...queryForm, appId, productType })
+            getAppTrendTotal.run({ ...queryForm, appId, productType }).then((res: { data: { id: number; dt: string } }) => {
+                if (res?.data) {
+                    let data = res?.data
+                    data.id = 1
+                    data.dt = '总计'
+                    setTotalData([data])
+                } else {
+                    setTotalData([{ id: 1, dt: '总计' }])
+                }
+            })
+        }
+
+    }, [queryForm, initialState?.iaaApp])
+
+    return <div>
+        <TablePro
+            leftChild={<QueryForm
+                initialValues={{ day1: [moment(), moment()] }}
+                day1={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
+                onChange={(data: any) => {
+                    console.log(data)
+                    const { day1, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    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={getAppTrendList.loading}
+            ajax={getAppTrendList}
+            page={getAppTrendList?.data?.data?.current || 1}
+            pageSize={getAppTrendList?.data?.data?.size || 20}
+            total={getAppTrendList?.data?.data?.total || 0}
+            dataSource={getAppTrendList?.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 AppCashTrend

src/pages/iaaData/tencentIaa/appCashTrend/tableConfig.tsx

@@ -0,0 +1,193 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { Statistic } from "antd"
+import React from "react"
+import { PRODUCT_TYPE_ENUM } from "../../const"
+import { formatSecondsToTime } from "@/utils/utils"
+import style from './index.less'
+
+
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
+
+    const defaultIndex = 26
+    const trend = [1, 2, 3, 4, 5, 6, 7, 14, 30, 45, 60, 75, 90].map((index, count) => {
+
+        const dataIndex = `d${index + 1}`
+        return {
+            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count,
+            children: [
+                {
+                    title: '留存',
+                    dataIndex: `trend${index}`,
+                    key: `trend${index}`,
+                    width: 100,
+                    align: 'center',
+                    className: count % 2 ? "redColorClass" : undefined,
+                    render: (_: any, b: any) => {
+                        const data = b?.[dataIndex]?.split('/')
+                        return <div className={style.dbox}>
+                            <span style={{ color: '#d81b60', fontWeight: 600 }}>人数：<span><Statistic value={data?.[0] || 0} /></span></span>
+                            <span style={{ color: '#0f538a', fontWeight: 600 }}>率：<span><Statistic value={data?.[1] ? data?.[1] * 100 : 0} precision={2} valueStyle={!data?.[1] ? {} : data?.[1] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                        </div>
+                    },
+                },
+                {
+                    title: '收入',
+                    dataIndex: `income${index}`,
+                    key: `income${index}`,
+                    width: 110,
+                    align: 'center',
+                    className: count % 2 ? "redColorClass" : undefined,
+                    render: (_: any, b: any) => {
+                        const data = b?.[dataIndex]?.split('/')
+                        return <div className={style.dbox}>
+                            <span style={{ color: '#d81b60', fontWeight: 600 }}>新增：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
+                            <span style={{ color: '#0f538a', fontWeight: 600 }}>累计：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
+                        </div>
+                    }
+                },
+                {
+                    title: 'ROI',
+                    dataIndex: `roi${index}`,
+                    key: `roi${index}`,
+                    width: 100,
+                    align: 'center',
+                    className: count % 2 ? "redColorClass" : undefined,
+                    render: (_: any, b: any) => {
+                        const data = b?.[dataIndex]?.split('/')
+                        return <div className={style.dbox}>
+                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<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: '#ff5722', fontWeight: 600 }}>回：<span><Statistic value={data?.[6] ? data?.[6] * 100 : 0} precision={2} valueStyle={!data?.[6] ? {} : data?.[6] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
+                            <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
+                        </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: 'appId', 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: '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: 'realizationAdUnit', label: '基本信息', align: 'center', width: 90, default: 5,
+                //     render: (a: string) => <WidthEllipsis value={a} />
+                // },
+                {
+                    title: '总消耗', dataIndex: 'totalCost', label: '基本信息', align: 'right', width: 95, default: 6, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} style={{ fontWeight: 'bold' }} precision={2} />
+                },
+                {
+                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 85, default: 7, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} style={{ fontWeight: 'bold' }} precision={2} />
+                },
+                {
+                    title: '赔付金', dataIndex: 'payout', label: '基本信息', align: 'right', width: 80, default: 8, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '注册人数', dataIndex: 'userRegCnt', label: '基本信息', align: 'center', width: 80, default: 9, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '注册成本', dataIndex: 'regPaid', label: '基本信息', align: 'center', width: 80, default: 10, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '注册用户留存人数', dataIndex: 'userRetentionCnt', label: '基本信息', align: 'center', width: 80, default: 11, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '注册用户留存率', dataIndex: 'userRetentionRatio', label: '基本信息', align: 'center', width: 80, 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: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 75, default: 13, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '人均在线时长', dataIndex: 'avgDuration', label: '基本信息', align: 'center', width: 110, default: 14, sorter: true,
+                    render: (a: number) => {
+                        return formatSecondsToTime(a ? Math.round(a) : 0)
+                    }
+                },
+                {
+                    title: '人均启动次数', dataIndex: 'avgStartTimes', label: '基本信息', align: 'center', width: 70, default: 15, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '人均观看广告次数', dataIndex: 'avgAdViewTimes', label: '基本信息', align: 'center', width: 80, default: 16, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '广告变现UV', dataIndex: 'adMonetizeUv', label: '基本信息', align: 'center', width: 75, default: 17, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: 'ecpm', dataIndex: 'ecpm', label: '基本信息', align: 'center', width: 80, default: 18, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告渗透率', dataIndex: 'adPermeability', label: '基本信息', align: 'center', width: 75, default: 19, sorter: true,
+                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
+                },
+                {
+                    title: '广告ARPU', dataIndex: 'adArpu', label: '基本信息', align: 'center', width: 80, default: 20, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告曝光量', tips: '总收入/ecpm*1000', dataIndex: 'adViewCount', label: '基本信息', align: 'center', width: 80, default: 21, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '总收入', dataIndex: 'income', label: '基本信息', align: 'right', width: 80, default: 22, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '总回收', dataIndex: 'incomeRoi', label: '基本信息', align: 'right', width: 80, default: 23, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '广告变现收入', dataIndex: 'adIncome', label: '基本信息', align: 'center', width: 75, default: 24, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} precision={2} />
+                },
+                {
+                    title: '分享成功人数', dataIndex: 'shareUv', label: '基本信息', align: 'center', width: 75, default: 25, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                {
+                    title: '分享后活跃人数', dataIndex: 'shareClkUv', label: '基本信息', align: 'center', width: 80, default: 26, sorter: true,
+                    render: (a: number) => <Statistic value={a || 0} />
+                },
+                ...trend
+            ]
+        }
+    ]
+}
+
+export default columns12

src/pages/iaaData/tencentIaa/appEveryDayData/tableConfig.tsx

@@ -258,171 +258,171 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
             label: '广告媒体端指标',
             data: [
                 {
-                    title: '点击量', dataIndex: 'validClickCount', label: '广告媒体端指标', align: 'center', width: 65, default: 35, sorter: true, className: 'volcanoColorClass',
+                    title: '点击量', dataIndex: 'validClickCount', label: '广告媒体端指标', align: 'center', width: 65, default: 35, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册人数', dataIndex: 'miniGameRegisterUsers', label: '广告媒体端指标', align: 'center', width: 80, default: 36, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册人数', dataIndex: 'miniGameRegisterUsers', label: '广告媒体端指标', align: 'center', width: 80, default: 36, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册率', dataIndex: 'miniGameRegisterRate', label: '广告媒体端指标', align: 'center', width: 80, default: 37, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册率', dataIndex: 'miniGameRegisterRate', label: '广告媒体端指标', align: 'center', width: 80, default: 37, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册成本', dataIndex: 'miniGameRegisterCost', label: '广告媒体端指标', align: 'center', width: 80, default: 38, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册成本', dataIndex: 'miniGameRegisterCost', label: '广告媒体端指标', align: 'center', width: 80, default: 38, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日变现ARPPU', tips: '注册首日广告变现金额(平台上报)/小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '首日变现ARPPU', tips: '注册首日广告变现金额(平台上报)/小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日变现ARPU', tips: '小游戏注册首日广告变现金额(平台上报)/小游戏注册人数', dataIndex: 'miniGameFirstDayAdPayingArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '首日变现ARPU', tips: '小游戏注册首日广告变现金额(平台上报)/小游戏注册人数', dataIndex: 'miniGameFirstDayAdPayingArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日ROI', tips: '小游戏注册首日广告变现金额(平台上报)/消耗*100%', dataIndex: 'miniGameFirstDayAdPayingRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '首日ROI', tips: '小游戏注册首日广告变现金额(平台上报)/消耗*100%', dataIndex: 'miniGameFirstDayAdPayingRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现ARPU(平台上报)', dataIndex: 'firstDayAdPurArpuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '24小时广告变现ARPU(平台上报)', dataIndex: 'firstDayAdPurArpuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现成本', dataIndex: 'firstDayAdPurArpuCost24hPlaCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '24小时广告变现成本', dataIndex: 'firstDayAdPurArpuCost24hPlaCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现ROI', dataIndex: 'firstDayAdPurArpuCost24hPlaRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '24小时广告变现ROI', dataIndex: 'firstDayAdPurArpuCost24hPlaRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ARPPU(平台上报)', dataIndex: 'adPurArppuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '3日广告变现ARPPU(平台上报)', dataIndex: 'adPurArppuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ARPU(平台上报)', dataIndex: 'adPurArpuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '3日广告变现ARPU(平台上报)', dataIndex: 'adPurArpuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现成本(平台上报)', dataIndex: 'adPurDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '3日广告变现成本(平台上报)', dataIndex: 'adPurDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ROI', dataIndex: 'adPurDay3Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '3日广告变现ROI', dataIndex: 'adPurDay3Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册7日广告变现金额(平台上报)', dataIndex: 'miniGameRegD7Amount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏注册7日广告变现金额(平台上报)', dataIndex: 'miniGameRegD7Amount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ARPPU(平台上报)', dataIndex: 'miniGameRegD7Arppu', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '7日广告变现ARPPU(平台上报)', dataIndex: 'miniGameRegD7Arppu', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ARPU(平台上报)', dataIndex: 'miniGameRegD7Arpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '7日广告变现ARPU(平台上报)', dataIndex: 'miniGameRegD7Arpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现成本（平台上报', dataIndex: 'miniGameRegD7Cost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '7日广告变现成本（平台上报', dataIndex: 'miniGameRegD7Cost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ROI', dataIndex: 'miniGameRegD7Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '7日广告变现ROI', dataIndex: 'miniGameRegD7Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
+                    title: '小游戏广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现ARPPU(平台上报)', dataIndex: 'miniGameAdMonetizationArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '广告变现ARPPU(平台上报)', dataIndex: 'miniGameAdMonetizationArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
+                    title: '广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现总ROI', dataIndex: 'miniGameAdMonetizationRoi', label: '广告媒体端指标', align: 'center', width: 80, default: 39, sorter: true, className: 'volcanoColorClass',
+                    title: '广告变现总ROI', dataIndex: 'miniGameAdMonetizationRoi', label: '广告媒体端指标', align: 'center', width: 80, default: 39, sorter: true, className: 'purple1ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 }
             ]

src/services/iaaData/index.ts

@@ -125,6 +125,34 @@ export async function getAppTxEveryDayTotalApi(data: GetAppTxEveryDayListProps)
     });
 }
 
+export interface GetAppTrendListProps extends Paging, SortProps{
+    costDayBegin?: string
+    costDayEnd?: string
+}
+
+/**
+ * 应用变现趋势
+ * @param data 
+ * @returns 
+ */
+export async function getAppTrendListApi(data: GetAppTrendListProps) {
+    return request(wapi + `/monitor/app/trend/listOfPage`, {
+        method: 'POST',
+        data
+    });
+}
+
+/**
+ * 应用变现总计
+ * @param data 
+ * @returns 
+ */
+export async function getAppTrendTotalApi(data: GetAppTrendListProps) {
+    return request(wapi + `/monitor/app/trend/total`, {
+        method: 'POST',
+        data
+    });
+}
 
 
 export interface getPutUserTxEveryDayListProps extends Paging, SortProps {