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

<template>
  <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
  <CollapseTable :columns="DUST_STATUS_COLUMN" :data="tableData" :collapses="DUST_COLLAPSES" />
</template>
<script lang="ts" setup>
  import CollapseTable from './CollapseTable.vue';
  import CommonTitle from './CommonTitle.vue';
  import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
  import { ref, shallowRef, onMounted } from 'vue';
  import { get } from '../utils';
  // import mapComponent from './3Dmap/index.vue';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );
  const risk = ref('低风险');
  const tableData = shallowRef<any[]>([]);

  function fetchData() {
    const info = props.data.dustInfo;
    if (!info) return;
    const trans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    risk.value = trans[get(info, 'dustWarnLevel', 0)];
    tableData.value = get(info, 'dustTypeList', []).map((e) => {
      return {
        ...e,
        warnLevelStr: trans[e.warnLevel],
      };
    });
  }

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