admin-govern/src/components/tree/govern/cloudDeviceEntryTree.vue

<template>
    <Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, defineProps } from 'vue'
import Tree from '../index.vue'
import { getLineTree,getCldTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'

interface Props {
    template?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    template: false
})
defineOptions({
    name: 'govern/deviceTree'
})

const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd'])
const config = useConfig()
const tree = ref()
const dictData = useDictData()
const treRef = ref()
const width = ref('')


const info = (selectedNodeId?: string) => {
    tree.value = []
    let arr1: any[] = []
    getCldTree().then(res => {
        try {
            // 检查响应数据结构
            let rootData = null;
            if (Array.isArray(res.data)) {
                // 旧的数据结构 - 数组
                rootData = res.data.find((item: any) => item.name == '在线设备');
            } else if (res.data && res.data.name == '在线设备') {
                // 新的数据结构 - 单个对象
                rootData = res.data;
            }

            // 治理设备
            if (rootData) {
                rootData.icon = 'el-icon-Menu'
                rootData.level = 0
                rootData.color = config.getColorVal('elementUiPrimary')
                // 确保根节点的 children 是数组
                if (!Array.isArray(rootData.children)) {
                    rootData.children = []
                }
                rootData.children.forEach((item: any) => {
                    item.icon = 'el-icon-HomeFilled'
                    item.level = 1
                    item.color = config.getColorVal('elementUiPrimary')
                    // 确保 children 是数组
                    if (!Array.isArray(item.children)) {
                        item.children = []
                    }
                    item.children.forEach((item2: any) => {
                        item2.icon = 'el-icon-List'
                        item2.level = 2
                        item2.color = config.getColorVal('elementUiPrimary')
                        
                        // 确保 children 是数组
                        if (!Array.isArray(item2.children)) {
                            item2.children = []
                        }
                        item2.children.forEach((item3: any) => {
                            item3.icon = 'el-icon-Platform'
                            item3.level = 3
                            item3.color =
                                item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                                
                            // 确保 children 是数组
                            if (!Array.isArray(item3.children)) {
                                item3.children = []
                            }
                            
                            item3.children.forEach((item4: any) => {
                                item4.icon = 'el-icon-Platform'
                                item4.level = 4
                                item4.color =
                                    item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                                arr1.push(item4)
                            })
                        })
                    })
                })
                tree.value = [rootData] // 确保 tree.value 是数组
            } else {
                tree.value = []
            }
            nextTick(() => {
                if (arr1.length) {
                    // 安全检查 treRef 和 treeRef1 是否存在
                    if (treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey) {
                        // 如果传入了要选中的节点ID，则选中该节点，否则选中第一个节点
                        console.log('selectedNodeId:', selectedNodeId);
                        if (selectedNodeId) {
                            treRef.value.treeRef1.setCurrentKey(selectedNodeId);
                            // 查找对应的节点数据并触发事件
                            let selectedNode = null;
                            const findNode = (nodes: any[]) => {
                                for (const node of nodes) {
                                    if (node.id === selectedNodeId) {
                                        selectedNode = node;
                                        return true;
                                    }
                                    if (node.children && findNode(node.children)) {
                                        return true;
                                    }
                                }
                                return false;
                            };
                            
                            findNode(tree.value);
                            
                            if (selectedNode) {
                                emit('init', {
                                    level: selectedNode.level,
                                    ...selectedNode
                                });
                            }
                        } else {
                            // 初始化选中第一个节点
                            treRef.value.treeRef1.setCurrentKey(arr1[0].id);
                            emit('init', {
                                level: 2,
                                ...arr1[0]
                            });
                        }
                    }
                } else {
                  
                }
            })
        } catch (error) {
            console.error('Error in processing getCldTree response:', error)
        }
    })
}


const changePointType = (val: any, obj: any) => {
    emit('pointTypeChange', val, obj)
}

const onAdd = () => {
    emit('onAdd')
}
if (props.template) {
    getTemplateByDept({ id: dictData.state.area[0].id })
        .then((res: any) => {
            emit('Policy', res.data)
            info()
        })
        .catch(err => {
            info()
        })
} else {
    info()
}

// 暴露 info 方法给父组件调用
defineExpose({
    info
})

onMounted(() => {})
</script>