admin-govern/src/views/govern/monitorRecall/index.vue

<template>
    <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
        style="position: relative">
        <!-- @init="nodeClick" -->
        <PointTree @node-click="nodeClick" @init="nodeClick" @checkChange="handleCheckedNodesChange"></PointTree>
        <div class="device-control-right">
            <el-tabs type="border-card" class="mb10" @tab-click="handleClick" v-model="activeTab">
                <el-tab-pane label="稳态补召" name="1" v-if="showTab">
                    <div style="height: calc(100vh - 205px)">
                        <SteadyRecall ref="steadyRef" :checked-nodes="checkedNodes"></SteadyRecall>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="暂态补召" name="2" v-if="showTab">
                    <div style="height: calc(100vh - 205px)">
                        <Event ref="eventRef" :checked-nodes="checkedNodes"></Event>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="补招日志" name="3" v-if="!showTab">
                    <div style="height: calc(100vh - 205px)">
                        <Log ref="logRef"></Log>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import PointTree from '@/components/tree/govern/selectTree.vue'
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import Event from './eventRecall.vue'
import Log from './log.vue'
import SteadyRecall from './steadyRecall.vue'
const showTab = ref(true)
const pageHeight = mainHeight(20)
const steadyRef = ref()
const eventRef = ref()
const loading = ref(false)
const activeTab = ref('1')
const checkedNodes = ref<any[]>([]) // 存储左侧树勾选的节点
const currentNode = ref<any>(null) // 存储当前点击的树节点

defineOptions({
    name: 'cs-device-boot/monitorRecall'
})

const logRef = ref()

// 处理子组件传递的勾选节点变化
const handleCheckedNodesChange = (nodes: any[]) => {
    checkedNodes.value = nodes
}

// tab切换时的处理
const handleClick = (tab: any) => {
    activeTab.value = tab.props.name

    // tab切换时刷新对应组件的数据
    nextTick(() => {
        // tab切换后触发查询
        triggerEventRecallQuery()
    })
}

const nodeClick = (node: any) => {
    if(node==undefined){
        return
    }
    if (node?.pname.includes('便携')) {
        activeTab.value = '3'
        showTab.value = false
        nextTick(() => {
            logRef.value.open(node)
        })
    } else {
        activeTab.value = '1'
        showTab.value = true
        currentNode.value = node
        // 只有在暂态补召页面时才触发查询
        triggerEventRecallQuery()
    }

}

// 触发暂态补召查询
const triggerEventRecallQuery = () => {
    nextTick(() => {
        if (activeTab.value === '1' && steadyRef.value) {
            if (steadyRef.value.handleTreeNodeClick) {
                steadyRef.value.handleTreeNodeClick(currentNode.value)
            }
        } else if (activeTab.value === '2' && eventRef.value) {
            // 将当前点击的节点传递给暂态补召组件
            if (eventRef.value.handleTreeNodeClick) {

                eventRef.value.handleTreeNodeClick(currentNode.value)
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.device-control {
    display: flex;
    height: 100%;

    &-left {
        // width: 280px;
    }

    &-right {
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        height: 100%;

        .el-tabs {
            height: 100%;
        }

        .el-tabs__content {
            height: calc(100% - 55px);
        }

        .el-tab-pane {
            height: 100%;
        }

        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }

        .content {
            box-sizing: border-box;
            overflow: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
            grid-gap: 10px;
            justify-content: center;

            .box-card {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: var(--el-color-white);
                min-height: 80px;
                font-size: 13px;

                .el-card__header {
                    padding: 0;

                    .clearfix {
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 35px;
                        padding: 0 10px;
                        background: var(--el-color-primary);
                    }
                }

                .el-card__body {
                    flex: 1;
                    padding: 10px;
                    margin-bottom: 0;
                    background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));

                    .box-card-content {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}

.device-control-right>div {
    height: 100%;
}
</style>