zydx-plus 1.32.291 → 1.32.293

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zydx-plus",
3
- "version": "1.32.291",
3
+ "version": "1.32.293",
4
4
  "description": "Vue.js",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -199,7 +199,7 @@ let buttonNames = {
199
199
  lowLevel: {
200
200
  default: "setTask",
201
201
  setTask: '布置任务',
202
- duplicate: '违纪查重',
202
+ // duplicate: '违纪查重',
203
203
  teacherReview: '教师评价',
204
204
  studentReview: '同学互评',
205
205
  studyRecord: '学习记录',
@@ -335,7 +335,7 @@ let buttonNames = {
335
335
  default: "setTask",
336
336
  setTask: '布置任务',
337
337
  teacherAnswer: '教师答疑',
338
- duplicate: '违纪查重',
338
+ // duplicate: '违纪查重',
339
339
  teacherReview: '教师评价',
340
340
  studentReview: '同学互评',
341
341
  studyRecord: '学习记录',
@@ -381,7 +381,7 @@ let buttonNames = {
381
381
  lowLevel: {
382
382
  default: "setTask",
383
383
  setTask: '布置任务',
384
- duplicate: '违纪查重',
384
+ // duplicate: '违纪查重',
385
385
  teacherReview: '教师评价',
386
386
  studentReview: '同学互评',
387
387
  studyRecord: '学习记录',
@@ -648,7 +648,7 @@ let buttonNames = {
648
648
  default: "setTask",
649
649
  setTask: '布置任务',
650
650
  // groupStudy: '小组学习',
651
- duplicate: '违纪查重',
651
+ // duplicate: '违纪查重',
652
652
  teacherReview: '教师评价',
653
653
  studentReview: '同学互评',
654
654
  studyRecord: '学习记录',
@@ -9,8 +9,11 @@
9
9
  <img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt=""/>
10
10
  </div>
11
11
  <div class="wrap-can" ref="wrapCan">
12
- <canvas @mousedown="mouseDown" @mousemove="mouseMove" :id="id"></canvas>
13
- <!-- <div class="cursor" :style="cursorRounded"></div>-->
12
+ <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown" @mousemove.stop="mouseMove" :id="id"></canvas>
13
+ <canvas :id="`${id}2`"></canvas>
14
+ <div v-if="state === 'text'&&textY2>0&&textX2>0" class="text-frame" :style="{top: textY2/sratio + 'px', left: textX2/sratio + 'px','min-height': fontSize+8 +'px', border: `1px dashed ${color}`}">
15
+ <div class="text-input" ref="textInput" :style="{'font-size': fontSize + 'px',color: color}" :contenteditable="contenteditable"></div>
16
+ </div>
14
17
  </div>
15
18
  </div>
16
19
  <div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}"
@@ -28,6 +31,82 @@
28
31
  </button>
29
32
  </div>
30
33
  </div>
34
+ <div class="flip-tool" @click="flipTool" :style="{height: flipToolShow? '600px': '25px', overflow: flipToolShow2? 'visible':'hidden'}">
35
+ <div class="tool-text" v-if="!flipToolShow">
36
+ <span>阅读笔</span>
37
+ </div>
38
+ <div class="tool-list" :style="{transform: `translateY(${flipToolShow? '0':'-130%'})`}">
39
+ <div v-if="setShow" class="set" :style="{top: top + 'px'}">
40
+ <div class="set-list set-text" v-if="state === 'text'">
41
+ <span>文字字号</span>
42
+ <em v-for="(item) in textData" :style="{color: fontSize === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="textSizeTap(item)">{{ item }}</em>
43
+ </div>
44
+ <div class="set-list" v-else>
45
+ <span>线条粗细</span>
46
+ <em v-for="(item) in strokeData" :style="{color: lineWidth === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="strokeTap(item)">{{ item }}</em>
47
+ </div>
48
+ <div class="set-list">
49
+ <span>线条颜色</span>
50
+ <i v-for="(item) in strokeColor" @click.stop="strokeColTap(item)" :style="{'background-color': item === color? '#fff': item, border: `4px solid ${item}`}"></i>
51
+ </div>
52
+ </div>
53
+ <div class="tool-item" :class="{'tool-item-active': state === null}" @click.stop="mouse">
54
+ <div class="tool-item-img">
55
+ <img src="./img/shubiao.png" alt=""/>
56
+ </div>
57
+ </div>
58
+ <div class="tool-item" :class="{'tool-item-active': state === 'brush'}" @click.stop="brush">
59
+ <div class="tool-item-img">
60
+ <img src="./img/huabi.png" alt=""/>
61
+ </div>
62
+ </div>
63
+ <div class="tool-item" :class="{'tool-item-active': state === 'text'}" @click.stop="textTap">
64
+ <div class="tool-item-img">
65
+ <img src="./img/wenzi.png" alt=""/>
66
+ </div>
67
+ </div>
68
+ <div class="tool-item" :class="{'tool-item-active': state === 'rectangle'}" @click.stop="rectangleTap">
69
+ <div class="tool-item-img">
70
+ <img src="./img/juxing.png" alt=""/>
71
+ </div>
72
+ </div>
73
+ <div class="tool-item" :class="{'tool-item-active': state === 'circula'}" @click.stop="circularTap">
74
+ <div class="tool-item-img">
75
+ <img src="./img/yuan.png" alt=""/>
76
+ </div>
77
+ </div>
78
+ <div class="tool-item" :class="{'tool-item-active': state === 'straight'}" @click.stop="straightTap">
79
+ <div class="tool-item-img">
80
+ <img src="./img/jian.png" alt=""/>
81
+ </div>
82
+ </div>
83
+ <div class="tool-item" :class="{'tool-item-active': state === 'arrow'}" @click.stop="arrowTap">
84
+ <div class="tool-item-img">
85
+ <img src="./img/jiantou.png" alt=""/>
86
+ </div>
87
+ </div>
88
+ <div class="tool-item" @click.stop="backward">
89
+ <div class="tool-item-img">
90
+ <img src="./img/houtui.png" alt=""/>
91
+ </div>
92
+ </div>
93
+ <div class="tool-item" @click.stop="preserve">
94
+ <div class="tool-item-img">
95
+ <img src="./img/baocun.png" alt=""/>
96
+ </div>
97
+ </div>
98
+ <div class="tool-item" @click.stop="empty">
99
+ <div class="tool-item-img">
100
+ <img src="./img/xiangpi.png" alt=""/>
101
+ </div>
102
+ </div>
103
+ <div class="tool-item">
104
+ <div class="tool-item-img">
105
+ <img src="./img/guanbi.png" alt=""/>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
31
110
  <div v-if="loading" class="loading-back">
32
111
  <div class="loading-cont">
33
112
  <div class="loadings">Loading</div>
@@ -40,6 +119,7 @@
40
119
  import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法d
41
120
  PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
42
121
  const jsdelivr = '/zydx/static/cmaps/'
122
+
43
123
  export default {
44
124
  name: "zydx-flip",
45
125
  data() {
@@ -71,6 +151,28 @@ export default {
71
151
  ctx: null,
72
152
  lineWidth: 2,
73
153
  points: [],
154
+ setShow: false,
155
+ flipToolShow2: false,
156
+ flipToolShow: false,
157
+ strokeData: ['1', '2', '3', '4', '5', '6', '7'], // 画笔数据
158
+ strokeColor: ['#000', '#f00', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], // 画笔颜色
159
+ textData: ['14', '16', '18', '20', '22', '24'], // 文本数据
160
+ color: '#000',
161
+ text: '',
162
+ state: null,
163
+ top: 0,
164
+ fontSize: 14,
165
+ textX: 0,
166
+ textY: 0,
167
+ textX2: 0,
168
+ textY2: 0,
169
+ textStart: false,
170
+ contenteditable: false,
171
+ linkId: null,
172
+ pointsSelect: [],
173
+ checkDrawing: false,
174
+ checkX: 0,
175
+ checkY: 0
74
176
  }
75
177
  },
76
178
  props: {
@@ -146,13 +248,210 @@ export default {
146
248
  this.id = 'canvas-wrap' + Math.random().toString(36).substr(2)
147
249
  // 在画板以外松开鼠标后冻结画笔
148
250
  document.onmouseup = () => {
149
- if (this.isDrawing) this.mouseUp()
251
+ if (this.isDrawing || this.checkDrawing) this.mouseUp()
150
252
  }
151
253
  },
152
254
  methods: {
255
+ empty() {
256
+ this.points = []
257
+ this.clearRect(true)
258
+ },
259
+ preserve() {
260
+ this.$emit('updateData', this.points)
261
+ },
262
+ // 后退
263
+ backward() {
264
+ if(this.points.length === 0) return
265
+ if(this.points[this.points.length - 1].type === 'line') {
266
+ const id = this.points[this.points.length - 1].id
267
+ for(let i = 0; i < this.points.length; i++) {
268
+ if(this.points[i].id === id) {
269
+ this.points.splice(i,1)
270
+ i--
271
+ }
272
+ }
273
+ }else {
274
+ this.points.pop()
275
+ }
276
+ this.clearRect()
277
+ },
278
+ // 鼠标
279
+ mouse() {
280
+ this.state = null
281
+ this.setShow = false
282
+ },
283
+ // 画笔
284
+ brush() {
285
+ this.state = 'brush'
286
+ this.setShow = !this.setShow
287
+ this.top = 60
288
+ },
289
+ // 文字字号
290
+ textSizeTap(v) {
291
+ this.fontSize = Number(v)
292
+ },
293
+ // 矩形
294
+ rectangleTap() {
295
+ this.state = 'rectangle'
296
+ this.setShow = !this.setShow
297
+ this.top = 60*3
298
+ },
299
+ // 圆形
300
+ circularTap() {
301
+ this.state = 'circular'
302
+ this.setShow = !this.setShow
303
+ this.top = 60*4
304
+ },
305
+ // 直线
306
+ straightTap() {
307
+ this.state = 'straight'
308
+ this.setShow = !this.setShow
309
+ this.top = 60*5
310
+ },
311
+ // 箭头
312
+ arrowTap() {
313
+ this.state = 'arrow'
314
+ this.setShow = !this.setShow
315
+ this.top = 60*6
316
+ },
317
+ textTap() {
318
+ this.state = 'text'
319
+ this.setShow = !this.setShow
320
+ this.top = 60*2
321
+ this.textStart = true
322
+ this.textX2 = 0
323
+ this.textY2 = 0
324
+ },
325
+ flipTool() {
326
+ this.setShow = false
327
+ this.textShow = false
328
+ this.flipToolShow = !this.flipToolShow
329
+ if(this.flipToolShow) {
330
+ setTimeout(() => {
331
+ this.flipToolShow2 = true
332
+ }, 600)
333
+ } else {
334
+ this.flipToolShow2 = false
335
+ }
336
+ },
337
+ strokeColTap(v) {
338
+ this.color = v
339
+ },
340
+ strokeTap(v) {
341
+ this.lineWidth = Number(v)
342
+ },
343
+ // 查询当前点击的图形
344
+ checkDown(e) {
345
+ e = e || event
346
+ e.preventDefault()
347
+ let obj = {
348
+ x: e.offsetX*this.sratio,
349
+ y: e.offsetY*this.sratio
350
+ }
351
+ this.checkX = obj.x
352
+ this.checkY = obj.y
353
+ this.pointsSelect = []
354
+ for(let i = 0; i < this.points.length; i++) {
355
+ if (this.points[i].index === this.pageIndex) {
356
+ const x1 = this.points[i].x*this.scales/this.points[i].scale
357
+ const y1 = this.points[i].y*this.scales/this.points[i].scale
358
+ if(this.points[i].type === 'arrow') {
359
+ const x2 = this.points[i+1].x*this.scales/this.points[i].scale
360
+ const y2 = this.points[i+1].y*this.scales/this.points[i].scale
361
+ const x3 = obj.x
362
+ const y3 = obj.y
363
+ const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
364
+ const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
365
+ const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
366
+ const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
367
+ if(a/b <= 5 && c <= b && d <= b) {
368
+ console.log(this.points[i])
369
+ }
370
+ }
371
+ if(this.points[i].type === 'text') {
372
+ const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].text[0].length*this.points[i].size*this.scales/this.points[i].scale
373
+ const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].text.length*this.points[i].size*this.scales/this.points[i].scale
374
+ if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
375
+ console.log(this.points[i])
376
+ }
377
+ }
378
+ if(this.points[i].type === 'circular') {
379
+ const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
380
+ const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
381
+ const a = Math.sqrt(Math.pow(obj.x-x1,2)+Math.pow(obj.y-y1,2))
382
+ const b = Math.sqrt(Math.pow(obj.x-x2,2)+Math.pow(obj.y-y2,2))
383
+ if(a <= this.points[i].width*this.scales/this.points[i].scale && b <= this.points[i].width*this.scales/this.points[i].scale) {
384
+ console.log(this.points[i])
385
+ }
386
+ }
387
+ if(this.points[i].type === 'rectangle') {
388
+ const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
389
+ const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].height*this.scales/this.points[i].scale
390
+ if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
391
+ this.pointsSelect.push(this.points[i])
392
+ this.rectangleProcessing(this.points[i],{x:0,y:0})
393
+ this.points.splice(i,1)
394
+ }
395
+ }
396
+ if(this.points[i].type === 'line') {
397
+ const x2 = this.points[i+1]?this.points[i+1].x*this.scales/this.points[i].scale:0
398
+ const y2 = this.points[i+1]?this.points[i+1].y*this.scales/this.points[i].scale:0
399
+ const x3 = obj.x
400
+ const y3 = obj.y
401
+ const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
402
+ const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
403
+ const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
404
+ const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
405
+ if(a/b <= 7 && c <= b && d <= b) {
406
+ for(let i=0; i<this.points.length; i++) {
407
+ if(this.points[i].id === this.points[i].id) {
408
+ this.pointsSelect.push(this.points[i])
409
+ this.lineProcessing(this.points[i],this.points[i+1],{x:0,y:0})
410
+ this.points.splice(i,1)
411
+ i--
412
+ }
413
+ }
414
+ }
415
+ }
416
+ }
417
+ }
418
+ },
419
+ checkMove(e) {
420
+ let obj = {
421
+ x: e.offsetX*this.sratio - this.checkX,
422
+ y: e.offsetY*this.sratio - this.checkY
423
+ }
424
+ this.clearRect()
425
+ console.log(this.pointsSelect)
426
+ for(let i=0; i<this.pointsSelect.length; i++) {
427
+ if(this.pointsSelect[i].type === 'line') {
428
+ this.lineProcessing(this.pointsSelect[i],this.pointsSelect[i+1],obj)
429
+ }
430
+ if(this.pointsSelect[i].type === 'rectangle') {
431
+ this.rectangleProcessing(this.pointsSelect[i],obj)
432
+ }
433
+ }
434
+ },
435
+ checkUp(e) {
436
+ let obj = {
437
+ x: e.offsetX*this.sratio - this.checkX,
438
+ y: e.offsetY*this.sratio - this.checkY
439
+ }
440
+ for(let i=0; i<this.pointsSelect.length; i++) {
441
+ this.pointsSelect[i].x = this.pointsSelect[i].x + obj.x
442
+ this.pointsSelect[i].y = this.pointsSelect[i].y + obj.y
443
+ this.points.push(this.pointsSelect[i])
444
+ }
445
+ },
153
446
  mouseDown (e) {
447
+ this.setShow = false
154
448
  e = e || event
155
449
  e.preventDefault()
450
+ if(this.state === null) {
451
+ this.checkDrawing = true
452
+ // this.checkDown(e)
453
+ return
454
+ }
156
455
  this.isDrawing = true
157
456
  let obj = {
158
457
  x: e.offsetX*this.sratio,
@@ -163,6 +462,10 @@ export default {
163
462
  mouseMove (e) {
164
463
  e = e || event
165
464
  e.preventDefault()
465
+ if(this.state === null) {
466
+ // if(this.checkDrawing) this.checkMove(e)
467
+ return
468
+ }
166
469
  if (this.isDrawing) {
167
470
  let obj = {
168
471
  x: e.offsetX*this.sratio,
@@ -174,6 +477,11 @@ export default {
174
477
  mouseUp (e) {
175
478
  e = e || event
176
479
  e.preventDefault()
480
+ if(this.state === null) {
481
+ this.checkDrawing = false
482
+ // this.checkUp(e)
483
+ return
484
+ }
177
485
  let obj = {
178
486
  x: e.offsetX*this.sratio,
179
487
  y: e.offsetY*this.sratio
@@ -185,26 +493,231 @@ export default {
185
493
  drawStart (obj) {
186
494
  obj.index = this.pageIndex
187
495
  obj.start = 'start'
188
- obj.scale = this.scales
496
+ this.linkId = Math.random().toString(36).substr(2)
189
497
  this.startX = obj.x
190
498
  this.startY = obj.y
499
+ if(this.textStart) {
500
+ this.textX2 = obj.x
501
+ this.textY2 = obj.y
502
+ this.contenteditable = true
503
+ this.setShow = false
504
+ setTimeout(() => {
505
+ this.textStart = false
506
+ },500)
507
+ }
508
+ this.textX = obj.x
509
+ this.textY = obj.y
510
+ if(this.state === 'brush') this.line(obj)
511
+ if(this.state === 'rectangle') this.rectangle(obj)
512
+ if(this.state === 'circular') this.circular(obj)
513
+ if(this.state === 'straight') this.straight(obj)
514
+ if(this.state === 'arrow') this.arrow(obj)
515
+ },
516
+ drawEnd (obj) {
517
+ obj.index = this.pageIndex
518
+ obj.start = 'end'
519
+ if(this.state === 'brush') this.line(obj)
520
+ if(this.state === 'rectangle') this.rectangle(obj,'end')
521
+ if(this.state === 'circular') this.circular(obj,'end')
522
+ if(this.state === 'straight') this.straight(obj,'end')
523
+ if(this.state === 'arrow') this.arrow(obj,'end')
524
+ },
525
+ drawMove (obj) {
526
+ obj.index = this.pageIndex
527
+ obj.start = 'move'
528
+ if(this.state === 'brush') this.line(obj)
529
+ if(this.state === 'rectangle') this.rectangle(obj)
530
+ if(this.state === 'circular') this.circular(obj)
531
+ if(this.state === 'straight') this.straight(obj)
532
+ if(this.state === 'arrow') this.arrow(obj)
533
+ this.startY = obj.y
534
+ this.startX = obj.x
535
+ },
536
+ turnText() {
537
+ if(this.textStart) return
538
+ if(this.state === 'text') {
539
+ const text = this.$refs.textInput.innerText
540
+ this.contenteditable = false
541
+ this.state = null
542
+ if(text === '') return
543
+ this.addText(text)
544
+ }
545
+ },
546
+ // 添加文字
547
+ addText(v) {
548
+ let obj = {}
549
+ obj.index = this.pageIndex
550
+ obj.type = 'text'
551
+ obj.scale = this.scales
552
+ obj.color = this.color
553
+ obj.size = this.fontSize
554
+ obj.id = this.linkId
555
+ // 解析换行
556
+ const arr = v.split('\n')
557
+ for(let i = 0; i < arr.length; i++) {
558
+ this.ctx.beginPath();
559
+ this.ctx.font = `${this.fontSize*this.sratio}px 黑体`;
560
+ this.ctx.fillStyle = this.color;
561
+ this.ctx.fillText(arr[i],this.textX2,this.textY2 + this.fontSize*this.sratio*i + this.fontSize*this.sratio);
562
+ this.ctx.stroke()
563
+ }
564
+ this.points.push({
565
+ x: this.textX2,
566
+ y: this.textY2,
567
+ text: arr,
568
+ index: obj.index,
569
+ type: obj.type,
570
+ scale: obj.scale,
571
+ id: obj.id,
572
+ color: obj.color,
573
+ size: obj.size,
574
+ })
575
+ },
576
+ // 画箭头
577
+ arrow(obj,type) {
578
+ obj.index = this.pageIndex
579
+ obj.type = 'arrow'
580
+ obj.scale = this.scales
581
+ obj.color = this.color
582
+ obj.border = this.lineWidth
583
+ obj.id = this.linkId
584
+ const angle = Math.atan2(this.textY - obj.y, this.textX - obj.x) * 180 / Math.PI
585
+ const angle1 = (angle + 20) * Math.PI / 180
586
+ const angle2 = (angle - 20) * Math.PI / 180
587
+ const topX = 30 * Math.cos(angle1)
588
+ const topY = 30 * Math.sin(angle1)
589
+ const botX = 30 * Math.cos(angle2)
590
+ const botY = 30 * Math.sin(angle2)
591
+ this.clearRect()
592
+ this.ctx.beginPath();
593
+ this.ctx.lineWidth = this.lineWidth * this.sratio
594
+ this.ctx.strokeStyle = this.color
595
+ let arrowX, arrowY
596
+ this.ctx.moveTo(this.textX, this.textY);
597
+ this.ctx.lineTo(obj.x, obj.y);
598
+ arrowX = obj.x + topX
599
+ arrowY = obj.y + topY
600
+ this.ctx.moveTo(arrowX, arrowY);
601
+ this.ctx.lineTo(obj.x, obj.y)
602
+ arrowX = obj.x + botX;
603
+ arrowY = obj.y + botY;
604
+ this.ctx.lineTo(arrowX, arrowY)
605
+ this.ctx.stroke()
606
+ if(type === 'end') {
607
+ this.points.push({
608
+ x: this.textX,
609
+ y: this.textY,
610
+ x2: obj.x,
611
+ y2: obj.y,
612
+ index: obj.index,
613
+ type: obj.type,
614
+ scale: obj.scale,
615
+ id: obj.id,
616
+ color: obj.color,
617
+ border: obj.border,
618
+ })
619
+ }
620
+ },
621
+ // 画直线
622
+ straight(obj,type) {
623
+ obj.index = this.pageIndex
624
+ obj.type = 'straight'
625
+ obj.scale = this.scales
626
+ obj.color = this.color
627
+ obj.border = this.lineWidth
628
+ obj.id = this.linkId
629
+ this.clearRect()
191
630
  this.ctx.beginPath()
192
- this.ctx.strokeStyle = 'red'
193
- this.ctx.moveTo(this.startX, this.startY)
631
+ this.ctx.lineWidth = this.lineWidth * this.sratio
632
+ this.ctx.strokeStyle = this.color
633
+ this.ctx.moveTo(this.textX, this.textY)
194
634
  this.ctx.lineTo(obj.x, obj.y)
195
- this.ctx.lineCap = 'round'
196
- this.ctx.lineJoin = 'round'
635
+ this.ctx.stroke()
636
+ if(type === 'end') {
637
+ this.points.push({
638
+ x: this.textX,
639
+ y: this.textY,
640
+ x2: obj.x,
641
+ y2: obj.y,
642
+ index: obj.index,
643
+ type: obj.type,
644
+ scale: obj.scale,
645
+ id: obj.id,
646
+ color: obj.color,
647
+ border: obj.border,
648
+ })
649
+ }
650
+ },
651
+ // 画圆
652
+ circular(obj,type) {
653
+ if(obj.x-this.textX <= 0) return
654
+ obj.index = this.pageIndex
655
+ obj.type = 'circular'
656
+ obj.scale = this.scales
657
+ obj.color = this.color
658
+ obj.border = this.lineWidth
659
+ obj.id = this.linkId
660
+ this.clearRect()
661
+ this.ctx.beginPath()
197
662
  this.ctx.lineWidth = this.lineWidth * this.sratio
663
+ this.ctx.strokeStyle = this.color
664
+ this.ctx.moveTo(obj.x,this.textY)
665
+ this.ctx.arc(this.textX, this.textY, obj.x-this.textX, 0, 2 * Math.PI, false);
198
666
  this.ctx.stroke()
199
- this.ctx.closePath()
200
- this.points.push(obj)
667
+ if(type === 'end') {
668
+ this.points.push({
669
+ x: this.textX,
670
+ y: this.textY,
671
+ width: obj.x-this.textX,
672
+ index: obj.index,
673
+ type: obj.type,
674
+ scale: obj.scale,
675
+ id: obj.id,
676
+ color: obj.color,
677
+ border: obj.border,
678
+ })
679
+ }
201
680
  },
202
- drawEnd (obj) {
681
+ // 画矩形
682
+ rectangle(obj,type) {
203
683
  obj.index = this.pageIndex
204
- obj.start = 'end'
684
+ obj.type = 'rectangle'
685
+ obj.scale = this.scales
686
+ obj.color = this.color
687
+ obj.border = this.lineWidth
688
+ obj.id = this.linkId
689
+ this.clearRect()
690
+ this.ctx.beginPath()
691
+ this.ctx.lineWidth = this.lineWidth * this.sratio
692
+ this.ctx.strokeStyle = this.color
693
+ this.ctx.rect(this.textX, this.textY, obj.x-this.textX, obj.y-this.textY);
694
+ this.ctx.stroke()
695
+ if(type === 'end') {
696
+ this.points.push({
697
+ x: this.textX,
698
+ y: this.textY,
699
+ width: obj.x-this.textX,
700
+ height: obj.y-this.textY,
701
+ index: obj.index,
702
+ type: obj.type,
703
+ scale: obj.scale,
704
+ id: obj.id,
705
+ color: obj.color,
706
+ border: obj.border,
707
+ })
708
+ }
709
+ },
710
+ // 画线
711
+ line(obj) {
712
+ obj.index = this.pageIndex
713
+ obj.type = 'line'
205
714
  obj.scale = this.scales
715
+ obj.color = this.color
716
+ obj.border = this.lineWidth
717
+ obj.id = this.linkId
206
718
  this.ctx.beginPath()
207
- this.ctx.strokeStyle = 'red'
719
+ this.ctx.strokeStyle = this.color
720
+ this.ctx.lineWidth = this.lineWidth * this.sratio
208
721
  this.ctx.moveTo(this.startX, this.startY)
209
722
  this.ctx.lineTo(obj.x, obj.y)
210
723
  this.ctx.lineCap = 'round'
@@ -212,24 +725,94 @@ export default {
212
725
  this.ctx.stroke()
213
726
  this.ctx.closePath()
214
727
  this.points.push(obj)
215
- this.$emit('updateData', this.points)
216
728
  },
217
- drawMove (obj) {
218
- obj.index = this.pageIndex
219
- obj.start = 'move'
220
- obj.scale = this.scales
729
+ clearRect(v) {
730
+ const width = this.canvasStyle.widthCanvas
731
+ const height = this.canvasStyle.heightCanvas
732
+ this.ctx.clearRect(0, 0, width, height)
733
+ if(v) return
734
+ this.processing()
735
+ },
736
+ lineProcessing(data,data2,v) {
221
737
  this.ctx.beginPath()
222
- this.ctx.moveTo(this.startX, this.startY)
223
- this.ctx.lineTo(obj.x, obj.y)
224
- this.ctx.strokeStyle = 'red'
225
- this.ctx.lineWidth = this.lineWidth * this.sratio
738
+ this.ctx.moveTo(data.x*this.scales/data.scale + v.x,data.y*this.scales/data.scale + v.y)
739
+ if(data.start !== 'end') {
740
+ this.ctx.lineTo(data2.x*this.scales/data2.scale + v.x, data2.y*this.scales/data2.scale + v.y)
741
+ }
742
+ this.ctx.strokeStyle = data.color
226
743
  this.ctx.lineCap = 'round'
227
744
  this.ctx.lineJoin = 'round'
745
+ this.ctx.lineWidth = data.border * this.sratio
228
746
  this.ctx.stroke()
229
747
  this.ctx.closePath()
230
- this.startY = obj.y
231
- this.startX = obj.x
232
- this.points.push(obj)
748
+ },
749
+ rectangleProcessing(data,v = {x:0,y:0}) {
750
+ this.ctx.beginPath()
751
+ this.ctx.lineWidth = data.border * this.sratio
752
+ this.ctx.strokeStyle = data.color
753
+ this.ctx.strokeRect(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y, data.width*this.scales/data.scale, data.height*this.scales/data.scale);
754
+ this.ctx.stroke()
755
+ },
756
+ // 处理数据
757
+ processing() {
758
+ for(let i = 0; i < this.points.length; i++) {
759
+ if(this.points[i].index === this.pageIndex) {
760
+ if(this.points[i].type === 'line') {
761
+ this.lineProcessing(this.points[i],this.points[i+1],{x:0,y:0})
762
+ }
763
+ if(this.points[i].type === 'rectangle') {
764
+ this.rectangleProcessing(this.points[i],{x:0,y:0})
765
+ }
766
+ if(this.points[i].type === 'circular') {
767
+ this.ctx.beginPath()
768
+ this.ctx.lineWidth = this.points[i].border * this.sratio
769
+ this.ctx.strokeStyle = this.points[i].color
770
+ this.ctx.arc(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale, this.points[i].width*this.scales/this.points[i].scale, 0, 2 * Math.PI, false);
771
+ this.ctx.stroke()
772
+ }
773
+ if(this.points[i].type === 'straight') {
774
+ this.ctx.beginPath()
775
+ this.ctx.lineWidth = this.points[i].border * this.sratio
776
+ this.ctx.strokeStyle = this.points[i].color
777
+ this.ctx.moveTo(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale)
778
+ this.ctx.lineTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale)
779
+ this.ctx.stroke()
780
+ }
781
+ if(this.points[i].type === 'arrow') {
782
+ const angle = Math.atan2(this.points[i].y*this.scales/this.points[i].scale - this.points[i].y2*this.scales/this.points[i].scale, this.points[i].x*this.scales/this.points[i].scale - this.points[i].x2*this.scales/this.points[i].scale) * 180 / Math.PI
783
+ const angle1 = (angle + 20) * Math.PI / 180
784
+ const angle2 = (angle - 20) * Math.PI / 180
785
+ const topX = 30 * Math.cos(angle1)
786
+ const topY = 30 * Math.sin(angle1)
787
+ const botX = 30 * Math.cos(angle2)
788
+ const botY = 30 * Math.sin(angle2)
789
+ this.ctx.beginPath();
790
+ this.ctx.lineWidth = this.points[i].border * this.sratio
791
+ this.ctx.strokeStyle = this.points[i].color
792
+ let arrowX, arrowY
793
+ this.ctx.moveTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale);
794
+ this.ctx.lineTo(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale);
795
+ arrowX = this.points[i].x2*this.scales/this.points[i].scale + topX
796
+ arrowY = this.points[i].y2*this.scales/this.points[i].scale + topY
797
+ this.ctx.moveTo(arrowX, arrowY);
798
+ this.ctx.lineTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale)
799
+ arrowX = this.points[i].x2*this.scales/this.points[i].scale + botX;
800
+ arrowY = this.points[i].y2*this.scales/this.points[i].scale + botY;
801
+ this.ctx.lineTo(arrowX, arrowY)
802
+ this.ctx.stroke();
803
+ }
804
+ if(this.points[i].type === 'text') {
805
+ const arr = this.points[i].text
806
+ for(let j = 0; j < arr.length; j++) {
807
+ this.ctx.beginPath();
808
+ this.ctx.font = `${this.points[i].size*this.sratio}px 黑体`;
809
+ this.ctx.fillStyle = this.points[i].color;
810
+ this.ctx.fillText(arr[j],this.points[i].x*this.scales/this.points[i].scale,this.points[i].y*this.scales/this.points[i].scale + this.points[i].size*this.sratio*j + this.points[i].size*this.sratio);
811
+ this.ctx.stroke();
812
+ }
813
+ }
814
+ }
815
+ }
233
816
  },
234
817
  flipLeft(e, v) {
235
818
  if (e > this.pdfPages) {
@@ -264,6 +847,7 @@ export default {
264
847
  }
265
848
  },
266
849
  readPdf(n) {
850
+ this.mouse()
267
851
  if (this.source === '' || this.source === undefined || this.source === null) return
268
852
  let that = this
269
853
  if(n !== 1) that.loading = true
@@ -279,19 +863,27 @@ export default {
279
863
  that.pdfPages = pdf.numPages // 获取pdf文件的总页数
280
864
  pdf.getPage(that.pageIndex).then(function (page) {
281
865
  let canvas = document.getElementById(that.id)
866
+ let canvas2 = document.getElementById(`${that.id}2`)
282
867
  that.ctx = canvas.getContext('2d');
868
+ let ctx2 = canvas2.getContext('2d');
283
869
  let viewport = page.getViewport({scale: that.scales})
284
870
  canvas.width = viewport.width * that.sratio
285
871
  canvas.height = viewport.height * that.sratio
286
872
  canvas.style.width = viewport.width + 'px'
287
873
  canvas.style.height = viewport.height + 'px'
874
+ canvas2.width = viewport.width * that.sratio
875
+ canvas2.height = viewport.height * that.sratio
876
+ canvas2.style.width = viewport.width + 'px'
877
+ canvas2.style.height = viewport.height + 'px'
288
878
  that.canvasStyle = {
289
879
  width: viewport.width + 'px',
290
880
  height: viewport.height + 'px',
291
- marginLeft: -(viewport.width / 2) + 'px'
881
+ marginLeft: -(viewport.width / 2) + 'px',
882
+ widthCanvas: viewport.width * that.sratio,
883
+ heightCanvas: viewport.height * that.sratio
292
884
  }
293
885
  let renderContext = {
294
- canvasContext: that.ctx,
886
+ canvasContext: ctx2,
295
887
  viewport: viewport,
296
888
  transform: [2, 0, 0, 2, 0, 0] //这里会进行放大,解决模糊问题
297
889
  }
@@ -309,22 +901,8 @@ export default {
309
901
  that.flipRights = false
310
902
  that.flipLefts = false
311
903
  that.oneShow = false
312
- that.imgArr[that.pageIndex] = canvas.toDataURL('image/jpeg', 1)
313
- for(let i = 0; i < that.points.length; i++) {
314
- if(that.points[i].index === that.pageIndex) {
315
- that.ctx.beginPath()
316
- that.ctx.moveTo(that.points[i].x*that.scales/that.points[i].scale,that.points[i].y*that.scales/that.points[i].scale)
317
- if(that.points[i].start !== 'end') {
318
- that.ctx.lineTo(that.points[i+1].x*that.scales/that.points[i].scale, that.points[i+1].y*that.scales/that.points[i].scale)
319
- }
320
- that.ctx.strokeStyle = 'red'
321
- that.ctx.lineCap = 'round'
322
- that.ctx.lineJoin = 'round'
323
- that.ctx.lineWidth = that.lineWidth * that.sratio
324
- that.ctx.stroke()
325
- that.ctx.closePath()
326
- }
327
- }
904
+ that.imgArr[that.pageIndex] = canvas2.toDataURL('image/jpeg', 1)
905
+ that.processing()
328
906
  }, 1000)
329
907
  })
330
908
  })
@@ -334,21 +912,150 @@ export default {
334
912
  </script>
335
913
 
336
914
  <style scoped>
337
- .cursor{
338
- position: fixed;
915
+ .set-text em{
916
+ width: 20px !important;
917
+ font-size: 12px !important;
918
+ }
919
+ .wrap-can-one{
920
+ position: absolute;
339
921
  top: 0;
340
922
  left: 0;
341
- z-index: 9999;
342
- width: 15px;
343
- height: 15px;
344
- margin-top: -7px;
345
- margin-left: -7px;
346
- cursor: none;
347
- transition: all 0s ease-in-out;
348
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAADICAYAAABCmsWgAAAAAXNSR0IArs4c6QAACg5JREFUeF7t3W+SEzcQxmFxjXwiZ8gF4HvuAFTlGqnASSAnAU4CnCSp9tq76/Wfaclyq1/pN1UUIauZ0bzqp6QZe+1XhY0E8iXwupTybt+tN6UU+7f9+bn/f9/2//1r/7f9+27bq7sdmQOTQH0C/5RS3u9B1OxteL6UUr6XUrqDAUnNUND2XgnYbPG5Ace5/hiYT3s0XfoLki4xcpDGBA7Lqo+N+1/bzbC8fbZEaz4FSJqjY8cbEzAgNnvYLHKv7bAMs5mleQNJc3TseEMCBuPrDfvX7mr3KR9aZxWQ1MZN+1sTiAZy6G/z8gsktw45+9ckYE+ubIk1amuCApJRw7XeeUcDaZ5RQLJesY64Ynv94x5PsFqvpWpGAUlrzOznTcCWVzaLZNvcUECSbejm6o89wbrnI95b0zIov28dBCRbCfHz1gSyAzlcl72dxR4PX9xA0loC7HctARUgh2uw+6WLLziChGLvnYC9km5I7G+V7er7vUCiMoxa/VSFcva9XiDRKj6l3qpCObmRB4lS2en1VRGK3cTbzfzjBhK9wlPrsRqUk8fCIFErOc3+qkE5eiwMEs2iU+y1EpSjV+NBolhuun1WgvI4m4BEt+BUe64EZecDJKqlpt1vFSi7J10g0S425d4rQLFf+30LEuUy0+97dii7x8Eg0S809SvIDuUPkKiX2Bz9zwwFJHPU2BRXkRXKX8wkU9RX14s4FKs92en+ubobPc0IBSRdy0v/YFakP/aX4f4d8M6XnQ3K38wknUdY+HDPgRwuAyilgES4qHt2/RwQoDwk8CczSc9S0zzWNSBAKeU3kGgWdq9ee4CsDuUVSHqVm95xaoCsCoVX3PXquluPW4CsCGX3dnlmkm51J3OgW4CsBsU+FOInSGRqu0tHewBZBQq/dNWl5LQO0hPI7FCOPgyCmUSr0Ft7ew8gM0OxD6l7fEsOSFrLTme/ewKZEcoRELtAkOgUe0tPI4DMBOUECEhayk5nn0ggM0A5CwQkOgVf29MRQJShXAQCktrS02g/EogilKtAQKJR9DW9zABECcomEJDUlF/+tpmAZIdir4O4f/OSp1v5i9/Tw4xAskKpAsJM4im//G0yA8kGpRoISPID2OqhApAsUKwfm19HfS5wlltbZZj350pAMkCxWaRpA0lTbMN3UgQyGkrzoIGkObphOyoDkYQCkmG13nTiGYDIQQFJU60O2WkmIFJQQDKk3qtPOiMQGSggqa7X8B1mBiIBBSThNV91whWApIcCkqqaDW28EpDUUEASWvfuk60IJC0UkLjrNqzhykBSQgFJWO27TgSQp5hGfe3DyUCBxFW7IY0AchpzCiggCan/zZMA5HJEw6GAZLN+794AINsRD4UCku0BumcLgPjTtU9UtN9JD99AEh754wkB4s/+6LN5/bv1aQmSPjnWHgUg/sSGArFugsQ/WL1aAsSf5HAgIPEPVq+WAPEnmQIISPwD1qMlQPwppgECEv+g3doSIP4EUwEBiX/gbmkJEH966YCAxD94rS0B4k8uJRCQ+AewpSVA/KmlBQIS/yDWtgSIP7HUQEDiH8ialgDxp5UeCEj8g+ltCRBvUqVIAAGJf0A9LQHiSemhjQwQkPgHdaslQLYSevq5FBCQ+Af2WkuA+HOUAwIS/+BeagkQf4aSQEDiH+BzLQHiz08WCEj8g/yyJUD82UkDAYl/oJ+3BIg/N3kgIPEP9qElQPyZTQEEJP4Bt5YA8ec1DRCQ+AcdIP6spgICEt/AA8SXk7WaDghItgcfINsZHVpMCQQk1wsAIADZJcBHCp0vBIAA5DEBkJwWA0AAcpQASI4LAiAAOUkAJE+RAAQgZxMAyUMsAAHIxQRAAhA/j0lfB9kKYHUkzCBbFfL082lfB9mKYGUkANmqDoAs/ToJQADiTmDFmQQg7vKY871Y/st/aLkaEoD4K2TZe5CXEa2EBCAA8SfwrOUqSADiLw9mkBdZrYAEIADxJ3Cm5exIAOIvD2aQC1nNjAQgAPEncKXlrEgA4i8PZpCNrGZEAhCA+BNwtJwNCUAcg75vwgzizGomJABxDvqsn2riv/y6lrMgMSBf978XUpfAeq2ZQSrHfAYkBuRzKeVN5bWv2BwgDaOujgQg/kEHiD+ro5bKSADiH3SA+LM6aamKBCD+QQeIP6uzLRWRAMQ/6ADxZ3WxpRoSgPgHHSD+rK62VENij3l5irU9+Abk7f71kO3WtJgGCUB8xWxAPpRSvvma02orAZWZBCBbI/nwc4D4cqpqpYAEIL4hBYgvp+pW2ZHY/YchYbueAEDuWCGZkfCGRd/AA8SXU3OrzEjs/Vjvm69sjR0BEjDOWZGwzNoefIBsZ9SlRVYk3KxzD9KlwHscJCMSZhGA9KjtbsfIiIRZ5PLwssTqVvr+A2VDwiwCEH/1BrXMhoQnWucHnjcrBoE4d5psSP4bmEXWUwNk8MhkQmKvidhMwvaUAEASVEMmJNywHxcEQBIAsS5kQsJSixkkCYvjbmRB8k8p5WPKhOI7xQwSn/nVM2ZB8oMPltuNE0CSAcm03GKpBZCEPB66lGEm4akWQNICyYJk9adaLLFSE8kxk6y81AJIciAZZpKVl1q8WVEASAYkq75XCyAiQDIgWXGpBRAhIKORrLjUAogYkNFIVltqAUQQyGgkK73KDhBRICORrLTUAogwkJFIVllqAUQcyEgkKyy1ADIBkJFIZn/0C5BJgIxCMvv9CEAmAjIKycz3IwCZDMgoJLMutfgKtgmBjEAy61LLvnrNvqOQbcIEon/pasal1pf9dxROWB5c0oiZZLZHv/bhFZ8opbkTiJ5JZrofseUV33A7t4/d1UUimeV+xGDYV0DbjTrbAglEIlG/HzEUtrSyexC2hRKIRKJ8P8K9x0IoXl5qJBLF+xHD8S9Lq4WFBN6TKN2P2LLKllQ8tVrbxuPVR80kCvcj4ADF2QSikGT9ALoDDJZUALmYQBSSTDftBxjfeZ0DGZ4EVkFygPGLR7iesqDN8wRmR2Iv/NlSitc2qPvmBGZEYjDsD0+nmsuCHUfMJPe8ceceg5q+awJRM0nv10l4KnXXsuDgI2aS16UUe8LVuhkKW0Id3j/Vehz2I4HqBKJmEutYzZeHGoYDDB7VVg8rO/RMIBKJ9dtmlHellDdnvkj08AQKFD1HmGPdnEA0kps7zAFIIDoBkEQnzvnkEgCJ3JDR4egEQBKdOOeTSwAkckNGh6MTAEl04pxPLgGQyA0ZHY5OACTRiXM+uQRAIjdkdDg6AZBEJ8755BIAidyQ0eHoBEASnTjnk0sAJHJDRoejEwBJdOKcTy4BkMgNGR2OTgAk0YlzPrkEQCI3ZHQ4OgGQRCfO+eQSAInckNHh6ARAEp0455NLACRyQ0aHoxMASXTinE8uAZDIDRkdjk4AJNGJcz65BEAiN2R0ODqB/wFZUuxeABS1qwAAAABJRU5ErkJggg==") no-repeat 0 0;
349
- background-size: 100% 100%;
923
+ z-index: 10;
924
+ }
925
+ .text-frame{
926
+ position: absolute;
927
+ z-index: 10;
928
+ display: inline-block;
929
+ min-width: 100px;
930
+ }
931
+ .text-input{
932
+ width: 100%;
933
+ height: 100%;
934
+ }
935
+ .flip-tool{
936
+ position: absolute;
937
+ top: 0;
938
+ right: 0;
939
+ z-index: 200;
940
+ box-shadow: 0 0 10px rgba(0,0,0,.2);
941
+ border-bottom-left-radius: 10px;
942
+ border-bottom-right-radius: 10px;
943
+ transition: all 0.5s;
944
+ }
945
+ .tool-text{
946
+ width: 50px;
947
+ background-color: #fff;
948
+ text-align: center;
949
+ border-bottom-left-radius: 10px;
950
+ border-bottom-right-radius: 10px;
951
+ line-height: 25px;
952
+ cursor: pointer;
953
+ font-size: 12px;
954
+ color: rgba(198, 76, 16, 1);
955
+ }
956
+ .tool-list{
957
+ width: 50px;
958
+ background-color: #fff;
959
+ border-bottom-left-radius: 10px;
960
+ border-bottom-right-radius: 10px;
961
+ cursor: pointer;
962
+ position: relative;
963
+ text-align: center;
964
+ padding: 18px 0;
965
+ transition: all 0.5s;
350
966
  user-select: none;
351
967
  }
968
+ .tool-item{
969
+ padding: 18px 0;
970
+ position: relative;
971
+ }
972
+ .tool-item-img{
973
+ overflow: hidden;
974
+ }
975
+ .tool-item img {
976
+ width: 30%;
977
+ display: block;
978
+ margin: 0 auto;
979
+ }
980
+ .tool-item:hover img{
981
+ filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
982
+ margin-left: -22px;
983
+ }
984
+ .tool-item-active img {
985
+ filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
986
+ margin-left: -22px;
987
+ }
988
+ .set {
989
+ position: absolute;
990
+ right: 40px;
991
+ width: 280px;
992
+ background-color: #fff;
993
+ border-radius: 10px;
994
+ box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
995
+ padding: 10px;
996
+ z-index: 1;
997
+ }
998
+
999
+ .set-list {
1000
+ padding: 5px 0;
1001
+ font-size: 15px;
1002
+ }
1003
+
1004
+ .set-list:after {
1005
+ content: '';
1006
+ display: block;
1007
+ clear: both;
1008
+ }
1009
+
1010
+ .set-list span {
1011
+ margin-right: 10px;
1012
+ float: left;
1013
+ }
1014
+
1015
+ .set-list em {
1016
+ font-style: normal;
1017
+ font-size: 15px;
1018
+ width: 16px;
1019
+ display: inline-block;
1020
+ margin-right: 10px;
1021
+ text-align: center;
1022
+ }
1023
+
1024
+ .set-list em:hover {
1025
+ color: rgba(198, 76, 16, 1);
1026
+ }
1027
+
1028
+ .set-list i {
1029
+ display: inline-block;
1030
+ width: 16px;
1031
+ height: 16px;
1032
+ background-color: #000;
1033
+ margin: 2px 10px 0 0;
1034
+ float: left;
1035
+ box-sizing: border-box;
1036
+ }
1037
+
1038
+ .set-list input {
1039
+ width: calc(100% - 60px);
1040
+ height: 22px;
1041
+ border: 1px solid #ccc;
1042
+ border-radius: 5px;
1043
+ padding: 0 10px;
1044
+ box-sizing: border-box;
1045
+ float: left;
1046
+ }
1047
+ .but {
1048
+ margin-left: 5px;
1049
+ font-size: 12px;
1050
+ background-color: transparent;
1051
+ border: 1px solid #000;
1052
+ border-radius: 3px;
1053
+ padding: 2px 5px;
1054
+ cursor: pointer;
1055
+ min-width: 60px;
1056
+ height: 21px;
1057
+ margin-right: 20px;
1058
+ }
352
1059
  /*动画部分*/
353
1060
  /*I'm the home page动画*/
354
1061
  .flip-animation-start {
@@ -399,7 +1106,7 @@ export default {
399
1106
  left: 50%;
400
1107
  right: 0;
401
1108
  bottom: 0;
402
- z-index: 1;
1109
+ z-index: 2;
403
1110
  }
404
1111
 
405
1112
  .wrap-one img {
@@ -436,7 +1143,7 @@ export default {
436
1143
  top: 0;
437
1144
  bottom: 0;
438
1145
  left: 0;
439
- z-index: 1;
1146
+ z-index: 50;
440
1147
  width: 8%;
441
1148
  }
442
1149
 
@@ -445,7 +1152,7 @@ export default {
445
1152
  top: 0;
446
1153
  bottom: 0;
447
1154
  right: 0;
448
- z-index: 1;
1155
+ z-index: 50;
449
1156
  width: 8%;
450
1157
  }
451
1158
 
@@ -244,3 +244,8 @@ input[name='check'] {
244
244
  .padd{
245
245
  padding-bottom: 24px;
246
246
  }
247
+ .buts-disabled{
248
+ color: #797979 !important;
249
+ cursor: not-allowed;
250
+ border: 1px solid #797979 !important;
251
+ }
@@ -6,11 +6,11 @@
6
6
  <div class="subject-title" :class="{'padd': item.top !== 0}" v-if="item.subject">
7
7
  <input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
8
8
  name="check"/>
9
- <span>{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
9
+ <span :style="{'font-weight': titleCrude?700:'normal'}">{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
10
10
  v-html="item.title"></em><em v-if="scoreShow">({{ item.score }}分)</em>
11
11
  <i class="subject-but" ref="subject">
12
12
  <b :style="{right: -item.right + 'px', top: item.top + 'px'}" ref="b">
13
- <button class="but" v-for="(it) in item.customBut" :class="{'buts-actives': it.active}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
13
+ <button class="but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
14
14
  </b>
15
15
  </i>
16
16
  </span>
@@ -20,7 +20,7 @@
20
20
  <div v-for="(it,ind) in item.alist">
21
21
  <div v-if="it.annexType === '0'">
22
22
  <div class="subject-html-title">{{ titleText }}{{ ind + 1 }}</div>
23
- <div class="subject-html-cont" v-html="annexHtml(it.annexContent)"></div>
23
+ <div class="subject-html-cont" v-html="it.annexContent"></div>
24
24
  </div>
25
25
  </div>
26
26
  </div>
@@ -86,6 +86,10 @@ export default {
86
86
  type: Boolean,
87
87
  default: false
88
88
  },
89
+ titleCrude: {
90
+ type: Boolean,
91
+ default: false
92
+ },
89
93
  },
90
94
  watch: {
91
95
  data: {
@@ -122,10 +126,22 @@ export default {
122
126
  customButTap(e,d) {
123
127
  if(e.key === 'option') d.open = !d.open
124
128
  if(e.butStart) e.active = !e.active
129
+ if(e.active) {
130
+ if(e.key === 'disabled') {
131
+ this.disabledFun(true)
132
+ e.disabled = false
133
+ }
134
+ }else {
135
+ this.disabledFun(false)
136
+ }
125
137
  this.$emit('butChange',e,d)
126
138
  },
127
- annexHtml(x) {
128
- return json2html({node: "root", child: typeof x === 'string' ? JSON.parse(x) : x})
139
+ disabledFun(e) {
140
+ this.value.forEach(x => {
141
+ x.customBut.forEach(y => {
142
+ if(y.key === 'disabled') y.disabled = e
143
+ })
144
+ })
129
145
  },
130
146
  init() {
131
147
  const val = JSON.parse(JSON.stringify(this.data))
@@ -136,6 +152,12 @@ export default {
136
152
  item.open = item.open !== undefined ? item.open : true
137
153
  item.error = item.error !== undefined ? item.error : false
138
154
  item.subject = item.subject !== undefined ? item.subject : true
155
+ if (item.alist) {
156
+ item.alist.map(x => {
157
+ x.annexContent = json2html({node: "root", child: typeof x.annexContent === 'string' ? JSON.parse(x.annexContent) : x.annexContent})
158
+ return x
159
+ })
160
+ }
139
161
  if (item.testKey) {
140
162
  item.testKey = typeof item.testKey === 'string' ? JSON.parse(item.testKey) : item.testKey
141
163
  let judge = item?.judgeAnswer
@@ -20,7 +20,7 @@
20
20
  <div class="subject-title" v-if="item.subject">
21
21
  <input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
22
22
  name="check"/>
23
- <span>{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
23
+ <span :style="{'font-weight': titleCrude?700:'normal'}">{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
24
24
  v-html="item.title"></em><em v-if="scoreShow">({{ item.score }}分)</em>
25
25
  <i class="subject-but" ref="subject">
26
26
  <b :style="{right: -item.right + 'px', top: item.top + 'px'}" v-if="butShow" ref="b">
@@ -228,7 +228,11 @@ export default {
228
228
  customBut:{
229
229
  type: Array,
230
230
  default: []
231
- }
231
+ },
232
+ titleCrude: {
233
+ type: Boolean,
234
+ default: false
235
+ },
232
236
  },
233
237
  watch: {
234
238
  data: {
@@ -297,7 +301,7 @@ export default {
297
301
  item.error = item.error !== undefined ? item.error : false
298
302
  if (item.alist) {
299
303
  item.alist.map(x => {
300
- x.annexContent = json2html({node: "root", child: JSON.parse(x.annexContent)})
304
+ x.annexContent = json2html({node: "root", child: typeof x.annexContent === 'string' ? JSON.parse(x.annexContent) : x.annexContent})
301
305
  return x
302
306
  })
303
307
  }
package/src/index.js CHANGED
@@ -81,7 +81,7 @@ function install(app) {
81
81
  }
82
82
 
83
83
  export default {
84
- version: '1.32.291',
84
+ version: '1.32.293',
85
85
  install,
86
86
  Calendar,
87
87
  Message,