askbot-dragon 1.5.17 → 1.5.18-beta

package/src/components/pdfPosition.vue

@@ -1,1141 +1,1553 @@
-<template>
-    <div 
-        class="pdf_view" 
-        ref="pdfView" 
-        @scroll="pdfScroll" 
-        :style="{
-            marginTop: isPC ? '50px' : '',
-            marginBottom: tagIds.length > 1 ? '60px' : '0px',
-            height: setHeight
-        }">
-        <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="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>
-import _ from 'lodash'
-// 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']
-// import { zoomElement } from '../assets/js/hammer'
-export default {
-    name: 'pdfView',
-    props:['tagIds','isMessageRecord'],
-    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,
-            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
-            // console.log(this.scale,'this.scale');
-            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].loading)) {
-                return
-            }
-            this.pages[loadPage - 1].loading = true
-            // 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((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) {
-                        pdfDoc.getPage(i + 1).then((pdfPage) => {
-                            page.pdfPage = pdfPage;
-                            page.loadStatus = this.pageLoadStatus.LOADED;
-                            // 通知可以进行渲染了
-                            this.startRenderPages(pdfPage, page, pageIndex)
-                        });
-                    } else {
-                        if (this.changetoolbar) {
-                            this.$nextTick(() => {
-                                this.renderHighlights()
-                            })
-                            this.changetoolbar = false
-                        }
-                    }
-                }
-            });
-        },
-        initPages (totalPage) {
-            // const pages = [];
-            this.totalPageCount = totalPage
-            for (let i = 0; i < totalPage; i += 1) {
-                this.pages.push({
-                    pageNo: i + 1,
-                    loadStatus: this.pageLoadStatus.WAIT,
-                    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);
-            }
-            this.renderPages(pageIndex)
-        },
-        renderPageContent (page, pageIndex) {
-            const { pdfPage, pageNo, dom } = page;
-            // dom 元素已存在，无须重新渲染，直接返回
-            if (dom && dom.children.length != 0) {
-                return;
-            }
-            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;
-            // 创建渲染的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.appendChild(canvas);
-            // 渲染内容
-            let renderContext = {
-                canvasContext: context,
-                viewport: viewport,
-            }
-            pdfPage.render(renderContext).promise.then(() => {
-                console.log(pdfPage.getTextContent(), 'getTextContent');
-                return pdfPage.getTextContent()
-            }).then((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(() => {
-                        console.log(findPage,'findPage');
-                    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')
-                            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] + postionArr[3] / 9) * 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] + postionArr[3] / 9) * this.scale * this.transformSalce
-                                        } else {
-                                            rectdomTop = (postionArr[1] + postionArr[3] / 9) * this.scale
-                                        }
-                                        // if(this.isPC) {
-                                        //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
-                                        // }
-                                        // console.log(rectdomTop,div.style.top, (postionArr[1] + postionArr[3] / 9) * this.scale);
-                                    }
-                                }
-                            }
-                            if (rectdom.children.length > 0) {
-                                pageDom.appendChild(rectdom)
-                            }
-                        }
-                    }
-                }
-                textLayer.setTextContent(textContent);
-                textLayer.render()
-                pageDom.appendChild(textLayer.textLayerDiv);
-                page.dom = pageDom;
-                page.loading = false
-                this.contentView.appendChild(pageDom);
-                if(this.transformSalce !== null) {
-                    this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
-                }
-                if (this.changetoolbar) {
-                    setTimeout(() => {
-                        this.renderHighlights()
-                        this.changetoolbar = false
-                    }, 100)
-                }
-                // console.log(this.fisrtLoad,'this.fisrtLoad');
-                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)) 
-                                console.log( Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL)  * this.transformSalce)),this.pageSize.height , this.PAGE_INTVERVAL, height, this.transformSalce,'startNum');
-                            
-                            } 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)
-                }
-            }
-            console.log('=======');
-        }, 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;
-                }
-            }
-            return pagesToRender;
-        },
-        // 渲染需要展示的页面，不需展示的页码将其清除
-        renderPages (pageIndex) {
-            const pagesToRender = this.getRenderScope(pageIndex);
-            for (const i of this.pages) {
-                if (pagesToRender.includes(i)) {
-                    i.loadStatus === this.pageLoadStatus.LOADED ?
-                        this.renderPageContent(i, pageIndex) :
-                        this.renderPageLoading(i);
-                } else {
-                    this.clearPage(i);
-                }
-            }
-        },
-        // 清除页面 dom
-        clearPage (page) {
-            if (page.dom) {
-                this.contentView.removeChild(page.dom);
-                page.loadStatus = 0
-                page.loading = false
-                page.dom = undefined;
-            }
-        },
-        // 页面正在下载时渲染loading视图
-        renderPageLoading (page) {
-            const { pageNo, dom } = page;
-            if (dom && dom.children.length != 0) {
-                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'
-            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}`
-            } else {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.identifyTextPostion.top}`
-            }
-        },
-        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'))
-            console.log(lineHeightDom, this.currentPage, 'this.currentPage');
-            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
-                    })
-                } else {
-                    this.currentPageAllLine.push({
-                        page: item.page,
-                        allLines: [{
-                            pageCount: index,
-                            lines: item.extractInfo.lines
-                        }],
-                    })
-                }
-            })
-        },
-        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;
-                    // console.log(that.displacement);
-                });
-                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;
-                        console.log(zoom, newScale , this.scale, 'newScale');
-                        // 最大缩放比例限制
-                        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');
-            console.log(canvas.width, canvas.height, dpr, this.scale);
-            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])
-        },
-    },
-    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.style.transformOrigin = '0px 0px 0px'
-                    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)' 
-                        // }
-                        if (res.data.code == 0) {
-                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
-                            // 缓存拿到的所有数据
-                            this.cachePdf = res.data.data
-                            let publicPageFileUrl = res.data.data[0].publicPageFileUrl
-                            this.currentPage = 0
-                            // console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
-                            if (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
-                                                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);
-    overflow: auto;
-    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);
-        }
-    }
-}
-
-</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);
-    }
-}
+<template>
+    <div 
+        class="pdf_view" 
+        ref="pdfView" 
+        @scroll="pdfScroll" 
+        :style="{
+            marginTop: isPC ? '50px' : '',
+            marginBottom: tagIds.length > 1 ? '60px' : '0px',
+            height: setHeight
+        }">
+        <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="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>
+import _ from 'lodash'
+// 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']
+// import { zoomElement } from '../assets/js/hammer'
+export default {
+    name: 'pdfView',
+    props:['tagIds','isMessageRecord'],
+    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,
+            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
+            // console.log(this.scale,'this.scale');
+            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].loading)) {
+                return
+            }
+            this.pages[loadPage - 1].loading = true
+            // 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((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) {
+                        pdfDoc.getPage(i + 1).then((pdfPage) => {
+                            page.pdfPage = pdfPage;
+                            page.loadStatus = this.pageLoadStatus.LOADED;
+                            // 通知可以进行渲染了
+                            this.startRenderPages(pdfPage, page, pageIndex)
+                        });
+                    } else {
+                        if (this.changetoolbar) {
+                            this.$nextTick(() => {
+                                this.renderHighlights()
+                            })
+                            this.changetoolbar = false
+                        }
+                    }
+                }
+            });
+        },
+        initPages (totalPage) {
+            // const pages = [];
+            this.totalPageCount = totalPage
+            for (let i = 0; i < totalPage; i += 1) {
+                this.pages.push({
+                    pageNo: i + 1,
+                    loadStatus: this.pageLoadStatus.WAIT,
+                    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);
+            }
+            this.renderPages(pageIndex)
+        },
+        renderPageContent (page, pageIndex) {
+            const { pdfPage, pageNo, dom } = page;
+            // dom 元素已存在，无须重新渲染，直接返回
+            if (dom && dom.children.length != 0) {
+                return;
+            }
+            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;
+            // 创建渲染的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.appendChild(canvas);
+            // 渲染内容
+            let renderContext = {
+                canvasContext: context,
+                viewport: viewport,
+            }
+            pdfPage.render(renderContext).promise.then(() => {
+                console.log(pdfPage.getTextContent(), 'getTextContent');
+                return pdfPage.getTextContent()
+            }).then((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(() => {
+                        console.log(findPage,'findPage');
+                    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')
+                            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] + postionArr[3] / 9) * 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] + postionArr[3] / 9) * this.scale * this.transformSalce
+                                        } else {
+                                            rectdomTop = (postionArr[1] + postionArr[3] / 9) * this.scale
+                                        }
+                                        // if(this.isPC) {
+                                        //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
+                                        // }
+                                        // console.log(rectdomTop,div.style.top, (postionArr[1] + postionArr[3] / 9) * this.scale);
+                                    }
+                                }
+                            }
+                            if (rectdom.children.length > 0) {
+                                pageDom.appendChild(rectdom)
+                            }
+                        }
+                    }
+                }
+                textLayer.setTextContent(textContent);
+                textLayer.render()
+                pageDom.appendChild(textLayer.textLayerDiv);
+                page.dom = pageDom;
+                page.loading = false
+                this.contentView.appendChild(pageDom);
+                if(this.transformSalce !== null) {
+                    this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
+                }
+                if (this.changetoolbar) {
+                    setTimeout(() => {
+                        this.renderHighlights()
+                        this.changetoolbar = false
+                    }, 500)
+                }
+                // console.log(this.fisrtLoad,'this.fisrtLoad');
+                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)) 
+                                console.log( Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL)  * this.transformSalce)),this.pageSize.height , this.PAGE_INTVERVAL, height, this.transformSalce,'startNum');
+                            
+                            } 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)
+                }
+            }
+            console.log('=======');
+        }, 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;
+                }
+            }
+            return pagesToRender;
+        },
+        // 渲染需要展示的页面，不需展示的页码将其清除
+        renderPages (pageIndex) {
+            const pagesToRender = this.getRenderScope(pageIndex);
+            for (const i of this.pages) {
+                if (pagesToRender.includes(i)) {
+                    i.loadStatus === this.pageLoadStatus.LOADED ?
+                        this.renderPageContent(i, pageIndex) :
+                        this.renderPageLoading(i);
+                } else {
+                    this.clearPage(i);
+                }
+            }
+        },
+        // 清除页面 dom
+        clearPage (page) {
+            if (page.dom) {
+                this.contentView.removeChild(page.dom);
+                page.loadStatus = 0
+                page.loading = false
+                page.dom = undefined;
+            }
+        },
+        // 页面正在下载时渲染loading视图
+        renderPageLoading (page) {
+            const { pageNo, dom } = page;
+            if (dom && dom.children.length != 0) {
+                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'
+            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'))
+            console.log(lineHeightDom, this.currentPage, 'this.currentPage');
+            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
+                    })
+                } else {
+                    this.currentPageAllLine.push({
+                        page: item.page,
+                        allLines: [{
+                            pageCount: index,
+                            lines: item.extractInfo.lines
+                        }],
+                    })
+                }
+            })
+        },
+        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;
+                    // console.log(that.displacement);
+                });
+                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;
+                        console.log(zoom, newScale , this.scale, 'newScale');
+                        // 最大缩放比例限制
+                        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');
+            console.log(canvas.width, canvas.height, dpr, this.scale);
+            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])
+        },
+    },
+    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.style.transformOrigin = '0px 0px 0px'
+                    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": "6501ae851169c35ace9739f7",
+                        //             "knowledgeId": "6501ae444f324a70bf677cce",
+                        //             "mainId": "b3cec709ed904d56b29cb95362dc181f",
+                        //             "page": 5,
+                        //             "total": 118,
+                        //             "pageHeight": 540.0,
+                        //             "pageWidth": 960.00946,
+                        //             "publicPageFileUrl": "https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/b3cec709ed904d56b29cb95362dc181f/2023/09/13/08/43/12/6501ae451169c35ace9739b7/5.pdf",
+                        //             "extractInfo": {
+                        //                 "location": [
+                        //                     42.208,
+                        //                     297.014,
+                        //                     723.56104,
+                        //                     41.18799
+                        //                 ],
+                        //                 "content": "体验整体提升，推出全渠道、智能化知识管理平台，面向员工智能服务，业务自动化，知识智能搜索与问答场景。成为飞书ISVAI交互专利发布国家高新技术企业北京市科技型中小企业认证北京市创新型中小企业认证AAA企业信用评价认证优衣库",
+                        //                 "lines": [
+                        //                     {
+                        //                         "content": "体验整体提升，推出全",
+                        //                         "location": [
+                        //                             42.208,
+                        //                             297.014,
+                        //                             119.874016,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "渠道、智能化知识管理",
+                        //                         "location": [
+                        //                             42.208,
+                        //                             314.50302,
+                        //                             119.874016,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "平台，面向员工智能服",
+                        //                         "location": [
+                        //                             42.208,
+                        //                             332.022,
+                        //                             119.874016,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "务，业务自动化，知识",
+                        //                         "location": [
+                        //                             42.208,
+                        //                             349.398,
+                        //                             119.874016,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "智能搜索与问答场景。",
+                        //                         "location": [
+                        //                             42.208,
+                        //                             366.916,
+                        //                             119.874016,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "成为飞书",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             270.311,
+                        //                             47.951996,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "ISV",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             284.711,
+                        //                             18.47815,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "AI交互专利发",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             300.018,
+                        //                             74.64407,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "布",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             314.418,
+                        //                             11.990997,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "国家高新技术企",
+                        //                         "location": [
+                        //                             363.713,
+                        //                             330.009,
+                        //                             83.93698,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "业",
+                        //                         "location": [
+                        //                             363.713,
+                        //                             344.409,
+                        //                             11.990997,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "北京市科技型中小企业认",
+                        //                         "location": [
+                        //                             363.798,
+                        //                             359.915,
+                        //                             131.90097,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "证",
+                        //                         "location": [
+                        //                             363.798,
+                        //                             374.315,
+                        //                             11.990997,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "北京市创新型中小企业认",
+                        //                         "location": [
+                        //                             363.798,
+                        //                             389.905,
+                        //                             131.90097,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "证",
+                        //                         "location": [
+                        //                             363.798,
+                        //                             404.22,
+                        //                             11.990997,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "AAA企业信用评价认",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             419.811,
+                        //                             112.02899,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "证",
+                        //                         "location": [
+                        //                             362.409,
+                        //                             434.09702,
+                        //                             11.990997,
+                        //                             11.990997
+                        //                         ]
+                        //                     },
+                        //                     {
+                        //                         "content": "优衣库",
+                        //                         "location": [
+                        //                             729.808,
+                        //                             326.211,
+                        //                             35.96106,
+                        //                             11.990997
+                        //                         ]
+                        //                     }
+                        //                 ],
+                        //                 "tagId": null
+                        //             },
+                        //             "block": {
+                        //                 "type": "TEXT",
+                        //                 "location": [
+                        //                     42.208,
+                        //                     297.014,
+                        //                     723.56104,
+                        //                     41.18799
+                        //                 ],
+                        //                 "color": null,
+                        //                 "flowChart": null,
+                        //                 "image": null,
+                        //                 "table": null,
+                        //                 "text": {
+                        //                     "originText": "体验整体提升，推出全渠道、智能化知识管理平台，面向员工智能服务，业务自动化，知识智能搜索与问答场景。成为飞书ISVAI交互专利发布国家高新技术企业北京市科技型中小企业认证北京市创新型中小企业认证AAA企业信用评价认证优衣库",
+                        //                     "indexText": "体验整体提升，推出全渠道、智能化知识管理平台，面向员工智能服务，业务自动化，知识智能搜索与问答场景。成为飞书ISVAI交互专利发布国家高新技术企业北京市科技型中小企业认证北京市创新型中小企业认证AAA企业信用评价认证优衣库",
+                        //                     "lines": [
+                        //                         {
+                        //                             "location": [
+                        //                                 42.208,
+                        //                                 297.014,
+                        //                                 119.874016,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 42.208,
+                        //                                 314.50302,
+                        //                                 119.874016,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 42.208,
+                        //                                 332.022,
+                        //                                 119.874016,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 42.208,
+                        //                                 349.398,
+                        //                                 119.874016,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 42.208,
+                        //                                 366.916,
+                        //                                 119.874016,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 270.311,
+                        //                                 47.951996,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 284.711,
+                        //                                 18.47815,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 300.018,
+                        //                                 74.64407,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 314.418,
+                        //                                 11.990997,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.713,
+                        //                                 330.009,
+                        //                                 83.93698,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.713,
+                        //                                 344.409,
+                        //                                 11.990997,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.798,
+                        //                                 359.915,
+                        //                                 131.90097,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.798,
+                        //                                 374.315,
+                        //                                 11.990997,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.798,
+                        //                                 389.905,
+                        //                                 131.90097,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 363.798,
+                        //                                 404.22,
+                        //                                 11.990997,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 419.811,
+                        //                                 112.02899,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 362.409,
+                        //                                 434.09702,
+                        //                                 11.990997,
+                        //                                 11.990997
+                        //                             ]
+                        //                         },
+                        //                         {
+                        //                             "location": [
+                        //                                 729.808,
+                        //                                 326.211,
+                        //                                 35.96106,
+                        //                                 11.990997
+                        //                             ]
+                        //                         }
+                        //                     ]
+                        //                 }
+                        //             }
+                        //         },
+                        //         {
+                        //             "id": "6501ae871169c35ace973a87",
+                        //             "knowledgeId": "6501ae444f324a70bf677cce",
+                        //             "mainId": "b3cec709ed904d56b29cb95362dc181f",
+                        //             "page": 32,
+                        //             "total": 118,
+                        //             "pageHeight": 540.0,
+                        //             "pageWidth": 960.00946,
+                        //             "publicPageFileUrl": "https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/b3cec709ed904d56b29cb95362dc181f/2023/09/13/08/43/12/6501ae451169c35ace9739b7/32.pdf",
+                        //             "extractInfo": {
+                        //                 "location": [
+                        //                     28.913,
+                        //                     30.983013,
+                        //                     307.587,
+                        //                     28.006
+                        //                 ],
+                        //                 "content": "智能化知识管理价值体现",
+                        //                 "lines": [
+                        //                     {
+                        //                         "content": "智能化知识管理价值体现",
+                        //                         "location": [
+                        //                             28.913,
+                        //                             30.983013,
+                        //                             307.587,
+                        //                             28.006
+                        //                         ]
+                        //                     }
+                        //                 ],
+                        //                 "tagId": null
+                        //             },
+                        //             "block": {
+                        //                 "type": "TEXT",
+                        //                 "location": [
+                        //                     28.913,
+                        //                     30.983013,
+                        //                     307.587,
+                        //                     28.006
+                        //                 ],
+                        //                 "color": null,
+                        //                 "flowChart": null,
+                        //                 "image": null,
+                        //                 "table": null,
+                        //                 "text": {
+                        //                     "originText": "智能化知识管理价值体现",
+                        //                     "indexText": "智能化知识管理价值体现",
+                        //                     "lines": [
+                        //                         {
+                        //                             "location": [
+                        //                                 28.913,
+                        //                                 30.983013,
+                        //                                 307.587,
+                        //                                 28.006
+                        //                             ]
+                        //                         }
+                        //                     ]
+                        //                 }
+                        //             }
+                        //         }
+                        //     ],
+                        //     "code": "0",
+                        //     "msg": null,
+                        //     "traceId": null
+                        // }
+                        if (res.data.code == 0) {
+                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
+                            // 缓存拿到的所有数据
+                            this.cachePdf = res.data.data
+                            let publicPageFileUrl = res.data.data[0].publicPageFileUrl
+                            this.currentPage = 0
+                            // console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
+                            if (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
+                                                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);
+    overflow: auto;
+    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);
+        }
+    }
+}
+
+</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>