123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458 |
- import { Statistic } from "antd"
- import React from "react"
- import style from './index.less'
- import { gameClassifyEnum } from "@/components/QueryForm/const"
- function columns12(gameType: any, rechargeTrendHandle: (data: any) => void): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
- let defaultValue = [ // 默认展示字段
- { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
- { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
- { label: '增', key: 'addPayBack', type: '付费趋势' },
- { label: '回', key: 'payBack', type: '付费趋势' },
- { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
- ]
- const getFieldDta = () => {
- let mySelectFieldData = localStorage.getItem('myAdFieldConfig1.0.0_推广每日数据')
- let newSelectFieldData: any = {}
- if (mySelectFieldData) {
- newSelectFieldData = JSON.parse(mySelectFieldData).date_field
- } else {
- newSelectFieldData = defaultValue
- }
- return newSelectFieldData
- }
- return [
- {
- label: '时间',
- data: [
- { title: '日期', dataIndex: 'dt', label: '时间', align: 'center', width: 90, default: 1 },
- ]
- },
- {
- label: '推广账号信息',
- data: [
- {
- title: '推广账号', dataIndex: 'accountId', key: 'accountId', label: '推广账号信息', align: 'center', width: 70, default: 2,
- render: (a: any) => (<span>{a || '--'}</span>)
- },
- {
- title: '投放渠道', dataIndex: 'agentName', key: 'agentName', label: '推广账号信息', align: 'center', width: 130, default: 3,
- render: (a: string, b: any) => (<span>{a || '--'}</span>)
- }
- ]
- },
- {
- label: '业务人员信息',
- data: [
- { title: '投手', dataIndex: 'sysUserName', key: 'sysUserName', label: '业务人员信息', align: 'center', width: 70, default: 4, render: (a: any) => (<span>{a || '--'}</span>) }
- ]
- },
- {
- label: '推广内容信息',
- data: [
- { title: '推广游戏CP名称', dataIndex: 'cpName', key: 'cpName', label: '推广内容信息', align: 'center', width: 70, default: 5, render: (a: any) => (<span>{a || '--'}</span>) },
- { title: '推广游戏名称', dataIndex: 'gameName', key: 'gameName', label: '推广内容信息', align: 'center', width: 70, default: 6, render: (a: any) => (<span>{a || '--'}</span>) },
- {
- title: '推广游戏应用类型', dataIndex: 'gameType', key: 'gameType', label: '推广内容信息', align: 'center', width: 80, default: 7,
- render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
- },
- ]
- },
- {
- label: '消耗',
- data: [
- { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 100, default: 8, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '推广计划数量', dataIndex: 'adPlanCount', key: 'adPlanCount', label: '消耗', align: 'center', width: 70, default: 9, sorter: true, render: (a: any) => (<span>{a || '--'}</span>) }
- ]
- },
- {
- label: '广告曝光数据',
- data: [
- { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 90, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 80, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 80, default: 12, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '转化率', dataIndex: 'convertRate', label: '广告曝光数据', align: 'center', width: 70, default: 13, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '平均转化成本', dataIndex: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 16, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 17, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 18, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, default: 19, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '应用下载开始率', dataIndex: 'appDownloadRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '应用下载完成率', dataIndex: 'downloadFinishRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '应用安装完成率', dataIndex: 'appInstallRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- ]
- },
- {
- label: '用户数据',
- data: [
- { title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- ]
- },
- {
- label: '付费数据',
- data: [
- { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '首日回收率', dataIndex: 'todayRecoveryRate', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '买量回收率', dataIndex: 'buyRecoveryRate', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '3日ROI', dataIndex: 'roiDay3', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '5日ROI', dataIndex: 'roiDay5', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '7日ROI', dataIndex: 'roiDay7', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '30日ROI', dataIndex: 'roiDay30', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '60日ROI', dataIndex: 'roiDay60', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '180日ROI', dataIndex: 'roiDay180', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '1年ROI', dataIndex: 'roiYear1', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '首日付费率', dataIndex: 'firstRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- {
- title: '买量用户付费率', dataIndex: 'buyUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '新用户付费比', dataIndex: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '买量客单价', dataIndex: 'avgBuyUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '账面客单价', dataIndex: 'avgShowUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '首日充值成本', dataIndex: 'firstRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '买量充值成本', dataIndex: 'buyUserRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- {
- title: '复充率', dataIndex: 'repeatRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
- render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
- },
- { title: '新增注册ARPU', dataIndex: 'newRegARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '首日付费ARPU', dataIndex: 'firstRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '当天付费ARPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
- { title: '账面ARPU', dataIndex: 'showRechargeARPU', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> }
- ]
- },
- {
- fieldSHow: {
- label: '日期区间字段展示',
- saveField: 'date_field',
- defaultValue,
- data: [
- {
- label: '付费趋势',
- data: [
- { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
- { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
- { label: '增', key: 'addPayBack', type: '付费趋势' },
- { label: '回', key: 'payBack', type: '付费趋势' },
- { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
- ]
- },
- ]
- },
- label: '时间区间跨度',
- data: [{
- title: "D1",
- dataIndex: "D1",
- label: "时间区间跨度",
- width: 110,
- default: 20,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendDay1) {
- data = b?.rechargeTrendDay1
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "D3",
- dataIndex: "D3",
- label: "时间区间跨度",
- width: 110,
- default: 21,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendDay3) {
- data = b?.rechargeTrendDay3
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "D7",
- dataIndex: "D7",
- label: "时间区间跨度",
- width: 110,
- default: 22,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendDay7) {
- data = b?.rechargeTrendDay7
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "D15",
- dataIndex: "D15",
- label: "时间区间跨度",
- width: 110,
- default: 23,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendDay15) {
- data = b?.rechargeTrendDay15
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "M1",
- dataIndex: "M1",
- label: "时间区间跨度",
- width: 110,
- default: 24,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendMonth1) {
- data = b?.rechargeTrendMonth1
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "M2",
- dataIndex: "M2",
- label: "时间区间跨度",
- width: 110,
- default: 25,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendMonth2) {
- data = b?.rechargeTrendMonth2
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "M3",
- dataIndex: "M3",
- label: "时间区间跨度",
- width: 110,
- default: 26,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendMonth3) {
- data = b?.rechargeTrendMonth3
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }, {
- title: "总",
- default: 27,
- dataIndex: "total",
- label: "时间区间跨度",
- align: "center",
- width: 110,
- render: (a: any, b: any) => {
- let fieldData = getFieldDta()
- if (fieldData?.length > 0) {
- let data: any = {}
- let keyS: string[] = fieldData?.map((item: any) => item.key)
- switch (fieldData[0].type) {
- case '付费趋势':
- if (b?.rechargeTrendTotal) {
- data = b?.rechargeTrendTotal
- return <div className={style.dbox}>
- {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
- {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
- {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
- {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples}</span></span>}
- </div>
- }
- return '--'
- }
- }
- return '--'
- },
- }]
- },
- // {
- // label: '操作',
- // data: [
- // {
- // default: 28,
- // title: '操作', dataIndex: 'cz', label: '操作', align: 'center', width: 70, render: (a: string, b: any) => {
- // return <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a>
- // }
- // },
- // ]
- // },
- ]
- }
- export default columns12
|