fix: 实体关系图优化: 1.多次拓展节点后,点击上一步操作,再点开拓展节点的界面,显示数据错误问题修改;

This commit is contained in:
hanyuxia
2024-08-20 10:26:21 +08:00
parent 744e47fd89
commit eda9f001f1
2 changed files with 65 additions and 5 deletions

View File

@@ -13,6 +13,7 @@
destroy-on-close>
<graph-entity-list
v-if="rightBox.mode === 'list'"
ref="graphEntityList"
:node="rightBox.node"
:loading="rightBox.loading"
@expandList="expandList"
@@ -553,7 +554,7 @@ export default {
links.splice(0, links.length)
try {
const entities = await sourceNode.queryRelatedEntities(listNode.data.entityType)
sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list)
sourceNode.data.relatedEntities[listNode.data.entityType].list = entities.list//点击临时节点的拓展操作是初始化前10个节点因为有上一步操作所以这里不能用push不然会出现数据错误需要用=
const curNodes = this.graph.graphData().nodes
entities.list.forEach(entity => {
const entityNode = new Node(nodeType.entityNode, entity.vertex, {
@@ -578,6 +579,7 @@ export default {
listNode.fx = null
listNode.fy = null
this.rightBox.node = _.cloneDeep(listNode)
this.rightBox.node.sourceNode.data.relatedEntities[listNode.data.entityType].list = entities.list//点击临时节点拓展entity节点要初始化为新查询的10个节点之前的entity节点直接被覆盖掉了
}, 100)
} catch (e) {
console.error(e)
@@ -853,12 +855,54 @@ export default {
})
this.graph.graphData({nodes:nodes,links:links})
//上一步操作,需要同时更新右侧列表的拓展数及列表内容
if(data.nodes.length > 0) {
let entityType = data.nodes[0].data.entityType
//特殊情况:
// 1. data.nodes可能只有一个节点且这个节点是之前有的节点所有就没有nodes[1]了只有nodes[0]就是list节点
// 2. 上一步操作对应的list及周边的entity节点和当前右侧显示的节点可能没有关系不涉及到上一步修改的相关拓展数据。
let undoNodeType = data.nodes[0].type
let grandParentNodeId = null
let listNode = null
if(undoNodeType === nodeType.listNode) {
grandParentNodeId = data.nodes[0].sourceNode.id
listNode = data.nodes[0]
} else if(undoNodeType === nodeType.entityNode) {//rootNode节点呢不需要处理没有上一步操作
grandParentNodeId = data.nodes[0].sourceNode.sourceNode.id
listNode = data.nodes[0].sourceNode
}
if(grandParentNodeId) {
const grandParentNode = nodes.find(item => item.id === grandParentNodeId)//entity节点
if(grandParentNode && grandParentNode.data.relatedEntities) {
let relatedEntityData = grandParentNode.data.relatedEntities[entityType]
relatedEntityData.showPageNo = relatedEntityData.showPageNo ? relatedEntityData.showPageNo - 1 : relatedEntityData.pageNo - 1//用于界面右侧展示列表的页数和拓展图展示的节点数据
if(relatedEntityData.showPageNo < 1) {//当前list节点没有数据了隐藏右侧列表
relatedEntityData.showPageNo = null
//上一步操作对应的list及周边的entity节点和当前右侧显示的节点可能没有关系不涉及到上一步修改的相关拓展数据。若无关则不需要隐藏右侧box。所以要查询下右侧box节点是否再graph的nodes里没有了则隐藏
const rightBoxNode = nodes.find(item => item.id === this.rightBox.node.id)
if(!rightBoxNode) {
this.onCloseBlock()
}
if(this.rightBox.node && this.rightBox.node.id === listNode.id) {
this.rightBox.node.sourceNode.data.relatedEntities[entityType].showPageNo = null
}
} else {
//|| this.rightBox.node.id === grandParentNodeId
if(this.rightBox.node && this.rightBox.node.id === listNode.id) {//entity页面或者entity对应list页面都有实体数显示
this.rightBox.node.sourceNode.data.relatedEntities[entityType].showPageNo = relatedEntityData.showPageNo
}
}
}
}
}
this.cleanTempItems()
this.stackData.redo.push(data)
if (this.stackData.justRedo) {
this.stackData.justRedo = false
}
this.onCloseBlock()
//this.onCloseBlock()
}
} else if (code === 'redo') { // 下一步
const data = this.stackData.redo.pop()
@@ -869,7 +913,7 @@ export default {
if (this.stackData.justUndo) {
this.stackData.justUndo = false
}
this.onCloseBlock()
//this.onCloseBlock()
}
} else if (code === 'autoZoom') {
if(this.rightBox.show) {

View File

@@ -28,12 +28,12 @@
<div class="digital-certificate-header__icon graph-header__icon"></div>
<div class="graph-list-content-header ">
{{ $t('entity.graph.expandedEntityCount') }}:&nbsp
<span>{{$_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', []).length}}</span>
<span>{{showDataNum}}</span>
</div>
</div>
<div class="graph-list-content">
<div v-for="(item, index) in $_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', [])" :key="index">
<div v-for="(item, index) in showList" :key="index">
<div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
<template v-if="$_.get(node, 'data.entityType', '') === 'ip'">
<div class="graph-list-item-block">
@@ -197,6 +197,15 @@ export default {
break
}
return className
},
showList() {
let allDataList = this.getAllData()
let showPageNo = this.getShowPageNo()
return showPageNo ? allDataList.slice(0,showPageNo * 10) : allDataList
},
showDataNum() {
let showPageNo = this.getShowPageNo()
return showPageNo ? showPageNo * 10 : this.getAllData().length
}
},
methods: {
@@ -212,6 +221,13 @@ export default {
},
getCountry (detail) {
return this.$_.get(detail, 'location.country') || 'Unknown'
},
getAllData() {
return this.$_.get(this.node, 'sourceNode.data.relatedEntities.' + this.$_.get(this.node, 'data.entityType') + '.list', [])
},
getShowPageNo () {
let showPageNo = this.$_.get(this.node, 'sourceNode.data.relatedEntities.' + this.$_.get(this.node, 'data.entityType') + '.showPageNo', null)
return showPageNo ? showPageNo : null
}
},
mounted () {