前端界面展示优化

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

@@ -66,6 +66,10 @@
 <script>
 // 拖拽是否开启
 let dragging = false;
+let dragData = {
+  left:"",
+  top: "",
+};
 import throttle from "@/utils/throttle";
 import { getPfdmgrByCode } from "@/api/monitor/pfdmgr";
 
@@ -102,6 +106,26 @@ export default {
     //在vue自定义指令中添加该指令
     directives: {
       move(el) {
+
+        setTimeout(() => {
+          // 图片缩小时图片位置问题
+          let imgHeight = el.children[0].children[0].offsetHeight;
+          if(imgHeight < -dragData.top *1.5){ // 当位置小于图片高度时，表示图片被缩放到了屏幕外
+            el.style.top = "25%";
+            el.style.left = "50%";
+          }
+          console.log("666",el);
+        }, 500);
+
+        // 防止放大缩小时图片位置问题
+        if(dragData.left != "" || dragData.top != ""){
+          el.style.left =  dragData.left + "px";
+          el.style.top =  dragData.top + "px";
+        }else{
+          el.style.left =  "50%";
+          el.style.top =  "100px";
+        }
+
         el.onmousedown = function (e) {
 
           // 阻止点击事件冒泡
@@ -118,8 +142,17 @@ 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";
+              // 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
           );
@@ -129,6 +162,12 @@ export default {
             dragging = true;
             document.onmousemove = null;
           };
+
+          // 解决放大缩小时图片位置问题
+          if(dragData.left != "" || dragData.top != ""){
+            el.style.left = dragData.left + "px";
+            el.style.top =  dragData.top + "px";
+          }
         };
       },
     },
@@ -494,6 +533,7 @@ body{
   left: "calc(100% - 1300px)";
   bottom: "calc(100% - 500px)";
   z-index: 99;
+  transform: translate(-50%, 0);
 }
 
 

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

@@ -23,6 +23,10 @@
 
 <script>
 let dragging = false;
+let dragData = {
+  left:"",
+  top: "",
+};
 import throttle from "@/utils/throttle";
 export default {
     data() {
@@ -49,24 +53,25 @@ export default {
     //在vue自定义指令中添加该指令
     directives: {
       move(el) {
-        // 根据不同参数默认展示不同区域
-        const url = window.location.href;
-          let params = {};
-          const reg = /[?&]+([^=&]+)=([^&]*)/gi;
-          let match;
-
-          while ((match = reg.exec(url)) !== null) {
-            const key = match[1];
-            const value = decodeURIComponent(match[2]);
-            params[key] = value;
-          }
-          if(params.id === 'PAN'){
-            el.style.left =  "0px";
-            el.style.top =  "-538px";
-          }else{
-            el.style.left =  "0px";
-            el.style.top =  "0px";
+
+        setTimeout(() => {
+          // 图片缩小时图片位置问题
+          let imgHeight = el.children[0].children[0].offsetHeight;
+          if(imgHeight < -dragData.top *1.5){ // 当位置小于图片高度时，表示图片被缩放到了屏幕外
+            el.style.top = "20%";
+            el.style.left = "50%";
           }
+          console.log("666",el);
+        }, 500);
+
+        // 防止放大缩小时图片位置问题
+        if(dragData.left != "" || dragData.top != ""){
+          el.style.left =  dragData.left + "px";
+          el.style.top =  dragData.top + "px";
+        }else{
+          el.style.left =  "50%";
+          el.style.top =  "90px";
+        }
         //鼠标拖拽功能
         el.onmousedown = function (e) {
           // 阻止点击事件冒泡
@@ -82,8 +87,17 @@ 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";
+              // 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
           );
@@ -93,6 +107,12 @@ export default {
             dragging = true;
             document.onmousemove = null;
           };
+          console.log(dragData)
+          // 解决放大缩小时图片位置问题
+          if(dragData.left != "" || dragData.top != ""){
+            el.style.left = dragData.left + "px";
+            el.style.top =  dragData.top + "px";
+          }
         };
       },
     },
@@ -173,6 +193,7 @@ body{
   left: "calc(100% - 1300px)";
   bottom: "calc(100% - 500px)";
   z-index: 99;
+  transform: translate(-50%, 0);
 }
 
 

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

@@ -410,6 +410,15 @@ export default {
             params[key] = value;
           }
 
+          setTimeout(() => {
+          // 图片缩小时图片位置问题
+          let imgHeight = el.children[0].children[0].offsetHeight;
+          if(imgHeight < -dragData.top *2){ // 当位置小于图片高度时，表示图片被缩放到了屏幕外
+            el.style.top = "15%";
+          }
+          console.log("666",el);
+        }, 500);
+
           if(params.pageId === "LJL"){ // 裂解炉
             el.style.left =  "0";
             el.style.top =  "-700px";
@@ -917,7 +926,7 @@ export default {
               value: imgSizeObj
             });
         //带参数跳转
-        this.$router.push({ path: '/pfd/jlq' , query: { id: id }});
+        this.$router.push({ path: '/pfd/jlq' });
       },
       // 跳转c2c3页面
       handleToC2C3Page(){
@@ -1089,6 +1098,7 @@ body{
   left: "calc(100% - 1300px)";
   bottom: "calc(100% - 500px)";
   z-index: 99;
+  /* transform: translate(-50%, 0); */
 }
 
 
@@ -1605,6 +1615,7 @@ body{
   height: .7%;
   z-index: 20;
   font-size: 0;
+  cursor: pointer;
 }
 .JLQ-rectangle-2{
   position: absolute;
@@ -1614,6 +1625,7 @@ body{
   height: .9%;
   z-index: 20;
   font-size: 0;
+  cursor: pointer;
 }
 
 /* c3 c2 */
@@ -1623,14 +1635,15 @@ body{
   position: absolute;
   /* border: 1px solid red; */
   font-size: 0;
+  cursor: pointer;
 }
 .TBP-c3c2-1{
   top: 64.3%;
-  left: 42.5%;
+  left: 39.5%;
 }
 .TBP-c3c2-2{
   top: 64.3%;
-  left: 49.5%;
+  left: 46.5%;
 }
 
 .LQ1-c3c2{
@@ -1639,6 +1652,7 @@ body{
   position: absolute;
   /* border: 1px solid red; */
   font-size: 0;
+  cursor: pointer;
 }
 .LQ1-c3c2-1{
   top: 44.5%;
@@ -1717,8 +1731,8 @@ body{
   left: 73.6%;
 }
 .LQ1-c3c2-20{
-  top: 89%;
-  left: 13.3%;
+  top: 88.6%;
+  left: 13%;
 }
 .LQ2-c3c2{
   width: 1.5%;
@@ -1726,18 +1740,19 @@ body{
   position: absolute;
   /* border: 1px solid red; */
   font-size: 0;
+  cursor: pointer;
 }
 .LQ2-c3c2-1{
-  top: 3%;
-  left: 31%;
+  top: 2.56%;
+  left: 30%;
 }
 .LQ2-c3c2-2{
-  top: 9%;
-  left: 31.3%;
+  top: 8.5%;
+  left: 30.3%;
 }
 .LQ2-c3c2-3{
   top: 13%;
-  left: 40%;
+  left: 39%;
 }
 </style>