refactor: request in DutyInfo & Welcome

src/pages/Welcome/index.tsx

@@ -5,6 +5,7 @@ import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-component
 import { Card, Statistic, message } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import { useLayoutEffect, useState } from 'react';
+import { Stat } from './stat';
 
 const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
   const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
@@ -34,24 +35,21 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
 const Logs: React.FC = () => {
   const [responsive, setResponsive] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
-
-  const [todayPT, setTodayPT] = useState(0);
-  const [report, setReport] = useState(0);
-  const [oreo, setOreo] = useState(0);
-  const [totalPT, setTotalPT] = useState(0);
-  const [allSuccess, setAllSuccess] = useState(0);
-  const [all, setAll] = useState(0);
+  const [stat, setStat] = useState<Stat>({
+    todayPT: 0,
+    totalPT: 0,
+    oreo: 0,
+    report: 0,
+    allSuccess: 0,
+    all: 0,
+  });
+  const [loading, setLoading] = useState(true);
 
   useLayoutEffect(() => {
     getStat()
       .then((res) => {
-        const data = res.data;
-        setTodayPT(data.todayPT);
-        setReport(data.report);
-        setOreo(data.oreo);
-        setTotalPT(data.totalPT);
-        setAllSuccess(data.allSuccess);
-        setAll(data.all);
+        setStat(res.data);
+        setLoading(false);
       })
       .catch((err) => {
         messageApi.open({
@@ -63,62 +61,70 @@ const Logs: React.FC = () => {
   return (
     <PageContainer>
       {contextHolder}
-      <Card style={{ color: '#f5f5f5' }}>
-        <RcResizeObserver
-          key="resize-observer"
-          onResize={(offset) => {
-            setResponsive(offset.width < 596);
-          }}
-        >
-          <ProCard split={responsive ? 'horizontal' : 'vertical'}>
-            <ProCard colSpan="Auto">
-              <ProCard hoverable>左侧内容</ProCard>
-            </ProCard>
-            <ProCard colSpan="170px">
-              <StatisticCard
-                hoverable
-                style={{ marginTop: '0vh' }}
-                statistic={{
-                  title: '今日预填写工单数',
-                  value: todayPT,
-                  description: (
-                    <Statistic
-                      style={{ marginTop: '15vh', marginBottom: '8vh' }}
-                      title="今日反馈数"
-                      value={report}
-                    />
-                  ),
-                }}
-              />
-            </ProCard>
-            <ProCard colSpan="360px">
-              <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
+      {!loading && (
+        <Card style={{ color: '#f5f5f5' }}>
+          <RcResizeObserver
+            key="resize-observer"
+            onResize={(offset) => {
+              setResponsive(offset.width < 596);
+            }}
+          >
+            <ProCard split={responsive ? 'horizontal' : 'vertical'}>
+              <ProCard colSpan="Auto">
+                <ProCard hoverable>左侧内容</ProCard>
+              </ProCard>
+              <ProCard colSpan="170px">
                 <StatisticCard
                   hoverable
-                  chart={percentRing(Math.round(((oreo / totalPT) * 1000) / 10), '#00CC66')}
+                  style={{ marginTop: '0vh' }}
                   statistic={{
-                    title: '加入 Oreo 工单数',
-                    value: oreo,
-                    description: <Statistic title="预填写工单总数" value={totalPT} />,
+                    title: '今日预填写工单数',
+                    value: stat.todayPT,
+                    description: (
+                      <Statistic
+                        style={{ marginTop: '15vh', marginBottom: '8vh' }}
+                        title="今日反馈数"
+                        value={stat.report}
+                      />
+                    ),
                   }}
-                  chartPlacement="left"
                 />
-                <StatisticCard
-                  hoverable
-                  style={{ marginTop: '3vh' }}
-                  chart={percentRing(Math.round((allSuccess / all) * 1000) / 10, '#66AFF4')}
-                  statistic={{
-                    title: '维修成功次数',
-                    value: allSuccess,
-                    description: <Statistic title="Oreo、ETA 总工单数" value={all} />,
-                  }}
-                  chartPlacement="left"
-                />
-              </StatisticCard.Group>
+              </ProCard>
+              <ProCard colSpan="360px">
+                <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
+                  <StatisticCard
+                    hoverable
+                    chart={percentRing(
+                      Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
+                      '#00CC66',
+                    )}
+                    statistic={{
+                      title: '加入 Oreo 工单数',
+                      value: stat.oreo,
+                      description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
+                    }}
+                    chartPlacement="left"
+                  />
+                  <StatisticCard
+                    hoverable
+                    style={{ marginTop: '3vh' }}
+                    chart={percentRing(
+                      Math.round((stat.allSuccess / stat.all) * 1000) / 10,
+                      '#66AFF4',
+                    )}
+                    statistic={{
+                      title: '维修成功次数',
+                      value: stat.allSuccess,
+                      description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
+                    }}
+                    chartPlacement="left"
+                  />
+                </StatisticCard.Group>
+              </ProCard>
             </ProCard>
-          </ProCard>
-        </RcResizeObserver>
-      </Card>
+          </RcResizeObserver>
+        </Card>
+      )}
     </PageContainer>
   );
 };