1090 lines
38 KiB
Plaintext
1090 lines
38 KiB
Plaintext
<template>
|
|
<div
|
|
id="canvas"
|
|
ref="canvas"
|
|
v-loading="loading"
|
|
element-loading-text="Loading..."
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
style="position:relative;"
|
|
class="cornerstone-element"
|
|
@contextmenu.prevent="onContextmenu"
|
|
>
|
|
<div v-show="dicomInfo.series" class="info-series">
|
|
<h2 style="color:#f44336;padding: 5px 0px;margin: 0;">{{ stack.taskBlindName }}</h2>
|
|
<div>Series #{{ dicomInfo.series }}</div>
|
|
<div>Image #{{ dicomInfo.frame }}</div>
|
|
<div>{{ dicomInfo.modality }}</div>
|
|
</div>
|
|
<div v-show="dicomInfo.series" class="info-image">
|
|
<div>
|
|
P {{ dicomInfo.size }}
|
|
<span v-show="dicomInfo.pixel">{{ dicomInfo.pixel }}mm</span>
|
|
</div>
|
|
<div v-show="dicomInfo.thick">Slice Thickness {{ dicomInfo.thick }}mm</div>
|
|
<div>WW/WC {{ dicomInfo.wwwc }}</div>
|
|
<div>Zoom {{ dicomInfo.zoom }}</div>
|
|
<div v-show="dicomInfo.location">Location {{ dicomInfo.location }}mm</div>
|
|
<!-- <div v-show="toolState.clipPlaying">FPS {{ dicomInfo.fps }}</div> -->
|
|
</div>
|
|
|
|
<div class="info-subject">
|
|
<!-- <div>{{ dicomInfo.hospital }}</div> -->
|
|
<div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div>
|
|
<div>{{ dicomInfo.name }}</div>
|
|
<!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
|
|
<!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
|
|
<div>{{ dicomInfo.time }}</div>
|
|
</div>
|
|
<!-- <div v-show="stack.firstImageLoading" class="load-indicator">
|
|
Loading Series #{{ stack.seriesNumber }}...
|
|
</div>-->
|
|
<!-- context-menu-wrapper -->
|
|
<div v-show="isShowContextmenu" class="context-menu-wrapper">
|
|
<ul class="menu">
|
|
<li
|
|
:class="[selectedLesion && typeof selectedLesion === 'object'?'menu_active':'menu_disabled']"
|
|
>
|
|
<div @click.native="handleSplit">Split</div>
|
|
</li>
|
|
<li>
|
|
<div>Merge</div>
|
|
<ul class="submenu">
|
|
<li><div>T01</div></li>
|
|
<li><div>T02</div></li>
|
|
<li><div>T03</div></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { splitLesion } from '@/api/trials'
|
|
import Store from './Store'
|
|
import Vue from 'vue'
|
|
import { mapGetters } from 'vuex'
|
|
import Contextmenu from 'vue-contextmenujs'
|
|
Vue.use(Contextmenu)
|
|
import * as cornerstone from 'cornerstone-core'
|
|
import * as cornerstoneMath from 'cornerstone-math'
|
|
import * as cornerstoneTools from 'cornerstone-tools'
|
|
const scroll = cornerstoneTools.import('util/scrollToIndex')
|
|
import Hammer from 'hammerjs'
|
|
import LengthTool from '@/views/trials/trials-panel/reading/dicoms/tools/Length/LengthTool'
|
|
import BidirectionalTool from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/BidirectionalTool'
|
|
import ArrowAnnotateTool from '@/views/trials/trials-panel/reading/dicoms/tools/ArrowAnnotate/ArrowAnnotateTool'
|
|
cornerstoneTools.external.cornerstone = cornerstone
|
|
cornerstoneTools.external.Hammer = Hammer
|
|
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
|
cornerstoneTools.toolStyle.setToolWidth(2)
|
|
cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)')
|
|
cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)')
|
|
// cornerstoneTools.init({ globalToolSyncEnabled: true })
|
|
cornerstoneTools.init()
|
|
|
|
export default {
|
|
name: 'DicomCanvas',
|
|
props: {
|
|
|
|
// isCurrentTask: {
|
|
// type: Boolean,
|
|
// required: true
|
|
// },
|
|
// isBaseline: {
|
|
// type: Boolean,
|
|
// required: true
|
|
// },
|
|
// readingTaskState: {
|
|
// type: Number,
|
|
// required: true
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
isShowContextmenu: false,
|
|
loading: false,
|
|
canvas: {},
|
|
stack: {
|
|
studyId: '',
|
|
seriesId: '',
|
|
instanceId: '',
|
|
seriesNumber: '',
|
|
imageIds: [],
|
|
currentImageIdIndex: 0,
|
|
firstImageLoading: false,
|
|
visitTaskId: '',
|
|
taskBlindName: ''
|
|
// preventCache: true
|
|
},
|
|
dicomInfo: {
|
|
hospital: '',
|
|
pid: '',
|
|
name: '',
|
|
sex: '',
|
|
age: '',
|
|
acc: '',
|
|
modality: '',
|
|
time: '',
|
|
series: '',
|
|
frame: '',
|
|
size: '',
|
|
pixel: 0,
|
|
thick: 0,
|
|
wwwc: '',
|
|
zoom: 0,
|
|
fps: 5
|
|
},
|
|
toolState: {
|
|
initialized: false,
|
|
activeTool: 'none',
|
|
dicomInfoVisible: false,
|
|
clipPlaying: false,
|
|
viewportInvert: false
|
|
},
|
|
loadImagePromise: null,
|
|
AnnotationSync: null,
|
|
allROIToolData: {},
|
|
type: '',
|
|
series: '',
|
|
ToolStateManager: null,
|
|
renderedMeasured: [],
|
|
measuredTools: ['Length', 'Bidirectional', 'ArrowAnnotate'],
|
|
measureData: [],
|
|
selectedLesion: null,
|
|
activeTool: 0, // 0:enable 1:passive 2:active
|
|
isCurrentTask: false,
|
|
isBaseline: false,
|
|
readingTaskState: 2
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['visitTaskList'])
|
|
},
|
|
mounted() {
|
|
this.type = this.$router.currentRoute.query.type ? this.$router.currentRoute.query.type : ''
|
|
this.canvas = this.$refs.canvas
|
|
this.canvas.addEventListener('cornerstonenewimage', this.onNewImage)
|
|
this.canvas.addEventListener(
|
|
'cornerstoneimagerendered',
|
|
this.onImageRendered
|
|
)
|
|
this.canvas.addEventListener(
|
|
'cornerstoneimageloaded',
|
|
this.onImageLoaded
|
|
)
|
|
|
|
this.canvas.addEventListener(
|
|
'cornerstonetoolsclipstopped',
|
|
this.onClipStopped
|
|
)
|
|
this.canvas.addEventListener(
|
|
'cornerstonetoolsmeasurementcompleted',
|
|
this.onMeasurementcompleted
|
|
)
|
|
// this.canvas.addEventListener(
|
|
// 'cornerstonetoolsmeasurementmodified',
|
|
// this.onMeasurementmodified
|
|
// )
|
|
|
|
// this.canvas.addEventListener(
|
|
// 'cornerstonetoolsmeasurementremoved',
|
|
// this.onMeasurementremoved
|
|
// )
|
|
this.canvas.addEventListener('cornerstonetoolsmouseup', this.mouseUp)
|
|
// this.canvas.addEventListener('cornerstonetoolsmouseup', this.mouseDown)
|
|
this.canvas.addEventListener('cornerstonetoolsmouseclick', this.mouseClick)
|
|
// this.canvas.addEventListener('click', this.cotextMenuClick)
|
|
this.canvas.addEventListener('cornerstonetoolsstackscroll', this.stackScrollCallback)
|
|
Store.$on('getMeasureData', () => {
|
|
this.getMeasureData()
|
|
console.log('getMeasureData')
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
Store.$off('getMeasureData')
|
|
},
|
|
methods: {
|
|
getMeasureData() {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
|
|
this.measureData = this.visitTaskList[idx].MeasureData
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
const imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
|
ToolStateManager.clearImageIdToolState(imageId)
|
|
cornerstone.updateImage(this.canvas, true)
|
|
},
|
|
onContextmenu(event) {
|
|
if (this.isBaseline || this.readingTaskState >= 2) return false
|
|
|
|
const x = event.offsetX
|
|
const y = event.offsetY
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
var imageId = `wadouri:/api/instance/content/${this.stack.instanceId}`
|
|
this.measuredTools.map(toolType => {
|
|
const toolState = ToolStateManager.getImageIdToolState(imageId, toolType)
|
|
if (!toolState) return
|
|
var toolObj = new cornerstoneTools[`${toolType}Tool`]()
|
|
|
|
var i = toolState.data.findIndex(data => toolObj.pointNearTool(this.canvas, data, { x, y }, 'mouse'))
|
|
if (i === -1) return false
|
|
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
|
|
var rowId = null
|
|
if (idx > -1) {
|
|
rowId = this.measureData[idx].RowId
|
|
}
|
|
|
|
if (rowId) {
|
|
this.selectedLesion = toolState.data[i]
|
|
this.$contextmenu({
|
|
items: [
|
|
{
|
|
label: 'Split',
|
|
divided: true,
|
|
onClick: () => {
|
|
this.handleSplit()
|
|
}
|
|
}
|
|
// {
|
|
// label: 'Merge',
|
|
// divided: true,
|
|
// children: [
|
|
// {
|
|
// label: 'T01'
|
|
// },
|
|
// {
|
|
// label: 'T02'
|
|
// },
|
|
// {
|
|
// label: 'T03'
|
|
// }
|
|
// ]
|
|
// }
|
|
],
|
|
event,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
customClass: 'class-a',
|
|
zIndex: 3,
|
|
minWidth: 100
|
|
})
|
|
return false
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
handleSplit() {
|
|
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === this.selectedLesion.uuid)
|
|
if (idx > -1) {
|
|
const loading = this.$loading({ fullscreen: true })
|
|
var params = {
|
|
visitTaskId: this.stack.visitTaskId,
|
|
questionId: this.measureData[idx].QuestionId,
|
|
rowId: this.measureData[idx].RowId
|
|
}
|
|
splitLesion(params).then(res => {
|
|
loading.close()
|
|
Store.$emit('refreshVisitList')
|
|
// Store.$emit('refreshMeasuredData', this.measuredData[idx])
|
|
// Store.$emit('refreshMeasurementList', this.stack.visitTaskId)
|
|
})
|
|
}
|
|
},
|
|
mouseUp(e) {
|
|
console.log('mouseUp')
|
|
this.getToolStateInfo(e)
|
|
},
|
|
getToolStateInfo(e) {
|
|
const { element, currentPoints, image } = e.detail
|
|
var imageId = image.imageId
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
this.measuredTools.map(toolType => {
|
|
const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, toolType)
|
|
if (toolState) {
|
|
var toolObj = new cornerstoneTools[`${toolType}Tool`]()
|
|
|
|
var i = toolState.data.findIndex(data => toolObj.pointNearTool(element, data, currentPoints.canvas, 'mouse'))
|
|
if (i > -1) {
|
|
const measureData = {}
|
|
measureData.studyId = this.stack.studyId
|
|
measureData.seriesId = this.stack.seriesId
|
|
measureData.instanceId = instanceId
|
|
measureData.data = toolState.data[i]
|
|
measureData.type = toolType
|
|
measureData.thick = this.dicomInfo.thick
|
|
var uuid = toolState.data[i].uuid
|
|
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === uuid)
|
|
if (idx > -1) {
|
|
var questionInfo = this.measureData[idx]
|
|
this.$emit('modifyMeasureData', { measureData, questionInfo })
|
|
} else {
|
|
this.$emit('setMeasureData', measureData)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
stackScrollCallback(e) {
|
|
this.stack.currentImageIdIndex = e.detail.newImageIdIndex
|
|
},
|
|
renderMeasuredData(e) {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
|
|
this.measureData = this.visitTaskList[idx].MeasureData
|
|
const { element } = e.detail
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
this.measureData.forEach(data => {
|
|
if (this.activeTool === 2) {
|
|
cornerstoneTools.setToolActiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
|
|
} else if (this.activeTool === 1) {
|
|
cornerstoneTools.setToolPassiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
|
|
} else if (this.activeTool === 0) {
|
|
cornerstoneTools.setToolEnabledForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
|
|
}
|
|
|
|
if (data.SeriesId === this.stack.seriesId && data.InstanceId === this.stack.instanceId && data.MeasureData) {
|
|
const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, data.MeasureData.type)
|
|
if (toolState && toolState.data.length > 0) {
|
|
var idx = toolState.data.findIndex(item => item.uuid === data.MeasureData.data.uuid)
|
|
if (idx === -1) {
|
|
ToolStateManager.addImageIdToolState(e.detail.image.imageId, data.MeasureData.type, data.MeasureData.data)
|
|
}
|
|
} else {
|
|
ToolStateManager.addImageIdToolState(e.detail.image.imageId, data.MeasureData.type, data.MeasureData.data)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
mouseClick(e) {
|
|
const { element, currentPoints } = e.detail
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
this.measuredTools.map(toolType => {
|
|
const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, toolType)
|
|
if (!toolState) return
|
|
var toolObj = new cornerstoneTools[`${toolType}Tool`]()
|
|
// toolState.data.forEach(data => {
|
|
// // data.color = ''
|
|
// })
|
|
var i = toolState.data.findIndex(data => toolObj.pointNearTool(element, data, currentPoints.canvas, 'mouse'))
|
|
if (i > -1) {
|
|
// 设置鼠标选中颜色rgb(0, 255, 0)
|
|
// toolState.data[i].color = ''
|
|
|
|
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
|
|
if (idx > -1) {
|
|
Store.$emit('setCollapseActive', this.measureData[idx])
|
|
}
|
|
// toolState.data[i].active = true
|
|
// cornerstone.updateImage(element)
|
|
}
|
|
})
|
|
},
|
|
loadImageStack(dicomSeries) {
|
|
this.isCurrentTask = dicomSeries.isCurrentTask
|
|
this.isBaseline = dicomSeries.isBaseline
|
|
this.readingTaskState = dicomSeries.readingTaskState
|
|
if (this.isCurrentTask && this.readingTaskState < 2) {
|
|
this.activeTool = 1
|
|
} else {
|
|
this.activeTool = 0
|
|
}
|
|
this.series = dicomSeries
|
|
|
|
this.stack.seriesId = dicomSeries.seriesId
|
|
this.stack.studyId = dicomSeries.studyId
|
|
this.stack.seriesNumber = dicomSeries.seriesNumber
|
|
|
|
this.stack.imageIds = dicomSeries.imageIds
|
|
this.stack.currentImageIdIndex = dicomSeries.imageIdIndex ? dicomSeries.imageIdIndex : 0
|
|
this.stack.firstImageLoading = true
|
|
this.stack.visitTaskId = dicomSeries.visitTaskId
|
|
this.stack.taskBlindName = dicomSeries.taskBlindName
|
|
// this.measuredData = dicomSeries.measuredData
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === dicomSeries.visitTaskId)
|
|
this.measureData = this.visitTaskList[idx].MeasureData
|
|
const imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
|
this.stack.instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
|
|
if (this.toolState.clipPlaying) this.toggleClipPlay()
|
|
this.toolState.viewportInvert = false
|
|
this.toolState.dicomInfoVisible = false
|
|
|
|
const element = this.$refs.canvas
|
|
cornerstone.enable(element)
|
|
element.tabIndex = 0
|
|
element.focus()
|
|
var scope = this
|
|
// cornerstone.imageCache.setMaximumSizeBytes(100000)
|
|
// this.loading = true
|
|
const loading = this.$loading({ fullscreen: true })
|
|
// cornerstone.loadImage(this.stack.imageIds[this.stack.currentImageIdIndex])
|
|
cornerstone.loadAndCacheImage(this.stack.imageIds[this.stack.currentImageIdIndex])
|
|
.then(image => {
|
|
// this.loading = false
|
|
loading.close()
|
|
scope.onFirstImageLoaded(image)
|
|
}).catch((error) => {
|
|
// this.loading = false
|
|
loading.close()
|
|
if (error.error && error.error.message) {
|
|
this.$message.error(error.error.message)
|
|
}
|
|
})
|
|
},
|
|
onFirstImageLoaded(image) {
|
|
console.log('onFirstImageLoaded')
|
|
const element = this.$refs.canvas
|
|
var viewport = cornerstone.getDefaultViewportForImage(this.canvas, image)
|
|
cornerstone.displayImage(this.canvas, image, viewport)
|
|
|
|
if (!this.toolState.initialized) {
|
|
this.toolState.initialized = true
|
|
const toolButtons = document.querySelectorAll('[data-tool]')
|
|
|
|
// const scope = this
|
|
Array.from(toolButtons).forEach((toolBtn) => {
|
|
// Add the tool
|
|
const toolName = toolBtn.getAttribute('data-tool')
|
|
const apiTool = cornerstoneTools[`${toolName}Tool`]
|
|
if (apiTool) {
|
|
const toolAlreadyAddedToElement = cornerstoneTools.getToolForElement(element, apiTool)
|
|
if (!toolAlreadyAddedToElement) {
|
|
if (toolName === 'Length') {
|
|
cornerstoneTools.addToolForElement(element, LengthTool)
|
|
} else if (toolName === 'Bidirectional') {
|
|
cornerstoneTools.addToolForElement(element, BidirectionalTool)
|
|
} else if (toolName === 'ArrowAnnotate') {
|
|
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true }})
|
|
} else {
|
|
cornerstoneTools.addToolForElement(element, apiTool)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)) {
|
|
cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {})
|
|
if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.ScaleOverlayTool)) {
|
|
cornerstoneTools.addToolForElement(element, cornerstoneTools.ScaleOverlayTool)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(element, 'ScaleOverlay', {})
|
|
|
|
if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.OrientationMarkersTool)) {
|
|
cornerstoneTools.addToolForElement(element, cornerstoneTools.OrientationMarkersTool)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', {})
|
|
}
|
|
|
|
cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
|
|
cornerstoneTools.addToolState(this.canvas, 'stack', this.stack)
|
|
cornerstoneTools.stackPrefetch.enable(this.canvas)
|
|
cornerstone.updateImage(element, true)
|
|
|
|
this.stack.firstImageLoading = false
|
|
this.toolState.dicomInfoVisible = true
|
|
|
|
this.stack.instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
|
},
|
|
onNewImage(e) {
|
|
console.log('cornerstonenewimage')
|
|
e.detail.enabledElement.options = {}
|
|
var data = e.detail.image.data
|
|
this.dicomInfo.hospital = data.string('x00080080')
|
|
// this.dicomInfo.pid = data.string('x00100020')
|
|
this.dicomInfo.pid = data.string('x00120040')
|
|
this.dicomInfo.name = data.string('x00100010')
|
|
this.dicomInfo.age = data.string('x00101010')
|
|
this.dicomInfo.sex = data.string('x00100040')
|
|
this.dicomInfo.acc = data.string('x00080050') // 登记号
|
|
this.dicomInfo.modality = data.string('x00080060')
|
|
this.dicomInfo.time = this.formatDicomDateTime(
|
|
data.string('x00080020'),
|
|
data.string('x00080030')
|
|
)
|
|
this.dicomInfo.series = data.string('x00200011')
|
|
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
|
|
this.stack.imageIds.length
|
|
}`
|
|
this.dicomInfo.size = `${data.uint16('x00280010')}x${data.uint16(
|
|
'x00280011'
|
|
)}`
|
|
// var pixel = data.floatString('x00280030')
|
|
if (this.dicomInfo.pixel) {
|
|
this.dicomInfo.pixel = this.dicomInfo.pixel.toFixed(2)
|
|
}
|
|
this.dicomInfo.thick = data.floatString('x00180050') // 切片厚度
|
|
if (this.dicomInfo.thick) {
|
|
this.dicomInfo.thick = this.dicomInfo.thick.toFixed(2)
|
|
}
|
|
},
|
|
formatDicomDateTime(date, time) {
|
|
if (date) {
|
|
date = `${date.substr(0, 4)}-${date.substr(4, 2)}-${date.substr(6, 2)}`
|
|
}
|
|
if (time) { time = `${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}` }
|
|
return time ? `${date} ${time}` : `${date} 00:00:00`
|
|
},
|
|
onImageLoaded(e) {
|
|
console.log('onImageLoaded')
|
|
},
|
|
onImageRendered(e) {
|
|
// const { element } = e.detail
|
|
console.log('onImageRendered')
|
|
var imageId = e.detail.image.imageId
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
this.stack.instanceId = instanceId
|
|
var viewport = e.detail.viewport
|
|
this.dicomInfo.wwwc = `${Math.round(
|
|
viewport.voi.windowWidth
|
|
)}/${Math.round(viewport.voi.windowCenter)}` // 窗位
|
|
this.dicomInfo.zoom = viewport.scale.toFixed(2)
|
|
var data = e.detail.image.data
|
|
const position = data.string('x00200032')
|
|
this.dicomInfo.location = position ? Number(
|
|
position.split('\\')[position.split('\\').length - 1]
|
|
).toFixed(2) : ''
|
|
this.renderMeasuredData(e)
|
|
},
|
|
|
|
onMeasurementcompleted(e) {
|
|
const { element } = e.detail
|
|
// 测量完成
|
|
console.log('completed')
|
|
this.activeTool = 1
|
|
// cornerstoneTools.setToolPassiveForElement(element, e.detail.toolName)
|
|
|
|
var imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
if (e.detail.toolName === 'Length' || e.detail.toolName === 'Bidirectional' || e.detail.toolName === 'ArrowAnnotate') {
|
|
setTimeout(() => {
|
|
const measureData = {}
|
|
measureData.studyId = this.stack.studyId
|
|
measureData.seriesId = this.stack.seriesId
|
|
measureData.instanceId = instanceId
|
|
measureData.data = e.detail.measurementData
|
|
measureData.type = e.detail.toolName
|
|
measureData.thick = this.dicomInfo.thick
|
|
this.$emit('setMeasureData', measureData)
|
|
}, 500)
|
|
|
|
cornerstoneTools.setToolPassiveForElement(element, e.detail.toolName)
|
|
}
|
|
},
|
|
onMeasurementremoved(e) {
|
|
if (e.detail.toolName === 'Length' || e.detail.toolName === 'Bidirectional') {
|
|
this.$emit('removeMeasureData', e.detail.measurementData.uuid)
|
|
}
|
|
},
|
|
onMeasurementmodified(e) {
|
|
// 移动
|
|
console.log('modified')
|
|
const { image } = e.detail
|
|
var imageId = image.imageId
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
|
|
if (e.detail.toolName === 'Length' || e.detail.toolName === 'Bidirectional' || e.detail.toolName === 'ArrowAnnotate') {
|
|
const measureData = {}
|
|
measureData.studyId = this.stack.studyId
|
|
measureData.seriesId = this.stack.seriesId
|
|
measureData.instanceId = instanceId
|
|
measureData.data = e.detail.measurementData
|
|
measureData.type = e.detail.toolName
|
|
measureData.thick = this.dicomInfo.thick
|
|
var uuid = e.detail.measurementData.uuid
|
|
var idx = this.measuredData.findIndex(item => item.MeasureData && item.MeasureData.data.uuid === uuid)
|
|
var questionInfo = idx > -1 ? this.measuredData[idx] : ''
|
|
this.$emit('modifyMeasureData', { measureData, questionInfo })
|
|
cornerstoneTools.setToolPassiveForElement(this.canvas, e.detail.toolName)
|
|
// this.canvas.removeEventListener('mouseup', this.measurementMouseUpHandler)
|
|
}
|
|
},
|
|
measurementMouseUpHandler(e) {
|
|
console.log('measurementMouseUp')
|
|
},
|
|
// updateImage(obj) {
|
|
// // const element = this.$refs.canvas
|
|
// // this.measuredData = obj.measuredData
|
|
// // const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
// // var imageId = `wadouri:/api/instance/content/${obj.instanceId}`
|
|
// // ToolStateManager.clearImageIdToolState(imageId)
|
|
// // cornerstone.updateImage(element, true)
|
|
// },
|
|
updateImage(instanceId) {
|
|
var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
|
|
this.measureData = this.visitTaskList[i].MeasureData
|
|
const element = this.$refs.canvas
|
|
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
var imageId = `wadouri:/api/instance/content/${instanceId}`
|
|
ToolStateManager.clearImageIdToolState(imageId)
|
|
cornerstone.updateImage(element, true)
|
|
},
|
|
removeToolState(measureData) {
|
|
var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
|
|
this.measureData = this.visitTaskList[i].MeasureData
|
|
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data.uuid === measureData.data.uuid)
|
|
if (idx > -1) {
|
|
this.measureData.splice(idx, 1)
|
|
const element = this.$refs.canvas
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
var imageId = `wadouri:/api/instance/content/${measureData.instanceId}`
|
|
ToolStateManager.clearImageIdToolState(imageId)
|
|
cornerstone.updateImage(element, true)
|
|
}
|
|
},
|
|
getToolForElement(toolName) {
|
|
var isExist = false
|
|
for (var i = 0; i < cornerstoneTools.store.state.tools.length; i++) {
|
|
if (cornerstoneTools.store.state.tools[i].name === toolName) {
|
|
isExist = true
|
|
break
|
|
}
|
|
}
|
|
return isExist
|
|
},
|
|
onClipStopped() {
|
|
this.toolState.clipPlaying = false
|
|
},
|
|
|
|
onKeyPress(e) {
|
|
var key = e.detail.keyCode
|
|
var keys = { PageUp: 33, PageDown: 34, End: 35, Home: 36 } // Left: 37, Up: 38, Right: 39, Down: 40
|
|
if (key < keys.PageUp || key > keys.Home) return
|
|
if (key === keys.Home) this.scrollPage(-9999)
|
|
else if (key === keys.PageUp) this.scrollPage(-1)
|
|
else if (key === keys.PageDown) this.scrollPage(1)
|
|
else if (key === keys.End) this.scrollPage(9999)
|
|
},
|
|
|
|
resizeCanvas() {
|
|
cornerstone.resize(this.canvas, true)
|
|
},
|
|
|
|
activateCanvas() {
|
|
this.canvas.tabIndex = 0
|
|
this.canvas.focus()
|
|
},
|
|
|
|
resetViewport() {
|
|
this.toolState.viewportInvert = false
|
|
var image = cornerstone.getImage(this.canvas)
|
|
cornerstone.setViewport(
|
|
this.canvas,
|
|
cornerstone.getDefaultViewportForImage(this.canvas, image)
|
|
)
|
|
},
|
|
|
|
toggleDicomInfo() {
|
|
this.toolState.dicomInfoVisible = !this.toolState.dicomInfoVisible
|
|
if (this.toolState.dicomInfoVisible) {
|
|
cornerstoneTools.orientationMarkers.enable(this.canvas)
|
|
} else cornerstoneTools.orientationMarkers.disable(this.canvas)
|
|
cornerstone.updateImage(this.canvas)
|
|
},
|
|
setColormap(colormap) {
|
|
const viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.colormap = colormap
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
cornerstone.updateImage(this.canvas, true)
|
|
if (!colormap) {
|
|
this.resetRenderCanvase(this.canvas)
|
|
}
|
|
},
|
|
resetRenderCanvase(element) {
|
|
const enabledElement = cornerstone.getEnabledElement(element)
|
|
|
|
enabledElement.renderingTools.colormapId = undefined
|
|
enabledElement.renderingTools.colorLut = undefined
|
|
|
|
const renderCanvas = enabledElement.renderingTools.renderCanvas
|
|
const canvasContext = renderCanvas.getContext('2d')
|
|
canvasContext.fillStyle = 'white'
|
|
canvasContext.fillRect(0, 0, renderCanvas.width, renderCanvas.height)
|
|
|
|
const renderCanvasData = canvasContext.getImageData(
|
|
0,
|
|
0,
|
|
renderCanvas.width,
|
|
renderCanvas.height
|
|
)
|
|
|
|
enabledElement.renderingTools.renderCanvasContext = canvasContext
|
|
enabledElement.renderingTools.renderCanvasData = renderCanvasData
|
|
},
|
|
scrollPage(offset) {
|
|
var index = this.stack.currentImageIdIndex + offset
|
|
if (index < 0) index = 0
|
|
else if (index >= this.stack.imageIds.length) {
|
|
index = this.stack.imageIds.length - 1
|
|
}
|
|
if (index !== this.stack.currentImageIdIndex) {
|
|
scroll(this.canvas, index)
|
|
}
|
|
},
|
|
|
|
toggleClipPlay() {
|
|
if (this.toolState.clipPlaying) {
|
|
cornerstoneTools.stopClip(this.canvas)
|
|
this.toolState.clipPlaying = false
|
|
return
|
|
}
|
|
this.toolState.clipPlaying = true
|
|
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
|
|
cornerstoneTools.getToolState(
|
|
this.canvas,
|
|
'playClip'
|
|
).data[0].loop = false
|
|
},
|
|
setFps(fps) {
|
|
this.dicomInfo.fps = fps
|
|
},
|
|
|
|
resetWwwc() {
|
|
this.toolState.viewportInvert = false
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.invert = false
|
|
var image = cornerstone.getImage(this.canvas)
|
|
viewport.voi.windowWidth = image.windowWidth
|
|
viewport.voi.windowCenter = image.windowCenter
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
setWwwc(ww, wc) {
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.voi.windowWidth = ww
|
|
viewport.voi.windowCenter = wc
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
toggleInvert() {
|
|
this.toolState.viewportInvert = !this.toolState.viewportInvert
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.invert = this.toolState.viewportInvert
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
activateZoom() {
|
|
cornerstoneTools.addTool(cornerstoneTools.ZoomTool, {
|
|
configuration: {
|
|
invert: false,
|
|
preventZoomOutsideImage: false,
|
|
minScale: 0.1,
|
|
maxScale: 20.0
|
|
}
|
|
})
|
|
cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 })
|
|
this.toolState.activeTool = 'zoom'
|
|
},
|
|
|
|
resetRotate() {
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.hflip = false
|
|
viewport.vflip = false
|
|
viewport.rotation = 0
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
setRotate(hflip, vflip, angle) {
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
if (hflip) viewport.hflip = !viewport.hflip
|
|
if (vflip) viewport.vflip = !viewport.vflip
|
|
if (angle !== 0) viewport.rotation += angle
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
saveImage() {
|
|
var uid = cornerstone.getImage(this.canvas).data.string('x00080018')
|
|
cornerstoneTools.SaveAs(this.canvas, `${uid}.png`)
|
|
},
|
|
fitToWindow() {
|
|
if (this.stack.seriesNumber) {
|
|
cornerstone.fitToWindow(this.canvas)
|
|
}
|
|
},
|
|
fitToImage() {
|
|
if (this.stack.seriesNumber) {
|
|
const enabledElement = cornerstone.getEnabledElement(this.canvas)
|
|
enabledElement.viewport.scale = 1
|
|
cornerstone.updateImage(this.canvas)
|
|
}
|
|
},
|
|
|
|
removeLabel(item) {
|
|
const promise = scroll(this.canvas, item.data.imageIdIndex)
|
|
const scope = this
|
|
Promise.all([promise]).then(res => {
|
|
cornerstoneTools.removeToolState(scope.canvas, item.type, item.data)
|
|
cornerstone.updateImage(scope.canvas)
|
|
})
|
|
},
|
|
setToolPassive(toolName) {
|
|
// 它们的数据可以被操作，但不能创建。
|
|
cornerstoneTools.setToolPassiveForElement(this.canvas, toolName)
|
|
this.activeTool = 1
|
|
},
|
|
setToolActive(toolName) {
|
|
this.activeTool = 2
|
|
this.$nextTick(() => {
|
|
console.log(toolName)
|
|
cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
|
|
mouseButtonMask: 1
|
|
})
|
|
})
|
|
},
|
|
setToolEnabled(toolName) {
|
|
// 工具将呈现，但不会对输入作出反应
|
|
cornerstoneTools.setToolEnabledForElement(this.canvas, toolName)
|
|
this.activeTool = 0
|
|
},
|
|
setAllToolsPassive() {
|
|
cornerstoneTools.store.state.tools.forEach((tool) => {
|
|
cornerstoneTools.setToolPassiveForElement(this.canvas, tool.name)
|
|
})
|
|
},
|
|
|
|
addTargetElement(synchronizer) {
|
|
synchronizer.addTarget(this.$refs.canvas)
|
|
},
|
|
removeTarget(synchronizer) {
|
|
synchronizer.removeTarget(this.$refs.canvas)
|
|
},
|
|
addSourceElement(synchronizer) {
|
|
synchronizer.addSource(this.$refs.canvas)
|
|
},
|
|
removeSource(synchronizer) {
|
|
synchronizer.removeSource(this.$refs.canvas)
|
|
},
|
|
activeReferenceLine(synchronizer) {
|
|
if (
|
|
!cornerstoneTools.getToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools.ReferenceLinesTool
|
|
)
|
|
) {
|
|
cornerstoneTools.addToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools.ReferenceLinesTool
|
|
)
|
|
}
|
|
cornerstoneTools.setToolEnabledForElement(this.canvas, 'ReferenceLines', {
|
|
synchronizationContext: synchronizer
|
|
})
|
|
|
|
// cornerstoneTools.addTool(cornerstoneTools.CrosshairsTool)
|
|
// cornerstoneTools.setToolActive('Crosshairs', {
|
|
// mouseButtonMask: 1,
|
|
// synchronizationContext: synchronizer
|
|
// })
|
|
},
|
|
disabledReferenceLine(synchronizer) {
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.canvas)
|
|
cornerstoneTools.setToolDisabledForElement(this.canvas, 'ReferenceLines')
|
|
// cornerstoneTools.setToolDisabledForElement(this.canvas, 'Crosshairs')
|
|
},
|
|
activeViewPortToolSync(synchronizer, toolName) {
|
|
synchronizer.add(this.canvas)
|
|
synchronizer.enabled = true
|
|
if (
|
|
!cornerstoneTools.getToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools[`${toolName}Tool`]
|
|
)
|
|
) {
|
|
cornerstoneTools.addToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools[`${toolName}Tool`]
|
|
)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
|
|
mouseButtonMask: 1,
|
|
synchronizationContext: synchronizer
|
|
})
|
|
},
|
|
disabledViewPortToolSync(synchronizer, toolName) {
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.canvas)
|
|
cornerstoneTools.setToolDisabledForElement(this.canvas, toolName)
|
|
},
|
|
activeImageSync(synchronizer) {
|
|
synchronizer.add(this.$refs.canvas)
|
|
synchronizer.enabled = true
|
|
return false
|
|
},
|
|
disabledImageSync(synchronizer) {
|
|
synchronizer.remove(this.$refs.canvas)
|
|
synchronizer.enabled = false
|
|
return false
|
|
},
|
|
activeAnnotationSync(synchronizer) {
|
|
this.AnnotationSync = synchronizer
|
|
synchronizer.add(this.$refs.canvas)
|
|
synchronizer.enabled = true
|
|
},
|
|
disabledAnnotationSync(synchronizer) {
|
|
this.AnnotationSync = null
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.$refs.canvas)
|
|
this.setAllToolsPassive()
|
|
},
|
|
getToolSate() {
|
|
const toolROITypes = [
|
|
'Probe',
|
|
'EllipticalRoi',
|
|
'RectangleRoi',
|
|
'ArrowAnnotate',
|
|
'Length',
|
|
'CobbAngle',
|
|
'Angle',
|
|
'Bidirectional',
|
|
'FreehandRoi'
|
|
]
|
|
for (let i = 0; i < toolROITypes.length; i++) {
|
|
const toolROIType = toolROITypes[i]
|
|
const toolROIData = JSON.stringify(
|
|
cornerstoneTools.getToolState(this.canvas, toolROIType)
|
|
)
|
|
|
|
if (toolROIData !== undefined) {
|
|
this.allROIToolData[toolROITypes[i]] = JSON.parse(toolROIData)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.context-menu-wrapper{
|
|
position: absolute;
|
|
ul{
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background: #343333;
|
|
color: #fff;
|
|
margin: 0;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 3px;
|
|
height: auto;
|
|
min-height: 50px;
|
|
line-height: 1.5em;
|
|
width:80px;
|
|
box-sizing: border-box;
|
|
}
|
|
.menu{
|
|
li {
|
|
padding: 2px 5px;
|
|
position: relative;
|
|
border-bottom: 1px solid #666;
|
|
div{
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.submenu{
|
|
position: absolute;
|
|
left: 77px;
|
|
top: -1px;
|
|
background: #343333;
|
|
color: #fff;
|
|
display: none;
|
|
li {
|
|
padding: 2px 5px;
|
|
border-bottom: 1px solid #666;
|
|
div{
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.menu li:hover{
|
|
background-color: #ff5722;
|
|
.submenu{
|
|
display:block;
|
|
}
|
|
}
|
|
.menu_active{
|
|
cursor: pointer;
|
|
}
|
|
.menu_disabled{
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
}
|
|
.info-series {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
text-align: left;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
.info-image {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
text-align: left;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.info-subject {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
text-align: right;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.load-indicator {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
text-align: left;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.magnifyTool {
|
|
border: 2px solid #ffffff;
|
|
border-radius: 50%;
|
|
display: none;
|
|
cursor: none;
|
|
}
|
|
|
|
.menu__item {
|
|
display: block;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin: 10px;
|
|
cursor: default;
|
|
}
|
|
.menu__item:hover {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.menu {
|
|
height: auto;
|
|
width: auto;
|
|
position: absolute;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
border-radius: 10px;
|
|
border: 1px solid #c21111;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
li:hover {
|
|
background-color: #e0e0e2;
|
|
color: white;
|
|
}
|
|
</style>
|