admin-sjzx/src/components/tree/pqs/Terminal.vue

<template>
    <Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import Tree from './index.vue'

import { getTerminalTree } from '@/api/device-boot/Business.ts'
import { useConfig } from '@/stores/config'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
defineOptions({
    name: 'govern/deviceTree'
})
const emit = defineEmits(['init'])
const config = useConfig()
const expanded: any = ref([])
const tree = ref()
const treRef = ref()
const info = (id: any) => {
    expanded.value = [id]
    getTerminalTree().then(res => {
        // let arr: any[] = []
        if (VITE_FLAG) {
            res.data.forEach((item: any) => {
                item.icon = 'el-icon-Menu'
                item.level = 0
                item.children.forEach((item2: any) => {
                    item2.icon = 'el-icon-HomeFilled'
                    item2.level = 100
                    expanded.value.push(item2.id)
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-CollectionTag'
                        item3.level = 200
                        item3.children.forEach((item4: any) => {
                            item4.icon = 'el-icon-Flag'
                            item4.level = 300
                            // arr.push(item4)
                            item4.children.forEach((item5: any) => {
                                item5.icon = 'el-icon-OfficeBuilding'
                                item5.level = 300
                                // item5.id = item4.id
                                item5.children.forEach((item6: any) => {
                                    item6.icon = 'el-icon-HelpFilled'
                                    if (item6.name == '电网侧' && item6.children.length == 0) {
                                        item6.level = 400
                                    } else {
                                        item6.level = 400
                                    }
                                    item6.children.forEach((item7: any) => {
                                        item7.icon = 'el-icon-Film'
                                        item7.level = 400
                                        item7.children.forEach((item8: any) => {
                                            item8.icon = 'el-icon-Collection'
                                            item8.level = 500
                                            item8.children.forEach((item9: any) => {
                                                item9.icon = 'el-icon-Share'
                                                item9.level = 600
                                                item9.children.forEach((item10: any) => {
                                                    item10.icon = 'el-icon-Location'
                                                    item10.level = 700
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        } else {
            res.data.forEach((item: any) => {
                item.icon = 'el-icon-Menu'
                item.level = 0
                item.children.forEach((item2: any) => {
                    item2.icon = 'el-icon-HomeFilled'
                    item2.level = 100
                    expanded.value.push(item2.id)
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-CollectionTag'
                        item3.level = 200
                        item3.children.forEach((item4: any) => {
                            item4.icon = 'el-icon-Flag'
                            item4.level = 300
                            // arr.push(item4)
                            item4.children.forEach((item5: any) => {
                                item5.icon = 'el-icon-OfficeBuilding'
                                item5.level = 400
                                item5.children.forEach((item6: any) => {
                                    item6.icon = 'el-icon-Film'
                                    item6.level = 500
                                    item6.children.forEach((item7: any) => {
                                        item7.icon = 'el-icon-Share'
                                        item7.level = 600
                                        item7.children.forEach((item8: any) => {
                                            item8.icon = 'el-icon-Location'
                                            item8.level = 700
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        }

        tree.value = res.data

        nextTick(() => {
            treRef.value.setCurrentKey(id)
            // if (arr.length) {
            //     treRef.value.treeRef.setCurrentKey(arr[0].id)
            //     // 注册父组件事件
            //     emit('init', {
            //         level: 2,
            //         ...arr[0]
            //     })
            // } else {
            //     emit('init')
            // }
        })
    })
}
info('')

defineExpose({ info })
</script>
<style lang="scss" scoped>
.el-tree {
    background: #efeff0;
}
</style>