askbot-dragon 1.3.55 → 1.3.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -13,7 +13,10 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
</div>
|
|
16
|
-
<div v-html="item.introduction" class="alc-box-introduction">
|
|
16
|
+
<div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="alc-box-introduction">
|
|
17
|
+
</div>
|
|
18
|
+
<div v-else class="alc-box-introduction">
|
|
19
|
+
<img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
|
|
17
20
|
</div>
|
|
18
21
|
<div class="alc-updateTime">
|
|
19
22
|
<div v-show="docSource[item.source]" class="upload-source">
|
|
@@ -199,6 +202,33 @@ export default {
|
|
|
199
202
|
return 'OTHER'
|
|
200
203
|
}
|
|
201
204
|
},
|
|
205
|
+
srcContentTypeIMG(item) {
|
|
206
|
+
let url = item.url
|
|
207
|
+
const type = url.substring(url.lastIndexOf('.'));
|
|
208
|
+
if(type === '.jpg' || type === '.jpeg' || type === '.png' || type === '.gif') {
|
|
209
|
+
this.getSrc(item)
|
|
210
|
+
return true
|
|
211
|
+
} else {
|
|
212
|
+
return false
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
getSrc (item) {
|
|
216
|
+
// let imgurl = ''
|
|
217
|
+
this.$http.post(
|
|
218
|
+
'/knowledge-api/temporary-certificate/or-origin?expired=30',
|
|
219
|
+
item.url,
|
|
220
|
+
{
|
|
221
|
+
headers: {
|
|
222
|
+
"Content-Type": "application/json",
|
|
223
|
+
},
|
|
224
|
+
}).then(async res => {
|
|
225
|
+
// console.log(res,'=====');
|
|
226
|
+
// imgurl = await res.bodyText
|
|
227
|
+
this.$set(item,'expiredUrl',res.bodyText)
|
|
228
|
+
// return res.data
|
|
229
|
+
})
|
|
230
|
+
// return imgurl
|
|
231
|
+
}
|
|
202
232
|
}
|
|
203
233
|
}
|
|
204
234
|
</script>
|
|
@@ -277,6 +307,12 @@ export default {
|
|
|
277
307
|
// font-size: 12px;
|
|
278
308
|
line-height: 24px;
|
|
279
309
|
text-align: left;
|
|
310
|
+
img {
|
|
311
|
+
width: 50px;
|
|
312
|
+
height: 50px;
|
|
313
|
+
margin: 10px;
|
|
314
|
+
cursor: pointer;
|
|
315
|
+
}
|
|
280
316
|
}
|
|
281
317
|
.alc-updateTime{
|
|
282
318
|
display: flex;
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
<feed-back :feedBack="feedBack"></feed-back>
|
|
43
43
|
<voice-compontent></voice-compontent> -->
|
|
44
44
|
<ai-guide :aiGuide="ActionAiGuideObj"></ai-guide>
|
|
45
|
-
<answer-voice @stopOtherAudio="stopOtherAudio" ref="audioTagCell" :msg="answerVoiceObj"></answer-voice>
|
|
46
|
-
<answer-voice @stopOtherAudio="stopOtherAudio" ref="audioTagCell" :msg="answerVoiceObj1"></answer-voice>
|
|
45
|
+
<!-- <answer-voice @stopOtherAudio="stopOtherAudio" ref="audioTagCell" :msg="answerVoiceObj"></answer-voice>
|
|
46
|
+
<answer-voice @stopOtherAudio="stopOtherAudio" ref="audioTagCell" :msg="answerVoiceObj1"></answer-voice> -->
|
|
47
47
|
|
|
48
48
|
<!-- <FileType :urls="urls" :color="black"></FileType>-->
|
|
49
49
|
<!-- <FileType :urls="urls" :color="black"></FileType>
|
|
@@ -80,7 +80,7 @@ import FeedBack from "@/components/feedBack";*/
|
|
|
80
80
|
/*import ActionAlert from "@/components/message/ActionAlertIframe";*/
|
|
81
81
|
// 智能引导组件
|
|
82
82
|
import AiGuide from "@/components/AiGuide";
|
|
83
|
-
import AnswerVoice from "@/components/AnswerVoice";
|
|
83
|
+
// import AnswerVoice from "@/components/AnswerVoice";
|
|
84
84
|
// import FileType from "@/components/FileType";
|
|
85
85
|
// import ChatContent from "./chatContent";
|
|
86
86
|
// import FeedBack from '@/components/feedBack'
|
|
@@ -105,7 +105,7 @@ export default {
|
|
|
105
105
|
// FeedBack,
|
|
106
106
|
// VoiceCompontent,
|
|
107
107
|
AiGuide,
|
|
108
|
-
AnswerVoice,
|
|
108
|
+
// AnswerVoice,
|
|
109
109
|
FormTemplate,
|
|
110
110
|
// FormTemplate,
|
|
111
111
|
// FileType,
|
|
@@ -170,6 +170,20 @@ export default {
|
|
|
170
170
|
text: "女职工生育享受98天产假，其中产前可以休假15天",
|
|
171
171
|
type: 0, // 0 确定答案 1 推荐 list
|
|
172
172
|
list:[// 文档列表
|
|
173
|
+
{
|
|
174
|
+
"tagIds": [
|
|
175
|
+
],
|
|
176
|
+
"format": "png" ,
|
|
177
|
+
"srcContentId": "1490543591955fe8d053651f0dea5b2d" ,
|
|
178
|
+
"updateTime": "2023-04-24 16:28:04" ,
|
|
179
|
+
"source": "LOCAL_FILE" ,
|
|
180
|
+
"srcContent": "一图读懂-《SHOP-C03007 分店关于周大福会员运营相关流程》.png" ,
|
|
181
|
+
"url": "https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/ed5c360e9acb4e99ac3f700e51345f68/2023/04/24/16/28/760f748f010efce9783e7520dd37506b/一图读懂-《SHOP-C03007 分店关于周大福会员运营相关流程》.png" ,
|
|
182
|
+
"knowledgeId": "64463d8f6536035e3be5c406" ,
|
|
183
|
+
"knowledgePartId": "hS1gsocBWM9clVECig2o" ,
|
|
184
|
+
"from": "一图读懂-《SHOP-C03007 分店关于周大福会员运营相关流程》.png" ,
|
|
185
|
+
"introduction": "一图读懂-《SHOP-C03007 分店关于周大福会员运营相关流程》.png"
|
|
186
|
+
},
|
|
173
187
|
{
|
|
174
188
|
"knowledgeId": "642b9bbb81c8a21e5731b4f1",
|
|
175
189
|
"format": "doc",
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="pdf_view" ref="pdfView" @scroll="pdfScroll">
|
|
3
|
+
<div class="btn_footer">
|
|
4
|
+
<div class="prev" @click="prev">上一段</div>
|
|
5
|
+
<div class="next" @click="next">下一段</div>
|
|
6
|
+
</div>
|
|
3
7
|
</div>
|
|
4
8
|
</template>
|
|
5
9
|
|
|
@@ -10,58 +14,364 @@ import _ from 'lodash'
|
|
|
10
14
|
// import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
|
|
11
15
|
// EventBus pdf_viewer 支持绑定自定义事件，一版不做
|
|
12
16
|
// import 'pdfjs-dist/web/pdf_viewer.css'
|
|
13
|
-
|
|
14
|
-
const pdfjsLib = window['
|
|
17
|
+
/* eslint-disable */
|
|
18
|
+
const pdfjsLib = window['pdfjsLib']
|
|
15
19
|
if(pdfjsLib) {
|
|
16
|
-
pdfjsLib.GlobalWorkerOptions.workerSrc = window['
|
|
20
|
+
pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
|
|
17
21
|
// 'pdfjs-dist/build/pdf.worker';
|
|
18
22
|
}
|
|
19
|
-
const { TextLayerBuilder } = window['
|
|
23
|
+
const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
|
|
20
24
|
export default {
|
|
21
25
|
name: 'pdfView',
|
|
22
|
-
props:['
|
|
26
|
+
props:['tagIds'],
|
|
23
27
|
data() {
|
|
24
28
|
return {
|
|
25
|
-
url:'',
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
url: '',
|
|
30
|
+
// pdfjsLib: window['pdfjs-dist/build/pdf'],
|
|
31
|
+
// pdfjsLib: pdfjsLib,
|
|
32
|
+
pages: [],
|
|
33
|
+
pageLoadStatus: {
|
|
28
34
|
WAIT: 0,
|
|
29
|
-
LOADED:1,
|
|
35
|
+
LOADED: 1,
|
|
30
36
|
},
|
|
31
37
|
scale: 1,
|
|
32
|
-
rotation:0,
|
|
38
|
+
rotation: 0,
|
|
33
39
|
pageSize: {},
|
|
34
40
|
PAGE_INTVERVAL: 15,
|
|
35
|
-
SLICE_COUNT:5,
|
|
36
|
-
contentView:null,
|
|
37
|
-
fisrtLoad:true,
|
|
38
|
-
TextLayerBuilder:null,
|
|
41
|
+
SLICE_COUNT: 5,
|
|
42
|
+
contentView: null,
|
|
43
|
+
fisrtLoad: true,
|
|
44
|
+
TextLayerBuilder: null,
|
|
39
45
|
totalPageCount: 0,
|
|
40
|
-
identifyTextPostion:{
|
|
46
|
+
identifyTextPostion: {
|
|
41
47
|
top: 0,
|
|
42
|
-
left: 0
|
|
48
|
+
left: 0,
|
|
43
49
|
width: 100,
|
|
44
50
|
height: 0,
|
|
45
51
|
page: 1,
|
|
46
|
-
pageHeight:0,
|
|
47
|
-
pageWidth:0,
|
|
48
|
-
extractInfo:{}
|
|
52
|
+
pageHeight: 0,
|
|
53
|
+
pageWidth: 0,
|
|
54
|
+
extractInfo: {},
|
|
55
|
+
currentPageAllLine: []
|
|
49
56
|
},
|
|
50
|
-
|
|
57
|
+
currentPageAllLine: [],
|
|
58
|
+
pdfUrl: '',
|
|
59
|
+
cachePdf: [],
|
|
60
|
+
newViewer: null,
|
|
61
|
+
currentPage: 0,
|
|
62
|
+
changetoolbar: false,
|
|
63
|
+
allTr:[],
|
|
64
|
+
preViewType: 'pdf'
|
|
51
65
|
}
|
|
52
66
|
},
|
|
53
|
-
methods:{
|
|
54
|
-
|
|
67
|
+
// methods:{
|
|
68
|
+
// getpdfResloutePage (pdfResloute) {
|
|
69
|
+
// // 根据当前页面宽度设置缩放比例
|
|
70
|
+
// this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
|
|
71
|
+
// // this.scale = 1
|
|
72
|
+
// // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
|
|
73
|
+
// this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
|
|
74
|
+
// this.initPages(pdfResloute.total)
|
|
75
|
+
// // 定位功能，加载对应页码位置
|
|
76
|
+
// this.loadPdfData(pdfResloute.page)
|
|
77
|
+
// },
|
|
78
|
+
// setPageAllLine (arr) {
|
|
79
|
+
// this.currentPageAllLine = []
|
|
80
|
+
// arr.forEach((item, index) => {
|
|
81
|
+
// let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
|
|
82
|
+
// if (i != -1) {
|
|
83
|
+
// // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
|
|
84
|
+
// this.currentPageAllLine[i].allLines.push({
|
|
85
|
+
// pageCount: index,
|
|
86
|
+
// lines: item.extractInfo.lines
|
|
87
|
+
// })
|
|
88
|
+
// } else {
|
|
89
|
+
// this.currentPageAllLine.push({
|
|
90
|
+
// page: item.page,
|
|
91
|
+
// allLines: [{
|
|
92
|
+
// pageCount: index,
|
|
93
|
+
// lines: item.extractInfo.lines
|
|
94
|
+
// }],
|
|
95
|
+
// })
|
|
96
|
+
// }
|
|
97
|
+
// })
|
|
98
|
+
// },
|
|
99
|
+
// async loadPdfData(loadPage) {
|
|
100
|
+
// // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
|
|
101
|
+
// // 拿到第一个分片
|
|
102
|
+
// const { startPage, url } = await this.fetchPdfFragment(loadPage);
|
|
103
|
+
// console.log(url);
|
|
104
|
+
// let loadingTask = pdfjsLib.getDocument(url)
|
|
105
|
+
// console.log(loadingTask);
|
|
106
|
+
// loadingTask.then((pdfDoc) => {
|
|
107
|
+
// // 将已经下载的分片保存到 pages 数组中
|
|
108
|
+
// for (let i = 0; i < pdfDoc.numPages; i += 1) {
|
|
109
|
+
// const pageIndex = startPage + i;
|
|
110
|
+
// const page = this.pages[pageIndex - 1];
|
|
111
|
+
// if (page.loadStatus !== this.pageLoadStatus.LOADED) {
|
|
112
|
+
// pdfDoc.getPage(i + 1).then((pdfPage) => {
|
|
113
|
+
// page.pdfPage = pdfPage;
|
|
114
|
+
// page.loadStatus = this.pageLoadStatus.LOADED;
|
|
115
|
+
// // 通知可以进行渲染了
|
|
116
|
+
// this.startRenderPages(pdfPage, page, pageIndex)
|
|
117
|
+
// });
|
|
118
|
+
// }
|
|
119
|
+
// }
|
|
120
|
+
// });
|
|
121
|
+
// },
|
|
122
|
+
// initPages(totalPage) {
|
|
123
|
+
// // const pages = [];
|
|
124
|
+
// this.totalPageCount = totalPage
|
|
125
|
+
// for (let i = 0; i < totalPage; i += 1) {
|
|
126
|
+
// this.pages.push({
|
|
127
|
+
// pageNo: i + 1,
|
|
128
|
+
// loadStatus: this.pageLoadStatus.WAIT,
|
|
129
|
+
// pdfPage: null,
|
|
130
|
+
// dom: null
|
|
131
|
+
// });
|
|
132
|
+
// }
|
|
133
|
+
// },
|
|
134
|
+
// async fetchPdfFragment (pageIndex) {
|
|
135
|
+
// // 置换加签后的文件地址。
|
|
136
|
+
// let obj = {}
|
|
137
|
+
// await this.$http.post(
|
|
138
|
+
// '/knowledge-api/temporary-certificate/or-origin?expired=30', this.pdfUrl + pageIndex + '.pdf', {
|
|
139
|
+
// headers:{
|
|
140
|
+
// "Content-Type": "application/json",
|
|
141
|
+
// }
|
|
142
|
+
// }).then(async res => {
|
|
143
|
+
// console.log(res,'resres');
|
|
144
|
+
// if (res.bodyText) {
|
|
145
|
+
// // 最后返回一个 包含这4个参数的对象
|
|
146
|
+
// obj = await {
|
|
147
|
+
// "startPage": pageIndex, // 分片的开始页码
|
|
148
|
+
// "endPage": pageIndex + 5, // 分片结束页码
|
|
149
|
+
// "totalPage": this.totalPageCount, // pdf 总页数
|
|
150
|
+
// "url": res.bodyText // 分片内容下载地址
|
|
151
|
+
// }
|
|
152
|
+
// }
|
|
153
|
+
// })
|
|
154
|
+
// return obj
|
|
155
|
+
// },
|
|
156
|
+
// startRenderPages(pdfPage, page , pageIndex) {
|
|
157
|
+
// const viewport = pdfPage.getViewport({
|
|
158
|
+
// scale: this.scale, // 缩放的比例
|
|
159
|
+
// rotation: this.rotation, // 旋转的角度
|
|
160
|
+
// });
|
|
161
|
+
// // 记录pdf页面高度
|
|
162
|
+
// const pageSize = {
|
|
163
|
+
// width: viewport.width,
|
|
164
|
+
// height: viewport.height,
|
|
165
|
+
// }
|
|
166
|
+
// this.pageSize = pageSize
|
|
167
|
+
// // 创建内容绘制区，并设置大小
|
|
168
|
+
// this.contentView.style.width = `${ pageSize.width }px`;
|
|
169
|
+
// this.contentView.style.height = `${( this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
|
|
170
|
+
// this.contentView.style.margin = '0 auto 0'
|
|
171
|
+
// this.contentView.style.position = 'relative'
|
|
172
|
+
// // contentView.style.overflowY = 'auto'
|
|
173
|
+
// this.$refs.pdfView.appendChild(this.contentView);
|
|
174
|
+
// this.renderPages(pageIndex)
|
|
175
|
+
// },
|
|
176
|
+
// renderPageContent(page, pageIndex) {
|
|
177
|
+
// const { pdfPage, pageNo, dom } = page;
|
|
178
|
+
// // dom 元素已存在，无须重新渲染，直接返回
|
|
179
|
+
// if (dom && dom.children.length != 0) {
|
|
180
|
+
// // console.log(dom.children, 'length');
|
|
181
|
+
// return;
|
|
182
|
+
// }
|
|
183
|
+
// const viewport = pdfPage.getViewport({
|
|
184
|
+
// scale: this.scale,
|
|
185
|
+
// rotation: this.rotation,
|
|
186
|
+
// });
|
|
187
|
+
// // 创建新的canvas
|
|
188
|
+
// const canvas = document.createElement('canvas');
|
|
189
|
+
// const context = canvas.getContext('2d');
|
|
190
|
+
// canvas.height = this.pageSize.height;
|
|
191
|
+
// canvas.width = this.pageSize.width;
|
|
192
|
+
// // 创建渲染的dom
|
|
193
|
+
// const pageDom = document.createElement('div');
|
|
194
|
+
// pageDom.style.position = 'absolute';
|
|
195
|
+
// pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
|
|
196
|
+
// pageDom.style.width = `${this.pageSize.width}px`;
|
|
197
|
+
// pageDom.style.height = `${this.pageSize.height}px`;
|
|
198
|
+
// pageDom.appendChild(canvas);
|
|
199
|
+
// // 渲染内容
|
|
200
|
+
// // console.log(pdfPage.render({
|
|
201
|
+
// // canvasContext: context,
|
|
202
|
+
// // viewport,
|
|
203
|
+
// // }));
|
|
204
|
+
// let renderContext = {
|
|
205
|
+
// canvasContext: context,
|
|
206
|
+
// viewport:viewport,
|
|
207
|
+
// }
|
|
208
|
+
// pdfPage.render(renderContext).promise.then(() =>{
|
|
209
|
+
// console.log(pdfPage.getTextContent(),'getTextContent');
|
|
210
|
+
// return pdfPage.getTextContent()
|
|
211
|
+
// }).then((textContent) =>{
|
|
212
|
+
// const textLayerDiv = document.createElement('div');
|
|
213
|
+
// textLayerDiv.setAttribute('class', 'textLayer');
|
|
214
|
+
// // 将文本图层div添加至每页pdf的div中
|
|
215
|
+
// // 创建新的TextLayerBuilder实例
|
|
216
|
+
// // 这里因为版本问题跟pc端有些差异
|
|
217
|
+
// pageDom.appendChild(textLayerDiv);
|
|
218
|
+
// let textLayer = new TextLayerBuilder({
|
|
219
|
+
// textLayerDiv:textLayerDiv,
|
|
220
|
+
// pageIndex: pdfPage._pageIndex,
|
|
221
|
+
// viewport: viewport,
|
|
222
|
+
// });
|
|
223
|
+
// textLayer.setTextContent(textContent);
|
|
224
|
+
// textLayer.render()
|
|
225
|
+
// })
|
|
226
|
+
// page.dom = pageDom;
|
|
227
|
+
// if(pageIndex == this.identifyTextPostion.page) {
|
|
228
|
+
// let div = document.createElement('div')
|
|
229
|
+
// div.style.position = 'absolute';
|
|
230
|
+
// let lineHeightScaleWidth = this.pageSize.width / this.identifyTextPostion.pageWidth
|
|
231
|
+
// let lineHeightScaleHeight = this.pageSize.height / this.identifyTextPostion.pageHeight
|
|
232
|
+
|
|
233
|
+
// div.style.left = this.identifyTextPostion.left * lineHeightScaleWidth + 'px',
|
|
234
|
+
// div.style.top = this.identifyTextPostion.top * lineHeightScaleHeight + 'px'
|
|
235
|
+
// div.style.height = this.identifyTextPostion.height * lineHeightScaleHeight + 'px' ;
|
|
236
|
+
// div.style.width = this.identifyTextPostion.width * lineHeightScaleWidth + 'px'
|
|
237
|
+
// div.style.backgroundColor = 'rgb(191, 185, 255, 0.5)'
|
|
238
|
+
// pageDom.appendChild(div)
|
|
239
|
+
// }
|
|
240
|
+
// this.contentView.appendChild(pageDom);
|
|
241
|
+
// if(this.fisrtLoad) {
|
|
242
|
+
// setTimeout(() =>{
|
|
243
|
+
// this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
|
|
244
|
+
// }, 100)
|
|
245
|
+
// this.fisrtLoad = false
|
|
246
|
+
// }
|
|
247
|
+
|
|
248
|
+
// },
|
|
249
|
+
// // 监听容器的滚动事件，触发 scrollPdf 方法
|
|
250
|
+
// // 这里加了防抖保证不会一次产生过多请求
|
|
251
|
+
// scrollPdf: _.debounce(function(e, that) {
|
|
252
|
+
// const scrollTop = e.target.scrollTop;
|
|
253
|
+
// const height = e.target.clientHeight;
|
|
254
|
+
// // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
|
|
255
|
+
// const pageIndex = scrollTop > 0 ?
|
|
256
|
+
// Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
|
|
257
|
+
// 1;
|
|
258
|
+
// // that.loadBefore(pageIndex);
|
|
259
|
+
// // that.loadAfter(pageIndex);
|
|
260
|
+
// this.loadPdfData(pageIndex)
|
|
261
|
+
// }, 500),
|
|
262
|
+
// pdfScroll(e) {
|
|
263
|
+
// // console.log(e);
|
|
264
|
+
// this.scrollPdf(e,this)
|
|
265
|
+
// },
|
|
266
|
+
// // 分片每次只做一次处理，所以不考虑多片情况
|
|
267
|
+
// loadBefore(pageIndex) {
|
|
268
|
+
// this.loadPdfData(pageIndex)
|
|
269
|
+
// // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) - (this.SLICE_COUNT - 1);
|
|
270
|
+
// // if (start > 0) {
|
|
271
|
+
// // // const prevPage = this.pages[start - 1] || {};
|
|
272
|
+
// // this.loadPdfData(start)
|
|
273
|
+
// // // prevPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
|
|
274
|
+
// // }
|
|
275
|
+
// },
|
|
276
|
+
// loadAfter(pageIndex) {
|
|
277
|
+
// this.loadPdfData(pageIndex)
|
|
278
|
+
// // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) + 1;
|
|
279
|
+
// // if (start <= this.pages.length) {
|
|
280
|
+
// // // const nextPage = this.pages[start - 1] || {};
|
|
281
|
+
// // this.loadPdfData(start)
|
|
282
|
+
// // // nextPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
|
|
283
|
+
// // }
|
|
284
|
+
// },
|
|
285
|
+
// // 首先我们获取到需要渲染的范围
|
|
286
|
+
// // 根据当前的可视范围内的页码，我们前后只保留 8 页
|
|
287
|
+
// getRenderScope (pageIndex) {
|
|
288
|
+
// const pagesToRender = [];
|
|
289
|
+
// let i = pageIndex - 1;
|
|
290
|
+
// let j = pageIndex + 1;
|
|
291
|
+
// // pageIndex - 1 表示当前页码数 对应的下标位置
|
|
292
|
+
// pagesToRender.push(this.pages[pageIndex - 1]);
|
|
293
|
+
// while (pagesToRender.length < 8 && pagesToRender.length < this.pages.length) {
|
|
294
|
+
// if (i > 0) {
|
|
295
|
+
// pagesToRender.push(this.pages[i - 1]);
|
|
296
|
+
// i -= 1;
|
|
297
|
+
// }
|
|
298
|
+
// if (pagesToRender.length >= 8) {
|
|
299
|
+
// break;
|
|
300
|
+
// }
|
|
301
|
+
// if (j <= this.pages.length) {
|
|
302
|
+
// pagesToRender.push(this.pages[j - 1]);
|
|
303
|
+
// j += 1;
|
|
304
|
+
// }
|
|
305
|
+
// }
|
|
306
|
+
// return pagesToRender;
|
|
307
|
+
// },
|
|
308
|
+
// // 渲染需要展示的页面，不需展示的页码将其清除
|
|
309
|
+
// renderPages (pageIndex) {
|
|
310
|
+
// const pagesToRender = this.getRenderScope(pageIndex);
|
|
311
|
+
// for (const i of this.pages) {
|
|
312
|
+
// if (pagesToRender.includes(i)) {
|
|
313
|
+
// i.loadStatus === this.pageLoadStatus.LOADED ?
|
|
314
|
+
// this.renderPageContent(i, pageIndex) :
|
|
315
|
+
// this.renderPageLoading(i);
|
|
316
|
+
// } else {
|
|
317
|
+
// this.clearPage(i);
|
|
318
|
+
// }
|
|
319
|
+
// }
|
|
320
|
+
// },
|
|
321
|
+
// // 清除页面 dom
|
|
322
|
+
// clearPage (page) {
|
|
323
|
+
// if (page.dom) {
|
|
324
|
+
// this.contentView.removeChild(page.dom);
|
|
325
|
+
// page.loadStatus = 0
|
|
326
|
+
// page.dom = undefined;
|
|
327
|
+
// }
|
|
328
|
+
// },
|
|
329
|
+
// // 页面正在下载时渲染loading视图
|
|
330
|
+
// renderPageLoading (page) {
|
|
331
|
+
// const { pageNo, dom } = page;
|
|
332
|
+
// if (dom && dom.children.length != 0) {
|
|
333
|
+
// return;
|
|
334
|
+
// }
|
|
335
|
+
// const pageDom = document.createElement('div');
|
|
336
|
+
// pageDom.style.width = `${this.pageSize.width}px`;
|
|
337
|
+
// pageDom.style.height = `${this.pageSize.height}px`;
|
|
338
|
+
// pageDom.style.position = 'absolute';
|
|
339
|
+
// pageDom.style.top = `${
|
|
340
|
+
// ((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
|
|
341
|
+
// }px`;
|
|
342
|
+
// pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
|
|
343
|
+
// pageDom.style.backgroundPosition = 'center'
|
|
344
|
+
// pageDom.style.backgroundRepeat = 'no-repeat'
|
|
345
|
+
// pageDom.style.backgroundColor = '#FFF'
|
|
346
|
+
// page.dom = pageDom;
|
|
347
|
+
// this.contentView.appendChild(pageDom);
|
|
348
|
+
// }
|
|
349
|
+
// },
|
|
350
|
+
methods: {
|
|
351
|
+
getpdfResloutePage (pdfResloute) {
|
|
352
|
+
// 根据当前页面宽度设置缩放比例
|
|
353
|
+
this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
|
|
354
|
+
// this.scale = 1
|
|
355
|
+
// 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
|
|
356
|
+
this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
|
|
357
|
+
this.initPages(pdfResloute.total)
|
|
358
|
+
// 定位功能，加载对应页码位置
|
|
359
|
+
this.loadPdfData(pdfResloute.page)
|
|
360
|
+
},
|
|
361
|
+
async loadPdfData (loadPage) {
|
|
362
|
+
if(this.pages[loadPage - 1] && this.pages[loadPage - 1].dom && this.pages[loadPage - 1].dom.children.length > 0) {
|
|
363
|
+
return
|
|
364
|
+
}
|
|
55
365
|
// pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
|
|
56
366
|
// 拿到第一个分片
|
|
57
367
|
const { startPage, url } = await this.fetchPdfFragment(loadPage);
|
|
58
|
-
|
|
59
368
|
let loadingTask = pdfjsLib.getDocument(url)
|
|
60
369
|
loadingTask.promise.then((pdfDoc) => {
|
|
61
370
|
// 将已经下载的分片保存到 pages 数组中
|
|
62
371
|
for (let i = 0; i < pdfDoc.numPages; i += 1) {
|
|
63
372
|
const pageIndex = startPage + i;
|
|
64
373
|
const page = this.pages[pageIndex - 1];
|
|
374
|
+
// 不在缓存列表内，重新获取本页pdf
|
|
65
375
|
if (page.loadStatus !== this.pageLoadStatus.LOADED) {
|
|
66
376
|
pdfDoc.getPage(i + 1).then((pdfPage) => {
|
|
67
377
|
page.pdfPage = pdfPage;
|
|
@@ -69,11 +379,18 @@ export default {
|
|
|
69
379
|
// 通知可以进行渲染了
|
|
70
380
|
this.startRenderPages(pdfPage, page, pageIndex)
|
|
71
381
|
});
|
|
382
|
+
} else {
|
|
383
|
+
if (this.changetoolbar) {
|
|
384
|
+
this.$nextTick(() => {
|
|
385
|
+
this.renderHighlights()
|
|
386
|
+
})
|
|
387
|
+
this.changetoolbar = false
|
|
388
|
+
}
|
|
72
389
|
}
|
|
73
390
|
}
|
|
74
391
|
});
|
|
75
392
|
},
|
|
76
|
-
initPages(totalPage) {
|
|
393
|
+
initPages (totalPage) {
|
|
77
394
|
// const pages = [];
|
|
78
395
|
this.totalPageCount = totalPage
|
|
79
396
|
for (let i = 0; i < totalPage; i += 1) {
|
|
@@ -85,30 +402,39 @@ export default {
|
|
|
85
402
|
});
|
|
86
403
|
}
|
|
87
404
|
},
|
|
88
|
-
async fetchPdfFragment(pageIndex) {
|
|
405
|
+
async fetchPdfFragment (pageIndex) {
|
|
89
406
|
// 置换加签后的文件地址。
|
|
90
407
|
let obj = {}
|
|
91
408
|
await this.$http.post(
|
|
92
|
-
'/knowledge-api/temporary-certificate/or-origin?expired=30',
|
|
93
|
-
this.pdfUrl + pageIndex + '.pdf',
|
|
409
|
+
'/knowledge-api/temporary-certificate/or-origin?expired=30',
|
|
410
|
+
this.pdfUrl + pageIndex + '.pdf',
|
|
94
411
|
{
|
|
95
412
|
headers: {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
413
|
+
"Content-Type": "application/json",
|
|
414
|
+
},
|
|
415
|
+
}).then(async res => {
|
|
416
|
+
if(res.bodyText) {
|
|
417
|
+
// 最后返回一个 包含这4个参数的对象
|
|
418
|
+
obj = await {
|
|
419
|
+
"startPage": pageIndex, // 分片的开始页码
|
|
420
|
+
"endPage": pageIndex + 5, // 分片结束页码
|
|
421
|
+
"totalPage": this.totalPageCount, // pdf 总页数
|
|
422
|
+
"url": res.bodyText // 分片内容下载地址
|
|
423
|
+
}
|
|
106
424
|
}
|
|
107
|
-
|
|
108
|
-
|
|
425
|
+
if (res.data) {
|
|
426
|
+
// 最后返回一个 包含这4个参数的对象
|
|
427
|
+
obj = await {
|
|
428
|
+
"startPage": pageIndex, // 分片的开始页码
|
|
429
|
+
"endPage": pageIndex + 5, // 分片结束页码
|
|
430
|
+
"totalPage": this.totalPageCount, // pdf 总页数
|
|
431
|
+
"url": res.data // 分片内容下载地址
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
})
|
|
109
435
|
return obj
|
|
110
436
|
},
|
|
111
|
-
startRenderPages(pdfPage, page
|
|
437
|
+
startRenderPages (pdfPage, page, pageIndex) {
|
|
112
438
|
const viewport = pdfPage.getViewport({
|
|
113
439
|
scale: this.scale, // 缩放的比例
|
|
114
440
|
rotation: this.rotation, // 旋转的角度
|
|
@@ -120,19 +446,19 @@ export default {
|
|
|
120
446
|
}
|
|
121
447
|
this.pageSize = pageSize
|
|
122
448
|
// 创建内容绘制区，并设置大小
|
|
123
|
-
this.contentView.style.width = `${
|
|
124
|
-
this.contentView.style.height = `${(
|
|
449
|
+
this.contentView.style.width = `${pageSize.width}px`;
|
|
450
|
+
this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
|
|
125
451
|
this.contentView.style.margin = '0 auto 0'
|
|
126
452
|
this.contentView.style.position = 'relative'
|
|
127
453
|
// contentView.style.overflowY = 'auto'
|
|
128
454
|
this.$refs.pdfView.appendChild(this.contentView);
|
|
129
455
|
this.renderPages(pageIndex)
|
|
130
456
|
},
|
|
131
|
-
renderPageContent(page, pageIndex) {
|
|
457
|
+
renderPageContent (page, pageIndex) {
|
|
132
458
|
const { pdfPage, pageNo, dom } = page;
|
|
133
459
|
// dom 元素已存在，无须重新渲染，直接返回
|
|
460
|
+
console.log(dom, 'dom');
|
|
134
461
|
if (dom && dom.children.length != 0) {
|
|
135
|
-
// console.log(dom.children, 'length');
|
|
136
462
|
return;
|
|
137
463
|
}
|
|
138
464
|
const viewport = pdfPage.getViewport({
|
|
@@ -152,74 +478,191 @@ export default {
|
|
|
152
478
|
pageDom.style.height = `${this.pageSize.height}px`;
|
|
153
479
|
pageDom.appendChild(canvas);
|
|
154
480
|
// 渲染内容
|
|
155
|
-
// console.log(pdfPage.render({
|
|
156
|
-
// canvasContext: context,
|
|
157
|
-
// viewport,
|
|
158
|
-
// }));
|
|
159
481
|
let renderContext = {
|
|
160
482
|
canvasContext: context,
|
|
161
|
-
viewport:viewport,
|
|
483
|
+
viewport: viewport,
|
|
162
484
|
}
|
|
163
|
-
pdfPage.render(renderContext).promise.then(() =>{
|
|
164
|
-
console.log(pdfPage.getTextContent(),'getTextContent');
|
|
485
|
+
pdfPage.render(renderContext).promise.then(() => {
|
|
486
|
+
console.log(pdfPage.getTextContent(), 'getTextContent');
|
|
165
487
|
return pdfPage.getTextContent()
|
|
166
|
-
}).then((textContent) =>{
|
|
488
|
+
}).then((textContent) => {
|
|
167
489
|
const textLayerDiv = document.createElement('div');
|
|
168
490
|
textLayerDiv.setAttribute('class', 'textLayer');
|
|
169
491
|
// 将文本图层div添加至每页pdf的div中
|
|
170
492
|
// 创建新的TextLayerBuilder实例
|
|
171
|
-
// 这里因为版本问题跟pc端有些差异
|
|
172
|
-
pageDom.appendChild(textLayerDiv);
|
|
173
493
|
let textLayer = new TextLayerBuilder({
|
|
174
|
-
textLayerDiv:textLayerDiv,
|
|
494
|
+
textLayerDiv: textLayerDiv,
|
|
175
495
|
pageIndex: pdfPage._pageIndex,
|
|
176
496
|
viewport: viewport,
|
|
177
497
|
});
|
|
498
|
+
let findPage = this.currentPageAllLine.find(l => { return l.page == pageIndex })
|
|
499
|
+
if (findPage) {
|
|
500
|
+
let AllLines = findPage.allLines
|
|
501
|
+
// setTimeout(() => {
|
|
502
|
+
if (AllLines.length > 0) {
|
|
503
|
+
for (let j = 0; j < AllLines.length; j++) {
|
|
504
|
+
let lines = AllLines[j].lines
|
|
505
|
+
let rectdom = document.createElement('div')
|
|
506
|
+
rectdom.setAttribute('react-count', AllLines[j].pageCount);
|
|
507
|
+
rectdom.style.position = 'absolute';
|
|
508
|
+
rectdom.style.top = 0
|
|
509
|
+
rectdom.style.left = 0
|
|
510
|
+
rectdom.classList.add('rectdom')
|
|
511
|
+
for (let index = 0; index < lines.length; index++) {
|
|
512
|
+
if (!/^\s+$/g.test(lines[index].content)) {
|
|
513
|
+
let postionArr = lines[index].location
|
|
514
|
+
let div = document.createElement('div')
|
|
515
|
+
div.style.position = 'absolute';
|
|
516
|
+
div.style.left = postionArr[0] * this.scale + 'px',
|
|
517
|
+
// 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
|
|
518
|
+
div.style.top = (postionArr[1] + postionArr[3] / 9) * this.scale + 'px'
|
|
519
|
+
div.style.height = postionArr[3] * this.scale + 'px';
|
|
520
|
+
div.style.width = postionArr[2] * this.scale + 'px'
|
|
521
|
+
div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
|
|
522
|
+
div.classList.add('lineHeight')
|
|
523
|
+
rectdom.appendChild(div)
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
if (rectdom.children.length > 0) {
|
|
527
|
+
pageDom.appendChild(rectdom)
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
// }, 0)
|
|
532
|
+
}
|
|
178
533
|
textLayer.setTextContent(textContent);
|
|
179
534
|
textLayer.render()
|
|
535
|
+
// pageDom.appendChild(textLayer.div);
|
|
536
|
+
page.dom = pageDom;
|
|
537
|
+
this.contentView.appendChild(pageDom);
|
|
538
|
+
if (this.changetoolbar) {
|
|
539
|
+
setTimeout(() => {
|
|
540
|
+
console.log('========');
|
|
541
|
+
this.renderHighlights()
|
|
542
|
+
this.changetoolbar = false
|
|
543
|
+
}, 100)
|
|
544
|
+
}
|
|
545
|
+
if (this.fisrtLoad) {
|
|
546
|
+
setTimeout(() => {
|
|
547
|
+
if (this.$refs.pdfView.clientHeight - (this.pageSize.height + this.PAGE_INTVERVAL) > (this.pageSize.height + this.PAGE_INTVERVAL)) {
|
|
548
|
+
let loadNum = Math.ceil(this.$refs.pdfView.clientHeight / (this.pageSize.height + this.PAGE_INTVERVAL))
|
|
549
|
+
for (let n = 0; n < loadNum; n++) {
|
|
550
|
+
this.loadPdfData(pageNo + n)
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))) {
|
|
554
|
+
this.fisrtLoad = false
|
|
555
|
+
} else {
|
|
556
|
+
this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
|
|
557
|
+
}
|
|
558
|
+
}, 100)
|
|
559
|
+
}
|
|
180
560
|
})
|
|
181
|
-
page.dom = pageDom;
|
|
182
|
-
if(pageIndex == this.identifyTextPostion.page) {
|
|
183
|
-
let div = document.createElement('div')
|
|
184
|
-
div.style.position = 'absolute';
|
|
185
|
-
let lineHeightScaleWidth = this.pageSize.width / this.identifyTextPostion.pageWidth
|
|
186
|
-
let lineHeightScaleHeight = this.pageSize.height / this.identifyTextPostion.pageHeight
|
|
187
561
|
|
|
188
|
-
div.style.left = this.identifyTextPostion.left * lineHeightScaleWidth + 'px',
|
|
189
|
-
div.style.top = this.identifyTextPostion.top * lineHeightScaleHeight + 'px'
|
|
190
|
-
div.style.height = this.identifyTextPostion.height * lineHeightScaleHeight + 'px' ;
|
|
191
|
-
div.style.width = this.identifyTextPostion.width * lineHeightScaleWidth + 'px'
|
|
192
|
-
div.style.backgroundColor = 'rgb(191, 185, 255, 0.5)'
|
|
193
|
-
pageDom.appendChild(div)
|
|
194
|
-
}
|
|
195
|
-
this.contentView.appendChild(pageDom);
|
|
196
|
-
if(this.fisrtLoad) {
|
|
197
|
-
setTimeout(() =>{
|
|
198
|
-
this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
|
|
199
|
-
}, 100)
|
|
200
|
-
this.fisrtLoad = false
|
|
201
|
-
}
|
|
202
|
-
|
|
203
562
|
},
|
|
204
563
|
// 监听容器的滚动事件，触发 scrollPdf 方法
|
|
205
564
|
// 这里加了防抖保证不会一次产生过多请求
|
|
206
|
-
|
|
565
|
+
debounceScrollPdf: _.debounce(function (e, that) {
|
|
566
|
+
if (this.fisrtLoad) {
|
|
567
|
+
this.fisrtLoad = false
|
|
568
|
+
return
|
|
569
|
+
}
|
|
570
|
+
const scrollTop = e.target.scrollTop;
|
|
571
|
+
const height = e.target.clientHeight;
|
|
572
|
+
// 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
|
|
573
|
+
const pageIndex = scrollTop > 0 ?
|
|
574
|
+
Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
|
|
575
|
+
1;
|
|
576
|
+
// 当前页码在gpt识别列表内
|
|
577
|
+
// let pdfResloute = this.cachePdf[this.currentPage]
|
|
578
|
+
// debugger
|
|
579
|
+
// let pdfResloute = this.cachePdf.find(cache => {
|
|
580
|
+
// return cache.page == pageIndex
|
|
581
|
+
// })
|
|
582
|
+
// if (pdfResloute) {
|
|
583
|
+
// this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
|
|
584
|
+
// this.identifyTextPostion.currentPageAllLine = []
|
|
585
|
+
// this.cachePdf.forEach(item => {
|
|
586
|
+
// if (item.page == pdfResloute.page) {
|
|
587
|
+
// this.identifyTextPostion.currentPageAllLine.push({
|
|
588
|
+
// lines: [...item.extractInfo.lines],
|
|
589
|
+
// page: item.page
|
|
590
|
+
// })
|
|
591
|
+
// }
|
|
592
|
+
// })
|
|
593
|
+
// this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
|
|
594
|
+
// this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
|
|
595
|
+
// this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
|
|
596
|
+
// this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
|
|
597
|
+
// this.identifyTextPostion.page = pdfResloute.page
|
|
598
|
+
// this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
|
|
599
|
+
// this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
|
|
600
|
+
// }
|
|
601
|
+
that.loadPdfData(pageIndex - 1)
|
|
602
|
+
that.loadPdfData(pageIndex)
|
|
603
|
+
that.loadPdfData(pageIndex + 1)
|
|
604
|
+
// if (height - (that.pageSize.height + that.PAGE_INTVERVAL) > (that.pageSize.height + that.PAGE_INTVERVAL)) {
|
|
605
|
+
// let loadNum = Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
|
|
606
|
+
// if (loadNum > 2 && pageIndex > 1) {
|
|
607
|
+
// that.loadPdfData(pageIndex - 1)
|
|
608
|
+
// that.loadPdfData(pageIndex)
|
|
609
|
+
// that.loadPdfData(pageIndex + 1)
|
|
610
|
+
// } else {
|
|
611
|
+
// for (let n = 0; n < loadNum; n++) {
|
|
612
|
+
// that.loadPdfData(pageIndex + n)
|
|
613
|
+
// }
|
|
614
|
+
// }
|
|
615
|
+
// } else {
|
|
616
|
+
// that.loadPdfData(pageIndex)
|
|
617
|
+
// }
|
|
618
|
+
}, 200),
|
|
619
|
+
directScrolling (e, that) {
|
|
620
|
+
if (this.fisrtLoad) {
|
|
621
|
+
this.fisrtLoad = false
|
|
622
|
+
return
|
|
623
|
+
}
|
|
207
624
|
const scrollTop = e.target.scrollTop;
|
|
208
625
|
const height = e.target.clientHeight;
|
|
209
626
|
// 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
|
|
210
627
|
const pageIndex = scrollTop > 0 ?
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
//
|
|
214
|
-
//
|
|
628
|
+
Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
|
|
629
|
+
1;
|
|
630
|
+
// // 当前页码在gpt识别列表内
|
|
631
|
+
// let pdfResloute = this.cachePdf[this.currentPage]
|
|
632
|
+
// if (pdfResloute) {
|
|
633
|
+
// this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
|
|
634
|
+
// this.identifyTextPostion.currentPageAllLine = []
|
|
635
|
+
// this.cachePdf.forEach(item => {
|
|
636
|
+
// if (item.page == pdfResloute.page) {
|
|
637
|
+
// this.identifyTextPostion.currentPageAllLine.push({
|
|
638
|
+
// lines: [...item.extractInfo.lines],
|
|
639
|
+
// page: item.page
|
|
640
|
+
// })
|
|
641
|
+
// }
|
|
642
|
+
// })
|
|
643
|
+
// this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
|
|
644
|
+
// this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
|
|
645
|
+
// this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
|
|
646
|
+
// this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
|
|
647
|
+
// this.identifyTextPostion.page = pdfResloute.page
|
|
648
|
+
// this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
|
|
649
|
+
// this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
|
|
650
|
+
// }
|
|
215
651
|
this.loadPdfData(pageIndex)
|
|
216
|
-
},
|
|
217
|
-
pdfScroll(e) {
|
|
218
|
-
//
|
|
219
|
-
this.
|
|
652
|
+
},
|
|
653
|
+
pdfScroll (e) {
|
|
654
|
+
// if (this.changetoolbar) {
|
|
655
|
+
// this.directScrolling(e, this)
|
|
656
|
+
// } else {
|
|
657
|
+
// this.debounceScrollPdf(e, this)
|
|
658
|
+
// }
|
|
659
|
+
if(this.preViewType !== 'pdf') {
|
|
660
|
+
return
|
|
661
|
+
}
|
|
662
|
+
this.debounceScrollPdf(e, this)
|
|
220
663
|
},
|
|
221
664
|
// 分片每次只做一次处理，所以不考虑多片情况
|
|
222
|
-
loadBefore(pageIndex) {
|
|
665
|
+
loadBefore (pageIndex) {
|
|
223
666
|
this.loadPdfData(pageIndex)
|
|
224
667
|
// const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) - (this.SLICE_COUNT - 1);
|
|
225
668
|
// if (start > 0) {
|
|
@@ -228,7 +671,7 @@ export default {
|
|
|
228
671
|
// // prevPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
|
|
229
672
|
// }
|
|
230
673
|
},
|
|
231
|
-
loadAfter(pageIndex) {
|
|
674
|
+
loadAfter (pageIndex) {
|
|
232
675
|
this.loadPdfData(pageIndex)
|
|
233
676
|
// const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) + 1;
|
|
234
677
|
// if (start <= this.pages.length) {
|
|
@@ -245,12 +688,12 @@ export default {
|
|
|
245
688
|
let j = pageIndex + 1;
|
|
246
689
|
// pageIndex - 1 表示当前页码数 对应的下标位置
|
|
247
690
|
pagesToRender.push(this.pages[pageIndex - 1]);
|
|
248
|
-
while (pagesToRender.length <
|
|
691
|
+
while (pagesToRender.length < 10 && pagesToRender.length < this.pages.length) {
|
|
249
692
|
if (i > 0) {
|
|
250
693
|
pagesToRender.push(this.pages[i - 1]);
|
|
251
694
|
i -= 1;
|
|
252
695
|
}
|
|
253
|
-
if (pagesToRender.length >=
|
|
696
|
+
if (pagesToRender.length >= 10) {
|
|
254
697
|
break;
|
|
255
698
|
}
|
|
256
699
|
if (j <= this.pages.length) {
|
|
@@ -291,15 +734,145 @@ export default {
|
|
|
291
734
|
pageDom.style.width = `${this.pageSize.width}px`;
|
|
292
735
|
pageDom.style.height = `${this.pageSize.height}px`;
|
|
293
736
|
pageDom.style.position = 'absolute';
|
|
294
|
-
pageDom.style.top = `${
|
|
295
|
-
|
|
296
|
-
}px`;
|
|
737
|
+
pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
|
|
738
|
+
}px`;
|
|
297
739
|
pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
|
|
298
740
|
pageDom.style.backgroundPosition = 'center'
|
|
299
741
|
pageDom.style.backgroundRepeat = 'no-repeat'
|
|
300
742
|
pageDom.style.backgroundColor = '#FFF'
|
|
301
743
|
page.dom = pageDom;
|
|
302
744
|
this.contentView.appendChild(pageDom);
|
|
745
|
+
},
|
|
746
|
+
prev () {
|
|
747
|
+
this.currentPage--
|
|
748
|
+
if (this.currentPage < 0) {
|
|
749
|
+
// this.currentPage = this.tagIds.length - 1
|
|
750
|
+
this.currentPage = 0
|
|
751
|
+
}
|
|
752
|
+
if(this.preViewType == 'pdf') {
|
|
753
|
+
this.scrollToUplaodePage(this.currentPage)
|
|
754
|
+
} else {
|
|
755
|
+
this.scrollToExcalTop(this.currentPage)
|
|
756
|
+
}
|
|
757
|
+
// this.getpdfResloutePage(this.cachePdf[this.currentPage - 1])
|
|
758
|
+
},
|
|
759
|
+
next () {
|
|
760
|
+
this.currentPage++
|
|
761
|
+
if (this.currentPage >= this.tagIds.length) {
|
|
762
|
+
this.currentPage = 0
|
|
763
|
+
}
|
|
764
|
+
if(this.preViewType == 'pdf') {
|
|
765
|
+
this.scrollToUplaodePage(this.currentPage)
|
|
766
|
+
} else {
|
|
767
|
+
this.scrollToExcalTop(this.currentPage)
|
|
768
|
+
}
|
|
769
|
+
},
|
|
770
|
+
currentChange (value) {
|
|
771
|
+
this.currentPage = value - 1
|
|
772
|
+
if(this.preViewType == 'pdf') {
|
|
773
|
+
this.scrollToUplaodePage(this.currentPage)
|
|
774
|
+
} else {
|
|
775
|
+
this.scrollToExcalTop(this.currentPage)
|
|
776
|
+
}
|
|
777
|
+
},
|
|
778
|
+
scrollToUplaodePage (currentPage) {
|
|
779
|
+
this.changetoolbar = true
|
|
780
|
+
if(this.preViewType !== 'pdf') {
|
|
781
|
+
return
|
|
782
|
+
}
|
|
783
|
+
let pdfResloute = this.cachePdf[currentPage]
|
|
784
|
+
this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
|
|
785
|
+
this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
|
|
786
|
+
this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
|
|
787
|
+
this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
|
|
788
|
+
this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
|
|
789
|
+
this.identifyTextPostion.page = pdfResloute.page
|
|
790
|
+
this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
|
|
791
|
+
this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
|
|
792
|
+
// console.log( Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.pageSize.height + this.PAGE_INTVERVAL * 2) ,this.$refs.pdfView.scrollHeight);
|
|
793
|
+
// debugger
|
|
794
|
+
// if(this.$refs.pdfView.scrollTop == Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) ||
|
|
795
|
+
// Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.pageSize.height + this.PAGE_INTVERVAL) >= this.$refs.pdfView.scrollHeight) {
|
|
796
|
+
// this.renderHighlights()
|
|
797
|
+
// } else {
|
|
798
|
+
// 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
|
|
799
|
+
this.$nextTick(() => {
|
|
800
|
+
this.renderHighlights()
|
|
801
|
+
})
|
|
802
|
+
this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
|
|
803
|
+
// }
|
|
804
|
+
},
|
|
805
|
+
scrollToExcalTop(currentPage) {
|
|
806
|
+
for (let index = 0; index < this.allTr.length; index++) {
|
|
807
|
+
if(index == currentPage) {
|
|
808
|
+
this.allTr[index].children.forEach(item =>{
|
|
809
|
+
item.style.background = 'rgba(255, 136, 0, 0.6)'
|
|
810
|
+
})
|
|
811
|
+
this.$refs.pdfView.scrollTop = this.allTr[index].offsetTop
|
|
812
|
+
} else {
|
|
813
|
+
this.allTr[index].children.forEach(item =>{
|
|
814
|
+
item.style.background = 'rgba(54, 106, 255, 0.6)'
|
|
815
|
+
})
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
},
|
|
819
|
+
// pdf是否需要重新渲染高亮位置
|
|
820
|
+
renderHighlights () {
|
|
821
|
+
let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
|
|
822
|
+
console.log(lineHeightDom, this.currentPage, 'this.currentPage');
|
|
823
|
+
if (lineHeightDom) {
|
|
824
|
+
lineHeightDom.forEach((d) => {
|
|
825
|
+
for (let i = 0; i < d.children.length; i++) {
|
|
826
|
+
if (d.getAttribute('react-count') == this.currentPage) {
|
|
827
|
+
d.children[i].style.backgroundColor = 'rgba(255, 136, 0, 0.3)'
|
|
828
|
+
} else {
|
|
829
|
+
d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
})
|
|
833
|
+
}
|
|
834
|
+
},
|
|
835
|
+
displayHiglight (pageIndex) {
|
|
836
|
+
let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
|
|
837
|
+
if (lineHeightDom) {
|
|
838
|
+
lineHeightDom.forEach((d) => {
|
|
839
|
+
if (d.getAttribute('page-index') == pageIndex) {
|
|
840
|
+
d.style.display = 'none'
|
|
841
|
+
}
|
|
842
|
+
})
|
|
843
|
+
}
|
|
844
|
+
},
|
|
845
|
+
// 前端暂时缓存多页
|
|
846
|
+
autoLoadMore (pageIndex) {
|
|
847
|
+
let pdfResloute = this.cachePdf.find(cache => {
|
|
848
|
+
return cache.page == pageIndex
|
|
849
|
+
})
|
|
850
|
+
if (pdfResloute) {
|
|
851
|
+
this.getpdfResloutePage(pdfResloute)
|
|
852
|
+
} else {
|
|
853
|
+
this.loadPdfData(pageIndex)
|
|
854
|
+
}
|
|
855
|
+
},
|
|
856
|
+
setPageAllLine (arr) {
|
|
857
|
+
this.currentPageAllLine = []
|
|
858
|
+
arr.forEach((item, index) => {
|
|
859
|
+
let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
|
|
860
|
+
if (i != -1) {
|
|
861
|
+
// this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
|
|
862
|
+
this.currentPageAllLine[i].allLines.push({
|
|
863
|
+
pageCount: index,
|
|
864
|
+
lines: item.extractInfo.lines
|
|
865
|
+
})
|
|
866
|
+
} else {
|
|
867
|
+
this.currentPageAllLine.push({
|
|
868
|
+
page: item.page,
|
|
869
|
+
allLines: [{
|
|
870
|
+
pageCount: index,
|
|
871
|
+
lines: item.extractInfo.lines
|
|
872
|
+
}],
|
|
873
|
+
})
|
|
874
|
+
}
|
|
875
|
+
})
|
|
303
876
|
}
|
|
304
877
|
},
|
|
305
878
|
computed:{
|
|
@@ -308,30 +881,59 @@ export default {
|
|
|
308
881
|
}
|
|
309
882
|
},
|
|
310
883
|
watch:{
|
|
311
|
-
|
|
884
|
+
tagIds: {
|
|
312
885
|
handler(value) {
|
|
313
|
-
if(value) {
|
|
886
|
+
if(value && value.length) {
|
|
314
887
|
// 在 pdf_view 下创建 所有canvs的容器
|
|
315
888
|
this.contentView = document.createElement('div')
|
|
316
|
-
this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/' + value).then(res =>{
|
|
317
|
-
if(res.data.code == 0) {
|
|
318
|
-
|
|
319
|
-
//
|
|
320
|
-
this.
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
889
|
+
this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res =>{
|
|
890
|
+
if (res.data.code == 0) {
|
|
891
|
+
// tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
|
|
892
|
+
// 缓存拿到的所有数据
|
|
893
|
+
this.cachePdf = res.data.data
|
|
894
|
+
let publicPageFileUrl = res.data.data[0].publicPageFileUrl
|
|
895
|
+
this.currentPage = 0
|
|
896
|
+
// console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
|
|
897
|
+
if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
|
|
898
|
+
this.preViewType = 'pdf'
|
|
899
|
+
this.setPageAllLine(this.cachePdf)
|
|
900
|
+
this.getpdfResloutePage(res.data.data[0])
|
|
901
|
+
} else {
|
|
902
|
+
this.preViewType = 'excal'
|
|
903
|
+
this.$http.post(
|
|
904
|
+
'/knowledge-api/temporary-certificate/or-origin?expired=30',
|
|
905
|
+
publicPageFileUrl,
|
|
906
|
+
{
|
|
907
|
+
headers: {
|
|
908
|
+
"Content-Type": "application/json",
|
|
909
|
+
},
|
|
910
|
+
}).then(res => {
|
|
911
|
+
// 使用原声请求方式 axios会带有不需要的请求头
|
|
912
|
+
let xhr = new XMLHttpRequest();
|
|
913
|
+
xhr.open('GET', res.data, true);
|
|
914
|
+
// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
|
|
915
|
+
xhr.onload = ({ currentTarget }) => {
|
|
916
|
+
// 请求完成
|
|
917
|
+
if (currentTarget.status === 200) { // 返回200
|
|
918
|
+
this.contentView.innerHTML = currentTarget.response
|
|
919
|
+
this.contentView.style.padding = '10px'
|
|
920
|
+
this.$refs.pdfView.style.backgroundColor = '#FFFFFF'
|
|
921
|
+
this.$refs.pdfView.appendChild(this.contentView)
|
|
922
|
+
let allTr = Array.from(this.$refs.pdfView.getElementsByTagName('tr'))
|
|
923
|
+
this.allTr = []
|
|
924
|
+
for (let index = 0; index < allTr.length; index++) {
|
|
925
|
+
if(value.includes(allTr[index].getAttribute('tag-id'))) {
|
|
926
|
+
this.allTr.push(allTr[index])
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
this.currentChange(1)
|
|
930
|
+
|
|
931
|
+
}
|
|
932
|
+
}
|
|
933
|
+
xhr.send();
|
|
934
|
+
})
|
|
935
|
+
}
|
|
936
|
+
|
|
335
937
|
} else {
|
|
336
938
|
let div = document.createElement('div')
|
|
337
939
|
div.innerText = '文件加载异常'
|
|
@@ -364,6 +966,8 @@ export default {
|
|
|
364
966
|
height: 100%;
|
|
365
967
|
overflow: auto;
|
|
366
968
|
background-color: #f5f7fb;
|
|
969
|
+
padding-bottom: 50px;
|
|
970
|
+
position: relative;
|
|
367
971
|
// > div {
|
|
368
972
|
// width: 100%;
|
|
369
973
|
// height: 100%;
|
|
@@ -375,5 +979,32 @@ export default {
|
|
|
375
979
|
width: 100%;
|
|
376
980
|
height: 100%;
|
|
377
981
|
}
|
|
982
|
+
.btn_footer {
|
|
983
|
+
width: 100%;
|
|
984
|
+
height: 50px;
|
|
985
|
+
display: flex;
|
|
986
|
+
align-items: center;
|
|
987
|
+
justify-content: space-around;
|
|
988
|
+
position: absolute;
|
|
989
|
+
bottom: 50px;
|
|
990
|
+
left: 0;
|
|
991
|
+
.prev, .next {
|
|
992
|
+
width: 35%;
|
|
993
|
+
height: 40px;
|
|
994
|
+
display: flex;
|
|
995
|
+
align-items: center;
|
|
996
|
+
justify-content: center;
|
|
997
|
+
border-radius: 50px;
|
|
998
|
+
cursor: pointer;
|
|
999
|
+
}
|
|
1000
|
+
.prev {
|
|
1001
|
+
background: #F2F5FA;
|
|
1002
|
+
color: #000;
|
|
1003
|
+
}
|
|
1004
|
+
.next {
|
|
1005
|
+
background: #366aff;
|
|
1006
|
+
color: #ffffff;
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
378
1009
|
}
|
|
379
1010
|
</style>
|