Public/scrm.antd
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开发: 添加客户列表

Browse Source
This commit is contained in:
zhengw
2023-04-18 17:28:06 +08:00
parent 97348fea9e
commit 079739223a
10 changed files with 456 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/pages/Workbench/index.tsx
View File

@@ -1,3 +1,4 @@
import { post } from '@/services/ajax';
import { Area, Line } from '@ant-design/charts';
import { BarChartOutlined, CommentOutlined, TeamOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
@@ -6,31 +7,84 @@ import { DataItemCard } from './components/DataItemCard';
import { DataSumItemCard } from './components/DataSumItemCard';
import styles from './index.module.scss';
const Workbench: React.FC = () => {
const [data, setData] = useState([]);
type ICustChartItem = {
name: string;
num: number;
time: string;
};
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);
});
type IData = {
overView: {
custs_total: number;
groups_members_total: number;
groups_total: number;
};
custsInfo: {
month_custs: number;
today_custs: number;
today_loss: number;
today_net_growth: number;
};
groupsInfo: {
today_diss_groups: number;
today_diss_groups_members: number;
today_groups: number;
today_groups_members: number;
};
custsChart: ICustChartItem[];
groupsChart: ICustChartItem[];
};
const Workbench: React.FC = () => {
const [data, setData] = useState<IData>({
overView: {
custs_total: 0,
groups_members_total: 0,
groups_total: 0,
},
custsInfo: {
month_custs: 0,
today_custs: 0,
today_loss: 0,
today_net_growth: 0,
},
groupsInfo: {
today_diss_groups: 0,
today_diss_groups_members: 0,
today_groups: 0,
today_groups_members: 0,
},
custsChart: [],
groupsChart: [],
});
const getWorkBenchInfo = () => {
post({ url: '/WorkBench/Info' }).then((res) => {
if (res.err_code == 0) {
if (res.over_view) {
data.overView = res.over_view;
}
if (res.groups_info) {
data.groupsInfo = res.groups_info;
}
if (res.custs_info) {
data.custsInfo = res.custs_info;
}
if (Array.isArray(res.custs_chart)) {
data.custsChart = res.custs_chart;
}
if (Array.isArray(res.groups_chart)) {
data.groupsChart = res.groups_chart;
}
setData({ ...data });
}
});
};
useEffect(() => {
asyncFetch();
getWorkBenchInfo();
}, []);
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' }}>
@@ -42,67 +96,72 @@ const Workbench: React.FC = () => {
padding: '0 24px',
}}
>
<span style={{ fontSize: 16 }}>数据总览</span>
<span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span>
<span style={{ fontSize: 18 }}>数据总览</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}
count={data.overView.custs_total}
/>
<DataSumItemCard
title="客群数量"
content="当前员工权限范围内的全部客群数量"
icon={<CommentOutlined className={styles.icon} />}
count={111}
count={data.overView.groups_total}
/>
<DataSumItemCard
title="客群成员总数"
content="当前员工权限范围内客群成员的总数(含员工)(含重复)"
icon={<BarChartOutlined className={styles.icon} />}
count={111}
count={data.overView.groups_members_total}
/>
</div>
</div>
<div className={styles.dataSum}>
<div style={{ fontSize: 16 }}>客户数据</div>
<div style={{ fontSize: 18 }}>客户数据</div>
<div className={styles.dataCardBox}>
<DataItemCard
title="今日新增客户"
content="当前员工权限范围内今日添加的客户数(含重复及流失)"
count={11}
count={data.custsInfo.today_custs}
/>
<span style={{ width: 16 }} />
<DataItemCard
{/* <DataItemCard
title="今日跟进客户"
content="当前员工权限范围内今日处于跟进中状态的客户数(含重复)"
count={11}
/>
<span style={{ width: 16 }} />
/> */}
{/* <span style={{ width: 16 }} /> */}
<DataItemCard
title="今日净增客户"
content="当前员工权限范围内今日添加的客户数(不含重复及流失)"
count={11}
count={data.custsInfo.today_net_growth}
/>
<span style={{ width: 16 }} />
<DataItemCard
title="今日流失客户"
content="当前员工权限范围内的流失的全部客户数量"
count={11}
count={data.custsInfo.today_loss}
/>
<span style={{ width: 16 }} />
<DataItemCard
title="本月新增客户"
content="当前员工权限范围内本月添加的客户数(含重复及流失)"
count={data.custsInfo.month_custs}
/>
{/* <DataItemCard
title="昨日发送申请"
content="当前员工数权限范围内主动向客户发起的申请数"
count={11}
/>
/> */}
</div>
<Line
data={data}
xField="year"
yField="gdp"
data={data.custsChart}
xField="time"
yField="num"
seriesField="name"
// yAxis= {{
// label: {
@@ -123,37 +182,37 @@ const Workbench: React.FC = () => {
/>
</div>
<div className={styles.dataSum}>
<div style={{ fontSize: 16 }}>客群数据</div>
<div style={{ fontSize: 18 }}>客群数据</div>
<div className={styles.dataCardBox}>
<DataItemCard
title="今日新增客群"
content="当前员工权限范围内今日创建的客群数"
count={11}
count={data.groupsInfo.today_groups}
/>
<span style={{ width: 16 }} />
<DataItemCard
title="今日解散客群"
content="当前员工权限范围内今日解散的客群数"
count={11}
count={data.groupsInfo.today_diss_groups}
/>
<span style={{ width: 16 }} />
<DataItemCard
title="今日新增成员"
content="当前员工权限范围内今日新增客群成员数(含员工)"
count={11}
count={data.groupsInfo.today_groups_members}
/>
<span style={{ width: 16 }} />
<DataItemCard
title="今日退出成员"
content="当前员工权限范围内今日退出客群成员数(含员工)"
count={11}
count={data.groupsInfo.today_diss_groups_members}
/>
</div>
<Area
data={dataArea}
xField="date"
yField="value"
seriesField="type"
data={data.groupsChart}
xField="time"
yField="num"
seriesField="name"
smooth={true}
legend={{ position: 'top' }}
isStack={false}