gasInjection-project/src/views/vent/home/billboard/components/DustStatus.vue

<template>
  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到粉尘风险等级信息" />
  <template v-else>
    <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
    <CollapseTable :columns="DUST_STATUS_COLUMN" :data="tableData" :collapses="DUST_COLLAPSES" />
  </template>
</template>
<script lang="ts" setup>
  import CollapseTable from './CollapseTable.vue';
  import CommonTitle from './CommonTitle.vue';
  import { Result } from 'ant-design-vue';
  import { BillboardType, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
  import { computed } from 'vue';
  import { get } from '../utils';
  // import mapComponent from './3Dmap/index.vue';

  const props = defineProps<{
    data: Partial<BillboardType>;
  }>();

  const unavailble = computed<boolean>(() => {
    return props.data.dustInfo === undefined;
  });
  const risk = computed(() => {
    const info = props.data.dustInfo;
    return trans[get(info, 'dustWarnLevel', 0)];
  });
  const tableData = computed(() => {
    const info = props.data.dustInfo;
    return get(info, 'dustTypeList', []).map((e) => {
      return {
        ...e,
        warnLevelStr: trans[e.warnLevel],
      };
    });
  });

  const trans = {
    0: '低风险',
    101: '低风险',
    102: '一般风险',
    103: '较大风险',
    104: '重大风险',
    201: '报警',
    1001: '网络断开',
  };
</script>
<style lang="less" scoped></style>