diff --git a/src/pages/DataBoard/ActiveAnalysis/List/index.tsx b/src/pages/DataBoard/ActiveAnalysis/List/index.tsx new file mode 100644 index 0000000..2c60d26 --- /dev/null +++ b/src/pages/DataBoard/ActiveAnalysis/List/index.tsx @@ -0,0 +1,61 @@ +import React, { useRef, useState } from 'react'; +import Table, { ProColumns, ActionType } from '@/components/Table'; +import { fetchTableData } from '@/utils/table'; +const ActiveAnalysis: React.FC = () => { + const tableRef = useRef(); + const [visible, setVisible] = useState(false); + + const columns: ProColumns[] = [ + { + 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%', + }, + ]; + + return ( +
+ { + // // return fetchTableData(, params); + // }} + /> + + ); +}; + +export default ActiveAnalysis; diff --git a/src/pages/DataBoard/CoreData/List/index.tsx b/src/pages/DataBoard/CoreData/List/index.tsx new file mode 100644 index 0000000..1ce1a93 --- /dev/null +++ b/src/pages/DataBoard/CoreData/List/index.tsx @@ -0,0 +1,174 @@ +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'; +const CoreData: React.FC = () => { + const tableRef = useRef(); + const [startTimeValue, setStartTimeValue] = useState(Number); + const [endTimeValue, setEndTimeValue] = useState(Number); + 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 [date, setDate] = useState(carddata); + + const columns: ProColumns[] = [ + { + title: '日期', + dataIndex: 'time', + width: '10%', + renderFormItem: (item, { type, defaultRender, ...rest }, form) => { + return ( + + ); + }, + }, + { + title: '活跃用户数', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '新用户数量', + dataIndex: 'new_user', + width: 150, + hideInSearch: true, + }, + { + title: '当日充值总额', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '付费用户数', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '付费率', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: 'ARPU', + dataIndex: 'arpu', + hideInSearch: true, + width: '20%', + }, + { + title: 'ARPPU', + dataIndex: 'arppu', + hideInSearch: true, + width: '20%', + }, + ]; + + return ( +
+ +
+ +
+

+ 今日活跃用户数 +

+ + + + +
+

+ 今日新用户数 +

+ + + + +
+

+ 本月充值总额 +

+ + + + +
+

充值总额

+

{date.user_num}万元

+
+ + + + +
{ + params.start_time = startTimeValue; + params.end_time = endTimeValue; + return getCoreData(params); + }} + /> + + ); +}; + +export default CoreData; diff --git a/src/pages/DataBoard/RechargeAnalysis/List/index.tsx b/src/pages/DataBoard/RechargeAnalysis/List/index.tsx new file mode 100644 index 0000000..2f8bd28 --- /dev/null +++ b/src/pages/DataBoard/RechargeAnalysis/List/index.tsx @@ -0,0 +1,91 @@ +import React, { useRef, useState } from 'react'; +import Table, { ProColumns, ActionType } from '@/components/Table'; +import { getCoreData } from '@/services/DataBorad'; +const Address: React.FC = () => { + const tableRef = useRef(); + const [visible, setVisible] = useState(false); + + const columns: ProColumns[] = [ + { + title: '日期', + dataIndex: 'time', + width: '10%', + hideInSearch: true, + }, + { + title: '活跃用户数', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '新用户数量', + dataIndex: 'new_user', + width: 150, + hideInSearch: true, + }, + { + title: '当日充值总额', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '付费用户数', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: '付费率', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: 'ARPU', + dataIndex: 'arpu', + hideInSearch: true, + width: '20%', + }, + { + title: 'ARPPU', + dataIndex: 'arppu', + hideInSearch: true, + width: '20%', + }, + ]; + + return ( +
+
{ + return getCoreData(params); + }} + /> +
{ + setVisible(true); + }, + }, + ]} + request={async (params) => { + return getCoreData(params); + }} + /> + + ); +}; + +export default Address; diff --git a/src/pages/DataBoard/RetentionAnalysis/List/components/TableModal.tsx b/src/pages/DataBoard/RetentionAnalysis/List/components/TableModal.tsx new file mode 100644 index 0000000..d705a26 --- /dev/null +++ b/src/pages/DataBoard/RetentionAnalysis/List/components/TableModal.tsx @@ -0,0 +1,85 @@ +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'; + +interface TableModalPropsType extends ModalProps { + modalData: any; + onCancel: () => void; +} +const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => { + const tableRef = useRef(); + const columns: ProColumns[] = [ + { + title: '时间', + dataIndex: 'time', + hideInSearch: true, + width: '20%', + render: (_, row) => [], + }, + { + title: '渠道类型', + dataIndex: 'login_user', + hideInSearch: true, + ellipsis: true, + }, + { + title: '当日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第一日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第二日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第四日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第五日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第六日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第七日', + dataIndex: 'key', + hideInSearch: true, + }, + ]; + + const handleCancel = () => { + onCancel(); + }; + + return ( + +
{ + params.time = modalData; + return fetchTableData(getchannelRetentionData, params); + }} + /> + + ); +}; + +export default TableModal; diff --git a/src/pages/DataBoard/RetentionAnalysis/List/index.tsx b/src/pages/DataBoard/RetentionAnalysis/List/index.tsx new file mode 100644 index 0000000..53d7154 --- /dev/null +++ b/src/pages/DataBoard/RetentionAnalysis/List/index.tsx @@ -0,0 +1,122 @@ +import React, { useRef, useState } from 'react'; +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 TableModal from '@/pages/DataBoard/RetentionAnalysis/List/components/TableModal'; + +const RetentionAnalysis = () => { + const [startTimeValue, setStartTimeValue] = useState(Number); + const [endTimeValue, setEndTimeValue] = useState(Number); + + const [visible, setVisible] = useState(false); + const [requestData, setRequestData] = useState({}); + const getTimedata = (data) => { + setStartTimeValue(moment(data[0]).valueOf()); + setEndTimeValue(moment(data[1]).valueOf()); + console.log(startTimeValue, endTimeValue); + }; + const sendData = (row: any) => { + setVisible(true); + setRequestData(row.time); + }; + + const tableRef = useRef(); + const columns: ProColumns[] = [ + { + title: '时间', + dataIndex: 'time', + width: '20%', + renderFormItem: (item, { type, defaultRender, ...rest }, form) => { + return ( + + ); + }, + }, + { + title: '登录用户数', + dataIndex: 'login_user', + hideInSearch: true, + ellipsis: true, + }, + { + title: '当日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第一日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第二日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第四日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第五日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第六日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '第七日', + dataIndex: 'key', + hideInSearch: true, + }, + { + title: '操作', + valueType: 'option', + width: 150, + render: (_, row) => [ + , + ], + }, + ]; + return ( +
+
{ + params.start_time = startTimeValue; + params.end_time = endTimeValue; + return fetchTableData(getRetentionData, params); + }} + /> + + + ); +}; + +export default RetentionAnalysis; diff --git a/src/pages/Nft/NftContractManage/List/components/addNftContract.tsx b/src/pages/Nft/NftContractManage/List/components/addNftContract.tsx new file mode 100644 index 0000000..e13b7c8 --- /dev/null +++ b/src/pages/Nft/NftContractManage/List/components/addNftContract.tsx @@ -0,0 +1,63 @@ +import React, { useRef } from 'react'; +import { createForm } from '@formily/core'; +import { createSchemaField } from '@formily/react'; +import Modal, { ModalProps } from '@/components/Modal'; +// import { fetchTableData } from '@/utils/table'; +import { Form, FormItem, Input, NumberPicker } from '@formily/antd'; + +interface AddNftContractModalPropsType extends ModalProps { + onOk: (val: any) => void; + onCancel: () => void; +} + +const SchemaField = createSchemaField({ + components: { + FormItem, + Input, + NumberPicker, + }, +}); + +const form = createForm({}); + +const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPropsType) => { + const handleOk = () => { + const formState = form.getFormState(); + onOk(formState.values); + }; + const handleCancel = () => { + onCancel(); + }; + + return ( + +
+ + + + + + + + ); +}; + +export default AddNftContractModal; diff --git a/src/pages/Nft/NftContractManage/List/components/addNftModel.tsx b/src/pages/Nft/NftContractManage/List/components/addNftModel.tsx new file mode 100644 index 0000000..f7e5184 --- /dev/null +++ b/src/pages/Nft/NftContractManage/List/components/addNftModel.tsx @@ -0,0 +1,70 @@ +import React, { useRef } from 'react'; +import { createForm } from '@formily/core'; +import { createSchemaField } from '@formily/react'; +import Modal, { ModalProps } from '@/components/Modal'; +// import { fetchTableData } from '@/utils/table'; +import { Form, FormItem, Input, NumberPicker } from '@formily/antd'; + +interface AddNftModalPropsType extends ModalProps { + onOk: (val: any) => void; + onCancel: () => void; +} + +const SchemaField = createSchemaField({ + components: { + FormItem, + Input, + NumberPicker, + }, +}); + +const form = createForm({}); + +const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => { + const handleOk = () => { + const formState = form.getFormState(); + onOk(formState.values); + }; + const handleCancel = () => { + onCancel(); + }; + + return ( + +
+ + + + + + + + + ); +}; + +export default AddNftModal; diff --git a/src/pages/Nft/NftContractManage/List/index.tsx b/src/pages/Nft/NftContractManage/List/index.tsx new file mode 100644 index 0000000..908fc99 --- /dev/null +++ b/src/pages/Nft/NftContractManage/List/index.tsx @@ -0,0 +1,98 @@ +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'; + +const Address: React.FC = () => { + const tableRef = useRef(); + const [NftModal, setNftModal] = useState(false); + const [, setVisible] = useState(false); + + const columns: ProColumns[] = [ + { + title: '合约名称', + dataIndex: 'time', + width: '10%', + hideInSearch: true, + }, + { + title: '合约地址', + dataIndex: 'address', + hideInSearch: true, + width: '20%', + }, + { + title: 'NFT数量', + dataIndex: 'nft_num', + width: 150, + hideInSearch: true, + }, + ]; + + return ( +
+
{ + setVisible(true); + }, + }, + { + type: 'add', + text: '新建NFT合约', + onConfirm: () => { + setVisible(true); + }, + }, + ]} + // request={async (params) => { + // // return fetchTableData(, params); + // }} + /> + { + try { + const params = { ...val }; + // await creatNftAddress(params); + message.success('添加成功'); + } catch (e) { + console.log(e); + message.success('发生错误'); + setVisible(false); + } + }} + /> + { + try { + const params = { ...val }; + // await creatNftAddress(params); + message.success('添加成功'); + } catch (e) { + console.log(e); + message.success('发生错误'); + setVisible(false); + } + }} + /> + + ); +}; + +export default Address; diff --git a/src/routes/index.ts b/src/routes/index.ts index e6d4016..9937c0b 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -33,6 +33,37 @@ export default [ }, ], }, + { + name: '数据看板', + path: RoutePath.DATABOARD, + routes: [ + { + path: RoutePath.DATABOARD, + redirect: RoutePath.COREDATA.LIST, + hideInMenu: true, + }, + { + name: '核心看板', + path: RoutePath.COREDATA.LIST, + component: './DataBoard/CoreData/List', + }, + { + name: '活跃分析', + path: RoutePath.ACTIVEANALYSIS.LIST, + component: './DataBoard/ActiveAnalysis/List', + }, + { + name: '留存分析', + path: RoutePath.RETENTIONANALYSIS.LIST, + component: './DataBoard/RetentionAnalysis/List', + }, + { + name: '用户充值分析', + path: RoutePath.RECHARGEANALYSIS.LIST, + component: './DataBoard/RechargeAnalysis/List', + }, + ], + }, { path: '/', redirect: RoutePath.WORK.LIST, diff --git a/src/routes/routePath.ts b/src/routes/routePath.ts index 566cd52..5483e48 100644 --- a/src/routes/routePath.ts +++ b/src/routes/routePath.ts @@ -1,7 +1,21 @@ const SETTING = '/setting'; +const DATABOARD = '/databoard'; const RoutePath = { LOGIN: '/login', SETTING: SETTING, + DATABOARD: DATABOARD, + COREDATA: { + LIST: '${DATABOARD}/coredata', + }, + ACTIVEANALYSIS: { + LIST: '${DATABOARD}/activeanalysis', + }, + RETENTIONANALYSIS: { + LIST: '${DATABOARD}/retentionanalysis', + }, + RECHARGEANALYSIS: { + LIST: '${DATABOARD}/rechargeanalysis', + }, WORK: { LIST: `${SETTING}/work`, EDIT: `${SETTING}/work/edit`, diff --git a/src/services/DataBorad.ts b/src/services/DataBorad.ts new file mode 100644 index 0000000..3e85ad9 --- /dev/null +++ b/src/services/DataBorad.ts @@ -0,0 +1,25 @@ +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, + }); +};