admin-sjzx/src/components/tree/pms/pointTree.vue

<template>
    <div style='height: 100%;width: 100%;display: flex;flex-direction: column'>
        <el-select v-model='formData.statisticalType' placeholder='请选择' style='min-width: unset;padding: 10px 10px 0'
                   @change='loadData'>
            <el-option v-for='item in classificationData' :key='item.id' :label='item.name'
                       :value='item.id'></el-option>
        </el-select>
        <div style='flex: 1;overflow: hidden'>
            <Tree ref='treRef' :data='tree' style='width: 100%;height: 100%' :canExpand='false' />
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, nextTick } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'

defineOptions({
    name: 'pms/pointTree'
})
const emit = defineEmits(['init'])
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
console.log(classificationData)
const tree = ref()
const treRef = ref()
const formData = ref({
    deptIndex: adminInfo.$state.deptIndex,
    monitorFlag: 2,
    powerFlag: 2,
    loadType: null,
    manufacturer: null,
    serverName: 'event-boot',
    statisticalType: classificationData[0].id,
    scale: null
})
console.log(formData)
const loadData = () => {
    let form = JSON.parse(JSON.stringify(formData.value))
    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
    getTerminalTreeForFive(form).then(res => {
        console.log(res)
        let arr: any[] = []
        res.data.forEach((item: any) => {
            item.icon = 'fa-solid fa-synagogue'
            item.color = config.getColorVal('elementUiPrimary')
            item.children.forEach((item2: any) => {
                item2.icon = 'fa-solid fa-city'
                item.color = config.getColorVal('elementUiPrimary')
                item2.children.forEach((item3: any) => {
                    item3.icon = 'fa-solid fa-building'
                    item3.color = config.getColorVal('elementUiPrimary')
                    item3.children.forEach((item4: any) => {
                        item4.icon = 'fa-solid fa-tower-observation'
                        item4.color = config.getColorVal('elementUiPrimary')
                        item4.children.forEach((item5: any) => {
                            item5.icon = 'fa-solid fa-location-dot'
                            item5.color = config.getColorVal('elementUiPrimary')
                            if (item5.comFlag === 0) {
                                item5.color = 'red !important'
                            } else if (item5.comFlag === 1) {
                                item5.color = '#00f93b !important'
                            } else if (item5.comFlag === 2) {
                                item5.color = '#8c8c8c !important'
                            }
                        })
                    })
                })
            })
        })
        tree.value = res.data
    })
}
loadData()
// getTerminalTreeForFive().then(res => {
//     let arr: any[] = []
//     res.data.forEach((item: any) => {
//         item.icon = 'el-icon-HomeFilled'
//         item.color = config.getColorVal('elementUiPrimary')
//         item.children.forEach((item2: any) => {
//             item2.icon = 'el-icon-List'
//             item.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'
//                 }
//                 item3.children.forEach((item4: any) => {
//                     item4.icon = 'el-icon-LocationFilled'
//                     arr.push(item4)
//                 })
//             })
//         })
//     })
//     tree.value = res.data
//     nextTick(() => {
//         if (arr.length) {
//             treRef.value.treeRef.setCurrentKey(arr[0].id)
//             // 注册父组件事件
//             emit('init', {
//                 level: 2,
//                 ...arr[0]
//             })
//         } else {
//             emit('init')
//         }
//     })
// })
</script>