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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Row justify="space-around">
    <Col v-for="(item, i) in GAS_STATUS_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="BASIC_COLUMN" :data="data" />
</template>
<script lang="ts" setup>
  import { Row, Col } from 'ant-design-vue';
  import { GAS_STATUS_HEADER_CONFIG, BASIC_COLUMN } from '../billboard.data';
  import LargeBoard from './LargeBoard.vue';
  import { ref } from 'vue';
  import CommonTable from './CommonTable.vue';
  // import mapComponent from './components/3Dmap/index.vue';

  const headerData = ref({
    a: '低风险',
    b: '低风险',
  });
  const data = ref([
    { a: '瓦斯抽采泵站', b: 2, c: '正常' },
    { a: '瓦斯监测传感器', b: 12, c: '正常' },
    { a: '瓦斯巡检机器人', b: 23, c: '异常' },
  ]);
</script>
<style lang="less" scoped></style>