hsq-pro/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="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>
                <!-- <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
                    placeholder="请选择" @change="handleChange">
                    <a-select-option v-for="device in pointList" :key="device.value" :value="device.value">{{ device.label
                    }}
                    </a-select-option>
                </a-select> -->
            </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 class="search">
                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />

                    <a-select style="width: 240px; margin-left: 10px" v-model="pointCode1" allowClear
                        class="code-mode-select" placeholder="请选择" @change="handleChange1">
                        <a-select-option v-for="device in pointList1" :key="device.value" :value="device.value">{{
                            device.label }}
                        </a-select-option>
                    </a-select>
                </div> -->
            </div>
            <div class="content">
                <div class="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: 'O2',
})
let echartDataSgList = reactive<any[]>([])
//光钎测温测点编号
// let pointCode = ref('')
//束管监测-查询时间
// let TimeRange = reactive<any>([])
//束管监测-测点编号
// let pointCode1 = ref('')


//光钎测温测点编号选项切换
// function handleChange(val) {
//     pointCode.value = val
// }
//束管监测-时间选项切换
// function onDataChange(value, dateString) {
//     TimeRange = [dateString[0], dateString[1]]
// }
//束管监测测点编号选项切换
// function handleChange1(val) {
//     pointCode1.value = val
// }
//束管实时数据选项点击
function getSgClick(items) {
    echartDataSg.xData.length = 0
    echartDataSg.yData.length = 0
    echartDataSg.lengedData = items.title
    switch (items.title) {
        case 'O2':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.o2val)
            })
            break;
        case 'C2H4':
            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 'CH4':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.chval)
            })
            break;
        case 'CO2':
            echartDataSgList.forEach(el => {
                echartDataSg.xData.push(el.time)
                echartDataSg.yData.push(el.co2val)
            })
            break;
        case 'C2H2':
            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 == 'O2') {
                    echartDataSg.yData.push(el.o2val)
                } else if (echartDataSg.lengedData == 'C2H4') {
                    echartDataSg.yData.push(el.ch2val)
                } else if (echartDataSg.lengedData == 'C2H2') {
                    echartDataSg.yData.push(el.gasval)
                } else if (echartDataSg.lengedData == 'CH4') {
                    echartDataSg.yData.push(el.chval)
                } else if (echartDataSg.lengedData == 'CO') {
                    echartDataSg.yData.push(el.coval)
                } else if (echartDataSg.lengedData == 'CO2') {
                    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: 115px;
        width: 100%;
        margin-bottom: 20px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        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: 94px;
                    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: 94px;
                height: 94px;

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

            .content {
                height: 94px;
                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;
            background-position: 50% 50%;
        }

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

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

    .center-echart {
        width: 100%;
        height: 242px;
        padding: 15px;
        margin-bottom: 20px;
        box-sizing: border-box;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        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(100% - 397px);
        padding: 15px 15px 0px 15px;
        box-sizing: border-box;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;

        .title {
            height: 32px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

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

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

            .box {
                width: 100%;
                height: 90px;
                display: flex;
                justify-content: space-between;

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

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

                    .content-item {
                        position: absolute;
                        width: 226px;
                        height: 24px;
                        line-height: 24px;
                        padding: 0px 10px;
                        box-sizing: border-box;
                        color: #fff;
                        font-size: 14px;
                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
                        background-size: 100% 100%;

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

                        &:nth-child(3) {
                            left: 50%;
                            top: 56px;
                            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: 57px;
            transform: translate(-50%, 0);
            width: calc(100% - 514px);
            height: calc(100% - 57px);
        }
    }
}
</style>