开发: 添加及修改路由

src/pages/Workbench/index.tsx

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