9月11日杨青

src/xt_pages/outpatientDoctorStation/template/prinSeven.vue

                   
                   <div style="margin-left: 70px">
                     用法：
-                    <span v-if="(item.arr.length>0 && item.arr[0][0].groupno!=it.groupno)||arr.length<0">{{ it.single_dose }}{{ it.single_dose_unit }}</span>
+                    <span v-if="(item.arr.length>0 && item.arr[0][0].groupno!=it.groupno)||item.arr.length==0">{{ it.single_dose }}{{ it.single_dose_unit }}</span>
                     &nbsp;&nbsp;<span>
                       {{ it.execution_frequency }}&nbsp;{{
                         it.delivery_way

src/xt_pages/user/Sitemap.vue

 
             <!-- 穿刺文字 @mousedown="mousedown($event)"   active  @mousedown="startDrag"   @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)" left:text_left+'px',top:text_top+'px',-->
             <!-- <div   
-            >  -->
+            >  width:(item.width + 10)+'px',-->
               <div v-for="(item,index) in text_arr" :key="index" class="add-mark-text-wrap active text" id="text" @mousedown="mousedown($event)"
-              :style="{width:(item.width + 10)+'px',left:item.left+'px',top:item.top+'px','font-size':14+'px', position: 'absolute'}"
+              :style="{width: 'fit-content',left:item.left+'px',top:item.top+'px','font-size':14+'px', position: 'absolute'}"
               > 
-                <!-- <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" class="inputStyle">
+                <template slot="prefix">
+                  {{ item.text }}
+                </template>
+              </el-input> -->
+
                   <!-- <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 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">
                   <!-- <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>
       width="50%"
       center>
       <div>
+        <div @click="dayin">
+          <el-button type="primary" @click="dayin">打印</el-button>
+        </div>
         <div id="print_img">
           <div class="parint_content">
             <!-- <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">
+      <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="dayinDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dayin">确 定</el-button>
-      </span>
+      </span> -->
     </el-dialog>
   </div>
 </template>
       imgUrls:'',
       patients:{},
       date:moment(new Date()).format("YYYY-MM-DD"),
+      widthtext:null,
     }
   },
   created(){
       console.log('event',e,'value',this.value);
       const text=e.target
       const textlen=this.text_arr.length
-
       if(text.innerText == val.text){
         this.text_num=2
        const obj={text:'',left:'',top:'',width:''}
        obj.left=this.text_left
        obj.top=this.text_top+(textlen*30)
        obj.width=e.target.offsetWidth
+      // obj.width= this.widthtext
         this.text_arr.push(obj)
       }
 
       }
     },
     printtup(){
-      if(this.id==0){
-        this.$message('请先保存');
-      }else{
+      // 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
-      // });
+     
       
     },
     // 打印
         u8arr[n] = bstr.charCodeAt(n);
       }
       return new Blob([u8arr], { type: mime });
+    },
+    changewidth(){
+      // let input = document.getElementById("inpu");
+      // const l = input.value.length;
+      // this.widthtext=(l+1) * 15 + "px"
+      // input.style.width = (l+1) * 15 + "px"; 
     }
   },
   created(){
     opacity: 0;
     z-index: -1;
 }
+// .inputStyle {
+//   margin-top: 30px;
+//   text-align: start;    // 这里一样要设置，否则不是对齐的居中状态
+//   min-width: 160px;   //这里给一个最小宽度
+// }
+// .el-input {
+//    width: auto;  // 这里一定要设置为auto 否则由于input是默认width ：100%的
+// }
+// .inputStyle >>> .el-input__prefix {
+//   display: inline-block;
+//   position: relative;
+//   border: 1px solid #dcdfe6;
+//   box-sizing: border-box;
+//   color: #606266;
+//   font-size: inherit;
+//   height: 40px;
+//   line-height: 40px;
+//   padding: 0 30px;
+//   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+//   padding-left: 30px;
+//   left: 0;
+//   visibility: hidden;
+// }
+// .inputStyle >>> .el-input__inner {
+//   position: absolute;
+// }
 </style>
 <style lang="scss">
 .ql-snow .ql-tooltip[data-mode="link"]::before {