|
@@ -18,16 +18,9 @@
|
18
|
18
|
</div>
|
19
|
19
|
</div>
|
20
|
20
|
<div style="margin-top:6px;display:flex;flex-wrap: wrap;position:relative;min-height:480px;">
|
21
|
|
- <div style="width:530px;border:1px solid #ddd;padding: 5px;" id="print_mark_img" ref="imageWrapper">
|
|
21
|
+ <div style="width:47%;border:1px solid #ddd;padding: 5px;" id="print_mark_img" ref="imageWrapper">
|
22
|
22
|
<div id="point_mark_img_wrap1" class="print_main_content" style="width: 520px;padding: 0;border: 0;" >
|
23
|
|
- <!-- <template>
|
24
|
|
- <div>
|
25
|
|
- <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
|
26
|
|
-
|
27
|
|
- </quill-editor>
|
28
|
|
- </div>
|
29
|
|
- </template> -->
|
30
|
|
- <!-- 背景大图 v-if="fileList.length==0"-->
|
|
23
|
+
|
31
|
24
|
<img v-if="fileList.length==0" id="ossPointMarkImg" src="@/assets/evaluate/xgtl_default.png" alt="" srcset="">
|
32
|
25
|
<img v-if="fileList.length>0" id="ossPointMarkImg" :src="fileList[0].img_url" alt="" srcset="">
|
33
|
26
|
|
|
@@ -48,9 +41,10 @@
|
48
|
41
|
</div>
|
49
|
42
|
<!-- 穿刺文字 active @mousedown="startDrag" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"-->
|
50
|
43
|
<div v-for="(item,index) in text_arr" :key="index" >
|
51
|
|
- <div ref="text_cc" class="add-mark-text-wrap active" :style="{width:(item.width + 10)+'px',left:text_left+'%',top:(text_top+(index*4))+'%','font-size':14+'px'}"
|
|
44
|
+ <div ref="text_cc" class="add-mark-text-wrap active"
|
|
45
|
+ :style="{width:(item.width + 10)+'px',left:text_left+'%',top:(text_top+(index*4))+'%','font-size':14+'px', position: 'absolute'}"
|
52
|
46
|
@mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
|
53
|
|
- <!-- <div style="width:82px;left:62.17%;top:39.00%;display: inline-block;" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"> -->
|
|
47
|
+ <!-- <div style="width:82px;left:62.17%;top:39.00%;display: inline-block;" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">position: 'absolute',top: 36+'%',left: 48+'%' -->
|
54
|
48
|
<!-- {{ item }} -->
|
55
|
49
|
<el-input v-text:value="item.text" size="mini" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default'}"></el-input>
|
56
|
50
|
<!-- <input id="inpu" type="text" :value="item" data-width="82" style="width: 82px; border: 1px solid transparent; cursor: default;" class="mark-text-ipt"> -->
|
|
@@ -62,7 +56,7 @@
|
62
|
56
|
<!-- 穿刺方向 -->
|
63
|
57
|
<div v-if="fangxiangA_num==2" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"
|
64
|
58
|
title="长按右键调整线条角度" id="jinzhen_fangxiang_A" class="mark-target mark-target-a mark-target-adccz"
|
65
|
|
- :style="{left: fangxiangA_left+'px', top: fangxiangA_top+'px', width: 14+'px', height: 14+'px', background: rgb(231, 53, 53), 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
|
|
59
|
+ :style="{left: fangxiangA_left+'px', top: fangxiangA_top+'px', width: 14+'px', height: 14+'px', background: 'rgb(231, 53, 53)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
|
66
|
60
|
<span class="mark-line mark-line-ccza" data-rotate="160" style="width:50px;transform:rotate(160deg);">
|
67
|
61
|
<b class="xtgl-ccz-arrow xtgl-ccz-arrow-a"
|
68
|
62
|
style="position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);">
|
|
@@ -70,27 +64,27 @@
|
70
|
64
|
|
71
|
65
|
<div v-if="fangxiangV_num==2" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"
|
72
|
66
|
title="长按右键调整线条角度" id="jinzhen_fangxiang_V" class="mark-target mark-target-v mark-target-vdccz"
|
73
|
|
- :style="{left: fangxiangV_left+'px', top: fangxiangV_top+'px', width: 14+'px', height: 14+'px', background: rgb(231, 53, 53), 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
|
|
67
|
+ :style="{left: fangxiangV_left+'px', top: fangxiangV_top+'px', width: 14+'px', height: 14+'px', background: 'rgb(53, 162, 231)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
|
74
|
68
|
<span class="mark-line mark-line-cczv" data-rotate="20" style="width:50px;transform:rotate(20deg);">
|
75
|
69
|
<b class="xtgl-ccz-arrow xtgl-ccz-arrow-v"
|
76
|
70
|
style="position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);">
|
77
|
71
|
</b></span></div>
|
78
|
72
|
<!-- 辅助工具 :style="{transform: rotate(30deg)}" ,'background-img': 'url(' + require('../../assets/evaluate/tool-a.png') + ')' -->
|
79
|
73
|
<div v-if="fuzhuA_num==2"
|
80
|
|
- class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A">
|
|
74
|
+ class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A" style="position: absolute;top: 56px;left: 360px;">
|
81
|
75
|
<div class="frame-box actives" :style="{'transform': `scale(${scalea_num})`,top:fuzhuA_top+'px',left:fuzhuA_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
|
82
|
76
|
<div class="frame-image" data-rotate="0" :style="{transform: `rotate(${xuanzhuan_a}deg)`}">
|
83
|
|
- <!-- <img src="../../assets/evaluate/tool-a.png" alt="" srcset="" > -->
|
|
77
|
+ <img src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 6px;">
|
84
|
78
|
</div>
|
85
|
79
|
<div class="drag-elem bottom right" @click="imga_click"></div>
|
86
|
80
|
<div class="frame-image-toolbar-btn frame-image-toolbar-btn-reset" data-tooltip="" title="调整方向" @click="fuzhuaclick"></div>
|
87
|
81
|
</div>
|
88
|
82
|
</div>
|
89
|
|
- <div v-if="fuzhuV_num==2"
|
|
83
|
+ <div v-if="fuzhuV_num==2" style="position: absolute;top: 56px;left: 56px;"
|
90
|
84
|
class="jinzhen-jiaodu-target jinzhen-jiaodu-target-V" id="jinzhen-jiaodu-target-V">
|
91
|
85
|
<div class="frame-box actives" :style="{'transform': `scale(${scalev_num})`,top:fuzhuV_top+'px',left:fuzhuV_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
|
92
|
86
|
<div id="v_img" class="frame-image" data-rotate="0" :style="{'transform': `rotate(${xuanzhuan_v}deg)`}">
|
93
|
|
- <!-- <img id="image" src="../../assets/evaluate/tool-a.png" alt="" srcset="" > -->
|
|
87
|
+ <img id="image" src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 6px;">
|
94
|
88
|
</div>
|
95
|
89
|
<div class="drag-elem bottom right" @click="imgv_click"></div>
|
96
|
90
|
<div class="frame-image-toolbar-btn frame-image-toolbar-btn-reset" data-tooltip="" title="调整方向" @click="fuzhu_click"></div>
|
|
@@ -98,8 +92,8 @@
|
98
|
92
|
</div>
|
99
|
93
|
</div>
|
100
|
94
|
</div>
|
101
|
|
- <div style="width:50px;"></div>
|
102
|
|
- <div style="width:570px;">
|
|
95
|
+ <div style="width:25px;"></div>
|
|
96
|
+ <div style="width:49%;">
|
103
|
97
|
<div>
|
104
|
98
|
<p class="point-mark-title">A端:</p>
|
105
|
99
|
<div :class="append == false ? 'point-mark-items' : 'mark-a-items'"> <!-- v-for="(item,index) in 12" :key="index" -->
|
|
@@ -241,14 +235,6 @@
|
241
|
235
|
import print from "print-js";
|
242
|
236
|
import { getFileExtension} from '@/utils/tools'
|
243
|
237
|
import { getToken } from '@/api/qiniu'
|
244
|
|
-// import html2canvas from "html2canvas"
|
245
|
|
-// import Quill from 'quill';
|
246
|
|
-// import {quillEditor, Quill} from 'vue-quill-editor'
|
247
|
|
-// import { container, ImageExtend } from "quill-image-extend-module";
|
248
|
|
-// Quill.register("modules/ImageExtend", ImageExtend);
|
249
|
|
-// import 'quill/dist/quill.core.css'
|
250
|
|
-// import 'quill/dist/quill.snow.css'
|
251
|
|
-// import 'quill/dist/quill.bubble.css'
|
252
|
238
|
export default{
|
253
|
239
|
components:{
|
254
|
240
|
// quillEditor
|
|
@@ -259,6 +245,7 @@ export default{
|
259
|
245
|
centerDialogVisible: false,
|
260
|
246
|
imgDialogVisible:false,
|
261
|
247
|
shiyituDialogVisible:false,
|
|
248
|
+ hidd:false,
|
262
|
249
|
imgUrl:[],
|
263
|
250
|
a_num:1,//控制a端是否显示和高亮
|
264
|
251
|
v_num:1,//控制v端是否显示和高亮
|
|
@@ -479,7 +466,10 @@ export default{
|
479
|
466
|
}
|
480
|
467
|
},
|
481
|
468
|
printtup(){
|
482
|
|
- const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;} .mark-target-a{background: #E73535;top: 40px; left: 40px;} .mark-line{background: #E73535;} .mark-target-v{background: rgb(53,162,231);.mark-line{background: #35A2E7;}} .mark-target-a,.mark-target-v {position: absolute;z-index: 1001;width: 26px;border-radius: 13px;height: 26px;text-align: center;line-height: 26px;font-size: 18px;cursor: move;color: rgb(255,255,255);.mark-line {transform: rotate(160deg);transform-origin: left bottom;}.mark-line {display: inline-block;position: absolute;left: 50%;top: 50%;width: 86px;height: 1px;cursor: default;z-index: -1;} div.add-mark-text-wrap {position: absolute;top: 36%;left: 48%;border-radius: 4px;width: 60px;height: 24px;line-height: 24px;z-index: 1005;display: inline-block;} .remove-mark-text{overflow: hidden;} b.xtgl-ccz-arrow-a {border-left-color: #E73535;border-top-color: #E73535;} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;} b.xtgl-ccz-arrow {position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;}div.frame-image {position: absolute;overflow: hidden;top: 0px;left: 0px;width: 100%;height: 100%;background-image: url('+'../../assets/evaluate/tool-a.png'+');background-position: center center;background-size: 100%; background-repeat: no-repeat;}}}'
|
|
469
|
+ if(this.hidd==false){
|
|
470
|
+ this.hidd =true
|
|
471
|
+ }
|
|
472
|
+ const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;} .mark-target-a{background: #E73535;top: 40px; left: 40px;} .mark-line{background: #E73535;} .mark-target-v{background: rgb(53,162,231);.mark-line{background: #35A2E7;}} .mark-target-a,.mark-target-v {position: absolute;z-index: 1001;width: 26px;border-radius: 13px;height: 26px;text-align: center;line-height: 26px;font-size: 18px;cursor: move;color: rgb(255,255,255);.mark-line {transform: rotate(160deg);transform-origin: left bottom;}.mark-line {display: inline-block;position: absolute;left: 50%;top: 50%;width: 86px;height: 1px;cursor: default;z-index: -1;} div.add-mark-text-wrap {border-radius: 4px;width: 60px;height: 24px;line-height: 24px;z-index: 1005;display: inline-block;} .remove-mark-text{color: transparent;opacity: 0;} b.xtgl-ccz-arrow-a {border-left-color: #E73535;border-top-color: #E73535;} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;} b.xtgl-ccz-arrow {position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;}div.frame-image {position: absolute;overflow: hidden;top: 0px;left: 0px;width: 100%;height: 100%;background-image: url('+'../../assets/evaluate/tool-a.png'+')!important;background-position: center center;background-size: 100%; background-repeat: no-repeat;}}}'
|
483
|
473
|
// const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;} b.xtgl-ccz-arrow-a {border-left-color: #E73535;border-top-color: #E73535;}
|
484
|
474
|
// b.xtgl-ccz-arrow {position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;}
|
485
|
475
|
// .mark-target-a{background: #E73535;top: 40px;left: 40px;} .mark-line{background: #E73535;}}}'
|
|
@@ -844,7 +834,7 @@ export default{
|
844
|
834
|
left: 5px;
|
845
|
835
|
width: 90%;
|
846
|
836
|
height: 90%;
|
847
|
|
- background-image: url('../../assets/evaluate/tool-a.png');
|
|
837
|
+ // background-image: url('../../assets/evaluate/tool-a.png');
|
848
|
838
|
background-position: center center;
|
849
|
839
|
background-size: 100%;
|
850
|
840
|
background-repeat: no-repeat;
|
|
@@ -926,9 +916,9 @@ div.add-mark-text-wrap.active {
|
926
|
916
|
box-shadow: 2px 3px 8px rgba(0,0,0,.2), -3px -2px 8px rgba(0,0,0,.2);
|
927
|
917
|
}
|
928
|
918
|
div.add-mark-text-wrap {
|
929
|
|
- position: absolute;
|
930
|
|
- top: 36%;
|
931
|
|
- left: 48%;
|
|
919
|
+ // position: absolute;
|
|
920
|
+ // top: 36%;
|
|
921
|
+ // left: 48%;
|
932
|
922
|
border-radius: 4px;
|
933
|
923
|
width: 60px;
|
934
|
924
|
height: 25px;
|