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

<template>
    <div class="closeWall">
        <div class="title">
            <div class="box">
                <div class="contents">
                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
                    <span class="text">{{ topContent.temperature }}</span>
                    <span class="dw">°C</span>
                </div>
                <div class="contents">
                    <div class="text">
                        <span class="label">位置 : </span>
                        <span class="value">{{ topContent.position }}</span>
                    </div>
                    <div class="text">
                        <span class="label">时间 : </span>
                        <span class="value">{{ topContent.time }}</span>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="text1">{{ topContent.warn }}</div>
            </div>
        </div>
        <div class="content">
            <div class="title-b">采空区密闭参数</div>
            <div class="card-btn">
                <div :class="activeIndex == index ? 'box1' : 'box'" v-for="(item, index) in mbList" :key="index"
                    @click="btnClick(item, index)">
                    <div class="label">{{ item.label }}</div>
                    <div class="box-item box-item1">
                        <span class="text-t">{{ `${item.label1}:` }}</span>
                        <span class="text-v">{{ `${item.nd}%` }}</span>
                    </div>
                    <div class="box-item box-item2">
                        <span class="text-t">{{ `${item.label2}:` }}</span>
                        <span class="text-v">{{ item.time1 }}</span>
                    </div>
                    <div class="box-item box-item3">
                        <span class="text-t">{{ `${item.label3}:` }}</span>
                        <span class="text-v">{{ item.address }}</span>
                    </div>
                </div>
            </div>
            <div class="echart-box">
                <div class="title-f">
                    <div class="title-text">{{ `${type}趋势` }}</div>
                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />
                </div>
                <div class="echarts-box">
                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

//密闭-顶部区域数据
let topContent = reactive({
    temperature: 0,
    position: '',
    time: '',
    warn: '',
})
//密闭参数列表
let mbList = reactive([
    {
        label: 'O2',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CO',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CO2',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CH4',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'C2H2',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'C2H4',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
])



//当前密闭参数激活选项
let activeIndex = ref(0)
//当前激活密闭参数类型
let type = ref('O2')
//时间查询参数
let TimeRange = reactive<any>([])

let echartDataSg1 = reactive({
    xData: [],
    yData: [],
})
let echartDataSgList = reactive<any[]>([])

//密闭参数选项切换
function btnClick(item, ind) {
    activeIndex.value = ind
    type.value = item.label
    echartDataSg1.xData.length = 0
    echartDataSg1.yData.length = 0
    switch (type.value) {
        case 'O2':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.o2val)

            })
            break;
        case 'C2H4':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.ch2val)

            })
            break;
        case 'CO':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.coval)

            })
            break;
        case 'CH4':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.chval)

            })
            break;
        case 'CO2':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.co2val)

            })
            break;
        case 'C2H2':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.gasval)

            })
            break;
    }

}
//时间选项切换
function onDataChange(value, dateString) {
    TimeRange = [dateString[0], dateString[1]]
}

watch(() => props.listData, (val) => {
    console.log(val, 'val---')
    if (JSON.stringify(val) != '{}') {
        if (val.bundletube.length != 0) {
            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : 0
            topContent.position = val.bundletube[0].stationname
            topContent.time = val.bundletube[0].warnTime
            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '低风险' : val.bundletube[0].warnLevel == 102 ? '中风险' : val.bundletube[0].warnLevel == 103 ? '高风险' : '报警'

            mbList[0].nd = val.bundletube[0].readData.o2val
            mbList[1].nd = val.bundletube[0].readData.coval
            mbList[2].nd = val.bundletube[0].readData.co2val
            mbList[3].nd = val.bundletube[0].readData.chval
            mbList[4].nd = val.bundletube[0].readData.ch2val
            mbList[5].nd = val.bundletube[0].readData.gasval
            mbList.forEach(el => {
                el.time1 = val.bundletube[0].readTime
                el.address = val.bundletube[0].strinstallpos
            })
            console.log(mbList, '=====000000')
            echartDataSg1.xData.length = 0
            echartDataSg1.yData.length = 0
            echartDataSgList.length = 0
            val.bundletube[0].history.forEach(v => {
                echartDataSg1.xData.push(v.time)
                echartDataSg1.yData.push(v.o2val)
                echartDataSgList.push(v)
            })


        }
    }

}, { immediate: true, deep: true })




</script>

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

    .title {
        width: 100%;
        height: 128px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;

        .box {
            display: flex;

            &:nth-child(1) {
                justify-content: space-around;
                align-items: center;
                flex: 2;
                height: 100%;
                border-right: 2px solid;
                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
            }

            &:nth-child(2) {
                flex: 1;
                justify-content: center;
                align-items: center;
                height: 100%;
            }

            .contents {
                height: 94px;

                &:nth-child(1) {
                    width: 40%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        position: relative;
                        width: 94px;
                        height: 94px;
                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
                        background-position: 50% 50%;
                    }

                    .text {
                        font-family: 'douyuFont';
                        font-size: 36px;
                        margin: 0px 15px;
                        color: #3df6ff;
                    }

                    .dw {
                        font-size: 16px;
                        color: #b3b8cc;
                    }
                }

                &:nth-child(2) {
                    width: 60%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .text {
                        font-size: 18px;

                        .label {
                            color: #b3b8cc;
                            font-weight: bold;
                        }

                        .value {
                            font-family: 'douyuFont';
                            color: #3df6ff;
                            margin-left: 10px;
                        }
                    }
                }
            }

            .text1 {
                font-size: 18px;
                color: #b3b8cc;
                font-weight: bold;
            }
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 148px);
        padding: 15px 20px 0px 20px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;

        .title-b {
            font-family: 'douyuFont';
            font-size: 16px;
            color: #3df6ff;
            margin-bottom: 10px;
        }

        .card-btn {
            height: 169px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;

            .box {
                position: relative;
                width: 248px;
                height: 100%;
                background: url('../../../../../assets/images/fire/1.png') no-repeat;
                cursor: pointer;

                .label {
                    position: absolute;
                    left: 50%;
                    top: 2px;
                    transform: translate(-50%);
                    font-size: 16px;
                    color: #fff;
                }

                .box-item {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, 0);
                    width: 226px;
                    height: 27px;
                    padding: 0px 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;

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

                    .text-v {
                        font-family: 'douyuFont';
                        font-size: 10px;
                        color: #3df6ff;
                    }
                }

                .box-item1 {
                    top: 32px;
                }

                .box-item2 {
                    top: 68px;
                }

                .box-item3 {
                    top: 104px;
                }
            }

            .box1 {
                position: relative;
                width: 248px;
                height: 100%;
                background: url('../../../../../assets/images/fire/2.png') no-repeat;
                cursor: pointer;

                .label {
                    position: absolute;
                    left: 50%;
                    top: 2px;
                    transform: translate(-50%);
                    font-size: 16px;
                    color: #fff;
                }

                .box-item {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, 0);
                    width: 226px;
                    height: 27px;
                    padding: 0px 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;

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

                    .text-v {
                        font-family: 'douyuFont';
                        font-size: 10px;
                        color: #3df6ff;
                    }
                }

                .box-item1 {
                    top: 32px;
                }

                .box-item2 {
                    top: 68px;
                }

                .box-item3 {
                    top: 104px;
                }
            }
        }

        .echart-box {
            height: calc(100% - 215px);
            border: 1px solid #114aac;

            .title-f {
                height: 40px;
                padding: 0px 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title-text {
                    font-family: 'douyuFont';
                    font-size: 16px;
                    color: #3df6ff;
                }
            }

            .echarts-box {
                height: calc(100% - 40px);
            }
        }
    }
}
</style>