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([]); @@ -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) => { }))} /> + ); }; 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; -/** - * - * @param {Promise} 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 { 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 = () => ( + + + + ); + + return { + ProgressModal, + showProgress, + hideProgress, + updatePercent, + }; +};