代码规范修改,NFT基础页面提交

This commit is contained in:
vance 2022-08-09 16:00:10 +08:00
parent d2991a5ddd
commit afcaddcc0f
22 changed files with 13892 additions and 12975 deletions

View File

@ -56,6 +56,7 @@
"@formily/antd": "^2.0.7",
"@formily/core": "^2.0.7",
"@formily/react": "^2.0.7",
"@metamask/detect-provider": "^1.2.0",
"@umijs/route-utils": "^2.0.3",
"ahooks": "^2.10.14",
"antd": "^4.17.2",
@ -74,7 +75,8 @@
"react-dom": "^17.0.0",
"react-helmet-async": "^1.0.4",
"umi": "^3.5.0",
"umi-serve": "^1.9.10"
"umi-serve": "^1.9.10",
"web3": "^1.7.5"
},
"devDependencies": {
"@ant-design/pro-cli": "^2.0.2",

View File

@ -1,6 +1,6 @@
import { Col, Row, Statistic } from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
const moreData = (props: any, title: string, company = '人') => {
const MoreData = (props: any, title: string, company = '人') => {
return (
<div>
<p>{title}</p>
@ -42,4 +42,4 @@ const moreData = (props: any, title: string, company = '人') => {
</div>
);
};
export default moreData;
export default MoreData;

View File

@ -1,8 +1,13 @@
import React, { useRef, useState } from 'react';
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 echarts from 'echarts/lib/echarts';
import {
getActiveData,
getMonthUserData,
getOldUserData,
getTodayUserData,
getWeekUserData,
} from '@/services/DataBorad/activeanalysis';
import MoreData from '@/pages/DataBoard/ActiveAnalysis/List/components/MoreData';
import ReactEcharts from 'echarts-for-react';
import { Card, Col, Row, Select } from 'antd';
const ActiveAnalysis: React.FC = () => {
@ -13,13 +18,13 @@ const ActiveAnalysis: React.FC = () => {
return res.data;
};
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 [data, setData] = useState(getData(getTodayUserData));
const [oldUserData, setOldUserData] = useState(getData(getOldUserData));
const [weekData, setWeekData] = useState(getData(getWeekUserData));
const [monthData, setMonthData] = useState(getData(getMonthUserData));
const getOption = async (item = 'day') => {
const res = await getDwuData({ time_type: item });
const res = await getActiveData({ time_type: item });
const xData: any = [];
const seriesData: any = [];
res.data.foreach((item: any) => {
@ -55,24 +60,22 @@ const ActiveAnalysis: React.FC = () => {
<div>
<Row gutter={24} justify="space-between" style={{ marginBottom: 10 }}>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(data, '今日活跃用户数')}</Card>
<Card style={{ height: '200px' }}>{MoreData(data, '今日活跃用户数')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(oldUserData, '今日登录老用户数')}</Card>
<Card style={{ height: '200px' }}>{MoreData(oldUserData, '今日登录老用户数')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(weekData, 'WAU(本周去重人数)')}</Card>
<Card style={{ height: '200px' }}>{MoreData(weekData, 'WAU(本周去重人数)')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(monthData, 'MAU(本月去重人数)')}</Card>
<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}

View File

@ -1,9 +1,16 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getCoreData } from '@/services/DataBorad';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
import { getData } from '@/utils/getData';
import {
getCoreData,
getPayData,
getTodayUserData,
getMonthPayData,
getNewUserData,
} from '@/services/DataBorad/coredata';
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>();
@ -14,12 +21,12 @@ const CoreData: React.FC = () => {
setStartTimeValue(moment(data[0]).valueOf());
setEndTimeValue(moment(data[1]).valueOf());
};
const getData = async () => {
const res = await getCoreData({});
return res.data;
};
// const [date, setDate] = useState(getData);
const [date, setDate] = useState(getData);
const [userDate, setUserDate] = useState(getData(getTodayUserData));
const [newUserdate, setNewUserDate] = useState(getData(getNewUserData));
const [payData, setPayDate] = useState(getData(getMonthPayData));
const [allPay, setAllPayDate] = useState(getData(getPayData));
const columns: ProColumns<any>[] = [
{
title: '时间类型',
@ -58,9 +65,10 @@ const CoreData: React.FC = () => {
return (
<DatePicker.RangePicker
style={{ width: '300px' }}
defaultValue={[moment(), moment()]}
format={'YYYY-MM-DD'}
onChange={getTimedata}
onChange={(vaw: any) => {
getTimedata(vaw);
}}
/>
);
},
@ -113,16 +121,16 @@ const CoreData: React.FC = () => {
<div>
<Row gutter={24} style={{ marginBottom: 10 }}>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(2, '今日活跃用户数', '人')}</Card>
<Card style={{ height: '200px' }}>{MoreData(userDate, '今日活跃用户数', '人')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(2, '今日新增人数', '人')}</Card>
<Card style={{ height: '200px' }}>{MoreData(newUserdate, '今日新增人数', '人')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(2, '本月充值总额', '万元')}</Card>
<Card style={{ height: '200px' }}>{MoreData(payData, '本月充值总额', '万元')}</Card>
</Col>
<Col span={6}>
<Card style={{ height: '200px' }}>{moreData(2, '充值总额', '万元')}</Card>
<Card style={{ height: '200px' }}>{MoreData(allPay, '充值总额', '万元')}</Card>
</Col>
</Row>

View File

@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getCoreData } from '@/services/DataBorad';
import { getRententionData } from '@/services/DataBorad/rechargeAnalysis';
import { DatePicker, Select } from 'antd';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
@ -17,7 +17,7 @@ const Address: React.FC = () => {
const columns: ProColumns<any>[] = [
{
title: '时间类型',
dataIndex: 'coinType',
dataIndex: 'time_type',
hideInTable: true,
initialValue: TimeType.DAY,
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
@ -48,17 +48,22 @@ const Address: React.FC = () => {
title: '日期',
dataIndex: 'time',
width: '10%',
// hideInSearch: true,
hideInSearch: true,
},
{
title: '时间筛选',
dataIndex: 'timeData',
hideInTable: true,
width: '20%',
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
return (
<div>
<DatePicker.RangePicker
style={{ width: '300px' }}
defaultValue={[moment(), moment()]}
format={'YYYY-MM-DD'}
onChange={getTimedata}
/>
</div>
<DatePicker.RangePicker
style={{ width: '300px' }}
format={'YYYY-MM-DD'}
onChange={(vaw: any) => {
getTimedata(vaw);
}}
/>
);
},
},
@ -101,25 +106,19 @@ 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}
request={async (params) => {
console.log(params);
params.start_time = startTimeValue;
params.end_time = endTimeValue;
return getCoreData(params);
console.log(params.data.timeData);
console.log(params.time_type);
return getRententionData(params);
}}
/>
);

View File

@ -1,9 +1,9 @@
import React, { useRef } from 'react';
import Modal, { ModalProps } from '@/components/Modal';
import { fetchTableData } from '@/utils/table';
import { getchannelRetentionData } from '@/services/DataBorad';
import Table, { ProColumns, ActionType } from '@/components/Table';
import TimeText from '@/components/Typography/TimeText';
import { getChannelData } from '@/services/DataBorad/retentionAnalysis';
interface TableModalPropsType extends ModalProps {
modalData: any;
@ -21,7 +21,7 @@ const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
},
{
title: '渠道类型',
dataIndex: 'login_user',
dataIndex: 'channel_name',
hideInSearch: true,
ellipsis: true,
},
@ -76,7 +76,7 @@ const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
actionRef={tableRef}
request={async (params) => {
params.time = modalData;
return fetchTableData(getchannelRetentionData, params);
return fetchTableData(getChannelData, params);
}}
/>
</Modal>

View File

@ -3,7 +3,7 @@ import Table, { ProColumns, ActionType } from '@/components/Table';
import { DatePicker } from 'antd';
import moment from 'moment';
import { fetchTableData } from '@/utils/table';
import { getRetentionData } from '@/services/DataBorad';
import { getRententionData } from '@/services/DataBorad/retentionAnalysis';
import TableModal from '@/pages/DataBoard/RetentionAnalysis/List/components/TableModal';
const RetentionAnalysis = () => {
@ -34,7 +34,6 @@ const RetentionAnalysis = () => {
<DatePicker.RangePicker
value={requestData}
style={{ width: '200px' }}
defaultValue={[moment(), moment()]}
format={'YYYY-MM-DD'}
onChange={getTimedata}
/>
@ -102,7 +101,7 @@ const RetentionAnalysis = () => {
request={async (params) => {
params.start_time = startTimeValue;
params.end_time = endTimeValue;
return await fetchTableData(getRetentionData, params);
return await fetchTableData(getRententionData, params);
}}
/>
<TableModal

View File

@ -30,26 +30,26 @@ const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPro
};
return (
<Modal title="创建NFT" 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
name="nft_name"
name="contract_name"
title="名称"
required
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.Number
name="address"
title=""
name="contract_address"
title="合约"
required
x-decorator="FormItem"
x-component="NumberPicker"
/>
<SchemaField.String
name="contract"
title=""
<SchemaField.Number
name="description"
title="gas费"
required
x-decorator="FormItem"
x-component="NumberPicker"

View File

@ -0,0 +1,80 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { message } from 'antd';
// import { fetchTableData } from '@/utils/table';
import AddNftContractModal from '@/pages/Nft/NftContract/List/components/AddNftContract';
const Address: React.FC = () => {
const tableRef = useRef<ActionType>();
const [NftModal, setNftModal] = useState(false);
const [visible, setVisible] = useState(false);
const columns: ProColumns<any>[] = [
{
title: '合约名称',
dataIndex: 'time',
width: '10%',
hideInSearch: true,
},
{
title: '合约地址',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: 'NFT数量',
dataIndex: 'nft_num',
width: 150,
hideInSearch: true,
},
];
return (
<div>
<Table
columns={columns}
rowKey="id"
actionRef={tableRef}
toolBarActions={[
{
type: 'add',
text: '添加NFT',
onConfirm: () => {
setVisible(true);
},
},
{
type: 'add',
text: '新建NFT合约',
onConfirm: () => {
setVisible(true);
},
},
]}
// request={async (params) => {
// // return fetchTableData(, params);
// }}
/>
<AddNftContractModal
visible={NftModal}
onCancel={function () {
setNftModal(false);
}}
onOk={async function (val: any): Promise<void> {
try {
const params = { ...val };
// await creatNftAddress(params);
message.success('添加成功');
} catch (e) {
console.log(e);
message.success('发生错误');
setVisible(false);
}
}}
/>
</div>
);
};
export default Address;

View File

@ -30,7 +30,7 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
};
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

View File

@ -2,13 +2,14 @@ import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { message } from 'antd';
// import { fetchTableData } from '@/utils/table';
import AddNftModal from '@/pages/Nft/NftContractManage/List/components/addNftModel';
import AddNftContractModal from '@/pages/Nft/NftContractManage/List/components/addNftContract';
// import AddNftModal from '@/pages/Nft/NftToken/List/components/AddNftModel';
import PaySelectModal from '@/widget/Work/PaySelectModal';
const Address: React.FC = () => {
const tableRef = useRef<ActionType>();
const [NftModal, setNftModal] = useState(false);
const [, setVisible] = useState(false);
const [visible, setVisible] = useState(false);
const columns: ProColumns<any>[] = [
{
@ -18,14 +19,14 @@ const Address: React.FC = () => {
hideInSearch: true,
},
{
title: '合约地址',
title: 'NFT名称',
dataIndex: 'address',
hideInSearch: true,
width: '20%',
},
{
title: 'NFT数量',
dataIndex: 'nft_num',
title: 'TokenId',
dataIndex: 'token_id',
width: 150,
hideInSearch: true,
},
@ -47,9 +48,9 @@ const Address: React.FC = () => {
},
{
type: 'add',
text: '新建NFT合约',
text: '分发NFT',
onConfirm: () => {
setVisible(true);
setNftModal(true);
},
},
]}
@ -57,8 +58,8 @@ const Address: React.FC = () => {
// // return fetchTableData(, params);
// }}
/>
<AddNftModal
visible={NftModal}
{/* <AddNftModal
visible={visible}
onCancel={function () {
setVisible(false);
}}
@ -73,9 +74,9 @@ const Address: React.FC = () => {
setVisible(false);
}
}}
/>
<AddNftContractModal
visible={NftModal}
/> */}
<PaySelectModal
visible={visible}
onCancel={function () {
setVisible(false);
}}
@ -83,6 +84,7 @@ const Address: React.FC = () => {
try {
const params = { ...val };
// await creatNftAddress(params);
console.log(params);
message.success('添加成功');
} catch (e) {
console.log(e);

View File

@ -64,6 +64,27 @@ export default [
},
],
},
{
name: 'NFT',
path: RoutePath.NFT,
routes: [
{
path: RoutePath.NFT,
redirect: RoutePath.NFTCONTRACT.LIST,
hideInMenu: true,
},
{
name: 'NFT合约管理',
path: RoutePath.NFTCONTRACT.LIST,
component: './NFT/NftContract/List',
},
{
name: 'NFT管理',
path: RoutePath.NFTTOKEN.LIST,
component: './NFT/NftToken/List',
},
],
},
{
path: '/',
redirect: RoutePath.WORK.LIST,

View File

@ -1,20 +1,28 @@
const SETTING = '/setting';
const DATABOARD = '/databoard';
const NFT = '/nft';
const RoutePath = {
LOGIN: '/login',
SETTING: SETTING,
DATABOARD: DATABOARD,
NFT: NFT,
NFTCONTRACT: {
LIST: `${NFT}/nftcontract`,
},
NFTTOKEN: {
LIST: `${NFT}/nfttoken`,
},
COREDATA: {
LIST: '${DATABOARD}/coredata',
LIST: `${DATABOARD}/coredata`,
},
ACTIVEANALYSIS: {
LIST: '${DATABOARD}/activeanalysis',
LIST: `${DATABOARD}/activeanalysis`,
},
RETENTIONANALYSIS: {
LIST: '${DATABOARD}/retentionanalysis',
LIST: `${DATABOARD}/retentionanalysis`,
},
RECHARGEANALYSIS: {
LIST: '${DATABOARD}/rechargeanalysis',
LIST: `${DATABOARD}/rechargeanalysis`,
},
WORK: {
LIST: `${SETTING}/work`,

View File

@ -1,33 +0,0 @@
import request from '@/utils/request';
export const getCoreData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};
// 活跃分析
export const getRetentionData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};
// 渠道活跃分析
export const getchannelRetentionData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};
export const getDwuData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};

View File

@ -0,0 +1,41 @@
import request from '@/utils/request';
//获取基础数据报表
export const getActiveData = (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,
});
};

View File

@ -15,26 +15,26 @@ export const getTodayUserData = (params) => {
params,
});
};
//获取本月登录人数
export const getMonthUserData = (params) => {
//获取今日新用户
export const getNewUserData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/month',
url: '/tgb/api/v1/data/user/new',
method: 'get',
params,
});
};
// 获取本周登录人数
export const getWeekUserData = (params) => {
// 获取本月充值总额
export const getMonthPayData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/week',
url: '/tgb/api/v1/data/pay/month',
method: 'get',
params,
});
};
// 获取本日老用户登录人数
export const getOldUserData = (params) => {
// 获取充值总额
export const getPayData = (params) => {
return request.request({
url: '/tgb/api/v1/data/user/old',
url: '/tgb/api/v1/data/pay/all',
method: 'get',
params,
});

View File

@ -0,0 +1,9 @@
import request from '@/utils/request';
//获取基础数据报表
export const getRententionData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};

View File

@ -0,0 +1,17 @@
import request from '@/utils/request';
//获取基础数据报表
export const getRententionData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};
//获取渠道
export const getChannelData = (data) => {
return request.request({
url: '/tgb/api/v1/data/get',
method: 'post',
data,
});
};

View File

@ -0,0 +1,43 @@
import Web3 from 'web3';
import detectEthereumProvider from '@metamask/detect-provider';
import { message } from 'antd';
let provider: any;
export const web3 = new Web3();
if (typeof window.ethereum !== 'undefined') {
web3.eth.defaultAccount = window.ethereum.selectedAddress;
}
export async function initWeb3() {
provider = await detectEthereumProvider();
if (!provider) {
console.log('请安装MetaMask');
return false;
}
try {
web3.setProvider(provider);
const accounts = await provider.request({
method: 'eth_requestAccounts',
});
//如果用户同意了登录请求,你就可以拿到用户的账号
web3.eth.defaultAccount = accounts[0];
return true;
} catch (reason) {
switch (reason) {
case 'Already processing eth_requestAccounts. Please wait.': // 已有请求存在
message.warning('请打开MetaMask完成授权');
break;
case 'User rejected provider access': //如果用户拒绝了登录请求
message.warning('请同意登录请求');
break;
default:
// 本不该执行到这里,但是真到这里了,说明发生了意外
message.warning('登录出错err:' + reason);
break;
}
}
return false;
}

4
src/utils/getData.ts Normal file
View File

@ -0,0 +1,4 @@
export const getData = async (fetch: any) => {
const res = (await fetch()) || {};
return res.data;
};

View File

@ -0,0 +1,70 @@
import React, { useRef, useState } from 'react';
import { createForm, onFieldChange } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
// import { fetchTableData } from '@/utils/table';
import { Form, FormItem, Input, Select, Radio, Switch } from '@formily/antd';
interface PaySelectModalPropsType extends ModalProps {
onOk: (val: any) => void;
onCancel: () => void;
// modalData: any;
}
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
Radio,
Switch,
},
});
const form = createForm({});
const PaySelectModal = ({ onOk, onCancel, ...rest }: PaySelectModalPropsType) => {
const [send, useSend] = useState(true);
const handleOk = () => {
const formState = form.getFormState();
onOk(formState.values);
};
const handleCancel = () => {
onCancel();
};
return (
<Modal title="选择方式" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
<Form form={form} labelCol={4} wrapperCol={18}>
<SchemaField>
<SchemaField.Number
name="type"
title="支付方式"
required
x-decorator="FormItem"
x-component="Radio.Group"
enum={[
{ label: '秘钥支付', value: 1 },
{ label: '小狐狸钱包支付', value: 2 },
]}
/>
{send == true && (
<SchemaField.String
name="key"
title="秘钥"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
placeholder: '请输入秘钥,若使用小狐狸支付则不需要输入',
}}
/>
)}
</SchemaField>
</Form>
</Modal>
);
};
export default PaySelectModal;

26342
yarn.lock

File diff suppressed because it is too large Load Diff