核医学标准添加融合演示案例
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() {
|
async function VueInit() {
|
||||||
var params
|
var params
|
||||||
var res
|
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')
|
params = $q('TrialReadingCriterionId')
|
||||||
res = await getBasicDataAllSelect(params)
|
res = await getBasicDataAllSelect(params)
|
||||||
} else if (~window.location.href.indexOf('/ecrfPreview')) {
|
} else if (~window.location.href.indexOf('/ecrfPreview')) {
|
||||||
|
|
|
||||||
|
|
@ -139,6 +139,12 @@ export const constantRoutes = [
|
||||||
hidden: true,
|
hidden: true,
|
||||||
component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt')
|
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',
|
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 token = getToken()
|
||||||
var path = ''
|
var path = ''
|
||||||
if (this.readingTool === 0) {
|
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 {
|
} 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}`
|
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