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

<template>
    <div class="warnTarget">
        <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 720 }">
            <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: '甲烷浓度',
        four: '甲烷传感器实时监测数据',
    },
    {
        key: '2',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '甲烷浓度单班浮动',
        four: '一个班内甲烷浓度的最大变化量',
    },
    {
        key: '3',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '甲烷浓度邻班浮动',
        four: '上下两个班次甲烷浓度的浮动变化量',
    },
    {
        key: '4',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '滑动平均值',
        four: '最近一定时长范围内甲烷浓度的平均值',
    },
    {
        key: '5',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '离散率',
        four: '反映瓦斯涌出的数据波动特征',
    },
    {
        key: '6',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '变化率',
        four: '反映瓦斯涌出的数据演化趋势',
    },
    {
        key: '7',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '异常持续时间',
        four: '反映一定时长范围内瓦斯异常涌出的频次',
    },
    {
        key: '8',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '二氧化碳浓度',
        four: '二氧化碳传感器实时监测数据',
    },
    {
        key: '9',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '风速',
        four: '风速传感器实时监测数据',
    },
    {
        key: '10',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '风量',
        four: '巷道风量的实时监测数据',
    },
    {
        key: '11',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '瓦斯涌出量',
        four: '工作面瓦斯涌出量实时监测数据',
    },
    {
        key: '12',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '吨煤瓦斯涌出量',
        four: '一段时间内工作面吨煤瓦斯涌出量',
    },
    {
        key: '13',
        one: '监测监控',
        two: '瓦斯涌出',
        three: '炮后吨煤瓦斯涌出量V30',
        four: '炮后30min内工作面吨煤瓦斯涌出量',
    },
    {
        key: '14',
        one: '监测监控',
        two: '瓦斯抽采',
        three: '采空区抽采纯量',
        four: '采空区瓦斯抽采纯量实时监测数据',
    },
    {
        key: '15',
        one: '监测监控',
        two: '瓦斯抽采',
        three: '采空区抽采量（班）',
        four: '一个班内采空区瓦斯累计抽采量',
    },
    {
        key: '16',
        one: '监测监控',
        two: '瓦斯抽采',
        three: '残余瓦斯含量（抽采计算）',
        four: '根据煤层瓦斯抽采量计算的煤层残余瓦斯含量',
    },
    {
        key: '17',
        one: '监测监控',
        two: '气压变化',
        three: '平均风压',
        four: '单位时间内风压数据的平均值',
    },
    {
        key: '18',
        one: '监测监控',
        two: '气压变化',
        three: '最低风压',
        four: '单位时间内风压数据的最小值',
    },
    {
        key: '19',
        one: '监测监控',
        two: '气压变化',
        three: '风压极差',
        four: '单位时间内风压数据的最大变化量',
    },
    {
        key: '20',
        one: '瓦斯地质',
        two: '瓦斯赋存',
        three: '原始瓦斯含量',
        four: '/',
    },
    {
        key: '21',
        one: '瓦斯地质',
        two: '瓦斯赋存',
        three: '残余瓦斯含量',
        four: '/',
    },
    {
        key: '22',
        one: '瓦斯地质',
        two: '瓦斯赋存',
        three: '可解吸瓦斯含量',
        four: '/',
    },
    {
        key: '23',
        one: '瓦斯地质',
        two: '瓦斯赋存',
        three: '瓦斯压力',
        four: '/',
    },
    {
        key: '24',
        one: '瓦斯地质',
        two: '煤层赋存',
        three: '煤层厚度',
        four: '/',
    },
    {
        key: '25',
        one: '瓦斯地质',
        two: '煤层赋存',
        three: '厚度变化',
        four: '/',
    },
    {
        key: '26',
        one: '瓦斯地质',
        two: '煤层赋存',
        three: '煤层倾角',
        four: '/',
    },
    {
        key: '27',
        one: '瓦斯地质',
        two: '煤层赋存',
        three: '倾角变化',
        four: '/',
    },
    {
        key: '28',
        one: '瓦斯地质',
        two: '地质构造',
        three: '构造类型',
        four: '/',
    },
    {
        key: '29',
        one: '瓦斯地质',
        two: '地质构造',
        three: '构造距离',
        four: '工作面距地质构造的距离',
    },
    {
        key: '30',
        one: '采掘生产',
        two: '采掘强度',
        three: '煤机运行时长（回采）',
        four: '单位时间内采煤机运行的时间长度',
    },
    {
        key: '31',
        one: '采掘生产',
        two: '采掘强度',
        three: '煤机运行时长（掘进）',
        four: '单位时间内掘进机运行的时间长度',
    },
    {
        key: '32',
        one: '采掘生产',
        two: '采掘强度',
        three: '煤机最大速度',
        four: '单位时间内煤机运行速度的最大值',
    },
    {
        key: '33',
        one: '采掘生产',
        two: '采掘强度',
        three: '煤机平均速度',
        four: '单位时间内煤机运行速度的平均値',
    },
    {
        key: '34',
        one: '采掘生产',
        two: '采掘进尺',
        three: '割煤刀数（班）',
        four: '/',
    },
    {
        key: '35',
        one: '采掘生产',
        two: '采掘进尺',
        three: '进尺（班）',
        four: '/',
    },
    {
        key: '36',
        one: '采掘生产',
        two: '采掘进尺',
        three: '割煤刀数（天）',
        four: '/',
    },
    {
        key: '37',
        one: '采掘生产',
        two: '采掘进尺',
        three: '进尺（天）',
        four: '/',
    },
    {
        key: '37',
        one: '采掘生产',
        two: '周期来压',
        three: '周期来压判识结果',
        four: '/',
    },

])

let columns = reactive([
    {
        title: '序号',
        width: 60,
        align: 'center',
        customRender: ({ index }: { index: number }) => `${index + 1}`
    },
    {
        title: '一级指标',
        dataIndex: 'one',
        align: 'center',
        customCell: (_, index) => {
            if (index == 0) {
                return { rowSpan: 19 };
            } else if (index > 0 && index <= 18) {
                return { rowSpan: 0 };
            }
            if (index == 19) {
                return { rowSpan: 10 };
            } else if (index > 19 && index <= 28) {
                return { rowSpan: 0 };
            }
            if (index == 29) {
                return { rowSpan: 9 };
            } else if (index > 29 && index <= 37) {
                return { rowSpan: 0 };
            }

        },
    },
    {
        title: '二级指标',
        dataIndex: 'two',
        align: 'center',
        customCell: (_, index) => {
            if (index == 0) {
                return { rowSpan: 13 };
            } else if (index > 0 && index <= 12) {
                return { rowSpan: 0 };
            }
            if (index == 13) {
                return { rowSpan: 3 };
            } else if (index > 13 && index <= 15) {
                return { rowSpan: 0 };
            }
            if (index == 16) {
                return { rowSpan: 3 };
            } else if (index > 16 && index <= 18) {
                return { rowSpan: 0 };
            }
            if (index == 19) {
                return { rowSpan: 4 };
            } else if (index > 19 && index <= 22) {
                return { rowSpan: 0 };
            }
            if (index == 23) {
                return { rowSpan: 4 };
            } else if (index > 23 && index <= 26) {
                return { rowSpan: 0 };
            }
            if (index == 27) {
                return { rowSpan: 2 };
            } else if (index > 26 && index <= 28) {
                return { rowSpan: 0 };
            }
            if (index == 29) {
                return { rowSpan: 4 };
            } else if (index > 29 && index <= 32) {
                return { rowSpan: 0 };
            }
            if (index == 33) {
                return { rowSpan: 4 };
            } else if (index > 33 && index <= 36) {
                return { rowSpan: 0 };
            }

        },
    },
    {
        title: '三级指标',
        align: 'center',
        dataIndex: 'three',

    },
    {
        title: '四级指标',
        dataIndex: 'four',
        align: 'center',
    },
])

</script>

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