From 8fa746e42ee56985f946416f360beed6fa78b4b7 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 20 Mar 2024 17:11:35 +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/api/archivesManage/library.js             | 11 ++-
 src/components/renders.js                     |  4 +-
 src/utils/index.js                            |  1 +
 src/utils/waterMark.js                        |  8 +-
 src/vendors/image/ImageViewer.vue             |  2 +-
 src/vendors/ofd/OfdView.vue                   | 13 +--
 src/vendors/pdf/PdfView.vue                   |  4 +-
 src/vendors/text/CodeViewer.vue               |  8 +-
 src/vendors/xlsx/Table.vue                    |  6 +-
 .../module/uploadFile/index.vue               |  5 +-
 src/views/preview/index.vue                   | 93 ++++++++++++++-----
 11 files changed, 107 insertions(+), 48 deletions(-)

diff --git a/src/api/archivesManage/library.js b/src/api/archivesManage/library.js
index 9ab74e8..6a24c72 100644
--- a/src/api/archivesManage/library.js
+++ b/src/api/archivesManage/library.js
@@ -57,6 +57,14 @@ export function FetchIsAuthByLookType(params) {
   })
 }
 
+export function FetchBase64ByFileId(params) {
+  return request({
+    url: 'api/control/getBase64ByFileId',
+    method: 'get',
+    params
+  })
+}
+
 export default {
   FetchInitContorlView,
   FetchPrintData,
@@ -64,5 +72,6 @@ export default {
   FetchBusinessFlowHistory,
   FetchBusinessFlowDetails,
   FetchMainData,
-  FetchIsAuthByLookType
+  FetchIsAuthByLookType,
+  FetchBase64ByFileId
 }
diff --git a/src/components/renders.js b/src/components/renders.js
index 7dc31e1..dde1711 100644
--- a/src/components/renders.js
+++ b/src/components/renders.js
@@ -100,8 +100,8 @@ const handlers = [
   {
     accepts: ['error'],
     handler: async(buffer, target, type) => {
-      target.innerHTML = `<div style="text-align: center; margin-top: 80px">不支持.${type}格式的在线预览，请下载后预览或转换为支持的格式</div>
-<div style="text-align: center">支持docx, xlsx, pptx, pdf, ofd 以及纯文本格式和各种图片格式的在线预览</div>`
+      target.innerHTML = `<div id="error-tip" style="text-align: center; margin-top: 80px; line-height: 40px;">不支持.${type}格式的在线预览，请下载后预览或转换为支持的格式</div>
+<div style="text-align: center;line-height: 40px;">支持docx, xlsx, pptx, pdf, ofd 以及纯文本格式和各种图片格式的在线预览</div>`
       return VueWrapper(target)
     }
   }
diff --git a/src/utils/index.js b/src/utils/index.js
index c5e1ad6..e806a38 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -461,3 +461,4 @@ export function saveByteArray(fileName, byte) {
   link.download = fileName
   link.click()
 }
+
diff --git a/src/utils/waterMark.js b/src/utils/waterMark.js
index c321bd8..279eb86 100644
--- a/src/utils/waterMark.js
+++ b/src/utils/waterMark.js
@@ -5,15 +5,15 @@ export const watermark = (settings, className, type) => {
     watermark_txt: settings.watermark_txt,
     watermark_x: 20, // 水印起始位置x轴坐标
     watermark_y: 10, // 水印起始位置Y轴坐标
-    watermark_rows: 10, // 水印行数
+    watermark_rows: 6, // 水印行数
     watermark_cols: 10, // 水印列数
-    watermark_x_space: 50, // 水印x轴间隔
-    watermark_y_space: 100, // 水印y轴间隔
+    watermark_x_space: 100, // 水印x轴间隔
+    watermark_y_space: 140, // 水印y轴间隔
     watermark_color: settings.watermark_color, // 水印字体颜色
     watermark_alpha: settings.watermark_alpha, // 水印透明度
     watermark_fontsize: settings.watermark_fontsize || '15px', // 水印字体大小
     watermark_font: '微软雅黑', // 水印字体
-    watermark_width: 130, // 水印宽度
+    watermark_width: 200, // 水印宽度
     watermark_height: 40, // 水印长度
     watermark_angle: 15, // 水印倾斜度数
     watermark_position: settings.watermark_position || 'absolute'
diff --git a/src/vendors/image/ImageViewer.vue b/src/vendors/image/ImageViewer.vue
index 066e400..a763807 100644
--- a/src/vendors/image/ImageViewer.vue
+++ b/src/vendors/image/ImageViewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <viewer :images="images" style="height: 800px;">
+  <viewer :images="images" style="height: calc(100vh - 76px);">
     <img v-for="item in images" :key="item.index" alt="图片" :src="item.src" class="image">
   </viewer>
 </template>
diff --git a/src/vendors/ofd/OfdView.vue b/src/vendors/ofd/OfdView.vue
index 4c8bcc6..f008646 100644
--- a/src/vendors/ofd/OfdView.vue
+++ b/src/vendors/ofd/OfdView.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="ofd_view">
-    <el-header>
+    <el-header style="position: fixed; top: 72px; left: 300px; width: calc(100vw - 300px); display: flex; justify-content: space-between; z-index: 999;">
       <div style="display: flex;">
-        <div class="upload" @click="uploadFile">
+        <!-- <div class="upload" @click="uploadFile">
           <div class="upload_title">打开OFD</div>
           <input
             ref="file"
@@ -11,16 +11,16 @@
             accept=".ofd"
             @change="fileChanged"
           >
-        </div>
+        </div> -->
         <div class="scale-icon" @click="firstPage">
           <i class="el-icon-d-arrow-left" />
         </div>
         <div class="scale-icon" style="font-size: 18px;" @click="prePage">
           <i class="el-icon-arrow-left" />
         </div>
-        <div class="page-input" style="width: 80px;">
+        <div class="page-input" style="display:flex; justify-content: flex-start; width: 110px;">
           <el-input v-model="pageIndex" @input="changePage" />
-          /{{ pageCount }}
+          <span style="margin-left: 8px; width: 40px;"> / {{ pageCount }}</span>
         </div>
         <div class="scale-icon" style="font-size: 18px" @click="nextPage">
           <i class="el-icon-arrow-right" />
@@ -393,9 +393,10 @@ export default {
       border-radius: 3px;
 
     }
-    .ofd_main {
+  .ofd_main {
     width: 100%;
     height: calc(100% - 40px);
+    margin-top: 40px;
     overflow: auto;
     background: #ededf0;
 
diff --git a/src/vendors/pdf/PdfView.vue b/src/vendors/pdf/PdfView.vue
index 98de268..d3339f8 100644
--- a/src/vendors/pdf/PdfView.vue
+++ b/src/vendors/pdf/PdfView.vue
@@ -3,7 +3,7 @@
     <div class="pdf_down">
       <div class="pdf_set_left" @click="scaleD()">➕</div>
       <div class="pdf_set_middle" @click="scaleX()">➖</div>
-      <button @click="downFile">保存并下载pdf</button>
+      <!-- <button @click="downFile">保存并下载pdf</button> -->
       <!-- <div class="pdf-pre" @click="prePage">上一页</div>
       <div class="pdf-next" @click="nextPage">下一页</div> -->
     </div>
@@ -69,7 +69,7 @@ export default {
     },
     scaleX() {
       // 缩小
-      const min = 1.0
+      const min = 0.3
       if (this.pdf_scale <= min) {
         return
       }
diff --git a/src/vendors/text/CodeViewer.vue b/src/vendors/text/CodeViewer.vue
index 0dfbd36..26afc73 100644
--- a/src/vendors/text/CodeViewer.vue
+++ b/src/vendors/text/CodeViewer.vue
@@ -20,12 +20,12 @@ export default {
 .code-area {
   display: block;
   margin: 0 auto;
-  font-size: 12px;
-  width: 1000px;
+  font-size: 14px;
+  width: 90%;
   min-height: 500px;
-  background: #1f1f1f;
+  background: #fff;
   word-break: break-word;
   white-space: break-spaces;
-  color: #5af117
+  color: #000
 }
 </style>
diff --git a/src/vendors/xlsx/Table.vue b/src/vendors/xlsx/Table.vue
index 6abf0af..59eb6d4 100644
--- a/src/vendors/xlsx/Table.vue
+++ b/src/vendors/xlsx/Table.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <vue-office-excel
-      class="docx-calss"
+      class="docx-class"
       :src="buffer"
       @rendered="renderedHandler"
     />
@@ -359,8 +359,8 @@ export default {
 </style>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.docx-calss {
-  height: calc(100vh - 55px);
+.docx-class {
+  height: calc(100vh - 76px);
 }
 /* .sheet-btn.active {
   background-color: aquamarine;
diff --git a/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue b/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
index 08ea534..506be98 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
@@ -67,7 +67,7 @@
       <el-table-column v-if="!isUploadDetail && !parentsData.isRecycle" label="操作" min-width="80" align="center">
         <template slot-scope="scope">
           <div class="handle-btn">
-            <el-button class="iconfont icon-sulan" @click="toPreview" />
+            <el-button class="iconfont icon-sulan" @click="toPreview(scope.row)" />
             <el-button class="iconfont icon-xiazai" @click="downloadFile(scope.row)" />
             <!-- <el-button class="iconfont icon-dayin" /> -->
           </div>
@@ -277,7 +277,7 @@ export default {
         this.tableData = data.returnlist
       })
     },
-    toPreview() {
+    toPreview(row) {
       const routeData = this.$router.resolve({
         path: '/preview',
         query: {
@@ -285,6 +285,7 @@ export default {
         }})
       window.open(routeData.href, '_blank')
       localStorage.setItem('fileTables', JSON.stringify(this.tableData))
+      localStorage.setItem('fileCurrent', JSON.stringify(row))
     },
     // 下载附件
     downloadFile(row) {
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 698a4cf..70436c5 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="preview-wrapper">
-    <!-- border-bottom: 1px solid #edeff3; -->
     <div class="collect-header" style="justify-content: flex-start; border-top: none; ">
       <h4 class="is-file" style="flex:none; width: 120px;">原文</h4>
       <span style="font-size: 12px; flex: 1; line-height: 42px;">所属文件：{{ parentArchiveNo }}</span>
@@ -28,40 +27,32 @@
       <div class="content-list">
         <h4 class="arc-title">原文列表</h4>
         <ul v-if="allFileTables.length!==0" class="file-list">
-          <li v-for="(item,index) in allFileTables" :key="index">
+          <li v-for="(item,index) in allFileTables" :key="index" :class="{'active-file': item.id == fileCurrent.id}" @click="selectFile(item)">
             <span>{{ item.file_name }}</span>
             <i class="iconfont icon-attachment" />
           </li>
         </ul>
         <el-empty v-else :image-size="100" />
       </div>
-      <div v-loading="loading" class="content-right">
-        <!-- <div v-show="loading" class="well loading">
-          正在加载中，请耐心等待...
-        </div> -->
+      <div v-loading="loading" element-loading-text="文件加载中" class="content-right" :style="{overflowY : !loading ? 'auto' : 'hidden'}">
         <div id="printArea" ref="output" class="well-box" />
-        <!-- <vue-office-docx src="http://192.168.99.67:11100/downloadFile/category/AE8B188F0C0314F9BE31B8/82FBCAE96CBC9F50809838/bc3e5591-d600-4121-a977-83d9e06696cb.docx" style="height: 100%; margin: 0; padding: 0" /> -->
+        <div class="water-mask" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-// http://192.168.99.67:11100/downloadFile/category/0E02F5F5244F99BAD237ED/7139F9C7A268FDA705C7B7/4704A9AF804943CA71A4A4/96A2FA10D76B60DEF43066.png
-
+import { FetchBase64ByFileId } from '@/api/archivesManage/library'
 import { getExtend, readBuffer, render } from '@/components/util'
 import { parse } from 'qs'
-// import { timeFormate } from '@/utils/index'
 import { watermark } from '@/utils/waterMark'
 import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
 import printJS from 'print-js'
 
-// import VueOfficeDocx from '@vue-office/docx'
-
 export default {
   name: 'Preview',
   components: {
-    // VueOfficeDocx
   },
   props: {
     msg: {
@@ -105,7 +96,9 @@ export default {
       watermarkInfo: null,
       timer: null,
       parentArchiveNo: null,
-      allFileTables: []
+      allFileTables: [],
+      toFile: null,
+      fileCurrent: null
     }
   },
   created() {
@@ -130,8 +123,51 @@ export default {
     if (localStorage.getItem('fileTables')) {
       this.allFileTables = JSON.parse(localStorage.getItem('fileTables'))
     }
+
+    if (localStorage.getItem('fileCurrent')) {
+      this.fileCurrent = JSON.parse(localStorage.getItem('fileCurrent'))
+    }
+    console.log('this.fileCurrent', this.fileCurrent)
+    this.get()
   },
   methods: {
+    selectFile(item) {
+      this.fileCurrent = item
+      this.get()
+    },
+    get() {
+      this.loading = true
+      const params = {
+        'fileId': this.fileCurrent ? this.fileCurrent.id : this.allFileTables[0].id
+      }
+      FetchBase64ByFileId(params).then(res => {
+        console.log('fffff', res)
+        var base64String = res
+        var fileName = this.fileCurrent && this.fileCurrent.file_name
+        var mimeType = this.fileCurrent && this.fileCurrent.file_type
+        this.toFile = this.base64ToFile(base64String, fileName, mimeType)
+        console.log(this.toFile)
+        if (this.toFile) {
+          this.handleChange()
+        }
+      })
+    },
+    base64ToFile(base64String, fileName, mimeType) {
+      var byteCharacters = atob(base64String)
+      var byteArrays = []
+      for (var offset = 0; offset < byteCharacters.length; offset += 512) {
+        var slice = byteCharacters.slice(offset, offset + 512)
+        var byteNumbers = new Array(slice.length)
+        for (var i = 0; i < slice.length; i++) {
+          byteNumbers[i] = slice.charCodeAt(i)
+        }
+        var byteArray = new Uint8Array(byteNumbers)
+        byteArrays.push(byteArray)
+      }
+      var file = new Blob(byteArrays, { type: mimeType })
+      file.name = fileName
+      return file
+    },
     toImg() { // 转图片打印
       html2canvas(this.$refs.output, {
         backgroundColor: null,
@@ -150,27 +186,30 @@ export default {
       })
     },
     async handleChange(e) {
-      this.loading = true
       try {
         clearTimeout(this.timer)
-        const [file] = e.target.files
+        // const [file] = e.target.files
+        // console.log('file', file)
         const fileReader = new FileReader()
-        fileReader.readAsArrayBuffer(file)
+        fileReader.readAsArrayBuffer(this.toFile)
         console.log('fileReader', fileReader)
         fileReader.onload = () => {
           this.src = fileReader.result
           console.log('fileReader22', fileReader.result)
         }
-        const arrayBuffer = await readBuffer(file)
+        const arrayBuffer = await readBuffer(this.toFile)
 
-        this.last = await this.displayResult(arrayBuffer, file)
+        this.last = await this.displayResult(arrayBuffer, this.toFile)
         this.$nextTick(() => {
           // 取得扩展名
-          const extend = getExtend(file.name)
+          const extend = getExtend(this.toFile.name)
+          console.log('extend', extend)
           // 加水印
           const maskDiv = document.getElementsByClassName('mask_div')
           const imgMaskDiv = document.getElementsByClassName('weterbox')
 
+          console.log(document.getElementById('error-tip'))
+
           if (imgMaskDiv.length === 1) {
             document.getElementsByClassName('water-mask')[0].removeChild(imgMaskDiv[0])
           }
@@ -182,7 +221,7 @@ export default {
           this.watermarkInfo = {
             'id': '9C5384EE889C0A977FC8F6',
             'watermarkType': '0',
-            'watermarkFont': '16',
+            'watermarkFont': '30',
             'transparency': 'rgba(255, 69, 0, 0.45)',
             'context': '安全水印',
             'isEnable': true
@@ -197,6 +236,10 @@ export default {
               watermark_fontsize: this.watermarkInfo.watermarkFont + 'px'
             }, 'water-mask', 'text')
           }
+
+          if (document.getElementById('error-tip')) {
+            document.getElementsByClassName('water-mask')[0].innerHTML = ''
+          }
         })
       } catch (e) {
         console.error(e)
@@ -337,6 +380,10 @@ export default {
         padding: 0 10px 0 20px;
         line-height: 34px;
         cursor:default;
+        &.active-file{
+          background-color: #e8f2ff;
+          color: #0c0e1e;
+        }
         & span{
           display: block;
           margin-right: 4px;
@@ -356,7 +403,7 @@ export default {
     border: 1px solid #edeff3;
     border-top: none;
     overflow: hidden;
-    overflow-y: auto;
+    // overflow-y: auto;
   }
 }
 .well-box{
@@ -365,7 +412,7 @@ export default {
 .water-mask{
   position: fixed;
   left: 300px;
-  top: 55px;
+  top: 100px;
   bottom: 10px;
   right: 10px;
   width:100%;