askbot-dragon 1.7.43-beta → 1.7.44-beta

package/src/components/pdfPosition.vue

@@ -1,1514 +1,1514 @@
-<template>
-    <div class="pdf_view" id="pdf_view">
-        <div class="change_scale" v-if="isPC">
-            <section @click="changeScale('reduce')">
-                <i class="el-icon-minus"></i>
-            </section>
-            <el-divider direction="vertical"></el-divider>
-            <section @click="changeScale('zoom')">
-                <i class="el-icon-plus"></i>
-            </section>
-            <el-select size="small" v-model="handScale" @change="changeScale" placeholder="请选择">
-                <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-        </div>
-        <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll"  ref="pdfView"></div>
-        <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
-            <div class="prev" @click="prev">上一段</div>
-            <div class="next" @click="next">下一段</div>
-        </div>
-        <div id="pagination" v-if="tagIds.length > 1 && isPC">
-            <el-pagination :current-page="currentPage + 1" @current-change="currentChange" @prev-click="prev"
-                @next-click="next" layout="slot, prev, pager, next" :page-size="1" :total="tagIds.length">
-                <span class="total-class">答案由{{ tagIds.length }}段内容生成</span>
-            </el-pagination>
-        </div>
-    </div>
-</template>
-<script>
-// :style="{
-//     marginBottom: tagIds.length > 1 ? '60px' : '0px',
-//     height: setHeight
-// }"
-import _ from 'lodash'
-import { newInitWaterMark } from "../assets/js/common";
-// import * as pdfjsLib from 'pdfjs-dist'
-// pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
-// import { TextLayerBuilder }  from "pdfjs-dist/web/pdf_viewer";
-// EventBus pdf_viewer 支持绑定自定义事件，一版不做
-// import 'pdfjs-dist/web/pdf_viewer.css'
-/* eslint-disable */
-const pdfjsLib = window['pdfjsLib']
-if (pdfjsLib) {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
-    // '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','fileName', "knowledgeItem",'textWatermarkStr'],
-    data () {
-        return {
-            url: '',
-            pages: [],
-            pageLoadStatus: {
-                WAIT: 0,
-                LOADED: 1,
-            },
-            scale: 1,
-            rotation: 0,
-            pageSize: {},
-            PAGE_INTVERVAL: 15,
-            SLICE_COUNT: 5,
-            contentView: null,
-            fisrtLoad: true,
-            TextLayerBuilder: null,
-            totalPageCount: 0,
-            identifyTextPostion: {
-                top: 0,
-                left: 0,
-                width: 100,
-                height: 0,
-                page: 1,
-                pageHeight: 0,
-                pageWidth: 0,
-                extractInfo: {},
-                currentPageAllLine: []
-            },
-            currentPageAllLine: [],
-            pdfUrl: '',
-            cachePdf: [],
-            newViewer: null,
-            currentPage: 0,
-            changetoolbar: false,
-            allTr: [],
-            preViewType: 'pdf',
-            displacement: {
-                pageX: 0,
-                pageY: 0,
-                moveable: false,
-                pageX2: 0,
-                pageY2: 0,
-                originScale: 1,
-            },
-            isTouchMoved: false,
-            transformSalce: null,
-            defaultTransform:0.8,
-            isPC: false,
-            handScale: 'auto',
-            scaleList: [
-                {
-                    label: '自动缩放',
-                    value: 'auto'
-                },
-                {
-                    label: '实际比例',
-                    value: 'reality'
-                },
-                {
-                    label: '100%',
-                    value: 1
-                },
-                {
-                    label: '120%',
-                    value: 1.2
-                },
-                {
-                    label: '150%',
-                    value: 1.5
-                },
-                {
-                    label: '170%',
-                    value: 1.7
-                }
-                ,
-                {
-                    label: '200%',
-                    value: 2
-                }
-            ],
-            scrollTop: 0,
-            scrollLeft: 0
-        }
-    },
-    methods: {
-        getpdfResloutePage (pdfResloute) {
-            // 根据当前页面宽度设置缩放比例
-            // this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
-            if (this.isMessageRecord) {
-                this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
-            } else {
-                this.scale = 2
-            }
-            // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
-            this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
-            this.initPages(pdfResloute.total)
-            // 定位功能，加载对应页码位置
-            this.loadPdfData(pdfResloute.page)
-        },
-        async loadPdfData (loadPage) {
-            if (this.pages[loadPage - 1] && ((this.pages[loadPage - 1].dom && this.pages[loadPage - 1].dom.children.length > 0) || this.pages[loadPage - 1].loadStatus)) {
-                return
-            } else {
-                if (this.changetoolbar) {
-                    this.$nextTick(() => {
-                        this.renderHighlights()
-                    })
-                    this.changetoolbar = false
-                }
-            }
-            // 记录开始缓存的状态
-            // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
-            // 拿到第一个分片
-            const { startPage, url } = await this.fetchPdfFragment(loadPage);
-            let loadingTask = pdfjsLib.getDocument(url)
-            loadingTask.promise.then(async (pdfDoc) => {
-                // 将已经下载的分片保存到 pages 数组中
-                // for (let i = 0; i < pdfDoc.numPages; i += 1) {
-                //     const pageIndex = startPage + i;
-                //     const page = this.pages[pageIndex - 1];
-                //     // // 不在缓存列表内，重新获取本页pdf
-                //     // if (page.loadStatus !== this.pageLoadStatus.LOADED) {
-
-                //     // } else {
-                //     //     if (this.changetoolbar) {
-                //     //         this.$nextTick(() => {
-                //     //             this.renderHighlights()
-                //     //         })
-                //     //         this.changetoolbar = false
-                //     //     }
-                //     // }
-                // }
-                const page = this.pages[loadPage - 1]
-                await pdfDoc.getPage(1).then(async (pdfPage) => {
-                    this.pages[loadPage - 1].loadStatus = true
-                    this.pages[loadPage - 1].pdfPage = pdfPage;
-                    // 通知可以进行渲染了
-                    await this.startRenderPages(pdfPage, page, loadPage)
-                });
-            });
-        },
-        initPages (totalPage) {
-            // const pages = [];
-            this.totalPageCount = totalPage
-            for (let i = 0; i < totalPage; i += 1) {
-                this.pages.push({
-                    pageNo: i + 1,
-                    loadStatus: false,
-                    pdfPage: null,
-                    dom: null
-                });
-            }
-        },
-        async fetchPdfFragment (pageIndex) {
-            // 置换加签后的文件地址。
-            let obj = {}
-            await this.$http.post(
-                '/knowledge-api/temporary-certificate/or-origin?expired=30',
-                this.pdfUrl + pageIndex + '.pdf',
-                {
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                }).then(async res => {
-                    if (res.bodyText) {
-                        // 最后返回一个 包含这4个参数的对象
-                        obj = await {
-                            "startPage": pageIndex, // 分片的开始页码
-                            "endPage": pageIndex + 5, // 分片结束页码
-                            "totalPage": this.totalPageCount, // pdf 总页数
-                            "url": res.bodyText // 分片内容下载地址
-                        }
-                    }
-                    if (res.data) {
-                        // 最后返回一个 包含这4个参数的对象
-                        obj = await {
-                            "startPage": pageIndex, // 分片的开始页码
-                            "endPage": pageIndex + 5, // 分片结束页码
-                            "totalPage": this.totalPageCount, // pdf 总页数
-                            "url": res.data // 分片内容下载地址
-                        }
-                    }
-                })
-            return obj
-        },
-        startRenderPages (pdfPage, page, pageIndex) {
-            if (Object.keys(this.pageSize).length == 0) {
-                const viewport = pdfPage.getViewport({
-                    scale: this.scale, // 缩放的比例
-                    rotation: this.rotation, // 旋转的角度
-                });
-                // 记录pdf页面高度
-                const pageSize = {
-                    width: viewport.width,
-                    height: viewport.height,
-                }
-                this.pageSize = pageSize
-                // 创建内容绘制区，并设置大小
-                if (this.$refs.pdfView.clientWidth / this.pageSize.width >= 1 || this.isMessageRecord) {
-                    this.contentView.style.width = `${pageSize.width - 10}px`;
-                    this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
-                } else {
-                    this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
-                    this.contentView.style.width = `${pageSize.width * this.transformSalce - 10}px`;
-                    this.contentView.style.height = `${(this.totalPageCount * (pageSize.height * (this.transformSalce) + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
-                }
-                this.contentView.style.margin = '0 auto 0'
-                this.contentView.style.position = 'relative'
-                this.contentView.style.paddingBottom = '60px'
-                // contentView.style.overflowY = 'auto'
-                this.$refs.pdfView.appendChild(this.contentView);
-                if (this.textWatermarkStr){
-                  newInitWaterMark('pdf_container_view',this.textWatermarkStr)
-                }
-            }
-            this.renderPages(pageIndex)
-        },
-        // 渲染需要展示的页面，不需展示的页码将其清除
-        renderPages (pageIndex) {
-            const pagesToRender = this.getRenderScope(pageIndex);
-            for (const i of this.pages) {
-                if (pagesToRender.some(p => { return p.pageNo == i.pageNo })) {
-                    if (i.loadStatus === true) {
-                        this.renderPageContent(i, i.pageNo)
-                    } else {
-                        this.renderPageLoading(i, i.pageNo)
-                    }
-                } else {
-                    this.clearPage(i);
-                }
-            }
-
-        },
-        async renderPageContent (page, pageIndex) {
-            const { pdfPage, pageNo, dom } = page;
-            // dom 元素已存在，无须重新渲染，直接返回
-            if ((dom && dom.children.length != 0) || page.loading) {
-              return;
-            }
-            page.loading = true
-            const viewport = pdfPage.getViewport({
-              scale: this.scale,
-              rotation: this.rotation,
-            });
-            // 创建新的canvas
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            // canvas.getContext('2d');
-            canvas.height = this.pageSize.height;
-            canvas.width = this.pageSize.width;
-            canvas.style.position = 'relative'
-            canvas.style.top = -3 + 'px'
-            // 创建渲染的dom
-            const pageDom = document.createElement('div');
-            pageDom.style.position = 'absolute';
-            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
-            pageDom.style.width = `${this.pageSize.width}px`;
-            pageDom.style.height = `${this.pageSize.height}px`;
-            pageDom.setAttribute('data-id', 'page' + pageNo)
-            pageDom.appendChild(canvas);
-            // 渲染内容
-            let renderContext = {
-                canvasContext: context,
-                viewport: viewport,
-            }
-            await pdfPage.render(renderContext).promise.then(() => {
-                return pdfPage.getTextContent()
-            }).then(async (textContent) => {
-                const textLayerDiv = document.createElement('div');
-                textLayerDiv.setAttribute('class', 'textLayer');
-                // 将文本图层div添加至每页pdf的div中
-                // 创建新的TextLayerBuilder实例
-                let textLayer = new TextLayerBuilder({
-                    textLayerDiv: textLayerDiv,
-                    pageIndex: pdfPage._pageIndex,
-                    viewport: viewport,
-                });
-                let findPage = this.currentPageAllLine.find(l => { return l.page == pageIndex })
-                let rectdomTop = 0
-                if (findPage) {
-                    let AllLines = findPage.allLines
-                    // setTimeout(() => {
-                    if (AllLines.length > 0) {
-                        for (let j = 0; j < AllLines.length; j++) {
-                            let lines = AllLines[j].lines
-                            let rectdom = document.createElement('div')
-                            rectdom.setAttribute('react-count', AllLines[j].pageCount);
-                            rectdom.style.position = 'absolute';
-                            rectdom.style.top = 0
-                            rectdom.style.left = 0
-                            rectdom.classList.add('rectdom')
-                            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
-                                    // }
-                                  }
-                                }
-                              }
-                            }
-                            if (rectdom.children && rectdom.children.length > 0) {
-                                pageDom.appendChild(rectdom)
-                            }
-                        }
-                    }
-                }
-                textLayer.setTextContent(textContent);
-                textLayer.render()
-                pageDom.appendChild(textLayerDiv);
-
-                let backgroundDom = document.getElementById('backgroundLoad' + pageNo)
-                if (backgroundDom) {
-                    this.contentView.removeChild(backgroundDom);
-                }
-                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})`
-                }
-                if (this.changetoolbar) {
-                    setTimeout(() => {
-                        this.renderHighlights()
-                        this.changetoolbar = false
-                    }, 500)
-                }
-                if (this.fisrtLoad) {
-                    setTimeout(() => {
-                        let pageoffsetHeight = 0
-                        if (this.transformSalce !== null) {
-                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce
-                        } else {
-                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL)
-                        }
-                        if (this.$refs.pdfView.clientHeight - pageoffsetHeight > 0 && pageIndex == 1) {
-                            const height = this.$refs.pdfView.clientHeight;
-                            let startNum = 0
-                            let endNum = 0
-                            if (this.transformSalce !== null) {
-                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
-                                endNum = startNum + Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
-                            } else {
-                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / (this.pageSize.height + this.PAGE_INTVERVAL))
-                                endNum = startNum + Math.ceil(height / (this.pageSize.height + this.PAGE_INTVERVAL))
-
-                            }
-                            for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
-                                if (pageIndex > 0 && pageIndex <= this.pages.length) {
-                                    this.loadPdfData(pageIndex)
-                                }
-                            }
-                        }
-                        if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * pageoffsetHeight)) {
-                            this.$refs.pdfView.scrollTop = rectdomTop
-                            this.fisrtLoad = false
-                        } else {
-                            this.$refs.pdfView.scrollTop = `${((pageNo - 1) * pageoffsetHeight) + rectdomTop - this.PAGE_INTVERVAL}`
-                            this.fisrtLoad = false
-                        }
-                        this.renderHighlights()
-                        // zoomElement(this.contentView)
-                    }, 100)
-                }
-            })
-        },
-        // 监听容器的滚动事件，触发 scrollPdf 方法
-        // 这里加了防抖保证不会一次产生过多请求
-        debounceScrollPdf: _.debounce(function (e, that) {
-            if (this.fisrtLoad) {
-                this.fisrtLoad = false
-                return
-            }
-            const scrollTop = e.target.scrollTop;
-            const height = e.target.clientHeight;
-            let startNum = 0
-            let endNum = 0
-            if (this.transformSalce !== null) {
-                startNum = Math.ceil(scrollTop / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
-                endNum = startNum + Math.ceil(height / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
-            } else {
-                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++) {
-                if (pageIndex > 0 && pageIndex <= that.pages.length) {
-                    that.loadPdfData(pageIndex)
-                }
-            }
-        }, 200),
-        directScrolling (e, that) {
-            if (this.fisrtLoad) {
-                this.fisrtLoad = false
-                return
-            }
-            const scrollTop = e.target.scrollTop;
-            const height = e.target.clientHeight;
-            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
-            const pageIndex = scrollTop > 0 ?
-                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
-                1;
-            this.loadPdfData(pageIndex)
-        },
-        pdfScroll (e) {
-            if (this.preViewType !== 'pdf' || this.isTouchMoved) {
-                return
-            }
-            if (this.scrollLeft != e.target.scrollLeft) {
-                this.scrollLeft = e.target.scrollLeft
-            }
-            if (this.scrollTop != e.target.scrollTop) {
-                this.scrollTop = e.target.scrollTop
-                this.debounceScrollPdf(e, this)
-            }
-        },
-        // 分片每次只做一次处理，所以不考虑多片情况
-        loadBefore (pageIndex) {
-            this.loadPdfData(pageIndex)
-        },
-        loadAfter (pageIndex) {
-            this.loadPdfData(pageIndex)
-        },
-        // 首先我们获取到需要渲染的范围
-        // 根据当前的可视范围内的页码，我们前后只保留 8 页
-        getRenderScope (pageIndex) {
-            const pagesToRender = [];
-            let i = pageIndex - 1;
-            let j = pageIndex + 1;
-            // pageIndex - 1 表示当前页码数 对应的下标位置
-            pagesToRender.push(this.pages[pageIndex - 1]);
-            while (pagesToRender.length < 8 && pagesToRender.length < this.pages.length) {
-                if (i > 0) {
-                    pagesToRender.push(this.pages[i - 1]);
-                    i -= 1;
-                }
-                if (pagesToRender.length >= 8) {
-                    break;
-                }
-                if (j <= this.pages.length) {
-                    pagesToRender.push(this.pages[j - 1]);
-                    j += 1;
-                }
-            }
-            // for (let index = 0; index < array.length; index++) {
-            //     const element = array[index];
-
-            // }
-            return pagesToRender;
-        },
-
-        // 清除页面 dom
-        clearPage (page) {
-            if (this.contentView.contains(page.dom) && page.dom) {
-                this.contentView.removeChild(page.dom);
-                page.loadStatus = false
-                page.loading = false
-                page.dom = undefined;
-            }
-        },
-        // 页面正在下载时渲染loading视图
-        renderPageLoading (page) {
-            const { pageNo, dom } = page;
-            if (dom && dom.children.length != 0) {
-                return;
-            }
-            let backgroundDom = document.getElementById('backgroundLoad' + pageNo)
-            if (this.contentView.contains(backgroundDom)) {
-                return
-            }
-            const pageDom = document.createElement('div');
-            pageDom.style.width = `${this.pageSize.width}px`;
-            pageDom.style.height = `${this.pageSize.height}px`;
-            pageDom.style.position = 'absolute';
-            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
-                }px`;
-            pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
-            pageDom.style.backgroundPosition = 'center'
-            pageDom.style.backgroundRepeat = 'no-repeat'
-            pageDom.style.backgroundColor = '#FFF'
-            pageDom.setAttribute('id', 'backgroundLoad' + pageNo)
-            page.dom = pageDom;
-            this.contentView.appendChild(pageDom);
-        },
-        prev () {
-            this.currentPage--
-            if (this.currentPage < 0) {
-                this.currentPage = 0
-                if (!this.isPC) {
-                    this.$toast({
-                        message: '当前已经是第一段了',
-                        duration: 2000,
-                    })
-                    return
-                }
-            }
-            if (this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-            // this.getpdfResloutePage(this.cachePdf[this.currentPage - 1])
-        },
-        next () {
-            this.currentPage++
-            if (this.currentPage >= this.tagIds.length) {
-                this.currentPage = this.tagIds.length - 1
-                if (!this.isPC) {
-                    this.$toast({
-                        message: '当前已经是最后一段了',
-                        duration: 2000,
-                    })
-                    return
-                }
-            }
-            if (this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-        },
-        currentChange (value) {
-            this.currentPage = value - 1
-            if (this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-        },
-        scrollToUplaodePage (currentPage) {
-            this.changetoolbar = true
-            if (this.preViewType !== 'pdf') {
-                return
-            }
-
-            let pdfResloute = this.cachePdf[currentPage]
-            this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
-            this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
-            this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
-            this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
-            this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
-            this.identifyTextPostion.page = pdfResloute.page
-            this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
-            this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
-            // 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
-            this.$nextTick(() => {
-                this.renderHighlights()
-            })
-            if (this.transformSalce !== null) {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
-            } else {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
-            }
-        },
-        scrollToExcalTop (currentPage) {
-            for (let index = 0; index < this.allTr.length; index++) {
-                if (index == currentPage) {
-                    Array.from(this.allTr[index].children).forEach(item => {
-                        item.style.background = 'rgba(255, 136, 0, 0.6)'
-                        item.classList.add('animation')
-                        setTimeout(() => {
-                            item.classList.remove('animation')
-                        }, 4000)
-                    })
-                    // getBoundingClientRect().top 当前元素距离屏幕顶部的高度 + 弹窗header 高度
-                    if (!this.isPC) {
-                        let top = this.allTr[index].getBoundingClientRect().top - this.$refs.pdfView.getBoundingClientRect().top
-                        this.$refs.pdfView.scrollTop = top
-                    } else {
-                        let top = this.allTr[index].getBoundingClientRect().top
-                        this.$refs.pdfView.scrollTop = top - 50
-                    }
-                } else {
-                    Array.from(this.allTr[index].children).forEach(item => {
-                        item.style.background = 'rgba(54, 106, 255, 0.6)'
-                        item.classList.remove('animation')
-                    })
-                }
-            }
-        },
-        // pdf是否需要重新渲染高亮位置
-        renderHighlights () {
-            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
-            if (lineHeightDom) {
-                lineHeightDom.forEach((d) => {
-                    for (let i = 0; i < d.children.length; i++) {
-                        if (d.getAttribute('react-count') == this.currentPage) {
-                            d.children[i].style.backgroundColor = 'rgba(255, 136, 0, 0.3)'
-                            d.children[i].classList.add('animation')
-                            setTimeout(() => {
-                                d.children[i].classList.remove('animation')
-                            }, 4000)
-                        } else {
-                            d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
-                            d.children[i].classList.remove('animation')
-                        }
-                    }
-                })
-            }
-        },
-        displayHiglight (pageIndex) {
-            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
-            if (lineHeightDom) {
-                lineHeightDom.forEach((d) => {
-                    if (d.getAttribute('page-index') == pageIndex) {
-                        d.style.display = 'none'
-                    }
-                })
-            }
-        },
-        // 前端暂时缓存多页
-        autoLoadMore (pageIndex) {
-            let pdfResloute = this.cachePdf.find(cache => {
-                return cache.page == pageIndex
-            })
-            if (pdfResloute) {
-                this.getpdfResloutePage(pdfResloute)
-            } else {
-                this.loadPdfData(pageIndex)
-            }
-        },
-        setPageAllLine (arr) {
-            this.currentPageAllLine = []
-            arr.forEach((item, index) => {
-                let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
-                if (i != -1) {
-                    // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
-                    this.currentPageAllLine[i].allLines.push({
-                        pageCount: index,
-                        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 ? item.extractInfo.lines : [{
-                                content:"测试内容填充，不必理会",
-                                location:item.extractInfo.location
-                            }]
-                        }],
-                    })
-                }
-            })
-        },
-        openTouch () {
-            // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
-            let that = this;
-            this.$nextTick(() => {
-                // setInterval(() => {
-                //     this.scale = this.scale + 0.1
-                //     that.pages.forEach((item, index) =>{
-                //             if(item.dom) {
-                //                 item.dom.children.forEach( childDom =>{
-                //                     if(childDom.getAttribute('react-count')) {
-                //                         childDom.style.transform = "scale(" +  this.scale + ")";
-                //                         childDom.style.transformOrigin = "0px 0px 0px";
-                //                     } else {
-                //                         item.dom = null
-                //                         this.startRenderPages(item.pdfPage, null, index)
-                //                     }
-                //                 } )
-                //             }
-                //         })
-                // }, 100);
-                // 获取放大或缩小的区域DOM
-                let matrix_box = this.contentView
-                matrix_box.addEventListener("touchstart", function (event) {
-                    this.isTouchMoved = true
-                    let touches = event.touches;
-                    let events = touches[0];
-                    let events2 = touches[1];
-
-                    // event.preventDefault();
-
-                    // 第一个触摸点的坐标
-                    that.displacement.pageX = events.pageX;
-                    that.displacement.pageY = events.pageY;
-
-                    that.displacement.moveable = true;
-
-                    if (events2) {
-                        that.displacement.pageX2 = events2.pageX;
-                        that.displacement.pageY2 = events2.pageY;
-                    }
-
-                    that.displacement.originScale = this.scale || 1;
-                });
-                document.addEventListener("touchmove", function (event) {
-                    if (!that.displacement.moveable) {
-                        return;
-                    }
-                    // event.preventDefault();
-                    let touches = event.touches;
-                    let events = touches[0];
-                    let events2 = touches[1];
-                    // 双指移动
-                    if (events2) {
-                        // 第2个指头坐标在touchmove时候获取
-                        if (!that.displacement.pageX2) {
-                            that.displacement.pageX2 = events2.pageX;
-                        }
-                        if (!that.displacement.pageY2) {
-                            that.displacement.pageY2 = events2.pageY;
-                        }
-                        // 双指缩放比例计算
-                        let zoom = that.getDistance({
-                            x: events.pageX,
-                            y: events.pageY
-                        },
-                            {
-                                x: events2.pageX,
-                                y: events2.pageY
-                            }
-                        ) / that.getDistance(
-                            {
-                                x: that.displacement.pageX,
-                                y: that.displacement.pageY
-                            },
-                            {
-                                x: that.displacement.pageX2,
-                                y: that.displacement.pageY2
-                            }
-                        );
-                        // 应用在元素上的缩放比例
-                        let newScale = that.displacement.originScale * zoom;
-                        // 最大缩放比例限制
-                        if (newScale > 2) {
-                            newScale = 2;
-                        }
-                        // 最大缩放比例限制
-                        if (newScale < 1) {
-                            newScale = 1;
-                        }
-                        // 记住使用的缩放值
-                        that.displacement.scale = newScale;
-                        // console.log(newScale);
-                        matrix_box.style.transform = "scale(" + newScale + ")";
-                        // 设置旋转元素的基点位置
-                        matrix_box.style.transformOrigin = "0px 0px 0px";
-                    }
-                }, { passive: false });
-                document.addEventListener('touchend', function () {
-                    that.isTouchMoved = false
-                }, { passive: false })
-            });
-        },
-        getDistance (start, stop) {
-            // Math.hypot()计算参数的平方根
-            return Math.hypot(stop.x - start.x, stop.y - start.y);
-        },
-        setupCanvas (canvas, width, height) {
-            const dpr = 1;
-            // const rect = canvas.getBoundingClientRect();
-            canvas.width = width
-            canvas.height = height
-            const ctx = canvas.getContext('2d');
-            ctx?.scale(dpr, dpr);
-            return ctx;
-        },
-        changeScale (value) {
-            if (value == 'zoom') {
-                this.handScale = 'auto'
-                this.transformSalce = (this.transformSalce + 0.2).toFixed(1)
-            } else if (value == 'reduce') {
-                if ((this.transformSalce - 0.2).toFixed(1) <= 0) {
-                    return
-                }
-                this.handScale = 'auto'
-                this.transformSalce = (this.transformSalce - 0.2).toFixed(1)
-            } else if (value == 'auto') {
-                this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
-            } else if (value == 'reality') {
-                this.transformSalce = 0.5
-            } else {
-                this.transformSalce = (value / 2).toFixed(1)
-            }
-            this.transformSalce = Number(this.transformSalce)
-            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 () {
-            return '/web/viewer.html?file=' + '/pdflist/pdf4split-1.pdf'
-        },
-        setHeight () {
-            if (this.tagIds.length > 1) {
-                if (this.isPC) {
-                    return 'calc(100% - 110px)'
-                } else {
-                    return 'calc(100% - 60px)'
-                }
-            } else {
-                if (this.isPC) {
-                    return 'calc(100% - 50px)'
-                } else {
-                    return '100%'
-                }
-            }
-        }
-    },
-    watch: {
-        tagIds: {
-            handler (value) {
-                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 => {
-                        // 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)'
-                        // }
-                        // res.data = {
-                        //     "data": [
-                        //         {
-                        //             "id": "64e746120372d778849d2e8e",
-                        //             "knowledgeId": "64e30035edffac0ec96a2d39",
-                        //             "mainId": "e0f6898c6b0d47fa98e8f71ceab1bde8",
-                        //             "page": 14,
-                        //             "total": 60,
-                        //             "pageHeight": 728.504,
-                        //             "pageWidth": 515.906,
-                        //             "publicPageFileUrl": "https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/e0f6898c6b0d47fa98e8f71ceab1bde8/2023/08/21/02/12/07/64e300378c3dfb3bc434f51a/15.pdf",
-                        //             "extractInfo": {
-                        //                 "location": [
-                        //                     52.665375,
-                        //                     312.01306,
-                        //                     404.98618,
-                        //                     142.5199
-                        //                 ],
-                        //                 "content": null,
-                        //                 "lines": [
-                        //                     {
-                        //                         "content": null,
-                        //                         "location": [
-                        //                             52.665375,
-                        //                             312.01306,
-                        //                             404.98618,
-                        //                             142.5199
-                        //                         ]
-                        //                     }
-                        //                 ],
-                        //                 "tagId": null
-                        //             },
-                        //             "block": {
-                        //                 "type": "TEXT",
-                        //                 "location": [
-                        //                     52.665375,
-                        //                     312.01306,
-                        //                     404.98618,
-                        //                     142.5199
-                        //                 ],
-                        //                 "color": "#366AFF",
-                        //                 "flowChart": {
-                        //                     "content": ""
-                        //                 },
-                        //                 "image": {
-                        //                     "url": null,
-                        //                     "desc": ""
-                        //                 },
-                        //                 "table": {
-                        //                     "title": null,
-                        //                     "table": null
-                        //                 },
-                        //                 "text": {
-                        //                     "originText": "① 头部防护：安全帽\n佩戴要求：\n①存在坠物或对头部产生碰撞风险的作业场所需要佩戴安全帽 ；\n②安全帽必须戴正、戴牢、不能晃动，要系紧下颏带，调节好后箍以\n防安全帽脱落 ；\n③受强力撞击及超过有效期的安全帽必须更换。",
-                        //                     "indexText": "① 头部防护：安全帽\n佩戴要求：\n①存在坠物或对头部产生碰撞风险的作业场所需要佩戴安全帽 ；\n②安全帽必须戴正、戴牢、不能晃动，要系紧下颏带，调节好后箍以\n防安全帽脱落 ；\n③受强力撞击及超过有效期的安全帽必须更换。",
-                        //                     "lines": [
-                        //                         {
-                        //                             "location": [
-                        //                                 69.08148,
-                        //                                 368.92072,
-                        //                                 65.90851,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 86.290985,
-                        //                                 384.67072,
-                        //                                 31.5,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2992,
-                        //                                 315.73584,
-                        //                                 37.656006,
-                        //                                 12.0
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 324.6939,
-                        //                                 316.79932,
-                        //                                 122.74487,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 336.0458,
-                        //                                 149.625,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 356.0483,
-                        //                                 161.15405,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 376.0508,
-                        //                                 161.15405,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 396.0533,
-                        //                                 76.125,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 416.05582,
-                        //                                 161.17517,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 286.2954,
-                        //                                 436.8038,
-                        //                                 52.5,
-                        //                                 10.5
-                        //                             ]
-                        //                         },
-                        //                         {
-                        //                             "location": [
-                        //                                 338.7992,
-                        //                                 435.73584,
-                        //                                 12.0,
-                        //                                 12.0
-                        //                             ]
-                        //                         }
-                        //                     ]
-                        //                 }
-                        //             }
-                        //         }
-                        //     ],
-                        //     "code": "0",
-                        //     "msg": null,
-                        //     "traceId": null
-                        // }
-                        if (res.data.code == 0) {
-                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
-                            // 缓存拿到的所有数据
-                            this.cachePdf = res.data.data
-                            let publicPageFileUrl = res.data.data && res.data.data[0] ? res.data.data[0].publicPageFileUrl : ''
-                            this.currentPage = 0
-                            if (publicPageFileUrl && publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
-                                this.preViewType = 'pdf'
-                                this.setPageAllLine(this.cachePdf)
-                                this.getpdfResloutePage(res.data.data[0])
-                            } else {
-                                this.preViewType = 'excal'
-                                this.$http.post(
-                                    '/knowledge-api/temporary-certificate/or-origin?expired=30',
-                                    publicPageFileUrl,
-                                    {
-                                        headers: {
-                                            "Content-Type": "application/json",
-                                        },
-                                    }).then(res => {
-                                        // 使用原声请求方式 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++) {
-                                                    if (value.includes(allTr[index].getAttribute('tag-id'))) {
-                                                        this.allTr.push(allTr[index])
-                                                    }
-                                                }
-                                                this.currentChange(1)
-
-                                            }
-                                        }
-                                        xhr.send();
-                                    })
-                            }
-                        } else {
-                            let div = document.createElement('div')
-                            div.innerText = '文件加载异常'
-                            this.contentView.appendChild(div)
-                            this.$refs.pdfView.appendChild(this.contentView)
-                        }
-                    })
-                }
-            },
-            deep: true,
-            immediate: true
-        }
-    },
-    mounted () {
-        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-            this.isPC = false
-        } else {
-            this.isPC = true
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.pdf_view {
-    width: 100%;
-    // height: calc(100% - 110px);
-    height: 100%;
-    overflow: auto;
-    //overflow-y: scroll;
-    background-color: #f5f7fb;
-    // margin-bottom: 60px;
-    box-sizing: border-box;
-    // position: relative;
-    // > div {
-    //     width: 100%;
-    //     height: 100%;
-    //     overflow: hidden;
-    //     overflow-y: auto;
-    //     position: relative;
-    // }
-    >iframe {
-        width: 100%;
-        height: 100%;
-    }
-
-    a:link {
-        color: none;
-    }
-
-    a:visited {
-        color: none;
-    }
-
-    a:hover {
-        color: none;
-    }
-
-    a:active {
-        color: none;
-    }
-    .btn_footer {
-        width: 100%;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        position: absolute;
-        bottom: 0px;
-        left: 0;
-        z-index: 999;
-        background: #ffffff;
-
-        .prev,
-        .next {
-            width: 35%;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50px;
-            cursor: pointer;
-        }
-
-        .prev {
-            background: #F2F5FA;
-            color: #000;
-        }
-
-        .next {
-            background: #366aff;
-            color: #ffffff;
-        }
-    }
-
-    #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;
-        z-index: 1000;
-
-
-
-        /deep/.el-pagination {
-            margin-right: 110px;
-        }
-
-        /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;
-        }
-    }
-
-    .change_scale {
-        width: 100%;
-        height: 50px;
-        position: absolute;
-        top: 50px;
-        left: 0;
-        background: #ffffff;
-        display: flex;
-        align-items: center;
-        padding: 0 10px;
-        box-sizing: border-box;
-
-        section {
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            margin-right: 5px;
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            i {
-                font-weight: 900;
-            }
-        }
-
-        section:hover {
-            background: rgba(221, 222, 223, 1);
-        }
-    }
-  .pdf_container_view{
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow: auto;
-  }
-}
-</style>
-<style lang="less">
-.animation {
-    animation-name: highlight;
-    animation-duration: 4s;
-}
-
-@keyframes highlight {
-    0% {
-        background: rgba(255, 136, 0, 0.3);
-    }
-
-    25% {
-        background: rgba(255, 136, 0, 0.6);
-    }
-
-    50% {
-        background: rgba(255, 136, 0, 0.3);
-    }
-
-    75% {
-        background: rgba(255, 136, 0, 0.6);
-    }
-
-    100% {
-        background: rgba(255, 136, 0, 0.3);
-    }
-}</style>
+<template>
+    <div class="pdf_view" id="pdf_view">
+        <div class="change_scale" v-if="isPC">
+            <section @click="changeScale('reduce')">
+                <i class="el-icon-minus"></i>
+            </section>
+            <el-divider direction="vertical"></el-divider>
+            <section @click="changeScale('zoom')">
+                <i class="el-icon-plus"></i>
+            </section>
+            <el-select size="small" v-model="handScale" @change="changeScale" placeholder="请选择">
+                <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll"  ref="pdfView"></div>
+        <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
+            <div class="prev" @click="prev">上一段</div>
+            <div class="next" @click="next">下一段</div>
+        </div>
+        <div id="pagination" v-if="tagIds.length > 1 && isPC">
+            <el-pagination :current-page="currentPage + 1" @current-change="currentChange" @prev-click="prev"
+                @next-click="next" layout="slot, prev, pager, next" :page-size="1" :total="tagIds.length">
+                <span class="total-class">答案由{{ tagIds.length }}段内容生成</span>
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+// :style="{
+//     marginBottom: tagIds.length > 1 ? '60px' : '0px',
+//     height: setHeight
+// }"
+import _ from 'lodash'
+import { newInitWaterMark } from "../assets/js/common";
+// import * as pdfjsLib from 'pdfjs-dist'
+// pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
+// import { TextLayerBuilder }  from "pdfjs-dist/web/pdf_viewer";
+// EventBus pdf_viewer 支持绑定自定义事件，一版不做
+// import 'pdfjs-dist/web/pdf_viewer.css'
+/* eslint-disable */
+const pdfjsLib = window['pdfjsLib']
+if (pdfjsLib) {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
+    // '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','fileName', "knowledgeItem",'textWatermarkStr'],
+    data () {
+        return {
+            url: '',
+            pages: [],
+            pageLoadStatus: {
+                WAIT: 0,
+                LOADED: 1,
+            },
+            scale: 1,
+            rotation: 0,
+            pageSize: {},
+            PAGE_INTVERVAL: 15,
+            SLICE_COUNT: 5,
+            contentView: null,
+            fisrtLoad: true,
+            TextLayerBuilder: null,
+            totalPageCount: 0,
+            identifyTextPostion: {
+                top: 0,
+                left: 0,
+                width: 100,
+                height: 0,
+                page: 1,
+                pageHeight: 0,
+                pageWidth: 0,
+                extractInfo: {},
+                currentPageAllLine: []
+            },
+            currentPageAllLine: [],
+            pdfUrl: '',
+            cachePdf: [],
+            newViewer: null,
+            currentPage: 0,
+            changetoolbar: false,
+            allTr: [],
+            preViewType: 'pdf',
+            displacement: {
+                pageX: 0,
+                pageY: 0,
+                moveable: false,
+                pageX2: 0,
+                pageY2: 0,
+                originScale: 1,
+            },
+            isTouchMoved: false,
+            transformSalce: null,
+            defaultTransform:0.8,
+            isPC: false,
+            handScale: 'auto',
+            scaleList: [
+                {
+                    label: '自动缩放',
+                    value: 'auto'
+                },
+                {
+                    label: '实际比例',
+                    value: 'reality'
+                },
+                {
+                    label: '100%',
+                    value: 1
+                },
+                {
+                    label: '120%',
+                    value: 1.2
+                },
+                {
+                    label: '150%',
+                    value: 1.5
+                },
+                {
+                    label: '170%',
+                    value: 1.7
+                }
+                ,
+                {
+                    label: '200%',
+                    value: 2
+                }
+            ],
+            scrollTop: 0,
+            scrollLeft: 0
+        }
+    },
+    methods: {
+        getpdfResloutePage (pdfResloute) {
+            // 根据当前页面宽度设置缩放比例
+            // this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
+            if (this.isMessageRecord) {
+                this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
+            } else {
+                this.scale = 2
+            }
+            // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
+            this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
+            this.initPages(pdfResloute.total)
+            // 定位功能，加载对应页码位置
+            this.loadPdfData(pdfResloute.page)
+        },
+        async loadPdfData (loadPage) {
+            if (this.pages[loadPage - 1] && ((this.pages[loadPage - 1].dom && this.pages[loadPage - 1].dom.children.length > 0) || this.pages[loadPage - 1].loadStatus)) {
+                return
+            } else {
+                if (this.changetoolbar) {
+                    this.$nextTick(() => {
+                        this.renderHighlights()
+                    })
+                    this.changetoolbar = false
+                }
+            }
+            // 记录开始缓存的状态
+            // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
+            // 拿到第一个分片
+            const { startPage, url } = await this.fetchPdfFragment(loadPage);
+            let loadingTask = pdfjsLib.getDocument(url)
+            loadingTask.promise.then(async (pdfDoc) => {
+                // 将已经下载的分片保存到 pages 数组中
+                // for (let i = 0; i < pdfDoc.numPages; i += 1) {
+                //     const pageIndex = startPage + i;
+                //     const page = this.pages[pageIndex - 1];
+                //     // // 不在缓存列表内，重新获取本页pdf
+                //     // if (page.loadStatus !== this.pageLoadStatus.LOADED) {
+
+                //     // } else {
+                //     //     if (this.changetoolbar) {
+                //     //         this.$nextTick(() => {
+                //     //             this.renderHighlights()
+                //     //         })
+                //     //         this.changetoolbar = false
+                //     //     }
+                //     // }
+                // }
+                const page = this.pages[loadPage - 1]
+                await pdfDoc.getPage(1).then(async (pdfPage) => {
+                    this.pages[loadPage - 1].loadStatus = true
+                    this.pages[loadPage - 1].pdfPage = pdfPage;
+                    // 通知可以进行渲染了
+                    await this.startRenderPages(pdfPage, page, loadPage)
+                });
+            });
+        },
+        initPages (totalPage) {
+            // const pages = [];
+            this.totalPageCount = totalPage
+            for (let i = 0; i < totalPage; i += 1) {
+                this.pages.push({
+                    pageNo: i + 1,
+                    loadStatus: false,
+                    pdfPage: null,
+                    dom: null
+                });
+            }
+        },
+        async fetchPdfFragment (pageIndex) {
+            // 置换加签后的文件地址。
+            let obj = {}
+            await this.$http.post(
+                '/knowledge-api/temporary-certificate/or-origin?expired=30',
+                this.pdfUrl + pageIndex + '.pdf',
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }).then(async res => {
+                    if (res.bodyText) {
+                        // 最后返回一个 包含这4个参数的对象
+                        obj = await {
+                            "startPage": pageIndex, // 分片的开始页码
+                            "endPage": pageIndex + 5, // 分片结束页码
+                            "totalPage": this.totalPageCount, // pdf 总页数
+                            "url": res.bodyText // 分片内容下载地址
+                        }
+                    }
+                    if (res.data) {
+                        // 最后返回一个 包含这4个参数的对象
+                        obj = await {
+                            "startPage": pageIndex, // 分片的开始页码
+                            "endPage": pageIndex + 5, // 分片结束页码
+                            "totalPage": this.totalPageCount, // pdf 总页数
+                            "url": res.data // 分片内容下载地址
+                        }
+                    }
+                })
+            return obj
+        },
+        startRenderPages (pdfPage, page, pageIndex) {
+            if (Object.keys(this.pageSize).length == 0) {
+                const viewport = pdfPage.getViewport({
+                    scale: this.scale, // 缩放的比例
+                    rotation: this.rotation, // 旋转的角度
+                });
+                // 记录pdf页面高度
+                const pageSize = {
+                    width: viewport.width,
+                    height: viewport.height,
+                }
+                this.pageSize = pageSize
+                // 创建内容绘制区，并设置大小
+                if (this.$refs.pdfView.clientWidth / this.pageSize.width >= 1 || this.isMessageRecord) {
+                    this.contentView.style.width = `${pageSize.width - 10}px`;
+                    this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+                } else {
+                    this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
+                    this.contentView.style.width = `${pageSize.width * this.transformSalce - 10}px`;
+                    this.contentView.style.height = `${(this.totalPageCount * (pageSize.height * (this.transformSalce) + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+                }
+                this.contentView.style.margin = '0 auto 0'
+                this.contentView.style.position = 'relative'
+                this.contentView.style.paddingBottom = '60px'
+                // contentView.style.overflowY = 'auto'
+                this.$refs.pdfView.appendChild(this.contentView);
+                if (this.textWatermarkStr){
+                  newInitWaterMark('pdf_container_view',this.textWatermarkStr)
+                }
+            }
+            this.renderPages(pageIndex)
+        },
+        // 渲染需要展示的页面，不需展示的页码将其清除
+        renderPages (pageIndex) {
+            const pagesToRender = this.getRenderScope(pageIndex);
+            for (const i of this.pages) {
+                if (pagesToRender.some(p => { return p.pageNo == i.pageNo })) {
+                    if (i.loadStatus === true) {
+                        this.renderPageContent(i, i.pageNo)
+                    } else {
+                        this.renderPageLoading(i, i.pageNo)
+                    }
+                } else {
+                    this.clearPage(i);
+                }
+            }
+
+        },
+        async renderPageContent (page, pageIndex) {
+            const { pdfPage, pageNo, dom } = page;
+            // dom 元素已存在，无须重新渲染，直接返回
+            if ((dom && dom.children.length != 0) || page.loading) {
+              return;
+            }
+            page.loading = true
+            const viewport = pdfPage.getViewport({
+              scale: this.scale,
+              rotation: this.rotation,
+            });
+            // 创建新的canvas
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            // canvas.getContext('2d');
+            canvas.height = this.pageSize.height;
+            canvas.width = this.pageSize.width;
+            canvas.style.position = 'relative'
+            canvas.style.top = -3 + 'px'
+            // 创建渲染的dom
+            const pageDom = document.createElement('div');
+            pageDom.style.position = 'absolute';
+            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+            pageDom.style.width = `${this.pageSize.width}px`;
+            pageDom.style.height = `${this.pageSize.height}px`;
+            pageDom.setAttribute('data-id', 'page' + pageNo)
+            pageDom.appendChild(canvas);
+            // 渲染内容
+            let renderContext = {
+                canvasContext: context,
+                viewport: viewport,
+            }
+            await pdfPage.render(renderContext).promise.then(() => {
+                return pdfPage.getTextContent()
+            }).then(async (textContent) => {
+                const textLayerDiv = document.createElement('div');
+                textLayerDiv.setAttribute('class', 'textLayer');
+                // 将文本图层div添加至每页pdf的div中
+                // 创建新的TextLayerBuilder实例
+                let textLayer = new TextLayerBuilder({
+                    textLayerDiv: textLayerDiv,
+                    pageIndex: pdfPage._pageIndex,
+                    viewport: viewport,
+                });
+                let findPage = this.currentPageAllLine.find(l => { return l.page == pageIndex })
+                let rectdomTop = 0
+                if (findPage) {
+                    let AllLines = findPage.allLines
+                    // setTimeout(() => {
+                    if (AllLines.length > 0) {
+                        for (let j = 0; j < AllLines.length; j++) {
+                            let lines = AllLines[j].lines
+                            let rectdom = document.createElement('div')
+                            rectdom.setAttribute('react-count', AllLines[j].pageCount);
+                            rectdom.style.position = 'absolute';
+                            rectdom.style.top = 0
+                            rectdom.style.left = 0
+                            rectdom.classList.add('rectdom')
+                            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
+                                    // }
+                                  }
+                                }
+                              }
+                            }
+                            if (rectdom.children && rectdom.children.length > 0) {
+                                pageDom.appendChild(rectdom)
+                            }
+                        }
+                    }
+                }
+                textLayer.setTextContent(textContent);
+                textLayer.render()
+                pageDom.appendChild(textLayerDiv);
+
+                let backgroundDom = document.getElementById('backgroundLoad' + pageNo)
+                if (backgroundDom) {
+                    this.contentView.removeChild(backgroundDom);
+                }
+                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})`
+                }
+                if (this.changetoolbar) {
+                    setTimeout(() => {
+                        this.renderHighlights()
+                        this.changetoolbar = false
+                    }, 500)
+                }
+                if (this.fisrtLoad) {
+                    setTimeout(() => {
+                        let pageoffsetHeight = 0
+                        if (this.transformSalce !== null) {
+                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce
+                        } else {
+                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL)
+                        }
+                        if (this.$refs.pdfView.clientHeight - pageoffsetHeight > 0 && pageIndex == 1) {
+                            const height = this.$refs.pdfView.clientHeight;
+                            let startNum = 0
+                            let endNum = 0
+                            if (this.transformSalce !== null) {
+                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
+                                endNum = startNum + Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
+                            } else {
+                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / (this.pageSize.height + this.PAGE_INTVERVAL))
+                                endNum = startNum + Math.ceil(height / (this.pageSize.height + this.PAGE_INTVERVAL))
+
+                            }
+                            for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
+                                if (pageIndex > 0 && pageIndex <= this.pages.length) {
+                                    this.loadPdfData(pageIndex)
+                                }
+                            }
+                        }
+                        if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * pageoffsetHeight)) {
+                            this.$refs.pdfView.scrollTop = rectdomTop
+                            this.fisrtLoad = false
+                        } else {
+                            this.$refs.pdfView.scrollTop = `${((pageNo - 1) * pageoffsetHeight) + rectdomTop - this.PAGE_INTVERVAL}`
+                            this.fisrtLoad = false
+                        }
+                        this.renderHighlights()
+                        // zoomElement(this.contentView)
+                    }, 100)
+                }
+            })
+        },
+        // 监听容器的滚动事件，触发 scrollPdf 方法
+        // 这里加了防抖保证不会一次产生过多请求
+        debounceScrollPdf: _.debounce(function (e, that) {
+            if (this.fisrtLoad) {
+                this.fisrtLoad = false
+                return
+            }
+            const scrollTop = e.target.scrollTop;
+            const height = e.target.clientHeight;
+            let startNum = 0
+            let endNum = 0
+            if (this.transformSalce !== null) {
+                startNum = Math.ceil(scrollTop / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
+                endNum = startNum + Math.ceil(height / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
+            } else {
+                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++) {
+                if (pageIndex > 0 && pageIndex <= that.pages.length) {
+                    that.loadPdfData(pageIndex)
+                }
+            }
+        }, 200),
+        directScrolling (e, that) {
+            if (this.fisrtLoad) {
+                this.fisrtLoad = false
+                return
+            }
+            const scrollTop = e.target.scrollTop;
+            const height = e.target.clientHeight;
+            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
+            const pageIndex = scrollTop > 0 ?
+                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
+                1;
+            this.loadPdfData(pageIndex)
+        },
+        pdfScroll (e) {
+            if (this.preViewType !== 'pdf' || this.isTouchMoved) {
+                return
+            }
+            if (this.scrollLeft != e.target.scrollLeft) {
+                this.scrollLeft = e.target.scrollLeft
+            }
+            if (this.scrollTop != e.target.scrollTop) {
+                this.scrollTop = e.target.scrollTop
+                this.debounceScrollPdf(e, this)
+            }
+        },
+        // 分片每次只做一次处理，所以不考虑多片情况
+        loadBefore (pageIndex) {
+            this.loadPdfData(pageIndex)
+        },
+        loadAfter (pageIndex) {
+            this.loadPdfData(pageIndex)
+        },
+        // 首先我们获取到需要渲染的范围
+        // 根据当前的可视范围内的页码，我们前后只保留 8 页
+        getRenderScope (pageIndex) {
+            const pagesToRender = [];
+            let i = pageIndex - 1;
+            let j = pageIndex + 1;
+            // pageIndex - 1 表示当前页码数 对应的下标位置
+            pagesToRender.push(this.pages[pageIndex - 1]);
+            while (pagesToRender.length < 8 && pagesToRender.length < this.pages.length) {
+                if (i > 0) {
+                    pagesToRender.push(this.pages[i - 1]);
+                    i -= 1;
+                }
+                if (pagesToRender.length >= 8) {
+                    break;
+                }
+                if (j <= this.pages.length) {
+                    pagesToRender.push(this.pages[j - 1]);
+                    j += 1;
+                }
+            }
+            // for (let index = 0; index < array.length; index++) {
+            //     const element = array[index];
+
+            // }
+            return pagesToRender;
+        },
+
+        // 清除页面 dom
+        clearPage (page) {
+            if (this.contentView.contains(page.dom) && page.dom) {
+                this.contentView.removeChild(page.dom);
+                page.loadStatus = false
+                page.loading = false
+                page.dom = undefined;
+            }
+        },
+        // 页面正在下载时渲染loading视图
+        renderPageLoading (page) {
+            const { pageNo, dom } = page;
+            if (dom && dom.children.length != 0) {
+                return;
+            }
+            let backgroundDom = document.getElementById('backgroundLoad' + pageNo)
+            if (this.contentView.contains(backgroundDom)) {
+                return
+            }
+            const pageDom = document.createElement('div');
+            pageDom.style.width = `${this.pageSize.width}px`;
+            pageDom.style.height = `${this.pageSize.height}px`;
+            pageDom.style.position = 'absolute';
+            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
+                }px`;
+            pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
+            pageDom.style.backgroundPosition = 'center'
+            pageDom.style.backgroundRepeat = 'no-repeat'
+            pageDom.style.backgroundColor = '#FFF'
+            pageDom.setAttribute('id', 'backgroundLoad' + pageNo)
+            page.dom = pageDom;
+            this.contentView.appendChild(pageDom);
+        },
+        prev () {
+            this.currentPage--
+            if (this.currentPage < 0) {
+                this.currentPage = 0
+                if (!this.isPC) {
+                    this.$toast({
+                        message: '当前已经是第一段了',
+                        duration: 2000,
+                    })
+                    return
+                }
+            }
+            if (this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+            // this.getpdfResloutePage(this.cachePdf[this.currentPage - 1])
+        },
+        next () {
+            this.currentPage++
+            if (this.currentPage >= this.tagIds.length) {
+                this.currentPage = this.tagIds.length - 1
+                if (!this.isPC) {
+                    this.$toast({
+                        message: '当前已经是最后一段了',
+                        duration: 2000,
+                    })
+                    return
+                }
+            }
+            if (this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+        },
+        currentChange (value) {
+            this.currentPage = value - 1
+            if (this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+        },
+        scrollToUplaodePage (currentPage) {
+            this.changetoolbar = true
+            if (this.preViewType !== 'pdf') {
+                return
+            }
+
+            let pdfResloute = this.cachePdf[currentPage]
+            this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
+            this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
+            this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
+            this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
+            this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
+            this.identifyTextPostion.page = pdfResloute.page
+            this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
+            this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
+            // 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
+            this.$nextTick(() => {
+                this.renderHighlights()
+            })
+            if (this.transformSalce !== null) {
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
+            } else {
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
+            }
+        },
+        scrollToExcalTop (currentPage) {
+            for (let index = 0; index < this.allTr.length; index++) {
+                if (index == currentPage) {
+                    Array.from(this.allTr[index].children).forEach(item => {
+                        item.style.background = 'rgba(255, 136, 0, 0.6)'
+                        item.classList.add('animation')
+                        setTimeout(() => {
+                            item.classList.remove('animation')
+                        }, 4000)
+                    })
+                    // getBoundingClientRect().top 当前元素距离屏幕顶部的高度 + 弹窗header 高度
+                    if (!this.isPC) {
+                        let top = this.allTr[index].getBoundingClientRect().top - this.$refs.pdfView.getBoundingClientRect().top
+                        this.$refs.pdfView.scrollTop = top
+                    } else {
+                        let top = this.allTr[index].getBoundingClientRect().top
+                        this.$refs.pdfView.scrollTop = top - 50
+                    }
+                } else {
+                    Array.from(this.allTr[index].children).forEach(item => {
+                        item.style.background = 'rgba(54, 106, 255, 0.6)'
+                        item.classList.remove('animation')
+                    })
+                }
+            }
+        },
+        // pdf是否需要重新渲染高亮位置
+        renderHighlights () {
+            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
+            if (lineHeightDom) {
+                lineHeightDom.forEach((d) => {
+                    for (let i = 0; i < d.children.length; i++) {
+                        if (d.getAttribute('react-count') == this.currentPage) {
+                            d.children[i].style.backgroundColor = 'rgba(255, 136, 0, 0.3)'
+                            d.children[i].classList.add('animation')
+                            setTimeout(() => {
+                                d.children[i].classList.remove('animation')
+                            }, 4000)
+                        } else {
+                            d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+                            d.children[i].classList.remove('animation')
+                        }
+                    }
+                })
+            }
+        },
+        displayHiglight (pageIndex) {
+            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
+            if (lineHeightDom) {
+                lineHeightDom.forEach((d) => {
+                    if (d.getAttribute('page-index') == pageIndex) {
+                        d.style.display = 'none'
+                    }
+                })
+            }
+        },
+        // 前端暂时缓存多页
+        autoLoadMore (pageIndex) {
+            let pdfResloute = this.cachePdf.find(cache => {
+                return cache.page == pageIndex
+            })
+            if (pdfResloute) {
+                this.getpdfResloutePage(pdfResloute)
+            } else {
+                this.loadPdfData(pageIndex)
+            }
+        },
+        setPageAllLine (arr) {
+            this.currentPageAllLine = []
+            arr.forEach((item, index) => {
+                let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
+                if (i != -1) {
+                    // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
+                    this.currentPageAllLine[i].allLines.push({
+                        pageCount: index,
+                        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 ? item.extractInfo.lines : [{
+                                content:"测试内容填充，不必理会",
+                                location:item.extractInfo.location
+                            }]
+                        }],
+                    })
+                }
+            })
+        },
+        openTouch () {
+            // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
+            let that = this;
+            this.$nextTick(() => {
+                // setInterval(() => {
+                //     this.scale = this.scale + 0.1
+                //     that.pages.forEach((item, index) =>{
+                //             if(item.dom) {
+                //                 item.dom.children.forEach( childDom =>{
+                //                     if(childDom.getAttribute('react-count')) {
+                //                         childDom.style.transform = "scale(" +  this.scale + ")";
+                //                         childDom.style.transformOrigin = "0px 0px 0px";
+                //                     } else {
+                //                         item.dom = null
+                //                         this.startRenderPages(item.pdfPage, null, index)
+                //                     }
+                //                 } )
+                //             }
+                //         })
+                // }, 100);
+                // 获取放大或缩小的区域DOM
+                let matrix_box = this.contentView
+                matrix_box.addEventListener("touchstart", function (event) {
+                    this.isTouchMoved = true
+                    let touches = event.touches;
+                    let events = touches[0];
+                    let events2 = touches[1];
+
+                    // event.preventDefault();
+
+                    // 第一个触摸点的坐标
+                    that.displacement.pageX = events.pageX;
+                    that.displacement.pageY = events.pageY;
+
+                    that.displacement.moveable = true;
+
+                    if (events2) {
+                        that.displacement.pageX2 = events2.pageX;
+                        that.displacement.pageY2 = events2.pageY;
+                    }
+
+                    that.displacement.originScale = this.scale || 1;
+                });
+                document.addEventListener("touchmove", function (event) {
+                    if (!that.displacement.moveable) {
+                        return;
+                    }
+                    // event.preventDefault();
+                    let touches = event.touches;
+                    let events = touches[0];
+                    let events2 = touches[1];
+                    // 双指移动
+                    if (events2) {
+                        // 第2个指头坐标在touchmove时候获取
+                        if (!that.displacement.pageX2) {
+                            that.displacement.pageX2 = events2.pageX;
+                        }
+                        if (!that.displacement.pageY2) {
+                            that.displacement.pageY2 = events2.pageY;
+                        }
+                        // 双指缩放比例计算
+                        let zoom = that.getDistance({
+                            x: events.pageX,
+                            y: events.pageY
+                        },
+                            {
+                                x: events2.pageX,
+                                y: events2.pageY
+                            }
+                        ) / that.getDistance(
+                            {
+                                x: that.displacement.pageX,
+                                y: that.displacement.pageY
+                            },
+                            {
+                                x: that.displacement.pageX2,
+                                y: that.displacement.pageY2
+                            }
+                        );
+                        // 应用在元素上的缩放比例
+                        let newScale = that.displacement.originScale * zoom;
+                        // 最大缩放比例限制
+                        if (newScale > 2) {
+                            newScale = 2;
+                        }
+                        // 最大缩放比例限制
+                        if (newScale < 1) {
+                            newScale = 1;
+                        }
+                        // 记住使用的缩放值
+                        that.displacement.scale = newScale;
+                        // console.log(newScale);
+                        matrix_box.style.transform = "scale(" + newScale + ")";
+                        // 设置旋转元素的基点位置
+                        matrix_box.style.transformOrigin = "0px 0px 0px";
+                    }
+                }, { passive: false });
+                document.addEventListener('touchend', function () {
+                    that.isTouchMoved = false
+                }, { passive: false })
+            });
+        },
+        getDistance (start, stop) {
+            // Math.hypot()计算参数的平方根
+            return Math.hypot(stop.x - start.x, stop.y - start.y);
+        },
+        setupCanvas (canvas, width, height) {
+            const dpr = 1;
+            // const rect = canvas.getBoundingClientRect();
+            canvas.width = width
+            canvas.height = height
+            const ctx = canvas.getContext('2d');
+            ctx?.scale(dpr, dpr);
+            return ctx;
+        },
+        changeScale (value) {
+            if (value == 'zoom') {
+                this.handScale = 'auto'
+                this.transformSalce = (this.transformSalce + 0.2).toFixed(1)
+            } else if (value == 'reduce') {
+                if ((this.transformSalce - 0.2).toFixed(1) <= 0) {
+                    return
+                }
+                this.handScale = 'auto'
+                this.transformSalce = (this.transformSalce - 0.2).toFixed(1)
+            } else if (value == 'auto') {
+                this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
+            } else if (value == 'reality') {
+                this.transformSalce = 0.5
+            } else {
+                this.transformSalce = (value / 2).toFixed(1)
+            }
+            this.transformSalce = Number(this.transformSalce)
+            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 () {
+            return '/web/viewer.html?file=' + '/pdflist/pdf4split-1.pdf'
+        },
+        setHeight () {
+            if (this.tagIds.length > 1) {
+                if (this.isPC) {
+                    return 'calc(100% - 110px)'
+                } else {
+                    return 'calc(100% - 60px)'
+                }
+            } else {
+                if (this.isPC) {
+                    return 'calc(100% - 50px)'
+                } else {
+                    return '100%'
+                }
+            }
+        }
+    },
+    watch: {
+        tagIds: {
+            handler (value) {
+                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 => {
+                        // 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)'
+                        // }
+                        // res.data = {
+                        //     "data": [
+                        //         {
+                        //             "id": "64e746120372d778849d2e8e",
+                        //             "knowledgeId": "64e30035edffac0ec96a2d39",
+                        //             "mainId": "e0f6898c6b0d47fa98e8f71ceab1bde8",
+                        //             "page": 14,
+                        //             "total": 60,
+                        //             "pageHeight": 728.504,
+                        //             "pageWidth": 515.906,
+                        //             "publicPageFileUrl": "https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/e0f6898c6b0d47fa98e8f71ceab1bde8/2023/08/21/02/12/07/64e300378c3dfb3bc434f51a/15.pdf",
+                        //             "extractInfo": {
+                        //                 "location": [
+                        //                     52.665375,
+                        //                     312.01306,
+                        //                     404.98618,
+                        //                     142.5199
+                        //                 ],
+                        //                 "content": null,
+                        //                 "lines": [
+                        //                     {
+                        //                         "content": null,
+                        //                         "location": [
+                        //                             52.665375,
+                        //                             312.01306,
+                        //                             404.98618,
+                        //                             142.5199
+                        //                         ]
+                        //                     }
+                        //                 ],
+                        //                 "tagId": null
+                        //             },
+                        //             "block": {
+                        //                 "type": "TEXT",
+                        //                 "location": [
+                        //                     52.665375,
+                        //                     312.01306,
+                        //                     404.98618,
+                        //                     142.5199
+                        //                 ],
+                        //                 "color": "#366AFF",
+                        //                 "flowChart": {
+                        //                     "content": ""
+                        //                 },
+                        //                 "image": {
+                        //                     "url": null,
+                        //                     "desc": ""
+                        //                 },
+                        //                 "table": {
+                        //                     "title": null,
+                        //                     "table": null
+                        //                 },
+                        //                 "text": {
+                        //                     "originText": "① 头部防护：安全帽\n佩戴要求：\n①存在坠物或对头部产生碰撞风险的作业场所需要佩戴安全帽 ；\n②安全帽必须戴正、戴牢、不能晃动，要系紧下颏带，调节好后箍以\n防安全帽脱落 ；\n③受强力撞击及超过有效期的安全帽必须更换。",
+                        //                     "indexText": "① 头部防护：安全帽\n佩戴要求：\n①存在坠物或对头部产生碰撞风险的作业场所需要佩戴安全帽 ；\n②安全帽必须戴正、戴牢、不能晃动，要系紧下颏带，调节好后箍以\n防安全帽脱落 ；\n③受强力撞击及超过有效期的安全帽必须更换。",
+                        //                     "lines": [
+                        //                         {
+                        //                             "location": [
+                        //                                 69.08148,
+                        //                                 368.92072,
+                        //                                 65.90851,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 86.290985,
+                        //                                 384.67072,
+                        //                                 31.5,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2992,
+                        //                                 315.73584,
+                        //                                 37.656006,
+                        //                                 12.0
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 324.6939,
+                        //                                 316.79932,
+                        //                                 122.74487,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 336.0458,
+                        //                                 149.625,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 356.0483,
+                        //                                 161.15405,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 376.0508,
+                        //                                 161.15405,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 396.0533,
+                        //                                 76.125,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 416.05582,
+                        //                                 161.17517,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 286.2954,
+                        //                                 436.8038,
+                        //                                 52.5,
+                        //                                 10.5
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 338.7992,
+                        //                                 435.73584,
+                        //                                 12.0,
+                        //                                 12.0
+                        //                             ]
+                        //                         }
+                        //                     ]
+                        //                 }
+                        //             }
+                        //         }
+                        //     ],
+                        //     "code": "0",
+                        //     "msg": null,
+                        //     "traceId": null
+                        // }
+                        if (res.data.code == 0) {
+                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
+                            // 缓存拿到的所有数据
+                            this.cachePdf = res.data.data
+                            let publicPageFileUrl = res.data.data && res.data.data[0] ? res.data.data[0].publicPageFileUrl : ''
+                            this.currentPage = 0
+                            if (publicPageFileUrl && publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
+                                this.preViewType = 'pdf'
+                                this.setPageAllLine(this.cachePdf)
+                                this.getpdfResloutePage(res.data.data[0])
+                            } else {
+                                this.preViewType = 'excal'
+                                this.$http.post(
+                                    '/knowledge-api/temporary-certificate/or-origin?expired=30',
+                                    publicPageFileUrl,
+                                    {
+                                        headers: {
+                                            "Content-Type": "application/json",
+                                        },
+                                    }).then(res => {
+                                        // 使用原声请求方式 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++) {
+                                                    if (value.includes(allTr[index].getAttribute('tag-id'))) {
+                                                        this.allTr.push(allTr[index])
+                                                    }
+                                                }
+                                                this.currentChange(1)
+
+                                            }
+                                        }
+                                        xhr.send();
+                                    })
+                            }
+                        } else {
+                            let div = document.createElement('div')
+                            div.innerText = '文件加载异常'
+                            this.contentView.appendChild(div)
+                            this.$refs.pdfView.appendChild(this.contentView)
+                        }
+                    })
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted () {
+        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+            this.isPC = false
+        } else {
+            this.isPC = true
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pdf_view {
+    width: 100%;
+    // height: calc(100% - 110px);
+    height: 100%;
+    overflow: auto;
+    //overflow-y: scroll;
+    background-color: #f5f7fb;
+    // margin-bottom: 60px;
+    box-sizing: border-box;
+    // position: relative;
+    // > div {
+    //     width: 100%;
+    //     height: 100%;
+    //     overflow: hidden;
+    //     overflow-y: auto;
+    //     position: relative;
+    // }
+    >iframe {
+        width: 100%;
+        height: 100%;
+    }
+
+    a:link {
+        color: none;
+    }
+
+    a:visited {
+        color: none;
+    }
+
+    a:hover {
+        color: none;
+    }
+
+    a:active {
+        color: none;
+    }
+    .btn_footer {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        z-index: 999;
+        background: #ffffff;
+
+        .prev,
+        .next {
+            width: 35%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50px;
+            cursor: pointer;
+        }
+
+        .prev {
+            background: #F2F5FA;
+            color: #000;
+        }
+
+        .next {
+            background: #366aff;
+            color: #ffffff;
+        }
+    }
+
+    #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;
+        z-index: 1000;
+
+
+
+        /deep/.el-pagination {
+            margin-right: 110px;
+        }
+
+        /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;
+        }
+    }
+
+    .change_scale {
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        top: 50px;
+        left: 0;
+        background: #ffffff;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        box-sizing: border-box;
+
+        section {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            margin-right: 5px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            i {
+                font-weight: 900;
+            }
+        }
+
+        section:hover {
+            background: rgba(221, 222, 223, 1);
+        }
+    }
+  .pdf_container_view{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: auto;
+  }
+}
+</style>
+<style lang="less">
+.animation {
+    animation-name: highlight;
+    animation-duration: 4s;
+}
+
+@keyframes highlight {
+    0% {
+        background: rgba(255, 136, 0, 0.3);
+    }
+
+    25% {
+        background: rgba(255, 136, 0, 0.6);
+    }
+
+    50% {
+        background: rgba(255, 136, 0, 0.3);
+    }
+
+    75% {
+        background: rgba(255, 136, 0, 0.6);
+    }
+
+    100% {
+        background: rgba(255, 136, 0, 0.3);
+    }
+}</style>