feat: chart in welcome page

doc/api.md

@@ -34,7 +34,7 @@
 
 ## 主页面
 
-### 统计数据 `GET /admin/stats`
+### 统计数据 `GET /stats`
 
 data:
 
@@ -43,13 +43,32 @@ data:
   "success": true,
   "data": {
     "notInOreo": 114,
-    "total": 514
+    "totalPT": 514, // 所有预填写工单
+    "allSuccess": 1919, // 所有成功工单（包括 Oreo 内）
+    "all": 2024 // 所有工单（包括 Oreo 内）
   }
 }
 ```
 
 ### 当前值班信息 `GET /admin/duty/current`
 
+#### 正常值班
+
+data:
+
+```json
+{
+  "isNormalDuty": true,
+  "inDutyCnt": 3,
+  "otherDutyTime": "",
+  "offDutyReason": "",
+  "place": "204",
+  "dutyRecoverTime": ""
+}
+```
+
+#### 其他值班
+
 data:
 
 ```json
@@ -93,7 +112,6 @@ request:
 }
 ```
 
-
 #### 更新值班表 `POST /admin/sheet/update`
 
 request:
@@ -227,7 +245,7 @@ request:
   "current": 1,
   "pageSize": 10,
   "name?": "西西弗", // 如果不筛选则不出现在 request-body 内
-  "phone?": "18888888888", // 如果不筛选则不出现在 request-body 内
+  "phone?": "18888888888" // 如果不筛选则不出现在 request-body 内
 }
 ```
 
@@ -244,7 +262,7 @@ data:
       "phone": "13333333333",
       "time": "2024-03-07T17:52:48.523303",
       "text": "你们为什么修不好天选3的PD充电？"
-    },
+    }
     // ...
   ]
 }
@@ -288,7 +306,7 @@ data:
         "id": 514,
         "info": "何君琳"
       }
-    },
+    }
     // ...
   ]
 }

package.json

@@ -46,6 +46,7 @@
     "not ie <= 10"
   ],
   "dependencies": {
+    "@ant-design/charts": "^2.0.3",
     "@ant-design/icons": "^4.8.1",
     "@ant-design/pro-components": "^2.7.0",
     "@umijs/route-utils": "^2.2.2",

src/pages/Admin/Report/index.tsx

@@ -52,7 +52,7 @@ const Logs: React.FC = () => {
             },
             extra: {
               dataIndex: 'time',
-              render: (_, row) => {
+              render: (_: React.ReactNode, row: ReportItem) => {
                 return (
                   <div style={{ marginLeft: '3vh' }}>
                     {moment(row.time).format('YYYY-M-D HH:mm:ss')}

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,22 +43,50 @@ 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>
+            <StatisticCard
-              <Statistic title="冻结金额" value={112893.0} precision={2} />
+              chart={percentRing(0.372, '#00CC66')}
-            </ProCard>
+              statistic={{
-            <Divider type={responsive ? 'horizontal' : 'vertical'} />
+                title: '加入 Oreo 工单数',
-            <ProCard>
+                value: 93,
-              <Statistic title="信息完整度" value={93} suffix="/ 100" />
+                description: (
-            </ProCard>
+                  <>
-            <Divider type={responsive ? 'horizontal' : 'vertical'} />
+                    <Statistic title="预填写工单总数" value={1145} />
-            <ProCard>
+                  </>
-              <Statistic title="冻结金额" value={112893.0} />
+                ),
-            </ProCard>
+              }}
+              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>
   );