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

<template>
    <div class="warnTargetFire">
        <div class="top-area">
            <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 374 }">
                <template #bodyCell="{ column, text }">
                    <template v-if="column.dataIndex === 'name'">
                        <a href="javascript:;">{{ text }}</a>
                    </template>
                </template>
            </a-table>
        </div>
        <div class="bot-area">
            <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
                :heightCanvas="heightCanvas"></warnZb>
        </div>

    </div>
</template>

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

let widthV = ref('80%')
let heightV = ref('80%')
let coordDw = ref<any[]>([9, 30, 64, 110, 170, 204,])
let widthCanvas = ref(1508)
let heightCanvas = ref(270)
let tableData = ref<any[]>([
    { yjdj: '灰色预警', zrjd: '氧化阶段', zb: 'CO,O₂', tj: '当O₂浓度为8%~15%时CO<200ppm;当O₂浓度为15%~18%时，CO<100ppm;当O₂浓度为时，CO<50ppm',wd:'T0⊂(30,50)', ckz: '' },
    { yjdj: '蓝色预警', zrjd: '自热阶段', zb: 'CO,O₂,(CO*100)/△O₂', tj: '超过氧化阶段条件',wd:'T0⊂(50,70)', ckz: '0.2~0.5' },
    { yjdj: '黄色预警', zrjd: '临界阶段', zb: 'CO,O₂,(CO*100)/△O₂', tj: '超过自热阶段条件',wd:'T0⊂(70,100)', ckz: '0.5-0.6' },
    { yjdj: '橙色预警', zrjd: '热解阶段', zb: '(CO*100)/△O2,C₂H₄', tj: '超过临界阶段条件',wd:'T0⊂(100,150)', ckz: '>0.6>0' },
    { yjdj: '红色预警', zrjd: '裂变阶段', zb: 'C₂H₄,C₂H₆,C₂H₄', tj: '超过热解阶段条件',wd:'T0⊂(150,210)', ckz: '>0极大' },
    { yjdj: '黑色预警', zrjd: '燃烧阶段', zb: 'C2H₂', tj: '超过裂变阶段条件',wd:'T0>210', ckz: '>0' },
])

let columns = reactive([

    {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        width: 80,
        align: 'center',
        customRender: ({ index }) => {
            return `${index + 1}`;
        },
    },
    {
        title: '预警等级',
        dataIndex: 'yjdj',
        align: 'center',
    },
    {
        title: '煤自燃阶段',
        dataIndex: 'zrjd',
        align: 'center',
    },
    {
        title: '指标',
        align: 'center',
        dataIndex: 'zb',
    },
    {
        title: '条件',
        align: 'center',
        dataIndex: 'tj',
    },
    {
        title: '温度',
        align: 'center',
        dataIndex: 'wd',
    },
    {
        title: '参考值',
        align: 'center',
        dataIndex: 'ckz',
    },
])

</script>

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

    .top-area {
        height: 55%;
        margin-bottom: 15px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;
    }

    .bot-area {
        height: calc(45% - 10px);
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;

    }

}
</style>