分割视图添加直方图

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}`)
+      this.histogramVisible = true
-      console.log(res, 'openHistogram')
+      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)
       }

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)