|
@@ -1,6 +1,6 @@
|
|
import { gameClassifyEnum } from "@/components/QueryForm/const"
|
|
import { gameClassifyEnum } from "@/components/QueryForm/const"
|
|
import WidthEllipsis from "@/components/widthEllipsis"
|
|
import WidthEllipsis from "@/components/widthEllipsis"
|
|
-import { Statistic } from "antd"
|
|
|
|
|
|
+import { Statistic, Tooltip } from "antd"
|
|
import React from "react"
|
|
import React from "react"
|
|
import moment from "moment"
|
|
import moment from "moment"
|
|
import style from './index.less'
|
|
import style from './index.less'
|
|
@@ -118,6 +118,128 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
|
|
}
|
|
}
|
|
return '--'
|
|
return '--'
|
|
},
|
|
},
|
|
|
|
+ }, {
|
|
|
|
+ title: `留存`,
|
|
|
|
+ dataIndex: field,
|
|
|
|
+ key: 'retained',
|
|
|
|
+ align: "center",
|
|
|
|
+ width: 125,
|
|
|
|
+ render: (a: any, b: any) => {
|
|
|
|
+ let date1 = moment()
|
|
|
|
+ if (b?.gameName === '总计') {
|
|
|
|
+ if (b?.dt) {
|
|
|
|
+ date1 = moment(b?.dt)
|
|
|
|
+ } else {
|
|
|
|
+ date1 = moment()
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ date1 = moment(b.dt)
|
|
|
|
+ }
|
|
|
|
+ let dt = moment()
|
|
|
|
+ let day = dt.diff(date1, 'day');
|
|
|
|
+ if (index < 1 && b?.gameName === '暗影防线H5') {
|
|
|
|
+ console.log('========', index, day)
|
|
|
|
+ }
|
|
|
|
+ if (index <= day) {
|
|
|
|
+ let data: any = {}
|
|
|
|
+ switch (b?.activeTypes) {
|
|
|
|
+ case 'reg':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数:<span>{data?.activeNum}</span></span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率:<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ case 'role':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的活跃用户数" placement='left'>
|
|
|
|
+ <span>活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewActiveUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#faad14', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的新增创角用户数" placement='left'>
|
|
|
|
+ <span>新增创角:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的创角用户数" placement='left'>
|
|
|
|
+ <span>累计创角:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#eb2f96', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的老活跃用户数" placement='left'>
|
|
|
|
+ <span>老活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleOldActiveUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="创角留存率" placement='left'>
|
|
|
|
+ <span>留存率:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ case 'amount':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的活跃用户数" placement='left'>
|
|
|
|
+ <span>活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newActiveUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#faad14', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的新增付费用户" placement='left'>
|
|
|
|
+ <span>新增付费:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newUserAmountNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的付费用户数" placement='left'>
|
|
|
|
+ <span>付费人数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newUserTotalAmountNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#eb2f96', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的老活跃用户数" placement='left'>
|
|
|
|
+ <span>老活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.oldActiveUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="付费留存率" placement='left'>
|
|
|
|
+ <span>留存率:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ default:
|
|
|
|
+ return '--'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ }
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
data['default'] = defaultStart + index
|
|
data['default'] = defaultStart + index
|
|
@@ -210,6 +332,125 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
|
|
}
|
|
}
|
|
return '--'
|
|
return '--'
|
|
},
|
|
},
|
|
|
|
+ },{
|
|
|
|
+ title: `留存`,
|
|
|
|
+ dataIndex: field,
|
|
|
|
+ key: 'retained',
|
|
|
|
+ align: "center",
|
|
|
|
+ width: 125,
|
|
|
|
+ render: (a: any, b: any) => {
|
|
|
|
+ let date1 = moment()
|
|
|
|
+ if (b?.gameName === '总计') {
|
|
|
|
+ if (b?.dt) {
|
|
|
|
+ date1 = moment(b?.dt)
|
|
|
|
+ } else {
|
|
|
|
+ date1 = moment()
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ date1 = moment(b.dt)
|
|
|
|
+ }
|
|
|
|
+ let dt = moment()
|
|
|
|
+ let day = dt.diff(date1, 'day');
|
|
|
|
+ if (item * 30 <= day) {
|
|
|
|
+ let data: any = {}
|
|
|
|
+ switch (b?.activeTypes) {
|
|
|
|
+ case 'reg':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数:<span>{data?.activeNum}</span></span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率:<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ case 'role':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的活跃用户数" placement='left'>
|
|
|
|
+ <span>活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewActiveUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#faad14', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的新增创角用户数" placement='left'>
|
|
|
|
+ <span>新增创角:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的创角用户数" placement='left'>
|
|
|
|
+ <span>累计创角:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleNewUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#eb2f96', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的老活跃用户数" placement='left'>
|
|
|
|
+ <span>老活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.roleOldActiveUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="创角留存率" placement='left'>
|
|
|
|
+ <span>留存率:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ case 'amount':
|
|
|
|
+ if (b?.[field]) {
|
|
|
|
+ data = b?.[field]
|
|
|
|
+ return <div>
|
|
|
|
+ <div className={style.dbox}>
|
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的活跃用户数" placement='left'>
|
|
|
|
+ <span>活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newActiveUserTotalNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#faad14', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的新增付费用户" placement='left'>
|
|
|
|
+ <span>新增付费:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newUserAmountNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="累计到第N天的付费用户数" placement='left'>
|
|
|
|
+ <span>付费人数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.newUserTotalAmountNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: '#eb2f96', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="第N天的老活跃用户数" placement='left'>
|
|
|
|
+ <span>老活跃数:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{data?.oldActiveUserNum}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
|
|
|
|
+ <Tooltip title="付费留存率" placement='left'>
|
|
|
|
+ <span>留存率:</span>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ default:
|
|
|
|
+ return '--'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ return '--'
|
|
|
|
+ }
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
data['default'] = defaultStartM + index
|
|
data['default'] = defaultStartM + index
|
|
@@ -352,37 +593,37 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
|
|
]
|
|
]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- fieldSHow: {
|
|
|
|
- label: 'D1~Dn区间字段展示',
|
|
|
|
- saveField: 'date_field',
|
|
|
|
- defaultValue: [ // 默认展示字段
|
|
|
|
- { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
|
|
|
|
- { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
|
|
|
|
- { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
|
|
|
|
- { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
|
|
|
|
- { label: '付费金额', key: 'amount', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服(付费金额)占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
|
|
|
|
- ],
|
|
|
|
- data: [
|
|
|
|
- {
|
|
|
|
- label: 'D1~Dn',
|
|
|
|
- data: [
|
|
|
|
- { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
|
|
|
|
- { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
|
|
|
|
- { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
|
|
|
|
- { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
|
|
|
|
- { label: '付费金额', key: 'amount', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
|
|
|
|
- { label: '滚服(付费金额)占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- },
|
|
|
|
|
|
+ // fieldSHow: {
|
|
|
|
+ // label: 'D1~Dn区间字段展示',
|
|
|
|
+ // saveField: 'date_field',
|
|
|
|
+ // defaultValue: [ // 默认展示字段
|
|
|
|
+ // { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '付费金额', key: 'amount', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服(付费金额)占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
|
|
|
|
+ // ],
|
|
|
|
+ // data: [
|
|
|
|
+ // {
|
|
|
|
+ // label: 'D1~Dn',
|
|
|
|
+ // data: [
|
|
|
|
+ // { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '付费金额', key: 'amount', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
|
|
|
|
+ // { label: '滚服(付费金额)占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
|
|
|
|
+ // ]
|
|
|
|
+ // }
|
|
|
|
+ // ]
|
|
|
|
+ // },
|
|
label: 'D1~Dn',
|
|
label: 'D1~Dn',
|
|
data: [
|
|
data: [
|
|
...day,
|
|
...day,
|