From 09bcfb81b491de5456af0f391d212e0d6f7d667a Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Tue, 29 Aug 2023 17:28:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B9=B6=E5=8F=91=E9=99=90=E6=B5=81?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/Admin/Dicom/Upload/index.tsx  | 17 ++++++++--
 .../Admin/Dicom/Upload/limitConcurrency.ts    | 13 +++-----
 .../Admin/Dicom/Upload/useProgress.tsx        | 32 +++++++++++++++++++
 3 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 apps/dmp/src/modules/Admin/Dicom/Upload/useProgress.tsx

diff --git a/apps/dmp/src/modules/Admin/Dicom/Upload/index.tsx b/apps/dmp/src/modules/Admin/Dicom/Upload/index.tsx
index df02332..d33febe 100644
--- a/apps/dmp/src/modules/Admin/Dicom/Upload/index.tsx
+++ b/apps/dmp/src/modules/Admin/Dicom/Upload/index.tsx
@@ -7,6 +7,7 @@ import { Typography } from "antd";
 import { useState } from "react";
 import { User } from "@@/domain/User/entities/User";
 import { limitConcurrency } from "./limitConcurrency";
+import { useProgress } from "./useProgress";
 
 const { Text } = Typography;
 
@@ -27,6 +28,8 @@ const openOHIFViewer = (
 
 export const DicomUpload = (props: DicomUploadProps) => {
   const { UploadInput, fileCalculator, studys, isLoading } = useDicomUploader();
+  const { ProgressModal, showProgress, hideProgress, updatePercent } =
+    useProgress();
   const { dicomDomainService, userDomainService } = useDomain();
   const { dcmFileNum, totalFileNum, dcmFileSize } = fileCalculator;
   const [selectRows, setSelectedRows] = useState<Study[]>([]);
@@ -48,9 +51,16 @@ export const DicomUpload = (props: DicomUploadProps) => {
       openOHIFViewer(StudyInstanceUID, SeriesInstanceUID);
     } else {
       const uploadFunc = (f: File) => () => dicomDomainService.upload2Pacs(f);
-      limitConcurrency(series.subs.map(uploadFunc), 10, (completed, total) => {
-        console.log(`${completed} out of ${total} tasks completed.`);
-      });
+      showProgress();
+      limitConcurrency(
+        series.subs.map(uploadFunc),
+        10,
+        (completed, total) => {
+          console.log(`${completed} out of ${total} tasks completed.`);
+          updatePercent(Math.floor((completed / total) * 100));
+        },
+        () => hideProgress()
+      );
     }
   };
 
@@ -127,6 +137,7 @@ export const DicomUpload = (props: DicomUploadProps) => {
           }))}
         />
       </Modal>
+      <ProgressModal />
     </div>
   );
 };
diff --git a/apps/dmp/src/modules/Admin/Dicom/Upload/limitConcurrency.ts b/apps/dmp/src/modules/Admin/Dicom/Upload/limitConcurrency.ts
index e1c8e7e..973dfa4 100644
--- a/apps/dmp/src/modules/Admin/Dicom/Upload/limitConcurrency.ts
+++ b/apps/dmp/src/modules/Admin/Dicom/Upload/limitConcurrency.ts
@@ -1,16 +1,10 @@
 type PromiseFunction = () => Promise<any>;
 
-/**
- *
- * @param {Promise<Function>} tasks promise请求函数
- * @param {number} maxConcurrency 最大并发数
- * @param {} onProgress 完成任务回调
- * @returns
- */
 export async function limitConcurrency(
   tasks: PromiseFunction[],
   maxConcurrency: number,
-  onProgress?: (completed: number, total: number) => void
+  onProgress?: (completed: number, total: number) => void,
+  onComplete?: () => void
 ): Promise<any[]> {
   const results: any[] = new Array(tasks.length);
   let currentIndex = 0;
@@ -24,6 +18,9 @@ export async function limitConcurrency(
       if (index >= tasks.length) {
         if (results.length === tasks.length) {
           resolve(results);
+          if (onComplete) {
+            onComplete();
+          }
         }
         return;
       }
diff --git a/apps/dmp/src/modules/Admin/Dicom/Upload/useProgress.tsx b/apps/dmp/src/modules/Admin/Dicom/Upload/useProgress.tsx
new file mode 100644
index 0000000..cc572fa
--- /dev/null
+++ b/apps/dmp/src/modules/Admin/Dicom/Upload/useProgress.tsx
@@ -0,0 +1,32 @@
+import { useState, useCallback } from "react";
+import { Modal, Progress } from "antd";
+
+export const useProgress = () => {
+  const [visible, setVisible] = useState(false);
+  const [percent, setPercent] = useState(0);
+
+  const showProgress = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const hideProgress = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  const updatePercent = useCallback((newPercent: number) => {
+    setPercent(newPercent);
+  }, []);
+
+  const ProgressModal = () => (
+    <Modal open={visible} footer={null} closable={false}>
+      <Progress percent={percent} />
+    </Modal>
+  );
+
+  return {
+    ProgressModal,
+    showProgress,
+    hideProgress,
+    updatePercent,
+  };
+};