添加多帧预览进度条功能

src/store/modules/reading.js

@@ -190,6 +190,7 @@ const actions = {
   },
   getMasterSeries({ state }, obj) {
     return new Promise(resolve => {
+      console.log('getMasterSeries')
       var seriesInfo = {}
       var i = state.visitTaskList.findIndex(i => i.VisitTaskId === obj.visitTaskId)
       getReadingVisitStudyList(obj.trialId, obj.visitId, obj.visitTaskId).then(res => {
@@ -216,17 +217,20 @@ const actions = {
             series.InstanceInfoList.forEach(instance => {
               if (instance.NumberOfFrames && instance.NumberOfFrames > 1) {
                 for (let i = 0; i < instance.NumberOfFrames; i++) {
-                  const path = `${instance.Path}?frame=${i}&instanceId=${instance.Id}`
+                  const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${i}&instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=0|0`
-                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${path}`)
+                  imageIds.push(imageId)
                 }
               } else {
-                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}`)
+                const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=0|0`
+                imageIds.push(imageId)
               }
+              instance.ImageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=0|0`
               instanceList.push(instance.Id)
             })
             seriesList.push({
               isDicom: study.IsDicom,
               imageIds: imageIds,
+              instanceInfoList: series.InstanceInfoList,
               instanceList: instanceList,
               seriesId: series.Id,
               imageIdIndex: 0,
@@ -731,6 +735,7 @@ const actions = {
     })
   },
   getStudyInfo({ state }, obj) {
+    console.log('getStudyInfo')
     return new Promise(resolve => {
       var index = state.visitTaskList.findIndex(i => i.VisitTaskId === obj.visitTaskId)
       if (state.visitTaskList[index].studyListInit) {
@@ -763,12 +768,16 @@ const actions = {
               series.InstanceInfoList.forEach(instance => {
                 if (instance.NumberOfFrames && instance.NumberOfFrames > 1) {
                   for (let i = 0; i < instance.NumberOfFrames; i++) {
-                    const path = `${instance.Path}?frame=${i}&instanceId=${instance.Id}`
+                    const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${i}&instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=${studyIndex}|${seriesIndex}`
-                    imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${path}`)
+                    imageIds.push(imageId)
                   }
+                  instance.ImageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${0}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=0|0`
                 } else {
-                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}`)
+                  const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=${studyIndex}|${seriesIndex}`
+                  imageIds.push(imageId)
+                  instance.ImageId = imageId
                 }
+
                 instanceList.push(instance.Id)
               })
               seriesList.push({

src/views/dicom-show/dicom-study.vue

@@ -84,23 +84,17 @@
                             </div>
 
                           </div>
-                          <div v-if="item.keySeries" style="padding: 1px;color:red">
-                            Key Images
-                          </div>
-                          <div v-else style="padding: 1px;">
-                            #{{ item.seriesNumber }}
-                          </div>
                           <div v-show="item.instanceCount" style="padding: 1px;">
                             {{ item.modality }}: {{ item.instanceCount }} image
                           </div>
                           <div v-show="!item.keySeries && item.sliceThickness" style="padding: 1px;">
-                            T: {{ item.sliceThickness }}
+                            T: {{ parseFloat(item.sliceThickness).toFixed(2) }}
                           </div>
                           <div v-show="!item.keySeries &&item.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                             {{ item.description }}
                           </div>
                           <div v-if="!item.keySeries" style="padding: 1px;">
-                            {{ item.prefetchInstanceCount }}/{{ item.instanceCount }}
+                            {{ item.imageloadedArr.length }}/{{ item.instanceCount }}
                           </div>
 
                         </div>
@@ -124,8 +118,8 @@
                           />
                         </div>
                       </div>
-                      <div v-if="item.prefetchInstanceCount>0 && item.prefetchInstanceCount<item.instanceCount">
+                      <div v-if="item.prefetchInstanceCount>0 && item.prefetchInstanceCount<item.instanceCount * 100">
-                        <el-progress :percentage="parseInt(((item.prefetchInstanceCount/item.instanceCount)*100).toFixed(2))" />
+                        <el-progress :percentage="parseInt((item.prefetchInstanceCount/item.instanceCount).toFixed(2))" />
                       </div>
 
                     </div>
@@ -197,7 +191,8 @@ export default {
       showDelete: false,
       loading: false,
       imageList: [],
-      showSeriesList: []
+      showSeriesList: [],
+      currentLoadIns: []
     }
   },
   created: function() {
@@ -221,6 +216,7 @@ export default {
     } else if (this.type === 'Share') {
       this.loadStudy()
     }
+    cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
   },
   beforeDestroy() {
     requestPoolManager.stopTaskTimer()
@@ -245,16 +241,15 @@ export default {
         if (data.IsSuccess) {
           const { Result } = data
           var seriesList = []
-          Result.forEach(function(item) {
+          Result.forEach((item, index) => {
             const imageIds = []
             item.InstanceInfoList.forEach(i => {
               if (i.NumberOfFrames && i.NumberOfFrames > 1) {
                 for (let j = 0; j < i.NumberOfFrames; j++) {
-                  const path = `${i.Path}?frame=${j}&instanceId=${i.Id}`
+                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?frame=${j}&instanceId=${i.Id}&seriesIndex=${index}`)
-                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${path}`)
                 }
               } else {
-                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}`)
+                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}&seriesIndex=${index}`)
               }
             })
             var subjectVisitId = scope.$router.currentRoute.query.subjectVisitId
@@ -318,11 +313,11 @@ export default {
         res.Result.forEach(instance => {
           if (instance.NumberOfFrames > 1) {
             for (let i = 0; i < instance.NumberOfFrames; i++) {
-              imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}?frame=${i}`)
+              imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}?frame=${i}&instanceId=${instance.Id}&seriesIndex=0`)
             }
             isExistMutiFrames = true
           } else {
-            imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}`)
+            imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}&seriesIndex=0`)
           }
           instanceInfoList.push({ Id: instance.Id, InstanceNumber: instance.InstanceNumber, NumberOfFrames: instance.NumberOfFrames, Path: instance.Path })
         })
@@ -376,11 +371,10 @@ export default {
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
-          const path = `${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}`
+          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}&seriesIndex=${seriesIndex}`)
-          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
         }
       } else {
-        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}`)
+        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}&seriesIndex=${seriesIndex}`)
       }
       const seriesInfo = {
         trialId: series.trialId,
@@ -523,31 +517,44 @@ export default {
       }).catch(() => {})
     },
     loadAllImages() {
+      const seriesIndex = this.seriesList.findIndex(i => i.loadStatus === false)
+      if (seriesIndex === -1) return
+      const series = this.seriesList[seriesIndex]
       var priority = new Date().getTime()
-      this.seriesList.forEach((series, index) => {
+      for (let i = 0; i < series.imageIds.length; i++) {
-        series.imageIds.forEach(imageId => {
+        const imageId = series.imageIds[i]
+        if (series.isExistMutiFrames) {
+          const params = this.getInstanceInfo(imageId)
+          if (params.frame && params.frame > 0) {
+            continue
+          }
+        }
         var p = null
         if (this.firstInstanceId === imageId) {
           p = priority * 100
         } else {
           p = priority - 1
         }
-          // this.load(imageId, series.seriesId, priority)
+        this.imageList.push({ imageId: imageId, seriesId: series.seriesId, seriesIndex: seriesIndex, priority: p })
-          this.imageList.push({ imageId: imageId, seriesId: series.seriesId, seriesIndex: index, priority: p })
+      }
-        })
-      })
       if (this.imageList.length > 0) {
         this.loopLoad()
       }
     },
+    getInstanceInfo(imageId) {
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      return params
+    },
     loopLoad() {
       if (this.imageList.length > 0) {
         requestPoolManager.startTaskTimer()
         console.log('loopLoad')
         this.imageList.map(image => {
-          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
+          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority)
-            this.imageLoaded(image, res.data.string('x0020000e'))
-          })
         })
         requestPoolManager.sortTaskPool()
         this.imageList = []
@@ -630,6 +637,45 @@ export default {
 
       return 0
     },
+    cornerstoneimageloadprogress(e) {
+      const imageId = e.detail.imageId
+      const percentComplete = e.detail.percentComplete
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      if (this.visitTaskId === params.visitTaskId) {
+        const seriesIndex = params.seriesIndex
+        var prefetchInstanceCount = this.seriesList[seriesIndex].prefetchInstanceCount
+        var instanceCount = this.seriesList[seriesIndex].instanceCount
+        if (this.seriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
+          const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
+          if (i > -1) {
+            prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
+            this.currentLoadIns[i].percentComplete = percentComplete
+            if (percentComplete === 100) {
+              this.currentLoadIns.splice(i, 1)
+            }
+          } else {
+            if (percentComplete !== 100) {
+              this.currentLoadIns.push({ imageId, percentComplete })
+            }
+            prefetchInstanceCount = prefetchInstanceCount + percentComplete
+          }
+          this.seriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
+          if (percentComplete >= 100) {
+            this.seriesList[seriesIndex].imageloadedArr.push(imageId)
+          }
+        }
+        if (prefetchInstanceCount >= instanceCount * 100) {
+          this.seriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
+          // 设置当前序列状态为已下载完成
+          this.seriesList[seriesIndex].loadStatus = true
+          this.loadAllImages()
+        }
+      }
+    },
     cornerstoneImageLoaded(e) {
       if (this.firstInstanceId === e.detail.image.imageId && !this.isStartLoad) {
         // 初始化图像加载完成时，自动下载

src/views/dicom-show/dicom-visit.vue

@@ -68,7 +68,7 @@
                                       :key="instance.Id"
                                       class="frame_content"
                                       :style="{'margin-bottom':idx<series.instanceInfoList.length-1? '5px':'0px'}"
-                                      @click="showMultiFrames(series, i, instance)"
+                                      @click="showMultiFrames(index,series, i, instance)"
                                     >
                                       <!-- <div>
                                         <img
@@ -104,7 +104,7 @@
                                 </div>
                               </el-tooltip>
                               <div style="padding: 1px;">
-                                {{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
+                                {{ series.imageloadedArr.length }}/{{ series.instanceCount }}
                               </div>
                               <div />
                             </div>
@@ -131,8 +131,8 @@
                           <!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
                           <el-progress v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" :percentage="Number(series.prefetchInstanceCount/series.instanceCount)*100" />
                         </div> -->
-                          <div v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount">
+                          <div v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount * 100">
-                            <el-progress :percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))" />
+                            <el-progress :percentage="parseInt((series.prefetchInstanceCount/series.instanceCount).toFixed(2))" />
                           </div>
 
                         </div>
@@ -146,7 +146,7 @@
               <el-tab-pane :label="$t('trials:dicom-show:relatedVisit')" name="relation-study" class="pane-relation-wrapper">
                 <div class="viewerSidethumbinner">
                   <el-collapse v-model="relationActiveName" @change="handelRelationActiveChange">
-                    <el-collapse-item v-for="(study) in relationStudyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
+                    <el-collapse-item v-for="(study,studyIndex) in relationStudyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
                       <template slot="title">
 
                         <div class="text-desc">
@@ -205,7 +205,7 @@
                                       :key="instance.Id"
                                       class="frame_content"
                                       :style="{'margin-bottom':idx<seriesItem.instanceInfoList.length-1? '5px':'0px'}"
-                                      @click="showMultiFrames(seriesItem, i, instance)"
+                                      @click="showMultiFrames(studyIndex,seriesItem, index, instance)"
                                     >
                                       <!-- <div>
                                         <img
@@ -295,7 +295,8 @@ export default {
       imageList: [],
       activeNames: [],
       relationActiveName: [],
-      showSeriesList: []
+      showSeriesList: [],
+      currentLoadIns: []
     }
   },
   mounted() {
@@ -312,6 +313,7 @@ export default {
     this.showDelete = parseInt(this.$router.currentRoute.query.showDelete)
     // cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
     this.getStudiesInfo()
+    cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
   },
   beforeDestroy() {
     requestPoolManager.stopTaskTimer()
@@ -321,7 +323,7 @@ export default {
     getStudiesInfo() {
       this.studyList = []
       getVisitStudyList(this.trialId, this.subjectVisitId, this.isReading).then(res => {
-        res.Result.forEach((study) => {
+        res.Result.forEach((study,studyIndex) => {
           const data = {}
           data.StudyId = study.StudyId
           data.StudyCode = study.StudyCode
@@ -331,16 +333,15 @@ export default {
           data.InstanceCount = study.InstanceCount
           data.PreviewImageCount = 0
           var seriesList = []
-          study.SeriesList.forEach((series) => {
+          study.SeriesList.forEach((series,seriesIndex) => {
             const imageIds = []
             series.InstanceInfoList.forEach(i => {
               if (i.NumberOfFrames && i.NumberOfFrames > 1) {
                 for (let j = 0; j < i.NumberOfFrames; j++) {
-                  const path = `${i.Path}?frame=${j}&instanceId=${i.Id}`
+                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${i.Path}?frame=${j}&instanceId=${i.Id}&idx=${studyIndex}|${seriesIndex}`)
-                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
                 }
               } else {
-                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}`)
+                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}&idx=${studyIndex}|${seriesIndex}`)
               }
             })
             seriesList.push({
@@ -392,16 +393,15 @@ export default {
         requestPoolManager.changePriority(series.seriesId)
       }
     },
-    showMultiFrames(series, seriesIndex, instanceInfo) {
+    showMultiFrames(studyIndex,series, seriesIndex, instanceInfo) {
       this.currentSeriesIndex = seriesIndex
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
-          const path = `${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}`
+          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}&idx=${studyIndex}|${seriesIndex}`)
-          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
         }
       } else {
-        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}`)
+        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}&idx=${studyIndex}|${seriesIndex}`)
       }
       const seriesInfo = {
         trialId: series.trialId,
@@ -526,16 +526,15 @@ export default {
           if (data.Result != null && data.Result.length > 0) {
             var seriesList = []
             const res = data.Result
-            res.forEach(function(item) {
+            res.forEach((item,seriesIndex)=> {
               const imageIds = []
               item.InstanceInfoList.forEach(i => {
                 if (i.NumberOfFrames && i.NumberOfFrames > 1) {
                   for (let j = 0; j < i.NumberOfFrames; j++) {
-                    const path = `${i.Path}?frame=${j}&instanceId=${i.Id}`
+                    imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?frame=${j}&instanceId=${i.Id}&idx=${index}|${seriesIndex}`)
-                    imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${path}`)
                   }
                 } else {
-                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}`)
+                  imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${i.Path}?instanceId=${i.Id}&idx=${index}|${seriesIndex}`)
                 }
               })
               seriesList.push({
@@ -583,54 +582,50 @@ export default {
       }
     },
     loadAllImages() {
+      var seriesList = this.studyList.map(s => s.SeriesList).flat()
+      const seriesIndex = seriesList.findIndex(i => i.loadStatus === false)
+      if (seriesIndex === -1) return
+      const series = seriesList[seriesIndex]
       var priority = parseInt(new Date().getTime())
-      this.studyList.map((study, studyIndex) => {
+      for (let i = 0; i < series.imageIds.length; i++) {
-        study.SeriesList.map((series, seriesIndex) => {
+        const imageId = series.imageIds[i]
-          series.imageIds.map(imageId => {
+        if (series.isExistMutiFrames) {
+          const params = this.getInstanceInfo(imageId)
+          if (params.frame && params.frame > 0) {
+            continue
+          }
+        }
         var p = null
         if (this.firstInstanceId === imageId) {
           p = priority * 100
         } else {
           p = priority - 1
         }
-            this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex, seriesIndex, priority: p })
+        this.imageList.push({ imageId: imageId, seriesId: series.seriesId, seriesIndex: seriesIndex, priority: p })
-          })
+      }
-          // if (!series.loadStatus && series.seriesId !== this.firstSeriesId) {
-          //   series.imageIds.map(imageId => {
-          //     // imageIds.push({ imageId: image, seriesId: series.seriesId, priority })
-          //     this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex, seriesIndex, priority })
-          //   })
-          // }
-        })
-      })
       if (this.imageList.length > 0) {
         this.loopLoad()
       }
       // requestPoolManager.setPendingList(imageIds)
     },
+    getInstanceInfo(imageId) {
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      return params
+    },
     loopLoad() {
       if (this.imageList.length > 0) {
         requestPoolManager.startTaskTimer()
         this.imageList.map(image => {
-          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
+          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority)
-            this.imageLoaded(image, res.data.string('x0020000e'))
-          })
         })
         requestPoolManager.sortTaskPool()
         this.imageList = []
       }
     },
-    load(imageId, seriesId, priority = 999) {
-      return new Promise((resolve, reject) => {
-        requestPoolManager.loadAndCacheImagePlus(imageId, seriesId, priority).then(res => {
-          if (!res) return
-          this.imageLoaded(imageId, res.data.string('x0020000e'))
-          resolve(res)
-        }).catch(e => {
-          reject(e)
-        })
-      })
-    },
     // load(imageId, priority = 999) {
     //   return new Promise((resolve, reject) => {
     //     const imageTask = this.buildImageRequestTask(imageId, { priority })
@@ -673,47 +668,43 @@ export default {
         }
       }
     },
-    // instance下载成功回调
+    cornerstoneimageloadprogress(e){
-    cornerstoneImageLoaded(e) {
+      const imageId = e.detail.imageId
-      if (e.detail.image.imageId.includes(this.firstInstanceId) && !this.isStartLoad) {
+      const percentComplete = e.detail.percentComplete
-        // 初始化图像加载完成时，自动下载
+      const params = {}
-        this.loadAllImages()
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
-        this.isStartLoad = true
+      for (const [key, value] of searchParams.entries()) {
-        // requestPoolManager.executeTask()
+        params[key] = value
       }
-      const uri = e.detail.image.sharedCacheKey
+      if (this.visitTaskId === params.visitTaskId) {
-      const index = this.cachedImages.findIndex(item => item.uri === uri)
+        const studyIndex = params.idx.split('|')[0]
-      if (index === -1) {
+        const seriesIndex = params.idx.split('|')[1]
-        this.cachedImages.push({ uri: uri, timestamp: new Date().getTime() })
+        var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
-      } else {
+        var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
-        this.cachedImages[index].timestamp = new Date().getTime()
-      }
-      var imageId = e.detail.image.imageId
-      var seriesUid = e.detail.image.data.string('x0020000e')
-      var studyIndex = -1
-      var seriesIndex = -1
-      for (let i = 0; i < this.studyList.length; ++i) {
-        for (let j = 0; j < this.studyList[i].SeriesList.length; ++j) {
-          if (this.studyList[i].SeriesList[j].seriesUid === seriesUid) {
-            studyIndex = i
-            seriesIndex = j
-            break
-          }
-        }
-        if (studyIndex > 0) break
-      }
-      if (seriesIndex < 0) return
-
-      const imageIdIndex = this.studyList[studyIndex].SeriesList[seriesIndex].imageIds.indexOf(imageId)
-      if (imageIdIndex < 0) return
         if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
-        ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
+          const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
+          if (i > -1) {
+            prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
+            this.currentLoadIns[i].percentComplete = percentComplete
+            if (percentComplete === 100) {
+              this.currentLoadIns.splice(i, 1)
+            }
+          } else {
+            if (percentComplete !== 100) {
+              this.currentLoadIns.push({ imageId, percentComplete })
+            }
+            prefetchInstanceCount = prefetchInstanceCount + percentComplete
+          }
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
+          if (percentComplete >= 100) {
             this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
-
+          }
-        if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
+        }
-          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
+        if (prefetchInstanceCount >= instanceCount * 100) {
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
           // 设置当前序列状态为已下载完成
           this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
+          this.loadAllImages()
         }
       }
     }

src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue

@@ -477,7 +477,7 @@ export default {
   },
   methods: {
     goViewer(e) {
-      console.log(this.$refs['sliderBox'].clientHeight)
+      // console.log(this.$refs['sliderBox'].clientHeight)
       var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
       this.height = height
       var index = Math.trunc(this.stack.imageIds.length * this.height / 100)
@@ -546,7 +546,7 @@ export default {
     },
 
     mouseUp(e) {
-      console.log('mouseUp')
+      // console.log('mouseUp')
       if (this.readingTaskState >= 2) return
       this.image = e.detail.image
       this.getToolStateInfo(e)
@@ -672,7 +672,7 @@ export default {
       this.sliderInfo.isMove = false
     },
     getMeasureData() {
-      console.log('getMeasureData')
+      // console.log('getMeasureData')
       var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
       this.measureData = this.visitTaskList[idx].MeasureData
       const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
@@ -814,7 +814,7 @@ export default {
       }
     },
     stackScrollCallback(e) {
-      console.log('stackScrollCallback')
+      // console.log('stackScrollCallback')
       const { detail } = e
       if (this.isScrollSync && this.currentDicomCanvasIndex === this.canvasIndex) {
         this.scrollSyncInfo.canvasIndex = this.canvasIndex
@@ -998,7 +998,7 @@ export default {
         if (i > -1) {
           var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
           if (idx > -1) {
-            console.log('mouseClick')
+            // console.log('mouseClick')
             DicomEvent.$emit('setCollapseActive', this.measureData[idx])
             if (this.readingTaskState < 2) {
               const measureData = {}
@@ -1127,7 +1127,7 @@ export default {
       })
     },
     onFirstImageLoaded(image) {
-      console.log('onFirstImageLoaded')
+      // console.log('onFirstImageLoaded')
       return new Promise(async resolve => {
         const element = this.$refs.canvas
         var viewport = cornerstone.getDefaultViewportForImage(this.canvas, image)
@@ -1206,7 +1206,7 @@ export default {
       })
     },
     onNewImage(e) {
-      console.log('cornerstonenewimage')
+      // console.log('cornerstonenewimage')
       if (this.isCurrentTask && this.readingTaskState < 2) {
         this.resetHideMeasureArr()
       }
@@ -1319,7 +1319,7 @@ export default {
       var element = cornerstone.getEnabledElement(this.canvas)
       var viewport = element.viewport
       // 测量完成
-      console.log('completed')
+      // console.log('completed')
       this.activeTool = 1
       this.activeToolName = ''
       var { imageId } = element.image
@@ -1437,7 +1437,7 @@ export default {
     },
     onMeasurementmodified(e) {
       // 移动
-      console.log('modified')
+      // console.log('modified')
       if (this.readingTaskState >= 2) return
       const { measurementData, toolType } = e.detail
       var element = cornerstone.getEnabledElement(this.canvas)

src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue

@@ -103,7 +103,10 @@
                   <p v-show="series.sliceThickness && !study.IsCriticalSequence">
                     T: {{ parseFloat(series.sliceThickness).toFixed(digitPlaces) }}
                   </p>
-                  <p v-show="series.instanceCount">
+                  <p v-show="series.instanceCount && series.imageloadedArr.length < series.instanceCount">
+                    {{ series.modality }}: {{ series.imageloadedArr.length }}/{{ series.instanceCount }} image
+                  </p>
+                  <p v-show="series.instanceCount && series.imageloadedArr.length >= series.instanceCount">
                     {{ series.modality }}: {{ series.instanceCount }} image
                   </p>
 
@@ -118,9 +121,9 @@
                   </div>
                 </div>
               </div>
-              <div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" style="width: 100%;">
+              <div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount * 100" style="width: 100%;">
                 <el-progress
-                  :percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))"
+                  :percentage="parseInt((series.prefetchInstanceCount / series.instanceCount).toFixed(2))"
                 />
               </div>
 
@@ -215,7 +218,8 @@ export default {
       srDialogVisible: false,
       srInfo: {},
       digitPlaces: 2,
-      visitTaskIdx: -1
+      visitTaskIdx: -1,
+      currentLoadIns: []
     }
   },
 
@@ -263,6 +267,7 @@ export default {
     //     this.studyList = this.visitTaskList[idx].StudyList
     //   }
     // })
+    cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
     cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
     // cornerstone.events.addEventListener('cornerstoneimagecachefull', this.cornerstoneimagecachefull)
     // cornerstone.events.addEventListener('cornerstoneimagecachechanged', this.cornerstoneimagecachechanged)
@@ -282,7 +287,10 @@ export default {
       this.getInitSeries().then((res) => {
         requestPoolManager.startTaskTimer()
         res.map((item) => {
-          this.loadInitialImage(item)
+          // this.loadInitialImage(item)
+          const imageId = item.imageIds[item.imageIdIndex]
+          const p = parseInt(new Date().getTime())
+          requestPoolManager.loadAndCacheImagePlus(imageId, item.seriesId, p * 100)
         })
         var i = res.findIndex(s => s.isCurrentTask)
         if (i > -1) {
@@ -291,71 +299,18 @@ export default {
             this.measureData = this.visitTaskList[idx].MeasureData
             this.studyList = this.visitTaskList[idx].StudyList
             var priority = parseInt(new Date().getTime())
+            if (res[i].isExistMutiFrames) {
+              res[i].instanceInfoList.map(image => {
+                priority--
+                this.imageList.push({ imageId: image.ImageId, seriesId: res[i].seriesId, studyIndex: res[i].studyIndex, seriesIndex: res[i].seriesIndex, visitTaskId: res[i].visitTaskId, priority })
+              })
+            } else {
               res[i].imageIds.map(image => {
                 priority--
                 this.imageList.push({ imageId: image, seriesId: res[i].seriesId, studyIndex: res[i].studyIndex, seriesIndex: res[i].seriesIndex, visitTaskId: res[i].visitTaskId, priority })
               })
+            }
 
-            // this.studyList.map((study, studyIndex) => {
-            //   study.SeriesList.map((series, seriesIndex) => {
-            //     if (series.modality !== 'SR') {
-            //       series.imageIds.map(image => {
-            //         var p = priority - seriesIndex
-            //         if (series.seriesId === res[i].seriesId) {
-            //           p = priority
-            //         } else {
-            //           --p
-            //         }
-            //         this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority: p })
-            //       })
-            //     }
-            //   })
-            // })
-            this.loopLoad()
-          }
-        }
-        DicomEvent.$emit('loadImageStacks', res)
-        loading.close()
-        this.isRender = true
-      }).catch(() => {
-        loading.close()
-      })
-    },
-    initStudyInfo2() {
-      console.log('initStudyInfo')
-      const loading = this.$loading({ fullscreen: true })
-      // 初始化待渲染序列
-      this.getInitSeries().then((res) => {
-        requestPoolManager.startTaskTimer()
-        res.map((item) => {
-          this.loadInitialImage(item)
-        })
-        var i = res.findIndex(s => s.isCurrentTask)
-        if (i > -1) {
-          var p = parseInt(new Date().getTime())
-          // var p = this.visitTaskId === this.currentTaskId ? parseInt(new Date().getTime()) : 999 // 非当前任务，符合自动下载的权重次之
-          var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
-          if (idx > -1) {
-            this.measureData = this.visitTaskList[idx].MeasureData
-            this.studyList = this.visitTaskList[idx].StudyList
-
-            this.studyList.map((study, studyIndex) => {
-              study.SeriesList.map((series, seriesIndex) => {
-                if (series.modality !== 'SR') {
-                // var sliceThickness = isNaN(parseInt(series.sliceThickness)) ? null : parseInt(series.sliceThickness)
-                // if (sliceThickness === 5 || series.instanceCount <= 100) {
-                  series.imageIds.map(image => {
-                    let priority = 0
-                    if (series.seriesId === res[i].seriesId) {
-                      priority = parseInt(new Date().getTime()) * 10
-                    } else {
-                      priority = --p
-                    }
-                    this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
-                  })
-                }
-              })
-            })
             this.loopLoad()
           }
         }
@@ -371,9 +326,9 @@ export default {
       var p = parseInt(new Date().getTime())
       var imageId = seriesInfo.imageIds[seriesInfo.imageIdIndex]
       requestPoolManager.loadAndCacheImagePlus(imageId, seriesInfo.seriesId, p * 100).then(res => {
-        if (seriesInfo.isCurrentTask) {
+        // if (seriesInfo.isCurrentTask) {
-          this.imageLoaded({ studyIndex: seriesInfo.studyIndex, seriesIndex: seriesInfo.seriesIndex, imageId: res.imageId }, res.data.string('x0020000e'))
+        //   this.imageLoaded({ studyIndex: seriesInfo.studyIndex, seriesIndex: seriesInfo.seriesIndex, imageId: res.imageId }, res.data.string('x0020000e'))
-        }
+        // }
       })
     },
     getStudyList() {
@@ -657,9 +612,16 @@ export default {
             }
             if (!isAddToTakPool) {
               var priority = parseInt(new Date().getTime())
-              series.imageIds.map((imageId) => {
+              if (series.isExistMutiFrames) {
+                series.instanceInfoList.map(image => {
+                  this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                })
+              } else {
+                series.imageIds.map(imageId => {
                   this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
                 })
+              }
+
               if (this.imageList.length > 0) {
                 this.loopLoadStatus = 0
                 this.loopLoad()
@@ -683,11 +645,10 @@ export default {
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
-          const path = `${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}`
+          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}&visitTaskId=${this.visitTaskId}&idx=${studyIndex}|${seriesIndex}`)
-          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
         }
       } else {
-        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}`)
+        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}&visitTaskId=${this.visitTaskId}&idx=${studyIndex}|${seriesIndex}`)
       }
       this.studyIndex = studyIndex
       this.seriesIndex = seriesIndex
@@ -695,7 +656,6 @@ export default {
       var dicomStatck = this.studyList[studyIndex].SeriesList[seriesIndex]
       dicomStatck.imageIds = imageIds
       dicomStatck.imageIdIndex = 0
-      console.log(dicomStatck)
       this.$emit('loadImageStack', dicomStatck)
       this.loopLoadStatus = -1
       series.isLoading = true
@@ -707,9 +667,16 @@ export default {
       }
       if (!isAddToTakPool) {
         var priority = parseInt(new Date().getTime())
+        if (series.isExistMutiFrames) {
+          series.instanceInfoList.map(image => {
+            this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+          })
+        } else {
           series.imageIds.map((imageId) => {
             this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
           })
+        }
+
         if (this.imageList.length > 0) {
           this.loopLoadStatus = 0
           this.loopLoad()
@@ -778,10 +745,17 @@ export default {
             // }
             // 均只下载关键序列
             if (!isCurrentTask && study.IsCriticalSequence) {
-              series.imageIds.map(image => {
+              if (series.isExistMutiFrames) {
+                series.instanceInfoList.map(image => {
                   priority = priority - 1
-                this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                  this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
                 })
+              } else {
+                series.imageIds.map(imageId => {
+                  priority = priority - 1
+                  this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                })
+              }
             }
           }
         })
@@ -793,11 +767,7 @@ export default {
       if (this.imageList.length > 0) {
         // requestPoolManager.startTaskTimer()
         this.imageList.map(image => {
-          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
+          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority)
-            if (res) {
-              this.imageLoaded(image, res.data.string('x0020000e'))
-            }
-          })
         })
         requestPoolManager.sortTaskPool()
 
@@ -817,12 +787,22 @@ export default {
       }
       if (!isAddToTakPool) {
         const priority = parseInt(new Date().getTime())
+        if (series.isExistMutiFrames) {
+          series.instanceInfoList.map(image => {
+            const index = this.cachedImages.findIndex(item => item.uri === image)
+            if (index === -1) {
+              this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+            }
+          })
+        } else {
           series.imageIds.map(image => {
             const index = this.cachedImages.findIndex(item => item.uri === image)
             if (index === -1) {
               this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
             }
           })
+        }
+
         if (this.imageList.length > 0) {
           this.loopLoadStatus = 0
           this.loopLoad()
@@ -907,6 +887,45 @@ export default {
       //   }
       // }
     },
+    cornerstoneimageloadprogress(e) {
+      const imageId = e.detail.imageId
+      const percentComplete = e.detail.percentComplete
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      if (this.visitTaskId === params.visitTaskId) {
+        const studyIndex = params.idx.split('|')[0]
+        const seriesIndex = params.idx.split('|')[1]
+        var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
+        var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
+        if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
+          const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
+          if (i > -1) {
+            prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
+            this.currentLoadIns[i].percentComplete = percentComplete
+            if (percentComplete === 100) {
+              this.currentLoadIns.splice(i, 1)
+            }
+          } else {
+            if (percentComplete !== 100) {
+              this.currentLoadIns.push({ imageId, percentComplete })
+            }
+            prefetchInstanceCount = prefetchInstanceCount + percentComplete
+          }
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
+          if (percentComplete >= 100) {
+            this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
+          }
+        }
+        if (prefetchInstanceCount >= instanceCount * 100) {
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
+          // 设置当前序列状态为已下载完成
+          this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
+        }
+      }
+    },
     cornerstoneimagecachechanged(e) {
       const cacheInfo = cornerstone.imageCache.getCacheInfo()
       console.log(cacheInfo)

src/views/trials/trials-panel/reading/dicoms/customize/CustomizeStudyList.vue

@@ -103,10 +103,12 @@
                   <p v-show="series.sliceThickness && !study.IsCriticalSequence">
                     T: {{ parseFloat(series.sliceThickness).toFixed(digitPlaces) }}
                   </p>
-                  <p v-show="series.instanceCount">
+                  <p v-show="series.instanceCount && series.imageloadedArr.length < series.instanceCount">
+                    {{ series.modality }}: {{ series.imageloadedArr.length }}/{{ series.instanceCount }} image
+                  </p>
+                  <p v-show="series.instanceCount && series.imageloadedArr.length >= series.instanceCount">
                     {{ series.modality }}: {{ series.instanceCount }} image
                   </p>
-
                   <div class="flex-div">
                     <div v-if="measureData && measureData.findIndex(v=>v.SeriesId === series.seriesId && v.MeasureData) > -1">
                       <!-- 有标注 -->
@@ -118,9 +120,9 @@
                   </div>
                 </div>
               </div>
-              <div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" style="width: 100%;">
+              <div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount * 100" style="width: 100%;">
                 <el-progress
-                  :percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))"
+                  :percentage="parseInt((series.prefetchInstanceCount / series.instanceCount).toFixed(2))"
                 />
               </div>
 
@@ -215,7 +217,8 @@ export default {
       srDialogVisible: false,
       srInfo: {},
       digitPlaces: 2,
-      visitTaskIdx: -1
+      visitTaskIdx: -1,
+      currentLoadIns: []
     }
   },
 
@@ -259,12 +262,17 @@ export default {
     //     this.studyList = this.visitTaskList[idx].StudyList
     //   }
     // })
+    cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
     cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
     // cornerstone.events.addEventListener('cornerstoneimagecachefull', this.cornerstoneimagecachefull)
     // cornerstone.events.addEventListener('cornerstoneimagecachechanged', this.cornerstoneimagecachechanged)
+    window.addEventListener('beforeunload', e => {
+      cornerstone.imageCache.purgeCache()
+    })
   },
   beforeDestroy() {
     cornerstone.imageCache.purgeCache()
+    window.removeEventListener('beforeunload', e => { cornerstone.imageCache.purgeCache() })
   },
   methods: {
     initStudyInfo() {
@@ -273,7 +281,9 @@ export default {
       this.getInitSeries().then((res) => {
         requestPoolManager.startTaskTimer()
         res.map((item) => {
-          this.loadInitialImage(item)
+          let imageId = item.imageIds[item.imageIdIndex]
+          const p = parseInt(new Date().getTime())
+          requestPoolManager.loadAndCacheImagePlus(imageId, item.seriesId, p * 100)
         })
         var i = res.findIndex(s => s.isCurrentTask)
         if (i > -1) {
@@ -282,71 +292,17 @@ export default {
             this.measureData = this.visitTaskList[idx].MeasureData
             this.studyList = this.visitTaskList[idx].StudyList
             var priority = parseInt(new Date().getTime())
+            if (res[i].isExistMutiFrames) {
+              res[i].instanceInfoList.map(image => {
+                priority--
+                this.imageList.push({ imageId: image.ImageId, seriesId: res[i].seriesId, studyIndex: res[i].studyIndex, seriesIndex: res[i].seriesIndex, visitTaskId: res[i].visitTaskId, priority })
+              })
+            } else {
               res[i].imageIds.map(image => {
                 priority--
                 this.imageList.push({ imageId: image, seriesId: res[i].seriesId, studyIndex: res[i].studyIndex, seriesIndex: res[i].seriesIndex, visitTaskId: res[i].visitTaskId, priority })
               })
-
-            // this.studyList.map((study, studyIndex) => {
-            //   study.SeriesList.map((series, seriesIndex) => {
-            //     if (series.modality !== 'SR') {
-            //       series.imageIds.map(image => {
-            //         var p = priority - seriesIndex
-            //         if (series.seriesId === res[i].seriesId) {
-            //           p = priority
-            //         } else {
-            //           --p
-            //         }
-            //         this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority: p })
-            //       })
-            //     }
-            //   })
-            // })
-            this.loopLoad()
             }
-        }
-        DicomEvent.$emit('loadImageStacks', res)
-        loading.close()
-        this.isRender = true
-      }).catch(() => {
-        loading.close()
-      })
-    },
-    initStudyInfo2() {
-      console.log('initStudyInfo')
-      const loading = this.$loading({ fullscreen: true })
-      // 初始化待渲染序列
-      this.getInitSeries().then((res) => {
-        requestPoolManager.startTaskTimer()
-        res.map((item) => {
-          this.loadInitialImage(item)
-        })
-        var i = res.findIndex(s => s.isCurrentTask)
-        if (i > -1) {
-          var p = parseInt(new Date().getTime())
-          // var p = this.visitTaskId === this.currentTaskId ? parseInt(new Date().getTime()) : 999 // 非当前任务，符合自动下载的权重次之
-          var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
-          if (idx > -1) {
-            this.measureData = this.visitTaskList[idx].MeasureData
-            this.studyList = this.visitTaskList[idx].StudyList
-
-            this.studyList.map((study, studyIndex) => {
-              study.SeriesList.map((series, seriesIndex) => {
-                if (series.modality !== 'SR') {
-                // var sliceThickness = isNaN(parseInt(series.sliceThickness)) ? null : parseInt(series.sliceThickness)
-                // if (sliceThickness === 5 || series.instanceCount <= 100) {
-                  series.imageIds.map(image => {
-                    let priority = 0
-                    if (series.seriesId === res[i].seriesId) {
-                      priority = parseInt(new Date().getTime()) * 10
-                    } else {
-                      priority = --p
-                    }
-                    this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
-                  })
-                }
-              })
-            })
             this.loopLoad()
           }
         }
@@ -361,11 +317,7 @@ export default {
     loadInitialImage(seriesInfo) {
       var p = parseInt(new Date().getTime())
       var imageId = seriesInfo.imageIds[seriesInfo.imageIdIndex]
-      requestPoolManager.loadAndCacheImagePlus(imageId, seriesInfo.seriesId, p * 100).then(res => {
+      requestPoolManager.loadAndCacheImagePlus(imageId, seriesInfo.seriesId, p * 100)
-        if (seriesInfo.isCurrentTask) {
-          this.imageLoaded({ studyIndex: seriesInfo.studyIndex, seriesIndex: seriesInfo.seriesIndex, imageId: res.imageId }, res.data.string('x0020000e'))
-        }
-      })
     },
     getStudyList() {
       console.log('getStudyList')
@@ -647,9 +599,15 @@ export default {
             }
             if (!isAddToTakPool) {
               var priority = parseInt(new Date().getTime())
-              series.imageIds.map((imageId) => {
+              if (series.isExistMutiFrames) {
+                series.instanceInfoList.map(image => {
+                  this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                })
+              } else {
+                series.imageIds.map(imageId => {
                   this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
                 })
+              }
               if (this.imageList.length > 0) {
                 this.loopLoadStatus = 0
                 this.loopLoad()
@@ -673,11 +631,10 @@ export default {
       const imageIds = []
       if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
         for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
-          const path = `${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}`
+          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?frame=${j}&instanceId=${instanceInfo.Id}&visitTaskId=${this.visitTaskId}&idx=${studyIndex}|${seriesIndex}`)
-          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
         }
       } else {
-        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}`)
+        imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instanceInfo.Path}?instanceId=${instanceInfo.Id}&visitTaskId=${this.visitTaskId}&idx=${studyIndex}|${seriesIndex}`)
       }
       this.studyIndex = studyIndex
       this.seriesIndex = seriesIndex
@@ -685,7 +642,6 @@ export default {
       var dicomStatck = this.studyList[studyIndex].SeriesList[seriesIndex]
       dicomStatck.imageIds = imageIds
       dicomStatck.imageIdIndex = 0
-      console.log(dicomStatck)
       this.$emit('loadImageStack', dicomStatck)
       this.loopLoadStatus = -1
       series.isLoading = true
@@ -697,9 +653,16 @@ export default {
       }
       if (!isAddToTakPool) {
         var priority = parseInt(new Date().getTime())
+        if (series.isExistMutiFrames) {
+          series.instanceInfoList.map(image => {
+            this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+          })
+        } else {
           series.imageIds.map((imageId) => {
             this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
           })
+        }
+
         if (this.imageList.length > 0) {
           this.loopLoadStatus = 0
           this.loopLoad()
@@ -768,10 +731,17 @@ export default {
             // }
             // 均只下载关键序列
             if (!isCurrentTask && study.IsCriticalSequence) {
-              series.imageIds.map(image => {
+              if (series.isExistMutiFrames) {
+                series.instanceInfoList.map(image => {
                   priority = priority - 1
-                this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                  this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
                 })
+              } else {
+                series.imageIds.map(imageId => {
+                  priority = priority - 1
+                  this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+                })
+              }
             }
           }
         })
@@ -783,9 +753,7 @@ export default {
       if (this.imageList.length > 0) {
         // requestPoolManager.startTaskTimer()
         this.imageList.map(image => {
-          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
+          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority)
-            this.imageLoaded(image, res.data.string('x0020000e'))
-          })
         })
         requestPoolManager.sortTaskPool()
 
@@ -805,12 +773,21 @@ export default {
       }
       if (!isAddToTakPool) {
         const priority = parseInt(new Date().getTime())
+        if (series.isExistMutiFrames) {
+          series.instanceInfoList.map(image => {
+            const index = this.cachedImages.findIndex(item => item.uri === image)
+            if (index === -1) {
+              this.imageList.push({ imageId: image.ImageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
+            }
+          })
+        } else {
           series.imageIds.map(image => {
             const index = this.cachedImages.findIndex(item => item.uri === image)
             if (index === -1) {
               this.imageList.push({ imageId: image, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
             }
           })
+        }
         if (this.imageList.length > 0) {
           this.loopLoadStatus = 0
           this.loopLoad()
@@ -895,6 +872,45 @@ export default {
       //   }
       // }
     },
+    cornerstoneimageloadprogress(e) {
+      const imageId = e.detail.imageId
+      const percentComplete = e.detail.percentComplete
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      if (this.visitTaskId === params.visitTaskId) {
+        const studyIndex = params.idx.split('|')[0]
+        const seriesIndex = params.idx.split('|')[1]
+        var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
+        var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
+        if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
+          const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
+          if (i > -1) {
+            prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
+            this.currentLoadIns[i].percentComplete = percentComplete
+            if (percentComplete === 100) {
+              this.currentLoadIns.splice(i, 1)
+            }
+          } else {
+            if (percentComplete !== 100) {
+              this.currentLoadIns.push({ imageId, percentComplete })
+            }
+            prefetchInstanceCount = prefetchInstanceCount + percentComplete
+          }
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
+          if (percentComplete >= 100) {
+            this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
+          }
+        }
+        if (prefetchInstanceCount >= instanceCount * 100) {
+          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
+          // 设置当前序列状态为已下载完成
+          this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
+        }
+      }
+    },
     cornerstoneimagecachechanged(e) {
       const cacheInfo = cornerstone.imageCache.getCacheInfo()
       console.log(cacheInfo)