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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Row justify="space-around">
    <Col v-for="(item, i) in SUMMARY_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
      <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
    </Col>
  </Row>
  <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
</template>
<script lang="ts" setup>
  import { Row, Col } from 'ant-design-vue';
  import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
  import LargeBoard from './LargeBoard.vue';
  import { watch, shallowRef } from 'vue';
  import CommonTable from './CommonTable.vue';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const headerData = shallowRef({});
  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);

  function fetchData() {
    const info = props.data.gasInfo || DEFAULT_TEST_DATA.gasInfo;
    const trans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    headerData.value = {
      gasWarnLevel: trans[info.gasWarnLevel],
      gasJudgeLevel: '低风险',
    };
    tableData.value = info.gasTypeList.map((e) => {
      return {
        ...e,
        warnLevelStr: trans[e.warnLevel],
      };
    });
  }

  watch(
    () => props.data,
    () => {
      console.log('debug');
      fetchData();
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped></style>