mky-vent-base/src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

<template>
    <div class="gasPage">
        <div class="top-area" v-if="topAreaListWs.length != 0">
            <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 && 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 }}</span>
                    </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>
</template>

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

let props = defineProps({
    listData: Object,
});

//瓦斯顶部区域数据
let topAreaListWs = reactive<any[]>([])

//瓦斯监控列表数据
let cardListWs = reactive<any[]>([])



watch(() => props.listData, (val) => {
    console.log(val, '瓦斯详情数据-------')
    topAreaListWs.length = 0
    cardListWs.length = 0
    if (JSON.stringify(val.common) != '{}') {
        val.common.pump.forEach(v => {
            topAreaListWs.push({
                label: v.strinstallpos || '--',
                list: [
                    { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
                    { name: '报警状态', val: v.warnLevel || 0 },
                ]
            })
        })

        val.common.gas.forEach(el => {
            cardListWs.push({
                label: '甲烷',
                value: el.readData.gasC || '--',
                listR: [
                    { id: 0, label: '测点类型', value: el.typeName || '--' },
                    { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
                    { id: 2, label: '数据时间', value: el.readTime || '--' },
                    { id: 3, label: '测点状态', value: el.warnFlag },
                ]
            })
        })
    }
}, { immediate: true, deep: true })

</script>

<style lang="less" scoped>
@font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
}

.gasPage {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .top-area {
        height: 17%;
        margin: 10px 0px;
        display: flex;
        justify-content: space-between;

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

            .box-label {
                position: absolute;
                left: 50%;
                top: 86px;
                transform: translate(-50%, 0);
                width: 80%;
                display: flex;
                justify-content: center;
                align-items: center;
                word-wrap: break-word;
            }

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

                .value-b {
                    width: calc(50% - 10px);
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    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(83% - 20px);
        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: 16px;
            }

            // .select-b {
            //     display: flex;
            //     justify-content: flex-start;
            //     align-items: center;
            // }
        }

        .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: 23%;
                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;
                        transform: translate(-50%, 0);
                    }

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

                @media screen and (max-width:1920px) {
                    .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;

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

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

                            .status-f {
                                color: #ff0000;
                            }

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


                    }
                }


                @media screen and (min-width: 1921px) and (max-width:2560px) {
                    .item-r {
                        position: absolute;
                        left: 138px;
                        top: 50%;
                        transform: translate(0, -50%);
                        width: calc(100% - 138px);
                        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;

                                &: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: 16px;
            }

            // .select-b {
            //     display: flex;
            //     justify-content: flex-start;
            //     align-items: center;
            // }
        }

        .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: 23%;
                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;
                        transform: translate(-50%, 0);
                    }

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

                @media screen and (max-width:1920px) {
                    .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;

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

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

                            .status-f {
                                color: #ff0000;
                            }

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


                    }
                }

                @media screen and (min-width: 1921px) and (max-width:2560px) {
                    .item-r {
                        position: absolute;
                        left: 138px;
                        top: 50%;
                        transform: translate(0, -50%);
                        width: calc(100% - 138px);
                        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;

                                &: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>