9月11日杨青

src/xt_pages/user/Sitemap.vue

@@ -245,12 +245,46 @@
     <el-dialog
       title="打印"
       :visible.sync="dayinDialogVisible"
-      width="30%"
+      width="50%"
       center>
-      <span></span>
+      <div>
+        <div id="print_img">
+          <div class="parint_content">
+            <!-- <div> -->
+              <div style="text-align: center;font-size:17;margin-bottom: 10px;">血液透析位点图</div>
+              <div style="display: flex;border-bottom: 1px solid black;padding: 5px;">
+                <div style="width: 200px;">患者姓名：{{ patients.name }}</div>
+                <div style="width: 200px;">透析号：{{ patients.dialysis_no }}</div>
+                <div style="width: 200px;">住院(门诊)号：{{ patients.admission_number }}</div>
+                <div style="width: 200px;">打印时间：{{date}}</div>
+              </div>
+              
+              <div style="width: 530px;margin: 20px auto;">
+                <img :src="imgUrls" alt="" srcset="">
+                <!-- <img v-if="fileList.length==0" id="ossPointMarkImg" src="@/assets/evaluate/xgtl_default.png" alt="" srcset="">
+                <div v-for="(item,indexa) in Aarr" :key="indexa">
+                  <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-a mark-target-a1" data-num="1" id="mark-target-a"
+                      :style="{left:item.left+'px', top:item.top+'px', cursor: 'move',position: 'absolute'}"
+                      @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">{{item.markNum}}
+                    <span class="mark-line mark-line-a" style="transform: rotate(160deg);" data-rotate="160"></span>
+                  </div>
+                </div>
+
+                <div v-for="(item,indexv) in Varr" :key="indexv">
+                  <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-v mark-target-v1" data-num="1" id="mark-target-v"
+                        :style="{left: item.left+'px', top: item.top+'px', cursor: 'move', position: 'absolute'}"
+                        @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">{{item.markNum}}
+                    <span class="mark-line mark-line-v" style="transform: rotate(20deg);" data-rotate="20"></span>
+                  </div>
+                </div> -->
+              </div>
+            <!-- </div> -->
+          </div>
+        </div>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dayinDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dayinDialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click="dayin">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -260,7 +294,8 @@ 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"
+const moment = require('moment')
+import html2canvas from "html2canvas"
 export default{
   components:{
     // quillEditor
@@ -272,6 +307,7 @@ export default{
       centerDialogVisible: false,
       imgDialogVisible:false,
       shiyituDialogVisible:false,
+      dayinDialogVisible:false,
       imgUrl:[],
       
       fangxiangA:[{markNum:'',left:'',top:''}],//a端进针方向的数组
@@ -304,12 +340,8 @@ export default{
       obj_a:{a_markNum:'',a_left:'',a_top:''},//助辅工具a的对象
       obj_v:{v_markNum:'',v_left:'',v_top:''},//助辅工具v的对象
 
-      // A_left:390,
-      // A_top:180,
       a_num:1,//控制a端是否显示和高亮
 
-      // V_left:0,
-      // V_top:0
       v_num:1,//控制v端是否显示和高亮
 
       text_arr:[],//文本框
@@ -344,25 +376,24 @@ export default{
       {markNum:'6',v_num:'1'},{markNum:'7',v_num:'1'},{markNum:'8',v_num:'1'},{markNum:'9',v_num:'1'},
       {markNum:'10',v_num:'1'},{markNum:'11',v_num:'1'},{markNum:'12',v_num:'1'}],
 
-      // fangxiangA:[{markNum:'A',left:'400',top:'78',fangxiangA_num:1}],
-      // fangxiangV:[{markNum:'V',left:'100',top:'78'}],
-      // fuzhuA:[{a_markNum:'A',a_left:'360',a_top:'56',xuanzhuan_a:0,scalea_num:1}],
-      // fuzhuV:[{a_markNum:'V',v_left:'56',v_top:'56',xuanzhuan_v:0,scalev_num:1}],
       patientID:0,
       id:0,
       texts:null,
-      value:'',
       imgUrls:'',
+      patients:{},
+      date:moment(new Date()).format("YYYY-MM-DD"),
     }
   },
   created(){
+    
     const id = this.$route.params && this.$route.params.id;
     this.patientID = parseInt(id);
-
+   
     // this.getPatientSitemap(this.patientID)
   },
   mounted(){
     console.log('asdfdfgfd',this.value);
+    console.log('333333',this.date);
   },
   methods:{
     add(){
@@ -739,13 +770,20 @@ export default{
       }
     },
     printtup(){
+      if(this.id==0){
+        this.$message('请先保存');
+      }else{
+      this.dayinDialogVisible = true
+      }
       html2canvas(this.$refs.imageWrapper,{backgroundColor: null}).then(canvas => {
         // 转成图片，生成图片地址
         this.imgUrls = canvas.toDataURL("image/png");
-        console.log('123424534',this.imgUrls)
+        // 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;}
+      // 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;} 
+       
+      // 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;}}}}'
@@ -758,6 +796,18 @@ export default{
       // });
       
     },
+    // 打印
+    dayin(){
+      
+      const style='@media print{.parint_content{width:960px;} #ossPointMarkImg {width: 520px;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} .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;}}'
+      printJS({
+        printable: "print_img",
+        type: "html",
+        style: style,
+        scanStyles: false
+      });
+      this.dayinDialogVisible = false
+    },
     imgv_click(){
       if(this.img_v==false){
         console.log('asdfas2222');
@@ -1056,7 +1106,8 @@ export default{
             var sitemap = response.data.data.sitemap
             console.log('idzhesdfasd',sitemap);
             var patients = response.data.data.patients
-            console.log("患者信息",patients)
+            this.patients=patients
+            console.log("患者信息",this.patients.name)
             if(sitemap.id>0){
               if(sitemap.is_append == 1){
               this.is_append =true