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

<template>
    <div class="fireWork">
        <!-- 顶部区域 -->
        <div class="work-nav">
            <div class="nav" v-for="(item, index) in topList" :key="index">
                <div class="pic" v-if="item.imgSrc">
                    <img :src="imgUrl" alt="" />
                </div>
                <div class="content" v-if="item.label && item.value">
                    <span>{{ item.label }}</span>
                    <span>{{ item.value }}</span>
                </div>
                <div class="text" v-if="item.text">{{ item.text }}</div>
                <div class="percent" v-if="item.list.length != 0">
                    <div class="title">{{ item.label }}</div>
                    <div class="value">
                        <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
                            <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
                            <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间区域 -->
        <div class="center-echart">
            <div class="nav-title">
                <div class="title">光纤测温系统温度实时监测</div>
            </div>
            <div class="echart-box">
                <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw"></echartLine>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="bot-content">
            <div class="title">
                <div class="text">束管系统监测</div>
            </div>
            <div class="content">
                <div class="content-box" v-for="(item, index) in contentList" :key="index">
                    <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
                        <div class="content-title">{{ items.title }}</div>
                        <div class="content-item">
                            <span>{{ items.label }}</span>
                            <span class="bolds">{{ items.value }}</span>
                        </div>
                        <div class="content-item">
                            <span>{{ items.label1 }}</span>
                            <span class="bolds">{{ items.time }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="echart-box">
                <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, watch, defineProps } from 'vue';
import imgUrl from '../../../../../assets/images/fire/pie.png'
import echartLine from './common/echartLine.vue'
import echartLine1 from './common/echartLine1.vue'
import { topList, contentList, } from '../fire.data'

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

let maxY = ref(2000)
let echartDw = ref('(­°C)')
//光钎测温-图表数据
let echartDataGq = reactive({
    maxData: {
        lengedData: '当前温度',
        data: []
    },
    xData: [],
})
//束管监测-图表数据
let echartDataSg = reactive({
    xData: [],
    yData: [],
    lengedData: 'O₂',
})
let echartDataSgList = reactive<any[]>([])
//束管实时数据选项点击
function getSgClick(items) {
    echartDataSg.xData.length = 0
    echartDataSg.yData.length = 0
    echartDataSg.lengedData = items.title
    switch (items.title) {
        case 'O₂':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.o2val)
            })
            break;
        case 'C₂H₄':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.ch2val)
            })
            break;
        case 'CO':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.coval)
            })
            break;
        case 'CH₄':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.chval)
            })
            break;
        case 'CO₂':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.co2val)
            })
            break;
        case 'C₂H₂':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.gasval)
            })
            break;
    }
}

watch(() => props.listData, (val, val1) => {
    console.log(val, '火灾详情')
    if (JSON.stringify(val) != '{}') {
        echartDataGq.xData.length = 0
        echartDataGq.maxData.data.length = 0
        echartDataSgList.length = 0
        echartDataSg.xData.length = 0
        echartDataSg.yData.length = 0
        if (val.fiber.length != 0) {
            topList[0].value = val.fiber[0].readData.fmax
            topList[1].value = val.fiber[0].readData.fmin
            topList[2].value = val.fiber[0].readData.favg
            topList[3].text = val.fiber[0].warnFlag ? '报警' : '未报警'
            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
                echartDataGq.xData.push(el.pos)
                echartDataGq.maxData.data.push(el.value)
            })

        }

        if (val.bundletube.length != 0) {
            contentList[0].list[0].value = val.bundletube[0].readData.o2val
            contentList[0].list[1].value = val.bundletube[0].readData.ch2val
            contentList[1].list[0].value = val.bundletube[0].readData.coval
            contentList[1].list[1].value = val.bundletube[0].readData.chval
            contentList[2].list[0].value = val.bundletube[0].readData.co2val
            contentList[2].list[1].value = val.bundletube[0].readData.gasval
            contentList.forEach(el => {
                el.list.forEach(v => {
                    v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'))
                })
            })


            val.bundletube[0].history.forEach(el => {
                echartDataSg.xData.push(el.time)
                if (echartDataSg.lengedData == 'O₂') {
                    echartDataSg.yData.push(el.o2val)
                } else if (echartDataSg.lengedData == 'C₂H₄') {
                    echartDataSg.yData.push(el.ch2val)
                } else if (echartDataSg.lengedData == 'C₂H₂') {
                    echartDataSg.yData.push(el.gasval)
                } else if (echartDataSg.lengedData == 'CH₄') {
                    echartDataSg.yData.push(el.chval)
                } else if (echartDataSg.lengedData == 'CO') {
                    echartDataSg.yData.push(el.coval)
                } else if (echartDataSg.lengedData == 'CO₂') {
                    echartDataSg.yData.push(el.co2val)
                }
                echartDataSgList.push(el)
            })
        }
    }
}, { deep: true })


</script>

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

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

        .nav {
            display: flex;
            justify-content: center;
            align-items: center;

            &:nth-child(1) {
                flex: 1;
                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;
                height: 100%;
                border-right: 2px solid;
                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
            }

            &:nth-child(3) {
                flex: 1;
                height: 100%;
                border-right: 2px solid;
                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
            }

            &:nth-child(4) {
                flex: 0.6;
                color: #b3b8cc;
                font-size: 16px;
                height: 100%;
                border-right: 2px solid;
                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
            }

            &:nth-child(5) {
                flex: 1.4;
                height: 100%;

                .percent {
                    width: 100%;
                    height: 82%;
                    padding: 0px 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .title {
                        font-size: 14px;
                        padding: 5px 0px;
                        color: #b3b8cc;
                        text-align: center;
                    }

                    .value {
                        display: flex;
                        justify-content: space-between;

                        span {
                            font-family: 'douyuFont';
                            font-size: 18px;
                        }
                    }
                }
            }

            .pic {
                width: 30%;
                height: 82%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                height: 82%;
                margin-left: 15px;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                span {
                    font-size: 14px;

                    &:nth-child(1) {
                        padding: 5px 0px;
                        color: #b3b8cc;
                    }

                    &:nth-child(2) {
                        font-family: 'douyuFont';
                        font-size: 24px;
                        color: #3df6ff;
                    }
                }
            }
        }

        .nav:nth-child(1) .pic {
            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
            background-size: 50% 50%;
        }

        .nav:nth-child(2) .pic {
            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
            background-size: 50% 50%;
        }

        .nav:nth-child(3) .pic {
            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
            background-size: 50% 50%;

        }
    }

    .center-echart {
        width: 100%;
        height: 32%;
        padding: 15px;
        margin-bottom: 20px;
        box-sizing: border-box;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;

        .nav-title {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;

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

        .echart-box {
            width: 100%;
            height: calc(100% - 30px);
        }
    }

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

        .title {
            height: 30px;
            display: flex;
            justify-content: space-between;

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

        .content {
            height: calc(100% - 30px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .content-box {
                width: 100%;
                height: 29%;
                display: flex;
                justify-content: space-between;
                margin-top: 0px !important;
                .box-item {
                    position: relative;
                    width: 16%;
                    height: 100%;
                    background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
                    background-size: 100% 100%;
                    cursor: pointer;

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

                    .content-item {
                        position: absolute;
                        width: 93%;
                        height: 27%;
                        display: flex;
                        align-items: center;
                        padding: 0px 10px;
                        box-sizing: border-box;
                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
                        background-size: 100% 100%;

                        &:nth-child(2) {
                            left: 50%;
                            top: 28%;
                            transform: translate(-50%);
                            display: flex;
                            justify-content: space-between;
                        }

                        &:nth-child(3) {
                            left: 50%;
                            top: 62%;
                            transform: translate(-50%);
                            display: flex;
                            justify-content: space-between;
                        }

                        .bolds {
                            font-family: 'douyuFont';
                            color: #3df6ff;
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .echart-box {
            position: absolute;
            left: 50%;
            top: 50px;
            transform: translate(-50%, 0);
            width: 66%;
            height: calc(100% - 50px);
        }
    }
}
</style>