鸟瞰图 - 分离区域页面1、页面2

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

@@ -29,6 +29,13 @@
     <div v-if="area=='pgu'">
       <pgu :area="area" @handleDevClick="handleDevClick"></pgu>
     </div>
+    <!-- 分离区域子组件 -->
+    <div v-if="area=='separation1'">
+      <separation1 :area="area" @handleDevClick="handleDevClick"></separation1>
+    </div>
+    <div v-if="area=='separation2'">
+      <separation2 :area="area" @handleDevClick="handleDevClick"></separation2>
+    </div>
     <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
@@ -58,6 +65,8 @@
   import Aeu1 from "@/views/aerial/aeu1/index.vue";
   import Aeu2 from "@/views/aerial/aeu2/index.vue";
   import Pgu from "@/views/aerial/pgu/index.vue";
+  import Separation1 from "@/views/aerial/separation1/index.vue";
+  import Separation2 from "@/views/aerial/separation2/index.vue";
 
   export default {
     components: {
@@ -70,6 +79,8 @@
       Aeu1,
       Aeu2,
       Pgu,
+      Separation1,
+      Separation2,
     },
     props: {},
     data() {

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

@@ -76,7 +76,7 @@
            id="separation-box-1"
            @mouseover="handleSeparationMouseover"
            @mouseleave="handleSeparationMouseleave"
-           @click="handleAreaClick('分离区域')">
+           @click="handleAreaClick('分离区域', 'separation1')">
         <!--<div class="separation-box-text-1"-->
              <!--id="separation-box-text-1">分 离 区 域</div>-->
       </div>
@@ -85,13 +85,13 @@
            id="separation-box-2"
            @mouseover="handleSeparationMouseover"
            @mouseleave="handleSeparationMouseleave"
-           @click="handleAreaClick('分离区域')"></div>
+           @click="handleAreaClick('分离区域', 'separation2')"></div>
       <!--  分离区域3 -->
       <div class="separation-box-3"
            id="separation-box-3"
            @mouseover="handleSeparationMouseover"
            @mouseleave="handleSeparationMouseleave"
-           @click="handleAreaClick('分离区域')">
+           @click="handleAreaClick('分离区域', 'separation2')">
         <!--<div class="separation-box-text-3"-->
              <!--id="separation-box-text-3">分 离 区 域</div>-->
       </div>
@@ -100,7 +100,7 @@
            id="separation-box-4"
            @mouseover="handleSeparationMouseover"
            @mouseleave="handleSeparationMouseleave"
-           @click="handleAreaClick('分离区域')"></div>
+           @click="handleAreaClick('分离区域', 'separation2')"></div>
       <!--  办公楼区域 -->
       <div class="office-box"
            id="office-box"

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

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="separation1-container">
+      <el-tooltip class="item" effect="dark" content="丙烯精馏塔" placement="top">
+        <div class="separation-bxjlt"
+             id="separation-bxjlt"
+             @mouseover="handleAeuMouseover1"
+             @mouseleave="handleAeuMouseleave1"
+             @click="handleDevClick('丙烯精馏塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="丙烯汽提塔" placement="top">
+        <div class="separation-bxqtt"
+             id="separation-bxqtt"
+             @mouseover="handleAeuMouseover2"
+             @mouseleave="handleAeuMouseleave2"
+             @click="handleDevClick('丙烯汽提塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="脱丁烷塔" placement="top">
+        <div class="separation-tdwt"
+             id="separation-tdwt"
+             @mouseover="handleAeuMouseover3"
+             @mouseleave="handleAeuMouseleave3"
+             @click="handleDevClick('脱丁烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="脱乙烷塔" placement="top">
+        <div class="separation-tywt"
+             id="separation-tywt"
+             @mouseover="handleAeuMouseover4"
+             @mouseleave="handleAeuMouseleave4"
+             @click="handleDevClick('脱乙烷塔')">
+        </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"
+             @mouseover="handleAeuMouseover6"
+             @mouseleave="handleAeuMouseleave6"
+             @click="handleDevClick('C4加氢反应器')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C3加氢反应器和脱砷反应器" placement="top">
+        <div class="separation-c3"
+             id="separation-c3"
+             @mouseover="handleAeuMouseover7"
+             @mouseleave="handleAeuMouseleave7"
+             @click="handleDevClick('C3加氢反应器和脱砷反应器')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="丙烯精馏塔回流泵" placement="top">
+        <div class="separation-bxjlhlb"
+             id="separation-bxjlhlb"
+             @mouseover="handleAeuMouseover8"
+             @mouseleave="handleAeuMouseleave8"
+             @click="handleDevClick('丙烯精馏塔回流泵')">
+        </div>
+      </el-tooltip>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      area: {
+        type: String,
+        default: ''
+      },
+    },
+    methods: {
+      handleDevClick(devName) {
+        this.$emit('handleDevClick', devName);
+      },
+      /* mouseover事件 */
+      handleAeuMouseover1() {
+        let box = document.getElementById("separation-bxjlt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover2() {
+        let box = document.getElementById("separation-bxqtt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover3() {
+        let box = document.getElementById("separation-tdwt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover4() {
+        let box = document.getElementById("separation-tywt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover5() {
+        let box = document.getElementById("separation-c2");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover6() {
+        let box = document.getElementById("separation-c4");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover7() {
+        let box = document.getElementById("separation-c3");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover8() {
+        let box = document.getElementById("separation-bxjlhlb");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleAeuMouseleave1() {
+        let box = document.getElementById("separation-bxjlt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave2() {
+        let box = document.getElementById("separation-bxqtt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave3() {
+        let box = document.getElementById("separation-tdwt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave4() {
+        let box = document.getElementById("separation-tywt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave5() {
+        let box = document.getElementById("separation-c2");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave6() {
+        let box = document.getElementById("separation-c4");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave7() {
+        let box = document.getElementById("separation-c3");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave8() {
+        let box = document.getElementById("separation-bxjlhlb");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .separation1-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/separation1.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .separation-bxjlt {
+    position:absolute;
+    top: 300px;
+    left: 400px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .separation-bxqtt {
+    position:absolute;
+    top: 300px;
+    left: 550px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .separation-tdwt {
+    position:absolute;
+    top: 300px;
+    left: 650px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .separation-tywt {
+    position:absolute;
+    top: 300px;
+    left: 850px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .separation-c2 {
+    position:absolute;
+    top: 0px;
+    left: 740px;
+    padding: 0px;
+    margin: 0px;
+    width: 70px;
+    height: 200px;
+  }
+
+  .separation-c4 {
+    position:absolute;
+    top: 90px;
+    left: 680px;
+    padding: 0px;
+    margin: 0px;
+    width: 50px;
+    height: 60px;
+  }
+
+  .separation-c3 {
+    position:absolute;
+    top: 40px;
+    left: 530px;
+    padding: 0px;
+    margin: 0px;
+    width: 40px;
+    height: 110px;
+  }
+
+  .separation-bxjlhlb {
+    position:absolute;
+    top: 60px;
+    left: 290px;
+    padding: 0px;
+    margin: 0px;
+    width: 60px;
+    height: 110px;
+  }
+</style>

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

@@ -0,0 +1,345 @@
+<template>
+  <div class="app-container">
+    <div class="separation2-container">
+      <el-tooltip class="item" effect="dark" content="热火炬罐" placement="top">
+        <div class="separation-rhjg"
+             id="separation-rhjg"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('热火炬罐')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="冷剂压缩机" placement="top">
+        <div class="separation-ljysj"
+             id="separation-ljysj"
+             @mouseover="handleMouseover2"
+             @mouseleave="handleMouseleave2"
+             @click="handleDevClick('冷剂压缩机')">
+        </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"
+             @mouseover="handleMouseover4"
+             @mouseleave="handleMouseleave4"
+             @click="handleDevClick('VOC压缩机')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="冷火炬罐" placement="top">
+        <div class="separation-lhjg"
+             id="separation-lhjg"
+             @mouseover="handleMouseover5"
+             @mouseleave="handleMouseleave5"
+             @click="handleDevClick('冷火炬罐')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="脱甲烷塔" placement="top">
+        <div class="separation-tjwt"
+             id="separation-tjwt"
+             @mouseover="handleMouseover6"
+             @mouseleave="handleMouseleave6"
+             @click="handleDevClick('脱甲烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-425塔" placement="top">
+        <div class="separation-c425"
+             id="separation-c425"
+             @mouseover="handleMouseover7"
+             @mouseleave="handleMouseleave7"
+             @click="handleDevClick('C-425塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="冷箱" placement="top">
+        <div class="separation-lx"
+             id="separation-lx"
+             @mouseover="handleMouseover8"
+             @mouseleave="handleMouseleave8"
+             @click="handleDevClick('冷箱')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="乙烯热泵压缩机" placement="top">
+        <div class="separation-yxrbysj"
+             id="separation-yxrbysj"
+             @mouseover="handleMouseover9"
+             @mouseleave="handleMouseleave9"
+             @click="handleDevClick('乙烯热泵压缩机')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="预脱甲烷塔" placement="top">
+        <div class="separation-ytjwt"
+             id="separation-ytjwt"
+             @mouseover="handleMouseover10"
+             @mouseleave="handleMouseleave10"
+             @click="handleDevClick('预脱甲烷塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="乙烯精馏塔" placement="top">
+        <div class="separation-yxjlt"
+             id="separation-yxjlt"
+             @mouseover="handleMouseover11"
+             @mouseleave="handleMouseleave11"
+             @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("separation-rhjg");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover2() {
+        let box = document.getElementById("separation-ljysj");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover3() {
+        let box = document.getElementById("separation-ljqdegzq");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover4() {
+        let box = document.getElementById("separation-voc");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover5() {
+        let box = document.getElementById("separation-lhjg");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover6() {
+        let box = document.getElementById("separation-tjwt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover7() {
+        let box = document.getElementById("separation-c425");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover8() {
+        let box = document.getElementById("separation-lx");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover9() {
+        let box = document.getElementById("separation-yxrbysj");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover10() {
+        let box = document.getElementById("separation-ytjwt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleMouseover11() {
+        let box = document.getElementById("separation-yxjlt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleMouseleave1() {
+        let box = document.getElementById("separation-rhjg");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave2() {
+        let box = document.getElementById("separation-ljysj");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave3() {
+        let box = document.getElementById("separation-ljqdegzq");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave4() {
+        let box = document.getElementById("separation-voc");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave5() {
+        let box = document.getElementById("separation-lhjg");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave6() {
+        let box = document.getElementById("separation-tjwt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave7() {
+        let box = document.getElementById("separation-c425");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave8() {
+        let box = document.getElementById("separation-lx");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave9() {
+        let box = document.getElementById("separation-yxrbysj");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave10() {
+        let box = document.getElementById("separation-ytjwt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleMouseleave11() {
+        let box = document.getElementById("separation-yxjlt");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .separation2-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/separation2.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .separation-rhjg {
+    position:absolute;
+    top: 0px;
+    left: 880px;
+    padding: 0px;
+    margin: 0px;
+    width: 90px;
+    height: 180px;
+  }
+
+  .separation-ljysj {
+    position:absolute;
+    top: 20px;
+    left: 410px;
+    padding: 0px;
+    margin: 0px;
+    width: 250px;
+    height: 140px;
+  }
+
+  .separation-ljqdegzq {
+    position:absolute;
+    top: 100px;
+    left: 200px;
+    padding: 0px;
+    margin: 0px;
+    width: 40px;
+    height: 50px;
+  }
+
+  .separation-voc {
+    position:absolute;
+    top: 360px;
+    left: 1060px;
+    padding: 0px;
+    margin: 0px;
+    width: 60px;
+    height: 60px;
+  }
+
+  .separation-lhjg {
+    position:absolute;
+    top: 250px;
+    left: 790px;
+    padding: 0px;
+    margin: 0px;
+    width: 50px;
+    height: 120px;
+  }
+
+  .separation-tjwt {
+    position:absolute;
+    top: 250px;
+    left: 570px;
+    padding: 0px;
+    margin: 0px;
+    width: 50px;
+    height: 150px;
+  }
+
+  .separation-c425 {
+    position:absolute;
+    top: 440px;
+    left: 520px;
+    padding: 0px;
+    margin: 0px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .separation-lx {
+    position:absolute;
+    top: 270px;
+    left: 520px;
+    padding: 0px;
+    margin: 0px;
+    width: 50px;
+    height: 150px;
+  }
+
+  .separation-yxrbysj {
+    position:absolute;
+    top: 330px;
+    left: 240px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 100px;
+  }
+
+  .separation-ytjwt {
+    position:absolute;
+    top: 270px;
+    left: 250px;
+    padding: 0px;
+    margin: 0px;
+    width: 40px;
+    height: 50px;
+  }
+
+  .separation-yxjlt {
+    position:absolute;
+    top: 260px;
+    left: 210px;
+    padding: 0px;
+    margin: 0px;
+    width: 40px;
+    height: 50px;
+  }
+</style>