Merge branch '20230223_pc_vue_new_branch' of http://git.shengws.com/csx/Vue_New into 20230223_pc_vue_new_branch

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,52 @@
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span> -->
     </el-dialog>
+    <!-- 打印 -->
+    <el-dialog
+      title="打印"
+      :visible.sync="dayinDialogVisible"
+      width="50%"
+      center>
+      <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="dayin">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -246,6 +294,8 @@ import print from "print-js";
 import { getFileExtension} from '@/utils/tools'
 import { saveSitemap,getPatientSitemap,updateSiteMap } from "@/api/patient";
 import { getToken } from '@/api/qiniu'
+const moment = require('moment')
+import html2canvas from "html2canvas"
 export default{
   components:{
     // quillEditor
@@ -257,6 +307,7 @@ export default{
       centerDialogVisible: false,
       imgDialogVisible:false,
       shiyituDialogVisible:false,
+      dayinDialogVisible:false,
       imgUrl:[],
       
       fangxiangA:[{markNum:'',left:'',top:''}],//a端进针方向的数组
@@ -289,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:[],//文本框
@@ -329,24 +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.fangxiangA);
+    console.log('asdfdfgfd',this.value);
+    console.log('333333',this.date);
   },
   methods:{
     add(){
@@ -517,7 +564,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 +598,6 @@ export default{
         }
       }
     },
-
     fuzhuA_down(e){
       const fuzhuA= document.getElementById('jinzhen-jiaodu-target-A')
       const fuzhua_x =e.clientX - fuzhuA.offsetLeft
@@ -604,7 +650,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,19 +770,43 @@ 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;}}}}'
-
+      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)
+      });
+      // 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;}}}}'
+
+      // printJS({
+      //   printable: "print_mark_img",
+      //   type: "html",
+      //   style: style,
+      //   scanStyles: false
+      // });
+      
+    },
+    // 打印
+    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_mark_img",
+        printable: "print_img",
         type: "html",
         style: style,
         scanStyles: false
       });
-      
+      this.dayinDialogVisible = false
     },
     imgv_click(){
       if(this.img_v==false){
@@ -1036,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
@@ -1425,34 +1496,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;