vent-template/src/views/vent/home/clique/components/icon-light.vue

<template>
  <div class="icon-light">
    <template v-for="(item, index) in pointList" :key="index">
      <div class="icon-point" @click="openModal(item.code, item.label, item.leftV, item.topV)" :style="{ left: item.leftV, top: item.topV }">
        <img :src="item.imgSrc" alt="" />
        <span :class="{ 'icon-text-c': item.align == 'center', 'icon-text-l': item.align == 'left', 'icon-text-r': item.align == 'right' }">{{
          item.label
        }}</span>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineEmits, inject } from 'vue';
  import { getAssetURL } from '/@/utils/ui';

  const emit = defineEmits(['showDetail']);
  const globalConfig = inject('globalConfig');

  const warningLevel1 = getAssetURL('company/home/point1.png'); // 低风险
  const warningLevel2 = getAssetURL('company/home/point2.png'); // 中风险
  const warningLevel3 = getAssetURL('company/home/point3.png'); // 高风险
  const warningLevel4 = getAssetURL('company/home/point4.png'); // 报警
  let pointList = ref<any[]>(
    globalConfig.History_Type == 'vent'
      ? [
          { code: 'liuTa', imgSrc: warningLevel1, label: 'lt', leftV: '327px', topV: '40px', textColor: '#fff', align: 'left' },
          { code: 'cunCaoErTa', imgSrc: warningLevel1, label: 'cce', leftV: '291px', topV: '69px', textColor: '#fff', align: 'left' },
          { code: 'buErTaiTa', imgSrc: warningLevel1, label: 'bet', leftV: '286px', topV: '97px', textColor: 'rgba(255, 231, 83,.9)', align: 'left' },
          { code: 'wuLunTa', imgSrc: warningLevel1, label: 'wlml', leftV: '327px', topV: '115px', textColor: '#fff', align: 'left' },
          { code: 'cunCaoTa', imgSrc: warningLevel1, label: 'cc', leftV: '346px', topV: '132px', textColor: 'rgba(255, 231, 83,.9)', align: 'left' },
          { code: 'shiKanTa', imgSrc: warningLevel1, label: 'skt', leftV: '373px', topV: '149px', textColor: '#fff', align: 'left' },
          { code: 'buLieTa', imgSrc: warningLevel1, label: 'blt', leftV: '408px', topV: '184px', textColor: 'rgba(255, 231, 83,.9)', align: 'left' },
          { code: 'haLaGouTa', imgSrc: warningLevel1, label: 'hlg', leftV: '445px', topV: '214px', textColor: '#fff', align: 'left' },
          {
            code: 'shangWanTa',
            imgSrc: warningLevel1,
            label: 'sw',
            leftV: '439px',
            topV: '244px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'left',
          },
          { code: 'huoJiTuTa', imgSrc: warningLevel1, label: 'hjt', leftV: '398px', topV: '265px', textColor: '#fff', align: 'left' },
          { code: 'daLiuTa', imgSrc: warningLevel1, label: 'dlt', leftV: '492px', topV: '260px', textColor: '#fff', align: 'left' },
          { code: 'jinJieTa', imgSrc: warningLevel1, label: 'jj', leftV: '565px', topV: '413px', textColor: 'rgba(255, 231, 83,.9)', align: 'left' },
          { code: 'yuJiaTa', imgSrc: warningLevel1, label: 'yjl', leftV: '669px', topV: '308px', textColor: '#fff', align: 'left' },
          { code: 'baoDeTa', imgSrc: warningLevel1, label: 'bd', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)', align: 'left' },
        ]
      : [
          { code: 'liuTa', imgSrc: warningLevel4, label: '柳塔矿', leftV: '375px', topV: '135px', textColor: '#fff', align: 'right' },
          { code: 'cunCaoErTa', imgSrc: warningLevel1, label: '寸草塔二矿', leftV: '269px', topV: '116px', textColor: '#fff', align: 'left' },
          {
            code: 'buErTaiTa',
            imgSrc: warningLevel1,
            label: '布尔台矿',
            leftV: '329px',
            topV: '177px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'left',
          },
          { code: 'wuLunTa', imgSrc: warningLevel3, label: '乌兰木伦矿', leftV: '432px', topV: '178px', textColor: '#fff', align: 'right' },
          {
            code: 'cunCaoTa',
            imgSrc: warningLevel1,
            label: '寸草塔矿',
            leftV: '396px',
            topV: '224px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'left',
          },
          { code: 'shiKanTa', imgSrc: warningLevel1, label: '石圪台矿', leftV: '470px', topV: '236px', textColor: '#fff', align: 'right' },
          {
            code: 'buLieTa',
            imgSrc: warningLevel1,
            label: '补连塔矿',
            leftV: '432px',
            topV: '282px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'left',
          },
          { code: 'haLaGouTa', imgSrc: warningLevel2, label: '哈拉沟矿', leftV: '511px', topV: '302px', textColor: '#fff', align: 'right' },
          {
            code: 'shangWanTa',
            imgSrc: warningLevel1,
            label: '上湾矿',
            leftV: '381px',
            topV: '334px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'left',
          },
          // { code: 'huoJiTuTa', imgSrc: warningLevel1, label: '活鸡兔井', leftV: '398px', topV: '265px', textColor: '#fff', align: 'left' },
          { code: 'daLiuTa', imgSrc: warningLevel1, label: '大柳塔矿', leftV: '588px', topV: '338px', textColor: '#fff', align: 'right' },
          {
            code: 'jinJieTa',
            imgSrc: warningLevel1,
            label: '锦界矿',
            leftV: '575px',
            topV: '460px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'center',
          },
          { code: 'yuJiaTa', imgSrc: warningLevel1, label: '榆家梁矿', leftV: '699px', topV: '307px', textColor: '#fff', align: 'center' },
          {
            code: 'baoDeTa',
            imgSrc: warningLevel4,
            label: '保德矿',
            leftV: '892px',
            topV: '200px',
            textColor: 'rgba(255, 231, 83,.9)',
            align: 'center',
          },
        ]
  );
  function openModal(code, label, leftV, topV) {
    emit('showDetail', code, label, leftV, topV);
  }
</script>

<style lang="less" scoped>
  .icon-light {
    position: relative;
    width: 100%;
    height: 100%;

    .icon-point {
      display: flex;
      align-items: center;
      position: absolute;

      img {
        width: 35px;
        height: 35px;
        cursor: pointer;
      }

      span {
        font-size: 12px;
        padding: 0px 5px;
        color: #ffffff;
        // background-color: rgba(12, 13, 13);
      }
      .icon-text-l {
        position: absolute;
        font-size: 12px;
        padding: 0px 5px;
        // background-color: rgba(12, 13, 13);
        display: block;
        width: 100px;
        text-align: center;
        // top: -20px;
        left: -75px;
      }
      .icon-text-r {
        position: absolute;
        font-size: 12px;
        padding: 0px 5px;
        display: block;
        width: 100px;
        text-align: center;
        // top: -20px;
        left: 12px;
      }
      .icon-text-c {
        position: absolute;
        font-size: 12px;
        padding: 0px 5px;
        display: block;
        width: 60px;
        text-align: center;
        top: -20px;
        left: -12px;
      }
    }
  }
</style>