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" @pointTypeChange="pointTypeChange" @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="deviceInfo1"> 
                     <div style="height: calc(100vh - 205px)">
                        <SteadyRecall ref="steadyRef" :checked-nodes="checkedNodes"></SteadyRecall>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="暂态补召" name="deviceInfo2"> 
                     <div style="height: calc(100vh - 205px)">
                        <Event ref="eventRef" :checked-nodes="checkedNodes"></Event>
                    </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 SteadyRecall from './steadyRecall.vue'

const pageHeight = mainHeight(20)
const steadyRef = ref()
const eventRef = ref()
const loading = ref(false)
const activeTab = ref('deviceInfo1')
const checkedNodes = ref<any[]>([]) // 存储左侧树勾选的节点

defineOptions({
    name: 'govern/monitorRecall/index'
})

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

   checkedNodes.value = nodes
   
   // 将勾选的节点传递给当前激活的tab组件
   if (activeTab.value === 'deviceInfo1' && steadyRef.value) {
       // 如果steadyRecall组件有接收勾选节点的方法，可以调用
       if (steadyRef.value.setCheckedNodes) {
           steadyRef.value.setCheckedNodes(nodes)
       }
   } else if (activeTab.value === 'deviceInfo2' && eventRef.value) {
       // 如果eventRecall组件有接收勾选节点的方法，可以调用
       if (eventRef.value.setCheckedNodes) {
           eventRef.value.setCheckedNodes(nodes)
       }
   }
}

// tab切换时的处理
const handleClick = (tab: any) => {
    activeTab.value = tab.props.name
    
    // tab切换时刷新对应组件的数据
    nextTick(() => {
        if (tab.props.name === 'deviceInfo1' && steadyRef.value) {
            // 刷新稳态补召数据
            if (steadyRef.value.refreshData) {
                steadyRef.value.refreshData(checkedNodes.value)
            } else if (steadyRef.value.getTableParams) {
                // 如果有getTableParams方法，调用它
                steadyRef.value.getTableParams({ nodes: checkedNodes.value })
            }
        } else if (tab.props.name === 'deviceInfo2' && eventRef.value) {
            // 刷新暂态补召数据
            if (eventRef.value.refreshData) {
                eventRef.value.refreshData(checkedNodes.value)
            } else if (eventRef.value.getTableParams) {
                // 如果有getTableParams方法，调用它
                eventRef.value.getTableParams({ nodes: checkedNodes.value })
            }
        }
    })
}

const nodeClick = (node: any) => {
    
}

const pointTypeChange = (type: any, node: any) => {

}
</script>

<style lang="scss">
.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>