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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到相关信息" />
  <template v-else>
    <Row justify="space-around">
      <!-- <Col> -->
      <LargeBoard :label="SUMMARY_HEADER_CONFIG.label" :value="headerData" :type="SUMMARY_HEADER_CONFIG.type" />
      <!-- </Col> -->
    </Row>
    <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
  </template>
</template>
<script lang="ts" setup>
  import { Row, Result } from 'ant-design-vue';
  import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, BillboardType } from '../billboard.data';
  import LargeBoard from './LargeBoard.vue';
  import { onMounted, shallowRef, ref, computed } from 'vue';
  import CommonTable from './CommonTable.vue';
  import { get } from '../utils';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const unavailble = computed<boolean>(() => {
    return props.data.sys_warndata === undefined;
  });

  const headerData = ref('/');
  const tableData = shallowRef<any[]>([]);

  function fetchData() {
    const info = props.data.sys_warndata;
    if (!info) return;
    const sysInfo = info.info.sysInfo;
    const trans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
    };
    headerData.value = get(sysInfo, SUMMARY_HEADER_CONFIG.prop, '/');
    // 配合 SUMMARY_COLUMN 生成数据
    tableData.value = [
      {
        label: '火灾监测',
        value: get(trans, get(sysInfo, ['fireS', 'maxLevel'], 0)),
      },
      {
        label: '设备监测',
        value: get(trans, get(sysInfo, ['deviceWarnInfo', 'maxLevel'], 0)),
      },
      {
        label: '瓦斯监测',
        value: get(trans, get(sysInfo, ['gasS', 'maxLevel'], 0)),
      },
      {
        label: '粉尘监测',
        value: get(trans, get(sysInfo, ['dustS', 'maxLevel'], 0)),
      },
      {
        label: '通风监测',
        value: get(trans, get(sysInfo, ['ventS', 'maxLevel'], 0)),
      },
    ];
  }

  onMounted(() => {
    fetchData();
  });
</script>
<style lang="less" scoped>
  .value104 {
    color: #ff0000;
  }
  .value103 {
    color: #ff8800;
  }
  .value102 {
    color: #ffff00;
  }
</style>