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

<template>
  <div class="app-container">
    <div class="separation2-container">
      <el-tooltip class="item" effect="dark" content="热火炬罐" placement="top">
        <div class="separation-rhjg"
             id="separation-rhjg"
             @mouseover="handleMouseover1"
             @mouseleave="handleMouseleave1"
             @click="handleDevClick('热火炬罐')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="冷剂压缩机" placement="top">
        <div class="separation-ljysj"
             id="separation-ljysj"
             @mouseover="handleMouseover2"
             @mouseleave="handleMouseleave2"
             @click="handleDevClick('冷剂压缩机')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="VOC压缩机" placement="top">
        <div class="separation-voc"
             id="separation-voc"
             @mouseover="handleMouseover4"
             @mouseleave="handleMouseleave4"
             @click="handleDevClick('VOC压缩机')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="冷火炬罐" placement="top">
        <div class="separation-lhjg"
             id="separation-lhjg"
             @mouseover="handleMouseover5"
             @mouseleave="handleMouseleave5"
             @click="handleDevClick('冷火炬罐')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="脱甲烷塔" placement="top">
        <div class="separation-tjwt"
             id="separation-tjwt"
             @mouseover="handleMouseover6"
             @mouseleave="handleMouseleave6"
             @click="handleDevClick('脱甲烷塔')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="C-425塔" placement="top">
        <div class="separation-c425"
             id="separation-c425"
             @mouseover="handleMouseover7"
             @mouseleave="handleMouseleave7"
             @click="handleDevClick('C-425塔')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="冷箱" placement="top">
        <div class="separation-lx"
             id="separation-lx"
             @mouseover="handleMouseover8"
             @mouseleave="handleMouseleave8"
             @click="handleDevClick('冷箱')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="乙烯热泵压缩机" placement="top">
        <div class="separation-yxrbysj"
             id="separation-yxrbysj"
             @mouseover="handleMouseover9"
             @mouseleave="handleMouseleave9"
             @click="handleDevClick('乙烯热泵压缩机')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="预脱甲烷塔" placement="top">
        <div class="separation-ytjwt"
             id="separation-ytjwt"
             @mouseover="handleMouseover10"
             @mouseleave="handleMouseleave10"
             @click="handleDevClick('预脱甲烷塔')">
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="乙烯精馏塔" placement="top">
        <div class="separation-yxjlt"
             id="separation-yxjlt"
             @mouseover="handleMouseover11"
             @mouseleave="handleMouseleave11"
             @click="handleDevClick('乙烯精馏塔')">
        </div>
      </el-tooltip>
    </div>
   </div>
</template>

<script>
  export default {
    props: {
      area: {
        type: String,
        default: ''
      },
    },
    methods: {
      handleDevClick(devName) {
        this.$emit('handleDevClick', devName);
      },
      /* mouseover事件 */
      handleMouseover1() {
        let box = document.getElementById("separation-rhjg");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover2() {
        let box = document.getElementById("separation-ljysj");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover3() {
        let box = document.getElementById("separation-ljqdegzq");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover4() {
        let box = document.getElementById("separation-voc");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover5() {
        let box = document.getElementById("separation-lhjg");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover6() {
        let box = document.getElementById("separation-tjwt");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover7() {
        let box = document.getElementById("separation-c425");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover8() {
        let box = document.getElementById("separation-lx");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover9() {
        let box = document.getElementById("separation-yxrbysj");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover10() {
        let box = document.getElementById("separation-ytjwt");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      handleMouseover11() {
        let box = document.getElementById("separation-yxjlt");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      /* mouseleave事件 */
      handleMouseleave1() {
        let box = document.getElementById("separation-rhjg");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave2() {
        let box = document.getElementById("separation-ljysj");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave3() {
        let box = document.getElementById("separation-ljqdegzq");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave4() {
        let box = document.getElementById("separation-voc");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave5() {
        let box = document.getElementById("separation-lhjg");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave6() {
        let box = document.getElementById("separation-tjwt");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave7() {
        let box = document.getElementById("separation-c425");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave8() {
        let box = document.getElementById("separation-lx");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave9() {
        let box = document.getElementById("separation-yxrbysj");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave10() {
        let box = document.getElementById("separation-ytjwt");
        box.style.backgroundColor = "transparent";
      },
      handleMouseleave11() {
        let box = document.getElementById("separation-yxjlt");
        box.style.backgroundColor = "transparent";
      },
    }
  }
</script>

<style>
  .separation2-container {
    position: relative;
    width: 1200px;
    height: 500px;
    padding: 0px;
    margin: 0px auto;
    overflow: hidden;
    background: url('../../../assets/images/aerial/separation2.png') center/cover; /* 替换为实际背景图路径 */
    background-size: contain;
    background-repeat: no-repeat;
  }

  .separation-rhjg {
    position:absolute;
    top: 0px;
    left: 880px;
    padding: 0px;
    margin: 0px;
    width: 90px;
    height: 180px;
  }

  .separation-ljysj {
    position:absolute;
    top: 20px;
    left: 410px;
    padding: 0px;
    margin: 0px;
    width: 250px;
    height: 140px;
  }

  .separation-voc {
    position:absolute;
    top: 360px;
    left: 1060px;
    padding: 0px;
    margin: 0px;
    width: 60px;
    height: 60px;
  }

  .separation-lhjg {
    position:absolute;
    top: 250px;
    left: 790px;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 120px;
  }

  .separation-tjwt {
    position:absolute;
    top: 250px;
    left: 570px;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 150px;
  }

  .separation-c425 {
    position:absolute;
    top: 440px;
    left: 520px;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 50px;
  }

  .separation-lx {
    position:absolute;
    top: 270px;
    left: 520px;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 150px;
  }

  .separation-yxrbysj {
    position:absolute;
    top: 330px;
    left: 240px;
    padding: 0px;
    margin: 0px;
    width: 80px;
    height: 100px;
  }

  .separation-ytjwt {
    position:absolute;
    top: 270px;
    left: 250px;
    padding: 0px;
    margin: 0px;
    width: 40px;
    height: 50px;
  }

  .separation-yxjlt {
    position:absolute;
    top: 260px;
    left: 210px;
    padding: 0px;
    margin: 0px;
    width: 40px;
    height: 50px;
  }
</style>