8月31日杨青

src/xt_pages/user/Sitemap.vue

@@ -34,21 +34,21 @@
             <!-- A端/V端 v-if="a_num==2" -->
             <div v-for="(item,index) in A_arr" :key="index">
               <div v-if="a_num==2" title="长按右键调整线条角度" class="mark-target mark-target-a mark-target-a1" data-num="1" 
-                  :style="{left:390+'px', top: (180+(index*30))+'px', cursor: 'move',position: 'absolute'}" 
+                  :style="{left:A_left+'px', top: (A_top+(index*30))+'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,index) in V_arr" :key="index">
               <div v-if="v_num==2" title="长按右键调整线条角度" class="mark-target mark-target-v mark-target-v1" data-num="1" 
-                    :style="{left: 184+'px', top: (180+(index*30))+'px', cursor: 'move', position: 'absolute'}" 
+                    :style="{left: V_left+'px', top: (V_top+(index*30))+'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>
             <!-- 穿刺文字 active  @mousedown="startDrag"   @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)"-->
             <div v-for="(item,index) in text_arr" :key="index" >
-              <div ref="text_cc" class="add-mark-text-wrap active" :style="{width:(item.width + 10)+'px',left:39.17+'%',top:(39.00+(index*4))+'%','font-size':14+'px'}" 
+              <div ref="text_cc" class="add-mark-text-wrap active" :style="{width:(item.width + 10)+'px',left:text_left+'%',top:(text_top+(index*4))+'%','font-size':14+'px'}" 
               @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)"> -->
                   <!-- {{ item }} -->
@@ -62,7 +62,7 @@
             <!-- 穿刺方向 -->
             <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" 
-              style="left: 400px; top: 78px; width: 14px; height: 14px; background: rgb(231, 53, 53); border-radius: 50%; position: absolute; cursor: move;">
+              :style="{left: fangxiangA_left+'px', top: fangxiangA_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" 
                 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);">
@@ -70,7 +70,7 @@
 
             <div v-if="fangxiangV_num==2" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)" 
             title="长按右键调整线条角度" id="jinzhen_fangxiang_V" class="mark-target mark-target-v mark-target-vdccz" 
-            style="left: 100px; top: 78px; width: 14px; height: 14px; background: rgb(53, 162, 231); border-radius: 50%; position: absolute; cursor: move;">
+            :style="{left: fangxiangV_left+'px', top: fangxiangV_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-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);">
@@ -78,7 +78,7 @@
             <!-- 辅助工具 :style="{transform: rotate(30deg)}"  ,'background-img': 'url(' + require('../../assets/evaluate/tool-a.png') + ')'  -->
             <div v-if="fuzhuA_num==2"  
              class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A">
-              <div class="frame-box  actives" :style="{'transform': `scale(${scalea_num})`}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
+              <div class="frame-box  actives" :style="{'transform': `scale(${scalea_num})`,top:fuzhuA_top+'px',left:fuzhuA_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
                 <div class="frame-image" data-rotate="0" :style="{transform: `rotate(${xuanzhuan_a}deg)`}">
                   <!-- <img src="../../assets/evaluate/tool-a.png" alt="" srcset="" > -->
                 </div>
@@ -88,7 +88,7 @@
             </div> 
             <div v-if="fuzhuV_num==2" 
              class="jinzhen-jiaodu-target jinzhen-jiaodu-target-V" id="jinzhen-jiaodu-target-V">
-              <div class="frame-box actives" :style="{'transform': `scale(${scalev_num})`}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
+              <div class="frame-box actives" :style="{'transform': `scale(${scalev_num})`,top:fuzhuV_top+'px',left:fuzhuV_left+'px'}" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">
                 <div id="v_img" class="frame-image" data-rotate="0" :style="{'transform': `rotate(${xuanzhuan_v}deg)`}">
                   <!-- <img id="image" src="../../assets/evaluate/tool-a.png" alt="" srcset="" > -->
                 </div>
@@ -255,7 +255,7 @@ export default{
   },
   data(){
     return{
-      append:false,
+      append:false,//控制是否编辑
       centerDialogVisible: false,
       imgDialogVisible:false,
       shiyituDialogVisible:false,
@@ -265,13 +265,27 @@ export default{
       text_num:1,//关闭文本框
       fangxiangA_num:1,//控制a端进针方向是否显示
       fangxiangV_num:1,//控制v端进针方向是否显示
+      fangxiangA_left:400,//A端进针方向X
+      fangxiangA_top:78,//A端进针方向Y
+      fangxiangV_left:100,//v端进针方向X
+      fangxiangV_top:78,//v端进针方向Y
       fuzhuA_num:1,//控制a端辅助工具是否显示
       fuzhuV_num:1,//控制v端辅助工具是否显示
       xuanzhuan_a:0,//点击旋转角度a
       xuanzhuan_v:0,//点击旋转角度v
+      fuzhuA_top:0,//控制a端辅助工具Y
+      fuzhuA_left:0,//控制a端辅助工具X
+      fuzhuV_top:0,//控制V端辅助工具Y
+      fuzhuV_left:0,//控制V端辅助工具X
       A_arr:[],//A端数据
       V_arr:[],//V端数据
+      A_left:390,//A端X
+      A_top:180,//A端Y
+      V_left:184,//V端X
+      V_top:180,//V端Y
       text_arr:[],//文本框
+      text_left:39.17,//文本框x
+      text_top:39.00,//文本框x
       av_bkx:0,
       av_bky:0,
       img_v:false,//控制v端辅助工具点击放大缩小
@@ -287,8 +301,8 @@ export default{
       // url:'',//图片路径
 
       value:'',//获取文本框文字
-      endx:null,//移动停止x点
-      endy:null,//移动停止y点
+      // endx:null,//移动停止x点
+      // endy:null,//移动停止y点
 
     }
   },
@@ -357,8 +371,7 @@ export default{
       }
     },
     A_mousedow(e){
-      // console.log('7777',e);
-      var inpu= document.getElementById('inpu')
+      console.log('7777',e);
       // console.log('8888',val);
       var _target = e.target
       var startx =e.clientX
@@ -378,11 +391,11 @@ export default{
         if(event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww){
           return false;
         }
-         this.endx=event.clientX-av_bkx;
-         this.endy=event.clientY-av_bky;
-        _target.style.left = this.endx+'px'
-        _target.style.top = this.endy+'px'
-        console.log('x',this.endx,'y',this.endy);
+         const endx=event.clientX-av_bkx;
+         const endy=event.clientY-av_bky;
+        _target.style.left = endx+'px'
+        _target.style.top = endy+'px'
+        // console.log('x',this.endx,'y',this.endy);
       }
       
       // inpu.addEventListener('mousedown',this.A_mousedow)
@@ -792,7 +805,7 @@ export default{
 
   div.jinzhen-jiaodu-target-A {
     top: 56px;
-    left: 400px;
+    left: 360px;
   }
   div.jinzhen-jiaodu-target-V {
     top: 56px;