gas-injection/src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

<template>
    <div class="dustPage">
        <div class="top-area">
            <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index"
                @click="topAreaClick(index)">
                <div class="top-title">{{ item.title }}</div>
                <div class="top-content">
                    <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
                        <span class="item-label">{{ items.label }}</span>
                        <span class="item-value">{{ items.value }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="center-area">
            <div class="center-t">
                <div class="t-box" v-for="(item, index) in centerAreaListT" :key="index">
                    <div class="box-label">{{ item.label }}</div>
                </div>
            </div>
            <div class="center-b">
                <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
                    <div class="box-label">{{ item.content }}</div>
                </div>
            </div>
        </div> -->
        <div class="bot-area">
            <echartLine :echartDataGq="echartDataFc" :maxY="maxY"></echartLine>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch, defineProps } from 'vue';
// import { centerAreaListT, } from '../fire.data'
import echartLine from './common/echartLine.vue'

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

let maxY = ref(3)
//顶部区域数据
let topAreaList = reactive<any[]>([])

//顶部区域激活选项
let activeIndex = ref(0)

//中间区域数据
// let centerAreaListB = reactive<any[]>([])
let choiceData = reactive<any[]>([])

//粉尘图表数据
let echartDataFc = reactive({
    maxData: {
        lengedData: '粉尘浓度',
        data: []
    },
    minData: {
        lengedData: '粉尘呼尘占比(%)',
        data: []
    },
    aveValue: {
        lengedData: '总尘浓度',
        data: []
    },
    xData: []
})

//顶部区域选项切换
function topAreaClick(index) {
    activeIndex.value = index
    // centerAreaListB.length = 0
    echartDataFc.maxData.data.length = 0
    echartDataFc.minData.data.length = 0
    echartDataFc.aveValue.data.length = 0
    echartDataFc.xData.length = 0
    // centerAreaListB.push(
    //     { content: choiceData[index].readData.dustval || '/' },
    //     { content: choiceData[index].readData.totalDust || '/' },
    //     { content: choiceData[index].readData.breathWeighted || '/' },
    //     { content: choiceData[index].readData.atomizingState || '/' },
    // )
    choiceData[index].history.forEach(el => {
        echartDataFc.maxData.data.push(el.dustval)
        echartDataFc.minData.data.push(el.ratio)
        echartDataFc.aveValue.data.push(el.totalDust)
        echartDataFc.xData.push(el.time)
    })
}

watch(() => props.listData, (val) => {
    if (JSON.stringify(val.common) != '{}') {
        topAreaList.length = 0
        let dustList=val.common.dust.slice(0,3)
        dustList.forEach(el => {
            topAreaList.push({
                title: el.strinstallpos,
                content: [
                    { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--', },
                    { ids: 1, label: '粉尘浓度(%)', value: el.readData.dustval || '--', },
                    { ids: 2, label: '喷雾水压', value: el.readData.waterPressure || '--', },
                    { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--', },
                ],
            },)
        })
        choiceData = val.common.dust
        // centerAreaListB.length = 0
        echartDataFc.maxData.data.length = 0
        echartDataFc.minData.data.length = 0
        echartDataFc.aveValue.data.length = 0
        echartDataFc.xData.length = 0
        if (choiceData[activeIndex.value]) {
            // centerAreaListB.push(
            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--'},
            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
            // )

            choiceData[activeIndex.value].history.forEach(el => {
                echartDataFc.maxData.data.push(el.dustval)
                echartDataFc.minData.data.push(el.ratio)
                echartDataFc.aveValue.data.push(el.totalDust)
                echartDataFc.xData.push(el.time)
            })


        } else {
            activeIndex.value = 0
            // centerAreaListB.push(
            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--' },
            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
            // )
            choiceData[activeIndex.value].history.forEach(el => {
                echartDataFc.maxData.data.push(el.dustval)
                echartDataFc.minData.data.push(el.ratio)
                echartDataFc.aveValue.data.push(el.totalDust)
                echartDataFc.xData.push(el.time)
            })
        }


    }
}, { deep: true })


</script>

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

    .top-area {
        height: 183px;
        display: flex;
        // justify-content: space-between;
        justify-content: flex-start;
        margin-bottom: 10px;

        .top-box {
            position: relative;
            width: 480px;
            height: 160px;
            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
            margin: 0px 20px;

            .top-title {
                width: 80%;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 6px;
                transform: translate(-50%, 0);
            }

            .top-content {
                position: absolute;
                top: 33px;
                left: 0;
                width: 100%;
                height: calc(100% - 33px);
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                cursor: pointer;

                .content-item {
                    position: relative;
                    width: 50%;
                    height: 50%;
                    background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;

                    .item-label {
                        position: absolute;
                        left: 52px;
                        top: 50%;
                        transform: translate(0, -44%);
                        font-size: 12px;
                    }

                    .item-value {
                        position: absolute;
                        right: 52px;
                        top: 50%;
                        transform: translate(0, -44%);
                        font-size: 12px;
                        font-family: 'douyuFont';
                        color: #3df6ff;
                    }
                }
            }
        }

        .top-box1 {
            position: relative;
            width: 480px;
            height: 183px;
            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
            margin: 0px 20px;

            .top-title {
                width: 80%;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 6px;
                transform: translate(-50%, 0);
            }

            .top-content {
                position: absolute;
                top: 33px;
                left: 0;
                width: 100%;
                height: calc(100% - 33px);
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                padding-bottom: 20px;
                box-sizing: border-box;
                cursor: pointer;

                .content-item {
                    position: relative;
                    width: 50%;
                    height: 50%;
                    background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;

                    .item-label {
                        position: absolute;
                        left: 52px;
                        top: 50%;
                        transform: translate(0, -44%);
                        font-size: 12px;
                    }

                    .item-value {
                        position: absolute;
                        right: 52px;
                        top: 50%;
                        transform: translate(0, -44%);
                        font-size: 12px;
                        font-family: 'douyuFont';
                        color: #3df6ff;
                    }
                }
            }
        }
    }

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

    //     .center-t {
    //         height: 50%;
    //         padding: 0px 80px;
    //         display: flex;
    //         justify-content: space-around;
    //         align-items: center;
    //         background: url('../../../../../assets/images/fire/dz.png') no-repeat;
    //         background-size: 100% 100%;
    //         box-sizing: border-box;

    //         .t-box {
    //             width: 218px;
    //             height: 97px;
    //             background: url('../../../../../assets/images/fire/dz1.png') no-repeat;

    //             .box-label {
    //                 text-align: center;
    //             }
    //         }
    //     }

    //     .center-b {
    //         height: 50%;
    //         padding: 0px 80px;
    //         display: flex;
    //         justify-content: space-around;
    //         align-items: center;
    //         box-sizing: border-box;

    //         .b-box {
    //             width: 218px;
    //             height: 97px;
    //             display: flex;
    //             flex-direction: column;
    //             justify-content: center;
    //             align-items: center;

    //             .box-label {
    //                 width: 169px;
    //                 height: 42px;
    //                 line-height: 42px;
    //                 text-align: center;
    //                 margin-bottom: 5px;
    //                 color: #3df6ff;
    //                 font-family: 'douyuFont';
    //                 background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
    //             }

    //         }
    //     }
    // }

    .bot-area {
        // height: calc(100% - 471px);
        height: calc(100% - 193px);
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>