360 lines
10 KiB
Plaintext
360 lines
10 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="img-container">
|
|
<el-card class="box-card left">
|
|
<div v-if="otherInfo.IsReadingShowSubjectInfo" class="title">
|
|
<span>受试者：{{ otherInfo.SubjectCode }} </span>
|
|
<span>({{ otherInfo.TaskBlindName }})</span>
|
|
</div>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="当前任务" name="first" class="left-content">
|
|
<div>
|
|
<!-- 检查层级 -->
|
|
<div v-for="(study,i) in studyList" :key="study.CodeView">
|
|
<div class="study-desc">
|
|
<span>{{ study.CodeView }}</span>
|
|
<span style="margin:0 5px">{{ study.Modality }}</span>
|
|
<span>{{ study.BodyPart }}</span>
|
|
</div>
|
|
<!-- 文件层级 -->
|
|
<div v-if="study.NoneDicomStudyFileList.length === 0" class="empty-text">
|
|
<slot name="empty">暂无数据</slot>
|
|
</div>
|
|
<div v-else id="imgList" style="height:100%;">
|
|
<div
|
|
v-for="(item,j) in study.NoneDicomStudyFileList"
|
|
:id="`img${item.Id}`"
|
|
:key="item.Id"
|
|
:class="{
|
|
'is-boxActive': item.Id === currentFileId
|
|
}"
|
|
class="img-box"
|
|
@click="selected(item,i,j,true)"
|
|
>
|
|
{{ `${j+1}. ${item.FileName}` }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane v-if="showOtherTask === true" label="关联任务" name="second">
|
|
<div style="height:100%;">
|
|
<!-- 文件层级 -->
|
|
<div v-if="associatedList.length === 0" class="empty-text">
|
|
<slot name="empty">暂无数据</slot>
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
v-for="(task,j) in associatedList"
|
|
:key="task.VisitTaskId"
|
|
:class="{
|
|
'is-boxActive': task.VisitTaskId === currentTaskId
|
|
}"
|
|
class="img-box"
|
|
@click="handleImageRead(task)"
|
|
>
|
|
{{ `${j+1}. ${task.TaskBlindName}` }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
</el-card>
|
|
<!-- 预览图像 -->
|
|
<el-card class="box-card right">
|
|
<div style="width:100%;height: 100%;">
|
|
<Preview
|
|
v-if="previewImage.imgList.length > 0"
|
|
ref="previewImage"
|
|
style="width:100%;"
|
|
:preview-image="previewImage"
|
|
:value="currentStudyFileIndex"
|
|
@selectedImg="selectedImg"
|
|
/>
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
<el-card class="box-card" style="width:400px;height:100%;padding: 10px;margin-left:10px;overflow-y: auto;">
|
|
<el-button
|
|
v-if="otherInfo.IsExistsClinicalData"
|
|
type="primary"
|
|
size="mini"
|
|
@click="previewCD"
|
|
>
|
|
临床数据
|
|
</el-button>
|
|
<Criterions
|
|
v-if="visitTaskId!== '' && subjectId!== '' && readingCategory!==null && readingCategory!==4"
|
|
:trial-id="trialId"
|
|
:subject-id="subjectId"
|
|
:visit-task-id="visitTaskId"
|
|
/>
|
|
</el-card>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getReadingImageFile, getReadingPastResultList } from '@/api/trials'
|
|
import { getToken } from '@/utils/auth'
|
|
import Preview from '@/views/none-dicom-show/components/preview'
|
|
import Criterions from './Criterions'
|
|
export default {
|
|
name: 'VisitReview',
|
|
components: {
|
|
Preview,
|
|
Criterions
|
|
},
|
|
props: {
|
|
trialId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subjectId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
visitTaskId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
readingCategory: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 'first',
|
|
currentFileId: '',
|
|
currentStudyIndex: 0,
|
|
currentStudyFileIndex: 0,
|
|
pageSize: 0, // 一页展示的图片数
|
|
previewImage: {
|
|
imgList: [],
|
|
index: 0, // 当前点击的图片的索引
|
|
infinite: true, // 是否可以循环切换
|
|
popup: true, // 弹窗的显示隐藏
|
|
studyCode: '',
|
|
modality: '',
|
|
bodyPart: ''
|
|
},
|
|
previewVisible: false,
|
|
studyList: [],
|
|
loading: false,
|
|
isRenderAssocicatedTasks: false,
|
|
associatedList: [],
|
|
currentTaskId: '',
|
|
otherInfo: {},
|
|
isReadingShowPreviousResults: false
|
|
}
|
|
},
|
|
computed: {
|
|
showOtherTask() {
|
|
return this.otherInfo.IsReadingShowPreviousResults && this.isReadingShowPreviousResults
|
|
}
|
|
},
|
|
mounted() {
|
|
this.isReadingShowPreviousResults = this.$router.currentRoute.query.isReadingShowPreviousResults !== undefined ? this.$router.currentRoute.query.isReadingShowPreviousResults : true
|
|
|
|
this.getNoneDicomList(this.isReadingShowPreviousResults)
|
|
},
|
|
methods: {
|
|
// 获取非Dicom检查信息
|
|
getNoneDicomList() {
|
|
this.loading = true
|
|
var param = {
|
|
subjectId: this.subjectId,
|
|
trialId: this.trialId,
|
|
visistTaskId: this.visitTaskId
|
|
}
|
|
getReadingImageFile(param).then(res => {
|
|
if (res.Result.length > 0) {
|
|
this.studyList = res.Result
|
|
this.otherInfo = res.OtherInfo
|
|
const studyIndex = this.studyList.findIndex(item => {
|
|
return item.NoneDicomStudyFileList.length > 0
|
|
})
|
|
if (studyIndex > -1) {
|
|
var fileObj = this.studyList[studyIndex]['NoneDicomStudyFileList']
|
|
this.selected(fileObj[0], studyIndex, 0, true)
|
|
}
|
|
}
|
|
this.loading = false
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
selected(file, studyIndex, fileIndex, isChangeSub = false) {
|
|
this.currentFileId = file.Id
|
|
this.currentStudyIndex = studyIndex
|
|
this.previewImage.imgList = this.studyList[studyIndex].NoneDicomStudyFileList
|
|
this.currentStudyFileIndex = fileIndex
|
|
this.previewImage.index = fileIndex
|
|
this.previewImage.studyCode = this.studyList[studyIndex].CodeView
|
|
this.previewImage.bodyPart = this.studyList[studyIndex].BodyPart
|
|
this.previewImage.modality = this.studyList[studyIndex].Modality
|
|
this.$nextTick(() => {
|
|
if (isChangeSub) {
|
|
this.$refs['previewImage'].selected(fileIndex)
|
|
}
|
|
})
|
|
},
|
|
selectedImg(fileIndex) {
|
|
if (this.studyList.length > 0) {
|
|
this.currentStudyFileIndex = fileIndex
|
|
this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id
|
|
this.previewImage.index = fileIndex
|
|
this.previewImage.studyCode = this.studyList[this.currentStudyIndex].CodeView
|
|
this.previewImage.bodyPart = this.studyList[this.currentStudyIndex].BodyPart
|
|
this.previewImage.modality = this.studyList[this.currentStudyIndex].Modality
|
|
this.$nextTick(() => {
|
|
const target = document.getElementById(`img${this.currentFileId}`)
|
|
const parent = document.getElementsByClassName('left-content')[0]
|
|
parent.scrollTop = target.offsetTop - parent.offsetTop
|
|
})
|
|
}
|
|
},
|
|
preview() {
|
|
this.previewVisible = true
|
|
},
|
|
handleClick(tab) {
|
|
if (tab.name === 'second' && !this.isRenderAssocicatedTasks) {
|
|
this.getAssociatedTask()
|
|
}
|
|
},
|
|
getAssociatedTask() {
|
|
this.loading = true
|
|
var param = {
|
|
trialId: this.trialId,
|
|
subjectId: this.subjectId,
|
|
visitTaskId: this.visitTaskId
|
|
}
|
|
getReadingPastResultList(param).then(res => {
|
|
this.associatedList = res.Result
|
|
this.isRenderAssocicatedTasks = true
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
handleImageRead(task) {
|
|
this.currentTaskId = task.VisitTaskId
|
|
var token = getToken()
|
|
const routeData = this.$router.resolve({
|
|
path: `/noneDicomReading?subjectId=${this.subjectId}&trialId=${this.trialId}&visitTaskId=${task.VisitTaskId}&TokenKey=${token}`
|
|
})
|
|
window.open(routeData.href, '_blank')
|
|
},
|
|
previewCD() {
|
|
var token = getToken()
|
|
const routeData = this.$router.resolve({
|
|
path: `/clinicalData?subjectId=${this.subjectId}&trialId=${this.trialId}&visitTaskId=${this.visitTaskId}&TokenKey=${token}`
|
|
})
|
|
window.open(routeData.href, '_blank')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.img-container{
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
display: flex;
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
>>>.el-card__body{
|
|
padding: 0px;
|
|
}
|
|
}
|
|
.study-desc{
|
|
padding: 10px 5px;
|
|
height: 40px;
|
|
line-height: 1;
|
|
background-color: #ebebeb;
|
|
font-weight: 500;
|
|
}
|
|
.left{
|
|
width:240px;
|
|
height: 100%;
|
|
|
|
>>>.el-card__body{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.title{
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border: 1ppx solid;
|
|
border: 1px solid #ebe7e7;
|
|
padding-left: 10px;
|
|
background-color: #4e4e4e;
|
|
color: #ffffff;
|
|
}
|
|
.left-content{
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
>>>.el-tabs{
|
|
height: 100%;
|
|
display:flex;
|
|
|
|
flex-direction: column;
|
|
}
|
|
>>>.el-tabs__header{
|
|
height: 40px;
|
|
padding: 0 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
>>>.el-tabs__content{
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 5px;
|
|
}
|
|
.img-box{
|
|
// position: relative;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
border-bottom: 2px solid #f3f3f3;
|
|
width: 180px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
cursor: pointer;
|
|
// margin-bottom: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
.img-box:nth-last-child(1){
|
|
margin-bottom: 0px;
|
|
}
|
|
.is-boxActive {
|
|
// border-color: #409eff;
|
|
color: #409eff;
|
|
}
|
|
.is-boxActiv:after {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.right{
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 10px;
|
|
>>>.el-card__body{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
</style>
|