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="listData[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 { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );

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

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

  function fetchData() {
    const info = props.data.fireInfo;
    const trans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    risk.value = trans[info.fireWarnLevel];
    listData.value = info;
  }

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