wangyifang
/
szhd-safety-web-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

预览

Browse Source
master
lion 3 months ago
parent 93e2493c19
commit 3d11e4fd3e
2 changed files with 170 additions and 63 deletions
Show Stats Download Patch File Download Diff File

215
src/components/viewFile/viewFile.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<template>
<el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="2vh" :visible.sync="diaShow" @close="coloseDia"
:width="width">
@ -8,18 +8,18 @@
<slot name="searchtype"></slot>
</div>
<div class="dialogConcent" :style="{height:wheight+'px'}">
<vue-office-docx v-if="urlType==='docx'" :src="url" @rendered="renderingCompleted"></vue-office-docx>
<vue-office-pdf v-if="urlType==='pdf'" :src="url" @rendered="renderingCompleted"></vue-office-pdf>
<vue-office-excel v-if="urlType==='excel'" :src="url" @rendered="renderingCompleted"></vue-office-excel>
<iframe v-else id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
<div class="dialogConcent" :class="{'pdf-container': urlType==='pdf', 'excel-container': urlType==='excel'}" :style="{height:wheight+'px'}" v-loading="loading" element-loading-text="文件加载中...">
<vue-office-docx v-if="urlType==='docx' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-docx>
<vue-office-pdf v-if="urlType==='pdf' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-pdf>
<vue-office-excel v-if="urlType==='excel' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-excel>
<iframe v-if="urlType==='others' && url" :key="urlKey" id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb" @load="iframeLoaded" @error="handleError">
</iframe>
</div>
<div slot="footer" class="dialog-footer">
<div>
<el-button size="small" @click="coloseDia">关闭</el-button>
<div slot="footer" class="dialog-footer">
<div>
<el-button size="small" @click="coloseDia">关闭</el-button>
</div>
<slot name="footerbtn"></slot>
</div>
@ -27,16 +27,16 @@
</template>
<script>
import vueOfficeDocx from "@vue-office/docx"
import vueOfficeExcel from "@vue-office/excel"
import vueOfficePdf from "@vue-office/pdf"
<script>
import vueOfficeDocx from "@vue-office/docx"
import vueOfficeExcel from "@vue-office/excel"
import vueOfficePdf from "@vue-office/pdf"
import '@vue-office/docx/lib/index.css'
export default {
components:{
vueOfficeDocx,
vueOfficeExcel,
vueOfficePdf
export default {
components:{
vueOfficeDocx,
vueOfficeExcel,
vueOfficePdf
},
props: {
title: {
@ -56,51 +56,137 @@
type: {
type: String,
default: "showinfo"
},
url:{
type: String,
default: ""
},
url:{
type: String,
default: ""
}
},
data() {
return {
diaShow: this.isShow,
diaShow: this.isShow,
isfullscreen:false,
baseUrl: "http://192.168.60.24:8012/onlinePreview?url=",
wheight: "400",
form:{
show:''
},
urlType:'others'
wheight: "400",
form:{
show:''
},
urlType:'others',
loading: false,
urlKey: 0, // 用于强制重新渲染组件
loadTimer: null // 加载超时定时器
}
},
watch: {
isShow(val) {
this.diaShow = this.isShow;
},
url(val){
console.log("url",val)
if(val){
if(val.includes('docx')||val.includes('DOCX')){
this.urlType = 'docx'
}else if(val.includes('pdf')||val.includes('PDF')){
this.urlType = 'pdf'
}else if(val.includes('xls')||val.includes('xlsx')||val.includes('XLS')||val.includes('XLSX')){
this.urlType = 'excel'
}else{
this.urlType = 'others'
}
console.log('urltype',this.urlType)
}
},
url(val){
console.log("url",val)
if(val){
// 启动加载
this.loading = true
// 强制重新渲染，确保每次打开都是新的加载
this.urlKey = Date.now()
if(val.includes('docx')||val.includes('DOCX')){
this.urlType = 'docx'
}else if(val.includes('pdf')||val.includes('PDF')){
this.urlType = 'pdf'
}else if(val.includes('xls')||val.includes('xlsx')||val.includes('XLS')||val.includes('XLSX')){
this.urlType = 'excel'
}else{
this.urlType = 'others'
}
console.log('urltype',this.urlType)
// 设置超时处理，避免加载失败时一直显示 loading
// 清除之前的定时器
if(this.loadTimer) {
clearTimeout(this.loadTimer)
}
this.loadTimer = setTimeout(() => {
if(this.loading) {
console.warn('文件加载超时')
this.loading = false
this.$message.warning('文件加载超时，请检查网络或文件是否存在')
}
}, 30000) // 30秒超时
} else {
// url为空时重置文件类型
this.urlType = 'others'
this.loading = false
}
},
diaShow(val) {
// 对话框打开时，如果 url 存在，重新触发加载
if(val && this.url) {
this.urlKey = Date.now()
this.loading = true
// 设置超时处理
if(this.loadTimer) {
clearTimeout(this.loadTimer)
}
this.loadTimer = setTimeout(() => {
if(this.loading) {
console.warn('文件加载超时')
this.loading = false
this.$message.warning('文件加载超时，请检查网络或文件是否存在')
}
}, 30000)
}
// 对话框关闭时，重置状态
if(!val) {
if(this.loadTimer) {
clearTimeout(this.loadTimer)
this.loadTimer = null
}
this.loading = false
}
}
},
methods: {
renderingCompleted(){
console.log("渲染完成")
methods: {
renderingCompleted(){
console.log("渲染完成")
// 清除超时定时器
if(this.loadTimer) {
clearTimeout(this.loadTimer)
this.loadTimer = null
}
// 渲染完成后隐藏 loading
this.loading = false
},
iframeLoaded(){
console.log("iframe加载完成")
// 清除超时定时器
if(this.loadTimer) {
clearTimeout(this.loadTimer)
this.loadTimer = null
}
// iframe 加载完成后隐藏 loading
this.loading = false
},
handleError(error) {
console.error("文件加载失败:", error)
// 清除超时定时器
if(this.loadTimer) {
clearTimeout(this.loadTimer)
this.loadTimer = null
}
// 加载失败时也隐藏 loading
this.loading = false
this.$message.error('文件加载失败，请重试')
},
coloseDia() {
// this.url = ""
this.diaShow = false
// 清除定时器
if(this.loadTimer) {
clearTimeout(this.loadTimer)
this.loadTimer = null
}
// 清除文件显示
this.urlType = 'others'
this.loading = false
this.diaShow = false
this.$emit('update:isShow', false)
this.$emit('resetform')
}
@ -108,12 +194,33 @@
}
</script>
<style scoped>
/deep/ .show{
flex-basis: 100%;
<style scoped>
/deep/ .show{
flex-basis: 100%;
}
.dialogConcent {
overflow-y: hidden;
position: relative;
}
.dialogConcent.pdf-container {
overflow-y: auto;
overflow-x: hidden;
}
.dialogConcent.pdf-container /deep/ .vue-office-pdf {
width: 100%;
height: auto;
}
.dialogConcent.excel-container {
overflow-y: auto;
overflow-x: auto;
}
.dialogConcent.excel-container /deep/ .vue-office-excel {
width: 100%;
height: auto;
}
.iframeWeb {
@ -123,4 +230,4 @@
height: 100vh;
width: 100%;
}
</style>
</style>

18
vue.config.js
Unescape View File

@ -25,7 +25,7 @@ module.exports = {
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
outputDir: '/Users/mac/Documents/朗业/2024/h-河道处项目/a-安全生产/safety-manage-service/public/admin_test',
outputDir: '/Users/mac/Documents/朗业/2024/h-河道处项目/a-安全生产/safety-manage-service/public/admin',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
@ -44,13 +44,13 @@ module.exports = {
errors: true
},
//before: require('./mock/mock-server.js')
proxy: {
'^/uploadApi': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true, //配置跨域
pathRewrite: {
['^/uploadApi']: process.env.VUE_APP_BASE_API
}
proxy: {
'^/uploadApi': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true, //配置跨域
pathRewrite: {
['^/uploadApi']: process.env.VUE_APP_BASE_API
}
},
[process.env.VUE_APP_BASE_API]: {
target:process.env.VUE_APP_BASE_API,
@ -152,4 +152,4 @@ module.exports = {
}
)
}
}
}

Write Preview
Loading…
Cancel
Save