XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MIP添加旋转拖拽条

uat_us
caiyiling 2024-03-26 13:51:24 +08:00
parent 16f943dd50
commit 9bc0b7b02a
4 changed files with 166 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
View File

@ -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

1
src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
View File

@ -2006,6 +2006,7 @@ export default {
},
setToolToTarget(obj) {
if (this.activeTool) {
var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId]
toolGroupIds.forEach((toolGroupId) => {
const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)

162
src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
View File

@ -2,7 +2,6 @@
<div
class="viewport_container"
:class="['item',activeIndex === index?'item_active':'']"
@mousemove="sliderMousemove"
@mouseup="sliderMouseup"
>
<div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
@ -63,8 +62,8 @@
<div v-show="seriesInfo.sliceThickness && index !== 3">Slice Thickness: {{ Number(seriesInfo.sliceThickness).toFixed(2) }}mm</div>
<div v-show="imageInfo.wwwc ">WW/WL: {{ imageInfo.wwwc }}</div>
</div>
<div v-if="index!==4" ref="sliderBox" class="slider_box" :style="{background: index === 2?'#ddd':'#333'}" @click.stop="goViewer($event)">
<div :style="{top: sliderBoxHeight + '%'}" class="box" @mousedown.stop="sliderMousedown($event)" />
<div v-if="index !== 4" ref="sliderBox" class="slider_box" :style="{background: index === 2?'#ddd':'#333'}" @click.stop="goViewer($event)">
<div :style="{top: sliderBoxHeight + '%'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
</div>
<div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
{{ markers.top }}
@ -81,7 +80,9 @@
</div>
<div v-if="presetName" class="color_bar">
<canvas id="colorBar_Canvas" />
</div>
<div v-if="index === 4" id="rotateBar" ref="rotateBar" class="rotate_slider_box" @click.stop="clickRotate($event)">
<div id="rotateSlider" :style="{left: rotateBarLeft + 'px'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="rotateBarMousedown($event)" />
</div>
</div>
</template>
@ -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(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,6 +336,7 @@ export default {
}
},
handleMouseMove(e) {
if (this.index !== 4) {
const { currentPoints } = e.detail
const worldPoint = currentPoints.world
const { imageData } = this.volume
@ -331,6 +348,7 @@ export default {
this.mousePosition.index = index
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;

6
src/views/trials/trials-panel/reading/dicoms/components/Questions.vue
View File

@ -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)