277 lines
11 KiB
Vue
277 lines
11 KiB
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'
|
||
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
|
||
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)
|
||
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 = [
|
||
{
|
||
name: '电网拓扑',
|
||
level: -1,
|
||
id: 0,
|
||
children: res.data
|
||
}
|
||
]
|
||
}
|
||
// if (VITE_FLAG) {
|
||
processTreeData(res.data)
|
||
let firstLevel6Node = findFirstLevel6Node(res.data)
|
||
|
||
nodeKey = firstLevel6Node.id
|
||
emit('init', firstLevel6Node)
|
||
// } else {
|
||
// // 正常树处理
|
||
// 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)
|
||
}
|
||
|
||
// 定义不同层级对应的图标配置（可根据实际需求调整）
|
||
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, alias: string = '') {
|
||
// 空值判断，避免数组为空或undefined时报错
|
||
if (!Array.isArray(data) || data.length === 0) return
|
||
|
||
data.forEach(item => {
|
||
// 1. 设置基础图标（根据层级匹配）
|
||
item.icon = levelIconMap[level] || ''
|
||
item.alias = alias + `${item.name}`
|
||
// 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 == '-1' ? '' : item.alias + '>')
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 递归查找树形结构中第一个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({ 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>
|