pzy
/
filpool-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加首页统计

master
yyy 10 months ago
parent
4786292c55
commit
ec14a6969f
10 changed files with 416 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 21
      src/package/SimpleTrade/api/index.ts
  3. 29
      src/package/SimpleTrade/pages/client/recharge/index.tsx
  4. 21
      src/package/SimpleTrade/pages/client/user/index.tsx
  5. 12
      src/package/SimpleTrade/pages/client/withdraw/index.tsx
  6. 38
      src/package/SimpleTrade/pages/home/index.css
  7. 47
      src/package/SimpleTrade/pages/home/index.less
  8. 266
      src/package/SimpleTrade/pages/home/index.tsx
  9. BIN
      src/package/SimpleTrade/pages/home/vector.png
  10. 5
      yarn.lock

1
package.json
View File

@ -22,6 +22,7 @@
"connected-react-router": "^6.5.2",
"cross-env": "^7.0.2",
"dagre": "^0.8.5",
"dayjs": "^1.11.10",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"moment": "^2.24.0",

21
src/package/SimpleTrade/api/index.ts
View File

@ -9,5 +9,26 @@ export default {
// 登录
login(params: object): Promise<CommonObjectType<string>> {
return $axios.post('/admin/login', params)
},
// 首页用户统计
user_statistics(): Promise<CommonObjectType<string>> {
return $axios.post('/admin/userAmount')
},
// 首页充值提现统计
recharge_withdraw_statistics(): Promise<CommonObjectType<string>> {
return $axios.post('/admin/depositWithdrawal')
},
/**
* @description 交易统计
* @param {number} end_time 结束时间
* @param {number} start_time 开始时间
* @param {number} type 1.今日交易订单统计 2.周期交易订单统计
*/
transaction_statistics(params?: object): Promise<CommonObjectType<string>> {
return $axios.post('/admin/prodruct', params)
}
}

29
src/package/SimpleTrade/pages/client/recharge/index.tsx
View File

@ -2,23 +2,42 @@ import React, { FC } from "react";
import clientApi from "@/package/SimpleTrade/api/client";
import MyTable from "@/components/MyTable";
import { Input } from "antd";
import { getTime, splitAddress } from "@/utils";
import { copy, getTime, splitAddress } from "@/utils";
import { CopyOutlined } from "@ant-design/icons";
const RechargeRecord: FC = () => {
const columns = [
{
title: '用户ID',
dataIndex: 'user_id'
title: '账号ID',
dataIndex: 'a_mt4_login'
},
{
title: 'from地址',
dataIndex: 'from_address',
render: (_val) => (<div>{splitAddress(_val)}</div>)
render: (address) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<div>{splitAddress(address, 5)}</div>
<div style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => copy(address)}>
<CopyOutlined />
</div>
</div>
)
},
{
title: 'to地址',
dataIndex: 'to_address',
render: (_val) => (<div>{splitAddress(_val)}</div>)
render: (address) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<div>{splitAddress(address, 5)}</div>
<div style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => copy(address)}>
<CopyOutlined />
</div>
</div>
)
},
{
title: '充值状态',
dataIndex: 'status'
},
{
title: '链ID',

21
src/package/SimpleTrade/pages/client/user/index.tsx
View File

@ -41,10 +41,26 @@ const UserList: FC = () => {
title: 'A账号',
dataIndex: 'a_mt4_login'
},
{
title: 'A仓余额',
dataIndex: 'a_mt4_balance'
},
{
title: 'A仓订单数量',
dataIndex: 'a_product'
},
{
title: 'B账号',
dataIndex: 'b_mt4_login'
},
{
title: 'B仓余额',
dataIndex: 'b_mt4_balance'
},
{
title: 'B仓订单数量',
dataIndex: 'b_product'
},
{
title: '手数',
dataIndex: 'volume'
@ -58,7 +74,10 @@ const UserList: FC = () => {
},
{
title: '保险开关',
dataIndex: 'insurance'
dataIndex: 'insurance',
render: (status) => (
<div>{status === 1 ? '开' : '关'}</div>
)
},
{
title: '邀请码',

12
src/package/SimpleTrade/pages/client/withdraw/index.tsx
View File

@ -12,8 +12,8 @@ const WithdrawRecord: FC = () => {
const columns = [
{
title: '用户ID',
dataIndex: 'user_id'
title: '账号ID',
dataIndex: 'a_mt4_login'
},
{
title: '交易ID',
@ -27,10 +27,6 @@ const WithdrawRecord: FC = () => {
</div>
)
},
{
title: '账号ID',
dataIndex: 'login_id'
},
{
title: '链ID',
dataIndex: 'chain_id'
@ -56,8 +52,8 @@ const WithdrawRecord: FC = () => {
dataIndex: 'symbol'
},
{
title: '状态',
dataIndex: 'handle_status'
title: '提现状态',
dataIndex: 'status'
},
{
title: '处理时间',

38
src/package/SimpleTrade/pages/home/index.css
View File

@ -0,0 +1,38 @@
.home .box {
width: 100%;
margin-top: 20px;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
min-height: 280px;
}
.home .box .solid {
min-height: 200px;
width: 1px;
}
.home .box .img-box {
width: 60px;
height: 60px;
background-color: #44D600;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
.home .box .img-box img {
width: 30px;
height: 30px;
object-fit: cover;
}
.row {
display: flex;
}
.row-items {
display: flex;
align-items: center;
}
.row-between {
display: flex;
align-items: center;
justify-content: space-between;
}

47
src/package/SimpleTrade/pages/home/index.less
View File

@ -0,0 +1,47 @@
.home {
.box {
width: 100%;
margin-top: 20px;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
min-height: 280px;
.solid{
min-height: 200px;
width: 1px;
}
.img-box{
width: 60px;
height: 60px;
background-color: #44D600;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
img{
width: 30px;
height: 30px;
object-fit: cover;
}
}
}
}
.row{
display: flex;
}
.row-items{
display: flex;
align-items: center;
}
.row-between{
display: flex;
align-items: center;
justify-content: space-between;
}

266
src/package/SimpleTrade/pages/home/index.tsx
View File

@ -1,18 +1,262 @@
import React, { FC } from 'react'
import { Col, Row } from 'antd'
import React, { FC, useEffect, useState } from 'react'
import './index.less'
import { useSelector } from 'react-redux'
import api from '@/package/SimpleTrade/api'
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import weekday from "dayjs/plugin/weekday"
import localeData from "dayjs/plugin/localeData"
dayjs.extend(customParseFormat);
dayjs.extend(weekday);
dayjs.extend(localeData);
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const Home: FC = () => {
return (
<div style={{ height: '100vh', textAlign: 'center' }}>
<Row>
<Col span={12} flex={1}>
</Col>
<Col span={12}>
const theme = useSelector((state: any) => state.storeData.theme)
const [userTable, setUserTable] = useState([])
const [newToDay, setNewToDay] = useState(0) //今日新增
const [userTotal, setUserTotal] = useState(0) //用户统计
const start_time = dayjs().subtract(7, 'days')
const end_time = dayjs()
const [defaultValue, setDefaultValue] = useState([start_time, end_time] as any)
const [toDayTx, setToDayTx] = useState([
{ title: '今日订单金额', value: '0' },
{ title: '今日订单数量', value: '0' },
{ title: '盈利订单数量', value: '0', color: '#3BB900' },
{ title: '亏损订单数量', value: '0', color: '#F4002C' },
{ title: '盈利订单金额', value: '0', color: '#3BB900' },
{ title: '亏损订单金额', value: '0', color: '#F4002C' },
])
const [weekTx, setWeekTx] = useState([
{ title: '订单总金额', value: '0' },
{ title: '订单总数量', value: '0' },
{ title: '盈利订单数量', value: '0', color: '#3BB900' },
{ title: '亏损订单数量', value: '0', color: '#F4002C' },
{ title: '盈利订单金额', value: '0', color: '#3BB900' },
{ title: '亏损订单金额', value: '0', color: '#F4002C' },
])
const [transaction, setTransaction] = useState([])
// 用户统计
const getUserData = async () => {
const res: any = await api.user_statistics()
if (res.code === 0) {
setNewToDay(res.data.NewToday)
setUserTotal(res.data.total_amount)
setUserTable(res.data.AdminUserAmountList)
}
}
</Col>
</Row>
</div>
// 周期合约交易订单统计
const getWeekTxOrderStatic = async () => {
const start = Math.floor(defaultValue[0].valueOf() / 1000)
const end = Math.floor(defaultValue[1].valueOf() / 1000)
const res: any = await api.transaction_statistics({
end_time: end,
start_time: start,
type: 2
})
if (res.code === 0) {
weekTx[0].value = res.data.product_amount
weekTx[1].value = res.data.product_num
weekTx[2].value = res.data.profit_num
weekTx[3].value = res.data.loss_num
weekTx[4].value = res.data.profit_amount
weekTx[5].value = res.data.loss_amount
setWeekTx([...weekTx])
}
}
// 今日合约交易订单统计
const getDayTxOrderStatic = async () => {
const res: any = await api.transaction_statistics({
type: 1
})
console.log(res);
if (res.code === 0) {
toDayTx[0].value = res.data.product_amount
toDayTx[1].value = res.data.product_num
toDayTx[2].value = res.data.profit_num
toDayTx[3].value = res.data.loss_num
toDayTx[4].value = res.data.profit_amount
toDayTx[5].value = res.data.loss_amount
setToDayTx([...toDayTx])
}
}
// 充值提现统计
const getRechargeAndWithdraw = async () => {
const res: any = await api.recharge_withdraw_statistics()
if (res.code === 0) {
setTransaction(res.data)
}
console.log(res);
}
useEffect(() => {
getUserData()
getDayTxOrderStatic()
getRechargeAndWithdraw()
}, [])
useEffect(() => {
getWeekTxOrderStatic()
}, [defaultValue])
return (
<div className='home' style={{ minHeight: '80vh', backgroundColor: theme && '#fff' }}>
<h3>Hello, Randy!</h3>
<div>Today is a good day to start trading crypto assets!</div>
{/* */}
<div className='box' style={{ backgroundColor: theme ? '#f5f5f5' : '#333' }}>
<div style={{ fontWeight: 'bold' }}>用户统计</div>
<div className='row'>
<div style={{ flex: 3, marginTop: 30 }}>
<h2>{userTotal.toLocaleString()}</h2>
<div className='row-items' style={{ marginTop: 20 }}>
<div className='img-box'>
<img src={require('./vector.png')} alt="" />
</div>
<div style={{ marginLeft: 10 }}>
<div style={{ fontWeight: 'bold' }}>+{newToDay.toLocaleString()}</div>
<div style={{ fontSize: 12, marginTop: 5 }}>今日新增</div>
</div>
</div>
</div>
<div className='solid' style={{ backgroundColor: theme ? '#e8e8e8' : '#555' }}></div>
<div style={{ flex: 4, marginLeft: 20 }}>
<div className='row' style={{ textAlign: 'center' }}>
<div style={{ flex: 1 }}>类型</div>
<div style={{ flex: 1 }}>截止昨日</div>
<div style={{ flex: 1 }}>今日新增</div>
</div>
<div>
{
userTable.map((item, index) => (
<div key={index} className='row' style={{ textAlign: 'center', marginTop: 20 }}>
<div style={{ flex: 1 }}>{item.type}</div>
<div style={{ flex: 1 }}>
<div>{Number(item.yesterday_amount).toLocaleString()}</div>
<div>{item.yesterday_percentage}</div>
</div>
<div style={{ flex: 1, color: '#44D600' }}>
<div>{Number(item.new_today_amount).toLocaleString()}</div>
<div>{item.new_today_percentage}</div>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
{/* */}
<div className='box row' style={{ backgroundColor: theme ? '#f5f5f5' : '#333', marginTop: 30 }}>
<div style={{ flex: 3 }}>
<div style={{ fontWeight: 'bold', fontSize: 14 }}>今日合约交易订单统计</div>
<div style={{ marginTop: 20, textAlign: 'center', flexWrap: 'wrap' }} className='row-items'>
{
toDayTx.map((item, index) => (
<div key={index} style={{ width: '50%', marginTop: 10 }}>
<div style={{ fontSize: 14 }}>{item.title}</div>
<div style={{ fontWeight: 'bold', fontSize: 14, color: item.color }}>{Number(item.value).toLocaleString()}</div>
</div>
))
}
</div>
</div>
<div className='solid' style={{ backgroundColor: theme ? '#e8e8e8' : '#555', margin: '0 20px' }}></div>
<div style={{ flex: 4 }}>
<div className='row-between'>
<div className='row-items'>
<div style={{ fontWeight: 'bold', fontSize: 14 }}>周期合约交易订单统计</div>
<div style={{ marginLeft: 10 }}>
<RangePicker
defaultValue={defaultValue}
onChange={setDefaultValue}
format={dateFormat}
/>
</div>
</div>
<div className='row-items'>
<div>导出</div>
</div>
</div>
<div style={{ marginTop: 20, textAlign: 'center', flexWrap: 'wrap' }} className='row-items'>
{
weekTx.map((item, index) => (
<div key={index} style={{ width: '50%', marginTop: 10 }}>
<div style={{ fontSize: 14 }}>{item.title}</div>
<div style={{ fontWeight: 'bold', fontSize: 14, color: item.color }}>{Number(item.value).toLocaleString()}</div>
</div>
))
}
</div>
</div>
</div>
{/* */}
{transaction[0] && transaction[1] && <div className='box row' style={{ backgroundColor: theme ? '#f5f5f5' : '#333', marginTop: 30 }}>
<div style={{ flex: 4 }}>
<div style={{ fontWeight: 'bold', fontSize: 14 }}>{transaction[0].symbol} 充值提现</div>
{/* <div style={{ fontSize: 14, marginTop: 30 }}>净入金：<span style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>2131223</span></div>
<div style={{ fontSize: 14, marginTop: 30 }}>充值提现比：<span style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>150%</span></div> */}
<div className='row' style={{ textAlign: 'center', marginTop: 30 }}>
<div style={{ flex: 1 }}>
<div>总充值</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{Number(transaction[0].deposit_amount).toLocaleString()}</div>
</div>
<div style={{ flex: 1 }}>
<div>充值笔数</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{transaction[0].deposit_num}</div>
</div>
</div>
<div className='row' style={{ textAlign: 'center', marginTop: 20 }}>
<div style={{ flex: 1 }}>
<div>总提现</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{Number(transaction[0].withdrawal_amount).toLocaleString()}</div>
</div>
<div style={{ flex: 1 }}>
<div>提现笔数</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{transaction[0].withdrawal_num}</div>
</div>
</div>
</div>
<div className='solid' style={{ backgroundColor: theme ? '#e8e8e8' : '#555', margin: '0 20px' }}></div>
<div style={{ flex: 4 }}>
<div style={{ fontWeight: 'bold', fontSize: 14 }}>{transaction[1].symbol} 充值提现</div>
<div className='row' style={{ textAlign: 'center', marginTop: 30 }}>
<div style={{ flex: 1 }}>
<div>总充值</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{Number(transaction[1].deposit_amount).toLocaleString()}</div>
</div>
<div style={{ flex: 1 }}>
<div>充值笔数</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{transaction[1].deposit_num}</div>
</div>
</div>
<div className='row' style={{ textAlign: 'center', marginTop: 20 }}>
<div style={{ flex: 1 }}>
<div>总提现</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{Number(transaction[1].withdrawal_amount).toLocaleString()}</div>
</div>
<div style={{ flex: 1 }}>
<div>提现笔数</div>
<div style={{ fontSize: 20, color: '#3BB900', fontWeight: 'bold' }}>{transaction[1].withdrawal_num}</div>
</div>
</div>
</div>
</div>}
<div style={{ display: 'block', height: 30 }}></div>
</div >
)
}

BIN
src/package/SimpleTrade/pages/home/vector.png
View File

Side by Side

After

Width: 90  |  Height: 90  |  Size: 589 B

5
yarn.lock
View File

@ -4437,6 +4437,11 @@ date-fns@^1.27.2:
resolved "https://registry.nlark.com/date-fns/download/date-fns-1.30.1.tgz?cache=0&sync_timestamp=1620446304247&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdate-fns%2Fdownload%2Fdate-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
integrity sha1-LnG/CxGRU9u0zE6I2epaz7UNwFw=
dayjs@^1.11.10:
version "1.11.10"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.nlark.com/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1618847042350&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"

Write Preview
Loading…
Cancel
Save