mky-vent-base/src/views/vent/home/billboard/components/Warning.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="warning">
    <div class="warning-item" v-for="item in WARNING_CONFIG" :key="item.id" @click="$emit('click', item)">
      <div class="img"> <img :src="item.src" alt="" /> </div>
      <div class="text">{{ item.text }}</div>
      <div class="extra">监测数量</div>
      <div class="num" :class="`warning-level_${warnData.maxLevel}`">{{ warnData[item.prop] }}</div>
      <div class="risk" :class="`warning-level_${warnData.maxLevel}`">{{ warnData[item.prop2] }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { shallowRef, onMounted } from 'vue';
  import { BillboardType, DEFAULT_TEST_DATA, WARNING_CONFIG } from '../billboard.data';
  import _ from 'lodash-es';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );
  defineEmits(['click']);

  const warnData = shallowRef<BillboardType['warningInfo']>({
    total: 5,
    vent: 1,
    ventRisk: '低风险',
    gas: 1,
    gasRisk: '低风险',
    dust: 1,
    dustRisk: '低风险',
    fire: 1,
    fireRisk: '低风险',
    safety: 1,
    safetyRisk: '低风险',
    maxLevel: 5,
  });

  function fetchData() {
    const info = props.data.warningInfo;
    if (!info) return;
    warnData.value = info;
  }

  onMounted(() => {
    fetchData();
  });
</script>

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

  .warning {
    height: 100%;
    // display: flex;
    // justify-content: space-evenly;
    // align-items: center;
    // flex-wrap: wrap;
  }

  .warning-item:first-of-type {
    background-image: url(/@/assets/images/vent/home/select-bg.png);
    background-size: auto 100%;
    background-position: left center;
    padding-left: 60px;

    .text {
      width: 100px;
      text-align: left;
    }
    .risk {
      display: none;
    }
    .extra {
      display: none;
    }
    .num {
      text-align: right;
      flex-grow: 1;
    }

    // .warning-level_5 {
    //   color: red;
    // }
    // .warning-level_4 {
    //   color: orange;
    // }
    // .warning-level_3 {
    //   color: yellow;
    // }
    // .warning-level_2 {
    //   color: green;
    // }
  }
  .warning-item {
    display: flex;
    align-items: center;
    background-image: url(/@/assets/images/company/list-item-9.png);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: right center;
    height: 40px;
    margin-top: 10px;

    .text {
      text-align: center;
      width: 60px;
    }
    .extra {
      text-align: center;
      width: 100px;
    }
    .num {
      text-align: center;
      width: 100px;
    }
    .risk {
      text-align: right;
      width: 80px;
    }
  }

  .num {
    font-size: 20px;
    font-family: douyuFont;
    color: @vent-gas-primary-text;
  }
  .risk {
    font-size: 20px;
    font-family: douyuFont;
    color: @vent-gas-primary-text;
  }
</style>