zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(tree): 优化节点数据加载逻辑

Browse Source 
- 添加 isParentNode 状态标识判断节点是否为父节点
- 重构数据加载逻辑区分父节点和叶子节点的处理方式
- 父节点只获取子节点数据不显示自身数据
- 叶子节点获取当前节点自身数据
- 更新节点选中时的数据加载和日志输出逻辑
- 简化设备数据过滤和去重处理流程
boardTest
zangch@mesnac.com 2 weeks ago
parent a30a31e383
commit a27e1650cb
1 changed files with 43 additions and 66 deletions
Show Stats Download Patch File Download Diff File

109
src/views/index.vue
Unescape Escape View File

@ -303,6 +303,7 @@ export default {
selectedNodeName: null, // 当前选中的节点名称 selectedNodeName: null, // 当前选中的节点名称
selectedNodeType: null, // 当前选中的节点类型 selectedNodeType: null, // 当前选中的节点类型
selectedNodeCode: null, // 当前选中的节点Code selectedNodeCode: null, // 当前选中的节点Code
isParentNode: false, // 是否为父节点（有子节点）
deviceTreeProps: { deviceTreeProps: {
children: 'children', children: 'children',
label: 'label' label: 'label'
@ -362,68 +363,54 @@ export default {
this.loading = true this.loading = true
try { try {
console.log('=== 开始加载节点数据 ===') console.log('=== 开始加载节点数据 ===')
console.log('节点ID:', nodeId) console.log('节点ID:', nodeId, '是否为父节点:', this.isParentNode)
// 同时获取当前节点和子节点的数据 // 判断是否为父节点（有子节点的节点）
const [currentNodeResponse, childNodesResponse] = await Promise.all([ const isParentNode = this.isParentNode
// 获取当前节点自身的数据（通过获取所有数据然后筛选）
getLatestRecords(),
// 获取子节点的数据
getLatestRecordsByParentId(nodeId)
])
let allDeviceData = [] let allDeviceData = []
// 处理当前节点自身的数据 if (isParentNode) {
if (currentNodeResponse.code === 200) { // 父节点：只获取子节点的数据，不显示父节点自身（父节点通常是虚拟设备）
const currentNodeData = currentNodeResponse.data || [] const childNodesResponse = await getLatestRecordsByParentId(nodeId)
console.log('所有设备数据总数:', currentNodeData.length) if (childNodesResponse.code === 200) {
console.log('当前节点信息 - ID:', this.selectedNodeId, '名称:', this.selectedNodeName, 'Code:', this.selectedNodeCode) const childNodesData = childNodesResponse.data || []
console.log('子节点原始数据数量:', childNodesData.length)
// 筛选出当前节点对应的设备数据 const childDevices = childNodesData.filter(device => {
// 优先通过节点code匹配设备monitorId（叶子节点的正确匹配方式） const matches = device.monitorName !== '胶东机场' &&
const currentDevices = currentNodeData.filter(device => { device.monitorId &&
const matchByCode = this.selectedNodeCode && device.monitorId === this.selectedNodeCode device.monitorName
const matchById = device.monitorId === nodeId return matches
const matchByName = device.monitorName === this.selectedNodeName })
const isValid = device.monitorName !== '胶东机场' && console.log('子节点有效设备数量:', childDevices.length)
device.monitorId && allDeviceData = childDevices
device.monitorName }
} else {
// 叶子节点：获取当前节点自身的数据
const currentNodeResponse = await getLatestRecords()
if (currentNodeResponse.code === 200) {
const currentNodeData = currentNodeResponse.data || []
console.log('所有设备数据总数:', currentNodeData.length)
console.log('当前节点信息 - ID:', this.selectedNodeId, '名称:', this.selectedNodeName, 'Code:', this.selectedNodeCode)
const matches = (matchByCode || matchById || matchByName) && isValid // 筛选出当前节点对应的设备数据
const currentDevices = currentNodeData.filter(device => {
const matchByCode = this.selectedNodeCode && device.monitorId === this.selectedNodeCode
const matchById = device.monitorId === nodeId
const matchByName = device.monitorName === this.selectedNodeName
const isValid = device.monitorName !== '胶东机场' &&
device.monitorId &&
device.monitorName
if (matches) { return (matchByCode || matchById || matchByName) && isValid
console.log('找到当前节点设备:', device.monitorName, device.monitorId, })
matchByCode ? '(通过Code匹配)' : console.log('当前节点设备数量:', currentDevices.length)
matchById ? '(通过ID匹配)' : '(通过名称匹配)') allDeviceData = currentDevices
} }
return matches
})
console.log('当前节点设备数量:', currentDevices.length)
allDeviceData = [...allDeviceData, ...currentDevices]
} }
// 处理子节点数据 console.log('设备数据总数:', allDeviceData.length)
if (childNodesResponse.code === 200) {
const childNodesData = childNodesResponse.data || []
console.log('子节点原始数据数量:', childNodesData.length)
const childDevices = childNodesData.filter(device => {
const matches = device.monitorName !== '胶东机场' &&
device.monitorId &&
device.monitorName
if (matches) {
console.log('找到子节点设备:', device.monitorName, device.monitorId)
}
return matches
})
console.log('子节点有效设备数量:', childDevices.length)
allDeviceData = [...allDeviceData, ...childDevices]
}
console.log('合并后设备数据总数:', allDeviceData.length)
// 去重处理（基于monitorId） // 去重处理（基于monitorId）
const uniqueDevices = [] const uniqueDevices = []
@ -438,18 +425,6 @@ export default {
this.deviceList = uniqueDevices this.deviceList = uniqueDevices
console.log('最终设备列表数量:', this.deviceList.length) console.log('最终设备列表数量:', this.deviceList.length)
// 统计当前节点和子节点的设备数量
const currentNodeDeviceCount = this.deviceList.filter(d => {
return (this.selectedNodeCode && d.monitorId === this.selectedNodeCode) ||
d.monitorId === nodeId ||
d.monitorName === this.selectedNodeName
}).length
const childNodeDeviceCount = this.deviceList.length - currentNodeDeviceCount
console.log('当前节点数据数量:', currentNodeDeviceCount)
console.log('子节点数据数量:', childNodeDeviceCount)
console.log('=== 数据加载完成 ===') console.log('=== 数据加载完成 ===')
} catch (error) { } catch (error) {
@ -491,8 +466,10 @@ export default {
this.selectedNodeName = data.label this.selectedNodeName = data.label
this.selectedNodeType = data.type this.selectedNodeType = data.type
this.selectedNodeCode = data.code // 添加节点code字段 this.selectedNodeCode = data.code // 添加节点code字段
// 判断是否为父节点：有children且children不为空
this.isParentNode = !!(data.children && data.children.length > 0)
console.log('选中节点ID:', this.selectedNodeId, '节点名称:', this.selectedNodeName, '节点类型:', this.selectedNodeType, '节点Code:', this.selectedNodeCode) console.log('选中节点ID:', this.selectedNodeId, '节点名称:', this.selectedNodeName, '节点类型:', this.selectedNodeType, '节点Code:', this.selectedNodeCode, '是否父节点:', this.isParentNode)
// 根据选中的节点ID加载该节点下的设备数据 // 根据选中的节点ID加载该节点下的设备数据
this.loadDeviceDataByNode(this.selectedNodeId) this.loadDeviceDataByNode(this.selectedNodeId)

Write Preview
Loading…
Cancel
Save