融合页面工具优化

uat_us^2
caiyiling 2026-04-30 16:44:00 +08:00
parent 72b1a3906d
commit 1b6e53819c
4 changed files with 185 additions and 99 deletions

View File

@ -179,17 +179,18 @@
<Viewport ref="CT_AXIAL" :index="1" :active-index="activeIndex"
:is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="ctSeries"
:rendering-engine-id="renderingEngineId" viewport-id="CT_AXIAL" :volume="ctVolume"
:measure-datas="measureDatas" :style="1 === activeIndex ? viewportStyle : {}" />
:measure-datas="measureDatas" :style="1 === activeIndex ? viewportStyle : {}"
@fusionSlicePointChange="handleFusionSlicePointChange" />
<Viewport ref="PT_AXIAL" :index="2" :active-index="activeIndex"
:is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries"
:rendering-engine-id="renderingEngineId" viewport-id="PT_AXIAL" :volume="ptVolume"
:measure-datas="measureDatas" :style="2 === activeIndex ? viewportStyle : {}"
@upperRangeChange="upperRangeChange" />
@upperRangeChange="upperRangeChange" @fusionSlicePointChange="handleFusionSlicePointChange" />
<Viewport ref="FUSION_AXIAL" :index="3" :active-index="activeIndex"
:is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries" :ct-series-info="ctSeries"
:rendering-engine-id="renderingEngineId" viewport-id="FUSION_AXIAL" :volume="ptVolume"
:measure-datas="measureDatas" :rgb-preset-name="rgbPresetName" :style="3 === activeIndex ? viewportStyle : {}"
@upperRangeChange="upperRangeChange" />
@upperRangeChange="upperRangeChange" @fusionSlicePointChange="handleFusionSlicePointChange" />
<Viewport ref="PET_MIP_CORONAL" :index="4" :active-index="activeIndex"
:is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries"
:rendering-engine-id="renderingEngineId" viewport-id="PET_MIP_CORONAL" :measure-datas="measureDatas"
@ -259,7 +260,7 @@ import CustomWwwcForm from './../CustomWwwcForm'
import FusionForm from './FusionForm.vue'
import { getTableAnswerRowInfoList, getDicomSeriesInfo } from '@/api/trials'
import FusionEvent from './FusionEvent'
import FusionJumpToPointTool from '../../../dicoms3D/components/tools/FusionJumpToPointTool'
import FusionJumpToPointTool from '../../../dicoms3D/components/tools/FusionJumpToPointTool'
// import { ColorMaps } from '@kitware/vtk.js/Common/Core/ColorMaps'
import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction'
@ -425,12 +426,12 @@ export default {
fusion: { visible: false }, //
screenshotWindow: null,
hasVoiChanged: false,
lastUpper: null,
fusionCrosshairStyle: {
lineWidth: 2,
lineLength: 20,
centerHoleSize: 20,
}
lastUpper: null,
fusionCrosshairStyle: {
lineWidth: 2,
lineLength: 20,
centerHoleSize: 20,
}
// initFirstAnnotation:false
}
},
@ -628,7 +629,7 @@ export default {
this.setUpToolGroups()
this.setUpSynchronizers()
this.dispatchFusionCenterPoint()
this.dispatchFusionCenterPoint()
// this.$refs['CT_AXIAL'].scroll(0)
// this.$refs['PT_AXIAL'].scroll(0)
// this.$refs['FUSION_AXIAL'].scroll(0)
@ -980,7 +981,7 @@ export default {
cornerstoneTools.addTool(WindowLevelTool)
cornerstoneTools.addTool(ZoomTool)
cornerstoneTools.addTool(StackScrollTool)
cornerstoneTools.addTool(FusionJumpToPointTool)
cornerstoneTools.addTool(FusionJumpToPointTool)
cornerstoneTools.addTool(VolumeRotateTool)
cornerstoneTools.addTool(EllipticalROITool)
cornerstoneTools.addTool(CircleROITool)
@ -1012,7 +1013,7 @@ export default {
toolGroup.addTool(ProbeTool.toolName)
toolGroup.addTool(ScaleOverlayTool.toolName)
toolGroup.addTool(OrientationMarkerTool.toolName)
toolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
toolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
})
fusionToolGroup.addTool(PanTool.toolName)
@ -1028,7 +1029,7 @@ export default {
fusionToolGroup.addTool(ProbeTool.toolName)
fusionToolGroup.addTool(ScaleOverlayTool.toolName)
fusionToolGroup.addTool(OrientationMarkerTool.toolName)
fusionToolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
fusionToolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
// Here is the difference in the toolGroups used, that we need to specify the
// volume to use for the WindowLevelTool for the fusion viewports
@ -1080,13 +1081,13 @@ export default {
true // overwrite
)
toolGroup.setToolEnabled(ScaleOverlayTool.toolName)
toolGroup.setToolActive(FusionJumpToPointTool.toolName, {
bindings: [
{
mouseButton: MouseBindings.Primary // Left Click
}
]
})
toolGroup.setToolActive(FusionJumpToPointTool.toolName, {
bindings: [
{
mouseButton: MouseBindings.Primary // Left Click
}
]
})
// toolGroup.setToolConfiguration(OrientationMarkerTool.toolName, {
// orientationWidget: {
// enabled: true,
@ -1138,11 +1139,11 @@ export default {
mipToolGroup.setToolActive(VolumeRotateTool.toolName, {
bindings: [{ mouseButton: MouseBindings.Wheel }],
});
mipToolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
mipToolGroup.addTool(FusionJumpToPointTool.toolName, this.getFusionJumpToolConfiguration())
// Set the initial state of the tools, here we set one tool active on left click.
// This means left click will draw that tool.
mipToolGroup.setToolActive(FusionJumpToPointTool.toolName, {
mipToolGroup.setToolActive(FusionJumpToPointTool.toolName, {
bindings: [
{
mouseButton: MouseBindings.Primary // Left ClickR
@ -1156,81 +1157,111 @@ export default {
// mipToolGroup.setToolActive(OrientationMarkerTool.toolName)
mipToolGroup.addViewport(viewportIds.PETMIP.CORONAL, renderingEngineId)
},
getFusionJumpToolConfiguration() {
return {
targetViewportIds: [
viewportIds.CT.AXIAL,
viewportIds.PT.AXIAL,
viewportIds.FUSION.AXIAL,
viewportIds.PETMIP.CORONAL
],
useBrightestPoint: true,
jumpToTargetViewports: true,
dispatchEventName: 'fusion-mip-point-selected',
getReferenceLineColor: this.setFusionCrosshairsToolLineColor,
style: this.fusionCrosshairStyle,
referenceLinesCenterGapRadius: this.fusionCrosshairStyle.centerHoleSize,
minimal: {
enabled: true,
lineLengthInPx: this.fusionCrosshairStyle.lineLength,
},
mipViewportIds: [viewportIds.PETMIP.CORONAL]
}
},
setFusionCrosshairsToolLineColor(viewportId) {
const colors = {
[viewportIds.CT.AXIAL]: '#0000ff',
[viewportIds.PT.AXIAL]: '#0000ff',
[viewportIds.FUSION.AXIAL]: '#0000ff',
[viewportIds.PETMIP.CORONAL]: '#ff0000'
}
return colors[viewportId] || '#0000ff'
},
dispatchFusionCenterPoint(retryCount = 0) {
const renderEngine = getRenderingEngine(renderingEngineId)
if (!renderEngine) return
const toolGroupCandidates = [fusionToolGroupId, mipToolGroupUID, ptToolGroupId, ctToolGroupId]
let instance = null
for (const toolGroupId of toolGroupCandidates) {
const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
instance = toolGroup?.getToolInstance?.(FusionJumpToPointTool.toolName)
if (instance?.setPoint) break
}
if (!instance?.setPoint) {
if (retryCount < 10) {
setTimeout(() => {
this.dispatchFusionCenterPoint(retryCount + 1)
}, 120)
}
return
}
const candidates = [viewportIds.FUSION.AXIAL, viewportIds.PT.AXIAL, viewportIds.CT.AXIAL]
for (const viewportId of candidates) {
const viewport = renderEngine.getViewport(viewportId)
if (!viewport) continue
const width = viewport.element?.clientWidth
const height = viewport.element?.clientHeight
let worldPoint = null
if (width && height && viewport.canvasToWorld) {
worldPoint = viewport.canvasToWorld([width / 2, height / 2])
}
if ((!worldPoint || worldPoint.length < 3) && viewport.getCamera) {
worldPoint = viewport.getCamera()?.focalPoint
}
if (!worldPoint || worldPoint.length < 3) continue
instance.setPoint(worldPoint, viewportId, renderEngine.id, {
jumpToTargetViewports: true,
dispatchEvent: false,
})
return
}
if (retryCount < 10) {
setTimeout(() => {
this.dispatchFusionCenterPoint(retryCount + 1)
}, 120)
}
},
getFusionJumpToolConfiguration() {
return {
targetViewportIds: [
viewportIds.CT.AXIAL,
viewportIds.PT.AXIAL,
viewportIds.FUSION.AXIAL,
viewportIds.PETMIP.CORONAL
],
useBrightestPoint: true,
jumpToTargetViewports: true,
dispatchEventName: 'fusion-mip-point-selected',
getReferenceLineColor: this.setFusionCrosshairsToolLineColor,
style: this.fusionCrosshairStyle,
referenceLinesCenterGapRadius: this.fusionCrosshairStyle.centerHoleSize,
minimal: {
enabled: true,
lineLengthInPx: this.fusionCrosshairStyle.lineLength,
},
mipViewportIds: [viewportIds.PETMIP.CORONAL]
}
},
setFusionCrosshairsToolLineColor(viewportId) {
const colors = {
[viewportIds.CT.AXIAL]: '#0000ff',
[viewportIds.PT.AXIAL]: '#0000ff',
[viewportIds.FUSION.AXIAL]: '#0000ff',
[viewportIds.PETMIP.CORONAL]: '#ff0000'
}
return colors[viewportId] || '#0000ff'
},
handleFusionSlicePointChange({ viewportId, worldPoint }) {
if (!this.isFusion) return
if (!viewportId || !Array.isArray(worldPoint) || worldPoint.length < 3) return
if (viewportId === viewportIds.PETMIP.CORONAL) return
const activeViewportId = this.activeIndex === 1
? viewportIds.CT.AXIAL
: this.activeIndex === 2
? viewportIds.PT.AXIAL
: this.activeIndex === 3
? viewportIds.FUSION.AXIAL
: viewportIds.PETMIP.CORONAL
if (viewportId !== activeViewportId) return
const renderEngine = getRenderingEngine(renderingEngineId)
if (!renderEngine) return
const toolGroupCandidates = [fusionToolGroupId, mipToolGroupUID, ptToolGroupId, ctToolGroupId]
let instance = null
for (const toolGroupId of toolGroupCandidates) {
const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
instance = toolGroup.getToolInstance(FusionJumpToPointTool.toolName)
if (instance.setPoint) break
}
if (!instance.setPoint) return
instance.setPoint(worldPoint, viewportId, renderEngine.id, {
jumpToTargetViewports: false,
dispatchEvent: false,
})
},
dispatchFusionCenterPoint(retryCount = 0) {
const renderEngine = getRenderingEngine(renderingEngineId)
if (!renderEngine) return
const toolGroupCandidates = [fusionToolGroupId, mipToolGroupUID, ptToolGroupId, ctToolGroupId]
let instance = null
for (const toolGroupId of toolGroupCandidates) {
const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
instance = toolGroup?.getToolInstance?.(FusionJumpToPointTool.toolName)
if (instance?.setPoint) break
}
if (!instance?.setPoint) {
if (retryCount < 10) {
setTimeout(() => {
this.dispatchFusionCenterPoint(retryCount + 1)
}, 120)
}
return
}
const candidates = [viewportIds.FUSION.AXIAL, viewportIds.PT.AXIAL, viewportIds.CT.AXIAL]
for (const viewportId of candidates) {
const viewport = renderEngine.getViewport(viewportId)
if (!viewport) continue
const width = viewport.element?.clientWidth
const height = viewport.element?.clientHeight
let worldPoint = null
if (width && height && viewport.canvasToWorld) {
worldPoint = viewport.canvasToWorld([width / 2, height / 2])
}
if ((!worldPoint || worldPoint.length < 3) && viewport.getCamera) {
worldPoint = viewport.getCamera()?.focalPoint
}
if (!worldPoint || worldPoint.length < 3) continue
instance.setPoint(worldPoint, viewportId, renderEngine.id, {
jumpToTargetViewports: true,
dispatchEvent: false,
})
return
}
if (retryCount < 10) {
setTimeout(() => {
this.dispatchFusionCenterPoint(retryCount + 1)
}, 120)
}
},
getTextLines(data, targetId) {
const cachedVolumeStats = data.cachedStats[targetId]
const {

View File

@ -272,6 +272,24 @@ export default {
this.renderColorBar(this.presetName)
}
}
if (this.index !== 4 && viewport) {
const width = viewport.element.clientWidth
const height = viewport.element.clientHeight
let worldPoint = null
if (width && height && viewport.canvasToWorld) {
worldPoint = viewport.canvasToWorld([width / 2, height / 2])
}
if ((!worldPoint || worldPoint.length < 3) && viewport.getCamera) {
worldPoint = viewport.getCamera()?.focalPoint
}
if (Array.isArray(worldPoint) && worldPoint.length >= 3) {
this.$emit('fusionSlicePointChange', {
viewportId: this.viewportId,
worldPoint: [...worldPoint]
})
}
}
},
getOrientationMarker() {
// eslint-disable-next-line no-unused-vars

View File

@ -270,6 +270,24 @@ export default {
}
}
if (!this.isMip && viewport) {
const width = this.element?.clientWidth
const height = this.element?.clientHeight
let worldPoint = null
if (width && height && viewport.canvasToWorld) {
worldPoint = viewport.canvasToWorld([width / 2, height / 2])
}
if ((!worldPoint || worldPoint.length < 3) && viewport.getCamera) {
worldPoint = viewport.getCamera()?.focalPoint
}
if (Array.isArray(worldPoint) && worldPoint.length >= 3) {
this.$emit('fusionSlicePointChange', {
viewportId: this.viewportId,
worldPoint: [...worldPoint],
})
}
}
},
setFullScreen(index) {
setTimeout(() => {

View File

@ -362,7 +362,7 @@
:viewport-index="index" :active-tool="activeTool" @activeViewport="activeViewport"
@toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
@renderAnnotations="renderAnnotations" @upperRangeChange="upperRangeChange"
@contentMouseup="contentMouseup" />
@contentMouseup="contentMouseup" @fusionSlicePointChange="handleFusionSlicePointChange" />
</div>
</div>
<div v-if="readingTool === 2" class="fusion-hidden-viewports">
@ -2634,6 +2634,25 @@ export default {
if (this.isFusion) return [this.fusionToolGroupId]
return [`${this.viewportKey}-0`, `${this.viewportKey}-1`, `${this.viewportKey}-2`, `${this.viewportKey}-3`]
},
handleFusionSlicePointChange({ viewportId, worldPoint }) {
if (!this.isFusion) return
if (!viewportId || !Array.isArray(worldPoint) || worldPoint.length < 3) return
const activeFusionViewportId = `viewport-fusion-${this.activeViewportIndex}`
if (viewportId !== activeFusionViewportId) return
if (viewportId === 'viewport-fusion-3') return
const renderingEngine = getRenderingEngine(renderingEngineId)
if (!renderingEngine) return
const toolGroup = ToolGroupManager.getToolGroup(this.fusionToolGroupId)
const instance = toolGroup.getToolInstance(FusionJumpToPointTool.toolName)
if (!instance.setPoint) return
instance.setPoint(worldPoint, viewportId, renderingEngine.id, {
jumpToTargetViewports: false,
dispatchEvent: false,
})
},
setFusionMipJumpEnabled(enabled) {
if (!this.isFusion) return
const toolGroup = ToolGroupManager.getToolGroup(this.fusionToolGroupId)