9月7日杨青

src/xt_pages/user/Sitemap.vue

 
             
             <!-- 穿刺文字 active  @mousedown="startDrag"   @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)" left:text_left+'px',top:text_top+'px',-->
-            <div v-for="(item,index) in text_arr" :key="index" >
-              <div ref="text_cc" class="add-mark-text-wrap active"
+            <!-- <div  >@mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)" -->
+              <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'}"
-              @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
+              >
                 <!-- <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 }} -->
+                  <!-- {{ item }} @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
                   <el-input v-text="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" data-width="82" style="width: 82px; border: 1px solid transparent; cursor: default;" 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>
-            </div>
+            <!-- </div> -->
+
             <!-- 穿刺方向 -->
             <div v-for="item in fangxiangA">
-            <div v-if="fangxiangA_num==2" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"
+            <div v-if="fangxiangA_num==2" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"
               title="长按右键调整线条角度" id="jinzhen_fangxiang_A" class="mark-target mark-target-a mark-target-adccz" 
               :style="{left: item.left+'px', top: item.top+'px', width: 14+'px', height: 14+'px', background: 'rgb(231, 53, 53)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
               <span class="mark-line mark-line-ccza" data-rotate="160" style="width:50px;transform:rotate(160deg);">
               </b></span></div></div>
 
             <div v-for="item in fangxiangV">
-            <div v-if="fangxiangV_num==2" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"
+            <div v-if="fangxiangV_num==2" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"
             title="长按右键调整线条角度" id="jinzhen_fangxiang_V" class="mark-target mark-target-v mark-target-vdccz"
             :style="{left: item.left+'px', top: item.top+'px', width: 14+'px', height: 14+'px', background: 'rgb(53, 162, 231)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
             <span class="mark-line mark-line-cczv" data-rotate="20" style="width:50px;transform:rotate(20deg);">
               <b class="xtgl-ccz-arrow xtgl-ccz-arrow-v"
               style="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></span></div></div>
-            <!-- 辅助工具 :style="{transform: rotate(30deg)}"  xuanzhuan_a ,'background-img': 'url(' + require('../../assets/evaluate/tool-a.png') + ')'  -->
+            <!-- 辅助工具 :style="{transform: rotate(30deg)}"  xuanzhuan_a ,  @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
             <div v-for="item in fuzhuA">
             <div v-if="fuzhuA_num==2" 
-             class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A" :style="{position: 'absolute',top:item.a_top+'px',left:item.a_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
+             class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A" @mousedown="fuzhuA_down"
+             :style="{position: 'absolute',top:item.a_top+'px',left:item.a_left+'px'}" >
               <div class="frame-box  actives" :style="{'transform': `scale(${scalea_num})`}" >
-                <div class="frame-image" data-rotate="0" :style="{transform: `rotate(${item.A_rotate}deg)`}">
+                <div class="frame-image" data-rotate="0" :style="{transform: `rotate(${item.A_rotate}deg)`,margin:'auto'}">
                   <img src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 0px;">
                 </div>
                 <div class="drag-elem bottom right" @click="imga_click"></div>
               </div>
             </div></div>
             <div v-for="item in fuzhuV"><!--scalev_num item.scalev-->
-            <div v-if="fuzhuV_num==2" :style="{position: 'absolute',top:item.v_top+'px',left:item.v_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"
+            <div v-if="fuzhuV_num==2" :style="{position: 'absolute',top:item.v_top+'px',left:item.v_left+'px'}" @mousedown="fuzhuV_down"
              class="jinzhen-jiaodu-target jinzhen-jiaodu-target-V" id="jinzhen-jiaodu-target-V">
               <div class="frame-box actives" :style="{'transform': `scale(${item.v_scalev})`}" >
-                <div id="v_img" class="frame-image" data-rotate="0" :style="{'transform': `rotate(${item.V_rotate}deg)`}">
+                <div id="v_img" class="frame-image" data-rotate="0" :style="{'transform': `rotate(${item.V_rotate}deg)`,margin:'auto'}">
                   <img id="image" src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 0px;">
                 </div>
                 <div class="drag-elem bottom right" @click="imgv_click"></div>
 
       patientID:0,
       id:0,
+      texts:null,
+      disX: 0,
+      disY: 0,
+      styleObj: {
+        left: 0,
+        top: 0
+      },
+      isdow:false
     }
   },
+  created(){
+    const id = this.$route.params && this.$route.params.id;
+    this.patientID = parseInt(id);
+
+    // this.getPatientSitemap(this.patientID)
+  },
+  mounted(){
+    // console.log('valuse',this.fangxiangA,);
+    // this.editor = new Quill(this.$refs.imageWrapper, {
+    //   modules:{toolbar:false},
+    //   theme: 'snow',
+    // });
+  //  console.log('111111',this.fileList);
+    // this.$refs.text_cc.addEventListener('mousemove',this.A_mousedow)
+    // this.$refs.text_cc.addEventListener('mousemove',this.A_moouseup)
+  },
   methods:{
     add(){
       if(this.append == false){
       // }
      }
     },
-
     // v_item(e,val){
     //   const V_div =document.getElementsByClassName('point-mark-v-item')
     //   console.log('1111',val,e.target.className);
         //     Vlen[i].top=endy
         //   }
         // }
-        for(let i=0;i<textlen.length;i++){
-          const textsle=e.target.innerText.split('\n')[0]
-          if(textlen[i].text == textsle){
-            console.log('3333');
-            textlen[i].left=endx
-            textlen[i].top=endy
-          }
-        }
+        // for(let i=0;i<textlen.length;i++){
+        //   const textsle=e.target.innerText.split('\n')[0]
+        //   if(textlen[i].text == textsle){
+        //     console.log('3333');
+        //     textlen[i].left=endx
+        //     textlen[i].top=endy
+        //   }
+        // }
         for(let i=0;i<fx_alen.length;i++){
           if(e.target.id=='jinzhen_fangxiang_A'){
             fx_alen[0].left=endx
             fx_vlen[0].top=endy
           }
         }
-        for(let i=0;i<FZ_alen.length;i++){
-          if(e.target.id=='jinzhen-jiaodu-target-A'){
-            FZ_alen[i].a_left=endx
-            FZ_alen[i].a_top=endy
-          }
-        }
-        for(let i=0;i<FZ_vlen.length;i++){
-          if(e.target.id=='jinzhen-jiaodu-target-V'){
-            FZ_vlen[i].v_left=endx
-            FZ_vlen[i].v_top=endy
-          }
-        }
+        // for(let i=0;i<FZ_alen.length;i++){
+        //   if(e.target.id=='jinzhen-jiaodu-target-A'){
+        //     FZ_alen[i].a_left=endx
+        //     FZ_alen[i].a_top=endy
+        //   }
+        // }
+        // for(let i=0;i<FZ_vlen.length;i++){
+        //   if(e.target.id=='jinzhen-jiaodu-target-V'){
+        //     FZ_vlen[i].v_left=endx
+        //     FZ_vlen[i].v_top=endy
+        //   }
+        // }
         for(let i=0;i<aleng.length;i++){
           if(aleng[i].markNum ==e.target.innerText && e.target.id=='mark-target-a'){
             console.log('3333');
       // console.log('0000',val);
       document.onmousemove =null
     },
+    mousedown(e){
+      // this.texts = document.getElementsByClassName('text')[0]
+      const tet=document.getElementsByClassName('text')
+      const evetext=e.target.innerText.split('\n')[0]
+      var textlen=this.text_arr
+      console.log('ZXCBVCB',textlen);
+      for(let i=0;i<tet.length;i++){
+        const textsle = tet[i].innerText.split('\n')[0]
+        if(evetext == textsle){
+          this.disX = e.clientX - tet[i].offsetLeft;
+          this.disY = e.clientY - tet[i].offsetTop;
+          this.isdow=true
+          document.onmousemove = (el) =>{
+          if(this.isdow==false){
+            return
+          }
+            let moveX = el.clientX - this.disX;
+            let moveY = el.clientY - this.disY;
+            tet[i].style.left = moveX + "px";
+            tet[i].style.top = moveY + "px";
+            for(let i=0;i<textlen.length;i++){
+              // const textsle=e.target.innerText.split('\n')[0]
+              if(textlen[i].text == textsle){
+                console.log('3333');
+                textlen[i].left=moveX
+                textlen[i].top=moveY
+              }
+            }
+            console.log('2222222',tet[i].style.left);
+          }
+          document.onmouseup = () => {
+            document.onmousemove = null;
+          };
+        }
+      }
+    },
+    fuzhuA_down(e){
+      const fuzhuA= document.getElementById('jinzhen-jiaodu-target-A')
+      const fuzhua_x =e.clientX - fuzhuA.offsetLeft
+      const fuzhua_y =e.clientY - fuzhuA.offsetTop
+      const fuzhu_A =true
+      var FZ_alen=this.fuzhuA
+      
+      document.onmousemove=(el)=>{
+        if(fuzhu_A==false){
+          return ''
+        }
+        const moveX = el.clientX - fuzhua_x;
+        const moveY = el.clientY - fuzhua_y;
+        fuzhuA.style.left = moveX + "px";
+        fuzhuA.style.top = moveY + "px";
+        for(let i=0;i<FZ_alen.length;i++){
+          if(e.target.id=='jinzhen-jiaodu-target-A'){
+            FZ_alen[i].a_left=moveX
+            FZ_alen[i].a_top=moveY
+          }
+        }
+      }
+      document.onmouseup =() =>{
+        document.onmousemove =null
+      }
+    },
+    fuzhuV_down(e){
+      const fuzhuV= document.getElementById('jinzhen-jiaodu-target-V')
+      const fuzhuv_x =e.clientX - fuzhuV.offsetLeft
+      const fuzhuv_y =e.clientY - fuzhuV.offsetTop
+      const fuzhu_V =true
+      var FZ_vlen=this.fuzhuV
+      document.onmousemove=(el)=>{
+        if(fuzhu_V==false){
+          return ''
+        }
+        const moveX = el.clientX - fuzhuv_x;
+        const moveY = el.clientY - fuzhuv_y;
+        fuzhuV.style.left = moveX + "px";
+        fuzhuV.style.top = moveY + "px";
+        for(let i=0;i<FZ_vlen.length;i++){
+          if(e.target.id=='jinzhen-jiaodu-target-V'){
+            FZ_vlen[i].v_left=moveX
+            FZ_vlen[i].v_top=moveY
+          }
+        }
+      }
+      document.onmouseup =() =>{
+        document.onmousemove =null
+      }
+    },
     punctureclick(e,val){
       console.log('event',e,'value',val);
       const text=e.target
        obj.width=e.target.offsetWidth
         this.text_arr.push(obj)
       }
+      
       console.log('this.text_arr',this.text_arr);
     },
     input_deldte(e,val){
       return new Blob([u8arr], { type: mime });
     }
   },
-  created(){
-    // console.log('chu','chu',);
-    const id = this.$route.params && this.$route.params.id;
-    this.patientID = parseInt(id);
-
-    // this.getPatientSitemap(this.patientID)
-    // if(this.fuzhuV_num ==1 || this.append ==false){
-    //   return this.xuanzhuan =0
-    // }
-  },
   computed:{
     // editor() {
     //   return this.$refs.myQuillEditor.quill;
     // }
   },
-  mounted(){
-    // console.log('valuse',this.fangxiangA,);
-    // this.editor = new Quill(this.$refs.imageWrapper, {
-    //   modules:{toolbar:false},
-    //   theme: 'snow',
-    // });
-  //  console.log('111111',this.fileList);
-    // this.$refs.text_cc.addEventListener('mousemove',this.A_mousedow)
-    // this.$refs.text_cc.addEventListener('mousemove',this.A_moouseup)
-  }
+  
 
 }
 </script>
     user-select: none;
     -webkit-user-select: none;
     // position: relative;
-    position: absolute;
+    // position: absolute;
     display: block;
     left: 0;
     top: 0;
     // background-image: url('../../assets/evaluate/tool-a.png');
   }
   div.frame-image {
-    position: absolute;
+    // position: absolute;
     overflow: hidden;
     top: 0px;
     left: 5px;
 .frame-box .drag-elem.bottom {
     top: calc(100% + 6px);
 }
-
 .frame-box .drag-elem {
     width: 10px;
     height: 10px;
   line-height: 24px;
   z-index: 1005;
   display: inline-block;
-
+  .el-input {
+    /* position: relative; */
+    font-size: 14px;
+    display: inline-block;
+    width: 100%;
+  }
 }
 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;
-}
+// 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

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