vent-template/src/views/vent/home/colliery/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">
        <template v-for="(item, key) in iconsMonitor" :key="key">
          <div class="icon-item" v-if="item.text">
            <div class="wrapper">
              {{ item.text }}
            </div>
            <div></div>
            <img :src="item.url" :alt="item.text" />

            <!-- <div
              class="level-text"
              :class="{
                'level-text-0': item['count'] == 0,
                'level-text-5': item['count'] > 0,
              }"
              >{{ item['count'] == 0 ? '正常' : `${item['count']}` }}</div
            >
          </div> -->
            <div class="level-text">
              <div class="all-count">
                <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
                <span class="num-count">{{ item.allCount || 0 }}</span>
              </div>
              <div class="warn-count">
                <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
                <span class="num-count">{{ item.warnCount || 0 }}</span>
              </div>
              <div class="close-count">
                <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
                <span class="num-count">{{ item.closeCount || 0 }}</span>
              </div>
            </div>
          </div>
        </template>
      </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({
  // fanmain: {
  //   url: getAssetURL('home-container/device/zhushan.png'),
  //   level: 0,
  //   text: '',
  // },
 
  fanmain: {
    url: getAssetURL('vent/alarm-icons/zhushan.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  fanlocal: {
    url: getAssetURL('vent/alarm-icons/js.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  gate: {
    url: getAssetURL('vent/alarm-icons/fm.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  window: {
    url: getAssetURL('vent/alarm-icons/fc.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  windrect: {
    url: getAssetURL('vent/alarm-icons/cf.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  forcFan: {
    url: getAssetURL('vent/alarm-icons/yafeng.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  spray: {
    url: getAssetURL('vent/alarm-icons/penlin.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  dustdev: {
    url: getAssetURL('vent/alarm-icons/penfen.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  nitrogen: {
    url: getAssetURL('vent/alarm-icons/zhudan.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  pulping: {
    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  atomizing: {
    url: getAssetURL('vent/alarm-icons/pw.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  dustsensor: {
    url: getAssetURL('vent/alarm-icons/ccq.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  gas: {
    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  pump: {
    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
  modelsensor: {
    url: getAssetURL('vent/alarm-icons/cf.png'),
    level: 100,
    text: '',
    allText: '总数',
    warnText: '报警数',
    closeText: '断开数',
    allCount: 0,
    warnCount: 0,
    closeCount: 0,
  },
});

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

//跳转详情
function getDetail() {
  // emit('goDetail', 'windrect')
}

watch(
  () => props.devicedata,
  (val) => {
    Object.keys(iconsMonitor).forEach((el) => {
      if (val && val[el]) {
        iconsMonitor[el].level = val[el].maxLevel;
        iconsMonitor[el]['text'] = val[el].name;
        // iconsMonitor[el]['count'] = val[el].count;
        iconsMonitor[el].allCount = val[el].totalcount
        iconsMonitor[el].warnCount = val[el].count
        iconsMonitor[el].closeCount = val[el].netstatus
      }
    });
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../../assets/font/douyuFont.otf');
}

.windDevice {
  width: 100%;
  // min-width: ;
  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 15px;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;

    .icons-box {
      // display: flex; lxh
      // flex-wrap: wrap; lxh
      // justify-content: space-around; 
      // justify-content: space-between; lxh
      height: 100%;

      // overflow-y: hidden;
      // align-items: start ;
      // &:hover {
      //   overflow-y: auto;
      //   & > .icon-item {
      //     // animation-play-state: paused; lxh
      //     // animation: move1 2s linear;lxh
      //   }
      // }
      .icon-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px;
        // animation: move 10s linear infinite;lxh

        .level-text {
          width: 220px;
          display: flex;
          justify-content: space-between;
          position: absolute;
          // top: 42px;lxh
          // right: 25px;lxh
          // color: #fff;lxh
          // font-family: 'douyuFont';lxh
          // font-size: 12px;lxh
          top: 47px;
          left: 185px;
          color: #ffffffe0;
          font-size: 13px;
          text-align: center;
          letter-spacing: 1px;

          .all-count,
          .warn-count,
          .close-count {
            // margin: 0px 5px;
            .num-count {
              font-family: 'douyuFont';
              font-size: 12px;
            }
          }
        }

        // .level-text-0 {
        //   color: rgb(145, 230, 9);
        //   text-shadow: 2px 2px 4px #001c22;
        // }

        // .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 {
        //   width: 35px;
        //   color: #ff0000;
        //   text-shadow: 2px 2px 4px #200000;
        // }

        // .level-text-6 {
        //   color: #bbb;
        //   text-shadow: 2px 2px 4px #001c22;
        // }

        img {
          // width: 208px; //lxh
          // height: 69px;//lxh
          width: 427px;
          height: 79px;
        }
      }

      @keyframes move {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-269px);
        }
      }

      @keyframes move1 {
        0% {
          transform: translateY(0px);
        }
      }

      .wrapper {
        position: absolute;
        // top: 40px;  lxh
        // left: 82px;lxh
        top: 47px;
        left: 100px;
        color: #ffffffe0;
        font-size: 13px;
        text-align: center;
        letter-spacing: 1px;
      }

      .level-warning {
        font-weight: 600;
        color: #ff2e2e;
        text-shadow: 2px 2px 4px #000000;
      }
    }
  }
}

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