鸟瞰图 - 压缩区域页面1、页面3、页面4、页面5

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="app-container">
+    <div class="compression1-container">
+      <el-tooltip class="item" effect="dark" content="气相干燥器" placement="top">
+        <div class="compression-qxgzq"
+             id="compression-qxgzq"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('气相干燥器')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="液相干燥器" placement="top">
+        <div class="compression-yxgzq"
+             id="compression-yxgzq"
+             @mouseover="handleMouseover2"
+             @mouseleave="handleMouseleave2"
+             @click="handleDevClick('液相干燥器')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="碱洗塔" placement="top">
+        <div class="compression-jxt"
+             id="compression-jxt"
+             @mouseover="handleMouseover3"
+             @mouseleave="handleMouseleave3"
+             @click="handleDevClick('碱洗塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="裂解气压缩机" placement="top">
+        <div class="compression-ljqysj"
+             id="compression-ljqysj"
+             @mouseover="handleMouseover4"
+             @mouseleave="handleMouseleave4"
+             @click="handleDevClick('裂解气压缩机')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="高低压脱丙烷塔" placement="top">
+        <div class="compression-gdytbwt"
+             id="compression-gdytbwt"
+             @mouseover="handleMouseover5"
+             @mouseleave="handleMouseleave5"
+             @click="handleDevClick('高低压脱丙烷塔')">
+        </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("compression-qxgzq");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover2() {
+        let box = document.getElementById("compression-yxgzq");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover3() {
+        let box = document.getElementById("compression-jxt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover4() {
+        let box = document.getElementById("compression-ljqysj");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover5() {
+        let box = document.getElementById("compression-gdytbwt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("compression-qxgzq");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave2() {
+        let box = document.getElementById("compression-yxgzq");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave3() {
+        let box = document.getElementById("compression-jxt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave4() {
+        let box = document.getElementById("compression-ljqysj");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave5() {
+        let box = document.getElementById("compression-gdytbwt");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .compression1-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/compression1.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .compression-qxgzq {
+    position:absolute;
+    top: 10px;
+    left: 180px;
+    padding: 0px;
+    margin: 0px;
+    width: 120px;
+    height: 120px;
+  }
+
+  .compression-yxgzq {
+    position:absolute;
+    top: 130px;
+    left: 250px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 50px;
+  }
+
+  .compression-jxt {
+    position:absolute;
+    top: 80px;
+    left: 850px;
+    padding: 0px;
+    margin: 0px;
+    width: 150px;
+    height: 120px;
+  }
+
+  .compression-ljqysj {
+    position:absolute;
+    top: 340px;
+    left: 270px;
+    padding: 0px;
+    margin: 0px;
+    width: 370px;
+    height: 150px;
+  }
+
+  .compression-gdytbwt {
+    position:absolute;
+    top: 330px;
+    left: 700px;
+    padding: 0px;
+    margin: 0px;
+    width: 250px;
+    height: 120px;
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <!--<div class="compression2-container">-->
+      <!--<el-tooltip class="item" effect="dark" content="123" placement="top">-->
+        <!--<div class="compression-bxjlt"-->
+             <!--id="compression-bxjlt"-->
+             <!--@mouseover="handleMouseover1"-->
+             <!--@mouseleave="handleMouseleave1"-->
+             <!--@click="handleDevClick('123')">-->
+        <!--</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("compression-bxjlt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("compression-bxjlt");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .compression2-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/compression1.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .compression-bxjlt {
+    position:absolute;
+    top: 300px;
+    left: 400px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <div class="compression3-container">
+      <el-tooltip class="item" effect="dark" content="Z908集水池" placement="top">
+        <div class="compression-z908"
+             id="compression-z908"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('Z908集水池')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="废碱处理单元" placement="top">
+        <div class="compression-fjcldy"
+             id="compression-fjcldy"
+             @mouseover="handleMouseover2"
+             @mouseleave="handleMouseleave2"
+             @click="handleDevClick('废碱处理单元')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="废碱罐" placement="top">
+        <div class="compression-fjg"
+             id="compression-fjg"
+             @mouseover="handleMouseover3"
+             @mouseleave="handleMouseleave3"
+             @click="handleDevClick('废碱罐')">
+        </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("compression-z908");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover2() {
+        let box = document.getElementById("compression-fjcldy");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover3() {
+        let box = document.getElementById("compression-fjg");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("compression-z908");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave2() {
+        let box = document.getElementById("compression-fjcldy");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave3() {
+        let box = document.getElementById("compression-fjg");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .compression3-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/compression3.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .compression-z908 {
+    position:absolute;
+    top: 30px;
+    left: 240px;
+    padding: 0px;
+    margin: 0px;
+    width: 260px;
+    height: 440px;
+   }
+
+  .compression-fjcldy {
+    position:absolute;
+    top: 0px;
+    left: 550px;
+    padding: 0px;
+    margin: 0px;
+    width: 400px;
+    height: 270px;
+  }
+
+  .compression-fjg {
+    position:absolute;
+    top: 330px;
+    left: 590px;
+    padding: 0px;
+    margin: 0px;
+    width: 320px;
+    height: 150px;
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="compression4-container">
+      <el-tooltip class="item" effect="dark" content="C2加氢反应器" placement="top">
+        <div class="compression-c2"
+             id="compression-c2"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('C2加氢反应器')">
+        </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("compression-c2");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("compression-c2");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .compression4-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/compression4.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .compression-c2 {
+    position:absolute;
+    top: 0px;
+    left: 400px;
+    padding: 0px;
+    margin: 0px;
+    width: 200px;
+    height: 450px;
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="compression5-container">
+      <el-tooltip class="item" effect="dark" content="裂解气第二干燥器" placement="top">
+        <div class="compression-ljqdegzq"
+             id="compression-ljqdegzq"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('裂解气第二干燥器')">
+        </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("compression-ljqdegzq");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("compression-ljqdegzq");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .compression5-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/compression5.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .compression-ljqdegzq {
+    position:absolute;
+    top: 230px;
+    left: 400px;
+    padding: 0px;
+    margin: 0px;
+    width: 100px;
+    height: 100px;
+  }
+</style>

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

@@ -36,6 +36,22 @@
     <div v-if="area=='separation2'">
       <separation2 :area="area" @handleDevClick="handleDevClick"></separation2>
     </div>
+    <!-- 压缩区域子组件 -->
+    <div v-if="area=='compression1'">
+      <compression1 :area="area" @handleDevClick="handleDevClick"></compression1>
+    </div>
+    <div v-if="area=='compression2'">
+      <compression2 :area="area" @handleDevClick="handleDevClick"></compression2>
+    </div>
+    <div v-if="area=='compression3'">
+      <compression3 :area="area" @handleDevClick="handleDevClick"></compression3>
+    </div>
+    <div v-if="area=='compression4'">
+      <compression4 :area="area" @handleDevClick="handleDevClick"></compression4>
+    </div>
+    <div v-if="area=='compression5'">
+      <compression5 :area="area" @handleDevClick="handleDevClick"></compression5>
+    </div>
     <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
@@ -67,6 +83,11 @@
   import Pgu from "@/views/aerial/pgu/index.vue";
   import Separation1 from "@/views/aerial/separation1/index.vue";
   import Separation2 from "@/views/aerial/separation2/index.vue";
+  import Compression1 from "@/views/aerial/compression1/index.vue";
+  import Compression2 from "@/views/aerial/compression2/index.vue";
+  import Compression3 from "@/views/aerial/compression3/index.vue";
+  import Compression4 from "@/views/aerial/compression4/index.vue";
+  import Compression5 from "@/views/aerial/compression5/index.vue";
 
   export default {
     components: {
@@ -81,6 +102,11 @@
       Pgu,
       Separation1,
       Separation2,
+      Compression1,
+      Compression2,
+      Compression3,
+      Compression4,
+      Compression5,
     },
     props: {},
     data() {

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

@@ -31,7 +31,7 @@
            id="compression-box-1"
            @mouseover="handleCompressionMouseover"
            @mouseleave="handleCompressionMouseleave"
-           @click="handleAreaClick('压缩区域')">
+           @click="handleAreaClick('压缩区域', 'compression1')">
         <!--<div class="compression-box-text-1"-->
              <!--id="compression-box-text-1">压 缩 区 域</div>-->
       </div>
@@ -40,13 +40,13 @@
            id="compression-box-2"
            @mouseover="handleCompressionMouseover"
            @mouseleave="handleCompressionMouseleave"
-           @click="handleAreaClick('压缩区域')"></div>
+           @click="handleAreaClick('压缩区域', 'compression2')"></div>
       <!--  压缩区域3 -->
       <div class="compression-box-3"
            id="compression-box-3"
            @mouseover="handleCompressionMouseover"
            @mouseleave="handleCompressionMouseleave"
-           @click="handleAreaClick('压缩区域')">
+           @click="handleAreaClick('压缩区域', 'compression3')">
         <!--<div class="compression-box-text-3"-->
              <!--id="compression-box-text-3">压 缩 区 域</div>-->
       </div>
@@ -55,13 +55,13 @@
            id="compression-box-4"
            @mouseover="handleCompressionMouseover"
            @mouseleave="handleCompressionMouseleave"
-           @click="handleAreaClick('压缩区域')"></div>
+           @click="handleAreaClick('压缩区域', 'compression4')"></div>
       <!--  压缩区域5 -->
       <div class="compression-box-5"
            id="compression-box-5"
            @mouseover="handleCompressionMouseover"
            @mouseleave="handleCompressionMouseleave"
-           @click="handleAreaClick('压缩区域')"></div>
+           @click="handleAreaClick('压缩区域', 'compression5')"></div>
       <!--  D201区域 -->
       <div class="d201-box"
            id="d201-box"

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

@@ -37,15 +37,6 @@
         </div>
       </el-tooltip>
 
-      <el-tooltip class="item" effect="dark" content="C2加氢反应器" placement="top">
-        <div class="separation-c2"
-             id="separation-c2"
-             @mouseover="handleAeuMouseover5"
-             @mouseleave="handleAeuMouseleave5"
-             @click="handleDevClick('C2加氢反应器')">
-        </div>
-      </el-tooltip>
-
       <el-tooltip class="item" effect="dark" content="C4加氢反应器" placement="top">
         <div class="separation-c4"
              id="separation-c4"

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

@@ -19,15 +19,6 @@
         </div>
       </el-tooltip>
 
-      <el-tooltip class="item" effect="dark" content="裂解气第二干燥器" placement="top">
-        <div class="separation-ljqdegzq"
-             id="separation-ljqdegzq"
-             @mouseover="handleMouseover3"
-             @mouseleave="handleMouseleave3"
-             @click="handleDevClick('裂解气第二干燥器')">
-        </div>
-      </el-tooltip>
-
       <el-tooltip class="item" effect="dark" content="VOC压缩机" placement="top">
         <div class="separation-voc"
              id="separation-voc"
@@ -253,16 +244,6 @@
     height: 140px;
   }
 
-  .separation-ljqdegzq {
-    position:absolute;
-    top: 100px;
-    left: 200px;
-    padding: 0px;
-    margin: 0px;
-    width: 40px;
-    height: 50px;
-  }
-
   .separation-voc {
     position:absolute;
     top: 360px;