feat: chart in welcome page

src/pages/Welcome/index.tsx

@@ -1,10 +1,35 @@
-import { PageContainer, ProCard } from '@ant-design/pro-components';
+import { Tiny } from '@ant-design/charts';
+import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
 import { Card, Statistic } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import { useState } from 'react';
 
 const { Divider } = ProCard;
 
+const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
+  const config = {
+    percent,
+    width: 120,
+    height: 120,
+    color: ['#E8EFF5', frontColor],
+    annotations: [
+      {
+        type: 'text',
+        style: {
+          text: `${percent * 100}%`,
+          x: '50%',
+          y: '50%',
+          textAlign: 'center',
+          fontSize: 16,
+          fontStyle: 'bold',
+        },
+      },
+    ],
+  };
+
+  return <Tiny.Ring {...config} />;
+};
+
 const Logs: React.FC = () => {
   const [responsive, setResponsive] = useState(false);
   return (
@@ -18,24 +43,52 @@ const Logs: React.FC = () => {
         >
           <ProCard.Group direction={responsive ? 'column' : 'row'}>
             <ProCard>
-              <Statistic title="今日UV" value={79.0} precision={2} />
+              <Statistic title="今日预填写工单数" value={13} />
             </ProCard>
             <Divider type={responsive ? 'horizontal' : 'vertical'} />
-            <ProCard>
-              <Statistic title="冻结金额" value={112893.0} precision={2} />
-            </ProCard>
-            <Divider type={responsive ? 'horizontal' : 'vertical'} />
-            <ProCard>
-              <Statistic title="信息完整度" value={93} suffix="/ 100" />
-            </ProCard>
-            <Divider type={responsive ? 'horizontal' : 'vertical'} />
-            <ProCard>
-              <Statistic title="冻结金额" value={112893.0} />
-            </ProCard>
+            <StatisticCard
+              chart={percentRing(0.372, '#00CC66')}
+              statistic={{
+                title: '加入 Oreo 工单数',
+                value: 93,
+                description: (
+                  <>
+                    <Statistic title="预填写工单总数" value={1145} />
+                  </>
+                ),
+              }}
+              chartPlacement="left"
+            />
           </ProCard.Group>
         </RcResizeObserver>
+        <RcResizeObserver
+          key="resize-observer"
+          onResize={(offset) => {
+            setResponsive(offset.width < 596);
+          }}
+        >
+          <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
+            <ProCard>
+              <Statistic title="今日反馈数" value={8} />
+            </ProCard>
+            <Divider type={responsive ? 'horizontal' : 'vertical'} />
+            <StatisticCard
+              chart={percentRing(0.642, '#66AFF4')}
+              statistic={{
+                title: '维修成功次数',
+                value: 1818,
+                description: (
+                  <>
+                    <Statistic title="Oreo、ETA 总工单数" value={1919} />
+                  </>
+                ),
+              }}
+              chartPlacement="left"
+            />
+          </StatisticCard.Group>
+        </RcResizeObserver>
       </Card>
     </PageContainer>
   );
 };
-export default Logs;
+export default Logs;