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

<template>
    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
    <div class="ventilateWarn">
        <div class="ventilate-top">
            <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="ventilate-content">
                <div class="work-nav">
                    <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
                        <div class="pic" v-if="item.imgSrc"></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="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>
        <div class="ventilate-bottom">
            <div class="bot-area">
                <div class="title-b">
                    <div class="text-b">通风监控测点信息</div>
                </div>
                <div class="content-b">
                    <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
                        <div class="item-l">
                            <div class="label-l">{{ item.label }}</div>
                            <div class="value-l">{{ item.value }}</div>
                        </div>
                        <div class="item-r">
                            <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                                <span>{{ `${items.label} : ` }}</span>
                                <span :class="{
                                    'status-f': items.value == 1,
                                    'status-l': items.value == 0,
                                }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : `${items.value}${items.dw}` }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

// 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')
}
//获取左侧数据列表
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 cardClick(ind, item) {
    activeIndex1.value = ind;
    clearTimeout(timer);
    getMonitor(item.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;
        if (JSON.stringify(res) != '{}') {


            ventilateTopList[0].value = res.jin || '--';
            ventilateTopList[1].value = res.hui || '--';
            ventilateTopList[2].value = 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 (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
                        echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
                    } 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)
        }
    });
}
//获取通风监控测点信息
async function getWindDeviceList() {
    cardListTf.length = 0
    let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' })
    if (res && res.msgTxt[0]) {
        let list = res.msgTxt[0].datalist || [];
        if (list.length > 0) {
            list.forEach((el: any) => {
                const readData = el.readData;
                el = Object.assign(el, readData);
                cardListTf.push({
                    label: '通信状态',
                    value: el.netStatus == '0' ? '断开' : '连接',
                    listR: [
                        { id: 0, label: '安装位置',dw:'', value: el.strinstallpos },
                        { id: 1, label: '风量',dw:'(m³/min)', value: el.m3 },
                        { id: 2, label: '风速',dw:'(m/s)', value: el.va },
                        { id: 4, label: '时间',dw:'', value: el.readTime },
                        { id: 3, label: '是否报警',dw:'', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
                    ],
                })
            });
        }
    }
}
onMounted(() => {
    getMenuList()
    getWindDeviceList()
})
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;

    .ventilate-top {
        display: flex;
        justify-content: space-between;
        height: 50%;
        margin-bottom: 15px;
        background: url('../../../../../assets/images/fire/border.png') no-repeat center;
        background-size: 100% 100%;

        .alarm-menu {
            height: 100%;
            width: 15%;
            padding: 10px;
            box-sizing: border-box;

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

                .btn {
                    position: relative;
                    width: 81%;
                    height: 24%;
                    margin-bottom: 6%;
                    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: 14px;
                        color: #01fefc;
                        text-align: center;
                        transform: translate(-50%, 0);
                    }

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

                .btn1 {
                    position: relative;
                    width: 100%;
                    height: 24%;
                    margin-bottom: 6%;
                    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: 14px;
                        color: #01fefc;
                        text-align: center;
                        transform: translate(-62%, 0);
                    }

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

        .ventilate-content {
            height: 100%;
            width: 85%;
            padding: 10px 0px;
            box-sizing: border-box;

            .work-nav {
                height: 30%;
                width: 100%;
                background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
                background-size: 100% 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 3px solid;
                border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, .2), rgba(45, 116, 160, 1)) 1 1 1;

                .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%;
                    }

                    .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: 16px;
                                color: #3df6ff;
                            }
                        }
                    }
                }

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

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

                .nav:nth-child(3) .pic {
                    background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
                    background-size: 100% 100%;
                }
            }

            .bot-area {
                height: calc(100% - 30% - 3px);
                padding: 10px;
                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);
                }

            }
        }



    }

    .ventilate-bottom {
        height: calc(50% - 15px);
        background: url('../../../../../assets/images/fire/border.png') no-repeat center;
        background-size: 100% 100%;
        padding: 10px;
        box-sizing: border-box;

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

            .title-b {
                height: 30px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

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

            .content-b {
                height: calc(100% - 40px);
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                overflow-y: auto;

                .card-b {
                    position: relative;
                    width: 24%;
                    height: 128px;
                    margin: 0px 9px 10px 9px;
                    background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
                    background-size: 100% 100%;

                    .item-l {
                        position: absolute;
                        left: 32px;
                        top: 50%;
                        transform: translate(0, -50%);
                        width: 89px;
                        height: 98px;
                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;

                        .label-l {
                            width: 100%;
                            position: absolute;
                            top: 7px;
                            color: #fff;
                            font-size: 12px;
                            text-align: center;
                        }

                        .value-l {
                            width: 100%;
                            position: absolute;
                            top: 50px;
                            font-family: 'douyuFont';
                            font-size: 14px;
                            color: #3df6ff;
                            text-align: center;
                        }
                    }

                    .item-r {
                        position: absolute;
                        left: 132px;
                        top: 50%;
                        transform: translate(0, -50%);
                        height: 128px;
                        padding: 5px 0px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        box-sizing: border-box;

                        .content-r {
                            display: flex;

                            span {
                                font-size: 14px;
                                color: #fff;

                                &:first-child {
                                    display: inline-block;
                                    width: 68px;
                                }

                                &:last-child {
                                    display: inline-block;
                                    width: calc(100% - 68px);
                                    overflow: hidden;
                                    white-space: nowrap;
                                    /* 不换行 */
                                   
                                    /* 超出部分隐藏 */
                                    text-overflow: ellipsis;
                                    /* 使用省略符号 */
                                }
                            }

                            .status-f {
                                color: #ff0000;
                            }

                            .status-l {
                                color: #3df6ff;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>