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

预览

Browse Source
master
lion 7 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" <el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="2vh" :visible.sync="diaShow" @close="coloseDia"
:width="width"> :width="width">
@ -8,18 +8,18 @@
<slot name="searchtype"></slot> <slot name="searchtype"></slot>
</div> </div>
<div class="dialogConcent" :style="{height:wheight+'px'}"> <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'" :src="url" @rendered="renderingCompleted"></vue-office-docx> <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'" :src="url" @rendered="renderingCompleted"></vue-office-pdf> <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'" :src="url" @rendered="renderingCompleted"></vue-office-excel> <vue-office-excel v-if="urlType==='excel' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-excel>
<iframe v-else id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb"> <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> </iframe>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<div> <div>
<el-button size="small" @click="coloseDia">关闭</el-button> <el-button size="small" @click="coloseDia">关闭</el-button>
</div> </div>
<slot name="footerbtn"></slot> <slot name="footerbtn"></slot>
</div> </div>
@ -27,16 +27,16 @@
</template> </template>
<script> <script>
import vueOfficeDocx from "@vue-office/docx" import vueOfficeDocx from "@vue-office/docx"
import vueOfficeExcel from "@vue-office/excel" import vueOfficeExcel from "@vue-office/excel"
import vueOfficePdf from "@vue-office/pdf" import vueOfficePdf from "@vue-office/pdf"
import '@vue-office/docx/lib/index.css' import '@vue-office/docx/lib/index.css'
export default { export default {
components:{ components:{
vueOfficeDocx, vueOfficeDocx,
vueOfficeExcel, vueOfficeExcel,
vueOfficePdf vueOfficePdf
}, },
props: { props: {
title: { title: {
@ -56,51 +56,137 @@
type: { type: {
type: String, type: String,
default: "showinfo" default: "showinfo"
}, },
url:{ url:{
type: String, type: String,
default: "" default: ""
} }
}, },
data() { data() {
return { return {
diaShow: this.isShow, diaShow: this.isShow,
isfullscreen:false, isfullscreen:false,
baseUrl: "http://192.168.60.24:8012/onlinePreview?url=", baseUrl: "http://192.168.60.24:8012/onlinePreview?url=",
wheight: "400", wheight: "400",
form:{ form:{
show:'' show:''
}, },
urlType:'others' urlType:'others',
loading: false,
urlKey: 0, // 用于强制重新渲染组件
loadTimer: null // 加载超时定时器
} }
}, },
watch: { watch: {
isShow(val) { isShow(val) {
this.diaShow = this.isShow; this.diaShow = this.isShow;
}, },
url(val){ url(val){
console.log("url",val) console.log("url",val)
if(val){ if(val){
if(val.includes('docx')||val.includes('DOCX')){ // 启动加载
this.urlType = 'docx' this.loading = true
}else if(val.includes('pdf')||val.includes('PDF')){ // 强制重新渲染，确保每次打开都是新的加载
this.urlType = 'pdf' this.urlKey = Date.now()
}else if(val.includes('xls')||val.includes('xlsx')||val.includes('XLS')||val.includes('XLSX')){
this.urlType = 'excel' if(val.includes('docx')||val.includes('DOCX')){
}else{ this.urlType = 'docx'
this.urlType = 'others' }else if(val.includes('pdf')||val.includes('PDF')){
} this.urlType = 'pdf'
console.log('urltype',this.urlType) }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: { methods: {
renderingCompleted(){ renderingCompleted(){
console.log("渲染完成") 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() { 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('update:isShow', false)
this.$emit('resetform') this.$emit('resetform')
} }
@ -108,12 +194,33 @@
} }
</script> </script>
<style scoped> <style scoped>
/deep/ .show{ /deep/ .show{
flex-basis: 100%; flex-basis: 100%;
} }
.dialogConcent { .dialogConcent {
overflow-y: hidden; 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 { .iframeWeb {
@ -123,4 +230,4 @@
height: 100vh; height: 100vh;
width: 100%; width: 100%;
} }
</style> </style>

18
vue.config.js
Unescape View File

@ -25,7 +25,7 @@ module.exports = {
* Detail: https://cli.vuejs.org/config/#publicpath * Detail: https://cli.vuejs.org/config/#publicpath
*/ */
publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin', 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', assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false, productionSourceMap: false,
@ -44,13 +44,13 @@ module.exports = {
errors: true errors: true
}, },
//before: require('./mock/mock-server.js') //before: require('./mock/mock-server.js')
proxy: { proxy: {
'^/uploadApi': { '^/uploadApi': {
target: process.env.VUE_APP_BASE_API, target: process.env.VUE_APP_BASE_API,
changeOrigin: true, //配置跨域 changeOrigin: true, //配置跨域
pathRewrite: { pathRewrite: {
['^/uploadApi']: process.env.VUE_APP_BASE_API ['^/uploadApi']: process.env.VUE_APP_BASE_API
} }
}, },
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target:process.env.VUE_APP_BASE_API, target:process.env.VUE_APP_BASE_API,
@ -152,4 +152,4 @@ module.exports = {
} }
) )
} }
} }

Write Preview
Loading…
Cancel
Save