鸟瞰图 - 装置平面图各区域划分

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

@@ -1,24 +1,136 @@
 <template>
   <div class="app-container">
-    <div class="flow-container">
-      <!-- 流程模块 -->
-      <div
-        v-for="(block, index) in blocks"
-        :key="index"
-        class="process-block"
-        :style="blockStyle(block)"
-        @click="openDialog(block)"
-      >
-        {{ block.label }}
+    <div class="aerial-container">
+      <!-- 裂解区域1 -->
+      <div class="cracking-box-1"
+           id="cracking-box-1"
+           @mouseover="handleCrackingMouseover"
+           @mouseleave="handleCrackingMouseleave"
+           @click="handleAreaClick('裂解区域')">
+        <div class="cracking-box-text-1"
+              id="cracking-box-text-1">裂 解 区 域</div>
       </div>
-
-      <!-- 详情弹窗 -->
-      <el-dialog
-        :title="currentBlock.label + ' 详情'"
-        :visible.sync="dialogVisible"
-        width="30%"
-      >
-      </el-dialog>
+      <!-- 裂解区域2 -->
+      <div class="cracking-box-2"
+           id="cracking-box-2"
+           @mouseover="handleCrackingMouseover"
+           @mouseleave="handleCrackingMouseleave"
+           @click="handleAreaClick('裂解区域')">
+        <div class="cracking-box-text-2"
+             id="cracking-box-text-2">裂 解 区 域</div>
+      </div>
+      <!--  压缩区域1 -->
+      <div class="compression-box-1"
+           id="compression-box-1"
+           @mouseover="handleCompressionMouseover"
+           @mouseleave="handleCompressionMouseleave"
+           @click="handleAreaClick('压缩区域')">
+        <div class="compression-box-text-1"
+             id="compression-box-text-1">压 缩 区 域</div>
+      </div>
+      <!--  压缩区域2 -->
+      <div class="compression-box-2"
+           id="compression-box-2"
+           @mouseover="handleCompressionMouseover"
+           @mouseleave="handleCompressionMouseleave"
+           @click="handleAreaClick('压缩区域')"></div>
+      <!--  压缩区域3 -->
+      <div class="compression-box-3"
+           id="compression-box-3"
+           @mouseover="handleCompressionMouseover"
+           @mouseleave="handleCompressionMouseleave"
+           @click="handleAreaClick('压缩区域')">
+        <div class="compression-box-text-3"
+             id="compression-box-text-3">压 缩 区 域</div>
+      </div>
+      <!--  压缩区域4 -->
+      <div class="compression-box-4"
+           id="compression-box-4"
+           @mouseover="handleCompressionMouseover"
+           @mouseleave="handleCompressionMouseleave"
+           @click="handleAreaClick('压缩区域')"></div>
+      <!--  压缩区域5 -->
+      <div class="compression-box-5"
+           id="compression-box-5"
+           @mouseover="handleCompressionMouseover"
+           @mouseleave="handleCompressionMouseleave"
+           @click="handleAreaClick('压缩区域')"></div>
+      <!--  D201区域 -->
+      <div class="d201-box"
+           id="d201-box"
+           @mouseover="handleD201Mouseover"
+           @mouseleave="handleD201Mouseleave"
+           @click="handleAreaClick('D201')">
+        <div class="d201-box-text"
+             id="d201-box-text">D 2 0 1</div>
+      </div>
+      <!--  分离区域1 -->
+      <div class="separation-box-1"
+           id="separation-box-1"
+           @mouseover="handleSeparationMouseover"
+           @mouseleave="handleSeparationMouseleave"
+           @click="handleAreaClick('分离区域')">
+        <div class="separation-box-text-1"
+             id="separation-box-text-1">分 离 区 域</div>
+      </div>
+      <!--  分离区域2 -->
+      <div class="separation-box-2"
+           id="separation-box-2"
+           @mouseover="handleSeparationMouseover"
+           @mouseleave="handleSeparationMouseleave"
+           @click="handleAreaClick('分离区域')"></div>
+      <!--  分离区域3 -->
+      <div class="separation-box-3"
+           id="separation-box-3"
+           @mouseover="handleSeparationMouseover"
+           @mouseleave="handleSeparationMouseleave"
+           @click="handleAreaClick('分离区域')">
+        <div class="separation-box-text-3"
+             id="separation-box-text-3">分 离 区 域</div>
+      </div>
+      <!--  分离区域4 -->
+      <div class="separation-box-4"
+           id="separation-box-4"
+           @mouseover="handleSeparationMouseover"
+           @mouseleave="handleSeparationMouseleave"
+           @click="handleAreaClick('分离区域')"></div>
+      <!--  办公楼区域 -->
+      <div class="office-box"
+           id="office-box"
+           @mouseover="handleOfficeMouseover"
+           @mouseleave="handleOfficeMouseleave"
+           @click="handleAreaClick('办公楼')">
+        <div class="office-box-text"
+             id="office-box-text">办 公 楼</div>
+      </div>
+      <!--  PGU区域 -->
+      <div class="pgu-box"
+           id="pgu-box"
+           @mouseover="handlePguMouseover"
+           @mouseleave="handlePguMouseleave"
+           @click="handleAreaClick('PGU区域')">
+        <div class="pgu-box-text"
+             id="pgu-box-text">P G U 区 域</div>
+      </div>
+      <!--  AEU区域1 -->
+      <div class="aeu-box-1"
+           id="aeu-box-1"
+           @mouseover="handleAeuMouseover"
+           @mouseleave="handleAeuMouseleave"
+           @click="handleAreaClick('AEU区域')"></div>
+      <!--  AEU区域2 -->
+      <div class="aeu-box-2"
+           id="aeu-box-2"
+           @mouseover="handleAeuMouseover"
+           @mouseleave="handleAeuMouseleave"
+           @click="handleAreaClick('AEU区域')">
+        <div class="aeu-box-text"
+             id="aeu-box-text">A E U 区 域</div>
+      </div>
+      <!-- 阴影区域（左下角） -->
+      <div class="shadow-box-bottom-left"></div>
+      <!-- 阴影区域（右下角） -->
+      <div class="shadow-box-bottom-right"></div>
     </div>
   </div>
 </template>
@@ -26,55 +138,135 @@
 <script>
 export default {
   data() {
-    return {
-      dialogVisible: false,
-      currentBlock: {},
-      blocks: [
-        {
-          label: '裂解',
-          color: '#4CAF50',  // 绿色
-          position: { x: 50, y: 40 },
-        },
-        {
-          label: '压缩',
-          color: '#FFEB3B',  // 黄色
-          position: { x: 250, y: 120 },
-        },
-        {
-          label: 'PGU',
-          color: '#E91E63',  // 粉色
-          position: { x: 450, y: 200 },
-        },
-        {
-          label: 'AEU',
-          color: '#FF9800',  // 橙色
-          position: { x: 650, y: 280 },
-        },
-        {
-          label: '分离',
-          color: '#2196F3',  // 蓝色
-          position: { x: 350, y: 400 },
-        },
-        {
-          label: '压缩',  // 第二个压缩模块
-          color: '#FFEB3B',
-          position: { x: 150, y: 400 },
-        }
-      ]
-    }
+    return {}
   },
   methods: {
-    blockStyle(block) {
-      return {
-        backgroundColor: block.color,
-        left: block.position.x + 'px',
-        top: block.position.y + 'px'
-      }
+    /* 裂解区域mouseover事件 */
+    handleCrackingMouseover() {
+      let box1 = document.getElementById("cracking-box-1");
+      let box2 = document.getElementById("cracking-box-2");
+      box1.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
+      box2.style.backgroundColor = "rgba(64,158,255,0.3)";
+      box1.style.cursor = "pointer";
+      box2.style.cursor = "pointer";
+    },
+    /* 裂解区域mouseleave事件 */
+    handleCrackingMouseleave() {
+      let box1 = document.getElementById("cracking-box-1");
+      let box2 = document.getElementById("cracking-box-2");
+      box1.style.backgroundColor = "transparent";
+      box2.style.backgroundColor = "transparent";
+    },
+    /* 压缩区域mouseover事件 */
+    handleCompressionMouseover() {
+      let box1 = document.getElementById("compression-box-1");
+      let box2 = document.getElementById("compression-box-2");
+      let box3 = document.getElementById("compression-box-3");
+      let box4 = document.getElementById("compression-box-4");
+      let box5 = document.getElementById("compression-box-5");
+      box1.style.backgroundColor = "rgba(103,194,58,0.3)";//绿色
+      box2.style.backgroundColor = "rgba(103,194,58,0.3)";
+      box3.style.backgroundColor = "rgba(103,194,58,0.3)";
+      box4.style.backgroundColor = "rgba(103,194,58,0.3)";
+      box5.style.backgroundColor = "rgba(103,194,58,0.3)";
+      box1.style.cursor = "pointer";
+      box2.style.cursor = "pointer";
+      box3.style.cursor = "pointer";
+      box4.style.cursor = "pointer";
+      box5.style.cursor = "pointer";
+    },
+    /* 压缩区域mouseleave事件 */
+    handleCompressionMouseleave() {
+      let box1 = document.getElementById("compression-box-1");
+      let box2 = document.getElementById("compression-box-2");
+      let box3 = document.getElementById("compression-box-3");
+      let box4 = document.getElementById("compression-box-4");
+      let box5 = document.getElementById("compression-box-5");
+      box1.style.backgroundColor = "transparent";
+      box2.style.backgroundColor = "transparent";
+      box3.style.backgroundColor = "transparent";
+      box4.style.backgroundColor = "transparent";
+      box5.style.backgroundColor = "transparent";
+    },
+    /* D201区域mouseover事件 */
+    handleD201Mouseover() {
+      let box = document.getElementById("d201-box");
+      box.style.backgroundColor = "rgba(72,209,204,0.3)";//蓝绿色
+      box.style.cursor = "pointer";
+    },
+    /* D201区域mouseleave事件 */
+    handleD201Mouseleave() {
+      let box = document.getElementById("d201-box");
+      box.style.backgroundColor = "transparent";
+    },
+    /* 分离区域mouseover事件 */
+    handleSeparationMouseover() {
+      let box1 = document.getElementById("separation-box-1");
+      let box2 = document.getElementById("separation-box-2");
+      let box3 = document.getElementById("separation-box-3");
+      let box4 = document.getElementById("separation-box-4");
+      box1.style.backgroundColor = "rgba(218,112,214,0.3)";//紫色
+      box2.style.backgroundColor = "rgba(218,112,214,0.3)";
+      box3.style.backgroundColor = "rgba(218,112,214,0.3)";
+      box4.style.backgroundColor = "rgba(218,112,214,0.3)";
+      box1.style.cursor = "pointer";
+      box2.style.cursor = "pointer";
+      box3.style.cursor = "pointer";
+      box4.style.cursor = "pointer";
+    },
+    /* 分离区域mouseleave事件 */
+    handleSeparationMouseleave() {
+      let box1 = document.getElementById("separation-box-1");
+      let box2 = document.getElementById("separation-box-2");
+      let box3 = document.getElementById("separation-box-3");
+      let box4 = document.getElementById("separation-box-4");
+      box1.style.backgroundColor = "transparent";
+      box2.style.backgroundColor = "transparent";
+      box3.style.backgroundColor = "transparent";
+      box4.style.backgroundColor = "transparent";
+    },
+    /* 办公楼区域mouseover事件 */
+    handleOfficeMouseover() {
+      let box = document.getElementById("office-box");
+      box.style.backgroundColor = "rgba(255,105,180,0.3)";//粉色
+      box.style.cursor = "pointer";
+    },
+    /* 办公楼区域mouseleave事件 */
+    handleOfficeMouseleave() {
+      let box = document.getElementById("office-box");
+      box.style.backgroundColor = "transparent";
+    },
+    /* PGU区域mouseover事件 */
+    handlePguMouseover() {
+      let box = document.getElementById("pgu-box");
+      box.style.backgroundColor = "rgba(255,255,0,0.3)";//黄色
+      box.style.cursor = "pointer";
+    },
+    /* PGU区域mouseleave事件 */
+    handlePguMouseleave() {
+      let box = document.getElementById("pgu-box");
+      box.style.backgroundColor = "transparent";
+    },
+    /* AEU区域mouseover事件 */
+    handleAeuMouseover() {
+      let box1 = document.getElementById("aeu-box-1");
+      let box2 = document.getElementById("aeu-box-2");
+      box1.style.backgroundColor = "rgba(255,160,0,0.3)";//橙色
+      box2.style.backgroundColor = "rgba(255,160,0,0.3)";
+      box1.style.cursor = "pointer";
+      box2.style.cursor = "pointer";
+    },
+    /* AEU区域mouseleave事件 */
+    handleAeuMouseleave() {
+      let box1 = document.getElementById("aeu-box-1");
+      let box2 = document.getElementById("aeu-box-2");
+      box1.style.backgroundColor = "transparent";
+      box2.style.backgroundColor = "transparent";
+    },
+    /* 区域click事件 */
+    handleAreaClick(text) {
+      console.log(text);
     },
-    openDialog(block) {
-      this.currentBlock = block
-      this.dialogVisible = true
-    }
   }
 }
 </script>
@@ -84,39 +276,317 @@ export default {
   padding: 20px;
 }
 
-.flow-container {
+.aerial-container {
   position: relative;
-  width: 100%;
-  height: 1000px;
-  margin: 0 auto;
-  border-radius: 8px;
+  width: 1200px;
+  height: 800px;
+  padding: 0px;
+  margin: 0px auto;
   overflow: hidden;
-  background:
-    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), /* 白色遮罩层 */
-    url('../../../assets/images/20250324083845.png') center/cover; /* 替换为实际背景图路径 */
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-}
-.process-block {
-  position: absolute;
-  width: 160px;
-  height: 100px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-  cursor: pointer;
-  transition: transform 0.3s;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-}
-
-.process-block:hover {
-  transform: scale(1.05);
-}
-
-.dialog-content {
-  padding: 20px;
-  line-height: 2em;
+  background: url('../../../assets/images/aerial.jpg') center/cover; /* 替换为实际背景图路径 */
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.cracking-box-1 {
+  position:absolute;
+  top: 50px;
+  left: 70px;
+  padding: 0px;
+  margin: 0px;
+  width: 640px;
+  height: 150px;
+}
+
+.cracking-box-text-1{
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 640px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  font-size: 28px;
+  color: #fff;
+}
+
+.cracking-box-2 {
+  position:absolute;
+  top: 200px;
+  left: 70px;
+  padding: 0px;
+  margin: 0px;
+  width: 230px;
+  height: 170px;
+}
+
+.cracking-box-text-2 {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 230px;
+  height: 170px;
+  line-height: 170px;
+  text-align: center;
+  font-size: 28px;
+  color: #fff;
+}
+
+.compression-box-1 {
+  position:absolute;
+  top: 240px;
+  left: 330px;
+  padding: 0px;
+  margin: 0px;
+  width: 270px;
+  height: 130px;
+}
+
+.compression-box-text-1 {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 270px;
+  height: 130px;
+  line-height: 130px;
+  text-align: center;
+  font-size: 28px;
+  color: #fff;
+}
+
+.compression-box-2 {
+  position:absolute;
+  top: 530px;
+  left: 720px;
+  padding: 0px;
+  margin: 0px;
+  width: 80px;
+  height: 50px;
+}
+
+.compression-box-3 {
+  position:absolute;
+  top: 600px;
+  left: 530px;
+  padding: 0px;
+  margin: 0px;
+  width: 230px;
+  height: 160px;
+}
+
+.compression-box-text-3 {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 230px;
+  height: 160px;
+  line-height: 160px;
+  text-align: center;
+  font-size: 28px;
+  color: #fff;
+}
+
+.compression-box-4 {
+  position:absolute;
+  top: 380px;
+  left: 250px;
+  padding: 0px;
+  margin: 0px;
+  width: 50px;
+  height: 80px;
+}
+
+.compression-box-5 {
+  position:absolute;
+  top: 400px;
+  left: 340px;
+  padding: 0px;
+  margin: 0px;
+  width: 120px;
+  height: 60px;
+}
+
+.d201-box {
+  position:absolute;
+  top: 220px;
+  left: 630px;
+  padding: 0px;
+  margin: 0px;
+  width: 80px;
+  height: 150px;
+}
+
+.d201-box-text {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 80px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  font-weight: bold;
+  color: #fff;
+}
+
+.separation-box-1 {
+  position:absolute;
+  top: 400px;
+  left: 70px;
+  padding: 0px;
+  margin: 0px;
+  width: 180px;
+  height: 140px;
+}
+
+.separation-box-text-1 {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 180px;
+  height: 140px;
+  line-height: 140px;
+  font-size: 28px;
+  text-align: center;
+  color: #fff;
+}
+
+.separation-box-2 {
+  position:absolute;
+  top: 380px;
+  left: 450px;
+  padding: 0px;
+  margin: 0px;
+  width: 250px;
+  height: 80px;
+}
+
+.separation-box-3 {
+  position:absolute;
+  top: 460px;
+  left: 250px;
+  padding: 0px;
+  margin: 0px;
+  width: 450px;
+  height: 80px;
+}
+
+.separation-box-text-3 {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 450px;
+  height: 80px;
+  line-height: 80px;
+  font-size: 28px;
+  text-align: center;
+  color: #fff;
+}
+
+.separation-box-4 {
+  position:absolute;
+  top: 540px;
+  left: 360px;
+  padding: 0px;
+  margin: 0px;
+  width: 170px;
+  height: 50px;
+}
+
+.office-box {
+  position:absolute;
+  top: 70px;
+  left: 800px;
+  padding: 0px;
+  margin: 0px;
+  width: 360px;
+  height: 140px;
+}
+
+.office-box-text {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 360px;
+  height: 140px;
+  line-height: 140px;
+  font-size: 28px;
+  text-align: center;
+  color: #fff;
+}
+
+.pgu-box {
+  position:absolute;
+  top: 220px;
+  left: 790px;
+  padding: 0px;
+  margin: 0px;
+  width: 270px;
+  height: 140px;
+}
+
+.pgu-box-text {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 270px;
+  height: 140px;
+  line-height: 140px;
+  font-size: 28px;
+  text-align: center;
+  color: #fff;
+}
+
+.aeu-box-1 {
+  position:absolute;
+  top: 380px;
+  left: 790px;
+  padding: 0px;
+  margin: 0px;
+  width: 190px;
+  height: 40px;
+}
+
+.aeu-box-2 {
+  position:absolute;
+  top: 420px;
+  left: 790px;
+  padding: 0px;
+  margin: 0px;
+  width: 300px;
+  height: 80px;
+}
+
+.aeu-box-text {
+  position:absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 300px;
+  height: 80px;
+  line-height: 80px;
+  font-size: 28px;
+  text-align: center;
+  color: #fff;
+}
+
+.shadow-box-bottom-left{
+  position:absolute;
+  top: 590px;
+  left: 0px;
+  padding: 0px;
+  margin: 0px;
+  width: 520px;
+  height: 210px;
+  background-color: rgba(0,0,0,0.5);
+}
+
+.shadow-box-bottom-right{
+  position:absolute;
+  top: 540px;
+  left: 800px;
+  padding: 0px;
+  margin: 0px;
+  width: 520px;
+  height: 260px;
+  background-color: rgba(0,0,0,0.5);
 }
 </style>