mky-vent-base/src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

<template>
    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
    <div class="gasWarn">
        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
        <div class="alarm-menu">
            <div class="type-btn">
                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas"
                    :key="index" @click="btnClick(index)">
                    {{ item.name }}
                </div>
            </div>
            <div class="card-btn">
                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
                    @click="cardClick(ind, item)">
                    <div class="text">{{ item.name }}</div>
                    <div class="warn">{{ item.warn }}</div>
                </div>
            </div>
        </div>
        <div class="gas-content">
            <div style="width:100%;height:100%" v-if="isShow">
                <div class="top-area" v-if="topAreaListWs.length != 0">
                    <div class="title-t">
                        <div class="text-t">瓦斯抽采泵信息</div>
                    </div>
                    <div class="content-t">
                        <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
                            <div class="box-label">{{ item.label }}</div>
                            <div class="box-values">
                                <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
                                    <span>{{ `${items.name} : ` }}</span>
                                    <span :class="{
                                        'box-value': items.val == 0 && items.name == '报警状态',
                                        'box-value1': items.val == 101 && items.name == '报警状态',
                                        'box-value2': items.val == 102 && items.name == '报警状态',
                                        'box-value3': items.val == 103 && items.name == '报警状态',
                                        'box-value4': items.val == 104 && items.name == '报警状态',
                                        'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
                                    }">{{
                                        items.val == 0 && items.name == '报警状态'
                                            ? '正常'
                                            : items.val == 101 && items.name == '报警状态'
                                                ? '较低风险'
                                                : items.val == 102 && items.name == '报警状态'
                                                    ? '低风险'
                                                    : items.val == 103 && items.name == '报警状态'
                                                        ? '中风险'
                                                        : items.val == 104 && items.name == '报警状态'
                                                            ? '高风险'
                                                            : items.val == 201 && items.name == '报警状态'
                                                                ? '报警' : items.val == 1001 && items.name == '报警状态' ? '网络断开'
                                                                    : items.val
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
                    <div class="title-b">
                        <div class="text-b">安全监控测点信息</div>
                    </div>
                    <div class="content-b">
                        <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
                            <div class="item-l">
                                <div class="label-l">{{ item.label }}</div>
                                <div class="value-l">{{ `${item.value}%` }}</div>
                            </div>
                            <div class="item-r">
                                <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                                    <span>{{ `${items.label} : ` }}</span>
                                    <span :class="{
                                        'status-f': items.value == 1,
                                        'status-l': items.value == 0,
                                    }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:100%;height:100%" v-else>
                <warnTargetGas></warnTargetGas>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { sysTypeWarnList, sysWarn } from '../common.api'
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { useRouter } from 'vue-router';
import CustomHeader from '/@/components/vent/customHeader.vue';
import warnTargetGas from '../common/warnTargetGas.vue'
import { typeMenuListGas } from '../common.data'

const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
//左侧数据列表
let menuList = reactive<any[]>([])
//瓦斯顶部区域数据
let topAreaListWs = reactive<any[]>([]);
//瓦斯监控列表数据
let cardListWs = reactive<any[]>([]);
let router = useRouter()
//监测/指标激活索引
let activeIndex = ref(0);
let isShow = ref(true)

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(deviceID, flag?) {
    timer = setTimeout(
        async () => {
            await getSysWarnList(deviceID, 'gas');
            if (timer) {
                timer = null;
            }
            getMonitor(deviceID);
        },
        flag ? 0 : 1000
    );
}

//返回首页
function getBack() {
    router.push('/monitorChannel/monitor-alarm-home')
}

//获取预警详情弹窗右侧数据
function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
        // listData.common = res;
        topAreaListWs.length = 0;
        cardListWs.length = 0;
        if (JSON.stringify(res) != '{}') {
            res.pump.forEach((v) => {
                topAreaListWs.push({
                    label: v.strinstallpos || '--',
                    list: [
                        // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
                        { name: '报警状态', val: v.warnLevel || 0 },
                        { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
                        { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
                        { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
                        { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
                        { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
                        { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
                        {
                            name: '输入管道内标况流量(m³/min)',
                            val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
                        }, //v.readData.standardTraffic
                        { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
                    ],
                });
            });

            res.gas.forEach((el) => {
                el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
                cardListWs.push({
                    label: '甲烷',
                    // value: el.readData.gasC || '--',
                    value: 0,
                    listR: [
                        { id: 0, label: '测点类型', value: '瓦斯' },
                        { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
                        { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
                        { id: 3, label: '测点状态', value: el.warnFlag },
                    ],
                });
            });
        }
    });
}

//获取左侧菜单列表
async function getMenuList() {
    let res = await sysTypeWarnList({ type: 'gas' })
    if (res.length != 0) {
        menuList.length = 0
        res.forEach((el) => {
            menuList.push({
                name: el.systemname,
                warn: '低风险',
                deviceID: el.id,
                strtype: el.strtype,
            });
        });
        getMonitor(menuList[0].deviceID, true);
    }
}

//监测/预警指标选项切换
function btnClick(ind) {
    activeIndex.value = ind;
    clearTimeout(timer);
    switch (ind) {
        case 0:
            activeIndex1.value = 0;
            isShow.value = true
            break;
        case 1:
            activeIndex1.value = 0;
            isShow.value = false
            break;
    }
}

//菜单选项切换
function cardClick(ind, item) {
    activeIndex1.value = ind;
    clearTimeout(timer);
    getMonitor(item.deviceID, true);
}

onMounted(() => {
    getMenuList()
})
onUnmounted(() => {
    if (timer) {
        clearTimeout(timer);
        timer = undefined;
    }
});

</script>

<style lang="less" scoped>
.gasWarn {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .alarm-menu {
        height: 100%;
        width: 15%;

        .type-btn {
            width: 100%;
            height: 28px;
            line-height: 28px;
            border: 1px solid #0058ee;
            margin-bottom: 20px;
            border-radius: 5px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .btn {
                width: 50%;
                height: 100%;
                font-size: 14px;
                text-align: center;
                color: #fff;
                cursor: pointer;
            }

            .btn1 {
                width: 50%;
                height: 100%;
                font-size: 14px;
                color: #fff;
                text-align: center;
                border-radius: 2px;
                background: #0058ee;
                cursor: pointer;
            }
        }

        .card-btn {
            width: 100%;
            height: calc(100% - 48px);
            overflow-y: auto;

            .btn {
                position: relative;
                width: 81%;
                height: 14%;
                margin-bottom: 10%;
                font-family: 'douyuFont';
                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;

                .text {
                    width: 80%;
                    position: absolute;
                    left: 50%;
                    top: 28px;
                    font-size: 16px;
                    color: #01fefc;
                    text-align: center;
                    transform: translate(-50%, 0);
                }

                .warn {
                    width: 100%;
                    position: absolute;
                    left: 50%;
                    bottom: 14px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    transform: translate(-50%, 0);
                }
            }

            .btn1 {
                position: relative;
                width: 100%;
                height: 14%;
                margin-bottom: 10%;
                font-family: 'douyuFont';
                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;

                .text {
                    width: 80%;
                    position: absolute;
                    left: 50%;
                    top: 28px;
                    font-size: 16px;
                    color: #01fefc;
                    text-align: center;
                    transform: translate(-62%, 0);
                }

                .warn {
                    width: 100%;
                    position: absolute;
                    left: 50%;
                    bottom: 14px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    transform: translate(-60%, 0);
                }
            }
        }
    }

    .gas-content {
        position: relative;
        width: calc(85% - 10px);
        height: 100%;
        margin-left: 10px;
        padding: 15px;
        background: url('../../../../../assets/images/fire/border.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;

        .top-area {
            height: 356px;
            margin-bottom: 10px;
            padding: 10px;
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;

            .title-t {
                height: 30px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .text-t {
                    font-family: 'douyuFont';
                    font-size: 14px;
                    color: #fff;
                }
            }

            .content-t {
                width: 100%;
                height: 276px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 10px;
                box-sizing: border-box;

                .top-box {
                    position: relative;
                    width: 724px;
                    height: 100%;
                    background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
                    background-size: 100% 100%;

                    .box-label {
                        position: absolute;
                        left: 50%;
                        top: 198px;
                        transform: translate(-50%, 0);
                        width: 80%;
                        font-family: 'douyuFont';
                        font-size: 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        word-wrap: break-word;
                        color: #fff;
                    }

                    .box-values {
                        position: absolute;
                        left: 50%;
                        top: 26px;
                        transform: translate(-50%, 0);
                        width: 84%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-wrap: wrap;

                        .value-b {
                            width: calc(50% - 10px);
                            height: 25px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #fff;
                            font-size: 14px;

                            span {
                                font-size: 14px;

                                &:last-child {
                                    font-family: 'douyuFont';
                                    color: rgb(0, 242, 255);
                                }
                            }

                            .box-value {
                                color: rgb(145, 230, 9) !important;
                            }

                            .box-value1 {
                                color: rgb(0, 242, 255) !important;
                            }

                            .box-value2 {
                                color: #ffff35 !important;
                            }

                            .box-value3 {
                                color: #ffbe69 !important;
                            }

                            .box-value4 {
                                color: #ff6f00 !important;
                            }

                            .box-value5 {
                                color: #ff0000 !important;
                            }
                        }
                    }
                }
            }

        }

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

            .title-b {
                height: 30px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .text-b {
                    font-family: 'douyuFont';
                    font-size: 14px;
                    color: #fff;
                }
            }

            .content-b {
                height: calc(100% - 40px);
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                overflow-y: auto;

                .card-b {
                    position: relative;
                    width: 30%;
                    height: 128px;
                    margin: 0px 15px 15px 15px;
                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
                    background-size: 100% 100%;

                    .item-l {
                        position: absolute;
                        left: 32px;
                        top: 50%;
                        transform: translate(0, -50%);
                        width: 89px;
                        height: 98px;
                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;

                        .label-l {
                            position: absolute;
                            left: 50%;
                            top: 7px;
                            color: #fff;
                            font-size: 14px;
                            transform: translate(-50%, 0);
                        }

                        .value-l {
                            position: absolute;
                            left: 50%;
                            top: 50px;
                            transform: translate(-50%, 0);
                            font-family: 'douyuFont';
                            font-size: 16px;
                            color: #3df6ff;
                        }
                    }

                    .item-r {
                        position: absolute;
                        left: 132px;
                        top: 50%;
                        transform: translate(0, -50%);
                        height: 128px;
                        padding: 5px 0px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        box-sizing: border-box;

                        .content-r {
                            display: flex;

                            span {
                                font-size: 14px;
                                color: #fff;

                                &:first-child {
                                    display: inline-block;
                                    width: 68px;
                                }

                                &:last-child {
                                    display: inline-block;
                                    width: calc(100% - 68px);
                                }
                            }

                            .status-f {
                                color: #ff0000;
                            }

                            .status-l {
                                color: #3df6ff;
                            }
                        }
                    }
                }
            }
        }

        .bot-area1 {
            height: 100%;
            padding: 10px 15px 0px 15px;
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;

            .title-b {
                height: 30px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .text-b {
                    font-family: 'douyuFont';
                    font-size: 14px;
                    color: #fff;
                }
            }

            .content-b {
                width: 100%;
                height: calc(100% - 40px);
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                overflow-y: auto;

                .card-b {
                    position: relative;
                    width: 30%;
                    height: 128px;
                    margin: 0px 15px 15px 15px;
                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
                    background-size: 100% 100%;

                    .item-l {
                        position: absolute;
                        left: 32px;
                        top: 50%;
                        transform: translate(0, -50%);
                        width: 89px;
                        height: 98px;
                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;

                        .label-l {
                            position: absolute;
                            left: 50%;
                            top: 7px;
                            font-size: 14px;
                            color: #fff;
                            transform: translate(-50%, 0);
                        }

                        .value-l {
                            position: absolute;
                            left: 50%;
                            top: 50px;
                            transform: translate(-50%, 0);
                            font-family: 'douyuFont';
                            font-size: 16px;
                            color: #3df6ff;
                        }
                    }

                    .item-r {
                        position: absolute;
                        left: 132px;
                        top: 50%;
                        transform: translate(0, -50%);
                        height: 128px;
                        padding: 5px 0px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        box-sizing: border-box;

                        .content-r {
                            display: flex;

                            span {
                                font-size: 14px;
                                color: #fff;

                                &:first-child {
                                    display: inline-block;
                                    width: 68px;
                                }

                                &:last-child {
                                    display: inline-block;
                                    width: calc(100% - 68px);
                                }
                            }

                            .status-f {
                                color: #ff0000;
                            }

                            .status-l {
                                color: #3df6ff;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>