feat: 并发限流上传

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>
   );
 };

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;
       }

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,
+  };
+};