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

<template>
    <Tree
        ref="treRef"
        :width="width"
        :showPush="props.showPush"
        :expand-on-click-node="false"
        :data="tree"
        @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 { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'

interface Props {
    template?: boolean
    showPush?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    template: false,
    showPush: 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 => {
        res.data.icon = 'el-icon-Menu'
        res.data.color = config.getColorVal('elementUiPrimary')
        res.data?.children.map((item: any) => {
            item.icon = 'el-icon-HomeFilled'
            item.color = config.getColorVal('elementUiPrimary')
            item.children.forEach((item: any) => {
                item.icon = 'el-icon-List'
                item.color = config.getColorVal('elementUiPrimary')
                item.children.forEach((item2: any) => {
                    // item2.icon = 'el-icon-List'
                    // item2.color = config.getColorVal('elementUiPrimary')
                    item2.icon = 'el-icon-Platform'
                    item2.level = 2
                    item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-Platform' 
                        item3.color =
                            item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                        arr1.push(item3)
                    })
                })
            })
        })
        tree.value = [res.data]

        nextTick(() => {
            setTimeout(() => {
                //初始化选中

                treRef.value?.treeRef.setCurrentKey(arr1[0].id)
                // 注册父组件事件
                emit('init', {
                    level: 3,
                    ...arr1[0]
                })
                changePointType('4', arr1[0])
                return
            }, 500)
        })
    })
}

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

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

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

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