From e7be30c7006981bf0fdba46fd7d7a013219955c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Thu, 23 Mar 2023 10:49:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A6=82=E8=A7=88=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard.ts          |   5 +
 src/api/index.ts              |   1 +
 src/pages/dashboard/index.tsx | 217 +++++++++++++++++++---------------
 src/utils/index.ts            |  18 +++
 4 files changed, 147 insertions(+), 94 deletions(-)
 create mode 100644 src/api/dashboard.ts

diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts
new file mode 100644
index 0000000..27bb381
--- /dev/null
+++ b/src/api/dashboard.ts
@@ -0,0 +1,5 @@
+import client from "./internal/httpClient";
+
+export function dashboardList() {
+  return client.get("/backend/v1/dashboard/index", {});
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 8ff0c83..ad717e8 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -12,3 +12,4 @@ export * as resource from "./resource";
 export * as upload from "./upload";
 export * as user from "./user";
 export * as appConfig from "./app-config";
+export * as dashboard from "./dashboard";
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index f808f25..403ef47 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -8,19 +8,28 @@ import iconN1 from "../../assets/images/dashboard/icon-n1.png";
 import iconN2 from "../../assets/images/dashboard/icon-n2.png";
 import iconN3 from "../../assets/images/dashboard/icon-n3.png";
 import { Footer } from "../../compenents/footer";
+import { dashboard } from "../../api/index";
+import { timeFormat } from "../../utils/index";
 
 export const Dashboard: React.FC<any> = () => {
   const navigate = useNavigate();
+  const [basicData, setBasicData] = useState<any>([]);
 
   useEffect(() => {
-    renderPieView({
-      videos_count: 30,
-      images_count: 10,
-    });
-    return () => {
-      window.onresize = null;
-    };
+    getData();
   }, []);
+  const getData = () => {
+    dashboard.dashboardList().then((res: any) => {
+      setBasicData(res.data);
+      renderPieView({
+        videos_count: res.data.resource_video_total,
+        images_count: res.data.resource_image_total,
+      });
+      return () => {
+        window.onresize = null;
+      };
+    });
+  };
 
   const renderPieView = (params: any) => {
     let num = params.videos_count + params.images_count;
@@ -124,6 +133,25 @@ export const Dashboard: React.FC<any> = () => {
     };
   };
 
+  const compareNum = (today: number, yesterday: number) => {
+    let num = today - yesterday;
+    if (num < 0) {
+      return (
+        <span className="c-green">
+          <i className={styles["down"]}>&#9660;</i>
+          {Math.abs(num)}
+        </span>
+      );
+    } else {
+      return (
+        <span className="c-red">
+          <i className={styles["up"]}>&#9650;</i>
+          {Math.abs(num)}
+        </span>
+      );
+    }
+  };
+
   return (
     <>
       <Row gutter={24}>
@@ -133,31 +161,32 @@ export const Dashboard: React.FC<any> = () => {
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>今日学习学员</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>300</div>
+                  <div className={styles["num"]}>
+                    {basicData.user_learn_today}
+                  </div>
                   <div className={styles["compare"]}>
                     <span className="mr-5">较昨日</span>
-                    <span className="c-green">
-                      <i className={styles["down"]}>&#9660;</i>100
-                    </span>
+                    {compareNum(
+                      basicData.user_learn_today,
+                      basicData.user_learn_yesterday
+                    )}
                   </div>
                 </div>
               </div>
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>总学员数</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>3000</div>
+                  <div className={styles["num"]}>{basicData.user_total}</div>
                   <div className={styles["compare"]}>
                     <span className="mr-5">较昨日</span>
-                    <span className="c-red">
-                      <i className={styles["up"]}>&#9650;</i>100
-                    </span>
+                    {compareNum(basicData.user_today, basicData.user_yesterday)}
                   </div>
                 </div>
               </div>
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>线上课数</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>20</div>
+                  <div className={styles["num"]}>{basicData.course_total}</div>
                 </div>
               </div>
             </div>
@@ -215,84 +244,78 @@ export const Dashboard: React.FC<any> = () => {
               </div>
             </div>
           </div>
-          <div className="playedu-main-top mt-24">
+          <div className="playedu-main-top mt-24" style={{ minHeight: 376 }}>
             <div className={styles["large-title"]}>今日学习排行</div>
-            <div className={styles["rank-list"]}>
-              <div className={styles["half-list"]}>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <img className={styles["item-icon"]} src={iconN1} alt="" />
-                    <div className={styles["item-name"]}>忻咏</div>
+            {basicData.user_learn_top10 &&
+              basicData.user_learn_top10.length > 0 && (
+                <div className={styles["rank-list"]}>
+                  <div className={styles["half-list"]}>
+                    {basicData.user_learn_top10.map(
+                      (item: any, index: number) =>
+                        index <= 4 && (
+                          <div key={item.id} className={styles["rank-item"]}>
+                            <div className={styles["left-item"]}>
+                              {index === 0 && (
+                                <img
+                                  className={styles["item-icon"]}
+                                  src={iconN1}
+                                  alt=""
+                                />
+                              )}
+                              {index === 1 && (
+                                <img
+                                  className={styles["item-icon"]}
+                                  src={iconN2}
+                                  alt=""
+                                />
+                              )}
+                              {index === 2 && (
+                                <img
+                                  className={styles["item-icon"]}
+                                  src={iconN3}
+                                  alt=""
+                                />
+                              )}
+                              {index > 2 && (
+                                <div className={styles["item-num"]}>
+                                  {index}
+                                </div>
+                              )}
+                              <div className={styles["item-name"]}>
+                                {item.user_id}
+                              </div>
+                            </div>
+                            <div className={styles["item-time"]}>
+                              {timeFormat(Number(item.duration) / 1000)}
+                            </div>
+                          </div>
+                        )
+                    )}
                   </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
+                  {basicData.user_learn_top10.length > 5 && (
+                    <div className={styles["half-list"]}>
+                      {basicData.user_learn_top10.map(
+                        (item: any, index: number) =>
+                          index > 4 && (
+                            <div key={item.id} className={styles["rank-item"]}>
+                              <div className={styles["left-item"]}>
+                                <div className={styles["item-num"]}>
+                                  {index}
+                                </div>
+                                <div className={styles["item-name"]}>
+                                  {item.user_id}
+                                </div>
+                              </div>
+                              <div className={styles["item-time"]}>
+                                {timeFormat(Number(item.duration) / 1000)}
+                              </div>
+                            </div>
+                          )
+                      )}
+                    </div>
+                  )}
                 </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <img className={styles["item-icon"]} src={iconN2} alt="" />
-                    <div className={styles["item-name"]}>蒋建</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <img className={styles["item-icon"]} src={iconN3} alt="" />
-                    <div className={styles["item-name"]}>谭茂</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>4</div>
-                    <div className={styles["item-name"]}>渠雅眉</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>5</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-              </div>
-              <div className={styles["half-list"]}>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>6</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>7</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>8</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>9</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-                <div className={styles["rank-item"]}>
-                  <div className={styles["left-item"]}>
-                    <div className={styles["item-num"]}>10</div>
-                    <div className={styles["item-name"]}>柴晨</div>
-                  </div>
-                  <div className={styles["item-time"]}>1小时24秒</div>
-                </div>
-              </div>
-            </div>
+              )}
           </div>
         </Col>
         <Col span={12}>
@@ -301,19 +324,25 @@ export const Dashboard: React.FC<any> = () => {
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>部门数</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>8</div>
+                  <div className={styles["num"]}>
+                    {basicData.department_total}
+                  </div>
                 </div>
               </div>
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>分类数</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>2</div>
+                  <div className={styles["num"]}>
+                    {basicData.resource_category_total}
+                  </div>
                 </div>
               </div>
               <div className={styles["label-item"]}>
                 <div className={styles["label"]}>管理员</div>
                 <div className={styles["info"]}>
-                  <div className={styles["num"]}>8</div>
+                  <div className={styles["num"]}>
+                    {basicData.admin_user_total}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8b88130..a468cf1 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -18,6 +18,24 @@ export function dateFormat(dateStr: string) {
   return moment(dateStr).format("YYYY-MM-DD HH:mm");
 }
 
+export function timeFormat(dateStr: number) {
+  var d = moment.duration(dateStr, "seconds");
+  let value =
+    Math.floor(d.asDays()) +
+    "天" +
+    d.hours() +
+    "时" +
+    d.minutes() +
+    "分" +
+    d.seconds() +
+    "秒";
+
+  if (Math.floor(d.asDays()) === 0) {
+    value = d.hours() + "时" + d.minutes() + "分" + d.seconds() + "秒";
+  }
+  return value;
+}
+
 export function generateUUID(): string {
   let guid = "";
   for (let i = 1; i <= 32; i++) {