askbot-dragon 1.3.54 → 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 +2 -1
- package/src/components/AnswerDocknowledge.vue +37 -1
- package/src/components/AnswerVoice.vue +11 -16
- package/src/components/ConversationContainer.vue +18 -4
- package/src/components/pdfPosition.vue +744 -113
- package/src/components/previewPdf.vue +2 -1
- package/vue.config.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "askbot-dragon",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.56",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"serve": "vue-cli-service serve",
|
|
6
6
|
"build": "vue-cli-service build",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"@ckeditor/ckeditor5-ui": "^10.1.0",
|
|
11
11
|
"@ckeditor/ckeditor5-vue": "^1.0.3",
|
|
12
12
|
"ali-oss": "^6.2.1",
|
|
13
|
+
"audio-loader": "^1.0.3",
|
|
13
14
|
"ckeditor": "^4.12.1",
|
|
14
15
|
"core-js": "^3.6.5",
|
|
15
16
|
"install": "^0.13.0",
|
|
@@ -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;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</template>
|
|
29
29
|
<script>
|
|
30
|
-
|
|
30
|
+
let load = require('audio-loader')
|
|
31
31
|
export default {
|
|
32
32
|
name: "answer_voice",
|
|
33
33
|
props: ["msg"],
|
|
@@ -55,22 +55,17 @@ export default {
|
|
|
55
55
|
setTimeout(() => {
|
|
56
56
|
console.log(this._$(`#audioTagCom_${this.msg.content.extInfos[0].avCurrentTime}`)[0]);
|
|
57
57
|
this.activeAudio = this._$(`#audioTagCom_${this.msg.content.extInfos[0].avCurrentTime}`)[0];
|
|
58
|
-
this.activeAudio.load()
|
|
59
58
|
this.time = "00:00";
|
|
60
|
-
|
|
61
|
-
this.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
resolve()
|
|
72
|
-
});
|
|
73
|
-
// this.activeAudio.addEventListener('canplay', resolve);
|
|
59
|
+
load(this.msg.content.url).then(res =>{
|
|
60
|
+
this.otherTime = this.transTime(res.duration);
|
|
61
|
+
this.durationNum = res.duration;
|
|
62
|
+
console.log(res.duration);
|
|
63
|
+
this.allTime = this.transTime(res.duration);
|
|
64
|
+
if (res.duration >= 60) {
|
|
65
|
+
this.boxWidth = 240;
|
|
66
|
+
} else {
|
|
67
|
+
this.boxWidth = 160 + res.duration;
|
|
68
|
+
}
|
|
74
69
|
})
|
|
75
70
|
this._$(`#audioTagCom_${this.msg.content.extInfos[0].avCurrentTime}`).on("loadedmetadata", (e) => {
|
|
76
71
|
console.log(e.currentTarget);
|
|
@@ -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>
|