区域功能开发

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

@@ -16,12 +16,14 @@
 
           <!-- 裂解炉 -->
           <div class="area-LJL" :style="LJLStyle">
+           裂解炉
             <!-- 菱形点击区域 --展示弹窗 -->
             <div class="rhombus LJL-rhombus LJL-rhombus-1" @click="handleDialogVisible('2009')" ref-data="2009">2009</div>
 
           </div>
           <!-- 急冷区 -->
           <div class="area-JLQ" :style="JLQStyle">
+            急冷区
             <!-- 菱形点击区域 --展示弹窗 -->
             <div class="rhombus JLQ-rhombus JLQ-rhombus-1" @click="handleDialogVisible('2017')" ref-data="2017">2017</div>
             <div class="rhombus JLQ-rhombus JLQ-rhombus-2" @click="handleDialogVisible('2000')" ref-data="2000">2000</div>
@@ -60,6 +62,7 @@
           <div class="area-ZJQ" :style="ZJQStyle">
               <!-- 压缩 -->
               <div class="area-YS" :style="YSStyle">
+                压缩
                 <!-- 菱形点击区域 --展示弹窗 -->
                 <div class="rhombus YS-rhombus YS-rhombus-1" @click="handleDialogVisible('3102')" ref-data="3102">3102</div>
                 <div class="rhombus YS-rhombus YS-rhombus-2" @click="handleDialogVisible('3202')" ref-data="3202">3202</div>
@@ -76,6 +79,7 @@
               </div>
               <!-- 脱丙烷 -->
               <div class="area-TBP" :style="TBPStyle">
+                脱丙烷
                 <!-- 菱形点击区域 --展示弹窗 -->
                 <div class="rhombus TBP-rhombus TBP-rhombus-1" @click="handleDialogVisible('3708')" ref-data="3708">3708</div>
                 <div class="rhombus TBP-rhombus TBP-rhombus-2" @click="handleDialogVisible('3508')" ref-data="3508">3508</div>
@@ -96,6 +100,7 @@
               </div>
               <!-- 热区 -->
               <div class="area-RQ-1" :style="RQ1Style">
+                热区
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-1" @click="handleDialogVisible('5606')" ref-data="5606">5606</div>
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-2" @click="handleDialogVisible('5601')" ref-data="5601">5601</div>
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-3" @click="handleDialogVisible('5600')" ref-data="5600">5600</div>
@@ -105,6 +110,7 @@
           <div class="area-LQ_RQ" :style="LQ_RQStyle">
               <!-- 冷区1 -->
               <div class="area-LQ-1" :style="LQ1Style">
+                冷区
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-1" @click="handleDialogVisible('4223')" ref-data="4223">4223</div>
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-2" @click="handleDialogVisible('4013')" ref-data="4013">4013</div>
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-3" @click="handleDialogVisible('4009')" ref-data="4009">4009</div>
@@ -179,6 +185,7 @@
               </div>
               <!-- 冷区2 -->
               <div class="area-LQ-2" :style="LQ2Style">
+                冷区
                 <div class="rhombus LQ2-rhombus LQ2-rhombus-1" @click="handleDialogVisible('7481')" ref-data="7481">7481</div>
                 <div class="rhombus LQ2-rhombus LQ2-rhombus-2" @click="handleDialogVisible('7465')" ref-data="7465">7465</div>
 
@@ -189,6 +196,7 @@
               </div>
               <!-- 热区-2 -->
               <div class="area-RQ-2" :style="RQ2Style">
+                热区
                 <div class="rhombus RQ2-rhombus RQ2-rhombus-1" @click="handleDialogVisible('5301')" ref-data="5301">5301</div>
                 <div class="rhombus RQ2-rhombus RQ2-rhombus-2" @click="handleDialogVisible('5304')" ref-data="5304">5304</div>
                 <div class="rhombus RQ2-rhombus RQ2-rhombus-3" @click="handleDialogVisible('5250')" ref-data="5250">5250</div>
@@ -378,9 +386,24 @@ export default {
             params[key] = value;
           }
           console.log('params',params);
-          if(params.pageId === 'JLQ'){
+          if(params.pageId === "LJL"){ // 裂解炉
             el.style.left =  "0";
+            el.style.top =  "-700px";
+          }else if(params.pageId === "JLQ"){ // 急冷区
+            el.style.left =  "-740px";
             el.style.top =  "-500px";
+          }else if(params.pageId === "YS"){ // 压缩
+            el.style.left =  "-1675px";
+            el.style.top =  "-300px";
+          }else if(params.pageId === "TBP"){ // 脱丙烷
+            el.style.left =  "-4000px";
+            el.style.top =  "-500px";
+          }else if(params.pageId === "LQ"){ // 冷区
+            el.style.left =  "-5050px";
+            el.style.top =  "-300px";
+          } else if(params.pageId === "RQ"){ // 热区
+            el.style.left =  "-2900px";
+            el.style.top =  "-1000px";
           }else{
             el.style.left =  "0px";
             el.style.top =  "0px";
@@ -418,9 +441,77 @@ export default {
       let pageId = this.$route.query.pageId; // 页面参数
       if(pageId){
           if(pageId === "LJL"){
-              this.imageWidth = 2148;
+              this.imageWidth = 10948;
+              this.areaLJLWidth = 1265;
+              this.areaJLQWidth = 2156;
+              this.areaZJQWidth = 4089;
+              this.areaYSWidth = 2652;
+              this.areaTBPWidth = 1438;
+              this.areaRQ1Width = 2652;
+              this.areaLQ_RQWidth = 3396;
+              this.areaLQ_1Width = 3396;
+              this.areaLQ_2Width = 1632;
+              this.areaRQ2Width = 1632;
           }else if(pageId === "JLQ"){
-              this.imageWidth = 5148;
+              this.imageWidth = 6348;
+              this.areaLJLWidth = 734;
+              this.areaJLQWidth = 1252;
+              this.areaZJQWidth = 2372;
+              this.areaYSWidth = 1539;
+              this.areaTBPWidth = 835;
+              this.areaRQ1Width = 1538;
+              this.areaLQ_RQWidth = 1970;
+              this.areaLQ_1Width = 1970;
+              this.areaLQ_2Width = 948;
+              this.areaRQ2Width = 948;
+          }else if(pageId === "YS"){
+              this.imageWidth = 5348;
+              this.areaLJLWidth = 619;
+              this.areaJLQWidth = 1056;
+              this.areaZJQWidth = 2000;
+              this.areaYSWidth = 1298;
+              this.areaTBPWidth = 705;
+              this.areaRQ1Width = 1297;
+              this.areaLQ_RQWidth = 1661;
+              this.areaLQ_1Width = 1661;
+              this.areaLQ_2Width = 800;
+              this.areaRQ2Width = 800;
+          }else if(pageId === "TBP"){
+              this.imageWidth = 7348;
+              this.areaLJLWidth = 851;
+              this.areaJLQWidth = 1452;
+              this.areaZJQWidth = 2749;
+              this.areaYSWidth = 1784;
+              this.areaTBPWidth = 970;
+              this.areaRQ1Width = 1783;
+              this.areaLQ_RQWidth = 2284;
+              this.areaLQ_1Width = 2284;
+              this.areaLQ_2Width = 1101;
+              this.areaRQ2Width = 1101;
+          }else if(pageId === "LQ"){
+              this.imageWidth = 7348;
+              this.areaLJLWidth = 851;
+              this.areaJLQWidth = 1452;
+              this.areaZJQWidth = 2749;
+              this.areaYSWidth = 1784;
+              this.areaTBPWidth = 970;
+              this.areaRQ1Width = 1783;
+              this.areaLQ_RQWidth = 2284;
+              this.areaLQ_1Width = 2284;
+              this.areaLQ_2Width = 1101;
+              this.areaRQ2Width = 1101;
+          } else if(pageId === "RQ"){
+             this.imageWidth = 6548;
+              this.areaLJLWidth = 759;
+              this.areaJLQWidth = 1295;
+              this.areaZJQWidth = 2451;
+              this.areaYSWidth = 1591;
+              this.areaTBPWidth = 866;
+              this.areaRQ1Width = 1950;
+              this.areaLQ_RQWidth = 2037;
+              this.areaLQ_1Width = 2037;
+              this.areaLQ_2Width = 982;
+              this.areaRQ2Width = 982;
           }
       }
     },
@@ -540,7 +631,7 @@ body{
     width: 1898px;
     height: 100%;
     z-index: 20;
-    border: 1px solid red;
+    /* border: 1px solid red; */
 }
 .area-JLQ{
   position: absolute;
@@ -549,7 +640,7 @@ body{
   height: 100%;
   width: 2976px;
   z-index: 20;
-  border: 1px solid blue;
+  /* border: 1px solid blue; */
 }
 .area-ZJQ{
   position: absolute;
@@ -558,7 +649,7 @@ body{
   height: 100%;
   width: 5740px;
   z-index: 20;
-  border: 1px solid green;
+  /* border: 1px solid green; */
 }
 .area-YS{
   position: absolute;
@@ -567,7 +658,7 @@ body{
   width: 520px;
   height:54%;
   z-index: 20;
-  border: 1px solid red;
+  /* border: 1px solid red; */
 
 }
 .area-TBP{
@@ -577,7 +668,7 @@ body{
   width: 342px;
   height:54%;
   z-index: 20;
-  border: 1px solid blue;
+  /* border: 1px solid blue; */
 }
 .area-RQ-1{
   position: absolute;
@@ -586,7 +677,7 @@ body{
   width: 520px;
   height:45%;
   z-index: 20;
-  border: 1px solid yellow;
+  /* border: 1px solid yellow; */
 
 }
 .area-LQ_RQ{
@@ -596,7 +687,7 @@ body{
   height: 100%;
   width: 4931px;
   z-index: 20;
-  border: 1px solid darkmagenta;
+  /* border: 1px solid darkmagenta; */
 }
 .area-LQ-1{
   position: absolute;
@@ -605,7 +696,7 @@ body{
   width: 666px;
   height: 65%;
   z-index: 20;
-  border: 1px solid darkorange;
+  /* border: 1px solid darkorange; */
 }
 .area-LQ-2{
   position: absolute;
@@ -614,7 +705,7 @@ body{
   width: 320px;
   height: 35%;
   z-index: 20;
-  border: 1px solid darkred;
+  /* border: 1px solid darkred; */
 }
 .area-RQ-2{
   position: absolute;
@@ -623,7 +714,7 @@ body{
   width: 320px;
   height: 35%;
   z-index: 20;
-  border: 1px solid darkgreen;
+  /* border: 1px solid darkgreen; */
 }
 /* 放大缩小按钮 */
 .resizeBox{