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

<template>
    <Tree
        ref="treRef"
        @check-change="handleCheckChange"
        :default-checked-keys="defaultCheckedKeys"
        :show-checkbox="props.showCheckbox"
        :data="tree"
        @changeDeviceType="changeDeviceType"
    />
</template>

<script lang="ts" setup>
import { ref, nextTick, defineEmits } from 'vue'
import Tree from '../device.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
defineOptions({
    name: 'govern/deviceTree'
})
const props = withDefaults(
    defineProps<{
        showCheckbox?: boolean
        defaultCheckedKeys?: any
    }>(),
    {
        showCheckbox: false,
        defaultCheckedKeys: []
    }
)
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
const config = useConfig()
const tree = ref()
const treRef = ref()
const changeDeviceType = (val: any, obj: any) => {
    console.log("🚀 ~ changeDeviceType ~ val:", val,obj)
    emit('deviceTypeChange', val, obj)
}
getDeviceTree().then(res => {
    let arr: any[] = []
    let arr2: any[] = []
    let arr3: any[] = []
    //治理设备
    res.data.map((item: any) => {
        if (item.name == '治理设备') {
            item.children.forEach((item: any) => {
                item.icon = 'el-icon-HomeFilled'
                item.color = config.getColorVal('elementUiPrimary')
                item.children.forEach((item2: any) => {
                    item2.icon = 'el-icon-List'
                    item2.color = config.getColorVal('elementUiPrimary')
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-Platform'
                         item3.level = 2
                        item3.color = config.getColorVal('elementUiPrimary')
                        if (item3.comFlag === 1) {
                            item3.color = '#e26257 !important'
                        }
                        arr.push(item3)
                    })
                })
            })
        } else if (item.name == '便携式设备') {
            item.children.forEach((item: any) => {
                item.icon = 'el-icon-Platform'
                item.color = config.getColorVal('elementUiPrimary')
                item.color = '#e26257 !important'
                item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'

                if (item.type == 'device') {
                    arr2.push(item)
                }
                item.children.forEach((item2: any) => {
                    item2.icon = 'el-icon-Platform'
                    item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'

                    // item2.children.forEach((item3: any) => {
                    //     item3.icon = 'el-icon-Platform'
                    //     item3.color = config.getColorVal('elementUiPrimary')
                    //     if (item3.comFlag === 1) {
                    //         item3.color = '#e26257 !important'
                    //     }
                    //     arr.push(item3)
                    // })
                })
            })
        }else if (item.name == '在线设备') { 
                item.children.forEach((item: any) => {
                item.icon = 'el-icon-HomeFilled'
                item.color = config.getColorVal('elementUiPrimary')
                item.children.forEach((item2: any) => {
                    item2.icon = 'el-icon-List'
                    item2.color = config.getColorVal('elementUiPrimary')
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-Platform'
                        item3.color = config.getColorVal('elementUiPrimary')
                        if (item3.comFlag === 1) {
                            item3.color = '#e26257 !important'
                        }
                        arr3.push(item3)
                    })
                })
            })
        }
    })
    console.log("🚀 ~ file: deviceTree.vue ~ line 18 ~ getDeviceTree ~ tree:", arr,arr2,arr3)
    tree.value = res.data
  
    nextTick(() => {
        if (arr.length) {
            treRef.value.treeRef1.setCurrentKey(arr[0].id)
            // 注册父组件事件
            emit('init', {
                level: 2,
                ...arr[0]
            })
            return
        }
        if (arr2.length) {
            treRef.value.treeRef2.setCurrentKey(arr2[0].id)
            // 注册父组件事件
            emit('init', {
                level: 2,
                ...arr2[0]
            })
            return
        }
        console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3.length)
        if (arr3.length) {
            console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3)
            treRef.value.treeRef3.setCurrentKey(arr3[0].id)
            // 注册父组件事件
            emit('init', {
                level: 2,
                ...arr3[0]
            })
            return
        }
        else {
            emit('init')
            return
        }
    })
})
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
    emit('checkChange', {
        data,
        checked,
        indeterminate
    })
}
</script>