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

<template>
    <div class="point-tree">
        <el-select
            v-model="formData.statisticalType"
            placeholder="请选择"
            style="min-width: unset; padding: 10px 10px 0"
            @change="loadData"
            v-if="props.showSelect"
        >
            <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="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } 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'
import { defineProps } from 'vue'
defineOptions({
    name: 'pms/pointTree'
})
interface Props {
    showSelect?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    showSelect: true
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = 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
})
const loadData = () => {
    let obj = classificationData.find(function (i) {
        return i.id === formData.value.statisticalType
    }) || { code: '' }
    let form = JSON.parse(JSON.stringify(formData.value))
    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
    let nodeKey = ''
    getTerminalTreeForFive(form).then(res => {
        //console.log('---',res)
        if (obj.code == 'Power_Network') {
            res.data = [
                {
                    name: '电网拓扑',
                    level: -1,
                    id: 0,
                    children: res.data
                }
            ]
        }
        res.data.forEach((item: any) => {
            item.icon = 'el-icon-HomeFilled'
            item.color = config.getColorVal('elementUiPrimary')
            item.children.forEach((item2: any) => {
                item2.icon = 'el-icon-CollectionTag'
                item2.color = config.getColorVal('elementUiPrimary')
                item2.children.forEach((item3: any) => {
                    item3.icon = 'el-icon-Flag'
                    item3.color = config.getColorVal('elementUiPrimary')
                    item3.children.forEach((item4: any) => {
                        item4.icon = 'el-icon-OfficeBuilding'
                        item4.color = config.getColorVal('elementUiPrimary')
                        item4.children.forEach((item5: anyObj) => {
                            if (item5.level == 7) {
                                item5.icon = 'el-icon-DataAnalysis'
                                item5.color = config.getColorVal('elementUiPrimary')
                                item5.children.forEach((item6: anyObj) => {
                                    item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
                                    item6.pid = item4.id
                                    item6.icon = 'fa-solid fa-location-dot'
                                    item6.color = config.getColorVal('elementUiPrimary')
                                    if (item6.comFlag == 0) {
                                        item6.color = 'red !important'
                                    } else if (item6.comFlag == 1) {
                                        item6.color = '#00f93b !important'
                                    } else if (item6.comFlag == 2) {
                                        item6.color = '#8c8c8c !important'
                                    }
                                })
                            } else {
                                item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
                                item5.pid = item4.id
                                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'
                                }
                            }
                        })
                    })
                })
            })
        })

        nodeKey =
            res.data[0].children[0].children[0].children[0].children[0].children[0]?.id ||
            res.data[0].children[0].children[0].children[0].children[0]?.id
        emit(
            'init',
            res.data[0].children[0].children[0].children[0].children[0]?.children[0] ||
                res.data[0].children[0].children[0].children[0].children[0]
        )

        tree.value = res.data
        if (nodeKey) {
            nextTick(() => {
                treeRef.value.treeRef.setCurrentKey(nodeKey)

                // treeRef.value.treeRef.setExpandedKeys(nodeKey)
            })
        }
    })
}
const scrollToNode = (id: string) => {
    // 树滚动
    treeRef.value.scrollToNode(id)
}
defineExpose({ treeRef, scrollToNode, tree })
loadData()
</script>
<style lang="scss">
.point-tree {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--el-border-color);
}
</style>