mky-vent-5/src/views/vent/home/clique/components/wind-device.vue

<template>
  <div class="windDevice">
    <div class="title-top" @click="getDetail">通风设施远程控制</div>
    <div class="device-contents">
      <div class="icons-box" @mouseleave="resetScroll">
        <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
          <div class="wrapper">
            {{ item.text }}
          </div>
          <div></div>
          <img :src="item.url" :alt="item.text" />
          <div
            class="level-text"
            :class="{
              'level-text-1': item.level == 1,
              'level-text-2': item.level == 2,
              'level-text-3': item.level == 3,
              'level-text-4': item.level == 4,
              'level-text-5': item.level == 5,
            }"
            >{{
              item.level == 1
                ? '正常'
                : item.level == 2
                ? '低风险'
                : item.level == 3
                ? '中风险'
                : item.level == 4
                ? '高风险'
                : item.level == 5
                ? '报警'
                : ''
            }}</div
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive,defineProps, watch } from 'vue';
  import { getAssetURL } from '/@/utils/ui';
  let props = defineProps({
    devicedata: Object,
  });
  const emit = defineEmits(['goDetail'])
  let iconsMonitor = reactive({
    1: {
      url: getAssetURL('home-container/device/zhushan.png'),
      level: 1,
      text: '主风机',
    },
    2: {
      url: getAssetURL('home-container/device/js.png'),
      level: 2,
      text: '局部风机',
    },
    3: {
      url: getAssetURL('home-container/device/fm.png'),
      level: 1,
      text: '风门',
    },
    4: {
      url: getAssetURL('home-container/device/fc.png'),
      level: 1,
      text: '风窗',
    },
    5: {
      url: getAssetURL('home-container/device/cf.png'),
      level: 2,
      text: '测风装置',
    },
    6: {
      url: getAssetURL('home-container/device/yafeng.png'),
      level: 1,
      text: '压风装置',
    },
    7: {
      url: getAssetURL('home-container/device/penlin.png'),
      level: 2,
      text: '喷淋',
    },
    8: {
      url: getAssetURL('home-container/device/penfen.png'),
      level: 1,
      text: '喷粉',
    },
    9: {
      url: getAssetURL('home-container/device/zhudan.png'),
      level: 1,
      text: '注氮',
    },
    10: {
      url: getAssetURL('home-container/device/zhujiang.png'),
      level: 1,
      text: '注浆',
    },
    11: {
      url: getAssetURL('home-container/device/pw.png'),
      level: 3,
      text: '跟机喷雾',
    },
    12: {
      url: getAssetURL('home-container/device/ccq.png'),
      level: 1,
      text: '除尘器',
    },
    13: {
      url: getAssetURL('home-container/device/wasibeng.png'),
      level: 2,
      text: '瓦斯泵',
    },
    14: {
      url: getAssetURL('home-container/device/js.png'),
      level: 1,
      text: '瓦斯抽采管路',
    },
  });

  const resetScroll = (e: Event) => {
    if (e.target && e.target) (e.target as Element).scrollTop = 0;
  };

  //跳转详情
  function getDetail() {
    console.log('跳转详情');
    emit('goDetail', 'gate')
  }

  watch(
    () => props.devicedata,
    (val) => {
      console.log(val, '设备数据');
     
    },
    {
      deep: true,
    }
  );
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../../assets/font/douyuFont.otf');
  }
  .windDevice {
    width: 100%;
    height: 100%;
    position: relative;
    .title-top {
      position: absolute;
      top: 9px;
      left: 46px;
      color: #fff;
      font-size: 16px;
      font-family: 'douyuFont';
      cursor: pointer;
      &:hover {
        color: #66ffff;
      }
    }

    .device-contents {
      position: absolute;
      top: 30px;
      left: 0;
      height: calc(100% - 30px);
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      .icons-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 100%;
        overflow-y: hidden;
        // align-items: start ;
        &:hover {
          overflow-y: auto;
          & > .icon-item {
            animation-play-state: paused;
            animation: move1 2s linear;
          }
        }
        .icon-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3px;
          animation: move 10s linear infinite;

          .level-text {
            position: absolute;
            top: 42px;
            right: 25px;
            color: #fff;
            font-family: 'douyuFont';
            font-size: 12px;
          }
          .level-text-1 {
            color: rgb(0, 242, 255);
            text-shadow: 2px 2px 4px #001c22;
          }
          .level-text-2 {
            color: #ffff35;
            text-shadow: 2px 2px 4px #313100;
          }
          .level-text-3 {
            color: #ffbe69;
            text-shadow: 2px 2px 4px #271600;
          }
          .level-text-4 {
            color: #ff6f00;
            // color: #09caff;
            text-shadow: 2px 2px 4px #060200;
          }
          .level-text-5 {
            color: #ff0000;
            text-shadow: 2px 2px 4px #200000;
          }
          img {
            width: 210px;
            height: 69px;
          }
        }
        @keyframes move {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(-269px);
          }
        }

        @keyframes move1 {
          0% {
            transform: translateY(0px);
          }
        }
        .wrapper {
          position: absolute;
          top: 40px;
          left: 82px;
          color: #ffffffe0;
          font-size: 13px;
          text-align: center;
          letter-spacing: 1px;
        }
      }
    }
  }
  :deep .zxm-select-selector {
    width: 100%;
    height: 30px !important;
    padding: 0 11px 0px 25px !important;
    background-color: rgba(8, 148, 255, 0.3) !important;
    border: 1px solid #1d80da !important;
  }
  :deep .zxm-select-selection-item {
    color: #fff !important;
    line-height: 28px !important;
  }
  :deep .zxm-select-arrow {
    color: #fff !important;
  }
</style>