阅片比例尺

main
wangxiaoshuang 2025-10-10 16:47:25 +08:00
parent ef336eafe6
commit ff1b4f6f21
5 changed files with 633 additions and 740 deletions

View File

@ -265,7 +265,7 @@ export default {
...mapGetters(['language']), ...mapGetters(['language']),
isBaseline() { isBaseline() {
var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId) var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
return this.visitTaskList[i].IsBaseLine return this.visitTaskList[i] ? this.visitTaskList[i].IsBaseLine : false
} }
}, },
watch: { watch: {

View File

@ -260,9 +260,9 @@ export default {
this.defaultWindowLevel.windowCenter = windowCenter this.defaultWindowLevel.windowCenter = windowCenter
this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}` this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
} }
// const toolGroupId = `viewport-${this.viewportIndex}` const toolGroupId = this.viewportId
// const toolGroup = ToolGroupManager.getToolGroup(toolGroupId) const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId)
// toolGroup.setToolEnabled('ScaleOverlay') toolGroup.setToolEnabled('ScaleOverlay')
} }
}, },

View File

@ -255,7 +255,7 @@ export default {
...mapGetters(['language']), ...mapGetters(['language']),
isBaseline() { isBaseline() {
var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId) var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
return this.visitTaskList[i].IsBaseLine return this.visitTaskList[i] ? this.visitTaskList[i].IsBaseLine : false
} }
}, },
watch: { watch: {

View File

@ -1,59 +1,34 @@
<template> <template>
<div <div ref="viewport" class="viewport-wrapper" v-loading="loading" :element-loading-text="NSTip"
ref="viewport" element-loading-background="rgba(0, 0, 0, 0.8)" @mouseup="sliderMouseup" @mousemove="sliderMousemove"
class="viewport-wrapper" @mouseleave="sliderMouseleave">
v-loading="loading"
:element-loading-text="NSTip"
element-loading-background="rgba(0, 0, 0, 0.8)"
@mouseup="sliderMouseup"
@mousemove="sliderMousemove"
@mouseleave="sliderMouseleave"
>
<div v-if="series && taskInfo" class="left-top-text"> <div v-if="series && taskInfo" class="left-top-text">
<div <div v-if="taskInfo.IsExistsClinicalData" class="cd-info" :title="$t('trials:reading:button:clinicalData')">
v-if="taskInfo.IsExistsClinicalData" <svg-icon style="cursor: pointer;" icon-class="documentation" class="svg-icon"
class="cd-info" @click.stop="viewCD(series.TaskInfo.VisitTaskId)" />
:title="$t('trials:reading:button:clinicalData')"
>
<svg-icon
style="cursor: pointer;"
icon-class="documentation"
class="svg-icon"
@click.stop="viewCD(series.TaskInfo.VisitTaskId)"
/>
</div> </div>
<h2 <h2 v-if="taskInfo.IsReadingShowSubjectInfo" class="subject-info">
v-if="taskInfo.IsReadingShowSubjectInfo"
class="subject-info"
>
{{ `${series.TaskInfo.SubjectCode} ${series.TaskInfo.TaskBlindName} ` }} {{ `${series.TaskInfo.SubjectCode} ${series.TaskInfo.TaskBlindName} ` }}
</h2> </h2>
<div>Series: #{{ series.SeriesNumber }}</div> <div>Series: #{{ series.SeriesNumber }}</div>
<div v-if="series.Stack">Image: #{{ `${series.SliceIndex + 1}/${series.Stack.length}` }}</div> <div v-if="series.Stack">Image: #{{ `${series.SliceIndex + 1}/${series.Stack.length}` }}</div>
<div>{{ series.Modality }}</div> <div>{{ series.Modality }}</div>
</div> </div>
<div <div v-if="series && taskInfo && taskInfo.IsReadingTaskViewInOrder === 1" class="top-center-tool">
v-if="series && taskInfo && taskInfo.IsReadingTaskViewInOrder === 1"
class="top-center-tool"
>
<div class="toggle-visit-container"> <div class="toggle-visit-container">
<div <div class="arrw_icon"
class="arrw_icon" :style="{ cursor: series.TaskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum !== 0 ? '#fff' : '#6b6b6b' }"
:style="{ cursor: series.TaskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum !== 0 ? '#fff': '#6b6b6b' }"
@click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, -1)" @click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, -1)"
@dblclick.stop="preventDefault($event)" @dblclick.stop="preventDefault($event)">
>
<i class="el-icon-caret-left" /> <i class="el-icon-caret-left" />
</div> </div>
<div class="arrow_text"> <div class="arrow_text">
{{ series.TaskInfo.TaskBlindName }} {{ series.TaskInfo.TaskBlindName }}
</div> </div>
<div <div class="arrw_icon"
class="arrw_icon" :style="{ cursor: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff' : '#6b6b6b' }"
:style="{ cursor: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff': '#6b6b6b' }"
@click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, 1)" @click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, 1)"
@dblclick.stop="preventDefault($event)" @dblclick.stop="preventDefault($event)">
>
<i class="el-icon-caret-right" /> <i class="el-icon-caret-right" />
</div> </div>
</div> </div>
@ -65,11 +40,13 @@
<div v-show="mousePosition.index.length > 0"> <div v-show="mousePosition.index.length > 0">
Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }} Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}
</div> </div>
<div v-if="(series.Modality === 'CT' || series.Modality === 'DR' || series.Modality === 'CR') && mousePosition.value"> <div
v-if="(series.Modality === 'CT' || series.Modality === 'DR' || series.Modality === 'CR') && mousePosition.value">
HU: {{ mousePosition.value }} HU: {{ mousePosition.value }}
</div> </div>
<div v-else-if="(series.Modality === 'PT' && mousePosition.value)"> <div v-else-if="(series.Modality === 'PT' && mousePosition.value)">
{{mousePosition.modalityUnit}}: {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }} {{ mousePosition.modalityUnit }}: {{ digitPlaces === -1 ? mousePosition.value.toFixed(3)
: mousePosition.value.toFixed(digitPlaces) }}
</div> </div>
<div v-else-if="mousePosition.value"> <div v-else-if="mousePosition.value">
Density: {{ mousePosition.value }} Density: {{ mousePosition.value }}
@ -83,8 +60,9 @@
</div> </div>
<div v-if="series" class="right-bottom-text"> <div v-if="series" class="right-bottom-text">
<div v-show="imageInfo.location">Location: {{ `${Number(imageInfo.location).toFixed(digitPlaces)} mm` }}</div> <div v-show="imageInfo.location">Location: {{ `${Number(imageInfo.location).toFixed(digitPlaces)} mm` }}</div>
<div v-show="series.SliceThickness">Slice Thickness: {{ `${Number(series.SliceThickness).toFixed(digitPlaces)} mm` }}</div> <div v-show="series.SliceThickness">Slice Thickness: {{ `${Number(series.SliceThickness).toFixed(digitPlaces)} mm`
<div v-show="imageInfo.wwwc ">WW/WL: {{ imageInfo.wwwc }}</div> }}</div>
<div v-show="imageInfo.wwwc">WW/WL: {{ imageInfo.wwwc }}</div>
</div> </div>
<div class="orientation-top"> <div class="orientation-top">
{{ markers.top }} {{ markers.top }}
@ -100,7 +78,8 @@
{{ markers.left }} {{ markers.left }}
</div> </div>
<div ref="sliderBox" class="right-slider-box" @click.stop="clickSlider($event)"> <div ref="sliderBox" class="right-slider-box" @click.stop="clickSlider($event)">
<div :style="{top: sliderInfo.height + '%'}" class="slider" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" /> <div :style="{ top: sliderInfo.height + '%' }" class="slider" @click.stop.prevent="() => { return }"
@mousedown.stop="sliderMousedown($event)" />
</div> </div>
</div> </div>
</template> </template>
@ -195,7 +174,7 @@ export default {
this.element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage) this.element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage)
// this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified) // this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
// this.element.addEventListener('CORNERSTONE_CAMERA_MODIFIED', this.cameraModified) // this.element.addEventListener('CORNERSTONE_CAMERA_MODIFIED', this.cameraModified)
this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered) this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered)
this.element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.cornerstoneToolsMouseMove) this.element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.cornerstoneToolsMouseMove)
this.element.addEventListener('mouseleave', () => { this.element.addEventListener('mouseleave', () => {
@ -219,9 +198,9 @@ export default {
// this.imageInfo.wwwc = `${Math.round(detail.image.windowWidth)}/${Math.round(detail.image.windowCenter)}` // this.imageInfo.wwwc = `${Math.round(detail.image.windowWidth)}/${Math.round(detail.image.windowCenter)}`
this.getOrientationMarker() this.getOrientationMarker()
this.$emit('renderAnnotations', this.series) this.$emit('renderAnnotations', this.series)
// const toolGroupId = `viewport-${this.viewportIndex}` const toolGroupId = this.viewportId
// const toolGroup = ToolGroupManager.getToolGroup(toolGroupId) const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId)
// toolGroup.setToolEnabled('ScaleOverlay') toolGroup.setToolEnabled('ScaleOverlay')
}, },
imageRendered(e) { imageRendered(e) {
const renderingEngine = getRenderingEngine(this.renderingEngineId) const renderingEngine = getRenderingEngine(this.renderingEngineId)
@ -385,7 +364,7 @@ export default {
} }
}, },
cachePTMetadata(images) { cachePTMetadata(images) {
images.map(i=>{ images.map(i => {
const instanceMetadata = getPTImageIdInstanceMetadata(i.imageId) const instanceMetadata = getPTImageIdInstanceMetadata(i.imageId)
if (typeof instanceMetadata.CorrectedImage === 'string') { if (typeof instanceMetadata.CorrectedImage === 'string') {
instanceMetadata.CorrectedImage = instanceMetadata.CorrectedImage.split('\\') instanceMetadata.CorrectedImage = instanceMetadata.CorrectedImage.split('\\')
@ -416,7 +395,7 @@ export default {
} }
this.prefetchMetadataInformation(obj.ImageIds, obj.Modality) this.prefetchMetadataInformation(obj.ImageIds, obj.Modality)
await viewport.setStack(this.series.Stack, obj.SliceIndex) await viewport.setStack(this.series.Stack, obj.SliceIndex)
viewport.render() viewport.render()
} catch (e) { } catch (e) {
console.log(e) console.log(e)
@ -549,10 +528,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.viewport-wrapper { .viewport-wrapper {
width:100%; width: 100%;
height:100%; height: 100%;
position: relative; position: relative;
cursor: default !important; cursor: default !important;
.left-top-text { .left-top-text {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -560,26 +540,31 @@ export default {
color: #ddd; color: #ddd;
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
.cd-info { .cd-info {
color: #ddd; color: #ddd;
font-size: 18px; font-size: 18px;
} }
.subject-info { .subject-info {
color:#f44336; color: #f44336;
padding: 5px 0px; padding: 5px 0px;
margin: 0; margin: 0;
} }
} }
.top-center-tool { .top-center-tool {
position: absolute; position: absolute;
left:50%; left: 50%;
top: 5px; top: 5px;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 1;
.toggle-visit-container { .toggle-visit-container {
display: flex; display: flex;
} }
.arrw_icon{
.arrw_icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #3f3f3f; background-color: #3f3f3f;
@ -587,15 +572,17 @@ export default {
line-height: 20px; line-height: 20px;
border-radius: 10%; border-radius: 10%;
} }
.arrow_text{
.arrow_text {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
background-color: #00000057; background-color: #00000057;
color: #fff; color: #fff;
padding:0 10px; padding: 0 10px;
font-size: 14px; font-size: 14px;
} }
} }
.right-top-text { .right-top-text {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -604,6 +591,7 @@ export default {
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
} }
.left-bottom-text { .left-bottom-text {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -612,6 +600,7 @@ export default {
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
} }
.right-bottom-text { .right-bottom-text {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -620,6 +609,7 @@ export default {
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
} }
.right-slider-box { .right-slider-box {
position: absolute; position: absolute;
right: 1px; right: 1px;
@ -631,7 +621,8 @@ export default {
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
} }
.right-slider-box:after{
.right-slider-box:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -20px; bottom: -20px;
@ -640,15 +631,17 @@ export default {
width: 100%; width: 100%;
background: #333; background: #333;
} }
.slider { .slider {
height: 20px; height: 20px;
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
z-index:10; z-index: 10;
background: #9e9e9e; background: #9e9e9e;
cursor: move cursor: move
} }
.orientation-top { .orientation-top {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -657,6 +650,7 @@ export default {
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 1;
} }
.orientation-bottom { .orientation-bottom {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -665,6 +659,7 @@ export default {
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 1;
} }
.orientation-left { .orientation-left {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -673,6 +668,7 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
} }
.orientation-right { .orientation-right {
position: absolute; position: absolute;
top: 50%; top: 50%;