开发: 添加及修改路由
This commit is contained in:
zhengw
27
src/pages/Workbench/components/DataItemCard.tsx
Normal file
27
src/pages/Workbench/components/DataItemCard.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { Popover } from 'antd';
|
||||
import React from 'react';
|
||||
import CountUp from 'react-countup';
|
||||
import styles from '../index.module.scss';
|
||||
|
||||
type IProps = {
|
||||
title: string;
|
||||
content: string;
|
||||
count: number;
|
||||
};
|
||||
|
||||
export const DataItemCard: React.FC<IProps> = (props) => {
|
||||
return (
|
||||
<div className={styles.dataCard}>
|
||||
<div>
|
||||
<span style={{ marginRight: 8 }}>{props.title}</span>
|
||||
<Popover placement="topLeft" content={props.content}>
|
||||
<ExclamationCircleOutlined style={{ cursor: 'pointer', color: '#999' }} />
|
||||
</Popover>
|
||||
</div>
|
||||
<div className={styles.dataCount}>
|
||||
<CountUp end={props.count} duration={2}></CountUp>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
30
src/pages/Workbench/components/DataSumItemCard.tsx
Normal file
30
src/pages/Workbench/components/DataSumItemCard.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { Popover } from 'antd';
|
||||
import React from 'react';
|
||||
import CountUp from 'react-countup';
|
||||
import styles from '../index.module.scss';
|
||||
type IProps = {
|
||||
title: string;
|
||||
content: string;
|
||||
count: number;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
export const DataSumItemCard: React.FC<IProps> = (props) => {
|
||||
return (
|
||||
<div className={styles.dataItem}>
|
||||
<div className={styles.dataIconBox}>{props.icon}</div>
|
||||
<div>
|
||||
<div>
|
||||
<span style={{ marginRight: 8 }}>{props.title}</span>
|
||||
<Popover placement="topLeft" content={props.content}>
|
||||
<ExclamationCircleOutlined style={{ cursor: 'pointer', color: '#999' }} />
|
||||
</Popover>
|
||||
</div>
|
||||
<div className={styles.dataCount}>
|
||||
<CountUp end={props.count} duration={2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
48
src/pages/Workbench/index.module.scss
Normal file
48
src/pages/Workbench/index.module.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.dataSum {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dataItem {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
border-right: 1px solid #ddd;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.dataIconBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 16px;
|
||||
background-color: #edf2f9;
|
||||
border-radius: 12px;
|
||||
|
||||
.icon {
|
||||
color: #1890ff;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.dataCount {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.dataCardBox {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dataCard {
|
||||
padding: 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
166
src/pages/Workbench/index.tsx
Normal file
166
src/pages/Workbench/index.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { Area, Line } from '@ant-design/charts';
|
||||
import { BarChartOutlined, CommentOutlined, TeamOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { DataItemCard } from './components/DataItemCard';
|
||||
import { DataSumItemCard } from './components/DataSumItemCard';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const Workbench: React.FC = () => {
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const asyncFetch = () => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
|
||||
.then((response) => response.json())
|
||||
.then((json) => setData(json))
|
||||
.catch((error) => {
|
||||
console.log('fetch data failed', error);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
asyncFetch();
|
||||
}, []);
|
||||
|
||||
const [dataArea, setDataArea] = useState([
|
||||
{ type: '订单数', date: '2021-02-01', value: 400 },
|
||||
{ type: '订单数', date: '2021-02-05', value: 900 },
|
||||
{ type: '订单数', date: '2021-02-08', value: 300 },
|
||||
{ type: '收衣数', date: '2021-02-01', value: 700 },
|
||||
{ type: '收衣数', date: '2021-02-05', value: 500 },
|
||||
{ type: '收衣数', date: '2021-02-08', value: 1000 },
|
||||
]);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className={styles.dataSum} style={{ padding: '24px 0' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 24,
|
||||
padding: '0 24px',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 16 }}>数据总览</span>
|
||||
<span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<DataSumItemCard
|
||||
title="客户数量"
|
||||
content="当前员工权限范围内的全部客户数量(含重复)"
|
||||
icon={<TeamOutlined className={styles.icon} />}
|
||||
count={111}
|
||||
/>
|
||||
<DataSumItemCard
|
||||
title="客群数量"
|
||||
content="当前员工权限范围内的全部客群数量"
|
||||
icon={<CommentOutlined className={styles.icon} />}
|
||||
count={111}
|
||||
/>
|
||||
<DataSumItemCard
|
||||
title="客群成员总数"
|
||||
content="当前员工权限范围内客群成员的总数(含员工)(含重复)"
|
||||
icon={<BarChartOutlined className={styles.icon} />}
|
||||
count={111}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.dataSum}>
|
||||
<div style={{ fontSize: 16 }}>客户数据</div>
|
||||
<div className={styles.dataCardBox}>
|
||||
<DataItemCard
|
||||
title="今日新增客户"
|
||||
content="当前员工权限范围内今日添加的客户数(含重复及流失)"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日跟进客户"
|
||||
content="当前员工权限范围内今日处于跟进中状态的客户数(含重复)"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日净增客户"
|
||||
content="当前员工权限范围内今日添加的客户数(不含重复及流失)"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日流失客户"
|
||||
content="当前员工权限范围内的流失的全部客户数量"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="昨日发送申请"
|
||||
content="当前员工数权限范围内主动向客户发起的申请数"
|
||||
count={11}
|
||||
/>
|
||||
</div>
|
||||
<Line
|
||||
data={data}
|
||||
xField="year"
|
||||
yField="gdp"
|
||||
seriesField="name"
|
||||
// yAxis= {{
|
||||
// label: {
|
||||
// formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
|
||||
// },
|
||||
// },}
|
||||
legend={{
|
||||
position: 'top',
|
||||
}}
|
||||
smooth={true}
|
||||
// @TODO 后续会换一种动画方式
|
||||
animation={{
|
||||
appear: {
|
||||
animation: 'path-in',
|
||||
duration: 3000,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.dataSum}>
|
||||
<div style={{ fontSize: 16 }}>客群数据</div>
|
||||
<div className={styles.dataCardBox}>
|
||||
<DataItemCard
|
||||
title="今日新增客群"
|
||||
content="当前员工权限范围内今日创建的客群数"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日解散客群"
|
||||
content="当前员工权限范围内今日解散的客群数"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日新增成员"
|
||||
content="当前员工权限范围内今日新增客群成员数(含员工)"
|
||||
count={11}
|
||||
/>
|
||||
<span style={{ width: 16 }} />
|
||||
<DataItemCard
|
||||
title="今日退出成员"
|
||||
content="当前员工权限范围内今日退出客群成员数(含员工)"
|
||||
count={11}
|
||||
/>
|
||||
</div>
|
||||
<Area
|
||||
data={dataArea}
|
||||
xField="date"
|
||||
yField="value"
|
||||
seriesField="type"
|
||||
smooth={true}
|
||||
legend={{ position: 'top' }}
|
||||
isStack={false}
|
||||
/>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Workbench;
|
||||
Reference in New Issue
Block a user