From 9bc0b7b02a9263df16c0f982a1a09c90e436bfcf Mon Sep 17 00:00:00 2001 From: caiyiling <1321909229@qq.com> Date: Tue, 26 Mar 2024 13:51:24 +0800 Subject: [PATCH] =?UTF-8?q?MIP=E6=B7=BB=E5=8A=A0=E6=97=8B=E8=BD=AC?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reading/dicoms/components/DicomCanvas.vue | 2 +- .../dicoms/components/Fusion/PetCt.vue | 13 +- .../dicoms/components/Fusion/Viewport.vue | 182 +++++++++++++++--- .../reading/dicoms/components/Questions.vue | 8 +- 4 files changed, 166 insertions(+), 39 deletions(-) diff --git a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue index 4d263a4a..8ce2f9b6 100644 --- a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue +++ b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue @@ -660,7 +660,7 @@ export default { if (PX < 0) return if (PX > boxHeight) return var height = PX * 100 / boxHeight - var index = Math.trunc(this.stack.imageIds.length * this.height / 100) + var index = Math.trunc(this.stack.imageIds.length * height / 100) index = index > this.stack.imageIds.length ? this.stack.imageIds.length : index < 0 ? 0 : index // if (!cornerstone.imageCache.getImageLoadObject(this.stack.imageIds[index])) return this.height = height diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue index 5cc0df6f..d07be5d5 100644 --- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue +++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue @@ -2006,13 +2006,14 @@ export default { }, setToolToTarget(obj) { if (this.activeTool) { - toolGroupIds.forEach((toolGroupId) => { - const toolGroup = ToolGroupManager.getToolGroup(toolGroupId) + var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId] + toolGroupIds.forEach((toolGroupId) => { + const toolGroup = ToolGroupManager.getToolGroup(toolGroupId) - toolGroup.setToolPassive(this.activeTool) - }) - this.activeTool = '' - } + toolGroup.setToolPassive(this.activeTool) + }) + this.activeTool = '' + } this.isNonTargetMeasurement = false }, getTargetIdImage( diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue index 1a920846..fb78b20f 100644 --- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue +++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue @@ -2,7 +2,6 @@
@@ -63,8 +62,8 @@
Slice Thickness: {{ Number(seriesInfo.sliceThickness).toFixed(2) }}mm
WW/WL: {{ imageInfo.wwwc }}
-
-
+
+
{{ markers.top }} @@ -81,7 +80,9 @@
- +
+
+
@@ -95,11 +96,12 @@ import { import { utilities as toolsUtilities, - annotation + annotation, + Enums as toolsEnums // cursors } from '@cornerstonejs/tools' import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps' -import { vec3 } from 'gl-matrix' +import { vec3, mat4 } from 'gl-matrix' import html2canvas from 'html2canvas' const { getColormap } = utilities.colormap const { @@ -167,11 +169,19 @@ export default { wwwc: null }, sliderBoxHeight: 0, + sliderInfo: { oldB: null, oldM: null, isMove: false }, + rotateAngle: 0, + rotateBarLeft: 0, + rotateBarInfo: { + initX: null, + initLeft: null, + isMove: false + }, isFirstRender: true, defaultWindowLevel: {}, presetName: '', @@ -197,25 +207,29 @@ export default { element.addEventListener(VOLUME_NEW_IMAGE, this.handleVolumeNewImage) element.addEventListener(Enums.Events.CAMERA_MODIFIED, this.handleCameraModified) element.addEventListener(Enums.Events.VOI_MODIFIED, this.handleVOIModified) - if (this.index !== 4) { - element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.handleMouseMove) - } + element.addEventListener(toolsEnums.Events.MOUSE_WHEEL, this.handletoolsMouseWheel) + + element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.handleMouseMove) + element.addEventListener('mouseleave', this.handleMouseLeave) document.addEventListener('mouseup', () => { this.sliderMouseup() + if (this.index === 4) { + this.rotateBarMouseup() + } + }) + document.addEventListener('mousemove', (e) => { + this.sliderMousemove(e) + if (this.index === 4) { + this.rotateBarMousemove(e) + } }) - // document.addEventListener('mousewheel', (e) => { - // this.mousewheel(e) - // }) }, destroyed() { }, methods: { - // mousewheel(e){ - // console.log(e) - // }, handleVolumeNewImage(e) { const { imageIndex } = e.detail this.seriesInfo.imageIdIndex = imageIndex @@ -300,6 +314,7 @@ export default { renderingEngine = getRenderingEngine(this.renderingEngineId) viewport = renderingEngine.getViewport(this.viewportId) if (!viewport) return + var zoom = viewport.getZoom() if (!zoom) return this.imageInfo.zoom = zoom.toFixed(4) @@ -309,6 +324,7 @@ export default { renderingEngine = getRenderingEngine(this.renderingEngineId) viewport = renderingEngine.getViewport(this.viewportId) if (!viewport) return + var properties = viewport.getProperties() if (properties && properties.voiRange) { var { lower, upper } = properties.voiRange @@ -320,17 +336,19 @@ export default { } }, handleMouseMove(e) { - const { currentPoints } = e.detail - const worldPoint = currentPoints.world - const { imageData } = this.volume - const index = imageData.worldToIndex(worldPoint) + if (this.index !== 4) { + const { currentPoints } = e.detail + const worldPoint = currentPoints.world + const { imageData } = this.volume + const index = imageData.worldToIndex(worldPoint) - index[0] = Math.floor(index[0]) - index[1] = Math.floor(index[1]) - index[2] = Math.floor(index[2]) - this.mousePosition.index = index + index[0] = Math.floor(index[0]) + index[1] = Math.floor(index[1]) + index[2] = Math.floor(index[2]) + this.mousePosition.index = index - this.mousePosition.value = this.getValue(this.volume, worldPoint) + this.mousePosition.value = this.getValue(this.volume, worldPoint) + } }, getValue(volume, worldPos) { const { dimensions, scalarData, imageData } = volume @@ -357,7 +375,6 @@ export default { this.mousePosition.value = null }, goViewer(e) { - // console.log(e) var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight this.sliderBoxHeight = height var index = Math.trunc(this.seriesInfo.imageIds.length * this.sliderBoxHeight / 100) @@ -365,6 +382,7 @@ export default { this.scroll(index) } }, + sliderMousedown(e) { var boxHeight = this.$refs['sliderBox'].clientHeight this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100 @@ -378,16 +396,103 @@ export default { if (!this.sliderInfo.isMove) return var PX = this.sliderInfo.oldB - (this.sliderInfo.oldM - e.clientY) var boxHeight = this.$refs['sliderBox'].clientHeight + // 滚动翻页 if (PX < 0) return if (PX > boxHeight) return - var height = PX * 100 / boxHeight - var index = Math.trunc(this.seriesInfo.imageIds.length * this.sliderBoxHeight / 100) + const height = PX * 100 / boxHeight + var index = Math.trunc(this.seriesInfo.imageIds.length * height / 100) index = index > this.seriesInfo.imageIds.length ? this.seriesInfo.imageIds.length : index < 0 ? 0 : index this.sliderBoxHeight = height if (this.seriesInfo.imageIdIndex !== index) { this.scroll(index) } }, + handletoolsMouseWheel(e) { + const { viewportId, wheel } = e.detail + if (viewportId === 'PET_MIP_CORONAL') { + const container = document.getElementById('rotateBar') + const slider = document.getElementById('rotateSlider') + const containerWidth = container.offsetWidth + const sliderWidth = slider.offsetWidth + const maxX = containerWidth - sliderWidth + const { direction } = wheel + console.log(containerWidth - sliderWidth) + var x = Math.trunc(30 * ((containerWidth - sliderWidth) / 360)) + if (direction > 0 && (this.rotateBarLeft + x) > maxX) { + this.rotateBarLeft = x - (containerWidth - sliderWidth - this.rotateBarLeft) + } else if (direction < 0 && (this.rotateBarLeft < x)) { + this.rotateBarLeft = containerWidth - (x - this.rotateBarLeft + sliderWidth) + } else { + this.rotateBarLeft = x * direction + this.rotateBarLeft + } + } + }, + rotateBarMousemove(e) { + // 滚动旋转 + if (!this.rotateBarInfo.isMove) return + const container = document.getElementById('rotateBar') + const slider = document.getElementById('rotateSlider') + const containerWidth = container.offsetWidth + const sliderWidth = slider.offsetWidth + let x = Math.trunc(e.clientX - this.rotateBarInfo.initX + this.rotateBarInfo.initLeft) + if (x < 0) x = 0 + if (x > containerWidth - sliderWidth) x = containerWidth - sliderWidth + const deltaX = x - this.rotateBarLeft + const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180) + this.rotate(angle) + this.rotateBarLeft = x + }, + rotateBarMousedown(e) { + console.log('rotateBarMousedown') + this.rotateBarInfo.initLeft = e.srcElement.offsetLeft + this.rotateBarInfo.initX = e.clientX + this.rotateBarInfo.isMove = true + e.stopImmediatePropagation() + e.stopPropagation() + e.preventDefault() + }, + rotate(angle) { + renderingEngine = getRenderingEngine(this.renderingEngineId) + viewport = renderingEngine.getViewport(this.viewportId) + const camera = viewport.getCamera() + const { viewUp, position, focalPoint } = camera + const [cx, cy, cz] = focalPoint + const [ax, ay, az] = [0, 0, 1] + const newPosition = [0, 0, 0] + const newFocalPoint = [0, 0, 0] + const newViewUp = [0, 0, 0] + + const transform = mat4.identity(new Float32Array(16)) + mat4.translate(transform, transform, [cx, cy, cz]) + mat4.rotate(transform, transform, angle, [ax, ay, az]) + mat4.translate(transform, transform, [-cx, -cy, -cz]) + vec3.transformMat4(newPosition, position, transform) + vec3.transformMat4(newFocalPoint, focalPoint, transform) + + mat4.identity(transform) + mat4.rotate(transform, transform, angle, [ax, ay, az]) + vec3.transformMat4(newViewUp, viewUp, transform) + + viewport.setCamera({ + position: newPosition, + viewUp: newViewUp, + focalPoint: newFocalPoint + }) + + viewport.render() + }, + clickRotate(e) { + // console.log('clickRotate') + // const container = document.getElementById('rotateBar') + // const containerWidth = container.offsetWidth + // const slider = document.getElementById('rotateSlider') + // const sliderWidth = slider.offsetWidth + // const x = e.clientX - this.rotateBarInfo.initX + this.rotateBarInfo.initLeft + // const deltaX = x - this.rotateBarLeft + // const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180) + // this.rotate(angle) + // this.rotateBarLeft = x + }, scroll(index) { renderingEngine = getRenderingEngine(this.renderingEngineId) viewport = renderingEngine.getViewport(this.viewportId) @@ -403,7 +508,9 @@ export default { }) renderingEngine.render() }, - + rotateBarMouseup(e) { + this.rotateBarInfo.isMove = false + }, sliderMouseup(e) { this.sliderInfo.isMove = false }, @@ -549,6 +656,25 @@ export default { z-index: 1; // background: #f44336; } + .rotate_slider_box{ + position: absolute; + width: 380px; + height: 10px; + bottom: 5px; + left: 50%; + transform: translateX(-50%); + background: #333; + cursor: pointer; + .box{ + z-index:10; + background: #9e9e9e; + height: 100%; + width: 20px; + position: absolute; + top: 0; + cursor: move + } + } // .my_slider_box:after{ // content: ''; // position: absolute; diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue b/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue index 4827806e..90ef1335 100644 --- a/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue +++ b/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue @@ -258,7 +258,7 @@ export default { // 是否有标记未保存 var existUnSave = this.checkAnnotationStatus(this.questions) if (existUnSave) { - this.$alert(this.$t('trials:lugano:message:saveWarning'),this.$t('trials:lugano:fusionDialog:warning')) + this.$alert(this.$t('trials:lugano:message:saveWarning'), this.$t('trials:lugano:fusionDialog:warning')) return } var currentSpleenStatus = this.questionForm[this.spleenStatusId] @@ -462,13 +462,13 @@ export default { this.loading = false return } - var obj = Object.assign({},annotationObj) + var obj = Object.assign({}, annotationObj) DicomEvent.$emit('getScreenshots', { questionId: obj.Id, visitTaskId: this.visitTaskId, lesionName: obj.OrderMarkName, markTool: obj.MarkTool, readingTaskState: this.readingTaskState, isMarked: !!obj.MeasureData }, async val => { var pictureObj = await this.uploadScreenshots(`${new Date().getTime()}`, val) var picturePath = pictureObj.isSuccess ? this.$getObjectName(pictureObj.result.url) : '' - + if (obj && obj.MeasureData) { - var annotation = Object.assign({},obj.MeasureData) + var annotation = Object.assign({}, obj.MeasureData) obj.MeasureData = JSON.stringify(annotation) obj.PicturePath = picturePath questionMarkInfoList.push(obj)