|
@@ -0,0 +1,227 @@
|
|
|
+import WidthEllipsis from "@/components/widthEllipsis"
|
|
|
+import { Statistic, Tag } from "antd"
|
|
|
+import React from "react"
|
|
|
+import moment from "moment"
|
|
|
+import style from '../../gameDataStatistics/extensionData/everyday/index.less'
|
|
|
+
|
|
|
+
|
|
|
+function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
|
|
|
+
|
|
|
+
|
|
|
+ let defaultStart = 26
|
|
|
+ const Dn = Array(90).fill('').map((_item: string, index: number) => {
|
|
|
+ let field = `da${index + 1}`
|
|
|
+ let data: any = {
|
|
|
+ title: `D${index + 1}`,
|
|
|
+ dataIndex: `D${index + 1}`,
|
|
|
+ label: "游戏区服数据",
|
|
|
+ width: 140,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let date1 = moment()
|
|
|
+ if (b?.gsName === '总计') {
|
|
|
+ if (b?.beginDay) {
|
|
|
+ date1 = moment(b.beginDay)
|
|
|
+ } else {
|
|
|
+ date1 = moment()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ date1 = moment(b.serveDayBegin)
|
|
|
+ }
|
|
|
+ let dt = moment()
|
|
|
+ let day = dt.diff(date1, 'day');
|
|
|
+ if (index <= day && b?.[field]) {
|
|
|
+ let [count1, count2, count3, count4, count5, count6, count7] = b?.[field]?.split('/')
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ <span style={{ color: '#52c41a', fontWeight: 600 }}>活跃人数:<span>{count1}</span></span>
|
|
|
+ <span style={{ color: '#a0d911', fontWeight: 600 }}>付费人数:<span>{count2}</span></span>
|
|
|
+ <span style={{ color: '#1677ff', fontWeight: 600 }}>付费累计人数:<span>{count3}</span></span>
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>付费金额:<span><Statistic value={count4 || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>付费率:<span>{(count5 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ <span style={{ color: '#ff5722', fontWeight: 600 }}>活跃留存率:<span>{(count6 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>付费留存率:<span>{(count7 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ data['default'] = defaultStart + index
|
|
|
+ return data
|
|
|
+ })
|
|
|
+
|
|
|
+ let defaultStartM = 116
|
|
|
+ const Mn = Array(9).fill('').map((_item: string, index: number) => {
|
|
|
+ let field = `m${index + 4}`
|
|
|
+ let data: any = {
|
|
|
+ title: `M${index + 4}`,
|
|
|
+ dataIndex: `M${index + 4}`,
|
|
|
+ label: "游戏区服数据",
|
|
|
+ width: 140,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let date1 = moment()
|
|
|
+ if (b?.gsName === '总计') {
|
|
|
+ if (b?.beginDay) {
|
|
|
+ date1 = moment(b.beginDay)
|
|
|
+ } else {
|
|
|
+ date1 = moment()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ date1 = moment(b.serveDayBegin)
|
|
|
+ }
|
|
|
+ let dt = moment()
|
|
|
+ let day = dt.diff(date1, 'day');
|
|
|
+ if (index <= day && b?.[field]) {
|
|
|
+ let [count1, count2, count3, count4, count5, count6, count7] = b?.[field]?.split('/')
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ <span style={{ color: '#52c41a', fontWeight: 600 }}>活跃人数:<span>{count1}</span></span>
|
|
|
+ <span style={{ color: '#a0d911', fontWeight: 600 }}>付费人数:<span>{count2}</span></span>
|
|
|
+ <span style={{ color: '#1677ff', fontWeight: 600 }}>付费累计人数:<span>{count3}</span></span>
|
|
|
+ <span style={{ color: '#0f538a', fontWeight: 600 }}>付费金额:<span><Statistic value={count4 || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
|
|
|
+ <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>付费率:<span>{(count5 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ <span style={{ color: '#ff5722', fontWeight: 600 }}>活跃留存率:<span>{(count6 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ <span style={{ color: '#d81b60', fontWeight: 600 }}>付费留存率:<span>{(count7 * 100)?.toFixed(2)}%</span></span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ data['default'] = defaultStartM + index
|
|
|
+ return data
|
|
|
+ })
|
|
|
+
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: '基本信息',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: 'GS名称', dataIndex: 'gsName', label: '基本信息', align: 'center', width: 75, default: 1,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '父游戏名称', dataIndex: 'parentGameName', label: '基本信息', align: 'center', width: 85, default: 2,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'GS运营状态', dataIndex: 'gsStatus', label: '基本信息', align: 'center', width: 75, default: 3,
|
|
|
+ render: (a: 1 | 2, b: any) => {
|
|
|
+ if (b?.gsName === '总计') {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return a === 1 ? <Tag color="#f50" style={{ marginRight: 0 }}>独立运营</Tag> : a === 2 ? <Tag color="#2db7f5" style={{ marginRight: 0 }}>联合运营</Tag> : <Tag style={{ marginRight: 0 }}>无GS</Tag>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '区服名称', dataIndex: 'serverName', label: '基本信息', align: 'center', width: 85, default: 4,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '区服ID', dataIndex: 'serverId', label: '基本信息', align: 'center', width: 85, default: 5,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '是否原始区服', dataIndex: 'originServer', label: '基本信息', align: 'center', width: 90, default: 6,
|
|
|
+ render: (a: boolean, b: any) => {
|
|
|
+ if (b?.gsName === '总计') {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return a ? <Tag color="success" style={{ marginRight: 0 }}>是</Tag> : <Tag color="error" style={{ marginRight: 0 }}>否</Tag>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '游戏区服信息',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: '开服时间', dataIndex: 'startTime', label: '游戏区服信息', align: 'center', width: 90, default: 7,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={`${a || '--'}`} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '开服天数', dataIndex: 'startDiff', label: '游戏区服信息', align: 'center', width: 45, default: 8,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务时间', dataIndex: 'dt', label: '游戏区服信息', align: 'center', width: 90, default: 9,
|
|
|
+ render: (a: string, b: any) => {
|
|
|
+ if (b?.gsName === '总计') {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return b.startTime ? `${b.startTime}~${b?.endTime ? b?.endTime : '长期服务'}` : '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务天数', dataIndex: 'serveDiff', label: '游戏区服信息', align: 'center', width: 45, default: 10,
|
|
|
+ render: (a: string) => (<WidthEllipsis value={a} />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务状态', dataIndex: 'serveStatus', label: '游戏区服信息', align: 'center', width: 75, default: 11,
|
|
|
+ render: (a: boolean, b: any) => {
|
|
|
+ if (b?.gsName === '总计' || (typeof a !== 'boolean')) {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return a ? <Tag color="success" style={{ marginRight: 0 }}>服务完成</Tag> : <Tag color="processing" style={{ marginRight: 0 }}>服务中</Tag>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '游戏区服数据',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: '总创角人数', dataIndex: 'totalRoleNum', label: '游戏区服数据', align: 'center', width: 70, sorter: true, default: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总付费人数', dataIndex: 'totalAmountNum', label: '游戏区服数据', align: 'center', width: 70, sorter: true, default: 13,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总付费次数', dataIndex: 'totalAmountCount', label: '游戏区服数据', align: 'center', width: 70, sorter: true, default: 14,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总付费金额', dataIndex: 'totalAmount', label: '游戏区服数据', align: 'right', width: 110, sorter: true, default: 15,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总ARPPU', tips: 'ARPPU(人均付费金额)=付费金额/付费角色数量', dataIndex: 'arppu', label: '游戏区服数据', align: 'right', width: 70, sorter: true, default: 16,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} precision={2} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总客单价', tips: '客单价(平均每次付费金额)=付费金额/付费次数', dataIndex: 'avgAmount', label: '游戏区服数据', align: 'right', width: 75, sorter: true, default: 17,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} precision={2} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总付费率', tips: '付费率=付费角色数量/指派角色数量', dataIndex: 'amountRate', label: '游戏区服数据', align: 'center', width: 80, sorter: true, default: 18,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创角人数', dataIndex: 'sonRoleNum', label: '游戏区服数据', align: 'center', width: 70, sorter: true, default: 19
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费人数', dataIndex: 'sonServerAmountNum', label: '游戏区服数据', align: 'center', width: 65, sorter: true, default: 20,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费次数', dataIndex: 'sonServerAmountCount', label: '游戏区服数据', align: 'center', width: 70, sorter: true, default: 21,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费金额', dataIndex: 'sonServerAmount', label: '游戏区服数据', align: 'right', width: 100, sorter: true, default: 22,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'ARPPU', tips: 'ARPPU(人均付费金额)=付费金额/付费角色数量', dataIndex: 'sonArppu', label: '游戏区服数据', align: 'right', width: 70, sorter: true, default: 23,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} precision={2} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客单价', tips: '客单价(平均每次付费金额)=付费金额/付费次数', dataIndex: 'sonAvgAmount', label: '游戏区服数据', align: 'right', width: 75, sorter: true, default: 24,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} precision={2} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费率', tips: '付费率=付费角色数量/指派角色数量', dataIndex: 'sonAmountRate', label: '游戏区服数据', align: 'center', width: 80, sorter: true, default: 25,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ ...Dn,
|
|
|
+ ...Mn
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+export default columns12
|