147 lines
3.9 KiB
Plaintext
147 lines
3.9 KiB
Plaintext
<template>
|
||
<div class="preview-wrapper">
|
||
<div class="left-wrapper">
|
||
<div v-for="item in nonDicomStudyList" :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 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" />
|
||
<videoPlayer v-else-if="fileInfo.currentFileType === 3" :video-src="fileInfo.currentFilePath" style="width: 100%;height: 100%;" />
|
||
<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 videoPlayer from '@/components/videoPlayer'
|
||
|
||
export default {
|
||
name: 'PreviewFiles',
|
||
components: { videoPlayer },
|
||
props: {
|
||
nonDicomStudyList: {
|
||
type: Array,
|
||
default() { return [] }
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
fileInfo: {
|
||
currentFilePath: '',
|
||
currentFileType: null // 0:图片；1：pdf; 2:其他
|
||
},
|
||
isShow: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initPage()
|
||
},
|
||
methods: {
|
||
initPage() {
|
||
this.nonDicomStudyList.forEach(v => {
|
||
if (v.VideoName) {
|
||
v.NoneDicomStudyFileList.push({
|
||
FullFilePath: v.VideoUrl,
|
||
FileName: v.VideoName
|
||
})
|
||
}
|
||
})
|
||
const study = this.nonDicomStudyList.find(item => item.NoneDicomStudyFileList.length > 0)
|
||
if (study !== undefined) {
|
||
this.preview(study.NoneDicomStudyFileList[0])
|
||
}
|
||
},
|
||
downLoadFile(filePath) {
|
||
if (!filePath) return
|
||
window.open(filePath, '_blank')
|
||
},
|
||
preview(file) {
|
||
this.$set(this.fileInfo, 'currentFileType', this.getFileType(file.FileName))
|
||
this.$set(this.fileInfo, 'currentFilePath', file.FullFilePath)
|
||
console.log(this.fileInfo)
|
||
},
|
||
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 if (!~~fn.indexOf('mp4')) {
|
||
return 3
|
||
} 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;
|
||
}
|
||
}
|
||
}
|
||
.right-wrapper{
|
||
flex: 1;
|
||
height: 100%;
|
||
padding: 5px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
}
|
||
</style>
|