gasInjection-project/src/views/vent/monitorManager/alarmMonitor/common/external-fourc.vue

<template>
    <div class="external-fourc">
        <div class="content-box">
            <div class="container-title">{{ tabLists.yw }}</div>
            <div v-if="monitorlistYw.length == 0" class="container-content1">
                <div class="noData-text">暂无数据</div>
            </div>
            <div v-else class="container-content">
                <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
                    <div class="content-box-text">
                        <div class="box-text-z">
                            <div class="text-label">值</div>
                            <div class="text-val">{{ item.val || '--' }}</div>
                        </div>
                        <div class="box-text-zt">
                            <div class="text-label">状态</div>
                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
                                || '--' }}
                            </div>
                        </div>
                        <div class="box-text-time">
                            <div class="text-label">时间</div>
                            <div class="text-val">{{ item.readTime || '--' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-box">
            <div class="container-title">{{ tabLists.wd }}</div>
            <div v-if="monitorlistWd.length == 0" class="container-content1">
                <div class="noData-text">暂无数据</div>
            </div>
            <div v-else class="container-content">
                <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
                    <div class="content-box-text">
                        <div class="box-text-z">
                            <div class="text-label">值</div>
                            <div class="text-val">{{ `${item.val} ${item.dw}` || '--' }}</div>
                        </div>
                        <div class="box-text-zt">
                            <div class="text-label">状态</div>
                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
                                || '--' }}
                            </div>
                        </div>
                        <div class="box-text-time">
                            <div class="text-label">时间</div>
                            <div class="text-val">{{ item.readTime || '--' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-box">
            <div class="container-title">{{ tabLists.pl }}</div>
            <div v-if="monitorlistPl.length == 0" class="container-content1">
                <div class="noData-text">暂无数据</div>
            </div>
            <div v-else class="container-content">
                <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
                    <div class="content-box-text">
                        <div class="box-text-z">
                            <div class="text-label">值</div>
                            <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
                        </div>
                        <div class="box-text-zt">
                            <div class="text-label">状态</div>
                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
                                || '--' }}
                            </div>
                        </div>
                        <div class="box-text-time">
                            <div class="text-label">时间</div>
                            <div class="text-val">{{ item.readTime || '--' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-box">
            <div class="container-title">{{ tabLists.co }}</div>
            <div v-if="monitorlistHy.length == 0" class="container-content1">
                <div class="noData-text">暂无数据</div>
            </div>
            <div v-else class="container-content">
                <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
                    <div class="content-box-text">

                        <div class="box-text-zt1">
                            <div class="text-label-hy">状态</div>
                            <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{
                                item.warnLevel_str || '--'
                                }}
                            </div>
                        </div>
                        <div class="box-text-time1">
                            <div class="text-label-hy">时间</div>
                            <div class="text-val-hy">{{ item.readTime || '--' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { topOutList, tabLists, } from '../common.data';

let props = defineProps({
    cgqData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

// //烟雾传感器列表数据
let monitorlistYw = ref<any[]>([]);
// //温度传感器列表数据
let monitorlistWd = ref<any[]>([]);
//喷淋装置列表数据
let monitorlistPl = ref<any[]>([]);
// //火焰传感器列表数据
let monitorlistHy = ref<any[]>([]);

watch(() => props.cgqData, (newV, oldV) => {
    if (newV.smoke.length != 0) {
        monitorlistYw.value = newV.smoke.map((el) => {
            el.smokeVal = el.readData.smokeval == '0' ? '无烟' : el.readData.smokeval == '1' ? '有烟' : el.readData.smokeval
            return {
                strinstallpos: el.strinstallpos,
                val: el.smokeVal,
                warnLevel_str: el.warnLevel_str,
                readTime: el.readTime,
            }
        });
    }

    if (newV.temperature.length != 0) {
        monitorlistWd.value = newV.temperature.map((el) => {
            return {
                strinstallpos: el.strinstallpos,
                // val: el.readData.fireval,
                val: el.readData.fireval,
                dw: '℃',
                warnLevel_str: el.warnLevel_str,
                readTime: el.readTime,
            }
        });
    }

    if (newV.spray.length != 0) {
        monitorlistPl.value = newV.spray.map((el) => {
            return { ...el }
        });
    }

    if (newV.co.length != 0) {
        monitorlistHy.value = newV.co.map((el) => {
            return { ...el }
        });
    }
}, { immediate: true })

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
    .external-fourc {
        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
    }
}

.external-fourc {
    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
    --image-z: url('/@/assets/images/fire/wy-z.png');
    --image-zt: url('/@/assets/images/fire/wy-zt.png');
    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
    --image-time: url('/@/assets/images/fire/wy-time.png');
    --image-time1: url('/@/assets/images/fire/wy-time2.png');
    --image-title: url('/@/assets/images/fire/wy-title.png');
    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
    --image-max: url('/@/assets/images/fire/max.svg');
    --image-min: url('/@/assets/images/fire/min.svg');
    --image-pj: url('/@/assets/images/fire/pj.svg');
    --image-1: url('/@/assets/images/fire/1.png');
    --image-contetn: url('/@/assets/images/fire/contetn.png');
    --image-2: url('/@/assets/images/fire/2.png');
    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .content-box {
        position: relative;
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        height: calc(50% - 10px);
        background: var(--image-bj2) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(1) {
            margin: 0px 20px 20px 0px;
        }

        &:nth-child(3) {
            margin: 0px 20px 0px 0px;
        }

        .container-title {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            top: 4px;
            color: #fff;
        }

        .container-content1 {
            position: absolute;
            width: 100%;
            top: 38px;
            height: calc(100% - 48px);
            background: var(--image-zwnr) no-repeat center;
            background-size: 100% 100%;
            overflow-y: auto;

            .noData-text {
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: 20px;
                color: #fff;
            }
        }

        .container-content {
            position: absolute;
            width: 100%;
            top: 38px;
            height: calc(100% - 48px);
            overflow-y: auto;

            .container-content-box {
                position: relative;
                width: 100%;
                height: 80px;
                margin-bottom: 10px;
                background: var(--image-title) no-repeat center;
                background-size: 100% 100%;
            }

            .content-box-title {
                position: absolute;
                left: 10px;
                color: #fff;
            }

            .content-box-text {
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: absolute;
                top: 22px;
                width: 100%;
                height: 58px;

                .box-text-z {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 50px;
                    width: 205px;
                    padding: 0px 30px;
                    background: var(--image-z) no-repeat center;
                    background-size: 100% 100%;

                }

                .box-text-zt {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 50px;
                    width: 205px;
                    padding: 0px 30px;
                    background: var(--image-zt) no-repeat center;
                    background-size: 100% 100%;
                }

                .box-text-zt1 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    height: 50px;
                    width: 258px;
                    background: var(--image-zt1) no-repeat center;
                    background-size: 100% 100%;
                }

                .box-text-time {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 50px;
                    width: 305px;
                    padding: 0px 30px;
                    background: var(--image-time) no-repeat center;
                    background-size: 100% 100%;
                }

                .box-text-time1 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    height: 50px;
                    width: 298px;
                    background: var(--image-time1) no-repeat center;
                    background-size: 100% 100%;
                }

                .text-label {
                    font-size: 12px;
                    color: #fff
                }

                .text-label-hy {
                    position: absolute;
                    left: 50px;
                    color: #fff;
                    font-size: 12px
                }

                .text-val-hy {
                    position: absolute;
                    left: 115px;
                    color: #fff;
                    font-size: 12px;
                }

                .text-val-hy1 {
                    position: absolute;
                    left: 115px;
                    color: #ff0000;
                    font-size: 12px;
                }

                .text-val-hy2 {
                    position: absolute;
                    left: 115px;
                    color: #91e609;
                    font-size: 12px;
                }

                .text-val {
                    font-size: 12px;
                    color: #fff
                }

                .text-val1 {
                    font-size: 12px;
                    color: #ff0000
                }

                .text-val2 {
                    font-size: 12px;
                    color: #91e609
                }
            }
        }
    }
}
</style>