分割视图添加直方图

2026-04-08 14:58:26 +08:00 · 2026-04-08 14:58:26 +08:00 · 5b4cc097bc
parent b1de662677
commit 5b4cc097bc
3 changed files with 1035 additions and 82 deletions
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@ -313,7 +313,8 @@
                  @dblclick="toggleFullScreen($event, index)" @click="activeViewport(index)">
                  <VolumeViewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
                    :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-${index}`" :viewport-index="index"
-                    @activeViewport="activeViewport" @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
+                    :histogramVisible="histogramVisible" @activeViewport="activeViewport"
+                    @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
                    @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup" v-if="readingTool === 3"
                    v-resize="(e) => handleSizeChange(e, `viewport-${index}`)" />
                  <Viewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
@ -493,6 +494,9 @@
      <SegmentForm ref="SegmentForm" v-if="segmentVisible" :visible.sync="segmentVisible" :visitInfo="segmentVisitInfo"
        @handleSegmentSave="handleSegmentSave" />
    </el-dialog>
+    <!--直方图-->
+    <histogram ref="histogram" v-if="readingTool === 3" :visible.sync="histogramVisible" :activeTool.sync="activeTool"
+      :viewportKey="viewportKey" :rendering-engine-id="renderingEngineId" :activeViewportIndex="activeViewportIndex" />
    <upload-dicom-and-nonedicom v-if="uploadImageVisible" :subject-id="uploadSubjectId"
      :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
      :visit-task-id="taskId" :is-reading-task-view-in-order="isReadingTaskViewInOrder" />
@ -500,7 +504,6 @@
      :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
      :visible.sync="downloadImageVisible" />
    <readingChart ref="readingChart" />
-    <histogram ref="histogram" />
  </div>
 </template>
 <script>
@ -773,7 +776,9 @@ export default {
      hasFusionUpperInitialized: false,
      timer: null,
      FullTimerOut: null,
-      isDelay: false
+      isDelay: false,
+
+      histogramVisible: false
    }
  },
  computed: {
@ -866,7 +871,37 @@ export default {
          this.setToolsPassive()
        }
      }
+    },
+    histogramVisible: {
+      handler() {
+        if (this.readingTool !== 3) return false
+        this.setToolsPassive()
+        let viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3']
+        if (this.isMPR) {
+          viewportIds = ['viewport-MPR-0', 'viewport-MPR-1', 'viewport-MPR-2']
        }
+        viewportIds.forEach(id => {
+          const toolGroup = ToolGroupManager.getToolGroup(id)
+          if (this.histogramVisible) {
+            toolGroup.setToolEnabled(StackScrollTool.toolName)
+          } else {
+            toolGroup.setToolActive(StackScrollTool.toolName, {
+              bindings: [{ mouseButton: MouseBindings.Wheel }]
+            })
+            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName.includes('histogram_'));
+            annotations.forEach(item => {
+              annotation.state.removeAnnotation(item.annotationUID)
+            })
+            for (let i = 0; i < this.cells.length; i++) {
+              const viewportId = `${this.viewportKey}-${i}`
+              const viewport = renderingEngine.getViewport(viewportId)
+              viewport.render()
+            }
+          }
+
+        })
+      }
+    },
  },
  mounted() {
    this.taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
@ -915,8 +950,10 @@ export default {
  },
  methods: {
    async openHistogram() {
-      let res = await this.$refs.histogram.getCurrentSliceValuesFromVoxelManager(renderingEngineId, `${this.viewportKey}-${this.activeViewportIndex}`)
-      console.log(res, 'openHistogram')
+      this.histogramVisible = true
+      this.setToolsPassive()
+      this.$refs.histogram.init()
+
    },
    handleSizeChange(e, viewportId) {
      // console.log('handleSizeChange', e)
@ -1380,6 +1417,18 @@ export default {
        toolGroup.addTool(ZoomTool.toolName)
        toolGroup.addTool(BrushTool.toolName)
        if (this.readingTool === 3 || toolGroupId === this.volumeToolGroupId) {
+          toolGroup.addToolInstance(
+            'histogram_RectangleROI',
+            RectangleROITool.toolName,
+          );
+          toolGroup.addToolInstance(
+            'histogram_CircleROI',
+            CircleROITool.toolName,
+          );
+          toolGroup.addToolInstance(
+            'histogram_PlanarFreehandROI',
+            PlanarFreehandROITool.toolName,
+          );
          toolGroup.addToolInstance(
            'CircularBrush',
            BrushTool.toolName,
@ -1699,6 +1748,7 @@ export default {
      if (this.readingTaskState === 2) return
      const { annotation } = e.detail
      if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
      if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@ -1725,6 +1775,7 @@ export default {
      const { annotation } = e.detail
      if (!annotation.highlighted) return
      if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
      if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@ -1767,6 +1818,7 @@ export default {
      if (this.readingTaskState === 2) return
      const { annotation } = e.detail
      if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
      const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
      if (i === -1) {
        if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@ -1855,6 +1907,7 @@ export default {
      const { annotation } = e.detail
      if (!annotation.highlighted) return
      if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
      const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
      if (i === -1) {
        if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@ -2339,6 +2392,7 @@ export default {
    },
    // 激活工具
    setToolActive(toolName) {
+      if (this.histogramVisible) return false
      const toolGroupId = this.isMPR ? this.volumeToolGroupId : `${this.viewportKey}-${this.activeViewportIndex}`
      const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
      if (this.activeTool === toolName) {
@ -2365,6 +2419,7 @@ export default {
    // 激活标注工具
    setAnnotateToolActive(toolName) {
      // if (this.readingTaskState === 2) return
+      if (this.histogramVisible) return false
      const toolObj = this.tools.find(i => i.toolName === toolName)
      if (!toolObj || toolObj.isDisabled) return
      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
@ -2434,6 +2489,7 @@ export default {
    },
    setMoreToolActive(toolName) {
      // if (this.readingTaskState === 2) return
+      if (this.histogramVisible) return false
      this.setToolsPassive()
      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@ -2706,11 +2762,13 @@ export default {
    },
    // 翻页
    scrollPage(type) {
+      if (this.histogramVisible) return false
      this.clipPlaying = false
      this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].scrollPage(type)
    },
    // 播放
    toggleClipPlay(isPlay) {
+      if (this.histogramVisible) return false
      this.clipPlaying = !this.clipPlaying
      this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].toggleClipPlay(isPlay, this.fps)
    },
@ -2986,6 +3044,7 @@ export default {
          const confirm = await this.$confirm(this.$t('trials:reading:confirm:changeStack'))
          if (!confirm) return false
        }
+        if (this.histogramVisible) this.$refs.histogram.close()
        this.isFusion = false
        this.setToolsPassive()
        this.rows = 1
@ -3005,6 +3064,7 @@ export default {
        })

      }
+      if (this.histogramVisible) this.$refs.histogram.close()
      if (!obj.IsDicom) {
        return this.previewNoneDicoms(obj)
      }
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
@ -96,6 +96,10 @@ export default {
            type: Number,
            required: true
        },
+        histogramVisible: {
+            type: Boolean,
+            default: false
+        }
    },
    data() {
        return {
@ -183,6 +187,7 @@ export default {
            this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
            this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered)
            this.element.addEventListener('wheel', (e) => {
+                if (this.histogramVisible) return false
                console.log('CORNERSTONE_STACK_VIEWPORT_SCROLL')
                const renderingEngine = getRenderingEngine(this.renderingEngineId)
                const viewport = renderingEngine.getViewport(this.viewportId)
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue