播放功能修改

src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue

@@ -187,6 +187,7 @@ export default {
       originalMarkers: [],
       markers: { top: '', right: '', bottom: '', left: '' },
       playClipState: false,
+      clipFramesPerSecond: null,
       wwwcIdx: 2,
       presetName: '',
       volumeId: null,
@@ -625,6 +626,22 @@ export default {
       }
 
     },
+    syncViewportStaticState() {
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      if (!renderingEngine) return
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      if (!viewport) return
+
+      this.getOrientationMarker()
+      const toolGroup =
+        cornerstoneTools.ToolGroupManager.getToolGroupForViewport(
+          this.viewportId,
+          this.renderingEngineId
+        ) || cornerstoneTools.ToolGroupManager.getToolGroup(this.viewportId)
+      if (toolGroup) {
+        toolGroup.setToolEnabled('ScaleOverlay')
+      }
+    },
     setFullScreen(index) {
       setTimeout(() => {
         const renderingEngine = getRenderingEngine(this.renderingEngineId)
@@ -727,14 +744,33 @@ export default {
       }
     },
     toggleClipPlay(isPlay, framesPerSecond) {
-      this.playClipState = isPlay
       const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      if (!renderingEngine) return
       const viewport = renderingEngine.getViewport(this.viewportId)
+      if (!viewport?.element) return
+
+      const parsedFramesPerSecond = Number(framesPerSecond)
+      const nextFramesPerSecond = Number.isFinite(parsedFramesPerSecond)
+        ? parsedFramesPerSecond
+        : (this.clipFramesPerSecond || 15)
+      const isSameSpeedWhilePlaying = this.playClipState &&
+        isPlay &&
+        this.clipFramesPerSecond === nextFramesPerSecond
 
       if (isPlay) {
-        cornerstoneTools.utilities.cine.playClip(viewport.element, { framesPerSecond, loop: true })
+        if (isSameSpeedWhilePlaying) return
+
+        cornerstoneTools.utilities.cine.playClip(viewport.element, {
+          framesPerSecond: nextFramesPerSecond,
+          loop: true,
+          waitForRendered: 1
+        })
+        this.clipFramesPerSecond = nextFramesPerSecond
+        this.playClipState = true
       } else {
         cornerstoneTools.utilities.cine.stopClip(viewport.element)
+        this.clipFramesPerSecond = null
+        this.playClipState = false
       }
     },
     scrollPage(type) {
@@ -1125,6 +1161,7 @@ export default {
 
         }
         viewport.render()
+        this.syncViewportStaticState()
         if (this.currentVoiUpper > 0) {
           this.voiChange(this.currentVoiUpper)
         }

src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue

@@ -284,7 +284,7 @@
                 <svg-icon icon-class="lastframe" class="svg-icon" />
               </div>
               <select v-model="fps" :title="$t('trials:dicom-show:speed')" class="select-wrapper"
-                :disabled="clipPlaying">
+                @change="handleClipFpsChange">
                 <!-- 默认值 -->
                 <option :value="5">5</option>
                 <option :value="10">10</option>
@@ -3415,6 +3415,15 @@ export default {
       this.clipPlaying = !this.clipPlaying
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].toggleClipPlay(isPlay, this.fps)
     },
+    handleClipFpsChange() {
+      if (!this.clipPlaying) return
+
+      const activeViewportRef = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`]
+      const activeViewport = activeViewportRef && activeViewportRef[0]
+      if (!activeViewport || typeof activeViewport.toggleClipPlay !== 'function') return
+
+      activeViewport.toggleClipPlay(true, this.fps)
+    },
     // 获取窗宽窗位模板
     async getWwcTpl() {
       try {

src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue

@@ -150,6 +150,8 @@ export default {
       originalMarkers: [],
       markers: { top: '', right: '', bottom: '', left: '' },
       playClipState: false,
+      clipFramesPerSecond: null,
+      toggleClipPlayTimer: null,
       wwwcIdx: 2,
       loading: false,
       forceFitToWindow: false,
@@ -169,6 +171,10 @@ export default {
       this.resizeObserver.unobserve(this.element)
       this.resizeObserver.disconnect()
     }
+    if (this.toggleClipPlayTimer) {
+      clearInterval(this.toggleClipPlayTimer)
+      this.toggleClipPlayTimer = null
+    }
   },
   methods: {
     initViewport() {
@@ -210,12 +216,11 @@ export default {
       this.imageInfo.imageOrientationPatient = imagePlaneModule.imageOrientationPatient
       this.imageInfo.imagePositionPatient = imagePlaneModule.imagePositionPatient
       this.imageInfo.location = imagePlaneModule.sliceLocation
-      // this.imageInfo.wwwc = `${Math.round(detail.image.windowWidth)}/${Math.round(detail.image.windowCenter)}`
       this.getOrientationMarker()
-      this.$emit('renderAnnotations', this.series)
-      const toolGroupId = this.viewportId
-      const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId)
-      toolGroup.setToolEnabled('ScaleOverlay')
+      const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(this.viewportId)
+      if (toolGroup) {
+        toolGroup.setToolEnabled('ScaleOverlay')
+      }
     },
     imageRendered(e) {
       const renderingEngine = getRenderingEngine(this.renderingEngineId)
@@ -312,14 +317,61 @@ export default {
       }
     },
     toggleClipPlay(isPlay, framesPerSecond) {
-      this.playClipState = isPlay
       const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      if (!renderingEngine) return
       const viewport = renderingEngine.getViewport(this.viewportId)
+      if (!viewport?.element) return
+
+      const parsedFramesPerSecond = Number(framesPerSecond)
+      const nextFramesPerSecond = Number.isFinite(parsedFramesPerSecond)
+        ? parsedFramesPerSecond
+        : (this.clipFramesPerSecond || 15)
+      const isSameSpeedWhilePlaying = this.playClipState &&
+        isPlay &&
+        this.clipFramesPerSecond === nextFramesPerSecond
 
       if (isPlay) {
-        cornerstoneTools.utilities.cine.playClip(viewport.element, { framesPerSecond, loop: true })
+        if (isSameSpeedWhilePlaying) return
+
+        cornerstoneTools.utilities.cine.stopClip(viewport.element)
+        if (this.toggleClipPlayTimer) {
+          clearInterval(this.toggleClipPlayTimer)
+          this.toggleClipPlayTimer = null
+        }
+
+        const frameInterval = Math.max(16, Math.round(1000 / nextFramesPerSecond))
+        this.toggleClipPlayTimer = setInterval(() => {
+          const imageIds = viewport.getImageIds()
+          if (!imageIds?.length) return
+
+          let index = viewport.getCurrentImageIdIndex() + 1
+          if (index > imageIds.length - 1) {
+            index = 0
+          }
+
+          csUtils.jumpToSlice(viewport.element, {
+            imageIndex: index,
+            debounceLoading: false
+          })
+        }, frameInterval)
+        this.clipFramesPerSecond = nextFramesPerSecond
+        this.playClipState = true
       } else {
         cornerstoneTools.utilities.cine.stopClip(viewport.element)
+        if (this.toggleClipPlayTimer) {
+          clearInterval(this.toggleClipPlayTimer)
+          this.toggleClipPlayTimer = null
+        }
+        this.clipFramesPerSecond = null
+        this.playClipState = false
+      }
+    },
+    syncViewportStaticState() {
+      this.getOrientationMarker()
+      this.$emit('renderAnnotations', this.series)
+      const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(this.viewportId)
+      if (toolGroup) {
+        toolGroup.setToolEnabled('ScaleOverlay')
       }
     },
     scrollPage(type) {
@@ -339,7 +391,13 @@ export default {
       }
       // viewport.setImageIdIndex(newImageIdIndex)
       csUtils.jumpToSlice(viewport.element, { imageIndex: newImageIdIndex })
+      if (this.toggleClipPlayTimer) {
+        clearInterval(this.toggleClipPlayTimer)
+        this.toggleClipPlayTimer = null
+      }
       cornerstoneTools.utilities.cine.stopClip(viewport.element)
+      this.clipFramesPerSecond = null
+      this.playClipState = false
     },
     setZoom(ratio) {
       const renderingEngine = getRenderingEngine(this.renderingEngineId)
@@ -432,6 +490,7 @@ export default {
         }
         this.prefetchMetadataInformation(obj.ImageIds, obj.Modality)
         await viewport.setStack(this.series.Stack, obj.SliceIndex)
+        this.syncViewportStaticState()
 
         viewport.render()
       } catch (e) {