askbot-dragon 1.7.61-beta → 1.7.63-beta

package/src/components/pagination.vue

@@ -0,0 +1,129 @@
+<template>
+    <div id="pagination">
+        <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="currentChange"
+                :current-page.sync="currentPages"
+                :page-size="pageSize"
+                layout="slot, prev, pager, next"
+                :total="total">
+            <span class="total-class">共 {{total}} 条数据</span>
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "paginationPage",
+        data(){
+            return{
+                currentPages:1
+            }
+        },
+        props:['pageSize','currentPage','total',"isReportForm"],
+        watch:{
+            currentPage: {
+                handler(val){
+                    this.currentPages = val
+                },
+            },
+
+        },
+        mounted() {
+            this.currentPages = this.currentPage
+        },
+        methods:{
+            handleSizeChange(value){
+                this.$emit('handleSizeChange',value)
+            },
+            currentChange(value){
+                this.$emit('currentChange',value)
+            },
+        }
+    }
+</script>
+
+<style scoped lang="less">
+#pagination{
+    .total-class{
+        margin-right: 13px;
+        font-weight: 400;
+    }
+    position: absolute;
+    bottom: 0px;
+    right: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background-color: white;
+    box-shadow: 0px 0px 18px 0px rgba(29, 55, 129, 0.07);
+    border-radius: 5px;
+    /deep/.el-pager{
+        background: #EDF0F6;
+        border-radius: 15px;
+    }
+    /deep/.el-pagination.is-background .btn-next{
+         width: 30px;
+         height: 30px;
+         background: #EDF0F6;
+         border-radius: 50%;
+     }
+    /deep/.el-pagination .btn-next{
+        width: 30px;
+        height: 30px;
+        background: #EDF0F6;
+        border-radius: 50%;
+        padding-left: 0;
+        margin-left:5px ;
+    }
+    /deep/.el-pagination .btn-prev{
+        width: 30px;
+        height: 30px;
+        background: #EDF0F6;
+        border-radius: 50%;
+        padding-right: 0;
+        margin-right:5px ;
+    }
+    /deep/.el-pagination button{
+        padding: 0;
+        min-width: 30px;
+    }
+    /deep/.el-pager li{
+        background: #EDF0F6;
+        height: 30px;
+        min-width: 30px;
+        line-height: 30px;
+        font-size: 12px;
+        color: #717b90;
+    }
+    /deep/.el-pager li:first-child{
+        border-bottom-left-radius: 15px!important;
+        border-top-left-radius: 15px!important;
+    }
+    /deep/.el-pager li:last-child{
+        border-top-right-radius: 15px!important;
+        border-bottom-right-radius: 15px!important;
+    }
+    /deep/.el-pager li.active{
+        width: 30px;
+        height: 30px;
+        min-width: 30px;
+        background: #366AFF;
+        border: 3px solid #A1B9FF;
+        border-radius: 50%;
+        line-height: 24px;
+        color: white;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
+        background: #366AFF;
+
+    }
+    /deep/.el-pagination button:disabled{
+      i{
+        cursor: no-drop;
+      }
+    }
+}
+</style>

package/src/components/pdfPosition.vue

@@ -52,10 +52,11 @@ if (pdfjsLib) {
     // 'pdfjs-dist/build/pdf.worker';
 }
 const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
+const CSS_UNITS = 96.0 / 72.0
 // import { zoomElement } from '../assets/js/hammer'
 export default {
     name: 'pdfView',
-    props: ['tagIds', 'isMessageRecord','textWatermarkStr'],
+    props: ['tagIds', 'isMessageRecord','fileName', "knowledgeItem",'textWatermarkStr'],
     data () {
         return {
             url: '',
@@ -102,6 +103,7 @@ export default {
             },
             isTouchMoved: false,
             transformSalce: null,
+            defaultTransform:0.8,
             isPC: false,
             handScale: 'auto',
             scaleList: [],
@@ -262,12 +264,12 @@ export default {
             const { pdfPage, pageNo, dom } = page;
             // dom 元素已存在，无须重新渲染，直接返回
             if ((dom && dom.children.length != 0) || page.loading) {
-                return;
+              return;
             }
             page.loading = true
             const viewport = pdfPage.getViewport({
-                scale: this.scale,
-                rotation: this.rotation,
+              scale: this.scale,
+              rotation: this.rotation,
             });
             // 创建新的canvas
             const canvas = document.createElement('canvas');
@@ -316,32 +318,34 @@ export default {
                             rectdom.style.top = 0
                             rectdom.style.left = 0
                             rectdom.classList.add('rectdom')
-                            for (let index = 0; index < lines.length; index++) {
+                            if (lines){
+                              for (let index = 0; index < lines.length; index++) {
                                 if (!/^\s+$/g.test(lines[index].content)) {
-                                    let postionArr = lines[index].location
-                                    let div = document.createElement('div')
-                                    div.style.position = 'absolute';
-                                    div.style.left = postionArr[0] * this.scale + 'px',
-                                    // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
-                                    div.style.top = postionArr[1] * this.scale + 'px'
-                                    div.style.height = postionArr[3] * this.scale + 'px';
-                                    div.style.width = postionArr[2] * this.scale + 'px'
-                                    div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
-                                    div.classList.add('lineHeight')
-                                    rectdom.appendChild(div)
-                                    if (index == 0 && j == 0) {
-                                        if (this.transformSalce !== null) {
-                                            rectdomTop = postionArr[1] * this.scale * this.transformSalce
-                                        } else {
-                                            rectdomTop = postionArr[1] * this.scale
-                                        }
-                                        // if(this.isPC) {
-                                        //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
-                                        // }
+                                  let postionArr = lines[index].location
+                                  let div = document.createElement('div')
+                                  div.style.position = 'absolute';
+                                  div.style.left = postionArr[0] * this.scale + 'px',
+                                      // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
+                                      div.style.top = postionArr[1] * this.scale + 'px'
+                                  div.style.height = postionArr[3] * this.scale + 'px';
+                                  div.style.width = postionArr[2] * this.scale + 'px'
+                                  div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+                                  div.classList.add('lineHeight')
+                                  rectdom.appendChild(div)
+                                  if (index == 0 && j == 0) {
+                                    if (this.transformSalce !== null) {
+                                      rectdomTop = postionArr[1] * this.scale * this.transformSalce
+                                    } else {
+                                      rectdomTop = postionArr[1] * this.scale
                                     }
+                                    // if(this.isPC) {
+                                    //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
+                                    // }
+                                  }
                                 }
+                              }
                             }
-                            if (rectdom.children.length > 0) {
+                            if (rectdom.children && rectdom.children.length > 0) {
                                 pageDom.appendChild(rectdom)
                             }
                         }
@@ -358,6 +362,10 @@ export default {
                 page.dom = await pageDom;
                 page.loading = false
                 this.contentView.appendChild(pageDom);
+                let pdf_view = document.getElementsByClassName('pdf_view');
+                if (pdf_view && pdf_view[0]){
+                  pdf_view[0].style.backgroundImage = 'none'
+                }
                 if (this.transformSalce !== null) {
                     this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
                 }
@@ -424,7 +432,7 @@ export default {
                 startNum = Math.ceil(scrollTop / (that.pageSize.height + that.PAGE_INTVERVAL))
                 endNum = startNum + Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
             }
-            for (let pageIndex = startNum; pageIndex < endNum; pageIndex++) {
+            for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
                 if (pageIndex > 0 && pageIndex <= that.pages.length) {
                     that.loadPdfData(pageIndex)
                 }
@@ -668,14 +676,20 @@ export default {
                     // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
                     this.currentPageAllLine[i].allLines.push({
                         pageCount: index,
-                        lines: item.extractInfo.lines
+                        lines: item.extractInfo.lines ? item.extractInfo.lines  : [{
+                            content:"测试内容填充，不必理会",
+                            location:item.extractInfo.location
+                        }]
                     })
                 } else {
                     this.currentPageAllLine.push({
                         page: item.page,
                         allLines: [{
                             pageCount: index,
-                            lines: item.extractInfo.lines
+                            lines: item.extractInfo.lines ? item.extractInfo.lines : [{
+                                content:"测试内容填充，不必理会",
+                                location:item.extractInfo.location
+                            }]
                         }],
                     })
                 }
@@ -817,6 +831,164 @@ export default {
             this.contentView.style.transform = 'scale(' + this.transformSalce + ')';
             // this.getpdfResloutePage(this.cachePdf[0])
         },
+        //添加水印
+        watermark() {
+          //默认设置
+          var defaultSettings = {
+            watermark_txt:"",
+            watermark_x: 0,//水印起始位置x轴坐标
+            watermark_y: 0,//水印起始位置Y轴坐标
+            watermark_rows: 0,//水印行数
+            watermark_cols: 0,//水印列数
+            watermark_x_space: 40,//水印x轴间隔
+            watermark_y_space: 60,//水印y轴间隔
+            watermark_color: 'black',//水印字体颜色
+            watermark_alpha: .3,//水印透明度
+            watermark_fontsize: 12,//水印字体大小
+            watermark_font: '微软雅黑',//水印字体
+            watermark_width: 100,//水印宽度
+            watermark_height: 80,//水印长度
+            watermark_angle: 20,//水印倾斜度数***
+            visitorWatermark_txt:""
+          };
+          if(this.knowledgeItem.textWatermarkValue){
+            defaultSettings.watermark_txt = this.knowledgeItem.textWatermarkValue;
+          }
+          if (this.knowledgeItem.visitorWatermarkValue){
+            defaultSettings.visitorWatermark_txt = this.knowledgeItem.visitorWatermarkValue
+          }
+          //采用配置项替换默认值，作用类似jquery.extend
+          if (arguments.length === 1 && typeof arguments[0] === "object") {
+            console.log("arguments = " + JSON.stringify(arguments[0]));
+            // 获取参数配置
+            var src = arguments[0];
+            for (let key in src) {
+              if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
+                continue;
+              else if (src[key])
+                defaultSettings[key] = src[key];
+            }
+          }
+          var oTemp = document.createDocumentFragment();
+          //获取页面最大宽度
+          console.debug('pdf_view',document.getElementById('pdf_view'))
+          let scrollWidth = document.getElementById('pdf_view').scrollWidth;
+          let clientWidth = document.getElementById('pdf_view').clientWidth;
+          var page_width = Math.max(scrollWidth, clientWidth);
+
+          var cutWidth = page_width * 0.0150;
+
+          page_width = page_width - cutWidth;
+
+          //获取页面最大高度
+          let height = parseInt(this.totalPageCount * this.pageSize.height)
+          var page_height = Math.max(document.getElementById('pdf_container_view').scrollHeight,height);
+
+          console.debug('page_height',page_height,this.totalPageCount * this.pageSize.height);
+
+          // var page_height = document.body.scrollHeight+document.body.scrollTop;
+
+          //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
+
+          if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings
+              .watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space *
+              (defaultSettings.watermark_cols - 1)) > page_width)) {
+            defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings
+                .watermark_x_space) / (defaultSettings.watermark_width + defaultSettings
+                .watermark_x_space));
+            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x -
+                defaultSettings
+                    .watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
+          }
+
+          //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
+
+          if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings
+
+              .watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (
+
+              defaultSettings.watermark_rows - 1)) > page_height)) {
+
+            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height -
+
+                defaultSettings
+
+                    .watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
+
+            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) -
+
+                defaultSettings
+
+                    .watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
+
+          }
+
+          var x;
+
+          var y;
+
+          for (var i = 0; i < defaultSettings.watermark_rows; i++) {
+            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
+            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
+              x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
+
+              var mask_div = document.createElement('div');
+              mask_div.id = 'mask_div' + i + j;
+              mask_div.className = 'mask_div';
+
+              //注意看这里加了图片水印
+              mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
+              mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
+              mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
+              mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
+              mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
+              mask_div.style.visibility = "";
+              mask_div.style.position = "absolute";
+              //奇偶行错开，这样水印就不对齐，显的不呆板
+              console.debug('x',x)
+              if (i % 2 != 0) {
+                mask_div.style.left = x + 'px';
+                if (j % 2 != 0 && this.knowledgeItem.visitorWatermarkValue){
+                  mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
+                } else {
+                  if (!this.knowledgeItem.textWatermarkValue){
+                    mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
+                  } else {
+                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
+                  }
+                }
+              } else {
+                mask_div.style.left = x + 'px';
+                if (j % 2 != 0 && this.knowledgeItem.textWatermarkValue){
+                  mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
+                } else {
+                  if (!this.knowledgeItem.visitorWatermarkValue){
+                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
+                  } else {
+                    mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
+                  }
+                }
+              }
+
+              mask_div.style.top = y + 'px';
+              mask_div.style.overflow = "hidden";
+              mask_div.style.zIndex = "9999";
+              mask_div.style.pointerEvents = 'none'; //让水印不遮挡页面的点击事件
+              mask_div.style.opacity = defaultSettings.watermark_alpha;
+              mask_div.style.fontSize = defaultSettings.watermark_fontsize;
+              mask_div.style.fontFamily = defaultSettings.watermark_font;
+              mask_div.style.color = defaultSettings.watermark_color;
+              mask_div.style.textAlign = "center";
+              mask_div.style.width = defaultSettings.watermark_width + 'px';
+              mask_div.style.height = defaultSettings.watermark_height + 'px';
+              mask_div.style.display = "block";
+              oTemp.appendChild(mask_div);
+            }
+          }
+          let pageDom = document.getElementById('pdf_container_view')
+          pageDom.appendChild(oTemp);
+
+      },
     },
     computed: {
         perviewUrl () {
@@ -844,16 +1016,18 @@ export default {
                 if (value && value.length) {
                     // 在 pdf_view 下创建 所有canvs的容器
                     this.contentView = document.createElement('div')
+                    this.contentView.setAttribute('id','contentView')
                     this.contentView.style.transformOrigin = '0px 0px 0px'
                     this.contentView.setAttribute('id','contentView');
-                    this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res => {
+
+                  this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res => {
                         // res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"64590ce1eb1320043401cc90","knowledgeId":"64590cd5017b461d67e282e1","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":2,"total":5,"pageHeight":841.8898,"pageWidth":595.30396,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/10/53/20/64590ce0eb1320043401cc7b/2.pdf","extractInfo":{"location":[89.32981,638.1907,415.15512,98.63251],"content":":北京地铁 13\r号线 :藤黄\r色 :西直门站—\r东直门站 :17 :41.\r5 :6\r准\rB :2002年\r09月\r28日 ","lines":[{"content":":北京地铁 13\r号线 ","location":[89.32981,638.1907,99.44599,98.63251]},{"content":":藤黄\r色 ","location":[188.7758,638.1907,46.79959,98.63251]},{"content":":西直门站—\r东直门站 ","location":[235.5754,638.1907,86.09996,98.63251]},{"content":":17 ","location":[321.67535,638.1907,36.200012,98.63251]},{"content":":41.\r5 ","location":[357.87537,638.1907,39.400696,98.63251]},{"content":":6\r准\rB ","location":[397.27606,638.1907,41.099,98.63251]},{"content":":2002年\r09月\r28日 ","location":[438.37506,638.1907,66.10986,98.63251]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"6475eab868110215ab821a80","knowledgeId":"6475e7eac724c54c46cbfa2d","mainId":"5ecf2fcd704541149201ab9c1c31162d","page":0,"total":1,"pageHeight":0.0,"pageWidth":0.0,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/5ecf2fcd704541149201ab9c1c31162d/2023/05/30/08/23/20/6475eab63339db423f26b196/0.html","extractInfo":{"location":null,"content":"产品:系统配置,产品型号:存储,VX30:4G+16G,VX50:16G+256G","lines":null,"tagId":"6475eab868110215ab821a80"}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"6475e9393339db423f26af01","knowledgeId":"6475e44fc724c54c46cbfa21","mainId":"5ecf2fcd704541149201ab9c1c31162d","page":2,"total":2,"pageHeight":510.25,"pageWidth":1559.05,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/5ecf2fcd704541149201ab9c1c31162d/2023/05/30/08/00/29/6475e55d3339db423f26a9b8/2.pdf","extractInfo":{"location":[327.70532,288.0498,414.9734,12.241608],"content":"三、指示灯状态说明1.白色常亮：开机/开机中2.红色常亮：待机3.白色呼吸：息屏4.红色闪烁：升级1.LAN:通过网线连接到主机的Camera端口2.电源开关:电源切换开关","lines":[{"content":"三、指示灯状态说明","location":[634.3203,288.0498,108.3584,12.0]},{"content":"1.白色常亮：开机/开机中","location":[634.3203,320.08978,108.23407,9.0]},{"content":"2.红色常亮：待机","location":[634.3204,341.3298,78.597046,9.0]},{"content":"3.白色呼吸：息屏","location":[634.32043,362.45282,78.597046,9.0]},{"content":"4.红色闪烁：升级","location":[634.3205,383.6928,78.597046,9.0]},{"content":"1.LAN:通过网线连接到主机的","location":[327.70535,291.2914,144.35995,9.0]},{"content":"Camera端口","location":[327.70532,306.88843,55.322998,9.0]},{"content":"2.电源开关:电源切换开关","location":[482.74832,291.2914,105.36301,9.0]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // if(value.length === 1) {
-                        //     this.$refs.pdfView.style.height = 'calc(100% - 50px)' 
+                        //     this.$refs.pdfView.style.height = 'calc(100% - 50px)'
                         // }
                         // res.data = {
                         //     "data": [
@@ -1028,18 +1202,23 @@ export default {
                                             "Content-Type": "application/json",
                                         },
                                     }).then(res => {
-                                        // 使用原声请求方式 axios会带有不需要的请求头 
+                                        // 使用原声请求方式 axios会带有不需要的请求头
                                         let xhr = new XMLHttpRequest();
                                         xhr.open('GET', res.data || res.bodyText, true);
                                         // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                                         xhr.onload = ({ currentTarget }) => {
                                             // 请求完成
                                             if (currentTarget.status === 200) {   // 返回200
+                                                let pdf_view = document.getElementsByClassName('pdf_view');
+                                                if (pdf_view && pdf_view[0]){
+                                                  pdf_view[0].style.backgroundImage = 'none'
+                                                }
                                                 this.contentView.innerHTML = currentTarget.response
                                                 this.contentView.style.padding = '10px'
                                                 // this.contentView.style.position = 'relative'
                                                 this.$refs.pdfView.style.backgroundColor = '#FFFFFF'
                                                 this.$refs.pdfView.appendChild(this.contentView)
+
                                                 let allTr = Array.from(this.$refs.pdfView.getElementsByTagName('tr'))
                                                 this.allTr = []
                                                 for (let index = 0; index < allTr.length; index++) {
@@ -1115,6 +1294,7 @@ export default {
     // height: calc(100% - 110px);
     height: 100%;
     overflow: auto;
+    //overflow-y: scroll;
     background-color: #f5f7fb;
     // margin-bottom: 60px;
     box-sizing: border-box;
@@ -1340,4 +1520,4 @@ export default {
     100% {
         background: rgba(255, 136, 0, 0.3);
     }
-}</style>
+}</style>

package/src/components/preview/docView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="docView">
+    <div class="docHtml"
+         ref="docHtml"
+         v-html="html"
+         @click="selectDiv"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "docView",
+  data(){
+    return{
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+      html:"",
+    }
+  },
+  props:{
+    html_result:{
+      type:String,
+      default:""
+    },
+    split_paragraphs:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    fileSuffix:{
+      type:String,
+      default:""
+    }
+  },
+  methods:{
+    selectDiv(e){
+      this.$emit('selectDiv',e)
+    },
+    getHtml(){
+      // let url = 'https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/123/2024/12/09/14/18/17/123/%E5%85%AC%E5%8F%B8%E5%91%98%E5%B7%A5%E6%89%8B%E5%86%8C_1733725097.html'
+      let url = this.html_result
+      this.$http.get(url).then(res => {
+        this.html = res.data;
+        let drawer = document.getElementById('drawer_content_pre')
+        if (drawer){
+          drawer.style.backgroundImage = 'none';
+          drawer.style.overflowX = 'hidden'
+        }
+        this.$nextTick(() => {
+          this.setColor()
+        })
+      })
+    },
+    setColor(){
+      this.split_paragraphs.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            let dom = document.getElementById(items.paragraph_id);
+            if (this.fileSuffix === 'TXT'){
+              const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${items.paragraph_id}"]`);
+              paragraphs.forEach(paragraph => {
+                paragraph.style.background = this.colors[colorIndex]
+              })
+            } else if (dom){
+              dom.style.background = this.colors[colorIndex];
+            }
+          })
+          let newOriginal = item.original_paragraph.filter(items => !items.type)
+          let dom = document.getElementById(newOriginal[newOriginal.length - 1].paragraph_id);
+          if (dom){
+            dom.style.marginBottom = '8px';
+          }
+        }
+        if (item.tableId){
+          let dom = document.getElementById(item.tableId);
+          if (dom){
+            dom.style.backgroundColor = this.colors[colorIndex]
+          }
+        }
+      })
+      setTimeout(() => {
+        this.$parent.scrollToParagraph('first')
+      },500)
+    },
+  },
+  watch:{
+    html_result:{
+      handler(){
+        if (this.html_result){
+          this.getHtml();
+        }
+      },
+      immediate:true
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.docView{
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+  div{
+    position: relative;
+  }
+  /deep/img{
+    max-width: 100%;
+  }
+}
+</style>