下载添加文件大小提醒、下载进度提示

src/utils/stream.js

@@ -39,9 +39,14 @@ function createFloders(obj, arr, r) {
         createFloders(obj[i], arr, r)
     }
 }
-function zipFilesJsZip(zipName, files, obj = {}) {
+function zipFilesJsZip(zipName, files, obj = {}, callback) {
     return new Promise(resolve => {
         try {
+            if (callback) {
+                callback({
+                    type: 'start'
+                })
+            }
             console.log("同步下载打包开始时间：" + new Date());
             files = formatFiles(files)
             const zip = new JSZip();
@@ -50,11 +55,22 @@ function zipFilesJsZip(zipName, files, obj = {}) {
                 let res = getFile(file.url).then(r => {
                     const arr = file.name.split('/')
                     createFloders(obj, arr, r)
+                    if (callback) {
+                        callback({
+                            type: 'downLoad',
+                            data: r
+                        })
+                    }
                     // zip.file(fileName, r, { binary: true });
                 })
                 all.push(res)
             })
             Promise.all(all).then(() => {
+                if (callback) {
+                    callback({
+                        type: 'downLoaded',
+                    })
+                }
                 addFilesRecursively(zip, obj)
                 zip.generateAsync({
                     type: "blob",
@@ -63,10 +79,13 @@ function zipFilesJsZip(zipName, files, obj = {}) {
                         level: 9               // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                     }
                 }).then((res) => {
-                    FileSaver.saveAs(res, zipName, () => {
+                    if (callback) {
-                        resolve(true)
+                        callback({
-                        console.log("同步下载打包结束时间：" + new Date());
+                            type: 'zipEnd',
-                    }) // 利用file-saver保存文件
+                        })
+                    }
+                    console.log("同步下载打包结束时间：" + new Date());
+                    FileSaver.saveAs(res, zipName) // 利用file-saver保存文件
                 })
             })
         } catch (err) {
@@ -171,8 +190,8 @@ function decodeUtf8(bytes) {
     str2.pop();
     return str2.join("/") + '/' + name;
 }
-export async function downLoadFile(file, name, type = 'file') {
+export async function downLoadFile(file, name, type = 'file', callback) {
-    if (type === 'zip') return await zipFilesJsZip(name, file, {});
+    if (type === 'zip') return await zipFilesJsZip(name, file, {}, callback);
     return await updateFile(file, name)
 
 }

src/views/trials/trials-inspection/index.vue

@@ -214,6 +214,16 @@
     <el-dialog title="" :visible.sync="RecordVisible" :fullscreen="true">
       <downloadRecord :isSystem="true" v-if="RecordVisible" />
     </el-dialog>
+    <el-dialog :title="$t('dialog:title:downLoadProgress')" :visible.sync="downloadVisible" width="30%"
+      :before-close="handleClose">
+      <div v-if="downloadType == 'downLoad' || downloadType == 'start'">
+        <span style="margin-bottom: 5px;">{{ $t('dialog:sattus:downLoading') }}</span>
+        <el-progress :percentage="percentage"></el-progress>
+      </div>
+      <div v-else>
+        <span>{{ $t('dialog:sattus:ziping') }}</span>
+      </div>
+    </el-dialog>
   </BaseContainer>
 </template>
 <script>
@@ -287,7 +297,12 @@ export default {
       // pacs拉取列表
       pullTrialsVisible: false,
       hospitalGroupList: [],
-      studyAll: false
+      studyAll: false,
+
+      downloadVisible: false,
+      downloadType: '',
+      percentage: 0,
+      downLoadImageCount: 0
     }
   },
   created() {
@@ -297,6 +312,13 @@ export default {
     this.getHospitalGroupList()
   },
   methods: {
+    handleClose(done) {
+      this.downLoadType = ''
+      this.percentage = 0
+      this.downLoadImageCount = 0
+      this.downloadVisible = false
+      done()
+    },
     async getDownloadPatientStudyInfo(arr) {
       try {
         let data = {
@@ -312,22 +334,55 @@ export default {
         })
         let res = await getDownloadPatientStudyInfo(data)
         if (res.IsSuccess) {
-          this.downloadId = res.OtherInfo
+          let confirm = await this.$confirm(this.$t('trials:imageSummary:confirm:space').replace('xxx', this.formatSize(res.OtherInfo.ImageSize)))
-          this.downloadImage(res.Result)
+          if (!confirm) return false
+          this.downloadId = res.OtherInfo.downloadId
+          this.downloadImage(res.Result, res.OtherInfo)
         }
       } catch (err) {
         console.log(err)
       }
     },
+    formatSize(size, fixed = 2) {
+      if (isNaN(parseFloat(size))) return ''
+      let kbSize = size / 1024
+      if (kbSize <= 1024) {
+        return `${kbSize.toFixed(fixed)}KB`
+      }
+      let mbSize = kbSize / 1024
+      return `${mbSize.toFixed(fixed)}MB`
+    },
     // 打包下载
-    async downloadImage(data) {
+    async downloadImage(data, OtherInfo) {
       try {
         let { files, name } = this.formatDownloadFile(data)
-        let res = await downLoadFile(files, name, 'zip')
+        let res = await downLoadFile(files, name, 'zip', (data) => {
+          let { type } = data
+          this.downloadType = type
+          if (type === 'start') {
+            this.downloadVisible = true
+          }
+          if (type === 'downLoad') {
+            this.downLoadImageCount++
+            if (this.downLoadImageCount >= OtherInfo.ImageCount) {
+              this.downLoadImageCount = OtherInfo.ImageCount
+              this.percentage = 100
+            } else {
+              this.percentage = (((this.downLoadImageCount / OtherInfo.ImageCount).toFixed(2)) * 100).toFixed(0)
+            }
+
+          }
+          if (type === 'downLoaded') {
+          }
+          if (type === 'zipEnd') {
+            this.downloadVisible = false
+            if (this.downloadId) {
+              this.downloadImageSuccess()
+            }
+          }
+        })
+
 
-        if (res && this.downloadId) {
-          this.downloadImageSuccess()
-        }
       } catch (err) {
         console.log(err)
       }