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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到粉尘预警信息" />
  <div v-else class="dust-risk">
    <div class="dust-risk-item" v-for="item in DUST_RISK_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="num">{{ get(dustRiskData, item.prop) }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Result } from 'ant-design-vue';
  import { BillboardType, DUST_RISK_CONFIG } from '../billboard.data';
  import { get } from '../utils';

  const props = defineProps<{
    data: Partial<BillboardType>;
  }>();
  defineEmits(['click']);

  const unavailble = computed<boolean>(() => {
    return props.data.dustRisk === undefined;
  });
  const dustRiskData = computed(() => {
    const info = props.data.dustRisk;
    return info;
  });
</script>

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

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

  .dust-risk-item {
    display: flex;
    align-items: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    height: 46px;
    margin-top: 10px;
    padding: 0 7px;

    .text {
      text-align: center;
      width: 200px;
    }
    .num {
      text-align: center;
      width: 140px;
    }
    .img {
      width: 27px;
      height: 27px;
    }
  }

  .dust-risk-item:nth-child(odd) {
    background-image: url(/@/assets/images/company/list-item-1.png);
  }
  .dust-risk-item:nth-child(even) {
    background-image: url(/@/assets/images/company/list-item-2.png);
  }

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