9月8日杨青

src/xt_pages/user/Sitemap.vue

@@ -18,8 +18,8 @@
         </div>
       </div>
       <div style="margin-top:6px;display:flex;flex-wrap: wrap;position:relative;min-height:480px;">
-        <div style="width:47%;border:1px solid #ddd;padding: 5px;" id="print_mark_img" ref="imageWrapper">
-          <div id="point_mark_img_wrap1" class="print_main_content" style="width: 100%;padding: 0;border: 0;" >
+        <div style="width:47%;border:1px solid #ddd;padding: 5px;" id="print_mark_img" >
+          <div id="point_mark_img_wrap1" class="print_main_content" style="width: 100%;padding: 0;border: 0;" ref="imageWrapper">
 
             <img v-if="fileList.length==0" id="ossPointMarkImg" src="@/assets/evaluate/xgtl_default.png" alt="" srcset="">
             <img v-if="fileList.length>0" id="ossPointMarkImg" :src="fileList[0].img_url" alt="" srcset="">
@@ -65,9 +65,11 @@
               > 
                 <!-- <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+'%' -->
                   <!-- {{ item }} @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
-                  <!-- <el-input v-model="item.text" size="mini" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default'}"></el-input> -->
-                  <input id="inpu" type="text" v-bind:value="item.text" data-width="82" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default',outline: 'none'}" class="mark-text-ipt">
-                <!-- </div> -->
+                  <!-- <el-input v-model:value="item.text" size="mini" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default'}"></el-input> -->
+                  <!-- <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"> -->
+                  <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">
+                  <!-- <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"> -->
+                  <!-- </div> -->
                 <span class="remove-mark-text" @click="input_deldte($event,item)">×</span>
                  <span class="mark-text-line" style="transform: rotate(45deg);" data-rotate="45"></span>
               </div>
@@ -239,6 +241,18 @@
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span> -->
     </el-dialog>
+    <!-- 打印 -->
+    <el-dialog
+      title="打印"
+      :visible.sync="dayinDialogVisible"
+      width="30%"
+      center>
+      <span></span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dayinDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dayinDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -246,6 +260,7 @@ import print from "print-js";
 import { getFileExtension} from '@/utils/tools'
 import { saveSitemap,getPatientSitemap,updateSiteMap } from "@/api/patient";
 import { getToken } from '@/api/qiniu'
+// import html2canvas from "html2canvas"
 export default{
   components:{
     // quillEditor
@@ -337,6 +352,7 @@ export default{
       id:0,
       texts:null,
       value:'',
+      imgUrls:'',
     }
   },
   created(){
@@ -346,7 +362,7 @@ export default{
     // this.getPatientSitemap(this.patientID)
   },
   mounted(){
-    console.log('asdfdfgfd',this.fangxiangA);
+    console.log('asdfdfgfd',this.value);
   },
   methods:{
     add(){
@@ -517,7 +533,7 @@ export default{
     mousedown(e){
       const tet=document.getElementsByClassName('text')
       var textlen=this.text_arr
-      console.log('ZXCBVCB',textlen,e.target.value);
+      console.log('ZXCBVCB',textlen,'33333',this.value);
       const even= e.target.value
       // console.log('zxcvbnvxcz',even);
       for(let i=0;i<tet.length;i++){
@@ -551,7 +567,6 @@ export default{
         }
       }
     },
-
     fuzhuA_down(e){
       const fuzhuA= document.getElementById('jinzhen-jiaodu-target-A')
       const fuzhua_x =e.clientX - fuzhuA.offsetLeft
@@ -604,7 +619,7 @@ export default{
       }
     },
     punctureclick(e,val){
-      console.log('event',e,'value',val);
+      console.log('event',e,'value',this.value);
       const text=e.target
       const textlen=this.text_arr.length
 
@@ -724,18 +739,23 @@ export default{
       }
     },
     printtup(){
-      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;} .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;}}}'
-      // 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;}
-      // 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;}
-      // .mark-target-a{background: #E73535;top: 40px;left: 40px;} .mark-line{background: #E73535;}}}'
-      // 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;}}}}'
-
-      printJS({
-        printable: "print_mark_img",
-        type: "html",
-        style: style,
-        scanStyles: false
+      html2canvas(this.$refs.imageWrapper,{backgroundColor: null}).then(canvas => {
+        // 转成图片，生成图片地址
+        this.imgUrls = canvas.toDataURL("image/png");
+        console.log('123424534',this.imgUrls)
       });
+      // 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;} .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;}}}'
+      // // 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;}
+      // // 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;}
+      // // .mark-target-a{background: #E73535;top: 40px;left: 40px;} .mark-line{background: #E73535;}}}'
+      // // 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;}}}}'
+
+      // printJS({
+      //   printable: "print_mark_img",
+      //   type: "html",
+      //   style: style,
+      //   scanStyles: false
+      // });
       
     },
     imgv_click(){
@@ -1423,34 +1443,34 @@ div.add-mark-text-wrap {
   line-height: 24px;
   z-index: 1005;
   display: inline-block;
-  .el-input {
-    /* position: relative; */
-    font-size: 14px;
-    display: inline-block;
-    width: 100%;
-  }
+  // .el-input {
+  //   /* position: relative; */
+  //   font-size: 14px;
+  //   display: inline-block;
+  //   width: 100%;
+  // }
+  .input{
+  width: 224px;
+  height: 40px;
+  line-height: 40px;
+  background: #F3F6FB;
+  border-radius: 4px;
+  padding:0  12px;
+  margin-right: 20px;
+}
+.input ::v-deep .el-input__inner {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  background: #F3F6FB;
+}
+
 }
 div.add-mark-text-wrap input.mark-text-ipt {
     cursor: default;
 }
-// div.add-mark-text-wrap 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;
-// }
+
 input, button, textarea, select, optgroup, option {
     font-family: inherit;
     font-size: inherit;

src/xt_pages/user/vascularAccess.vue

@@ -459,7 +459,7 @@
         <el-button type="primary" @click="updatedVasularAccess('form')">保存</el-button>
      </span>
      </el-dialog>
-     <!-- <sitemap> </sitemap> -->
+     <sitemap> </sitemap>
     </div>
 
      <multi-select-box