fix

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

@@ -1,12 +1,34 @@
-.dbox{
+.dbox {
     display: flex;
     flex-flow: column;
     align-items: center;
     font-size: 12px;
+
     // padding: 10px;
-    >span{
+    >span {
         display: flex;
         justify-content: left;
         width: 100%;
     }
+}
+
+.newbox {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    font-size: 12px;
+    >span {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%
+    }
+}
+.tipText {
+    display: flex;
+    flex-flow: column;
+    color: #000;
+    >span {
+        white-space: nowrap;
+    }
 }

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

@@ -6,7 +6,23 @@ import { useAjax } from "@/Hook/useAjax";
 import TablePro from "@/components/TablePro";
 import QueryForm from "@/components/QueryForm";
 import columns12 from "./tableConfig";
+import { Popover } from "antd";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import styles from './index.less'
+const tipText = <div className={styles.tipText}>
+    <span>广告变现成本：消耗/广告变现人数</span>
+    <span>广告变现ARPU：广告变现金额/注册人数</span>
+    <span>广告变现ARPPU：广告变现金额/广告变现人数</span>
+    <span>广告变现ROI：广告变现金额/消耗</span>
 
+    <span>Dn：变现人数、变现次数都是每日新增数值指标</span>
+    <span>ARPU：Dn新增变现收入/小程序注册人数</span>
+    <span>ARPPU：Dn新增变现收入/Dn广告变现收入人数</span>
+    <span>价值：当日新增收入/当日新增变现次数</span>
+    <span>增：新增收入/消耗</span>
+    <span>回：累计收入/消耗</span>
+    <span>倍：变现倍数（累计收入/首日变现收入）</span>
+</div>
 /**
  * 应用付费趋势
  * @returns 
@@ -73,7 +89,7 @@ const AppPayTrend: React.FC = () => {
             configName={'应用付费趋势'}
             fixed={{ left: 4, right: 0 }}
             scroll={{ x: 1000, y:620 }}
-            title='应用付费趋势(数据于2025-06-06开始统计)(T+1)'
+            title={<>应用付费趋势(数据于2025-06-06开始统计)(T+1)<Popover   title={<b>指标计算说明</b>} content={tipText}  color={'white'} trigger={["hover"]}><QuestionCircleOutlined style={{ color: "red", cursor: 'pointer' }} /></Popover></>}
             loading={getNovelAppPayTrend.loading}
             ajax={getNovelAppPayTrend}
             page={getNovelAppPayTrend?.data?.data?.current || 1}

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

@@ -13,26 +13,49 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
 
         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: 184 }}>
-                        <span style={{ color: '#F44336', fontWeight: 600, display: 'flex', alignItems: 'center' }}>变现人数：<span><Statistic value={data?.[0] || 0} /></span></span>
-                        <span style={{ color: '#FF9800', fontWeight: 600, display: 'flex', alignItems: 'center' }}>变现次数：<span><Statistic value={data?.[1] || 0} /></span></span>
-                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex', alignItems: 'center' }}>新增收入：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#0f538a', fontWeight: 600, display: 'flex', alignItems: 'center' }}>累计收入：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#9C27B0', fontWeight: 600, display: 'flex', alignItems: 'center' }}>arpu：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#2196F3', fontWeight: 600, display: 'flex', alignItems: 'center' }}>arppu：<span><Statistic value={data?.[8] || 0} precision={2} /></span></span>
-                        {index < 8 && <span style={{ color: '#ed2a78', fontWeight: 600, display: 'flex', alignItems: 'center' }}>价值：<span><Statistic value={data?.[9] || 0} precision={2} /></span></span>}
-                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, display: 'flex', alignItems: 'center' }}>增：<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', alignItems: 'center' }}>回：<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', alignItems: 'center' }}>倍：<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>
-            }
+            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count, width: 300, children: [
+                {
+                    title: "",
+                    key: "left" + index,
+                    width: 150,
+                    align: 'center',
+                    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('/')
+                            return <div className={style.newbox} >
+                                <span style={{ color: '#F44336', fontWeight: 600, }}>变现人数：<span><Statistic value={data?.[0] || 0} /></span></span>
+                                <span style={{ color: '#FF9800', fontWeight: 600, }}>变现次数：<span><Statistic value={data?.[1] || 0} /></span></span>
+                                <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>
+                                {index < 8 && <span style={{ color: '#ed2a78', fontWeight: 600, }}>价值：<span><Statistic value={data?.[9] || 0} precision={2} /></span></span>}
+
+
+                            </div>
+                        }
+                        return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
+                    }
+                },
+                {
+                    title: "",
+                    key: "right" + index,
+                    width: 150,
+                    align: 'center',
+                    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('/')
+                            return <div className={style.newbox}>
+                                <span style={{ color: '#9C27B0', fontWeight: 600, }}>ARPU：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
+                                <span style={{ color: '#2196F3', fontWeight: 600, }}>ARPPU<span><Statistic value={data?.[8] || 0} precision={2} /></span></span>
+                                <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, }}>增：<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, }}>回：<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, }}>倍：<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>
+                    }
+                },
+            ]
         }
     })
 
@@ -75,7 +98,7 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                 {
                     title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 6, sorter: true,
                     className: 'padding_0',
-                    render: (a: number) => <div style={{ height: 186, position: 'relative' }}>
+                    render: (a: number) => <div style={{ height: 107, position: 'relative' }}>
                         <Progress
                             strokeColor={{
                                 from: '#ff5900',

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

@@ -1,12 +1,36 @@
-.dbox{
+.dbox {
     display: flex;
     flex-flow: column;
     align-items: center;
     font-size: 12px;
+
     // padding: 10px;
-    >span{
+    >span {
         display: flex;
         justify-content: left;
         width: 100%;
     }
+}
+
+.newbox {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    font-size: 12px;
+
+    >span {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%
+    }
+}
+
+.tipText {
+    display: flex;
+    flex-flow: column;
+    color: #000;
+    >span {
+        white-space: nowrap;
+    }
 }

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

@@ -6,7 +6,24 @@ import { useAjax } from "@/Hook/useAjax";
 import TablePro from "@/components/TablePro";
 import QueryForm from "@/components/QueryForm";
 import columns12 from "./tableConfig";
+import { Popover } from "antd";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import styles from './index.less'
 
+const tipText = <div className={styles.tipText}>
+    <span>广告变现成本：消耗/广告变现人数</span>
+    <span>广告变现ARPU：广告变现金额/注册人数</span>
+    <span>广告变现ARPPU：广告变现金额/广告变现人数</span>
+    <span>广告变现ROI：广告变现金额/消耗</span>
+
+    <span>Dn：变现人数、变现次数都是每日新增数值指标</span>
+    <span>ARPU：Dn新增变现收入/小程序注册人数</span>
+    <span>ARPPU：Dn新增变现收入/Dn广告变现收入人数</span>
+    <span>价值：当日新增收入/当日新增变现次数</span>
+    <span>增：新增收入/消耗</span>
+    <span>回：累计收入/消耗</span>
+    <span>倍：变现倍数（累计收入/首日变现收入）</span>
+</div>
 /**
  * 投手付费趋势
  * @returns 
@@ -73,8 +90,8 @@ const AppPayTrend: React.FC = () => {
             config={columns12()}
             configName={'投手付费趋势'}
             fixed={{ left: 4, right: 0 }}
-            scroll={{ x: 1000, y: 620 }}
-            title='投手付费趋势(数据于2025-06-06开始统计)(T+1)'
+            scroll={{ x: 1000, y: 620 }} //  列宽自适应 max-content 此值可自动按内容生成宽度，内部无需再设置宽
+            title={<div>投手付费趋势(数据于2025-06-06开始统计)(T+1)<Popover  title={<b>指标计算说明</b>}  content={tipText} color={'white'} trigger={["hover"]}><QuestionCircleOutlined style={{ color: "red", cursor: 'pointer' }} /></Popover></div>}
             loading={getNovelPitcherPayTrend.loading}
             ajax={getNovelPitcherPayTrend}
             page={getNovelPitcherPayTrend?.data?.data?.current || 1}

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

@@ -1,6 +1,6 @@
 import WidthEllipsis from "@/components/widthEllipsis"
 import { Progress, Statistic } from "antd"
-import React from "react"
+import React, { Children } from "react"
 import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
 import style from './index.less'
 import moment from "moment"
@@ -13,27 +13,50 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
 
         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: 184 }}>
-                        <span style={{ color: '#F44336', fontWeight: 600, display: 'flex', alignItems: 'center' }}>变现人数：<span><Statistic value={data?.[0] || 0} /></span></span>
-                        <span style={{ color: '#FF9800', fontWeight: 600, display: 'flex', alignItems: 'center' }}>变现次数：<span><Statistic value={data?.[1] || 0} /></span></span>
-                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex', alignItems: 'center' }}>新增收入：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#0f538a', fontWeight: 600, display: 'flex', alignItems: 'center' }}>累计收入：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#9C27B0', fontWeight: 600, display: 'flex', alignItems: 'center' }}>arpu：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
-                        <span style={{ color: '#2196F3', fontWeight: 600, display: 'flex', alignItems: 'center' }}>arppu：<span><Statistic value={data?.[8] || 0} precision={2} /></span></span>
-                        {index < 8 && <span style={{ color: '#ed2a78', fontWeight: 600, display: 'flex', alignItems: 'center' }}>价值：<span><Statistic value={data?.[9] || 0} precision={2} /></span></span>}
-                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, display: 'flex', alignItems: 'center' }}>增：<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', alignItems: 'center' }}>回：<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', alignItems: 'center' }}>倍：<span><Statistic value={data?.[6] || 0} precision={2} /></span></span>
+            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count, width: 300, children: [
+                {
+                    title: "",
+                    key: "left" + index,
+                    width: 150,
+                    align: 'center',
+                    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('/')
+                            return <div className={` ${style.newbox}`} >
+                                <span style={{ color: '#F44336', fontWeight: 600, }}>变现人数：<span><Statistic value={data?.[0] || 0} /></span></span>
+                                <span style={{ color: '#FF9800', fontWeight: 600, }}>变现次数：<span><Statistic value={data?.[1] || 0} /></span></span>
+                                <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>
+                                {index < 8 && <span style={{ color: '#ed2a78', fontWeight: 600}}>价值：<span><Statistic value={data?.[9] || 0} precision={2} /></span></span>}
+
+
+                            </div>
+                        }
+                        return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
+                    }
+                },
+                {
+                    title: "",
+                    key: "right" + index,
+                    width: 150,
+                    align: 'center',
+                    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('/')
+                            return <div className={style.newbox}>
+                                <span style={{ color: '#9C27B0', fontWeight: 600, }}>ARPU：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
+                                <span style={{ color: '#2196F3', fontWeight: 600, }}>ARPPU<span><Statistic value={data?.[8] || 0} precision={2} /></span></span>
+                                <span style={{ color: 'rgb(12,130,16)', fontWeight: 600,  }}>增：<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,}}>回：<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, }}>倍：<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>
+                    }
+                },
+            ]
 
-                    </div>
-                }
-                return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
-            }
         }
     })
 
@@ -80,7 +103,7 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                 {
                     title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 7, sorter: true,
                     className: 'padding_0',
-                    render: (a: number) => <div style={{ height: 186, position: 'relative' }}>
+                    render: (a: number) => <div style={{ height: 107, position: 'relative' }}>
                         <Progress
                             strokeColor={{
                                 from: '#ff5900',