Skip to content

J
jinfa-admin
Commit 8ca4edb6 authored by Bill's avatar Bill
Browse files
Options

修改首页，下拉到视图时再加载

parent 4687e646
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 140 deletions
src/global/config/global.d.ts
View file @ 8ca4edb6
......@@ -50,7 +50,7 @@ export interface ShopInfo {
type: number;
environment: number;
logoUrl: string;
describe: string;
describe?: any;
state: number;
url: string;
}
......
src/layouts/RightContent.tsx
View file @ 8ca4edb6
import React from 'react'
import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react'
import { Link, history } from 'umi'
import { Menu, Dropdown, List, Typography, Badge, Button, Avatar } from 'antd'
import { Menu, Dropdown, List, Avatar, Skeleton} from 'antd'
import { BellOutlined, CaretDownOutlined } from '@ant-design/icons'
import styles from './index.less'
import { removeAuth, getAuth } from '@/utils/auth'
import messageIcon1 from '@/asserts/home-icon-1.png'
import { PublicApi } from '@/services/api';
import moment from 'moment';
import msg_system from '@/asserts/msg_system.png'
import msg_platform from '@/asserts/msg_platform.png'
const RightContent: React.FC<{}> = (props) => {
const [visible, setVisible] = useState(false);
const [messageData, setMessageData] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const ws = useRef<WebSocket | null>(null);
const toLogin = () => {
removeAuth()
......@@ -24,39 +32,70 @@ const RightContent: React.FC<{}> = (props) => {
);
const userInfo = getAuth()
useEffect(() => {
if(visible) {
setLoading(true)
PublicApi.getReportMessagePlatformPage({current: '1', pageSize: '4'})
.then((data) => {
if(data.code === 1000) {
setLoading(false)
setMessageData(data.data.data);
}
})
}
}, [visible])
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km afterrafter outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
const webSocketInit = useCallback(() => {
console.log(ws.current)
if (!ws.current || ws.current.readyState === 3) {
ws.current = new WebSocket(`ws://10.0.0.25:8100/report/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}`);
ws.current.onopen = (e) => {
console.log(e)
}
ws.current.onmessage = (e) => {
console.log(e)
};
ws.current.onclose = (e) => {
console.log("关闭连接")
}
ws.current.onerror = (e) => {
console.log("socket 出错")
}
}
}, [ws]);
useLayoutEffect(() => {
// webSocketInit();
return () => {
ws.current?.close();
};
}, [ws, webSocketInit]);
const menuMessage = (
<div className={styles.noticeBox}>
<div className={styles.header}>消息列表</div>
<List
itemLayout="horizontal"
dataSource={data}
dataSource={messageData}
footer={
<a className={styles.messageFooter}>
<a className={styles.messageFooter} href="/message/messageList">
{"查看更多 ->"}
</a>
}
renderItem={item => {
console.log(item);
renderItem={(item:any) => {
return (
<List.Item>
<div className={styles.msgContainer}>
<div className={styles.msgItemIcon}>
<Avatar src={messageIcon1} />
</div>
<div>
<div className={styles.msgTitle}>订单支付</div>
<div className={styles.msgTime}>2020-08-25 12:58</div>
<Skeleton paragraph={{ rows: 1 }} loading={loading} active avatar>
<div className={styles.msgContainer}>
<div className={styles.msgItemIcon}>
<Avatar src={item.type == 1 ? msg_system : msg_platform} />
</div>
<div>
<div className={styles.msgTitle}>{item.title}</div>
<div className={styles.msgTime}>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
</div>
</div>
</div>
</Skeleton>
</List.Item>
)
}}
......@@ -66,13 +105,13 @@ const RightContent: React.FC<{}> = (props) => {
return <div className={styles.lxLayoutRight}>
<Link to="/home" className={styles.lxLink}>返回首页</Link>
<Dropdown overlay={menuMessage} trigger={['click']}>
<Dropdown overlay={menuMessage} trigger={['click']} visible={visible}>
<a
href=""
rel="noopener noreferrer"
className={styles.topMessage}
>
<BellOutlined />
<BellOutlined onClick={() => setVisible(!visible)}/>
<span className="pulse"></span>
</a>
</Dropdown>
......
src/layouts/index.less
View file @ 8ca4edb6
......@@ -90,18 +90,20 @@
border-radius: 4px;
box-shadow: 0 6px 16px -8px rgba(0,0,0,.08), 0 9px 28px 0 rgba(0,0,0,.05), 0 12px 48px 16px rgba(0,0,0,.03);
:global{
.ant-list {
width: 320px;
}
.ant-list-footer{
padding: 0;
}
.ant-list-item{
padding: 0;
}
.ant-skeleton {
width: 320px;
padding: 12px 18px;
}
}
h4{
padding-left: 24px;
border-bottom: 1px solid #f0f0f0;
}
.header {
padding: 17px 24px;
font-size: 14px;
......
src/layouts/index.less.d.ts
View file @ 8ca4edb6
......@@ -20,6 +20,14 @@ interface CssExports {
'lxLink': string;
'avatar': string;
'avatarWrap': string;
'topMessage': string,
'noticeBox': string,
'header': string,
'messageFooter': string,
'msgContainer': string,
'msgItemIcon': string,
'msgTitle': string,
'msgTime': string
}
export const cssExports: CssExports;
export default cssExports;
src/pages/home/common/interface.tsx
View file @ 8ca4edb6
......@@ -99,4 +99,15 @@ export interface IorderData {
* 年统计数
*/
yearList: Ilist[]
}
export interface ItodayAdd {
orderAmount: string,
orderGrowthRate: number,
memberCount: string,
memberGrowthRate: number,
commodityCount: number,
commodityGrowthRate: number,
shopCount: number,
shopGrowthRate: number
}
\ No newline at end of file
src/pages/home/components/OrderStatistics/index.tsx
View file @ 8ca4edb6
......@@ -50,7 +50,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
{
icon: totalIcon,
value: orderData.totalCount,
tips: `累计营业额（${orderData.totalAmount}单）`
tips: `累计营业额（${orderData.totalCount}单）`
}
]
return (
......@@ -63,7 +63,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
<Radio.Group value={timeRadio} buttonStyle="solid" size="small" onChange={handleChangeTime}>
<Radio.Button value={TimeEnum.WEEK}>周</Radio.Button>
<Radio.Button value={TimeEnum.MONTH}>月</Radio.Button>
<Radio.Button value={TimeEnum.YEAR}>日</Radio.Button>
<Radio.Button value={TimeEnum.YEAR}>年</Radio.Button>
</Radio.Group>
}
>
......
src/pages/home/components/TodayAdd/index.tsx
View file @ 8ca4edb6
import React from 'react';
import { Row, Col, Card } from 'antd';
import { CaretUpOutlined } from '@ant-design/icons';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import StatusTag from '@/components/StatusTag'
import styles from './index.less';
// 图标图片集
......@@ -8,38 +8,44 @@ import orderIcon from '@/asserts/home-icon-23.png'
import memberIcon from '@/asserts/home-icon-12.png'
import productIcon from '@/asserts/home-icon-10.png'
import brandIcon from '@/asserts/home-icon-11.png'
import { ItodayAdd } from '../../common/interface'
const TodayAdd: React.FC = () => {
const data = [
interface Iprops {
data: ItodayAdd
}
const TodayAdd: React.FC<Iprops> = (props) => {
const { data } = props;
const list = [
{
title: '今日新增订单（元）',
number: '102,086.00',
number: data.orderAmount,
icon: orderIcon,
percent: '3.4%'
percent: data.orderGrowthRate
},
{
title: '今日新增会员',
number: '45.00',
number: data.memberCount,
icon: memberIcon,
percent: '3.4%'
percent: data.memberGrowthRate
},
{
title: '今日新增商品',
number: '88.00',
number: data.commodityCount,
icon: productIcon,
percent: '3.4%'
percent: data.commodityGrowthRate
},
{
title: '今日新增品牌',
number: '20',
number: data.shopCount,
icon: brandIcon,
percent: '3.4%'
percent: data.shopGrowthRate
}
]
return (
<Row gutter={[24, 12]}>
{
data.map((item, key) => {
list.map((item, key) => {
return (
<Col span={6} key={key}>
<div className={styles.homeCard}>
......@@ -53,7 +59,20 @@ const TodayAdd: React.FC = () => {
</div>
</div>
<div className={styles.footer}>
<StatusTag title={<><CaretUpOutlined />{item.percent}</>} type="success" />
<StatusTag
title={
<>
{
item.percent >= 0
? <CaretUpOutlined />
: <CaretDownOutlined />
}
{item.percent} %
</>
}
type={item.percent >= 0 ? "success" : "danger"}
/>
<span>&nbsp;&nbsp;相比昨日</span>
</div>
</div>
......
src/pages/home/index.tsx
View file @ 8ca4edb6
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useRef } from 'react'
import { Card, Space, Row, Col, List } from 'antd'
import { RightCircleFilled, RightOutlined } from '@ant-design/icons'
import styles from './index.less'
......@@ -11,52 +11,69 @@ import DataCenter from './components/DataCenter'
import RiskCenter from './components/RiseCenter';
import { PublicApi } from '@/services/api'
import sideIcon from '../../asserts/home-icon-28.png'
import { Ilist, ImemberData, IorderData } from './common/interface';
const memberDataInit: ImemberData = {
todayCount: 0,
weekCount: 0,
monthCount: 0,
totalCount: 0,
weekList: [],
monthList: [],
yearList: []
}
import { ImemberData, IorderData, ItodayAdd } from './common/interface';
import {useInViewport} from '@umijs/hooks';
const Home: React.FC<{}> = () => {
const [memberData, setMemberData] = useState<ImemberData>(memberDataInit);
const [orderData, setOrderData] = useState<IorderData | {}>({})
const [memberData, setMemberData] = useState<ImemberData | {}>({});
const [orderData, setOrderData] = useState<IorderData | {}>({});
const [todayAddData, setTodayAddData] = useState<ItodayAdd | {}>({})
//@ts-ignore
const [orderInViewPort] = useInViewport(() => document.querySelector('#order'));
const [orderStatus, setOrderStatus] = useState({
hasGetData: false,
loading: false,
})
/**
* 获取注册会员图表
* 顶部新增统计
*/
useEffect(() => {
PublicApi.getReportPlatformHomeGetMemberRegisterList()
.then(({data, code}) => {
if(code === 1000) {
setMemberData(data);
///report/platform/home/getNewlyAddedDayReport
PublicApi.getReportPlatformHomeGetNewlyAddedDayReport()
.then((data) => {
if(data.code === 1000) {
setTodayAddData(data.data)
}
})
}, [])
/**
* 订单图表
* 获取注册会员图表
*/
useEffect(() => {
///report/platform/home/getOrderList
PublicApi.getReportPlatformHomeGetOrderList()
PublicApi.getReportPlatformHomeGetMemberRegisterList()
.then(({data, code}) => {
if(code === 1000) {
console.log(data);
setOrderData(data);
setMemberData(data);
}
})
}, [])
/**
* 订单图表， 当页面滚动到视图的时候才加载数据
*/
useEffect(() => {
if(orderInViewPort && !orderStatus.hasGetData) {
setOrderStatus((state) => ({...state, loading: true }))
PublicApi.getReportPlatformHomeGetOrderList()
.then(({data, code}) => {
if(code === 1000) {
setOrderStatus((state) => ({...state, loading: false, hasGetData: true }))
setOrderData(data);
}
})
}
}, [orderInViewPort])
return (
// 全局统计
<div>
<Space direction="vertical" style={{width:'100%'}}>
<TodayAdd />
<TodayAdd data={todayAddData} />
</Space>
{/* 会员统计 */}
<Space direction="vertical" style={{width:'100%'}}>
......@@ -105,75 +122,78 @@ const Home: React.FC<{}> = () => {
</Row>
</Space>
{/* 订单统计 */}
<Space direction="vertical" style={{width:'100%', height: '100%'}}>
<Row gutter={[24, 12]}>
<Col span={6}>
<Row gutter={[0, 0]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理交易"
bordered={false}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<Row gutter={[24, 12]}>
<Col span={6}>
<Row>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理交易"
bordered={false}
>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
<Col span={24} style={{marginTop: 26}}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理售后"
bordered={false}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
<Col span={24} style={{marginTop: 26}}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理售后"
bordered={false}
>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
</Row>
</Col>
<Col span={18} >
<OrderStatistics orderData={orderData}/>
</Col>
</Row>
</Space>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
</Row>
</Col>
<Col span={18}>
<div id="order">
<OrderStatistics orderData={orderData}/>
</div>
</Col>
</Row>
</Space>
{/* 商品品牌统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<StatisticsColumn />
......@@ -187,8 +207,8 @@ const Home: React.FC<{}> = () => {
<DataCenter />
</Space>
{/* 风控中心 */}
<Space direction="vertical" style={{width:'100%'}}>
<RiskCenter />
<Space direction="vertical" style={{width:'100%'}} >
<RiskCenter />
</Space>
</div>
);
......
src/pages/message/index.tsx
View file @ 8ca4edb6
......@@ -47,7 +47,7 @@ const Message: React.FC<{}> = () => {
const renderMessage = (data) => {
return (
<>
<StatusTag type={data.type} title={data.type === 1 ? '系统消息' : '平台消息'} />
<StatusTag type={data.type == 1 ? 'primary' : 'success'} title={data.type === 1 ? '系统消息' : '平台消息'} />
<span className={styles.messageTitle}>{data.title || ''}</span>
<span className={styles.messageText}>{data.content || ''}</span>
</>
......@@ -76,13 +76,13 @@ const Message: React.FC<{}> = () => {
total: dataSource?.totalCount || 0,
showTotal: showTotal
}}
renderItem={item => (
renderItem={(item: any) => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.type == 1 ? msg_system : msg_platform} />}
title={renderMessage(item)}
/>
<div>{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
<div>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
</List.Item>
)}
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment