鸟瞰图 - AEU区域页面1、页面2

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

@@ -0,0 +1,233 @@
+<template>
+  <div class="app-container">
+    <div class="aeu1-container">
+      <el-tooltip class="item" effect="dark" content="C-101抽提塔" placement="top">
+        <div class="aeu-c101"
+             id="aeu-c101"
+             @mouseover="handleAeuMouseover1"
+             @mouseleave="handleAeuMouseleave1"
+             @click="handleDevClick('C-101抽提塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-103汽提塔" placement="top">
+        <div class="aeu-c103"
+             id="aeu-c103"
+             @mouseover="handleAeuMouseover2"
+             @mouseleave="handleAeuMouseleave2"
+             @click="handleDevClick('C-103汽提塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-104溶剂回收塔" placement="top">
+        <div class="aeu-c104"
+             id="aeu-c104"
+             @mouseover="handleAeuMouseover3"
+             @mouseleave="handleAeuMouseleave3"
+             @click="handleDevClick('C-104溶剂回收塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-102水洗抽余油塔" placement="top">
+        <div class="aeu-c102"
+             id="aeu-c102"
+             @mouseover="handleAeuMouseover4"
+             @mouseleave="handleAeuMouseleave4"
+             @click="handleDevClick('C-102水洗抽余油塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-106溶剂再生塔" placement="top">
+        <div class="aeu-c106"
+             id="aeu-c106"
+             @mouseover="handleAeuMouseover5"
+             @mouseleave="handleAeuMouseleave5"
+             @click="handleDevClick('C-106溶剂再生塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-201苯罐" placement="top">
+        <div class="aeu-c201"
+             id="aeu-c201"
+             @mouseover="handleAeuMouseover6"
+             @mouseleave="handleAeuMouseleave6"
+             @click="handleDevClick('C-201苯罐')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="C-202甲苯塔" placement="top">
+        <div class="aeu-c202"
+             id="aeu-c202"
+             @mouseover="handleAeuMouseover7"
+             @mouseleave="handleAeuMouseleave7"
+             @click="handleDevClick('C-202甲苯塔')">
+        </div>
+      </el-tooltip>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      area: {
+        type: String,
+        default: ''
+      },
+    },
+    methods: {
+      handleDevClick(devName) {
+        this.$emit('handleDevClick', devName);
+      },
+      /* AEU区域mouseover事件 */
+      handleAeuMouseover1() {
+        let box = document.getElementById("aeu-c101");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover2() {
+        let box = document.getElementById("aeu-c103");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover3() {
+        let box = document.getElementById("aeu-c104");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover4() {
+        let box = document.getElementById("aeu-c102");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover5() {
+        let box = document.getElementById("aeu-c106");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover6() {
+        let box = document.getElementById("aeu-c201");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      handleAeuMouseover7() {
+        let box = document.getElementById("aeu-c202");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* AEU区域mouseleave事件 */
+      handleAeuMouseleave1() {
+        let box = document.getElementById("aeu-c101");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave2() {
+        let box = document.getElementById("aeu-c103");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave3() {
+        let box = document.getElementById("aeu-c104");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave4() {
+        let box = document.getElementById("aeu-c102");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave5() {
+        let box = document.getElementById("aeu-c106");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave6() {
+        let box = document.getElementById("aeu-c201");
+        box.style.backgroundColor = "transparent";
+      },
+      handleAeuMouseleave7() {
+        let box = document.getElementById("aeu-c202");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .aeu1-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/aeu1.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .aeu-c101 {
+    position:absolute;
+    top: 80px;
+    left: 460px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 90px;
+  }
+
+  .aeu-c103 {
+    position:absolute;
+    top: 80px;
+    left: 380px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 90px;
+  }
+
+  .aeu-c104 {
+    position:absolute;
+    top: 70px;
+    left: 780px;
+    padding: 0px;
+    margin: 0px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .aeu-c102 {
+    position:absolute;
+    top: 40px;
+    left: 480px;
+    padding: 0px;
+    margin: 0px;
+    width: 60px;
+    height: 40px;
+  }
+
+  .aeu-c106 {
+    position:absolute;
+    top: 60px;
+    left: 830px;
+    padding: 0px;
+    margin: 0px;
+    width: 120px;
+    height: 120px;
+  }
+
+  .aeu-c201 {
+    position:absolute;
+    top: 400px;
+    left: 740px;
+    padding: 0px;
+    margin: 0px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .aeu-c202 {
+    position:absolute;
+    top: 380px;
+    left: 820px;
+    padding: 0px;
+    margin: 0px;
+    width: 60px;
+    height: 60px;
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="aeu2-container">
+      <el-tooltip class="item" effect="dark" content="芳烃罐区" placement="top">
+        <div class="aeu-ftgq"
+             id="aeu-ftgq"
+             @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);
+      },
+      /* AEU区域mouseover事件 */
+      handleAeuMouseover8() {
+        let box = document.getElementById("aeu-ftgq");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";
+        box.style.cursor = "pointer";
+      },
+      /* AEU区域mouseleave事件 */
+      handleAeuMouseleave8() {
+        let box = document.getElementById("aeu-ftgq");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .aeu2-container {
+    position: relative;
+    width: 1200px;
+    height: 500px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/aeu2.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .aeu-ftgq {
+    position:absolute;
+    top: 100px;
+    left: 160px;
+    padding: 0px;
+    margin: 0px;
+    width: 900px;
+    height: 300px;
+  }
+</style>

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

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

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

@@ -18,6 +18,13 @@
     <div v-if="area=='d201'">
       <d201 :area="area" @handleDevClick="handleDevClick"></d201>
     </div>
+    <!-- AEU区域子组件 -->
+    <div v-if="area=='aeu1'">
+      <aeu1 :area="area" @handleDevClick="handleDevClick"></aeu1>
+    </div>
+    <div v-if="area=='aeu2'">
+      <aeu2 :area="area" @handleDevClick="handleDevClick"></aeu2>
+    </div>
     <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
@@ -44,6 +51,8 @@
   import Cracking3 from "@/views/aerial/cracking3/index.vue";
   import Office from "@/views/aerial/office/index.vue";
   import D201 from "@/views/aerial/d201/index.vue";
+  import Aeu1 from "@/views/aerial/aeu1/index.vue";
+  import Aeu2 from "@/views/aerial/aeu2/index.vue";
 
   export default {
     components: {
@@ -53,6 +62,8 @@
       Cracking3,
       Office,
       D201,
+      Aeu1,
+      Aeu2,
     },
     props: {},
     data() {

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

@@ -115,7 +115,7 @@
            id="pgu-box"
            @mouseover="handlePguMouseover"
            @mouseleave="handlePguMouseleave"
-           @click="handleAreaClick('PGU区域')">
+           @click="handleAreaClick('PGU区域', 'pgu')">
         <!--<div class="pgu-box-text"-->
              <!--id="pgu-box-text">P G U 区 域</div>-->
       </div>
@@ -124,13 +124,13 @@
            id="aeu-box-1"
            @mouseover="handleAeuMouseover"
            @mouseleave="handleAeuMouseleave"
-           @click="handleAreaClick('AEU区域')"></div>
+           @click="handleAreaClick('AEU区域', 'aeu1')"></div>
       <!--  AEU区域2 -->
       <div class="aeu-box-2"
            id="aeu-box-2"
            @mouseover="handleAeuMouseover"
            @mouseleave="handleAeuMouseleave"
-           @click="handleAreaClick('AEU区域')">
+           @click="handleAreaClick('AEU区域', 'aeu2')">
         <!--<div class="aeu-box-text"-->
              <!--id="aeu-box-text">A E U 区 域</div>-->
       </div>
@@ -565,16 +565,16 @@ export default {
   padding: 0px;
   margin: 0px;
   width: 190px;
-  height: 40px;
+  height: 120px;
 }
 
 .aeu-box-2 {
   position:absolute;
   top: 420px;
-  left: 790px;
+  left: 980px;
   padding: 0px;
   margin: 0px;
-  width: 300px;
+  width: 110px;
   height: 80px;
 }