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 _ from 'lodash-es';
  import { onMounted, ref, shallowRef } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  import ListItem from './ListItem.vue';
  import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST, FIRE_STATUS_IGNORE_TRANSLATION_KEYS } 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 || DEFAULT_TEST_DATA.fireInfo;
    const riskTrans = {
      0: '低风险',
      101: '低风险',
      102: '普通风险',
      103: '较高风险',
      104: '高风险',
      201: '低风险',
      1001: '低风险',
    };
    const warnTrans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    risk.value = riskTrans[info.fireWarnLevel];
    _.forEach(info, (val, key) => {
      if (FIRE_STATUS_IGNORE_TRANSLATION_KEYS.includes(key)) return;
      info[key] = warnTrans[val];
    });
    listData.value = info;
  }

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