mky-vent-base/src/views/vent/home/configurable/green/components/dz-list.vue

<template>
  <div class="dz-list">
    <div :class="deviceType == 'deviceManageInfo' ? 'icons-box1' : 'icons-box'" @mouseleave="resetScroll">
      <template v-for="(item, key) in listOption" :key="key">
        <div class="icon-item">
          <!-- <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">{{ listData[item.allCount] || 0 }}</span>
            </div>
            <div class="warn-count">
              <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
              <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ listData[item.warnCount] || 0 }}</span>
            </div>
            <div class="close-count">
              <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
              <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ listData[item.closeCount] || 0 }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';

let props = defineProps({
  listOption: {
    type: Object,
    default: () => {
      return {};
    },
  },
  listData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  deviceType: {
    type: String,
    default: '',
  },
});

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

watch(
  () => props.listData,
  (newV, oldV) => {
    console.log(newV, '设备');
  },
  { immediate: true, deep: true }
);
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .dz-list {
    --image-model_icon-item: url('@/assets/images/themify/deepblue/home-container/configurable/1600.png');
  }
}
.dz-list {
  --image-model_icon-item: url('@/assets/images/home-green/1600.png');
  width: 100%;
  height: 100%;
}

.icons-box {
  height: 100%;
  overflow-y: hidden;

  &:hover {
    overflow-y: auto;
    overflow-x: auto;
  }

  .icon-item {
    position: relative;
    width: 100%;
    height: 46px;
    background: var(--image-model_icon-item) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto;

    &:nth-child(even) {
      padding-right: 0px;
    }

    .level-text {
      width: 76%;
      display: flex;
      justify-content: space-around;
      position: absolute;
      top: 10px;
      left: 76px;
      color: #ffffffe0;
      font-size: 14px;
      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: 100%;
      height: 60px;
    }
  }
}
.icons-box1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: hidden;
  padding: 5px;
  box-sizing: border-box;
  &:hover {
    overflow-y: auto;
  }

  .icon-item {
    flex: 0 0 calc(50% - 5px);
    height: 46px;
    background: var(--image-model_icon-item) no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .level-text {
      width: 76%;
      display: flex;
      justify-content: space-around;
      position: absolute;
      top: 10px;
      left: 76px;
      color: #ffffffe0;
      font-size: 14px;
      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: 100%;
      height: 60px;
    }
  }
}
</style>