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 FIRE_STATUS_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 { onMounted, ref, shallowRef } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  import ListItem from './ListItem.vue';
  import { FIRE_STATUS_LIST } from '../billboard.data';
  import { getSummary } from '../billboard.api';

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

  const data = shallowRef<any>({});

  function fetchData() {
    getSummary().then((r) => {
      data.value = r.fireInfo;
    });
  }

  onMounted(() => {
    fetchData();
  });
</script>
<style lang="less" scoped></style>