鸟瞰图 - PGU区域页面

ui/src/views/aerial/detail/index.vue

@@ -25,6 +25,10 @@
     <div v-if="area=='aeu2'">
       <aeu2 :area="area" @handleDevClick="handleDevClick"></aeu2>
     </div>
+    <!-- PGU区域子组件 -->
+    <div v-if="area=='pgu'">
+      <pgu :area="area" @handleDevClick="handleDevClick"></pgu>
+    </div>
     <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
@@ -53,6 +57,7 @@
   import D201 from "@/views/aerial/d201/index.vue";
   import Aeu1 from "@/views/aerial/aeu1/index.vue";
   import Aeu2 from "@/views/aerial/aeu2/index.vue";
+  import Pgu from "@/views/aerial/pgu/index.vue";
 
   export default {
     components: {
@@ -64,6 +69,7 @@
       D201,
       Aeu1,
       Aeu2,
+      Pgu,
     },
     props: {},
     data() {

ui/src/views/aerial/office/index.vue

@@ -4,8 +4,8 @@
       <el-tooltip class="item" effect="dark" content="D301办公楼" placement="top">
         <div class="office"
              id="office"
-             @mouseover="handleCrackingMouseover1"
-             @mouseleave="handleCrackingMouseleave1"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
              @click="handleDevClick('D301办公楼')">
         </div>
       </el-tooltip>
@@ -26,13 +26,13 @@
         this.$emit('handleDevClick', devName);
       },
       /* mouseover事件 */
-      handleCrackingMouseover1() {
+      handleMouseover1() {
         let box = document.getElementById("office");
         box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
         box.style.cursor = "pointer";
       },
       /* mouseleave事件 */
-      handleCrackingMouseleave1() {
+      handleMouseleave1() {
         let box = document.getElementById("office");
         box.style.backgroundColor = "transparent";
       },

ui/src/views/aerial/pgu/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="pgu-container">
+      <el-tooltip class="item" effect="dark" content="C-401稳定塔" placement="top">
+        <div class="pgu-c401"
+             id="pgu-c401"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('C-401稳定塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-402脱辛烷塔" placement="top">
+        <div class="pgu-c402"
+             id="pgu-c402"
+             @mouseover="handleMouseover2"
+             @mouseleave="handleMouseleave2"
+             @click="handleDevClick('C-402脱辛烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-601预脱戊烷塔" placement="top">
+        <div class="pgu-c601"
+             id="pgu-c601"
+             @mouseover="handleMouseover3"
+             @mouseleave="handleMouseleave3"
+             @click="handleDevClick('C-601预脱戊烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-602预脱辛烷塔" placement="top">
+        <div class="pgu-c602"
+             id="pgu-c602"
+             @mouseover="handleMouseover4"
+             @mouseleave="handleMouseleave4"
+             @click="handleDevClick('C-602预脱辛烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="PGU压缩机机房" placement="top">
+        <div class="pgu-ysjjf"
+             id="pgu-ysjjf"
+             @mouseover="handleMouseover5"
+             @mouseleave="handleMouseleave5"
+             @click="handleDevClick('PGU压缩机机房')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="R-101 1st加氢" placement="top">
+        <div class="pgu-r101"
+             id="pgu-r101"
+             @mouseover="handleMouseover6"
+             @mouseleave="handleMouseleave6"
+             @click="handleDevClick('R-101 1st加氢')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="R-301 2nd加氢" placement="top">
+        <div class="pgu-r301"
+             id="pgu-r301"
+             @mouseover="handleMouseover7"
+             @mouseleave="handleMouseleave7"
+             @click="handleDevClick('R-301 2nd加氢')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="R-701 C5加氢反应" placement="top">
+        <div class="pgu-r701"
+             id="pgu-r701"
+             @mouseover="handleMouseover8"
+             @mouseleave="handleMouseleave8"
+             @click="handleDevClick('R-701 C5加氢反应')">
+        </div>
+      </el-tooltip>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      area: {
+        type: String,
+        default: ''
+      },
+    },
+    methods: {
+      handleDevClick(devName) {
+        this.$emit('handleDevClick', devName);
+      },
+      /* mouseover事件 */
+      handleMouseover1() {
+        let box = document.getElementById("pgu-c401");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover2() {
+        let box = document.getElementById("pgu-c402");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover3() {
+        let box = document.getElementById("pgu-c601");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover4() {
+        let box = document.getElementById("pgu-c602");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover5() {
+        let box = document.getElementById("pgu-ysjjf");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover6() {
+        let box = document.getElementById("pgu-r101");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover7() {
+        let box = document.getElementById("pgu-r301");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover8() {
+        let box = document.getElementById("pgu-r701");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("pgu-c401");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave2() {
+        let box = document.getElementById("pgu-c402");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave3() {
+        let box = document.getElementById("pgu-c601");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave4() {
+        let box = document.getElementById("pgu-c602");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave5() {
+        let box = document.getElementById("pgu-ysjjf");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave6() {
+        let box = document.getElementById("pgu-r101");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave7() {
+        let box = document.getElementById("pgu-r301");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave8() {
+        let box = document.getElementById("pgu-r701");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .pgu-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/pgu.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .pgu-c401 {
+    position:absolute;
+    top: 80px;
+    left: 360px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .pgu-c402 {
+    position:absolute;
+    top: 30px;
+    left: 180px;
+    padding: 0px;
+    margin: 0px;
+    width: 180px;
+    height: 130px;
+  }
+
+  .pgu-c601 {
+    position:absolute;
+    top: 40px;
+    left: 1000px;
+    padding: 0px;
+    margin: 0px;
+    width: 60px;
+    height: 60px;
+  }
+
+  .pgu-c602 {
+    position:absolute;
+    top: 20px;
+    left: 1060px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .pgu-ysjjf {
+    position:absolute;
+    top: 300px;
+    left: 80px;
+    padding: 0px;
+    margin: 0px;
+    width: 350px;
+    height: 160px;
+  }
+
+  .pgu-r101 {
+    position:absolute;
+    top: 300px;
+    left: 760px;
+    padding: 0px;
+    margin: 0px;
+    width: 100px;
+    height: 80px;
+  }
+
+  .pgu-r301 {
+    position:absolute;
+    top: 390px;
+    left: 760px;
+    padding: 0px;
+    margin: 0px;
+    width: 100px;
+    height: 80px;
+  }
+
+  .pgu-r701 {
+    position:absolute;
+    top: 300px;
+    left: 870px;
+    padding: 0px;
+    margin: 0px;
+    width: 100px;
+    height: 120px;
+  }
+</style>