295 lines
8.2 KiB
Plaintext
295 lines
8.2 KiB
Plaintext
<template>
|
||
<div v-loading="loading" class="img-container">
|
||
<el-card class="box-card left">
|
||
<div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title" style="text-align:center">
|
||
<span>{{ otherInfo.SubjectCode }} </span>
|
||
<span>({{ otherInfo.TaskBlindName }})</span>
|
||
</div>
|
||
<div style="height: 100%;" class="left-content">
|
||
<!-- 检查层级 -->
|
||
<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>{{ getBodyPart(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-card>
|
||
<!-- 预览图像 -->
|
||
<el-card class="box-card right">
|
||
<div style="width:100%;height: 100%;">
|
||
<NoneDicomsViewer
|
||
v-if="previewImage.imgList.length > 0"
|
||
ref="previewImage"
|
||
style="width:100%;"
|
||
:preview-image="previewImage"
|
||
:value="currentStudyFileIndex"
|
||
:reading-task-state="readingTaskState"
|
||
@selectedImg="selectedImg"
|
||
/>
|
||
</div>
|
||
|
||
</el-card>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { getReadingImageFile } from '@/api/trials'
|
||
import { changeURLStatic } from '@/utils/history.js'
|
||
import store from '@/store'
|
||
import NoneDicomsViewer from './components/NoneDicomsViewer'
|
||
export default {
|
||
name: 'VisitReview',
|
||
components: {
|
||
NoneDicomsViewer
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
currentFileId: '',
|
||
currentStudyIndex: 0,
|
||
currentStudyFileIndex: 0,
|
||
pageSize: 0, // 一页展示的图片数
|
||
previewImage: {
|
||
imgList: [],
|
||
index: 0, // 当前点击的图片的索引
|
||
infinite: true, // 是否可以循环切换
|
||
popup: true, // 弹窗的显示隐藏
|
||
studyCode: '',
|
||
modality: '',
|
||
bodyPart: '',
|
||
studyId: ''
|
||
},
|
||
previewVisible: false,
|
||
studyList: [],
|
||
loading: false,
|
||
isRenderAssocicatedTasks: false,
|
||
associatedList: [],
|
||
currentTaskId: '',
|
||
otherInfo: null,
|
||
isReadingShowPreviousResults: false,
|
||
trialId: '',
|
||
subjectId: '',
|
||
subjectCode: '',
|
||
visistTaskId: '',
|
||
taskBlindName: '',
|
||
readingTaskState: 2
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.$router.currentRoute.query.TokenKey) {
|
||
store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
|
||
changeURLStatic('TokenKey', '')
|
||
}
|
||
this.trialId = this.$router.currentRoute.query.trialId
|
||
this.subjectCode = this.$router.currentRoute.query.subjectCode
|
||
this.subjectId = this.$router.currentRoute.query.subjectId
|
||
this.visitTaskId = this.$router.currentRoute.query.visitTaskId
|
||
this.taskBlindName = this.$router.currentRoute.query.visitTaskId
|
||
this.readingTaskState = this.$router.currentRoute.query.readingTaskState ? parseInt(this.$router.currentRoute.query.readingTaskState) : 2
|
||
// this.trialId = '4c430000-3e2c-0016-1b56-08da66260729'
|
||
// this.subjectCode = 'T001'
|
||
// this.subjectId = '883c0000-3e2c-0016-ffcc-08da662bd5f3'
|
||
// this.visitTaskId = 'b8320000-3e2c-0016-a8db-08da73a6db3e'
|
||
// this.taskBlindName = 'B020'
|
||
this.getNoneDicomList()
|
||
},
|
||
methods: {
|
||
// 获取非Dicom检查信息
|
||
getNoneDicomList() {
|
||
this.loading = true
|
||
var param = {
|
||
subjectId: this.subjectId,
|
||
trialId: this.trialId,
|
||
visistTaskId: this.visitTaskId
|
||
}
|
||
getReadingImageFile(param).then(res => {
|
||
this.otherInfo = res.OtherInfo
|
||
if (res.Result.length > 0) {
|
||
this.studyList = res.Result
|
||
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.previewImage.studyId = this.studyList[studyIndex].Id
|
||
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
|
||
},
|
||
getBodyPart(bodyPart) {
|
||
if (!bodyPart) return ''
|
||
var separator = ','
|
||
if (bodyPart.indexOf('|') > -1) {
|
||
separator = '|'
|
||
} else if (bodyPart.indexOf(',') > -1) {
|
||
separator = ','
|
||
} else if (bodyPart.indexOf('，') > -1) {
|
||
separator = '，'
|
||
}
|
||
var arr = bodyPart.split(separator)
|
||
var newArr = arr.map(i => {
|
||
return this.$fd('Bodypart', i.trim())
|
||
})
|
||
return newArr.join(' | ')
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
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>
|