138 lines
4.0 KiB
Plaintext
138 lines
4.0 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="preview-wrapper">
|
|
<el-tabs tab-position="right" type="card">
|
|
<el-tab-pane v-for="file in fileList" :key="file.Id" :label="file.FileName">
|
|
|
|
<iframe
|
|
v-if="file.Type.indexOf('jpg') !== -1 || file.Type.indexOf('png') !== -1"
|
|
frameborder="0"
|
|
:src="file.FullFilePath"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
<!-- <div v-else-if="file.Type.indexOf('pdf') !== -1" class="embedbox" style="width:100%;height:100%" @contextmenu.native.stop.prevent="handlePaste($event)">
|
|
<embed id="embed" ref="embed" :src="`/api/${file.FullFilePath}`" type="" style="width: 100%; height: 100%" @contextmenu.native.stop.prevent="handlePaste($event)">
|
|
<div class="toolbox" />
|
|
</div> -->
|
|
<!-- <embed v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath" style="width: 100%; height: 100%"> -->
|
|
<!-- <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
|
|
<!-- <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="`/api/${file.FullFilePath}`" width="100%" height="100%" frameborder="0" /> -->
|
|
<iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="`/static/pdfjs/web/viewer.html?file=${file.FullFilePath}`" width="100%" height="100%" frameborder="0" />
|
|
<videoPlayer v-else-if="!~~file.Type.indexOf('MP4')" :video-src="file.FullFilePath" style="width: 100%;height: 100%;" />
|
|
<div v-else>
|
|
{{ $t('common:message:downloadFile') }}
|
|
<el-link type="primary" @click="downLoadFile(file.FullFilePath)">{{ $t('common:button:download') }}</el-link>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getNoneDicomStudyFileList } from '@/api/trials'
|
|
import videoPlayer from '@/components/videoPlayer'
|
|
|
|
export default {
|
|
name: 'PreviewFiles',
|
|
components: { videoPlayer },
|
|
props: {
|
|
noneDicomId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default() { return {} }
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileType: '',
|
|
fileUrl: '',
|
|
loading: false,
|
|
fileList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFileList()
|
|
},
|
|
methods: {
|
|
handlePaste(event) {
|
|
event.preventDefault()
|
|
return false
|
|
},
|
|
getFileList() {
|
|
this.loading = true
|
|
getNoneDicomStudyFileList(this.noneDicomId).then(res => {
|
|
this.fileList = res.Result
|
|
this.fileList.forEach(file => {
|
|
const fileName = file.FileName
|
|
file.Type = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
|
|
})
|
|
if (this.data.VideoName) {
|
|
this.fileList.push({ FileName: this.data.VideoName, FullFilePath: this.data.VideoUrl, Type: 'MP4' })
|
|
}
|
|
this.loading = false
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('embed').contentDocument.oncontextmenu = function() {
|
|
return false
|
|
}
|
|
}, 200)
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
downLoadFile(filePath) {
|
|
if (!filePath) return
|
|
window.open(filePath, '_blank')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.preview-wrapper{
|
|
height: 100%;
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
.el-tabs{
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
.el-tabs__header{
|
|
margin-right: 10px !important;
|
|
height: 100% !important;
|
|
width: 300px;
|
|
border: 2px solid #E4E7ED;
|
|
overflow: auto;
|
|
}
|
|
.el-tabs__content{
|
|
flex: 1;
|
|
height: 100%;
|
|
.el-tab-pane{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.embedbox{
|
|
// transform: translate(30px,-50px);
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
.toolbox{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 50px;
|
|
background-color: #323639;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|