askbot-dragon 1.5.15 → 1.5.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/kkview.vue

@@ -0,0 +1,1139 @@
+<template>
+    <div class="pdf_view" ref="pdfView" @scroll="pdfScroll" :style="{
+        marginTop: isPC ? '50px' : '',
+        marginBottom: tagIds.length > 1 ? '60px' : '0px',
+        height: setHeight
+    }">
+
+        <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',
+                'https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.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);
+    }
+}</style>

package/src/components/pdfPosition.vue

@@ -871,7 +871,7 @@ export default {
                             // console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
                             if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
                                 this.preViewType = 'pdf'
-                                // this.setPageAllLine(this.cachePdf)
+                                this.setPageAllLine(this.cachePdf)
                                 this.getpdfResloutePage(res.data.data[0])
                             } else {
                                 this.preViewType = 'excal'