From 29704a6197d881b857f692d54f148f06dc53245a Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Thu, 4 Apr 2024 04:09:17 +0800
Subject: [PATCH] fix: welcome page layout

---
 doc/api.md                  |   4 +-
 src/pages/Welcome/index.tsx | 115 +++++++++++++++++++++---------------
 2 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index c9a07e4..0c61a45 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -42,8 +42,10 @@ data:
 {
   "success": true,
   "data": {
-    "notInOreo": 114,
+    "todayPT": 114, // 今日预填写工单总数
     "totalPT": 514, // 所有预填写工单
+    "oreo": 93, // 加入 Oreo 工单数
+    "report": 8, // 今日反馈数
     "allSuccess": 1919, // 所有成功工单（包括 Oreo 内）
     "all": 2024 // 所有工单（包括 Oreo 内）
   }
diff --git a/src/pages/Welcome/index.tsx b/src/pages/Welcome/index.tsx
index 27708cf..857cc22 100644
--- a/src/pages/Welcome/index.tsx
+++ b/src/pages/Welcome/index.tsx
@@ -4,11 +4,9 @@ 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,
+    percent: percent / 100,
     width: 120,
     height: 120,
     color: ['#E8EFF5', frontColor],
@@ -16,7 +14,7 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
       {
         type: 'text',
         style: {
-          text: `${percent * 100}%`,
+          text: `${percent}%`,
           x: '50%',
           y: '50%',
           textAlign: 'center',
@@ -30,6 +28,24 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
   return <Tiny.Ring {...config} />;
 };
 
+interface IndexData {
+  todayPT: number;
+  report: number;
+  oreo: number;
+  totalPT: number;
+  allSuccess: number;
+  all: number;
+}
+
+const indexData: IndexData = {
+  todayPT: 14,
+  report: 8,
+  oreo: 93,
+  totalPT: 1145,
+  allSuccess: 1818,
+  all: 1919,
+};
+
 const Logs: React.FC = () => {
   const [responsive, setResponsive] = useState(false);
   return (
@@ -41,51 +57,56 @@ const Logs: React.FC = () => {
             setResponsive(offset.width < 596);
           }}
         >
-          <ProCard.Group direction={responsive ? 'column' : 'row'}>
-            <ProCard>
-              <Statistic title="今日预填写工单数" value={13} />
+          <ProCard split={responsive ? 'horizontal' : 'vertical'}>
+            <ProCard title="左侧详情" colSpan="48%">
+              左侧内容
             </ProCard>
-            <Divider type={responsive ? 'horizontal' : 'vertical'} />
-            <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 colSpan="20%">
+              <StatisticCard
+                style={{ marginTop: '2vh' }}
+                statistic={{
+                  title: '今日预填写工单数',
+                  value: indexData.todayPT,
+                  description: (
+                    <Statistic
+                      style={{ marginTop: '15vh' }}
+                      title="今日反馈数"
+                      value={indexData.report}
+                    />
+                  ),
+                }}
+              />
             </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>
+            <ProCard>
+              <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
+                <StatisticCard
+                  chart={percentRing(
+                    Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10),
+                    '#00CC66',
+                  )}
+                  statistic={{
+                    title: '加入 Oreo 工单数',
+                    value: indexData.oreo,
+                    description: <Statistic title="预填写工单总数" value={indexData.totalPT} />,
+                  }}
+                  chartPlacement="left"
+                />
+                <StatisticCard
+                  style={{ marginTop: '3vh' }}
+                  chart={percentRing(
+                    Math.round((indexData.allSuccess / indexData.all) * 1000) / 10,
+                    '#66AFF4',
+                  )}
+                  statistic={{
+                    title: '维修成功次数',
+                    value: indexData.allSuccess,
+                    description: <Statistic title="Oreo、ETA 总工单数" value={indexData.all} />,
+                  }}
+                  chartPlacement="left"
+                />
+              </StatisticCard.Group>
+            </ProCard>
+          </ProCard>
         </RcResizeObserver>
       </Card>
     </PageContainer>