gasInjection-project/src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

<template>
    <div class="mainWell">
        <!-- 光钎测温 -->
        <div class="work-nav" v-if="listData.bundletube.length == 0 && strType!='sys_coalseam'">
            <div class="nav" v-for="(item, index) in topOutList" :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>
        </div>
        <!-- 束管监测 -->
        <div class="work-nav" v-if="listData.bundletube.length!=0 && strType!='sys_coalseam'">
            <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="center-box" v-if="strType!='sys_coalseam'">
            <div class="box" v-for="(items, index) in tabList" :key="index">
                <div class="title">
                    <span class="label">{{ items.label }}</span>
                    <span class="details">{{ `${items.details}>>` }}</span>
                </div>
                <div class="content">
                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columns"
                        :data-source="monitorlistYw" :pagination="false">
                        <span slot="action" slot-scope="text, record"></span>
                    </a-table>
                    <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
                        :pagination="false" :scroll="{ y: 273 }">
                        <span slot="action" slot-scope="text, record"> </span>
                    </a-table>
                    <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
                        :data-source="monitorlistPl" :pagination="false">
                        <span slot="action" slot-scope="text, record"> </span>
                    </a-table>
                </div>
            </div>
        </div>

        <div  :class="listData.fiber.length!=0 ? 'center-box1' : 'center-box2'" v-if="strType=='sys_coalseam'">
            <div class="box" v-for="(items, index) in tabLists" :key="index">
                <div class="title">
                    <span class="label">{{ items.label }}</span>
                    <span class="details">{{ `${items.details}>>` }}</span>
                </div>
                <div class="content">
                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320 }" :columns="columns"
                        :data-source="monitorlistYw" :pagination="false">
                        <span slot="action" slot-scope="text, record"></span>
                    </a-table>
                    <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
                        :pagination="false" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320}">
                        <span slot="action" slot-scope="text, record"> </span>
                    </a-table>
                    <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320 }" :columns="columns"
                        :data-source="monitorlistPl" :pagination="false">
                        <span slot="action" slot-scope="text, record"> </span>
                    </a-table>

                    <a-table v-if="index == 3" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320}" :columns="columns"
                        :data-source="monitorlistWd" :pagination="false">
                        <span slot="action" slot-scope="text, record"> </span>
                    </a-table>
                </div>
            </div>
        </div>
        <div :class="strType=='sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && listData.fiber.length!=0">
            <div class="footer-title">
                <div class="echart-label">光钎测温系统实时温度监测</div>
            </div>
            <div class="echart-content">
                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
            </div>
        </div>

        <!-- 束管监测 -->
        <div class="content-s" v-if="listData.bundletube.length!=0 && strType!='sys_coalseam'">
            <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>
                </div>
                <div class="echarts-box">
                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch, defineProps } from 'vue';
import { topOutList, tabList,tabLists, columns, } from '../fire.data'
import imgUrl from '../../../../../assets/images/fire/pie.png'
import echartLine2 from './common/echartLine2.vue'
import echartLine1 from './common/echartLine1.vue'

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


//束管监测-顶部区域数据
let topContent = reactive({
    temperature: 0,
    position: '',
    time: '',
    warn: '',
})
//束管监测当前密闭参数激活选项
let activeIndex = ref(0)
//束管监测当前激活密闭参数类型
let type = ref('O₂')
//束管监测密闭参数列表
let mbList = reactive([
    {
        label: 'O₂',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CO',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CO₂',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'CH₄',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'C₂H₂',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
    {
        label: 'C₂H₄',
        label1: '浓度',
        label2: '时间',
        label3: '位置',
        nd: 0,
        time1: '',
        address: '',
    },
])
let echartDataSg1 = reactive({
    xData: [],
    yData: [],
    lengedData: 'O₂',
})
let echartDataSgList = reactive<any[]>([])

//外因火灾温度监测-图表数据
let echartDataWd = reactive({
    xData: [],
    maxData: {
        data: [],
        lengedData: '实时温度',
    },
})

//烟雾传感器列表数据
let monitorlistYw = reactive([])


//火焰传感器列表数据
let monitorlistHy = reactive([])


//喷淋装置列表数据
let monitorlistPl = reactive([])

//温度传感器列表数据
let monitorlistWd=reactive([])

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

            })
            break;
        case 'C₂H₄':
            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 'CH₄':
            echartDataSgList.forEach(el => {
                echartDataSg1.xData.push(el.time)
                echartDataSg1.yData.push(el.chval)

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

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

            })
            break;
    }

}


watch(() => props.listData, (val) => {
    console.log(val, 'val---------------')
    props.listData = val
    if (JSON.stringify(val) != '{}') {
        echartDataSg1.xData.length = 0
        echartDataSg1.yData.length = 0
        echartDataSgList.length = 0
        echartDataWd.xData.length = 0
        echartDataWd.maxData.data.length = 0
        monitorlistYw.length = 0
        monitorlistHy.length = 0
        monitorlistPl.length = 0
        monitorlistWd.length=0
        if (val.fiber.length != 0) {
            topOutList[0].value = val.fiber[0].readData.fmax
            topOutList[1].value = val.fiber[0].readData.fmin
            topOutList[2].value = val.fiber[0].readData.favg
            topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常'
            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
                echartDataWd.xData.push(el.pos)
                echartDataWd.maxData.data.push(el.value)
            })
        }

        if (val.bundletube.length != 0) {
            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
            topContent.position = val.bundletube[0].strinstallpos || '--'
            topContent.time = val.bundletube[0].readTime || '--'
            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '较低风险' : val.bundletube[0].warnLevel == 102 ? '低风险' : val.bundletube[0].warnLevel == 103 ? '中风险' : val.bundletube[0].warnLevel == 104 ? '高风险' : val.bundletube[0].warnLevel == 201 ? '报警' : '正常'
            val.bundletube[0].history.forEach(v => {
                echartDataSg1.xData.push(v.time)
                if (echartDataSg1.lengedData == 'O₂') {
                    echartDataSg1.yData.push(v.o2val)
                } else if (echartDataSg1.lengedData == 'C₂H₄') {
                    echartDataSg1.yData.push(v.ch2val)
                } else if (echartDataSg1.lengedData == 'CO') {
                    echartDataSg1.yData.push(v.coval)
                } else if (echartDataSg1.lengedData == 'CH₄') {
                    echartDataSg1.yData.push(v.chval)
                } else if (echartDataSg1.lengedData == 'CO₂') {
                    echartDataSg1.yData.push(v.co2val)
                } else if (echartDataSg1.lengedData == 'C₂H₂') {
                    echartDataSg1.yData.push(v.gasval)
                }
                echartDataSgList.push(v)
            })
        }

        if (val.smoke.length != 0) {
            val.smoke.forEach(el => {
                monitorlistYw.push(el)
            })
        }


        if (val.fire.length != 0) {
            val.fire.forEach(el => {
                monitorlistHy.push(el)
            })
        }

        if (val.spray.length != 0) {
            val.spray.forEach(el => {
                monitorlistPl.push(el)
            })
        }

        if(val.temperature.length!=0){
            val.temperature.forEach(el=>{
                monitorlistWd.push(el)
            })
        }

    }

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


</script>

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

    .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: 1.2;
                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: 0.8;
                color: #2b87ff;
                font-size: 14px;
                height: 100%;
            }

            .pic {
                width: 26%;
                height: 84%;

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

            .content {
                height: 84%;
                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: 20px;
                        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%;
        }



       
        .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: 73%;

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

                    img {
                        position: relative;
                        width: 23%;
                        height: 100%;
                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
                        background-size: 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;
            }
        }
    }

    .center-box {
        height: 47%;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .box {
            display: flex;
            flex-direction: column;
            width: 32%;
            height: 100%;
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
            background-size: 100% 100%;

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

            .title {
                width: 100%;
                height: 40px;
                padding: 0px 15px;
                margin-bottom: 10px;
                border-bottom: 1px solid #0c3c88;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .label {
                    // font-family: 'douyuFont';
                    font-size: 16px;
                    color: #fff;
                }

                .details {
                    font-size: 14px;
                    color: #1f81df;
                }
            }

            .content {
                height: calc(100% - 40px);
                margin-bottom: 10px;
            }
        }
    }

    .center-box1 {
        height: 70%;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;

        .box {
            display: flex;
            flex-direction: column;
            width: calc(50% - 10px);
            height:calc(50% - 10px);
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
            background-size: 100% 100%;

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

            .title {
                width: 100%;
                height: 40px;
                padding: 0px 15px;
                margin-bottom: 10px;
                border-bottom: 1px solid #0c3c88;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

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

                .details {
                    font-size: 14px;
                    color: #1f81df;
                }
            }

            .content {
                height: calc(100% - 40px);
                margin-bottom: 10px;
            }
        }
    }

    .center-box2 {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;

        .box {
            display: flex;
            flex-direction: column;
            width: calc(50% - 10px);
            height:calc(50% - 10px);
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
            background-size: 100% 100%;

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

            .title {
                width: 100%;
                height: 40px;
                padding: 0px 15px;
                margin-bottom: 10px;
                border-bottom: 1px solid #0c3c88;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

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

                .details {
                    font-size: 14px;
                    color: #1f81df;
                }
            }

            .content {
                height: calc(100% - 40px);
                margin-bottom: 10px;
            }
        }
    }

    .footer-box {
        height: calc(38% - 40px);
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;

        .footer-title {
            height: 30px;
            padding: 0px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .echart-label {
                font-size: 16px;
                color: #fff;
            }
        }

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

    .footer-box1 {
        height: calc(30% - 20px);
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;

        .footer-title {
            height: 30px;
            padding: 0px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .echart-label {
                font-size: 16px;
                color: #fff;
            }
        }

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

    .content-s{
        width: 100%;
        height: 608px;
        padding: 15px 20px 0px 20px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;
        box-sizing: border-box;
        .title-b {
            height: 30px;
            line-height: 30px;
            font-family: 'douyuFont';
            font-size: 16px;
            color: #3df6ff;
        }

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

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

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

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

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

                    .text-v {
                        width: 83%;
                        font-family: 'douyuFont';
                        font-size: 10px;
                        color: #3df6ff;
                        display: flex;
                        justify-content: flex-end;
                    }
                }

               
                .box-item1 {
                    top: 24%;
                }

                .box-item2 {
                    top: 50%;
                }

                .box-item3 {
                    top: 75%;
                }
            }

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

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

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

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

                    .text-v {
                        width: 83%;
                        font-family: 'douyuFont';
                        font-size: 10px;
                        color: #3df6ff;
                        display: flex;
                        justify-content: flex-end;
                    }
                }

                .box-item1 {
                    top: 19%;
                }

                .box-item2 {
                    top: 41%;
                }

                .box-item3 {
                    top: 63%;
                }
            }
        }

        .echart-box {
            height: calc(72% - 41px);
            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>