mky-vent-base/src/views/vent/monitorManager/alarmMonitor/common/warnTargetGas.vue

<template>
  <div class="warnTarget">
    <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 700 }">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a href="javascript:;">{{ text }}</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';

  let tableData = ref<any[]>([
    {
      key: '1',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '甲烷浓度',
      warnLow: '（0，0.8%）',
      warnCen: '（0.8%，1.0%）',
      warnJg: '（1.0%，1.5%）',
      warnHign: '（1.5%，+）',
    },
    {
      key: '2',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '甲烷浓度单班浮动',
      warnLow: '（0，0.15%）',
      warnCen: '（0.15%，0.20%）',
      warnJg: '（0.20%，0.30%）',
      warnHign: '（0.30%，+）',
    },
    {
      key: '3',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '甲烷浓度邻班浮动',
      warnLow: '（0，0.15%）',
      warnCen: '（0.15%，0.20%）',
      warnJg: '（0.20%，0.30%）',
      warnHign: '（0.30%，+）',
    },
    {
      key: '4',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '滑动平均值',
      warnLow: '（0，0.20%）',
      warnCen: '（0.20%，0.30%）',
      warnJg: '（0.30%，0.40%）',
      warnHign: '（0.40%，+）',
    },
    {
      key: '5',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '离散率',
      warnLow: '（0，0.06%）',
      warnCen: '（0.06%，0.08%）',
      warnJg: '（0.08%，0.10%）',
      warnHign: '（0.10%，+）',
    },
    {
      key: '6',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '变化率',
      warnLow: '（0，0.04%）',
      warnCen: '（0.04%，0.06%）',
      warnJg: '（0.06%，0.08%）',
      warnHign: '（0.08%，+）',
    },
    {
      key: '7',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '异常持续时间',
      warnLow: '（0，1）',
      warnCen: '（1，2）',
      warnJg: '（2，3）',
      warnHign: '（3，+）',
    },
    {
      key: '8',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '二氧化碳浓度',
      warnLow: '（0，0.50%）',
      warnCen: '（0.50%，0.75%）',
      warnJg: '（0.75%，1.5%）',
      warnHign: '（1.5%，+）',
    },
    {
      key: '9',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '风速',
      warnLow: '（0，0.15）',
      warnCen: '（0.15，0.25）',
      warnJg: '（0.25，1.0）',
      warnHign: '（1.0，+）',
    },
    {
      key: '10',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '吨煤瓦斯涌出量',
      warnLow: '（0，6）',
      warnCen: '（6，8）',
      warnJg: '（8，10）',
      warnHign: '（10，+）',
    },
    {
      key: '11',
      one: '监测监控',
      two: '瓦斯涌出',
      three: '炮后吨煤瓦斯涌出量V30',
      warnLow: '（0，8）',
      warnCen: '（8，10）',
      warnJg: '（10，12）',
      warnHign: '（12，+）',
    },
    {
      key: '12',
      one: '监测监控',
      two: '瓦斯抽采',
      three: '残余瓦斯含量（抽采计算）',
      warnLow: '（0，5）',
      warnCen: '（5，6）',
      warnJg: '（6，8）',
      warnHign: '（8，+）',
    },
    {
      key: '13',
      one: '监测监控',
      two: '气压变化',
      three: '风压极差',
      warnLow: '（0，1）',
      warnCen: '（1，2.5）',
      warnJg: '（2.5，4）',
      warnHign: '（4，+）',
    },
    {
      key: '14',
      one: '瓦斯地质',
      two: '瓦斯赋存',
      three: '原始瓦斯含量',
      warnLow: '（0，6）',
      warnCen: '（6，8）',
      warnJg: '（8，10）',
      warnHign: '（10，+）',
    },
    {
      key: '15',
      one: '瓦斯地质',
      two: '瓦斯赋存',
      three: '残余瓦斯含量',
      warnLow: '（0，5）',
      warnCen: '（5，6）',
      warnJg: '（6，8）',
      warnHign: '（8，+）',
    },
    {
      key: '16',
      one: '瓦斯地质',
      two: '瓦斯赋存',
      three: '瓦斯压力',
      warnLow: '（0，0.5）',
      warnCen: '（0.5，0.74）',
      warnJg: '（0.74，1.0）',
      warnHign: '（1.0，+）',
    },
    {
      key: '17',
      one: '瓦斯地质',
      two: '煤层赋存',
      three: '煤层厚度',
      warnLow: '（0，1.3）',
      warnCen: '（1.3，3.5）',
      warnJg: '（3.5，8.0）',
      warnHign: '（8.0，+）',
    },
    {
      key: '18',
      one: '瓦斯地质',
      two: '煤层赋存',
      three: '厚度变化',
      warnLow: '（0，5%）',
      warnCen: '（5%，10%）',
      warnJg: '（10%，15%）',
      warnHign: '（15%，+）',
    },
    {
      key: '19',
      one: '瓦斯地质',
      two: '煤层赋存',
      three: '煤层倾角',
      warnLow: '（0，8）',
      warnCen: '（8，25）',
      warnJg: '（25，45）',
      warnHign: '（45，+）',
    },
    {
      key: '20',
      one: '瓦斯地质',
      two: '煤层赋存',
      three: '倾角变化',
      warnLow: '（0，5%）',
      warnCen: '（5%，10%）',
      warnJg: '（10%，15%）',
      warnHign: '（15%，+）',
    },
    {
      key: '21',
      one: '瓦斯地质',
      two: '地质构造',
      three: '构造距离',
      warnLow: '（50，+）',
      warnCen: '（50，30）',
      warnJg: '（30，5）',
      warnHign: '（5，0）',
    },
  ]);

  let columns = reactive([
    {
      title: '序号',
      width: 60,
      align: 'center',
      customRender: ({ index }: { index: number }) => {
        if (index >= 0 && index <= 12) {
          return 1;
        } else {
          return 2;
        }
      },
      customCell: (_, index) => {
        if (index == 0) {
          return { rowSpan: 13 };
        } else if (index > 0 && index <= 12) {
          return { rowSpan: 0 };
        }
        if (index == 13) {
          return { rowSpan: 8 };
        } else if (index > 13 && index <= 20) {
          return { rowSpan: 0 };
        }
      },
    },
    {
      title: '一级指标',
      dataIndex: 'one',
      align: 'center',
      customCell: (_, index) => {
        if (index == 0) {
          return { rowSpan: 13 };
        } else if (index > 0 && index <= 12) {
          return { rowSpan: 0 };
        }
        if (index == 13) {
          return { rowSpan: 8 };
        } else if (index > 13 && index <= 20) {
          return { rowSpan: 0 };
        }
      },
    },
    {
      title: '二级指标',
      dataIndex: 'two',
      align: 'center',
      customCell: (_, index) => {
        if (index == 0) {
          return { rowSpan: 11 };
        } else if (index > 0 && index <= 10) {
          return { rowSpan: 0 };
        }
        if (index == 13) {
          return { rowSpan: 3 };
        } else if (index > 13 && index <= 15) {
          return { rowSpan: 0 };
        }
        if (index == 16) {
          return { rowSpan: 4 };
        } else if (index > 16 && index <= 19) {
          return { rowSpan: 0 };
        }
      },
    },
    {
      title: '三级指标',
      align: 'center',
      dataIndex: 'three',
    },
    {
      title: '低风险',
      dataIndex: 'warnLow',
      align: 'center',
    },
    {
      title: '一般风险',
      dataIndex: 'warnCen',
      align: 'center',
    },
    {
      title: '较高风险',
      dataIndex: 'warnJg',
      align: 'center',
    },
    {
      title: '高风险',
      dataIndex: 'warnHign',
      align: 'center',
    },
  ]);
</script>

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