From f5c6f757799ab70839e756c2270771e2df5b0838 Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Tue, 16 Apr 2024 20:47:54 +0800
Subject: [PATCH] feat: stats service in index page

---
 src/pages/Welcome/index.tsx | 76 +++++++++++++++----------------------
 src/services/api.ts         |  2 +-
 2 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/src/pages/Welcome/index.tsx b/src/pages/Welcome/index.tsx
index 6556955..eaef948 100644
--- a/src/pages/Welcome/index.tsx
+++ b/src/pages/Welcome/index.tsx
@@ -2,7 +2,7 @@ import { getStat } from '@/services/api';
 import type { TinyRingConfig } from '@ant-design/charts';
 import { Tiny } from '@ant-design/charts';
 import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
-import { Card, Statistic } from 'antd';
+import { Card, Statistic, message } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import { useLayoutEffect, useState } from 'react';
 
@@ -31,26 +31,10 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
   return <TinyRing {...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);
+  const [messageApi, contextHolder] = message.useMessage();
+
   const [todayPT, setTodayPT] = useState(0);
   const [report, setReport] = useState(0);
   const [oreo, setOreo] = useState(0);
@@ -59,18 +43,26 @@ const Logs: React.FC = () => {
   const [all, setAll] = useState(0);
 
   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);
-    })
+    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);
+      })
+      .catch((err) => {
+        messageApi.open({
+          type: 'error',
+          content: '获取失败！' + err,
+        });
+      });
   });
   return (
     <PageContainer>
+      {contextHolder}
       <Card style={{ color: '#f5f5f5' }}>
         <RcResizeObserver
           key="resize-observer"
@@ -79,52 +71,46 @@ const Logs: React.FC = () => {
           }}
         >
           <ProCard split={responsive ? 'horizontal' : 'vertical'}>
-            <ProCard colSpan="45%">
+            <ProCard colSpan="Auto">
               <ProCard hoverable>左侧内容</ProCard>
             </ProCard>
-            <ProCard colSpan="20%">
+            <ProCard colSpan="170px">
               <StatisticCard
                 hoverable
                 style={{ marginTop: '0vh' }}
                 statistic={{
                   title: '今日预填写工单数',
-                  value: indexData.todayPT,
+                  value: todayPT,
                   description: (
                     <Statistic
                       style={{ marginTop: '15vh', marginBottom: '8vh' }}
                       title="今日反馈数"
-                      value={indexData.report}
+                      value={report}
                     />
                   ),
                 }}
               />
             </ProCard>
-            <ProCard>
+            <ProCard colSpan="360px">
               <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
                 <StatisticCard
                   hoverable
-                  chart={percentRing(
-                    Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10),
-                    '#00CC66',
-                  )}
+                  chart={percentRing(Math.round(((oreo / totalPT) * 1000) / 10), '#00CC66')}
                   statistic={{
                     title: '加入 Oreo 工单数',
-                    value: indexData.oreo,
-                    description: <Statistic title="预填写工单总数" value={indexData.totalPT} />,
+                    value: oreo,
+                    description: <Statistic title="预填写工单总数" value={totalPT} />,
                   }}
                   chartPlacement="left"
                 />
                 <StatisticCard
                   hoverable
                   style={{ marginTop: '3vh' }}
-                  chart={percentRing(
-                    Math.round((indexData.allSuccess / indexData.all) * 1000) / 10,
-                    '#66AFF4',
-                  )}
+                  chart={percentRing(Math.round((allSuccess / all) * 1000) / 10, '#66AFF4')}
                   statistic={{
                     title: '维修成功次数',
-                    value: indexData.allSuccess,
-                    description: <Statistic title="Oreo、ETA 总工单数" value={indexData.all} />,
+                    value: allSuccess,
+                    description: <Statistic title="Oreo、ETA 总工单数" value={all} />,
                   }}
                   chartPlacement="left"
                 />
diff --git a/src/services/api.ts b/src/services/api.ts
index bcf53cb..123d5c6 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -37,7 +37,7 @@ export async function login(body: API.LoginParams, options?: { [key: string]: an
 export async function getStat(options?: { [key: string]: any }) {
   return request<{
     data: API.Stat;
-  }>('/stat', {
+  }>('/stats', {
     method: 'GET',
     ...(options || {}),
   });