vent-template/src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

<template>
    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
    <div class="ventilateWarn">
        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
        <div class="alarm-menu">
            <div class="card-btn">
                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
                    @click="cardClick(ind, item)">
                    <div class="text">{{ item.name }}</div>
                    <div class="warn">{{ item.warn }}</div>
                </div>
            </div>
        </div>
        <div class="dustPage">
            <div class="top-area">
                <div class="top-box" v-for="(item, index) in topAreaList" :key="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-value1': items.value == 0,
                                'item-value2': items.value == 101,
                                'item-value3': items.value == 102,
                                'item-value4': items.value == 103,
                                'item-value5': items.value == 104,
                                'item-value6': items.value == 201,
                                'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,

                            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' :
                                items.value ==
                                    103 ?
                                    '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-area">
                <div class="center-t">
                    <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
                        <div class="box-label">{{ item.label }}</div>
                    </div>
                </div>
                <div class="center-b">
                    <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
                        <div class="box-label">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <div class="bot-area">
                <div class="title-t">
                    <div class="text-t">通风信息状态监测</div>
                </div>
                <div class="echart-boxd">
                    <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
                </div>

            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { sysTypeWarnList, sysWarn } from '../common.api'
import { centerAreaListT1, centerAreaListB1 } from '../common.data';
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { useRouter } from 'vue-router';
import echartLine from '../common/echartLine.vue';
import CustomHeader from '/@/components/vent/customHeader.vue';

const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
//左侧数据列表
let menuList = reactive<any[]>([])
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
let maxY = ref(0)
let echartDw = ref('(m³/min)')
//报警区域数据
let topAreaList = reactive<any[]>([]);
//通风图表数据
const echartDataFc1 = reactive({
    maxData: {
        lengedData: '进风量',
        data: []
    },
    minData: {
        lengedData: '回风量',
        data: []
    },
    aveValue: {
        lengedData: '需风量',
        data: []
    },
    xData: [],
});
let router = useRouter()

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(deviceID, flag?) {
    timer = setTimeout(
        async () => {
            await getSysWarnList(deviceID, 'vent');
            if (timer) {
                timer = null;
            }
            getMonitor(deviceID);
        },
        flag ? 0 : 1000
    );
}
//返回首页
function getBack() {
    router.push('/monitorChannel/monitor-alarm-home')
}
//菜单选项切换
function cardClick(ind, item) {
    activeIndex1.value = ind;
    clearTimeout(timer);
    getMonitor(item.deviceID, true);
}
//获取左侧数据列表
async function getMenuList() {
    let res = await sysTypeWarnList({ type: 'vent' })
    console.log(res, '通风预警监测左侧列表数据-------------')
    if (res.length != 0) {
        menuList.length = 0
        res.forEach((el) => {
            menuList.push({
                name: el.deviceName,
                warn: '低风险',
                deviceID: el.deviceID,
                strtype: el.deviceType,
            });
        });
        getMonitor(menuList[0].deviceID, true);
    }
}
function formatRoundNum(num) {
    let interger = Math.ceil(num)
    let leng = String(interger).length
    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
}
//获取预警详情弹窗右侧数据
function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
        echartDataFc1.maxData.data.length = 0;
        echartDataFc1.minData.data.length = 0;
        echartDataFc1.aveValue.data.length = 0;
        echartDataFc1.xData.length = 0;
        topAreaList.length = 0;
        if (JSON.stringify(res) != '{}') {
            if (res.warnDevices.length != 0) {
                res.warnDevices.forEach((el) => {
                    topAreaList.push({
                        title: el.typeName,
                        content: [
                            { ids: 0, label: '设备类型', value: '工作面风量' },
                            {
                                ids: 1,
                                label: '报警等级',
                                value: el.datalist[0].warnLevel || 0,
                            },
                            { ids: 2, label: '报警描述', value: el.datalist[0].warnDes || '--' },
                        ],
                    });
                });
            } else {
                topAreaList.push({
                    title: '工作面',
                    content: [
                        { ids: 0, label: '设备类型', value: '工作面风量' },
                        {
                            ids: 1,
                            label: '报警等级',
                            value: res.warnLevel || '正常',
                        },
                        { ids: 2, label: '报警描述', value: '--' },
                    ],
                });
            }

            centerAreaListB1[0].content = res.jin || '--';
            centerAreaListB1[1].content = res.hui || '--';
            centerAreaListB1[2].content = res.xufengliang || '--';

            if (res.history.length != 0) {
                res.history.forEach((v) => {
                    echartDataFc1.maxData.data.push(parseFloat(v.jin));
                    echartDataFc1.minData.data.push(parseFloat(v.hui));
                    if (centerAreaListB1[2].content && centerAreaListB1[2].content != '--') {
                        echartDataFc1.aveValue.data.push(centerAreaListB1[2].content);
                    } else {
                        echartDataFc1.aveValue.data.push(0);
                    }

                    echartDataFc1.xData.push(v.time);
                });
            }

            let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
                return acr > cur ? acr : cur
            })
            let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
                return acr1 > cur1 ? acr1 : cur1
            })
            maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
        }
    });
}

onMounted(() => {
    getMenuList()
})
onUnmounted(() => {
    if (timer) {
        clearTimeout(timer);
        timer = undefined;
    }
});
</script>

<style lang="less" scoped>
.ventilateWarn {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .alarm-menu {
        height: 100%;
        width: 15%;

        .card-btn {
            width: 100%;
            height: 100%;
            overflow-y: auto;

            .btn {
                position: relative;
                width: 81%;
                height: 14%;
                margin-bottom: 10%;
                font-family: 'douyuFont';
                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;

                .text {
                    width: 80%;
                    position: absolute;
                    left: 50%;
                    top: 28px;
                    font-size: 16px;
                    color: #01fefc;
                    text-align: center;
                    transform: translate(-50%, 0);
                }

                .warn {
                    width: 100%;
                    position: absolute;
                    left: 50%;
                    bottom: 14px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    transform: translate(-50%, 0);
                }
            }

            .btn1 {
                position: relative;
                width: 100%;
                height: 14%;
                margin-bottom: 10%;
                font-family: 'douyuFont';
                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;

                .text {
                    width: 80%;
                    position: absolute;
                    left: 50%;
                    top: 28px;
                    font-size: 16px;
                    color: #01fefc;
                    text-align: center;
                    transform: translate(-62%, 0);
                }

                .warn {
                    width: 100%;
                    position: absolute;
                    left: 50%;
                    bottom: 14px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    transform: translate(-60%, 0);
                }
            }
        }
    }

    .dustPage {
        width: calc(85% - 10px);
        height: 100%;
        margin-left: 10px;
        padding: 15px;
        background: url('../../../../../assets/images/fire/border.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;

        .top-area {
            height: 24%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .top-box {
                position: relative;
                width: 32%;
                height: 88%;
                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat;
                background-size: 100% 100%;

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

                .top-content {
                    position: absolute;
                    top: 20%;
                    left: 0;
                    width: 100%;
                    height: 80%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    cursor: pointer;

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

                        .item-label {
                            position: absolute;
                            left: 16%;
                            top: 50%;
                            color: #fff;
                            transform: translate(0, -44%);
                        }

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

                        .item-value1 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: rgb(145, 230, 9);
                        }

                        .item-value2 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: rgb(0, 242, 255);
                        }

                        .item-value3 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: #ffff35;
                        }

                        .item-value4 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: #ffbe69;
                        }

                        .item-value5 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: #ff6f00;
                        }

                        .item-value6 {
                            position: absolute;
                            right: 21%;
                            top: 50%;
                            transform: translate(0, -32%);
                            font-size: 12px;
                            font-family: 'douyuFont';
                            color: #ff0000;
                        }
                    }
                }
            }
        }

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

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

                .t-box {
                    width: 14%;
                    height: 75%;
                    background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
                    background-size: 100% 100%;

                    .box-label {
                        font-size: 16px;
                        color: #06edcd;
                        text-align: center;
                    }
                }
            }

            .center-b {
                height: 50%;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .b-box {
                    width: 14%;
                    height: 75%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .box-label {
                        width: 78%;
                        height: 44%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #3df6ff;
                        font-family: 'douyuFont';
                        background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        .bot-area {
            height: calc(100% - 58% - 30px);
            padding: 10px 15px;
            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;

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

                .text-t {
                    font-family: 'douyuFont';
                    font-size: 14px;
                    color: #fff;
                }
            }

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

        }

    }

}
</style>