gary
/
top-block-game-frontend
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

数据看板完善

This commit is contained in:
vance 2022-08-03 16:16:26 +08:00
parent 43c2cdb98b
commit d2991a5ddd
16 changed files with 13142 additions and 12012 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -62,6 +62,8 @@
"axios": "^0.24.0",
"braft-editor": "^2.3.9",
"classnames": "^2.2.6",
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"lodash": "^4.17.11",
"moment": "^2.25.3",
"omit.js": "^2.0.2",

6
src/constants/enum/timeType.ts Normal file
View File

@ -0,0 +1,6 @@
export enum TimeType {
DAY = 'day',
WEEK = 'week',
MONTH = 'month',
}
export default TimeType;

45
src/pages/DataBoard/ActiveAnalysis/List/components/moreData.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Col, Row, Statistic } from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
const moreData = (props: any, title: string, company = '人') => {
return (
<div>
<p>{title}</p>
<h2>{props.time}</h2>
<h1>
{props.mon_user}
{company}
</h1>
<div>
<Row>
<Col span={12}>
<Statistic
title="较环比"
value={props.day_proportion}
valueStyle={
props.week_proportion > 0
? { color: '#3f8600', fontSize: 15 }
: { color: '#cf1322', fontSize: 15 }
}
prefix={props.week_proportion > 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />}
suffix="%"
/>
</Col>
<Col span={12}>
<Statistic
title="较同比"
value={Math.abs(props.week_proportion)}
valueStyle={
props.week_proportion > 0
? { color: '#3f8600', fontSize: 15 }
: { color: '#cf1322', fontSize: 15 }
}
prefix={props.week_proportion > 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />}
suffix="%"
/>
</Col>
</Row>
</div>
</div>
);
};
export default moreData;

138
src/pages/DataBoard/ActiveAnalysis/List/index.tsx
View File

@ -1,59 +1,97 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { fetchTableData } from '@/utils/table';
import echarts from 'echarts/lib/echarts'; // 引入 ECharts 主模块
import { getDwuData } from '@/services/DataBorad';
import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
import { getCoreData } from '@/services/DataBorad';
import ReactEcharts from 'echarts-for-react';
import { Card, Col, Row, Select } from 'antd';
const ActiveAnalysis: React.FC = () => {
const tableRef = useRef<ActionType>();
const [visible, setVisible] = useState(false);
const { Option } = Select;
const [timeType, setTimeType] = useState('day');
const getData = async (func) => {
const res = await func({});
return res.data;
};
const columns: ProColumns<any>[] = [
{
title: '日期',
dataIndex: 'time',
width: '10%',
hideInSearch: true,
},
{
title: '活跃用户数',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: '活跃老玩家数量',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: 'MAU',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: 'WAU',
dataIndex: 'arpu',
hideInSearch: true,
width: '20%',
},
{
title: 'DAU',
dataIndex: 'arppu',
hideInSearch: true,
width: '20%',
},
];
const [data, setData] = useState(getData(getCoreData));
const [oldUserData, setOldUserData] = useState(getData(getCoreData));
const [weekData, setWeekData] = useState(getData(getCoreData));
const [monthData, setMonthData] = useState(getData(getCoreData));
const getOption = async (item = 'day') => {
const res = await getDwuData({ time_type: item });
const xData: any = [];
const seriesData: any = [];
res.data.foreach((item: any) => {
xData.push(item.time);
seriesData.push(item.dwn);
});
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// data: xData,
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 360],
// data: seriesData.reverse(),
type: 'line',
},
],
};
return option;
};
const [option, setOption] = useState(getOption);
const setTimeOption = (val: any) => {
setTimeType(val);
setOption(getOption(val));
};
return (
<div>
<Table
columns={columns}
rowKey="id"
actionRef={tableRef}
// request={async (params) => {
// // return fetchTableData(, params);
// }}
/>
<Row gutter={24} justify="space-between" style={{ marginBottom: 10 }}>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(data, '今日活跃用户数')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(oldUserData, '今日登录老用户数')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(weekData, 'WAU(本周去重人数)')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(monthData, 'MAU(本月去重人数)')}</Card>
</Col>
</Row>
<Card style={{ width: '100%' }}>
<Row gutter={32} style={{ marginBottom: 10 }}>
<Col span={6}>
<h1>DAU</h1>
<h3>今日人数</h3>
{/* <h2>{data}人</h2> */}
<Select
defaultValue="lucy"
value={timeType}
style={{ width: 100 }}
bordered={false}
onChange={(val) => {
setTimeOption(val);
}}
>
<Option value="day">每日</Option>
<Option value="week">每周</Option>
<Option value="month">每月</Option>
</Select>
</Col>
<Col span={18}>
<ReactEcharts option={option} />
</Col>
</Row>
</Card>
</div>
);
};

115
src/pages/DataBoard/CoreData/List/index.tsx
View File

@ -1,27 +1,55 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getCoreData } from '@/services/DataBorad';
import { RedoOutlined } from '@ant-design/icons';
import moment from 'moment';
import { Card, Col, Row, DatePicker, Button } from 'antd';
// import TimeText from '@/components/Typography/TimeText';
import TimeType from '@/constants/enum/timeType';
import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
import { Card, Col, Row, DatePicker, Select } from 'antd';
const CoreData: React.FC = () => {
const tableRef = useRef<ActionType>();
const [startTimeValue, setStartTimeValue] = useState(Number);
const [endTimeValue, setEndTimeValue] = useState(Number);
const [timeType, setTimeType] = useState(TimeType.DAY);
const getTimedata = (data: any) => {
setStartTimeValue(moment(data[0]).valueOf());
setEndTimeValue(moment(data[1]).valueOf());
console.log(startTimeValue, endTimeValue);
};
const carddata = {
name: 1,
time: 2,
user_num: 2,
const getData = async () => {
const res = await getCoreData({});
return res.data;
};
const [date, setDate] = useState(carddata);
// const [date, setDate] = useState(getData);
const [date, setDate] = useState(getData);
const columns: ProColumns<any>[] = [
{
title: '时间类型',
dataIndex: 'coinType',
hideInTable: true,
initialValue: TimeType.DAY,
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
return (
<Select
options={[
{
label: '每日',
value: TimeType.DAY,
},
{
label: '每周',
value: TimeType.WEEK,
},
{
label: '每月',
value: TimeType.MONTH,
},
]}
onChange={(val) => {
setTimeType(val);
}}
/>
);
},
},
{
title: '日期',
dataIndex: 'time',
@ -85,75 +113,16 @@ const CoreData: React.FC = () => {
<div>
<Row gutter={24} style={{ marginBottom: 10 }}>
<Col span={6}>
<Card style={{ height: '140px' }}>
<div>
<p>
今日活跃用户数
<Button
type="link"
icon={
<RedoOutlined
onClick={async () => {
const res = await getCoreData({});
setDate(res.data);
}}
/>
}
/>
</p>
<p>{date.user_num}人</p>
</div>
</Card>
<Card style={{ height: '200px' }}>{moreData(2, '今日活跃用户数', '人')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '140px' }}>
<div>
<p>
今日新用户数
<Button
type="link"
icon={
<RedoOutlined
onClick={async () => {
const res = await getCoreData({});
setDate(res.data);
}}
/>
}
/>
</p>
<p>{date.user_num}人</p>
</div>
</Card>
<Card style={{ height: '200px' }}>{moreData(2, '今日新增人数', '人')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '140px' }}>
<div>
<p>
本月充值总额
<Button
type="link"
icon={
<RedoOutlined
onClick={async () => {
const res = await getCoreData({});
setDate(res.data);
}}
/>
}
/>
</p>
<p>{date.name}万元</p>
</div>
</Card>
<Card style={{ height: '200px' }}>{moreData(2, '本月充值总额', '万元')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '140px' }}>
<div>
<p>充值总额</p>
<p>{date.user_num}万元</p>
</div>
</Card>
<Card style={{ height: '200px' }}>{moreData(2, '充值总额', '万元')}</Card>
</Col>
</Row>

129
src/pages/DataBoard/RechargeAnalysis/List/index.tsx
View File

@ -1,44 +1,88 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getCoreData } from '@/services/DataBorad';
import { DatePicker, Select } from 'antd';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
const Address: React.FC = () => {
const tableRef = useRef<ActionType>();
const [visible, setVisible] = useState(false);
const [startTimeValue, setStartTimeValue] = useState(Number);
const [endTimeValue, setEndTimeValue] = useState(Number);
const [timeType, setTimeType] = useState(TimeType.DAY);
const getTimedata = (data: any) => {
setStartTimeValue(moment(data[0]).valueOf());
setEndTimeValue(moment(data[1]).valueOf());
};
const columns: ProColumns<any>[] = [
{
title: '时间类型',
dataIndex: 'coinType',
hideInTable: true,
initialValue: TimeType.DAY,
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
return (
<Select
options={[
{
label: '每日',
value: TimeType.DAY,
},
{
label: '每周',
value: TimeType.WEEK,
},
{
label: '每月',
value: TimeType.MONTH,
},
]}
onChange={(val) => {
setTimeType(val);
}}
/>
);
},
},
{
title: '日期',
dataIndex: 'time',
width: '10%',
hideInSearch: true,
// hideInSearch: true,
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
return (
<div>
<DatePicker.RangePicker
style={{ width: '300px' }}
defaultValue={[moment(), moment()]}
format={'YYYY-MM-DD'}
onChange={getTimedata}
/>
</div>
);
},
},
{
title: '活跃用户数',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: '新用户数量',
dataIndex: 'new_user',
width: 150,
hideInSearch: true,
},
{
title: '当日充值总额',
dataIndex: 'address',
title: '付费次数',
dataIndex: 'pay_num',
hideInSearch: true,
width: '20%',
},
{
title: '付费用户数',
dataIndex: 'address',
dataIndex: 'pay_user',
width: 150,
hideInSearch: true,
},
{
title: '付费金额',
dataIndex: 'pay_price',
hideInSearch: true,
width: '20%',
},
{
title: '付费率',
dataIndex: 'address',
dataIndex: 'rate',
hideInSearch: true,
width: '20%',
},
@ -57,34 +101,27 @@ const Address: React.FC = () => {
];
return (
<div>
<Table
columns={columns}
rowKey="id"
actionRef={tableRef}
search={false}
request={async (params) => {
return getCoreData(params);
}}
/>
<Table
columns={columns}
rowKey="id"
actionRef={tableRef}
search={false}
toolBarActions={[
{
type: 'add',
onConfirm: () => {
setVisible(true);
},
},
]}
request={async (params) => {
return getCoreData(params);
}}
/>
</div>
// <div>
// <Table
// columns={columns}
// rowKey="id"
// actionRef={tableRef}
// // search={false}
// request={async (params) => {
// return getCoreData(params);
// }}
// />
<Table
columns={columns}
rowKey="id"
actionRef={tableRef}
// search={false}
request={async (params) => {
params.start_time = startTimeValue;
params.end_time = endTimeValue;
return getCoreData(params);
}}
/>
);
};

17
src/pages/DataBoard/RetentionAnalysis/List/components/TableModal.tsx
View File

@ -26,38 +26,39 @@ const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
ellipsis: true,
},
{
title: '当日',
dataIndex: 'key',
title: '登录用户数',
dataIndex: 'login_user',
hideInSearch: true,
ellipsis: true,
},
{
title: '第一日',
dataIndex: 'key',
dataIndex: 'day_one',
hideInSearch: true,
},
{
title: '第二日',
dataIndex: 'key',
dataIndex: 'day_two',
hideInSearch: true,
},
{
title: '第四日',
dataIndex: 'key',
dataIndex: 'day_three',
hideInSearch: true,
},
{
title: '第五日',
dataIndex: 'key',
dataIndex: 'day_four',
hideInSearch: true,
},
{
title: '第六日',
dataIndex: 'key',
dataIndex: 'day_five',
hideInSearch: true,
},
{
title: '第七日',
dataIndex: 'key',
dataIndex: 'day_seven',
hideInSearch: true,
},
];

25
src/pages/DataBoard/RetentionAnalysis/List/index.tsx
View File

@ -11,11 +11,12 @@ const RetentionAnalysis = () => {
const [endTimeValue, setEndTimeValue] = useState(Number);
const [visible, setVisible] = useState(false);
const [requestData, setRequestData] = useState({});
const [requestData, setRequestData] = useState();
const getTimedata = (data) => {
setStartTimeValue(moment(data[0]).valueOf());
setEndTimeValue(moment(data[1]).valueOf());
console.log(startTimeValue, endTimeValue);
console.log(visible);
};
const sendData = (row: any) => {
setVisible(true);
@ -27,10 +28,11 @@ const RetentionAnalysis = () => {
{
title: '时间',
dataIndex: 'time',
width: '20%',
// width: '20%',
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
return (
<DatePicker.RangePicker
value={requestData}
style={{ width: '200px' }}
defaultValue={[moment(), moment()]}
format={'YYYY-MM-DD'}
@ -45,39 +47,34 @@ const RetentionAnalysis = () => {
hideInSearch: true,
ellipsis: true,
},
{
title: '当日',
dataIndex: 'key',
hideInSearch: true,
},
{
title: '第一日',
dataIndex: 'key',
dataIndex: 'day_one',
hideInSearch: true,
},
{
title: '第二日',
dataIndex: 'key',
dataIndex: 'day_two',
hideInSearch: true,
},
{
title: '第四日',
dataIndex: 'key',
dataIndex: 'day_three',
hideInSearch: true,
},
{
title: '第五日',
dataIndex: 'key',
dataIndex: 'day_four',
hideInSearch: true,
},
{
title: '第六日',
dataIndex: 'key',
dataIndex: 'day_five',
hideInSearch: true,
},
{
title: '第七日',
dataIndex: 'key',
dataIndex: 'day_seven',
hideInSearch: true,
},
{
@ -105,7 +102,7 @@ const RetentionAnalysis = () => {
request={async (params) => {
params.start_time = startTimeValue;
params.end_time = endTimeValue;
return fetchTableData(getRetentionData, params);
return await fetchTableData(getRetentionData, params);
}}
/>
<TableModal

2
src/pages/Nft/NftContractManage/List/components/addNftContract.tsx
View File

@ -30,7 +30,7 @@ const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPro
};
return (
<Modal title="添加地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
<Modal title="创建NFT" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
<Form form={form} labelCol={4} wrapperCol={18}>
<SchemaField>
<SchemaField.String

2
src/pages/Nft/NftContractManage/List/components/addNftModel.tsx
View File

@ -30,7 +30,7 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
};
return (
<Modal title="添加地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
<Modal title="添加合约" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
<Form form={form} labelCol={4} wrapperCol={18}>
<SchemaField>
<SchemaField.String

8
src/services/DataBorad.ts
View File

@ -23,3 +23,11 @@ export const getchannelRetentionData = (data) => {
data,
});
};
export const getDwuData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};

0
src/services/DataBorad/activeanalysis.ts Normal file
View File

41
src/services/DataBorad/coredata.ts Normal file
View File

@ -0,0 +1,41 @@
import request from '@/utils/request';
//获取基础数据报表
export const getCoreData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};
// 获取今日登陆人数接口
export const getTodayUserData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/today',
method: 'get',
params,
});
};
//获取本月登录人数
export const getMonthUserData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/month',
method: 'get',
params,
});
};
// 获取本周登录人数
export const getWeekUserData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/week',
method: 'get',
params,
});
};
// 获取本日老用户登录人数
export const getOldUserData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/old',
method: 'get',
params,
});
};

0
src/services/DataBorad/rechargeAnalysis.ts Normal file
View File

0
src/services/DataBorad/retentionAnalysis.ts Normal file
View File

24624
yarn.lock
View File

File diff suppressed because it is too large Load Diff