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

@@ -56,25 +56,26 @@
               </div>
             </div> -->
 
-            
+
             <!-- 穿刺文字 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)"
-              title="长按右键调整线条角度" id="jinzhen_fangxiang_A" class="mark-target mark-target-a mark-target-adccz" 
+            <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 class="xtgl-ccz-arrow xtgl-ccz-arrow-a"
@@ -82,19 +83,20 @@
               </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)">
+            <div v-if="fuzhuA_num==2"
+             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>
@@ -102,10 +104,10 @@
               </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>
@@ -318,8 +320,32 @@ export default{
 
       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){
@@ -409,7 +435,6 @@ export default{
       // }
      }
     },
-
     // v_item(e,val){
     //   const V_div =document.getElementsByClassName('point-mark-v-item')
     //   console.log('1111',val,e.target.className);
@@ -471,7 +496,7 @@ export default{
          const endy=event.clientY-av_bky;
         _target.style.left = endx+'px'
         _target.style.top = endy+'px'
-        
+
         console.log('x',endx,'y',endy);
         // console.log('121',Alen.length);
         // console.log('3333',len,e.target.innerText,_target.innerText);
@@ -489,14 +514,14 @@ export default{
         //     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
@@ -509,18 +534,18 @@ export default{
             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');
@@ -543,11 +568,98 @@ export default{
       // 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
       const textlen=this.text_arr.length
-    
+
       if(text.innerText == val.text){
         this.text_num=2
        const obj={text:'',left:'',top:'',width:''}
@@ -558,6 +670,7 @@ export default{
        obj.width=e.target.offsetWidth
         this.text_arr.push(obj)
       }
+
       console.log('this.text_arr',this.text_arr);
     },
     input_deldte(e,val){
@@ -575,7 +688,7 @@ export default{
         var obj ={markNum:'',left:'',top:''}
         obj.markNum = 'A'
         obj.left= this.fangxiangA_left
-        obj.top=this.fangxiangA_top 
+        obj.top=this.fangxiangA_top
         this.fangxiangA.push(obj)
         console.log('asdfdfgfd',this.fangxiangA);
         return this.fangxiangA_num = 2
@@ -590,7 +703,7 @@ export default{
         var obj ={markNum:'',left:'',top:''}
         obj.markNum = 'V'
         obj.left= this.fangxiangV_left
-        obj.top=this.fangxiangV_top 
+        obj.top=this.fangxiangV_top
         this.fangxiangV.push(obj)
         console.log('asdfdfgfd',this.fangxiangV);
         return this.fangxiangV_num = 2
@@ -604,7 +717,7 @@ export default{
         console.log('辅助工具a111');
         this.obj_a.a_markNum = 'A'
         this.obj_a.a_left= this.fuzhuA_left
-        this.obj_a.a_top=this.fuzhuA_top 
+        this.obj_a.a_top=this.fuzhuA_top
         this.fuzhuA.push(this.obj_a)
         console.log('asdfdfgfd',this.fuzhuA);
         return this.fuzhuA_num = 2
@@ -618,7 +731,7 @@ export default{
         // var obj ={markNum:'',left:'',top:''}
         this.obj_v.v_markNum = 'V'
         this.obj_v.v_left= this.fuzhuV_left
-        this.obj_v.v_top=this.fuzhuV_top 
+        this.obj_v.v_top=this.fuzhuV_top
         this.fuzhuV.push(this.obj_v)
         console.log('辅助工具v1111',this.fuzhuV);
         return this.fuzhuV_num = 2
@@ -681,7 +794,7 @@ export default{
         this.fuzhuV.shift()
         return this.img_v =false
       }
-      
+
     },
     imga_click(){
       if(this.img_a==false){
@@ -704,7 +817,7 @@ export default{
       }
     },
     beforeAvatarUpload(file) {
-     
+
       var fileType = file.type
       const isJPG = fileType.indexOf('image') > -1
       const isLt2M = file.size / 1024 / 1024 < 5
@@ -782,7 +895,7 @@ export default{
     saveimg(){
       // this.A_left=this.endx
       // this.A_top=this.endy
-     
+
        var is_append = 2
 
        if(this.append == true){
@@ -818,7 +931,7 @@ export default{
        console.log("text_arr",this.text_arr)
 
        if(this.A_left!=null && this.A_left.length >0){
-         
+
           for(let i=0;i<this.A_left.length;i++){
              this.A_left[i].a_num =  parseInt(this.A_left[i].a_num)? parseInt(this.A_left[i].a_num):0
              this.A_left[i].markNum  = parseInt(this.A_left[i].markNum)?parseInt(this.A_left[i].markNum):0
@@ -826,7 +939,7 @@ export default{
        }
 
        if(this.fangxiangA!=null && this.fangxiangA.length>0){
-         
+
          for(let i=0;i<this.fangxiangA.length;i++){
             this.fangxiangA[i].left = parseInt(this.fangxiangA[i].left)?parseInt(this.fangxiangA[i].left):0
             this.fangxiangA[i].markNum = parseInt(this.fangxiangA[i].markNum)?parseInt(this.fangxiangA[i].markNum):0
@@ -835,17 +948,17 @@ export default{
        }
 
        if(this.fangxiangV!=null && this.fangxiangV.length>0){
-         
+
          for(let i=0;i<this.fangxiangV.length;i++){
             this.fangxiangV[i].left = parseInt(this.fangxiangV[i].left)?parseInt(this.fangxiangV[i].left):0
             this.fangxiangV[i].markNum = parseInt(this.fangxiangV[i].markNum)?parseInt(this.fangxiangV[i].markNum):0
             this.fangxiangV[i].top = parseInt(this.fangxiangV[i].top)?parseInt(this.fangxiangV[i].top):0
          }
        }
-    
+
 
        if(this.fuzhuV!=null && this.fuzhuV.length>0){
-         
+
          for(let i=0;i<this.fuzhuV.length;i++){
             this.fuzhuV[i].v_markNum = parseInt(this.fuzhuV[i].v_markNum)?parseInt(this.fuzhuV[i].v_markNum):0
             this.fuzhuV[i].v_left = parseInt(this.fuzhuV[i].v_left)?parseInt(this.fuzhuV[i].v_left):0
@@ -854,7 +967,7 @@ export default{
        }
 
        if(this.fuzhuA!=null && this.fuzhuA.length>0){
-         
+
          for(let i=0;i<this.fuzhuA.length;i++){
             this.fuzhuA[i].a_markNum = parseInt(this.fuzhuA[i].a_markNum)?parseInt(this.fuzhuA[i].a_markNum):0
             this.fuzhuA[i].a_left = parseInt(this.fuzhuA[i].a_left)?parseInt(this.fuzhuA[i].a_left):0
@@ -863,7 +976,7 @@ export default{
        }
 
        if(this.text_arr!=null && this.text_arr.length>0){
-         
+
          for(let i=0;i<this.text_arr.length;i++){
             this.text_arr[i].left = parseInt(this.text_arr[i].left)?parseInt(this.text_arr[i].left):0
             this.text_arr[i].top = parseInt(this.text_arr[i].top)?parseInt(this.text_arr[i].top):0
@@ -872,7 +985,7 @@ export default{
        }
 
        if(this.V_left!=null && this.V_left.length>0){
-         
+
          for(let i=0;i<this.V_left.length;i++){
             this.V_left[i].markNum = parseInt(this.V_left[i].markNum)?parseInt(this.V_left[i].markNum):0
             this.V_left[i].v_num = parseInt(this.V_left[i].v_num)?parseInt(this.V_left[i].v_num):0
@@ -952,11 +1065,11 @@ export default{
             }else{
               this.is_img_a = false
             }
-             
+
             this.id = sitemap.id
 
 
-      
+
             this.A_top = sitemap.a_top
             this.av_bkx = sitemap.av_bkx
             this.av_bky = sitemap.av_bky
@@ -996,7 +1109,7 @@ export default{
              this.text_arr = sitemap.DeviceValsualTextArr
 
             }
-            
+
          }
       })
     },
@@ -1118,16 +1231,7 @@ export default{
     //   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>
@@ -1195,7 +1299,7 @@ export default{
       z-index: -1;
     }
   }
-  
+
   b.xtgl-ccz-arrow-a {
     border-left-color: #E73535;
     border-top-color: #E73535;
@@ -1246,7 +1350,7 @@ export default{
     user-select: none;
     -webkit-user-select: none;
     // position: relative;
-    position: absolute;
+    // position: absolute;
     display: block;
     left: 0;
     top: 0;
@@ -1255,7 +1359,7 @@ export default{
     // background-image: url('../../assets/evaluate/tool-a.png');
   }
   div.frame-image {
-    position: absolute;
+    // position: absolute;
     overflow: hidden;
     top: 0px;
     left: 5px;
@@ -1322,7 +1426,6 @@ export default{
 .frame-box .drag-elem.bottom {
     top: calc(100% + 6px);
 }
-
 .frame-box .drag-elem {
     width: 10px;
     height: 10px;
@@ -1352,29 +1455,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%;
+  }
 }
 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;