151 lines
4.3 KiB
Plaintext
151 lines
4.3 KiB
Plaintext
<template>
|
||
<div class="preview-wrapper">
|
||
<div class="left-wrapper">
|
||
<div v-for="item in noneDicomStudyList" :key="item.Id">
|
||
<div class="study-info">
|
||
<h4>{{ `${item.CodeView} (Modality: ${item.Modality})` }}</h4>
|
||
</div>
|
||
<ul>
|
||
<li v-for="file in item.NoneDicomStudyFileList" :key="file.Id">
|
||
<el-button :class="{activeBtn:file.Id === fileInfo.currentId}" plain style="width:100%;text-align:left;" @click="preview(file)">{{ file.FileName }}</el-button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="right-wrapper">
|
||
<iframe
|
||
v-if="fileInfo.currentFileType === 0"
|
||
frameborder="0"
|
||
:src="fileInfo.currentFilePath"
|
||
width="100%"
|
||
height="100%"
|
||
/>
|
||
<!-- <embed v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath" style="width: 100%; height: 100%"> -->
|
||
<!-- <iframe v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
|
||
<iframe v-else-if="fileInfo.currentFileType === 1" :src="`/static/pdfjs/web/viewer.html?file=${fileInfo.currentFilePath}`" width="100%" height="100%" frameborder="0" />
|
||
|
||
<div v-else-if="fileInfo.currentFileType === 2">
|
||
{{ $t('common:message:downloadFile') }}
|
||
<el-link type="primary" @click="downLoadFile(fileInfo.currentFilePath)">{{ $t('common:button:download') }}</el-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getNoneDicomStudyList } from '@/api/trials'
|
||
import store from '@/store'
|
||
import { changeURLStatic } from '@/utils/history.js'
|
||
export default {
|
||
name: 'MultipleNoneDicom',
|
||
data() {
|
||
return {
|
||
fileInfo: {
|
||
currentId: '',
|
||
currentFileName: '',
|
||
currentFilePath: '',
|
||
currentFileType: null // 0:图片；1：pdf; 2:其他
|
||
},
|
||
noneDicomStudyList: [],
|
||
subjectVisitId: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.$router.currentRoute.query.TokenKey) {
|
||
store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
|
||
changeURLStatic('TokenKey', '')
|
||
}
|
||
|
||
this.subjectVisitId = this.$router.currentRoute.query.Id
|
||
this.getNoneDicomList()
|
||
},
|
||
methods: {
|
||
// 获取非Dicom检查信息
|
||
getNoneDicomList() {
|
||
this.loading = true
|
||
getNoneDicomStudyList(this.subjectVisitId).then(res => {
|
||
this.noneDicomStudyList = res.Result
|
||
this.loading = false
|
||
const study = this.noneDicomStudyList.find((item, index) => {
|
||
return item.NoneDicomStudyFileList.length > 0
|
||
})
|
||
if (study !== undefined) {
|
||
this.preview(study.NoneDicomStudyFileList[0])
|
||
}
|
||
}).catch(() => { this.loading = false })
|
||
},
|
||
downLoadFile(filePath) {
|
||
if (!filePath) return
|
||
window.open(filePath, '_blank')
|
||
},
|
||
preview(file) {
|
||
this.$set(this.fileInfo, 'currentId', file.Id)
|
||
this.$set(this.fileInfo, 'currentFileName', file.FileName)
|
||
this.$set(this.fileInfo, 'currentFileType', this.getFileType(file.FileName))
|
||
this.$set(this.fileInfo, 'currentFilePath', file.FullFilePath)
|
||
},
|
||
getFileType(fileName) {
|
||
if (!fileName) return null
|
||
const fn = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
|
||
if (fn.indexOf('jpg') !== -1 || fn.indexOf('png') !== -1) {
|
||
return 0
|
||
} else if (fn.indexOf('pdf') !== -1) {
|
||
return 1
|
||
} else {
|
||
return 2
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.preview-wrapper{
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row !important;
|
||
width: 100%;
|
||
height: 100%;
|
||
::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 7px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background: #d0d0d0;
|
||
}
|
||
.left-wrapper{
|
||
margin-right: 10px;
|
||
height: 100%;
|
||
width: 300px;
|
||
border: 1px solid #ddd;
|
||
overflow: auto;
|
||
.study-info{
|
||
background-color: #eee;
|
||
padding: 2px;
|
||
h4{
|
||
padding-left: 5px;
|
||
}
|
||
}
|
||
ul{
|
||
list-style: none;
|
||
margin: 0px;
|
||
padding: 2px;
|
||
border: 1px solid #ddd;
|
||
li{
|
||
padding: 2px 0px;
|
||
}
|
||
}
|
||
.activeBtn{
|
||
color: #428bca;
|
||
border-color: #428bca;
|
||
}
|
||
}
|
||
.right-wrapper{
|
||
flex: 1;
|
||
height: 100%;
|
||
padding: 5px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
}
|
||
</style>
|