打开关闭弹窗和放大缩小，会导致页面位置移动优化

ui/src/views/monitor/pfd/index.vue

@@ -8,7 +8,7 @@
     </div>
     <!-- 拖拽移动 -->
     <div class="abutton">
-      <div ref="firstDom" v-move class="mode">
+      <div ref="firstDom" v-move class="mode" >
         <!-- 点击区域 -->
         <div class="pfdDivBox">
           <!-- 底图 -->
@@ -227,6 +227,10 @@
 <script>
 // 拖拽是否开启
 let dragging = false;
+let dragData = {
+  left:"",
+  top: "",
+};
 import throttle from "@/utils/throttle";
 import { getPfdmgrByCode } from "@/api/monitor/pfdmgr";
 
@@ -378,6 +382,7 @@ export default {
     //在vue自定义指令中添加该指令
     directives: {
       move(el) {
+
         // 根据不同参数默认展示不同区域
         const url = window.location.href;
           let params = {};
@@ -389,7 +394,7 @@ export default {
             const value = decodeURIComponent(match[2]);
             params[key] = value;
           }
-          console.log('params',params);
+
           if(params.pageId === "LJL"){ // 裂解炉
             el.style.left =  "0";
             el.style.top =  "-700px";
@@ -418,7 +423,6 @@ export default {
           //获取鼠标点击处分别与div左边和div上边的距离：鼠标位置-div位置
           let startX = e.clientX - el.offsetLeft,
             startY = e.clientY - el.offsetTop;
-           console.log('startX',startX,startY);
           throttle(
             (document.onmousemove = function (ev) {
               dragging = false;
@@ -427,8 +431,16 @@ export default {
               let event = ev || window.event;
               let moveX = event.clientX - startX,
                 moveY = event.clientY - startY;
-              el.style.left = moveX + "px";
-              el.style.top = moveY + "px";
+
+                if(dragData.left != "" || dragData.top != ""){
+                  el.style.left =  dragData.left + "px";
+                  el.style.top =  dragData.top + "px";
+                }else{
+                  el.style.left = moveX + "px";
+                  el.style.top = moveY + "px";
+                }
+                dragData.left = moveX;
+                dragData.top = moveY;
             }),
             500
           );
@@ -439,6 +451,12 @@ export default {
             document.onmousemove = null;
           };
         };
+
+        // 解决放大缩小时图片位置问题
+        if(dragData.left != "" || dragData.top != ""){
+          el.style.left = dragData.left + "px";
+          el.style.top =  dragData.top + "px";
+        }
       },
     },
     created() {
@@ -522,7 +540,6 @@ export default {
     methods: {
       // 图片缩放函数
       resizeImage(type){
-
         if(type === -1){ //缩小
           // 底图宽度
           this.imageWidth -= this.scaleNum;
@@ -573,7 +590,6 @@ export default {
       },
       // 显示弹窗
       handleDialogVisible(num){
-        console.log('3333',dragging);
         // 防止拖拽时触发点击事件
         if(dragging === true){
           this.rhombusData = num;