mky-vent-base/src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

<template>
    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
    <div class="fireWarn">
        <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="type-btn">
                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index"
                    @click="btnClick(index)">
                    {{ item.name }}
                </div>
            </div>
            <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="fire-content">
            <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists">
            </component>
        </div>

    </div>
</template>

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

const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
//当前加载组件
let currentLoad = ref('')
//内外因火灾激活索引
let activeIndex = ref(0);
//当前激活菜单的索引
let activeIndex1 = ref(0);
let menuList = reactive<any[]>([]); //左侧菜单列表
let menuList1 = reactive({
    external: [],
    internal: [],
    info: []
});
//详情数据
let listData = reactive({
    common: {},
    bundletube: [],
    fiber: [],
    fire: [],
    co: [],
    smoke: [],
    spray: [],
    temperature: [],
}); //详情数据
let strType = ref(''); //火灾外因-区别工作面和煤层
let router = useRouter()
let tableLists = ref<any[]>([])

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(deviceID, flag?) {
    timer = setTimeout(
        async () => {
            await getSysWarnList(deviceID, 'fire');
            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: 'fire' })
    console.log(res, '火灾左侧菜单列表-------')
    if (res.length != 0) {
        menuList.length = 0
        menuList1.external = res.external;
        menuList1.internal = res.internal;
        menuList1.info = res.info
        menuList1.internal.forEach((el) => {
            menuList.push({
                name: el.systemname,
                warn: '低风险',
                type: 'on',
                deviceID: el.id,
                strtype: el.strtype,
            });
        });
        getMonitor(menuList[0].deviceID, true);
    }
}

//获取预警详情弹窗右侧数据
function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
        listData.bundletube = res.bundletube;
        listData.fiber = res.fiber;
        listData.fire = res.fire;
        listData.co = res.co;
        listData.smoke = res.smoke;
        listData.spray = res.spray;
        listData.temperature = res.temperature;
        loadZj();
    });
}
//内外因火灾、预警指标选项切换
function btnClick(ind) {
    activeIndex.value = ind;
    switch (ind) {
        case 0:
            activeIndex1.value = 0;
            menuList.length = 0;
            currentLoad.value = '';
            menuList1.internal.forEach((el) => {
                menuList.push({
                    name: el.systemname,
                    warn: '低风险',
                    type: 'on',
                    deviceID: el.id,
                    strtype: el.strtype,
                });
            });
            clearTimeout(timer);
            getClearList();
            getMonitor(menuList[0].deviceID, true);
            break;
        case 1:
            activeIndex1.value = 0;
            menuList.length = 0;
            currentLoad.value = '';
            if (menuList1.external.length != 0) {
                menuList1.external.forEach((el) => {
                    menuList.push({
                        name: el.systemname,
                        warn: '低风险',
                        type: 'out',
                        deviceID: el.id,
                        strtype: el.strtype,
                    });
                });
                clearTimeout(timer);
                getClearList();
                getMonitor(menuList[0].deviceID, true);
                strType.value = menuList[0].strtype;
            } else {
                menuList.length = 0;
                clearTimeout(timer);
                currentLoad.value = '';
            }
            break;
        case 2:
            clearTimeout(timer);
            menuList.length = 0;
            activeIndex1.value = 0;
            menuList1.info.forEach((el) => {
                menuList.push({
                    name: el.sysname,
                    warn: '正常',
                    deviceID: el.sysid,
                    strtype: '',
                });
            });
            loadZb()
            break;
    }
}
//加载预警指标组件
function loadZb() {
    // menuList1.info.forEach((el) => {
    //     if (el.list.length != 0) {
    //         el.list.forEach(v => {
    //             if (v.alarmName == '缓慢氧化阶段（吸氧蓄热期）') {
    //                 v.warnGrade = '绿色预警'
    //             } else if (v.alarmName == '加速氧化阶段（自热期）') {
    //                 v.warnGrade = '黄色预警'
    //             } else if (v.alarmName == '剧烈氧化阶段（燃烧期）') {
    //                 v.warnGrade = '红色预警'
    //             }
    //         })
    //     } else {
    //         tableLists.value.length = 0
    //     }
    // });
    tableLists.value = menuList1.info[0].list
    const { sysOrgCode } = useGlobSetting();
    switch (sysOrgCode) {
        case 'sdmtjtbdmk': // 宝德
            currentLoad.value = 'warnFireBd';
            return currentLoad.value;
        case 'sdmtjtbetmk': // 布尔台
            currentLoad.value = 'warnFireBrt';
            return currentLoad.value;
        default:
            currentLoad.value = 'warnFireBrt';
            return currentLoad.value;
    }
}
//菜单选项切换
function cardClick(ind, item) {
    if (activeIndex.value != 2) {
        activeIndex1.value = ind;
        strType.value = item.strtype;
        clearTimeout(timer);
        getClearList();
        currentLoad.value = '';
        getMonitor(item.deviceID, true);
    } else {
        // clearTimeout(timer);
        // activeIndex1.value = ind;
        tableLists.value = menuList1.info[ind].list
    }

}
//加载组件
function loadZj() {
    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
        currentLoad.value = 'fireWork';
    } else if (!activeIndex.value && listData.bundletube.length != 0) {
        currentLoad.value = 'closeWall';
    } else if (activeIndex.value && activeIndex.value != 2) {
        currentLoad.value = 'mainWell';
    } else {
        currentLoad.value = '';
    }
}
//清空数据
function getClearList() {
    listData.common = {};
    listData.bundletube.length = 0;
    listData.fiber.length = 0;
    listData.fire.length = 0;
    listData.co.length = 0;
    listData.smoke.length = 0;
    listData.spray.length = 0;
    listData.temperature.length = 0;
}

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

<style lang="less" scoped>
.fireWarn {
    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%;

        .type-btn {
            width: 100%;
            height: 28px;
            line-height: 28px;
            background-color: rgba(15, 55, 108, .8);
            border: 2px solid #1b6eab;
            margin-bottom: 20px;
            border-radius: 5px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .btn {
                width: 33%;
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                text-align: center;
                color: #fff;
                cursor: pointer;
            }

            .btn1 {
                width: 33%;
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                border-radius: 2px;
                background: #209dfc;
                cursor: pointer;
            }
        }

        .card-btn {
            width: 100%;
            height: calc(100% - 48px);
            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);
                }
            }
        }
    }

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

}

// .fireWarn1 {
//     width: 100%;
//     height: 100%;
//     padding: 80px 10px 15px 10px;
//     box-sizing: border-box;

//     .alarm-menu {
//         width: 100%;

//         .type-btn {
//             width: 25%;
//             height: 36px;
//             line-height: 36px;
//             background-color: rgba(15, 55, 108, .8);
//             border: 2px solid #1b6eab;
//             border-radius: 5px;
//             box-sizing: border-box;
//             display: flex;
//             justify-content: space-between;

//             .btn {
//                 width: 33%;
//                 height: 32px;
//                 line-height: 32px;
//                 font-size: 14px;
//                 text-align: center;
//                 color: #fff;
//                 cursor: pointer;
//             }

//             .btn1 {
//                 width: 33%;
//                 height: 32px;
//                 line-height: 32px;
//                 font-size: 14px;
//                 color: #fff;
//                 text-align: center;
//                 border-radius: 2px;
//                 background: #209dfc;
//                 cursor: pointer;
//             }
//         }

//         .card-btn {
//             width: 100%;
//             height: calc(100% - 36px);
//             overflow-y: auto;
//             display: none;

//         }
//     }

//     .fire-content {
//         height: calc(100% - 30px)
//     }
// }</style>