修改树
This commit is contained in:
guanj
@@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div class="point-tree">
|
||||
<!-- <el-select
|
||||
@@ -37,6 +36,7 @@ const adminInfo = useAdminInfo()
|
||||
const dictData = useDictData()
|
||||
const config = useConfig()
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
|
||||
const tree = ref()
|
||||
const treeRef = ref()
|
||||
const formData = ref({
|
||||
@@ -55,9 +55,12 @@ const loadData = () => {
|
||||
}) || { code: '' }
|
||||
let form = JSON.parse(JSON.stringify(formData.value))
|
||||
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
|
||||
if (VITE_FLAG && form.statisticalType.code == 'Power_Network') {
|
||||
form.statisticalType.deptName = 'qujing'
|
||||
}
|
||||
let nodeKey = ''
|
||||
getTerminalTreeForFive(form).then(res => {
|
||||
|
||||
console.log(res)
|
||||
if (obj.code == 'Power_Network') {
|
||||
res.data = [
|
||||
{
|
||||
@@ -68,56 +71,62 @@ const loadData = () => {
|
||||
}
|
||||
]
|
||||
}
|
||||
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'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
// if (VITE_FLAG) {
|
||||
processTreeData(res.data)
|
||||
let firstLevel6Node = findFirstLevel6Node(res.data)
|
||||
|
||||
nodeKey = 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])
|
||||
nodeKey = firstLevel6Node.id
|
||||
emit('init', firstLevel6Node)
|
||||
// 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].id
|
||||
// emit('init', res.data[0].children[0].children[0].children[0].children[0])
|
||||
|
||||
tree.value = res.data
|
||||
if (nodeKey) {
|
||||
@@ -128,9 +137,113 @@ const loadData = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setKey = (key: string) => {
|
||||
treeRef.value.treeRef.setCurrentKey(key)
|
||||
}
|
||||
|
||||
// 定义不同层级对应的图标配置（可根据实际需求调整）
|
||||
const levelIconMap = {
|
||||
'-1': 'el-icon-HomeFilled',
|
||||
0: 'el-icon-CollectionTag',
|
||||
1: 'el-icon-CollectionTag',
|
||||
2: 'el-icon-Flag',
|
||||
3: 'el-icon-OfficeBuilding',
|
||||
4: 'el-icon-DataAnalysis',
|
||||
5: 'el-icon-DataAnalysis',
|
||||
7: 'el-icon-DataAnalysis',
|
||||
6: 'fa-solid fa-location-dot'
|
||||
}
|
||||
|
||||
/**
|
||||
* 递归处理树形数据，为不同层级节点设置图标和颜色
|
||||
* @param data 树形数据数组
|
||||
* @param level 当前层级（默认从1开始）
|
||||
*/
|
||||
function processTreeData(data: any[], level: number = -1) {
|
||||
// 空值判断，避免数组为空或undefined时报错
|
||||
if (!Array.isArray(data) || data.length === 0) return
|
||||
|
||||
data.forEach(item => {
|
||||
// 1. 设置基础图标（根据层级匹配）
|
||||
item.icon = levelIconMap[level] || ''
|
||||
|
||||
// 2. 设置基础颜色
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
|
||||
// 3. 第6层特殊处理：根据comFlag调整颜色
|
||||
if (level === 6 && item.hasOwnProperty('comFlag')) {
|
||||
switch (item.comFlag) {
|
||||
case 0:
|
||||
item.color = 'red !important'
|
||||
break
|
||||
case 1:
|
||||
item.color = '#00f93b !important'
|
||||
break
|
||||
case 2:
|
||||
item.color = '#8c8c8c !important'
|
||||
break
|
||||
// 默认值：保持原有基础颜色
|
||||
default:
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 递归处理子节点，层级+1
|
||||
if (item.children && item.children.length > 0) {
|
||||
processTreeData(item.children, item.children[0].level)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 递归查找树形结构中第一个level===6的节点（找到即终止递归）
|
||||
* @param {Object|Array} tree - 树形数据（根节点数组 或 单个根节点）
|
||||
* @returns {Object|null} 第一个level为6的节点，无则返回null
|
||||
*/
|
||||
function findFirstLevel6Node(tree: any) {
|
||||
// 统一处理入参：如果是数组，遍历根节点数组（按顺序找第一个符合条件的）
|
||||
if (Array.isArray(tree)) {
|
||||
for (const rootNode of tree) {
|
||||
const result = traverse(rootNode)
|
||||
// 找到第一个匹配节点，立即返回（终止根节点遍历）
|
||||
if (result) return result
|
||||
}
|
||||
// 所有根节点遍历完未找到
|
||||
return null
|
||||
} else {
|
||||
// 入参是单个节点，直接递归遍历
|
||||
return traverse(tree)
|
||||
}
|
||||
|
||||
// 核心递归遍历函数
|
||||
function traverse(node) {
|
||||
// 终止条件1：节点不存在，返回null
|
||||
if (!node) return null
|
||||
|
||||
// 终止条件2：找到level===6的节点，立即返回（终止递归）
|
||||
if (node.level === 6) {
|
||||
return node
|
||||
}
|
||||
|
||||
// 终止条件3：节点无children，返回null
|
||||
if (!node.children || node.children.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// 按顺序遍历当前节点的子节点
|
||||
for (const child of node.children) {
|
||||
const foundNode = traverse(child)
|
||||
// 子节点中找到目标节点，立即返回（终止后续子节点遍历）
|
||||
if (foundNode) {
|
||||
return foundNode
|
||||
}
|
||||
}
|
||||
|
||||
// 当前节点及所有子节点都无匹配，返回null
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ setKey })
|
||||
loadData()
|
||||
</script>
|
||||
@@ -144,4 +257,3 @@ loadData()
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user