|
@@ -59,15 +59,19 @@
|
59
|
59
|
|
60
|
60
|
<!-- 穿刺文字 @mousedown="mousedown($event)" active @mousedown="startDrag" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)" left:text_left+'px',top:text_top+'px',-->
|
61
|
61
|
<!-- <div
|
62
|
|
- > -->
|
|
62
|
+ > width:(item.width + 10)+'px',-->
|
63
|
63
|
<div v-for="(item,index) in text_arr" :key="index" class="add-mark-text-wrap active text" id="text" @mousedown="mousedown($event)"
|
64
|
|
- :style="{width:(item.width + 10)+'px',left:item.left+'px',top:item.top+'px','font-size':14+'px', position: 'absolute'}"
|
|
64
|
+ :style="{width: 'fit-content',left:item.left+'px',top:item.top+'px','font-size':14+'px', position: 'absolute'}"
|
65
|
65
|
>
|
66
|
|
- <!-- <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+'%' -->
|
67
|
|
- <!-- {{ item }} @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
|
|
66
|
+ <!-- <el-input v-model="item.text" class="inputStyle">
|
|
67
|
+ <template slot="prefix">
|
|
68
|
+ {{ item.text }}
|
|
69
|
+ </template>
|
|
70
|
+ </el-input> -->
|
|
71
|
+
|
68
|
72
|
<!-- <el-input v-model:value="item.text" size="mini" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default'}"></el-input> -->
|
69
|
73
|
<!-- <input id="inpu" type="text" :value="item.text" data-width="82" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default',outline: 'none'}" class="mark-text-ipt"> -->
|
70
|
|
- <input id="inpu" type="text" v-model="item.text" data-width="82" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default',outline: 'none'}" class="mark-text-ipt">
|
|
74
|
+ <input id="inpu" type="text" @input="changewidth" v-model="item.text" data-width="82" :style="{width:'fit-content', border: 1+'px solid transparent', cursor: 'default',outline: 'none'}" class="mark-text-ipt">
|
71
|
75
|
<!-- <input v-if="value!=''" id="inpu" type="text" v-model="value" data-width="82" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default',outline: 'none'}" class="mark-text-ipt"> -->
|
72
|
76
|
<!-- </div> -->
|
73
|
77
|
<span class="remove-mark-text" @click="input_deldte($event,item)">×</span>
|
|
@@ -248,6 +252,9 @@
|
248
|
252
|
width="50%"
|
249
|
253
|
center>
|
250
|
254
|
<div>
|
|
255
|
+ <div @click="dayin">
|
|
256
|
+ <el-button type="primary" @click="dayin">打印</el-button>
|
|
257
|
+ </div>
|
251
|
258
|
<div id="print_img">
|
252
|
259
|
<div class="parint_content">
|
253
|
260
|
<!-- <div> -->
|
|
@@ -261,31 +268,16 @@
|
261
|
268
|
|
262
|
269
|
<div style="width: 530px;margin: 20px auto;">
|
263
|
270
|
<img :src="imgUrls" alt="" srcset="">
|
264
|
|
- <!-- <img v-if="fileList.length==0" id="ossPointMarkImg" src="@/assets/evaluate/xgtl_default.png" alt="" srcset="">
|
265
|
|
- <div v-for="(item,indexa) in Aarr" :key="indexa">
|
266
|
|
- <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-a mark-target-a1" data-num="1" id="mark-target-a"
|
267
|
|
- :style="{left:item.left+'px', top:item.top+'px', cursor: 'move',position: 'absolute'}"
|
268
|
|
- @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">{{item.markNum}}
|
269
|
|
- <span class="mark-line mark-line-a" style="transform: rotate(160deg);" data-rotate="160"></span>
|
270
|
|
- </div>
|
271
|
|
- </div>
|
272
|
|
-
|
273
|
|
- <div v-for="(item,indexv) in Varr" :key="indexv">
|
274
|
|
- <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-v mark-target-v1" data-num="1" id="mark-target-v"
|
275
|
|
- :style="{left: item.left+'px', top: item.top+'px', cursor: 'move', position: 'absolute'}"
|
276
|
|
- @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">{{item.markNum}}
|
277
|
|
- <span class="mark-line mark-line-v" style="transform: rotate(20deg);" data-rotate="20"></span>
|
278
|
|
- </div>
|
279
|
|
- </div> -->
|
|
271
|
+
|
280
|
272
|
</div>
|
281
|
273
|
<!-- </div> -->
|
282
|
274
|
</div>
|
283
|
275
|
</div>
|
284
|
276
|
</div>
|
285
|
|
- <span slot="footer" class="dialog-footer">
|
|
277
|
+ <!-- <span slot="footer" class="dialog-footer">
|
286
|
278
|
<el-button @click="dayinDialogVisible = false">取 消</el-button>
|
287
|
279
|
<el-button type="primary" @click="dayin">确 定</el-button>
|
288
|
|
- </span>
|
|
280
|
+ </span> -->
|
289
|
281
|
</el-dialog>
|
290
|
282
|
</div>
|
291
|
283
|
</template>
|
|
@@ -382,6 +374,7 @@ export default{
|
382
|
374
|
imgUrls:'',
|
383
|
375
|
patients:{},
|
384
|
376
|
date:moment(new Date()).format("YYYY-MM-DD"),
|
|
377
|
+ widthtext:null,
|
385
|
378
|
}
|
386
|
379
|
},
|
387
|
380
|
created(){
|
|
@@ -653,7 +646,6 @@ export default{
|
653
|
646
|
console.log('event',e,'value',this.value);
|
654
|
647
|
const text=e.target
|
655
|
648
|
const textlen=this.text_arr.length
|
656
|
|
-
|
657
|
649
|
if(text.innerText == val.text){
|
658
|
650
|
this.text_num=2
|
659
|
651
|
const obj={text:'',left:'',top:'',width:''}
|
|
@@ -662,6 +654,7 @@ export default{
|
662
|
654
|
obj.left=this.text_left
|
663
|
655
|
obj.top=this.text_top+(textlen*30)
|
664
|
656
|
obj.width=e.target.offsetWidth
|
|
657
|
+ // obj.width= this.widthtext
|
665
|
658
|
this.text_arr.push(obj)
|
666
|
659
|
}
|
667
|
660
|
|
|
@@ -770,30 +763,17 @@ export default{
|
770
|
763
|
}
|
771
|
764
|
},
|
772
|
765
|
printtup(){
|
773
|
|
- if(this.id==0){
|
774
|
|
- this.$message('请先保存');
|
775
|
|
- }else{
|
|
766
|
+ // if(this.id==0){
|
|
767
|
+ // this.$message('请先保存');
|
|
768
|
+ // }else{
|
776
|
769
|
this.dayinDialogVisible = true
|
777
|
|
- }
|
|
770
|
+ // }
|
778
|
771
|
html2canvas(this.$refs.imageWrapper,{backgroundColor: null}).then(canvas => {
|
779
|
772
|
// 转成图片,生成图片地址
|
780
|
773
|
this.imgUrls = canvas.toDataURL("image/png");
|
781
|
774
|
// console.log('123424534',this.imgUrls)
|
782
|
775
|
});
|
783
|
|
- // const style='@media print{.print_main_content{#ossPointMarkImg {width: 520px;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;}
|
784
|
|
-
|
785
|
|
- // 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;}}}'
|
786
|
|
- // // // 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;}
|
787
|
|
- // // 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;}
|
788
|
|
- // // .mark-target-a{background: #E73535;top: 40px;left: 40px;} .mark-line{background: #E73535;}}}'
|
789
|
|
- // // 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;} input {width: 100px;width: 60px;max-width: 400px;border: 1px solid transparent;padding: 4px;color: #333;height: 24px;cursor: pointer;background-color: #fcfcfc;position: absolute;left: 0;top: 0;font-size: 13px;z-index: 1002;border-radius: 2px !important;outline: none;}.mark-text-ipt {cursor: default;}}}}'
|
790
|
|
-
|
791
|
|
- // printJS({
|
792
|
|
- // printable: "print_mark_img",
|
793
|
|
- // type: "html",
|
794
|
|
- // style: style,
|
795
|
|
- // scanStyles: false
|
796
|
|
- // });
|
|
776
|
+
|
797
|
777
|
|
798
|
778
|
},
|
799
|
779
|
// 打印
|
|
@@ -1256,6 +1236,12 @@ export default{
|
1256
|
1236
|
u8arr[n] = bstr.charCodeAt(n);
|
1257
|
1237
|
}
|
1258
|
1238
|
return new Blob([u8arr], { type: mime });
|
|
1239
|
+ },
|
|
1240
|
+ changewidth(){
|
|
1241
|
+ // let input = document.getElementById("inpu");
|
|
1242
|
+ // const l = input.value.length;
|
|
1243
|
+ // this.widthtext=(l+1) * 15 + "px"
|
|
1244
|
+ // input.style.width = (l+1) * 15 + "px";
|
1259
|
1245
|
}
|
1260
|
1246
|
},
|
1261
|
1247
|
created(){
|
|
@@ -1649,6 +1635,32 @@ span.chuanci:hover{
|
1649
|
1635
|
opacity: 0;
|
1650
|
1636
|
z-index: -1;
|
1651
|
1637
|
}
|
|
1638
|
+// .inputStyle {
|
|
1639
|
+// margin-top: 30px;
|
|
1640
|
+// text-align: start; // 这里一样要设置,否则不是对齐的居中状态
|
|
1641
|
+// min-width: 160px; //这里给一个最小宽度
|
|
1642
|
+// }
|
|
1643
|
+// .el-input {
|
|
1644
|
+// width: auto; // 这里一定要设置为auto 否则由于input是默认width :100%的
|
|
1645
|
+// }
|
|
1646
|
+// .inputStyle >>> .el-input__prefix {
|
|
1647
|
+// display: inline-block;
|
|
1648
|
+// position: relative;
|
|
1649
|
+// border: 1px solid #dcdfe6;
|
|
1650
|
+// box-sizing: border-box;
|
|
1651
|
+// color: #606266;
|
|
1652
|
+// font-size: inherit;
|
|
1653
|
+// height: 40px;
|
|
1654
|
+// line-height: 40px;
|
|
1655
|
+// padding: 0 30px;
|
|
1656
|
+// transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
1657
|
+// padding-left: 30px;
|
|
1658
|
+// left: 0;
|
|
1659
|
+// visibility: hidden;
|
|
1660
|
+// }
|
|
1661
|
+// .inputStyle >>> .el-input__inner {
|
|
1662
|
+// position: absolute;
|
|
1663
|
+// }
|
1652
|
1664
|
</style>
|
1653
|
1665
|
<style lang="scss">
|
1654
|
1666
|
.ql-snow .ql-tooltip[data-mode="link"]::before {
|