askbot-dragon 1.3.78 → 1.3.80

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +2 -1
  3. package/src/assets/js/hammer.js +72 -0
  4. package/src/components/pdfPosition.vue +7 -284
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "askbot-dragon",
3
- "version": "1.3.78",
3
+ "version": "1.3.80",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
package/public/index.html CHANGED
@@ -37,7 +37,8 @@
37
37
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js" integrity="sha512-14hvtl/LxmtX9F2tsqmOUveDlKql0bm7lR5ua+J+ddLuhoXCrOfG8aD/WJejCtLLvnjcEhX/XCuOyoTZv4Xq4A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
38
38
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js" integrity="sha512-/Kuwn901frjpfp2NMgB9S/LEtm+ilDzwVy/iS8MlY0BeIwkvtjGTxnjY8u+fn8QyDxS23OLJ+M2g++W/zsb0nw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
39
39
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.css" integrity="sha512-0LYOXoVuJYymEk9nBWqkOCflK2quQSJHaKavRoiaaq7LFM0ThLErV8uqE9vBuXAliN+8qbymsx0u5C9B/pHn7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
40
-
40
+ <!-- hammer.js -->
41
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
41
42
  <style>
42
43
  *{
43
44
  margin: 0;
package/src/assets/js/hammer.js ADDED
@@ -0,0 +1,72 @@
1
+ //定义缩放方法，接收一个element参数：使用export暴露该方法
2
+ export function zoomElement (el) {
3
+
4
+ let x = 0;//x轴偏移
5
+ let y = 0;//y轴偏移
6
+ let lastScale = 1;//上次缩放值
7
+ let currentScale = 1;//当前缩放值
8
+ let center;//双指中心点
9
+ //初始化hammer
10
+ let hammer = new window.Hammer(el);
11
+ //缩放事件默认是关闭的，需要设置启用
12
+ hammer.get('pinch').set({ enable: true });
13
+ //监听缩放事件
14
+ hammer.on("pinchmove pinchstart pinchin pinchout", e => {
15
+ //缩放开始时获取上一次缩放值与双指中心点
16
+ if (e.type == "pinchstart") {
17
+ lastScale = currentScale || 1;
18
+ center = e.center;
19
+ console.log("centerX:" + center.x)
20
+ console.log("centerY:" + center.y)
21
+ }
22
+ //当前缩放值 = 上一次缩放值 * 缩放比例
23
+ currentScale = lastScale * e.scale;
24
+ //如果缩放值小于1，重置为1
25
+ if (currentScale < 1) {
26
+ currentScale = 1;
27
+ }
28
+ if(currentScale > 2) {
29
+ currentScale = 2;
30
+ }
31
+ //偏移量 = 双指中心点 - 当前缩放值 * 双指中心点 = 双指中心点 *（1-当前缩放值）
32
+ x = center.x * (1 - currentScale)
33
+ y = center.y * (1 - currentScale)
34
+ //设置transform
35
+ el.style.transform = "translateX(" + (x) + "px)" + "translateY(" + (y) + "px)" + "scale(" + (currentScale) + ")"
36
+ });
37
+ //监听滑动事件
38
+ // hammer.on('panright panleft panup pandown', (e) => {
39
+ // //滑动时：偏移量 = 滑动距离 + 当前偏移量
40
+ // let translateX = e.deltaX + x
41
+ // let translateY = e.deltaY + y
42
+ // //如果偏移X值大于0：表示视图已经滑到最左侧，重置为0
43
+ // if (translateX > 0) {
44
+ // translateX = 0
45
+ // }
46
+ // //如果偏移Y值大于0：表示视图已经滑到最顶部，重置为0
47
+ // if (translateY > 0) {
48
+ // translateY = 0
49
+ // }
50
+ // //如果偏移X值小于（屏幕宽度-元素宽度）：表示视图已经滑到最左侧，重置为0
51
+ // //屏幕宽度 = el.clientWidth
52
+ // //元素宽度 = el.getBoundingClientRect().width
53
+ // if (translateX < el.clientWidth - el.getBoundingClientRect().width) {
54
+ // translateX = el.clientWidth - el.getBoundingClientRect().width
55
+ // }
56
+ // //如果偏移Y值大于（屏幕高度-元素高度）：表示视图已经滑到最左侧，重置为0
57
+ // //屏幕高度 = el.clientHeight
58
+ // //元素高度 = el.getBoundingClientRect().height
59
+ // if (translateY < el.clientHeight - el.getBoundingClientRect().height) {
60
+ // translateY = el.clientHeight - el.getBoundingClientRect().height
61
+ // }
62
+ // //设置transform
63
+ // el.style.transform = "translateX(" + (translateX) + "px)" + "translateY(" + (translateY) + "px)" + "scale(" + (currentScale) + ")"
64
+ // });
65
+ hammer.on('panend', (e) => {
66
+ //滑动结束：记录当前偏移量
67
+ x = e.deltaX + x;
68
+ y = e.deltaY + y;
69
+ console.log("panendx:" + x)
70
+ console.log("panendy:" + y)
71
+ })
72
+ }
package/src/components/pdfPosition.vue CHANGED
@@ -21,6 +21,7 @@ if(pdfjsLib) {
21
21
  // 'pdfjs-dist/build/pdf.worker';
22
22
  }
23
23
  const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
24
+ import { zoomElement } from '../assets/js/hammer'
24
25
  export default {
25
26
  name: 'pdfView',
26
27
  props:['tagIds'],
@@ -73,289 +74,6 @@ export default {
73
74
  isTouchMoved: false
74
75
  }
75
76
  },
76
- // methods:{
77
- // getpdfResloutePage (pdfResloute) {
78
- // // 根据当前页面宽度设置缩放比例
79
- // this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
80
- // // this.scale = 1
81
- // // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
82
- // this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
83
- // this.initPages(pdfResloute.total)
84
- // // 定位功能，加载对应页码位置
85
- // this.loadPdfData(pdfResloute.page)
86
- // },
87
- // setPageAllLine (arr) {
88
- // this.currentPageAllLine = []
89
- // arr.forEach((item, index) => {
90
- // let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
91
- // if (i != -1) {
92
- // // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
93
- // this.currentPageAllLine[i].allLines.push({
94
- // pageCount: index,
95
- // lines: item.extractInfo.lines
96
- // })
97
- // } else {
98
- // this.currentPageAllLine.push({
99
- // page: item.page,
100
- // allLines: [{
101
- // pageCount: index,
102
- // lines: item.extractInfo.lines
103
- // }],
104
- // })
105
- // }
106
- // })
107
- // },
108
- // async loadPdfData(loadPage) {
109
- // // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
110
- // // 拿到第一个分片
111
- // const { startPage, url } = await this.fetchPdfFragment(loadPage);
112
- // console.log(url);
113
- // let loadingTask = pdfjsLib.getDocument(url)
114
- // console.log(loadingTask);
115
- // loadingTask.then((pdfDoc) => {
116
- // // 将已经下载的分片保存到 pages 数组中
117
- // for (let i = 0; i < pdfDoc.numPages; i += 1) {
118
- // const pageIndex = startPage + i;
119
- // const page = this.pages[pageIndex - 1];
120
- // if (page.loadStatus !== this.pageLoadStatus.LOADED) {
121
- // pdfDoc.getPage(i + 1).then((pdfPage) => {
122
- // page.pdfPage = pdfPage;
123
- // page.loadStatus = this.pageLoadStatus.LOADED;
124
- // // 通知可以进行渲染了
125
- // this.startRenderPages(pdfPage, page, pageIndex)
126
- // });
127
- // }
128
- // }
129
- // });
130
- // },
131
- // initPages(totalPage) {
132
- // // const pages = [];
133
- // this.totalPageCount = totalPage
134
- // for (let i = 0; i < totalPage; i += 1) {
135
- // this.pages.push({
136
- // pageNo: i + 1,
137
- // loadStatus: this.pageLoadStatus.WAIT,
138
- // pdfPage: null,
139
- // dom: null
140
- // });
141
- // }
142
- // },
143
- // async fetchPdfFragment (pageIndex) {
144
- // // 置换加签后的文件地址。
145
- // let obj = {}
146
- // await this.$http.post(
147
- // '/knowledge-api/temporary-certificate/or-origin?expired=30', this.pdfUrl + pageIndex + '.pdf', {
148
- // headers:{
149
- // "Content-Type": "application/json",
150
- // }
151
- // }).then(async res => {
152
- // console.log(res,'resres');
153
- // if (res.bodyText) {
154
- // // 最后返回一个 包含这4个参数的对象
155
- // obj = await {
156
- // "startPage": pageIndex, // 分片的开始页码
157
- // "endPage": pageIndex + 5, // 分片结束页码
158
- // "totalPage": this.totalPageCount, // pdf 总页数
159
- // "url": res.bodyText // 分片内容下载地址
160
- // }
161
- // }
162
- // })
163
- // return obj
164
- // },
165
- // startRenderPages(pdfPage, page , pageIndex) {
166
- // const viewport = pdfPage.getViewport({
167
- // scale: this.scale, // 缩放的比例
168
- // rotation: this.rotation, // 旋转的角度
169
- // });
170
- // // 记录pdf页面高度
171
- // const pageSize = {
172
- // width: viewport.width,
173
- // height: viewport.height,
174
- // }
175
- // this.pageSize = pageSize
176
- // // 创建内容绘制区，并设置大小
177
- // this.contentView.style.width = `${ pageSize.width }px`;
178
- // this.contentView.style.height = `${( this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
179
- // this.contentView.style.margin = '0 auto 0'
180
- // this.contentView.style.position = 'relative'
181
- // // contentView.style.overflowY = 'auto'
182
- // this.$refs.pdfView.appendChild(this.contentView);
183
- // this.renderPages(pageIndex)
184
- // },
185
- // renderPageContent(page, pageIndex) {
186
- // const { pdfPage, pageNo, dom } = page;
187
- // // dom 元素已存在，无须重新渲染，直接返回
188
- // if (dom && dom.children.length != 0) {
189
- // // console.log(dom.children, 'length');
190
- // return;
191
- // }
192
- // const viewport = pdfPage.getViewport({
193
- // scale: this.scale,
194
- // rotation: this.rotation,
195
- // });
196
- // // 创建新的canvas
197
- // const canvas = document.createElement('canvas');
198
- // const context = canvas.getContext('2d');
199
- // canvas.height = this.pageSize.height;
200
- // canvas.width = this.pageSize.width;
201
- // // 创建渲染的dom
202
- // const pageDom = document.createElement('div');
203
- // pageDom.style.position = 'absolute';
204
- // pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
205
- // pageDom.style.width = `${this.pageSize.width}px`;
206
- // pageDom.style.height = `${this.pageSize.height}px`;
207
- // pageDom.appendChild(canvas);
208
- // // 渲染内容
209
- // // console.log(pdfPage.render({
210
- // // canvasContext: context,
211
- // // viewport,
212
- // // }));
213
- // let renderContext = {
214
- // canvasContext: context,
215
- // viewport:viewport,
216
- // }
217
- // pdfPage.render(renderContext).promise.then(() =>{
218
- // console.log(pdfPage.getTextContent(),'getTextContent');
219
- // return pdfPage.getTextContent()
220
- // }).then((textContent) =>{
221
- // const textLayerDiv = document.createElement('div');
222
- // textLayerDiv.setAttribute('class', 'textLayer');
223
- // // 将文本图层div添加至每页pdf的div中
224
- // // 创建新的TextLayerBuilder实例
225
- // // 这里因为版本问题跟pc端有些差异
226
- // pageDom.appendChild(textLayerDiv);
227
- // let textLayer = new TextLayerBuilder({
228
- // textLayerDiv:textLayerDiv,
229
- // pageIndex: pdfPage._pageIndex,
230
- // viewport: viewport,
231
- // });
232
- // textLayer.setTextContent(textContent);
233
- // textLayer.render()
234
- // })
235
- // page.dom = pageDom;
236
- // if(pageIndex == this.identifyTextPostion.page) {
237
- // let div = document.createElement('div')
238
- // div.style.position = 'absolute';
239
- // let lineHeightScaleWidth = this.pageSize.width / this.identifyTextPostion.pageWidth
240
- // let lineHeightScaleHeight = this.pageSize.height / this.identifyTextPostion.pageHeight
241
-
242
- // div.style.left = this.identifyTextPostion.left * lineHeightScaleWidth + 'px',
243
- // div.style.top = this.identifyTextPostion.top * lineHeightScaleHeight + 'px'
244
- // div.style.height = this.identifyTextPostion.height * lineHeightScaleHeight + 'px' ;
245
- // div.style.width = this.identifyTextPostion.width * lineHeightScaleWidth + 'px'
246
- // div.style.backgroundColor = 'rgb(191, 185, 255, 0.5)'
247
- // pageDom.appendChild(div)
248
- // }
249
- // this.contentView.appendChild(pageDom);
250
- // if(this.fisrtLoad) {
251
- // setTimeout(() =>{
252
- // this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
253
- // }, 100)
254
- // this.fisrtLoad = false
255
- // }
256
-
257
- // },
258
- // // 监听容器的滚动事件，触发 scrollPdf 方法
259
- // // 这里加了防抖保证不会一次产生过多请求
260
- // scrollPdf: _.debounce(function(e, that) {
261
- // const scrollTop = e.target.scrollTop;
262
- // const height = e.target.clientHeight;
263
- // // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
264
- // const pageIndex = scrollTop > 0 ?
265
- // Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
266
- // 1;
267
- // // that.loadBefore(pageIndex);
268
- // // that.loadAfter(pageIndex);
269
- // this.loadPdfData(pageIndex)
270
- // }, 500),
271
- // pdfScroll(e) {
272
- // // console.log(e);
273
- // this.scrollPdf(e,this)
274
- // },
275
- // // 分片每次只做一次处理，所以不考虑多片情况
276
- // loadBefore(pageIndex) {
277
- // this.loadPdfData(pageIndex)
278
- // // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) - (this.SLICE_COUNT - 1);
279
- // // if (start > 0) {
280
- // // // const prevPage = this.pages[start - 1] || {};
281
- // // this.loadPdfData(start)
282
- // // // prevPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
283
- // // }
284
- // },
285
- // loadAfter(pageIndex) {
286
- // this.loadPdfData(pageIndex)
287
- // // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) + 1;
288
- // // if (start <= this.pages.length) {
289
- // // // const nextPage = this.pages[start - 1] || {};
290
- // // this.loadPdfData(start)
291
- // // // nextPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
292
- // // }
293
- // },
294
- // // 首先我们获取到需要渲染的范围
295
- // // 根据当前的可视范围内的页码，我们前后只保留 8 页
296
- // getRenderScope (pageIndex) {
297
- // const pagesToRender = [];
298
- // let i = pageIndex - 1;
299
- // let j = pageIndex + 1;
300
- // // pageIndex - 1 表示当前页码数 对应的下标位置
301
- // pagesToRender.push(this.pages[pageIndex - 1]);
302
- // while (pagesToRender.length < 8 && pagesToRender.length < this.pages.length) {
303
- // if (i > 0) {
304
- // pagesToRender.push(this.pages[i - 1]);
305
- // i -= 1;
306
- // }
307
- // if (pagesToRender.length >= 8) {
308
- // break;
309
- // }
310
- // if (j <= this.pages.length) {
311
- // pagesToRender.push(this.pages[j - 1]);
312
- // j += 1;
313
- // }
314
- // }
315
- // return pagesToRender;
316
- // },
317
- // // 渲染需要展示的页面，不需展示的页码将其清除
318
- // renderPages (pageIndex) {
319
- // const pagesToRender = this.getRenderScope(pageIndex);
320
- // for (const i of this.pages) {
321
- // if (pagesToRender.includes(i)) {
322
- // i.loadStatus === this.pageLoadStatus.LOADED ?
323
- // this.renderPageContent(i, pageIndex) :
324
- // this.renderPageLoading(i);
325
- // } else {
326
- // this.clearPage(i);
327
- // }
328
- // }
329
- // },
330
- // // 清除页面 dom
331
- // clearPage (page) {
332
- // if (page.dom) {
333
- // this.contentView.removeChild(page.dom);
334
- // page.loadStatus = 0
335
- // page.dom = undefined;
336
- // }
337
- // },
338
- // // 页面正在下载时渲染loading视图
339
- // renderPageLoading (page) {
340
- // const { pageNo, dom } = page;
341
- // if (dom && dom.children.length != 0) {
342
- // return;
343
- // }
344
- // const pageDom = document.createElement('div');
345
- // pageDom.style.width = `${this.pageSize.width}px`;
346
- // pageDom.style.height = `${this.pageSize.height}px`;
347
- // pageDom.style.position = 'absolute';
348
- // pageDom.style.top = `${
349
- // ((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
350
- // }px`;
351
- // pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
352
- // pageDom.style.backgroundPosition = 'center'
353
- // pageDom.style.backgroundRepeat = 'no-repeat'
354
- // pageDom.style.backgroundColor = '#FFF'
355
- // page.dom = pageDom;
356
- // this.contentView.appendChild(pageDom);
357
- // }
358
- // },
359
77
  methods: {
360
78
  getpdfResloutePage (pdfResloute) {
361
79
  // 根据当前页面宽度设置缩放比例
@@ -565,7 +283,7 @@ export default {
565
283
  } else {
566
284
  this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
567
285
  }
568
- this.openTouch()
286
+ zoomElement(this.contentView)
569
287
  }, 100)
570
288
  }
571
289
  })
@@ -900,6 +618,10 @@ export default {
900
618
  if (newScale > 2) {
901
619
  newScale = 2;
902
620
  }
621
+ // 最大缩放比例限制
622
+ if(newScale < 1) {
623
+ newScale = 1;
624
+ }
903
625
  // 记住使用的缩放值
904
626
  that.displacement.scale = newScale;
905
627
  // console.log(newScale);
@@ -939,6 +661,7 @@ export default {
939
661
  if(value && value.length) {
940
662
  // 在 pdf_view 下创建 所有canvs的容器
941
663
  this.contentView = document.createElement('div')
664
+ this.contentView.style.transformOrigin = '50% 50%'
942
665
  this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res =>{
943
666
  if (res.data.code == 0) {
944
667
  // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了