核医学标准添加融合演示案例
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
parent
4f1fdb185f
commit
f1dee25987
|
|
@ -174,7 +174,7 @@ var _vm
|
|||
async function VueInit() {
|
||||
var params
|
||||
var res
|
||||
if (~window.location.href.indexOf('/readingDicoms') || ~window.location.href.indexOf('/noneDicomReading') || ~window.location.href.indexOf('/criterionquestions') || ~window.location.href.indexOf('/petct')) {
|
||||
if (~window.location.href.indexOf('/readingDicoms') || ~window.location.href.indexOf('/noneDicomReading') || ~window.location.href.indexOf('/criterionquestions') || ~window.location.href.indexOf('/petct') || ~window.location.href.indexOf('/fusion')) {
|
||||
params = $q('TrialReadingCriterionId')
|
||||
res = await getBasicDataAllSelect(params)
|
||||
} else if (~window.location.href.indexOf('/ecrfPreview')) {
|
||||
|
|
|
|||
|
|
@ -139,6 +139,12 @@ export const constantRoutes = [
|
|||
hidden: true,
|
||||
component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt')
|
||||
},
|
||||
{
|
||||
path: '/fusion',
|
||||
name: 'fusion',
|
||||
hidden: true,
|
||||
component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/historyScreenshot',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div v-loading="loading" class="ecrf-wrapper">
|
||||
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
|
||||
评估说明
|
||||
</h4>
|
||||
<el-form
|
||||
ref="questions"
|
||||
size="small"
|
||||
:model="questionForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="访视点备注"
|
||||
prop="note"
|
||||
:rules="[
|
||||
{ required: true,
|
||||
message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="questionForm.note"
|
||||
:disabled="readingTaskState >= 2"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
maxlength="500"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="readingTaskState < 2">
|
||||
<div style="text-align:right">
|
||||
<el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ECRF',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
questionForm: {
|
||||
note: ''
|
||||
},
|
||||
readingTaskState: 1,
|
||||
isBaseLineTask: false,
|
||||
visitTaskId: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.trialId = this.$route.query.trialId
|
||||
this.visitTaskId = this.$route.query.visitTaskId
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
this.$refs['questions'].validate((valid) => {
|
||||
if (!valid) return
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ecrf-wrapper{
|
||||
|
||||
/deep/ .el-form-item__label{
|
||||
color: #c3c3c3;
|
||||
text-align: left;
|
||||
}
|
||||
/deep/ .el-input__inner{
|
||||
background-color: transparent;
|
||||
color: #ddd;
|
||||
border: 1px solid #5e5e5e;
|
||||
}
|
||||
/deep/ .el-textarea__inner{
|
||||
background-color: transparent;
|
||||
color: #ddd;
|
||||
border: 1px solid #5e5e5e;
|
||||
}
|
||||
/deep/ .el-form-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/deep/ .el-form-item__content{
|
||||
flex: 1;
|
||||
}
|
||||
/deep/ .el-button--mini, .el-button--mini.is-round {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
.el-form-item__content
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div v-loading="loading" class="ecrf-wrapper">
|
||||
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
|
||||
影像质量
|
||||
</h4>
|
||||
<el-form
|
||||
ref="questions"
|
||||
size="small"
|
||||
:model="questionForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="影像质量"
|
||||
prop="imageQuality"
|
||||
:rules="[
|
||||
{ required: true,
|
||||
message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
|
||||
]"
|
||||
>
|
||||
<el-radio-group v-model="questionForm.imageQuality">
|
||||
<el-radio
|
||||
v-for="item of $d.ImageQualityEvaluation"
|
||||
:key="item.id"
|
||||
:label="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="questionForm.imageQuality === 2"
|
||||
label="影像质量问题"
|
||||
prop="imageQualityIssues"
|
||||
:rules="[
|
||||
{ required: true,
|
||||
message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
|
||||
]"
|
||||
>
|
||||
<el-select
|
||||
v-model="questionForm.imageQualityIssues"
|
||||
:disabled="readingTaskState >= 2"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item of $d.ImageQualityIssues"
|
||||
:key="item.id"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="questionForm.imageQualityIssues === 5"
|
||||
label="影像质量备注"
|
||||
prop="note"
|
||||
:rules="[
|
||||
{ required: true,
|
||||
message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="questionForm.note"
|
||||
:disabled="readingTaskState >= 2"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
maxlength="500"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="readingTaskState < 2">
|
||||
<div style="text-align:right">
|
||||
<el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ECRF',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
questionForm: {
|
||||
imageQuality: null,
|
||||
imageQualityIssues: null,
|
||||
note: ''
|
||||
},
|
||||
readingTaskState: 1,
|
||||
isBaseLineTask: false,
|
||||
visitTaskId: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.trialId = this.$route.query.trialId
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
this.$refs['questions'].validate((valid) => {
|
||||
if (!valid) return
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ecrf-wrapper{
|
||||
|
||||
/deep/ .el-form-item__label{
|
||||
color: #c3c3c3;
|
||||
text-align: left;
|
||||
}
|
||||
/deep/ .el-input__inner{
|
||||
background-color: transparent;
|
||||
color: #ddd;
|
||||
border: 1px solid #5e5e5e;
|
||||
}
|
||||
/deep/ .el-textarea__inner{
|
||||
background-color: transparent;
|
||||
color: #ddd;
|
||||
border: 1px solid #5e5e5e;
|
||||
}
|
||||
/deep/ .el-form-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/deep/ .el-form-item__content{
|
||||
flex: 1;
|
||||
}
|
||||
/deep/ .el-button--mini, .el-button--mini.is-round {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
.el-form-item__content
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<template>
|
||||
<div class="measurement-wrapper">
|
||||
|
||||
<div class="container">
|
||||
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
|
||||
核医学评估
|
||||
</h4>
|
||||
<div class="lesion_list">
|
||||
<div class="flex-row" style="margin:3px 0;">
|
||||
<div class="title">盆腔淋巴结</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="questions"
|
||||
style="width: 100%"
|
||||
row-key="rowIndex"
|
||||
:expand-row-keys="expands"
|
||||
@expand-change="expandSelect"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form :ref="props.row.rowIndex" size="small" :model="props.row" label-width="80px" style="padding-right: 10px">
|
||||
<el-form-item label="部位">
|
||||
<el-input
|
||||
v-model="props.row.part"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="转移灶"
|
||||
prop="distraction"
|
||||
:rules="[
|
||||
{ required: true,
|
||||
message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
|
||||
]"
|
||||
>
|
||||
<el-select v-model="props.row.distraction" style="width:100%;">
|
||||
<el-option label="阴性" :value="1"></el-option>
|
||||
<el-option label="阳性" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="SUVmax">
|
||||
<el-input
|
||||
v-model="props.row.suvMax"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<div style="text-align:right">
|
||||
<el-button v-if="props.row.annotation" size="mini" @click="clearAnnotation(props.row)">{{ $t('trials:reading:button:removeMark') }}</el-button>
|
||||
<el-button size="mini" @click="handleSave(props.row)">{{ $t('common:button:save') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="部位"
|
||||
prop="part">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="转移灶"
|
||||
prop="distraction">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.distraction === 1 ? '阴性' : scope.row.distraction === 2 ? '阳性' : ''}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="SUVmax"
|
||||
prop="suvMax">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import FusionEvent from './../FusionEvent'
|
||||
export default {
|
||||
name: 'TableQuestionList',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: window.innerHeight - 140,
|
||||
questions: [
|
||||
{
|
||||
rowIndex: '001',
|
||||
part: '髂内',
|
||||
distraction: '',
|
||||
suvMax: null,
|
||||
saveTypeEnum: 1,
|
||||
annotation: null
|
||||
},
|
||||
{
|
||||
rowIndex: '002',
|
||||
part: '髂外',
|
||||
distraction: '',
|
||||
suvMax: null,
|
||||
saveTypeEnum: 1,
|
||||
annotation: null
|
||||
},
|
||||
{
|
||||
rowIndex: '003',
|
||||
part: '髂总',
|
||||
distraction: '',
|
||||
suvMax: null,
|
||||
saveTypeEnum: 1,
|
||||
annotation: null
|
||||
},
|
||||
{
|
||||
rowIndex: '004',
|
||||
part: '闭孔',
|
||||
distraction: '',
|
||||
suvMax: null,
|
||||
saveTypeEnum: 1,
|
||||
annotation: null
|
||||
}
|
||||
],
|
||||
visitTaskId: '',
|
||||
isCurrentTask: false,
|
||||
loading: false,
|
||||
readingTaskState: 1,
|
||||
isBaseLineTask: false,
|
||||
taskBlindName: '',
|
||||
expands:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
expandSelect(row, expandedRows) {
|
||||
this.expands = []
|
||||
if (expandedRows.length > 0) {
|
||||
row ? this.expands.push(row.rowIndex) : ''
|
||||
}
|
||||
if (this.expands.length > 0 && row.annotation) {
|
||||
FusionEvent.$emit('imageLocation', { annotation: row.annotation })
|
||||
}
|
||||
},
|
||||
async clearAnnotation(row) {
|
||||
// 是否确认清除标记？
|
||||
const confirm = await this.$confirm(
|
||||
this.$t('trials:reading:warnning:msg47'),
|
||||
{
|
||||
type: 'warning',
|
||||
distinguishCancelAndClose: true
|
||||
}
|
||||
)
|
||||
if (confirm !== 'confirm') return
|
||||
let i = this.questions.findIndex(i=>i.rowIndex === row.rowIndex)
|
||||
FusionEvent.$emit('removeAnnotation', { annotation: this.questions[i].annotation })
|
||||
this.questions[i].annotation = null
|
||||
this.questions[i].suvMax = null
|
||||
},
|
||||
async handleSave(row) {
|
||||
let loading = null
|
||||
try {
|
||||
let valid = await this.$refs[row.rowIndex].validate()
|
||||
if (!valid) return
|
||||
loading = this.$loading({ fullscreen: true })
|
||||
setTimeout(() => {
|
||||
// 模拟保存成功
|
||||
loading.close()
|
||||
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
||||
|
||||
// 可以在这里添加更多的逻辑，比如更新页面上的某些元素
|
||||
}, 2000);
|
||||
} catch(e) {
|
||||
if (loading) {
|
||||
loading.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
setActiveCollapse(annotationUID) {
|
||||
for (let i = 0; i < this.questions.length; i++) {
|
||||
let obj = this.questions[i]
|
||||
if (obj.annotation && obj.annotation.data && obj.annotation.data.annotationUID === annotationUID) {
|
||||
this.expands = [this.questions[i].rowIndex]
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
isCanActiveTool(toolName) {
|
||||
if (this.expands.length > 0) {
|
||||
let isExist = this.isExistMeasureData(this.expands[0])
|
||||
return { isCanActiveTool: isExist, reason: '' }
|
||||
} else {
|
||||
return { isCanActiveTool: false, reason: '' }
|
||||
}
|
||||
},
|
||||
isExistMeasureData(rowIndex) {
|
||||
let i = this.questions.findIndex(i=>i.rowIndex === rowIndex)
|
||||
if (this.questions[i].annotation) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
// modifyMeasuredData(measureObj) {
|
||||
// if (measureObj.questionInfo) {
|
||||
// this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
|
||||
// this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
|
||||
// this.activeName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
|
||||
// const refName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
|
||||
// if (this.$refs[refName]) {
|
||||
// this.$refs[refName][0].setMeasureData(measureObj.measureData)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// 设置测量数据
|
||||
setMeasuredData(measureData) {
|
||||
if (measureData.data && measureData.data.data && measureData.data.data.remark ) {
|
||||
// 编辑
|
||||
// 展开并更新标记信息
|
||||
let remark = measureData.data.data.remark
|
||||
let i = this.questions.findIndex(i=>i.part === remark)
|
||||
this.questions[i].suvMax = measureData.suvMax
|
||||
this.questions[i].annotation = measureData
|
||||
this.expands = [this.questions[i].rowIndex]
|
||||
} else {
|
||||
if (this.expands.length > 0) {
|
||||
let i = this.questions.findIndex(i=>i.rowIndex === this.expands[0])
|
||||
if (measureData.data && measureData.data.data) {
|
||||
measureData.data.data.remark = this.questions[i].part
|
||||
}
|
||||
|
||||
this.questions[i].annotation = measureData
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.measurement-wrapper{
|
||||
|
||||
// .container{
|
||||
// padding: 10px;
|
||||
// }
|
||||
.title{
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
.add-icon{
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
font-size: 15px;
|
||||
border: 1px solid #938b8b;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-icon:hover{
|
||||
background-color: #607d8b;
|
||||
}
|
||||
|
||||
.flex-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: #424242;
|
||||
|
||||
}
|
||||
.lesion_list{
|
||||
position: relative;
|
||||
/deep/ .el-table, .el-table__expanded-cell {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border-color:#444444;
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border-color: #606266;
|
||||
color: #fff;
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
background-color: #303133;
|
||||
border-color: #444444;
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/deep/ .el-table th, .el-table tr {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border-color:#444444;
|
||||
}
|
||||
/deep/ .el-table__body tr > td{
|
||||
background-color:#000 !important;
|
||||
color: #fff;
|
||||
border-color:#444444;
|
||||
}
|
||||
// /deep/ .el-table__body tr:hover > td{
|
||||
// background-color:#858282 !important;
|
||||
// color: #fff;
|
||||
// border-color:#444444;
|
||||
// }
|
||||
/deep/ .el-table--border th.gutter:last-of-type{
|
||||
border: none;
|
||||
}
|
||||
/deep/ .el-card__header{
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.el-collapse{
|
||||
border-bottom:none;
|
||||
border-top:none;
|
||||
/deep/ .el-collapse-item{
|
||||
background-color: #000!important;
|
||||
color: #ddd;
|
||||
|
||||
}
|
||||
/deep/ .el-collapse-item__header{
|
||||
background-color: #000!important;
|
||||
color: #ddd;
|
||||
border-bottom-color:#5a5a5a;
|
||||
padding-left: 5px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
/deep/ .el-collapse-item__wrap{
|
||||
background-color: #000!important;
|
||||
color: #ddd;
|
||||
}
|
||||
/deep/ .el-collapse-item__content{
|
||||
width:260px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
// border: 1px solid #ffeb3b;
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
color: #ddd;
|
||||
padding: 5px;
|
||||
background-color:#1e1e1e;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,687 @@
|
|||
<template>
|
||||
<div
|
||||
class="viewport_container"
|
||||
:class="['item',activeIndex === index?'item_active':'']"
|
||||
@mouseup="sliderMouseup"
|
||||
>
|
||||
<div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
|
||||
<!-- 序列信息 -->
|
||||
<div
|
||||
v-if="seriesInfo.taskBlindName"
|
||||
class="seriesInfo_wrapper"
|
||||
:style="{color:index%2 == 1 ? '#ddd' : '#666'}"
|
||||
>
|
||||
<h2 v-if="isReadingShowSubjectInfo" class="taskInfo_container">
|
||||
{{ subjectCode }} {{ seriesInfo.taskBlindName }}
|
||||
</h2>
|
||||
<div v-if="index === 1 || index === 2">
|
||||
Series: #{{ seriesInfo.seriesNumber }}
|
||||
</div>
|
||||
<div v-if="index !== 4">Image: #{{ `${seriesInfo.imageIdIndex + 1} / ${seriesInfo.imageMaxLength}` }}</div>
|
||||
<div v-if="index === 1 || index === 2">{{ seriesInfo.modality }}</div>
|
||||
</div>
|
||||
<!-- 描述信息 -->
|
||||
<div
|
||||
v-if="seriesInfo.description && (index === 1 || index === 2)"
|
||||
class="descInfo_wrapper"
|
||||
:style="{color:index%2 == 1 ? '#ddd' : '#666'}"
|
||||
>
|
||||
<div>{{ seriesInfo.description }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图像信息 -->
|
||||
<div
|
||||
v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
|
||||
class="imageInfo_wrapper_l"
|
||||
:style="{color:index%2 == 1 ? '#ddd' : '#666'}"
|
||||
>
|
||||
<div v-show="mousePosition.index.length > 0">
|
||||
Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}, {{ mousePosition.index[2] }}
|
||||
</div>
|
||||
<div v-if="(seriesInfo.modality === 'CT' || seriesInfo.modality === 'DR' || seriesInfo.modality === 'CR') && mousePosition.value">
|
||||
HU: {{ mousePosition.value }}
|
||||
</div>
|
||||
<div v-else-if="(seriesInfo.modality === 'PT' && mousePosition.value)">
|
||||
SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }}
|
||||
</div>
|
||||
<div v-else-if="mousePosition.value">
|
||||
Density: {{ mousePosition.value }}
|
||||
</div>
|
||||
<div v-if="index === 1 || index === 2">
|
||||
W*H: {{ imageInfo.size }}
|
||||
</div>
|
||||
|
||||
<!-- <div v-if="index === 1 || index === 2">Zoom: {{ imageInfo.zoom }}</div> -->
|
||||
</div>
|
||||
<div
|
||||
v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
|
||||
class="imageInfo_wrapper_r"
|
||||
:style="{color:index%2 == 1 ? '#ddd' : '#666'}"
|
||||
>
|
||||
<div v-show="imageInfo.location && index !== 3 ">Location: {{ `${imageInfo.location} mm` }}</div>
|
||||
<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" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
|
||||
</div>
|
||||
<div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
|
||||
{{ markers.top }}
|
||||
</div>
|
||||
<div style="position: absolute;top: 50%;right: 15px;color: #f44336;transform: translateY(-50%);">
|
||||
{{ markers.right }}
|
||||
</div>
|
||||
|
||||
<div style="position: absolute;left: 50%;bottom: 30px;color: #f44336;transform: translateX(-50%);">
|
||||
{{ markers.bottom }}
|
||||
</div>
|
||||
<div style="position: absolute;top: 50%;left: 15px;color: #f44336;transform: translateY(-50%);">
|
||||
{{ markers.left }}
|
||||
</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>
|
||||
<script>
|
||||
import {
|
||||
getRenderingEngine,
|
||||
metaData,
|
||||
utilities,
|
||||
// getOrCreateCanvas,
|
||||
Enums } from '@cornerstonejs/core'
|
||||
|
||||
import {
|
||||
utilities as toolsUtilities,
|
||||
annotation,
|
||||
Enums as toolsEnums
|
||||
// cursors
|
||||
} from '@cornerstonejs/tools'
|
||||
import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
|
||||
import { vec3, mat4 } from 'gl-matrix'
|
||||
import html2canvas from 'html2canvas'
|
||||
const { getColormap } = utilities.colormap
|
||||
const {
|
||||
VOLUME_NEW_IMAGE
|
||||
// VOLUME_LOADED,
|
||||
// IMAGE_VOLUME_MODIFIED,
|
||||
// VOLUME_VIEWPORT_NEW_VOLUME
|
||||
} = Enums.Events
|
||||
|
||||
var renderingEngine
|
||||
var viewport
|
||||
export default {
|
||||
name: 'Viewport',
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
index: {
|
||||
// 1:ct 2:pet 3:fusion 4:mip
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
isReadingShowSubjectInfo: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
seriesInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
renderingEngineId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
viewportId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
volume: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
measureDatas: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
subjectCode: '',
|
||||
mousePosition: { index: [], value: null, modalityUnit: '', world: [], ctVal: null, ptVal: null },
|
||||
digitPlaces: -1,
|
||||
imageInfo: {
|
||||
zoom: null,
|
||||
size: null,
|
||||
location: null,
|
||||
sliceThickness: null,
|
||||
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: '',
|
||||
orientationMarkers: [],
|
||||
originalMarkers: [],
|
||||
markers: { top: '', right: '', bottom: '', left: '' }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex: {
|
||||
handler(v) {
|
||||
console.log('activeIndex ', v)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const digitPlaces = parseInt(this.$route.query.digitPlaces)
|
||||
this.digitPlaces = digitPlaces === -1 ? 2 : digitPlaces
|
||||
// console.log(toolsUtilities)
|
||||
this.subjectCode = this.$route.query.subjectCode
|
||||
var element = document.getElementById(`viewport${this.index}`)
|
||||
|
||||
element.addEventListener(VOLUME_NEW_IMAGE, this.handleVolumeNewImage)
|
||||
element.addEventListener(Enums.Events.CAMERA_MODIFIED, this.handleCameraModified)
|
||||
element.addEventListener(Enums.Events.VOI_MODIFIED, this.handleVOIModified)
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleVolumeNewImage(e) {
|
||||
const { imageIndex } = e.detail
|
||||
if (this.viewportId === e.detail.viewportId && this.index !== 4) {
|
||||
this.seriesInfo.imageIdIndex = imageIndex
|
||||
}
|
||||
renderingEngine = getRenderingEngine(this.renderingEngineId)
|
||||
viewport = renderingEngine.getViewport(this.viewportId)
|
||||
|
||||
if (viewport) {
|
||||
var zoom = viewport.getZoom()
|
||||
|
||||
if (zoom) {
|
||||
this.imageInfo.zoom = zoom.toFixed(4)
|
||||
}
|
||||
var imageId = viewport.getCurrentImageId()
|
||||
if (imageId) {
|
||||
const imagePlaneModule = metaData.get('imagePlaneModule', imageId)
|
||||
this.imageInfo.size = `${imagePlaneModule.columns}*${imagePlaneModule.rows}`
|
||||
this.imageInfo.location = imagePlaneModule.sliceLocation
|
||||
this.getOrientationMarker()
|
||||
this.sliderBoxHeight = imageIndex * 100 / (this.seriesInfo.imageMaxLength - 1)
|
||||
}
|
||||
|
||||
var properties = viewport.getProperties()
|
||||
|
||||
if (properties && properties.voiRange) {
|
||||
var { lower, upper } = properties.voiRange
|
||||
const windowWidth = upper - lower
|
||||
const windowCenter = (upper + lower) / 2
|
||||
this.defaultWindowLevel.windowWidth = windowWidth
|
||||
this.defaultWindowLevel.windowCenter = windowCenter
|
||||
this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
|
||||
}
|
||||
if (this.presetName) {
|
||||
this.renderColorBar(this.presetName)
|
||||
}
|
||||
}
|
||||
},
|
||||
getOrientationMarker() {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const { viewUp, viewPlaneNormal } = viewport.getCamera()
|
||||
|
||||
const viewRight = vec3.create()
|
||||
vec3.cross(viewRight, viewUp, viewPlaneNormal)
|
||||
|
||||
const columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]]
|
||||
const rowCosines = viewRight
|
||||
const rowString = toolsUtilities.orientation.getOrientationStringLPS(rowCosines)
|
||||
const columnString = toolsUtilities.orientation.getOrientationStringLPS(columnCosines)
|
||||
const oppositeRowString = toolsUtilities.orientation.invertOrientationStringLPS(rowString)
|
||||
const oppositeColumnString = toolsUtilities.orientation.invertOrientationStringLPS(columnString)
|
||||
this.markers.top = oppositeColumnString
|
||||
this.markers.right = rowString
|
||||
this.markers.bottom = columnString
|
||||
this.markers.left = oppositeRowString
|
||||
this.orientationMarkers = [oppositeColumnString, rowString, columnString, oppositeRowString]
|
||||
if (this.originalMarkers.length === 0) {
|
||||
this.originalMarkers = [...this.orientationMarkers]
|
||||
}
|
||||
},
|
||||
rotateMarkers(type) {
|
||||
var markers = [...this.orientationMarkers]
|
||||
if (type === 4) {
|
||||
// 左转90度
|
||||
this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
|
||||
} else if (type === 5) {
|
||||
// 右转90度
|
||||
this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
|
||||
}
|
||||
this.setMarkers()
|
||||
},
|
||||
resetMarks() {
|
||||
this.orientationMarkers = [...this.originalMarkers]
|
||||
this.setMarkers()
|
||||
},
|
||||
setMarkers() {
|
||||
var markers = [...this.orientationMarkers]
|
||||
for (const key in this.markers) {
|
||||
var v = markers.shift(0)
|
||||
this.markers[key] = v
|
||||
}
|
||||
},
|
||||
handleCameraModified(e) {
|
||||
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)
|
||||
// console.log(e)
|
||||
},
|
||||
handleVOIModified(e) {
|
||||
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
|
||||
const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
|
||||
lower,
|
||||
upper
|
||||
)
|
||||
this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
|
||||
}
|
||||
},
|
||||
handleMouseMove(e) {
|
||||
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
|
||||
|
||||
this.mousePosition.value = this.getValue(this.volume, worldPoint)
|
||||
}
|
||||
},
|
||||
getValue(volume, worldPos) {
|
||||
const { dimensions, scalarData, imageData } = volume
|
||||
|
||||
const index = imageData.worldToIndex(worldPos)
|
||||
|
||||
index[0] = Math.floor(index[0])
|
||||
index[1] = Math.floor(index[1])
|
||||
index[2] = Math.floor(index[2])
|
||||
|
||||
if (!utilities.indexWithinDimensions(index, dimensions)) {
|
||||
return
|
||||
}
|
||||
|
||||
const yMultiple = dimensions[0]
|
||||
const zMultiple = dimensions[0] * dimensions[1]
|
||||
|
||||
const value = scalarData[index[2] * zMultiple + index[1] * yMultiple + index[0]]
|
||||
|
||||
return value
|
||||
},
|
||||
handleMouseLeave(e) {
|
||||
this.mousePosition.index = []
|
||||
this.mousePosition.value = null
|
||||
},
|
||||
goViewer(e) {
|
||||
var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
|
||||
this.sliderBoxHeight = height
|
||||
var index = Math.trunc(this.seriesInfo.imageMaxLength * this.sliderBoxHeight / 100)
|
||||
if (this.seriesInfo.imageIdIndex !== index) {
|
||||
this.scroll(index)
|
||||
}
|
||||
},
|
||||
|
||||
sliderMousedown(e) {
|
||||
var boxHeight = this.$refs['sliderBox'].clientHeight
|
||||
this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
|
||||
this.sliderInfo.oldM = e.clientY
|
||||
this.sliderInfo.isMove = true
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
},
|
||||
sliderMousemove(e) {
|
||||
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
|
||||
const height = PX * 100 / boxHeight
|
||||
var index = Math.trunc(this.seriesInfo.imageMaxLength * height / 100)
|
||||
index = index > this.seriesInfo.imageMaxLength ? this.seriesInfo.imageMaxLength : 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
|
||||
|
||||
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 = Math.trunc(e.offsetX)
|
||||
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)
|
||||
const actorEntries = viewport.getActors()
|
||||
|
||||
if (!actorEntries) {
|
||||
return
|
||||
}
|
||||
const delta = index - this.seriesInfo.imageIdIndex
|
||||
toolsUtilities.scroll(viewport, {
|
||||
delta,
|
||||
volumeId: actorEntries.uid
|
||||
})
|
||||
renderingEngine.render()
|
||||
},
|
||||
rotateBarMouseup(e) {
|
||||
this.rotateBarInfo.isMove = false
|
||||
},
|
||||
sliderMouseup(e) {
|
||||
this.sliderInfo.isMove = false
|
||||
},
|
||||
setAnnotation(imageId, element) {
|
||||
this.measureDatas.forEach(item => {
|
||||
if (item.OtherMeasureData) {
|
||||
var { metadata, annotationUID } = item.OtherMeasureData
|
||||
var { referencedImageId } = metadata
|
||||
console.log(annotationUID, annotation.state.getAnnotation(annotationUID))
|
||||
if (!annotation.state.getAnnotation(annotationUID) && referencedImageId === imageId) {
|
||||
annotation.state.addAnnotation(item.OtherMeasureData, element)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
setPreset(presetName) {
|
||||
this.presetName = presetName
|
||||
},
|
||||
renderColorBar(presetName) {
|
||||
var colorMap = null
|
||||
if (presetName === 'hsv') {
|
||||
colorMap = vtkColorMaps.getPresetByName(presetName)
|
||||
} else {
|
||||
colorMap = getColormap(presetName)
|
||||
}
|
||||
const rgbPoints = colorMap.RGBPoints
|
||||
const canvas = document.getElementById('colorBar_Canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
const canvasWidth = 160
|
||||
const canvasHeight = 5
|
||||
const rectWidth = 160
|
||||
const rectHeight = canvasHeight
|
||||
canvas.width = canvasWidth
|
||||
canvas.height = canvasHeight
|
||||
const gradient = ctx.createLinearGradient(0, 0, rectWidth, 0)
|
||||
for (let i = 0; i < rgbPoints.length; i += 4) {
|
||||
let position = 0
|
||||
if (rgbPoints[0] === -1) {
|
||||
position = (rgbPoints[i] + 1) / 2
|
||||
} else {
|
||||
position = rgbPoints[i]
|
||||
}
|
||||
const color = `rgb(${parseInt(rgbPoints[i + 1] * 255)}, ${parseInt(rgbPoints[i + 2] * 255)}, ${parseInt(rgbPoints[i + 3] * 255)})`
|
||||
gradient.addColorStop(position, color)
|
||||
}
|
||||
ctx.fillStyle = gradient
|
||||
ctx.fillRect(0, 0, rectWidth, rectHeight)
|
||||
},
|
||||
setWwWc() {
|
||||
var properties = viewport.getProperties()
|
||||
if (properties && properties.voiRange) {
|
||||
var { lower, upper } = properties.voiRange
|
||||
const windowWidth = upper - lower
|
||||
const windowCenter = (upper + lower) / 2
|
||||
this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
|
||||
}
|
||||
},
|
||||
async getScreenshots() {
|
||||
const divForDownloadViewport = document.querySelector(
|
||||
`div[data-viewport-uid="FUSION_AXIAL"]`
|
||||
)
|
||||
// const divForDownloadViewport = document.querySelector(
|
||||
// '.viewport_container'
|
||||
// )
|
||||
|
||||
var canvas = await html2canvas(divForDownloadViewport)
|
||||
var pictureBaseStr = canvas.toDataURL('image/png', 1)
|
||||
return pictureBaseStr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.viewport_container{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
.seriesInfo_wrapper {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
.taskInfo_container{
|
||||
color:#f44336;
|
||||
padding: 5px 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.descInfo_wrapper{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
.imageInfo_wrapper_l{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 5px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
.imageInfo_wrapper_r{
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 5px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
.slider_box{
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
height: calc(100% - 120px);
|
||||
transform: translateY(-50%);
|
||||
top: calc(50% - 30px);
|
||||
width: 10px;
|
||||
background: #333;
|
||||
cursor: pointer;
|
||||
.box{
|
||||
z-index:10;
|
||||
background: #9e9e9e;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: move
|
||||
}
|
||||
}
|
||||
.color_bar{
|
||||
|
||||
position: absolute;
|
||||
|
||||
// transform:translateY(-50%);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
left: -150px;
|
||||
top: 30%;
|
||||
// transform-origin: top left;
|
||||
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;
|
||||
// bottom: -20px;
|
||||
// left: 0;
|
||||
// height: 20px;
|
||||
// width: 100%;
|
||||
// background: #333;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -424,7 +424,11 @@ export default {
|
|||
var token = getToken()
|
||||
var path = ''
|
||||
if (this.readingTool === 0) {
|
||||
path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
|
||||
if (this.criterionType === 0 && this.trialId === '08dd28b3-6843-fc05-0242-ac1301000000') {
|
||||
path = `/fusion?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&studyId=62b3dfc4-1e04-4180-910d-fe595f398361&ctseriesId=1bd24f53-d419-32e5-92d4-2b04640aaa65&ptseriesId=2b7b128d-8c3f-8357-ad14-e38f3acbbdff&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&TokenKey=${token}&lang=${this.$i18n.locale}`
|
||||
} else {
|
||||
path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
|
||||
}
|
||||
} else {
|
||||
path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue