多帧图像预览页面bug修复

src/components/Dicom/DicomCanvas.vue

@@ -207,7 +207,7 @@ export default {
         var instanceId = imageId.split('/')[imageId.split('/').length - 1]
         instanceId = instanceId.split('.')[0]
         this.stack.instanceId = instanceId
-        if (this.toolState.clipPlaying) this.toggleClipPlay()
+        this.toolState.clipPlaying = false
         const element = this.$refs.canvas
         cornerstone.enable(element)
         this.loading = true
@@ -630,6 +630,7 @@ export default {
       enabledElement.renderingTools.renderCanvasData = renderCanvasData
     },
     scrollPage(offset) {
+      if(this.loading) return
       var index = this.stack.currentImageIdIndex + offset
       if (index < 0) index = 0
       else if (index >= this.stack.imageIds.length) {
@@ -641,6 +642,7 @@ export default {
     },
 
     toggleClipPlay() {
+      if(this.loading) return
       if (this.toolState.clipPlaying) {
         cornerstoneTools.stopClip(this.canvas)
         this.toolState.clipPlaying = false

src/components/Dicom/DicomViewer.vue

@@ -400,6 +400,7 @@ export default {
 
   methods: {
     loadImageStack(dicomSeries) {
+      this.currentDicomCanvas.toolState.clipPlaying = false
       this.$nextTick(() => {
         this.currentDicomCanvas.loadImageStack(dicomSeries)
       })

src/store/modules/reading.js

@@ -771,7 +771,7 @@ const actions = {
                     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(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`
+                  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=${studyIndex}|${seriesIndex}`
                 } else {
                   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)
@@ -891,7 +891,7 @@ const actions = {
   },
   setLastCanvasTaskId({ state }, taskId) {
     return new Promise(resolve => {
-      var isReadingTaskViewInOrder =  localStorage.getItem('isReadingTaskViewInOrder')
+      var isReadingTaskViewInOrder = localStorage.getItem('isReadingTaskViewInOrder')
       if (parseInt(isReadingTaskViewInOrder) === 2) {
         if (!state.lastCanvasTaskId) state.lastCanvasTaskId = taskId
       } else {

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

@@ -1090,7 +1090,7 @@ export default {
         this.stack.instanceId = instanceId
         const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
         ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
-        if (this.toolState.clipPlaying) this.toggleClipPlay()
+        this.toggleClipPlay(false)
         this.toolState.viewportInvert = false
         this.toolState.dicomInfoVisible = false
 
@@ -1245,8 +1245,8 @@ export default {
       if (this.dicomInfo.thick) {
         this.dicomInfo.thick = this.dicomInfo.thick.toFixed(2)
       }
-      let newImageIdIndex = this.stack.imageIds.findIndex(i=>i===imageId)
+      const newImageIdIndex = this.stack.imageIds.findIndex(i => i === imageId)
-      if(newImageIdIndex === -1) return
+      if (newImageIdIndex === -1) return
       this.stack.currentImageIdIndex = newImageIdIndex
       this.stack.imageIdIndex = newImageIdIndex
       this.series.imageIdIndex = newImageIdIndex
@@ -1631,18 +1631,19 @@ export default {
       }
     },
 
-    toggleClipPlay() {
+    toggleClipPlay(isPlay) {
-      if (this.toolState.clipPlaying) {
+      if (isPlay) {
+        this.toolState.clipPlaying = true
+        cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
+        cornerstoneTools.getToolState(
+          this.canvas,
+          'playClip'
+        ).data[0].loop = false
+      } else {
         cornerstoneTools.stopClip(this.canvas)
         this.toolState.clipPlaying = false
         return
       }
-      this.toolState.clipPlaying = true
-      cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
-      cornerstoneTools.getToolState(
-        this.canvas,
-        'playClip'
-      ).data[0].loop = false
     },
     setFps(fps) {
       this.dicomInfo.fps = fps

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

@@ -306,9 +306,12 @@
             </div>
           </el-tooltip>
           <!-- 播放/暂停 -->
-          <el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:play'):$t('trials:dicom-show:stop')" placement="bottom">
+          <el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:stop'):$t('trials:dicom-show:play')" placement="bottom">
-            <div class="icon" @click.prevent="toggleClipPlay">
+            <div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
-              <svg-icon :icon-class="clipPlaying?'stop':'play'" class="svg-icon" />
+              <svg-icon icon-class="stop" class="svg-icon" />
+            </div>
+            <div v-else class="icon" @click.prevent="toggleClipPlay(true)">
+              <svg-icon icon-class="play" class="svg-icon" />
             </div>
           </el-tooltip>
           <!-- 下一帧 -->
@@ -874,6 +877,7 @@ export default {
     activeSeries: {
       immediate: true,
       handler(v) {
+        console.log('activeSeries', v)
         if (v && v.isCurrentTask && this.studyList.length === 0) {
           this.activeTaskInfo.taskName = v.taskBlindName
           this.activeTaskInfo.visitTaskId = v.visitTaskId
@@ -1253,6 +1257,7 @@ export default {
       })
     },
     loadImageStack(dicomSeries) {
+      this.clipPlaying = false
       this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
       this.$nextTick(() => {
         this.activeSeries = dicomSeries
@@ -1932,12 +1937,24 @@ export default {
     },
     // 切换帧
     scrollPage(i) {
+      // 获取影像是否下载完成
+      const isLoaded = this.getSeriesLoadStatus()
+      if (!isLoaded) return
       this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
     },
     // 播放/暂停
-    toggleClipPlay() {
+    toggleClipPlay(isPlay) {
-      this.clipPlaying = !this.clipPlaying
+      // 获取影像是否下载完成
-      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay()
+      const isLoaded = this.getSeriesLoadStatus()
+      if (!isLoaded) return
+      this.clipPlaying = isPlay
+      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay(isPlay)
+    },
+    getSeriesLoadStatus() {
+      const index = this.visitTaskList.findIndex(i => i.VisitTaskId === this.activeSeries.visitTaskId)
+      if (index === -1) return false
+      const loadStatus = this.visitTaskList[index].StudyList[this.activeSeries.studyIndex].SeriesList[this.activeSeries.seriesIndex].loadStatus
+      return loadStatus
     },
     setDicomCanvasfps(event) {
       this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(event.target.value)

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

@@ -267,6 +267,7 @@ export default {
     //     this.studyList = this.visitTaskList[idx].StudyList
     //   }
     // })
+    // const debouncedInputHandler = this.debounce(this.cornerstoneimageloadprogress, 100)
     cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
     cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
     // cornerstone.events.addEventListener('cornerstoneimagecachefull', this.cornerstoneimagecachefull)
@@ -281,6 +282,17 @@ export default {
     window.removeEventListener('beforeunload', e => { cornerstone.imageCache.purgeCache() })
   },
   methods: {
+    debounce(fn, delay) {
+      let timer = null
+      return function() {
+        const context = this
+        const args = arguments
+        clearTimeout(timer)
+        timer = setTimeout(() => {
+          fn.apply(context, args)
+        }, delay)
+      }
+    },
     initStudyInfo() {
       const loading = this.$loading({ fullscreen: true })
       // 初始化待渲染序列
@@ -621,7 +633,6 @@ export default {
                   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()
@@ -889,42 +900,44 @@ 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) {
+      if (this.visitTaskId !== params.visitTaskId) return
-        const studyIndex = params.idx.split('|')[0]
+      const percentComplete = e.detail.percentComplete
-        const seriesIndex = params.idx.split('|')[1]
+
-        var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
+      const studyIndex = parseInt(params.idx.split('|')[0])
-        var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
+      const seriesIndex = parseInt(params.idx.split('|')[1])
-        if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
+      var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
-          const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
+      var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
-          if (i > -1) {
+      if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
-            prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
+        const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
-            this.currentLoadIns[i].percentComplete = percentComplete
+        if (i > -1) {
-            if (percentComplete === 100) {
+          prefetchInstanceCount = prefetchInstanceCount + percentComplete - this.currentLoadIns[i].percentComplete
-              this.currentLoadIns.splice(i, 1)
+          this.currentLoadIns[i].percentComplete = percentComplete
-            }
-          } 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)
+            this.currentLoadIns.splice(i, 1)
           }
+        } else {
+          if (percentComplete !== 100) {
+            this.currentLoadIns.push({ imageId, percentComplete })
+          }
+          prefetchInstanceCount = prefetchInstanceCount + percentComplete
         }
-        if (prefetchInstanceCount >= instanceCount * 100) {
+        this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
-          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
+        if (percentComplete >= 100) {
-          // 设置当前序列状态为已下载完成
+          this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
-          this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
         }
       }
+
+      if (prefetchInstanceCount >= instanceCount * 100) {
+        this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
+        // 设置当前序列状态为已下载完成
+        this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
+        // this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
+      }
     },
     cornerstoneimagecachechanged(e) {
       const cacheInfo = cornerstone.imageCache.getCacheInfo()

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

@@ -1065,7 +1065,7 @@ export default {
         this.stack.instanceId = instanceId
         const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
         ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
-        if (this.toolState.clipPlaying) this.toggleClipPlay()
+        this.toggleClipPlay(false)
         this.toolState.viewportInvert = false
         this.toolState.dicomInfoVisible = false
 
@@ -1606,18 +1606,19 @@ export default {
       }
     },
 
-    toggleClipPlay() {
+    toggleClipPlay(isPlay) {
-      if (this.toolState.clipPlaying) {
+      if (isPlay) {
+        this.toolState.clipPlaying = true
+        cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
+        cornerstoneTools.getToolState(
+          this.canvas,
+          'playClip'
+        ).data[0].loop = false
+      } else {
         cornerstoneTools.stopClip(this.canvas)
         this.toolState.clipPlaying = false
         return
       }
-      this.toolState.clipPlaying = true
-      cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
-      cornerstoneTools.getToolState(
-        this.canvas,
-        'playClip'
-      ).data[0].loop = false
     },
     setFps(fps) {
       this.dicomInfo.fps = fps

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

@@ -309,9 +309,12 @@
             </div>
           </el-tooltip>
           <!-- 播放/暂停 -->
-          <el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:play'):$t('trials:dicom-show:stop')" placement="bottom">
+          <el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:stop'):$t('trials:dicom-show:play')" placement="bottom">
-            <div class="icon" @click.prevent="toggleClipPlay">
+            <div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
-              <svg-icon :icon-class="clipPlaying?'stop':'play'" class="svg-icon" />
+              <svg-icon icon-class="stop" class="svg-icon" />
+            </div>
+            <div v-else class="icon" @click.prevent="toggleClipPlay(true)">
+              <svg-icon icon-class="play" class="svg-icon" />
             </div>
           </el-tooltip>
           <!-- 下一帧 -->
@@ -328,7 +331,7 @@
           </el-tooltip>
 
           <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:speed')" placement="bottom">
-            <select class="select-wrapper" @change="setDicomCanvasfps($event)" :disabled="clipPlaying">
+            <select class="select-wrapper" :disabled="clipPlaying" @change="setDicomCanvasfps($event)">
               <!-- 默认值 -->
               <option :value="5">{{ $t('trials:dicom-show:default') }}</option>
               <option :value="5">5</option>
@@ -910,6 +913,7 @@ export default {
       })
     },
     loadImageStack(dicomSeries) {
+      this.clipPlaying = false
       this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
       if (this.activeTool) {
         if (dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2) {
@@ -1482,12 +1486,24 @@ export default {
     },
     // 切换帧
     scrollPage(i) {
+      // 获取影像是否下载完成
+      const isLoaded = this.getSeriesLoadStatus()
+      if (!isLoaded) return
       this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
     },
     // 播放/暂停
-    toggleClipPlay() {
+    toggleClipPlay(isPlay) {
-      this.clipPlaying = !this.clipPlaying
+      // 获取影像是否下载完成
-      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay()
+      const isLoaded = this.getSeriesLoadStatus()
+      if (!isLoaded) return
+      this.clipPlaying = isPlay
+      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay(isPlay)
+    },
+    getSeriesLoadStatus() {
+      const index = this.visitTaskList.findIndex(i => i.VisitTaskId === this.activeSeries.visitTaskId)
+      if (index === -1) return false
+      const loadStatus = this.visitTaskList[index].StudyList[this.activeSeries.studyIndex].SeriesList[this.activeSeries.seriesIndex].loadStatus
+      return loadStatus
     },
     setDicomCanvasfps(event) {
       this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(event.target.value)