鸟瞰图 - 裂解区域页面1、页面2、页面3

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <div class="cracking1-container">
+      <el-tooltip class="item" effect="dark" content="224u型裂解炉" placement="top">
+        <div class="cracking-224u"
+             id="cracking-224u"
+             @mouseover="handleCrackingMouseover1"
+             @mouseleave="handleCrackingMouseleave1"
+             @click="handleDevClick('224u型裂解炉')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="12m裂解炉" placement="top">
+        <div class="cracking-12m"
+             id="cracking-12m"
+             @mouseover="handleCrackingMouseover2"
+             @mouseleave="handleCrackingMouseleave2"
+             @click="handleDevClick('12m裂解炉')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="80u裂解炉" placement="top">
+        <div class="cracking-80u"
+             id="cracking-80u"
+             @mouseover="handleCrackingMouseover3"
+             @mouseleave="handleCrackingMouseleave3"
+             @click="handleDevClick('80u裂解炉')">
+        </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("cracking-224u");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      handleCrackingMouseover2() {
+        let box = document.getElementById("cracking-12m");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      handleCrackingMouseover3() {
+        let box = document.getElementById("cracking-80u");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      /* 裂解区域mouseleave事件 */
+      handleCrackingMouseleave1() {
+        let box = document.getElementById("cracking-224u");
+        box.style.backgroundColor = "transparent";
+      },
+      handleCrackingMouseleave2() {
+        let box = document.getElementById("cracking-12m");
+        box.style.backgroundColor = "transparent";
+      },
+      handleCrackingMouseleave3() {
+        let box = document.getElementById("cracking-80u");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .cracking1-container {
+    position: relative;
+    width: 1200px;
+    height: 300px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/cracking1.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .cracking-224u {
+    position:absolute;
+    top: 20px;
+    left: 20px;
+    padding: 0px;
+    margin: 0px;
+    width: 100px;
+    height: 200px;
+  }
+
+  .cracking-12m {
+    position:absolute;
+    top: 100px;
+    left: 130px;
+    padding: 0px;
+    margin: 0px;
+    width: 120px;
+    height: 120px;
+  }
+
+  .cracking-80u {
+    position:absolute;
+    top: 100px;
+    left: 250px;
+    padding: 0px;
+    margin: 0px;
+    width: 930px;
+    height: 130px;
+  }
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <div class="app-container">
+    <div class="cracking2-container">
+      <el-tooltip class="item" effect="dark" content="DSG No.1" placement="top">
+        <div class="cracking-dsg1"
+             id="cracking-dsg1"
+             @mouseover="handleCrackingMouseover1"
+             @mouseleave="handleCrackingMouseleave1"
+             @click="handleDevClick('DSG No.1')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="DSG No.2" placement="top">
+        <div class="cracking-dsg2"
+             id="cracking-dsg2"
+             @mouseover="handleCrackingMouseover2"
+             @mouseleave="handleCrackingMouseleave2"
+             @click="handleDevClick('DSG No.2')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="急冷油塔" placement="top">
+        <div class="cracking-jlyt"
+             id="cracking-jlyt"
+             @mouseover="handleCrackingMouseover3"
+             @mouseleave="handleCrackingMouseleave3"
+             @click="handleDevClick('急冷油塔')">
+        </div>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="急冷大塔" placement="top">
+        <div class="cracking-jldt"
+             id="cracking-jldt"
+             @mouseover="handleCrackingMouseover4"
+             @mouseleave="handleCrackingMouseleave4"
+             @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("cracking-dsg1");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      handleCrackingMouseover2() {
+        let box = document.getElementById("cracking-dsg2");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      handleCrackingMouseover3() {
+        let box = document.getElementById("cracking-jlyt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      handleCrackingMouseover4() {
+        let box = document.getElementById("cracking-jldt");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      /* 裂解区域mouseleave事件 */
+      handleCrackingMouseleave1() {
+        let box = document.getElementById("cracking-dsg1");
+        box.style.backgroundColor = "transparent";
+      },
+      handleCrackingMouseleave2() {
+        let box = document.getElementById("cracking-dsg2");
+        box.style.backgroundColor = "transparent";
+      },
+      handleCrackingMouseleave3() {
+        let box = document.getElementById("cracking-jlyt");
+        box.style.backgroundColor = "transparent";
+      },
+      handleCrackingMouseleave4() {
+        let box = document.getElementById("cracking-jldt");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .cracking2-container {
+    position: relative;
+    width: 1200px;
+    height: 600px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/cracking2.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .cracking-dsg1 {
+    position:absolute;
+    top: 120px;
+    left: 270px;
+    padding: 0px;
+    margin: 0px;
+    width: 350px;
+    height: 150px;
+  }
+
+  .cracking-dsg2 {
+    position:absolute;
+    top: 10px;
+    left: 130px;
+    padding: 0px;
+    margin: 0px;
+    width: 130px;
+    height: 250px;
+  }
+
+  .cracking-jlyt {
+    position:absolute;
+    top: 10px;
+    left: 800px;
+    padding: 0px;
+    margin: 0px;
+    width: 300px;
+    height: 200px;
+  }
+
+  .cracking-jldt {
+    position:absolute;
+    top:400px;
+    left: 800px;
+    padding: 0px;
+    margin: 0px;
+    width: 300px;
+    height: 180px;
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="cracking3-container">
+      <el-tooltip class="item" effect="dark" content="开工锅炉" placement="top">
+        <div class="cracking-kggl"
+             id="cracking-kggl"
+             @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("cracking-kggl");
+        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+        box.style.cursor = "pointer";
+      },
+      /* 裂解区域mouseleave事件 */
+      handleCrackingMouseleave1() {
+        let box = document.getElementById("cracking-kggl");
+        box.style.backgroundColor = "transparent";
+      },
+    }
+  }
+</script>
+
+<style>
+  .cracking3-container {
+    position: relative;
+    width: 1200px;
+    height: 800px;
+    padding: 0px;
+    margin: 0px auto;
+    overflow: hidden;
+    background: url('../../../assets/images/aerial/cracking3.png') center/cover; /* 替换为实际背景图路径 */
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .cracking-kggl {
+    position:absolute;
+    top: 200px;
+    left: 200px;
+    padding: 0px;
+    margin: 0px;
+    width: 800px;
+    height: 400px;
+  }
+</style>

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

@@ -1,11 +1,16 @@
 <template>
   <div class="app-container">
-    {{areaName}}<br/>
-
-    <el-button type="text" @click="handleDevClick('设备1')">设备1</el-button>
-    <el-button type="text" @click="handleDevClick('设备2')">设备2</el-button>
-    <el-button type="text" @click="handleDevClick('设备3')">设备3</el-button>
-
+    <!-- 裂解区域子组件 -->
+    <div v-if="area=='cracking1'">
+      <cracking1 :area="area" @handleDevClick="handleDevClick"></cracking1>
+    </div>
+    <div v-if="area=='cracking2'">
+      <cracking2 :area="area" @handleDevClick="handleDevClick"></cracking2>
+    </div>
+    <div v-if="area=='cracking3'">
+      <cracking3 :area="area" @handleDevClick="handleDevClick"></cracking3>
+    </div>
+    <!-- 视频播放组件 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
@@ -26,14 +31,22 @@
 <script>
   import { getDevVideoByAreaAndDev } from "@/api/aerial/devVideo";
   import { videoPlayer } from "vue-video-player";
+  import Cracking1 from "@/views/aerial/cracking1/index.vue";
+  import Cracking2 from "@/views/aerial/cracking2/index.vue";
+  import Cracking3 from "@/views/aerial/cracking3/index.vue";
 
   export default {
-    name: "",
-    components: {videoPlayer},
+    components: {
+      videoPlayer,
+      Cracking1,
+      Cracking2,
+      Cracking3,
+    },
     props: {},
     data() {
       return {
         areaName: '',
+        area: '',
         dialogVisible: false,
         dialogTitle: '',
         playerOptions: {
@@ -66,6 +79,7 @@
     },
     created() {
       this.areaName = this.$route.query.areaName;
+      this.area = this.$route.query.area;
     },
     methods: {
       handleDevClick(devName) {

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

@@ -6,16 +6,23 @@
            id="cracking-box-1"
            @mouseover="handleCrackingMouseover"
            @mouseleave="handleCrackingMouseleave"
-           @click="handleAreaClick('裂解区域')">
+           @click="handleAreaClick('裂解区域', 'cracking1')">
         <!--<div class="cracking-box-text-1"-->
               <!--id="cracking-box-text-1">裂 解 区 域</div>-->
       </div>
+      <!-- 裂解区域3 -->
+      <div class="cracking-box-3"
+           id="cracking-box-3"
+           @mouseover="handleCrackingMouseover"
+           @mouseleave="handleCrackingMouseleave"
+           @click="handleAreaClick('裂解区域', 'cracking3')">
+      </div>
       <!-- 裂解区域2 -->
       <div class="cracking-box-2"
            id="cracking-box-2"
            @mouseover="handleCrackingMouseover"
            @mouseleave="handleCrackingMouseleave"
-           @click="handleAreaClick('裂解区域')">
+           @click="handleAreaClick('裂解区域', 'cracking2')">
         <!--<div class="cracking-box-text-2"-->
              <!--id="cracking-box-text-2">裂 解 区 域</div>-->
       </div>
@@ -145,17 +152,22 @@ export default {
     handleCrackingMouseover() {
       let box1 = document.getElementById("cracking-box-1");
       let box2 = document.getElementById("cracking-box-2");
+      let box3 = document.getElementById("cracking-box-3");
       box1.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
       box2.style.backgroundColor = "rgba(64,158,255,0.3)";
+      box3.style.backgroundColor = "rgba(64,158,255,0.3)";
       box1.style.cursor = "pointer";
       box2.style.cursor = "pointer";
+      box3.style.cursor = "pointer";
     },
     /* 裂解区域mouseleave事件 */
     handleCrackingMouseleave() {
       let box1 = document.getElementById("cracking-box-1");
       let box2 = document.getElementById("cracking-box-2");
+      let box3 = document.getElementById("cracking-box-3");
       box1.style.backgroundColor = "transparent";
       box2.style.backgroundColor = "transparent";
+      box3.style.backgroundColor = "transparent";
     },
     /* 压缩区域mouseover事件 */
     handleCompressionMouseover() {
@@ -264,8 +276,8 @@ export default {
       box2.style.backgroundColor = "transparent";
     },
     /* 区域click事件 */
-    handleAreaClick(text) {
-      this.$router.push({ path: '/aerial/detail', query: { areaName: text }});
+    handleAreaClick(areaName, area) {
+      this.$router.push({ path: '/aerial/detail', query: { areaName: areaName, area: area }});
     },
   }
 }
@@ -294,8 +306,18 @@ export default {
   left: 70px;
   padding: 0px;
   margin: 0px;
-  width: 640px;
-  height: 150px;
+  width: 480px;
+  height: 130px;
+}
+
+.cracking-box-3 {
+  position:absolute;
+  top: 50px;
+  left: 570px;
+  padding: 0px;
+  margin: 0px;
+  width: 140px;
+  height: 130px;
 }
 
 .cracking-box-text-1{
@@ -312,12 +334,12 @@ export default {
 
 .cracking-box-2 {
   position:absolute;
-  top: 200px;
+  top: 210px;
   left: 70px;
   padding: 0px;
   margin: 0px;
   width: 230px;
-  height: 170px;
+  height: 160px;
 }
 
 .cracking-box-text-2 {