mky-vent-base/src/views/vent/home/configurable/components/preset/DeviceAlarm.vue

<template>
  <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">
            <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="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
            </div>
            <div class="close-count">
              <span> {{ `${item.closeText}&nbsp;:&nbsp;` }}</span>
              <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, defineProps, watch } from 'vue';
  import { getAssetURL } from '/@/utils/ui';
  let props = withDefaults(
    defineProps<{
      devicedata: Object;
      config: {
        /** 忽略报警数，即报警数设为0 */
        ignoreWarning: Boolean;
        ignoreClosed: Boolean;
        ignoreCount: Boolean;
        ignoreKeywords: Array<string>;
      };
    }>(),
    {
      config: () => ({
        ignoreWarning: false,
        ignoreClosed: false,
        ignoreCount: false,
        ignoreKeywords: [],
      }),
    }
  );
  let iconsMonitor = reactive({
    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,
    },
    fanlocaldp: {
      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;
  };

  watch(
    () => props.devicedata,
    (val) => {
      Object.keys(iconsMonitor).forEach((el) => {
        if (val && val[el] && !props.config.ignoreKeywords.includes(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;

          if (props.config.ignoreWarning) {
            iconsMonitor[el].warnCount = 0;
          }
          if (props.config.ignoreClosed) {
            iconsMonitor[el].closeCount = 0;
          }
          if (props.config.ignoreCount) {
            iconsMonitor[el].allCount = 0;
          }
        }
      });
    },
    {
      deep: true,
    }
  );
</script>

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

  .device-contents {
    height: 100%;
    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: 37px;
          left: 165px;
          color: #ffffffe0;
          font-size: 13px;
          text-align: center;
          letter-spacing: 1px;

          .num-count,
          .num-count1 {
            font-family: 'douyuFont';
            font-size: 12px;
          }

          .warn-count,
          .close-count {
            .num-count {
              color: #ffffffe0;
            }
            .num-count1 {
              color: #ff0000;
            }
          }
        }

        img {
          width: 427px;
          height: 64px;
        }
      }

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

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

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

      .wrapper {
        position: absolute;
        top: 37px;
        left: 90px;
        color: #ffffffe0;
        font-size: 13px;
        text-align: center;
        letter-spacing: 1px;
      }

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