pfd功能区域定位，缩放功能

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

@@ -17,19 +17,24 @@
 
       </div>
       <!-- 急冷区 -->
-      <div class="area-JLQ" >
+      <div class="area-JLQ" :style="JLQStyle">
       </div>
       <!-- 中间区域 -->
-      <div class="area-ZJQ">
+      <div class="area-ZJQ" :style="ZJQStyle">
           <!-- 压缩 -->
           <div class="area-YS">压缩</div>
           <!-- 脱丙烷 -->
           <div class="area-TBP">脱丙烷</div>
           <!-- 热区 -->
-          <div class="area-RQ">热区</div>
+          <div class="area-RQ">热区-1</div>
+      </div>
+      <!-- 冷区+热区-2 -->
+      <div class="area-LQ_RQ" :style="LQ_RQStyle">
+          <!-- 冷区 -->
+          <div class="area-LQ-1">冷区</div>
+          <!-- 热区-2 -->
+          <div class="area-RQ-2">热区-2</div>
       </div>
-      <!-- 冷区 -->
-      <div class="area-LQ">冷区</div>
 
    </div>
   </div>
@@ -43,18 +48,37 @@ export default {
             dialogVisible: false,
             // 缩放比例
             scaleNum: 200,
-            // 区域缩放比例
-            areaLJLScaleNum: 0,
             // 底图初始化宽度
             imageWidth:15548,
+
             // 裂解炉初始化宽度
             areaLJLWidth: 1898,
+            // 裂解炉区域缩放比例
+            areaLJLScaleNum: 0,
+
+            // 急冷区初始化宽度
+            areaJLQWidth: 2930,
+            // 裂解炉区域缩放比例
+            areaJLQScaleNum: 0,
+
+            // 中间区域初始化宽度
+            areaZJQWidth: 5760,
+            // 中间区域缩放比例
+            areaZJQScaleNum: 0,
+
+            // 冷区+热区-2初始化宽度
+            areaLQ_RQWidth: 4920,
+            // 冷区+热区-2缩放比例
+            areaLQ_RQScaleNum: 0,
 
         };
     },
     mounted () {
         this.$nextTick(() => {
-              this.areaLJLScaleNum = parseFloat(this.scaleNum * (this.areaLJLWidth / this.imageWidth)).toFixed()
+              this.areaLJLScaleNum = parseFloat(this.scaleNum * (this.areaLJLWidth / this.imageWidth)).toFixed();
+              this.areaJLQScaleNum = parseFloat(this.scaleNum * (this.areaJLQWidth / this.imageWidth)).toFixed();
+              this.areaZJQScaleNum = parseFloat(this.scaleNum * (this.areaZJQWidth / this.imageWidth)).toFixed();
+              this.areaLQ_RQScaleNum = parseFloat(this.scaleNum * (this.areaLQ_RQWidth / this.imageWidth)).toFixed();
         });
     },
     computed: {
@@ -66,8 +90,27 @@ export default {
       LJLStyle(){
         return {
           width: `${this.areaLJLWidth}px`, // 动态设置裂解炉宽度
+          left: 0, // 动态设置裂解炉left
+        };
+      },
+      JLQStyle(){
+        return {
+          width: `${this.areaJLQWidth}px`, // 动态设置急冷区宽度
+          left: `${this.areaLJLWidth}px`, // 动态设置急冷区left
+        };
+      },
+      ZJQStyle(){
+        return {
+          width: `${this.areaZJQWidth}px`, // 动态设置急冷区宽度
+          left: `${this.areaLJLWidth+this.areaJLQWidth}px`, // 动态设置急冷区left
         };
-      }
+      },
+      LQ_RQStyle(){
+        return {
+          width: `${this.areaLQ_RQWidth}px`, // 动态设置冷区+热区-2宽度
+          left: `${this.areaLJLWidth+this.areaJLQWidth+this.areaZJQWidth}px`, // 动态设置冷区+热区-2left
+        };
+      },
     },
     components: {},
     //在vue自定义指令中添加该指令
@@ -80,12 +123,23 @@ export default {
           this.imageWidth -= this.scaleNum;
           // 裂解炉宽度
           this.areaLJLWidth -= this.areaLJLScaleNum;
-          console.log(1,this.areaLJLWidth)
+          // 急冷区宽度
+          this.areaJLQWidth -= this.areaJLQScaleNum;
+          // 中间区域宽度
+          this.areaZJQWidth -= this.areaZJQScaleNum;
+          // 冷区+热区-2宽度
+          this.areaLQ_RQWidth -= this.areaLQ_RQScaleNum;
         }else if(type === 1){ //放大
            // 底图宽度
           this.imageWidth += this.scaleNum;
           // 裂解炉宽度
           this.areaLJLWidth = +this.areaLJLWidth + +this.areaLJLScaleNum;
+          // 急冷区宽度
+          this.areaJLQWidth = +this.areaJLQWidth + +this.areaJLQScaleNum;
+          // 中间区域宽度
+          this.areaZJQWidth = +this.areaZJQWidth + +this.areaZJQScaleNum;
+          // 冷区+热区-2宽度
+          this.areaLQ_RQWidth = +this.areaLQ_RQWidth + +this.areaLQ_RQScaleNum;
         }
       },
     },
@@ -119,12 +173,34 @@ body{
     width: 1898px;
     height: 100%;
     z-index: 20;
-    /* border: 1px solid red; */
+    border: 1px solid red;
 }
 .area-JLQ{
   position: absolute;
   top: 0;
-  left: 3793px;
+  left: 1898px;
+  height: 100%;
+  width: 2976px;
+  z-index: 20;
+  border: 1px solid blue;
+}
+.area-ZJQ{
+  position: absolute;
+  top: 0;
+  left: 4900px;
+  height: 100%;
+  width: 5740px;
+  z-index: 20;
+  border: 1px solid green;
+}
+.area-LQ_RQ{
+  position: absolute;
+  top: 0;
+  left: 10610px;
+  height: 100%;
+  width: 4931px;
+  z-index: 20;
+  border: 1px solid darkmagenta;
 }
 .resizeBox{
   position: fixed;
@@ -137,7 +213,7 @@ body{
   margin: 0;
   font-size: 12px;
   color: #409eff;
-  opacity: 0.6;
+  opacity: 0.4;
 }
 
 .resizeBox .el-icon-zoom-out,