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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
  <ListItem
    v-for="(item, i) in list"
    :key="item.icon"
    :icon="item.icon"
    :label="item.label"
    :value="data[item.prop]"
    :type="i % 2 ? 'green' : 'blue'"
    class="mt-5px"
  />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  import ListItem from './ListItem.vue';
  import { FIRE_STATUS_LIST } from '../billboard.data';

  const list = ref(FIRE_STATUS_LIST);
  const risk = ref('低风险');

  const data = ref({});
</script>
<style lang="less" scoped></style>