添加首页统计

package.json

@@ -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",

src/package/SimpleTrade/api/index.ts

@@ -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)
   }
+
 }

src/package/SimpleTrade/pages/client/recharge/index.tsx

@@ -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',

src/package/SimpleTrade/pages/client/user/index.tsx

@@ -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: '邀请码',

src/package/SimpleTrade/pages/client/withdraw/index.tsx

@@ -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: '处理时间',

src/package/SimpleTrade/pages/home/index.css

@@ -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;
+}

src/package/SimpleTrade/pages/home/index.less

@@ -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;
+}

src/package/SimpleTrade/pages/home/index.tsx

@@ -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 = () => {
+
+  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)
+    }
+  }
+
+  // 周期合约交易订单统计
+  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 style={{ height: '100vh', textAlign: 'center' }}>
-      <Row>
-        <Col span={12} flex={1}>
-         
-        </Col>
-        <Col span={12}>
-         
-        </Col>
-      </Row>
-    </div>
+    <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 >
   )
 }
 

yarn.lock

@@ -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"