vent-template/src/views/vent/monitorManager/alarmMonitor/common/gasParamter.vue

<template>
  <div class="gasParamter">
    <a-table :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ y: 700 }" class="tableW">
      <template #bodyCell="{ column, text }">
        <!-- <template v-if="column.dataIndex === 'name'">
                    <a href="javascript:;">{{ text }}</a>
                </template> -->
      </template>
    </a-table>
    <!-- <div class="description">
            ZWY300/355 : Z-泵站,W-瓦斯抽放,Y-移动式,270/300-流量(m³/min),355-功率(KW),抽放混合量160~230m³/min,抽放瓦斯浓度0.5~1.2%,抽放瓦斯量0.8~3m³/min。
        </div> -->
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  let tableData = ref<any[]>([
    { name: '相对瓦斯涌出量', value: '8.18m³/t', address: '1475移动式瓦斯抽采泵站', work: '16219-1综放工作面', code: '2Be1-405' },
    { name: '综采最大涌出量', value: '2.51m³/min', address: '六采区进风大巷移动式瓦斯抽采泵站', work: '16120油页岩工作面', code: 'ZWY120/160G' },
    { name: '掘进最大涌出量', value: '0.59m³/min', address: '', work: '', code: '' },
  ]);

  let columns = reactive([
    {
      title: '瓦斯参数',
      children: [
        {
          title: '瓦斯等级鉴定',
          children: [
            {
              title: '绝对瓦斯涌出量',
              dataIndex: 'name',
              key: 'name',
              align: 'center',
            },
            {
              title: '20.65m³/min',
              dataIndex: 'value',
              key: 'value',
              align: 'center',
            },
          ],
        },
        {
          title: '瓦斯抽放',
          children: [
            {
              title: '抽放泵站地点',
              dataIndex: 'address',
              key: 'address',

              align: 'center',
            },
            {
              title: '抽放工作面',
              dataIndex: 'work',
              key: 'work',

              align: 'center',
            },
            {
              title: '设备型号',
              dataIndex: 'code',
              key: 'code',

              align: 'center',
            },
          ],
        },
      ],
    },
  ]);
</script>

<style lang="less" scoped>
  .gasParamter {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .tableW {
      width: 100% !important;
    }
    .description {
      margin: 10px;
      color: #fff;
    }
  }

  :deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe !important;
  }
</style>