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

<template>
  <div class="app-container">
    <div class="aerial-container">
      <!-- 裂解区域1 -->
      <div class="cracking-box-1"
           id="cracking-box-1"
           @mouseover="handleCrackingMouseover"
           @mouseleave="handleCrackingMouseleave"
           @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('裂解区域', 'cracking2')">
        <!--<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>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    /* 裂解区域mouseover事件 */
    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() {
      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(areaName, area) {
      this.$router.push({ path: '/aerial/detail', query: { areaName: areaName, area: area }});
    },
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.aerial-container {
  position: relative;
  width: 1200px;
  height: 800px;
  padding: 0px;
  margin: 0px auto;
  overflow: hidden;
  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: 480px;
  height: 130px;
}

.cracking-box-3 {
  position:absolute;
  top: 50px;
  left: 570px;
  padding: 0px;
  margin: 0px;
  width: 140px;
  height: 130px;
}

.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: 210px;
  left: 70px;
  padding: 0px;
  margin: 0px;
  width: 230px;
  height: 160px;
}

.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>