鸟瞰图 - 办公楼页面、D201页面

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="d201-container">
+      <el-tooltip class="item" effect="dark" content="变电所" placement="top">
+        <div class="d201"
+             id="d201"
+             @mouseover="handleCrackingMouseover1"
+             @mouseleave="handleCrackingMouseleave1"
+             @click="handleDevClick('变电所')">
+        </div>
+      </el-tooltip>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      area: {
+        type: String,
+        default: ''
+      },
+    },
+    methods: {
+      handleDevClick(devName) {
+        this.$emit('handleDevClick', devName);
+      },
+      /* mouseover事件 */
+      handleCrackingMouseover1() {
+        let box = document.getElementById("d201");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleCrackingMouseleave1() {
+        let box = document.getElementById("d201");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .d201-container {
+    position: relative;
+    width: 1200px;
+    height: 400px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/d201.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .d201 {
+    position:absolute;
+    top: 0px;
+    left: 490px;
+    padding: 0px;
+    margin: 0px;
+    width: 240px;
+    height: 500px;
+  }
+</style>

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

@@ -10,6 +10,14 @@
     <div v-if="area=='cracking3'">
       <cracking3 :area="area" @handleDevClick="handleDevClick"></cracking3>
     </div>
+    <!-- 办公楼子组件 -->
+    <div v-if="area=='office'">
+      <office :area="area" @handleDevClick="handleDevClick"></office>
+    </div>
+    <!-- D201子组件 -->
+    <div v-if="area=='d201'">
+      <d201 :area="area" @handleDevClick="handleDevClick"></d201>
+    </div>
     <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
@@ -34,6 +42,8 @@
   import Cracking1 from "@/views/aerial/cracking1/index.vue";
   import Cracking2 from "@/views/aerial/cracking2/index.vue";
   import Cracking3 from "@/views/aerial/cracking3/index.vue";
+  import Office from "@/views/aerial/office/index.vue";
+  import D201 from "@/views/aerial/d201/index.vue";
 
   export default {
     components: {
@@ -41,6 +51,8 @@
       Cracking1,
       Cracking2,
       Cracking3,
+      Office,
+      D201,
     },
     props: {},
     data() {

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

@@ -67,7 +67,7 @@
            id="d201-box"
            @mouseover="handleD201Mouseover"
            @mouseleave="handleD201Mouseleave"
-           @click="handleAreaClick('D201')">
+           @click="handleAreaClick('D201', 'd201')">
         <!--<div class="d201-box-text"-->
              <!--id="d201-box-text">D 2 0 1</div>-->
       </div>
@@ -106,7 +106,7 @@
            id="office-box"
            @mouseover="handleOfficeMouseover"
            @mouseleave="handleOfficeMouseleave"
-           @click="handleAreaClick('办公楼')">
+           @click="handleAreaClick('办公楼', 'office')">
         <!--<div class="office-box-text"-->
              <!--id="office-box-text">办 公 楼</div>-->
       </div>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="office-container">
+      <el-tooltip class="item" effect="dark" content="D301办公楼" placement="top">
+        <div class="office"
+             id="office"
+             @mouseover="handleCrackingMouseover1"
+             @mouseleave="handleCrackingMouseleave1"
+             @click="handleDevClick('D301办公楼')">
+        </div>
+      </el-tooltip>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      area: {
+        type: String,
+        default: ''
+      },
+    },
+    methods: {
+      handleDevClick(devName) {
+        this.$emit('handleDevClick', devName);
+      },
+      /* mouseover事件 */
+      handleCrackingMouseover1() {
+        let box = document.getElementById("office");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      /* mouseleave事件 */
+      handleCrackingMouseleave1() {
+        let box = document.getElementById("office");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .office-container {
+    position: relative;
+    width: 1200px;
+    height: 400px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/office.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .office {
+    position:absolute;
+    top: 80px;
+    left: 80px;
+    padding: 0px;
+    margin: 0px;
+    width: 1040px;
+    height: 230px;
+  }
+</style>