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

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

<script lang="ts" setup>
import { ref, nextTick, onMounted, defineProps } from 'vue'
import Tree from '../point.vue'
import { getLineTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
// const props = defineProps(['template'])
interface Props {
    template?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    template: false
})
defineOptions({
    name: 'govern/deviceTree'
})

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

const info = (type?: string) => {
    tree.value = []
    let arr1: any[] = []
    let arr2: any[] = []
    let arr3: any[] = []
    let arr4: any[] = []
    getLineTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
        //治理设备

        res.data.map((item: any) => {
            if (type == '2') {
                item.icon = 'el-icon-Menu'
                item.color = config.getColorVal('elementUiPrimary')
                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 =
                                item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                            arr4.push(item3)
                            // item3.children.forEach((item4: any) => {
                            //     item4.icon = 'el-icon-Platform'
                            //     item4.color =
                            //         item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'

                            // })
                        })
                    })
                })
            } else {
                if (item.name == '治理设备') {
                    item.children.forEach((item: any) => {
                        item.icon = 'el-icon-HomeFilled'
                        item.level = 1
                        item.color = config.getColorVal('elementUiPrimary')
                        item.children.forEach((item2: any) => {
                            item2.icon = 'el-icon-List'
                            item2.level = 1
                            item2.color = config.getColorVal('elementUiPrimary')
                            item2.children.forEach((item3: any) => {
                                item3.icon = 'el-icon-Platform'
                                item3.level = 2
                                item3.color =
                                    item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                                item3.children.forEach((item4: any) => {
                                    item4.icon = 'el-icon-Platform'
                                    item4.color =
                                        item4.comFlag === 2
                                            ? config.getColorVal('elementUiPrimary')
                                            : '#e26257 !important'
                                    // item4.color = '#e26257 !important'
                                    arr1.push(item4)
                                })
                            })
                        })
                    })
                } else if (item.name == '便携式设备') {
                    item.children.forEach((item: any) => {
                        item.icon = 'el-icon-Platform'
                        item.color = config.getColorVal('elementUiPrimary')
                        item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                        item.children.forEach((item2: any) => {
                            item2.icon = 'el-icon-Platform'
                            item2.color =
                                item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                            arr2.push(item2)
                        })
                    })
                } else if (item.name == '监测设备') {
                    item.children.forEach((item: any) => {
                        item.icon = 'el-icon-HomeFilled'
                        item.level = 1
                        item.color = config.getColorVal('elementUiPrimary')
                        item.children.forEach((item2: any) => {
                            item2.icon = 'el-icon-List'
                            item2.level = 1
                            item2.color = config.getColorVal('elementUiPrimary')
                            item2.children.forEach((item3: any) => {
                                item3.icon = 'el-icon-Platform'
                                item3.level = 1
                                item3.color =
                                    item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                                item3.children.forEach((item4: any) => {
                                    item4.icon = 'el-icon-Platform'
                                    item4.color =
                                        item4.comFlag === 2
                                            ? config.getColorVal('elementUiPrimary')
                                            : '#e26257 !important'
                                    // item4.color = '#e26257 !important'
                                    arr3.push(item4)
                                })
                            })
                        })
                    })
                }
            }
        })
        tree.value = res.data
     
        nextTick(() => {
            setTimeout(() => {
                if (type == '2') {
                    //初始化选中

                    treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
                    // 注册父组件事件
                    emit('init', {
                        level: 3,
                        ...arr4[0]
                    })
                    changePointType('4', arr4[0])
                    return
                } else if (arr1.length > 0) {
                    //初始化选中
                    treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
                    // 注册父组件事件
                    emit('init', {
                        level: 2,
                        ...arr1[0]
                    })
                    return
                } else if (arr2.length > 0) {
                    //初始化选中
                    treRef.value?.treeRef2.setCurrentKey(arr2[0].id)
                    // 注册父组件事件
                    emit('init', {
                        level: 2,
                        ...arr2[0]
                    })
                    return
                } else if (arr3.length > 0) {
                    treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
                    emit('init', {
                        level: 2,
                        ...arr3[0]
                    })
                    return
                } else {
                    emit('init')
                    return
                }
            }, 500)
        })
    })
}
const changePointType = (val: any, obj: any) => {
    emit('pointTypeChange', val, obj)
}
if (props.template) {
    querySysExcel({ id: dictData.state.area[0]?.id })
        .then((res: any) => {
            emit('Policy', res.data)
            info()
        })
        .catch(err => {
            info()
        })
} else {
    info()
}
onMounted(() => {})
</script>