From 3d11e4fd3e06d7cfaad83dc060eb3ba5bc45b975 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Thu, 8 Jan 2026 14:00:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewFile/viewFile.vue | 215 ++++++++++++++++++++-------
 vue.config.js                        |  18 +--
 2 files changed, 170 insertions(+), 63 deletions(-)

diff --git a/src/components/viewFile/viewFile.vue b/src/components/viewFile/viewFile.vue
index 4e1bddf..0d5b166 100644
--- a/src/components/viewFile/viewFile.vue
+++ b/src/components/viewFile/viewFile.vue
@@ -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>
diff --git a/vue.config.js b/vue.config.js
index 8b49cd5..d1efa83 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -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 = {
         }
       )
   }
-}
+}