CN-1548 fix: 优化点击tempNode后弹出listNode和entityNode的交互
This commit is contained in:
chenjinsong
@@ -51,7 +51,7 @@ import ForceGraph from 'force-graph'
|
||||
import { Algorithm } from '@antv/g6'
|
||||
import * as d3 from 'd3'
|
||||
import Node, { nodeType } from './entityGraph/node'
|
||||
import Link, { linkType } from './entityGraph/link'
|
||||
import Link, { linkType, linkDistance } from './entityGraph/link'
|
||||
import { builtTooltip } from '@/views/entityExplorer/entityGraph/utils'
|
||||
import _ from 'lodash'
|
||||
|
||||
@@ -81,7 +81,6 @@ export default {
|
||||
try {
|
||||
const initialData = await this.generateInitialData()
|
||||
this.initialData = _.cloneDeep(initialData) // 初始化数据
|
||||
console.info(initialData)
|
||||
let hoverNode = null
|
||||
this.graph = ForceGraph()(document.getElementById('entityGraph'))
|
||||
.graphData(initialData)
|
||||
@@ -381,13 +380,15 @@ export default {
|
||||
const nodes = []
|
||||
const links = []
|
||||
const sourceNode = node.getSourceNode(this.graph.graphData())
|
||||
const k1 = (node.x - sourceNode.x) / linkDistance.normal
|
||||
const k2 = (node.y - sourceNode.y) / linkDistance.normal
|
||||
const listNode = new Node(
|
||||
nodeType.listNode,
|
||||
`${sourceNode.realId}__${node.data.entityType}-list`,
|
||||
{
|
||||
entityType: node.data.entityType,
|
||||
x: node.x,
|
||||
y: node.y
|
||||
fx: sourceNode.x + k1 * linkDistance.entityToList,
|
||||
fy: sourceNode.y + k2 * linkDistance.entityToList,
|
||||
},
|
||||
sourceNode,
|
||||
this.defaultChargeStrength,
|
||||
@@ -395,11 +396,18 @@ export default {
|
||||
)
|
||||
nodes.push(listNode)
|
||||
links.push(new Link(sourceNode, listNode))
|
||||
this.addItems(nodes, links)
|
||||
this.cleanTempItems()
|
||||
this.clickNode = listNode
|
||||
this.rightBox.mode = 'list'
|
||||
|
||||
setTimeout(async () => {
|
||||
// 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
|
||||
const level = this.getNodeLevel(listNode.sourceNode.id)
|
||||
if (level < 10) {
|
||||
this.rightBox.loading = true
|
||||
nodes.splice(0, nodes.length)
|
||||
links.splice(0, links.length)
|
||||
try {
|
||||
const entities = await sourceNode.queryRelatedEntities(listNode.data.entityType)
|
||||
sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list)
|
||||
@@ -407,12 +415,19 @@ export default {
|
||||
const entityNode = new Node(nodeType.entityNode, entity.vertex, {
|
||||
entityType: listNode.data.entityType,
|
||||
entityName: entity.vertex,
|
||||
x: e.x + Math.random() * 100 - 50,
|
||||
y: e.y + Math.random() * 100 - 50
|
||||
x: listNode.x,
|
||||
y: listNode.y
|
||||
}, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, false, false))
|
||||
nodes.push(entityNode)
|
||||
links.push(new Link(listNode, entityNode))
|
||||
})
|
||||
this.addItems(nodes, links)
|
||||
|
||||
setTimeout(() => {
|
||||
listNode.fx = null
|
||||
listNode.fy = null
|
||||
this.rightBox.node = _.cloneDeep(listNode)
|
||||
}, 100)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
this.$message.error(this.errorMsgHandler(e))
|
||||
@@ -422,9 +437,7 @@ export default {
|
||||
} else {
|
||||
this.$message.warning(this.$t('tip.maxExpandDepth'))
|
||||
}
|
||||
this.addItems(nodes, links)
|
||||
this.cleanTempItems()
|
||||
// this.graph.layout()
|
||||
}, 200)
|
||||
|
||||
// 手动高亮listNode
|
||||
/* const _listNode = this.graph.findById(listNode.id)
|
||||
@@ -457,9 +470,11 @@ export default {
|
||||
.d3Force('link', d3.forceLink().id(link => link.id)
|
||||
.distance(link => {
|
||||
if (link.source.type === nodeType.rootNode) {
|
||||
return 180
|
||||
return linkDistance.root
|
||||
} else if (link.source.type === nodeType.entityNode && link.target.type === nodeType.listNode) {
|
||||
return linkDistance.entityToList
|
||||
}
|
||||
return 90
|
||||
return linkDistance.normal
|
||||
})
|
||||
.strength(link => {
|
||||
return link.strength
|
||||
|
||||
@@ -176,7 +176,6 @@ export default {
|
||||
node: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
console.info(n)
|
||||
this.handleDetailData(n)
|
||||
}
|
||||
}
|
||||
@@ -270,8 +269,6 @@ export default {
|
||||
return location || '-'
|
||||
},
|
||||
handleDetailData (node) {
|
||||
console.info(node)
|
||||
console.info(_.get(node, 'data.relatedEntities.ip.list', []))
|
||||
const n = node
|
||||
const type = _.get(n, 'data.entityType', '')
|
||||
switch (type) {
|
||||
@@ -435,7 +432,6 @@ export default {
|
||||
]
|
||||
}
|
||||
}
|
||||
console.info(this.relationList)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,3 +21,9 @@ export const linkType = {
|
||||
normal: 'normal',
|
||||
temp: 'temp'
|
||||
}
|
||||
|
||||
export const linkDistance = {
|
||||
root: 180,
|
||||
entityToList: 120,
|
||||
normal: 90
|
||||
}
|
||||
|
||||
@@ -16,10 +16,10 @@ export default class Node {
|
||||
this.type = type
|
||||
this.vx = 0
|
||||
this.vy = 0
|
||||
this.x = null
|
||||
this.y = null
|
||||
this.fx = sourceNode ? null : 0// 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
|
||||
this.fy = sourceNode ? null : 0// 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
|
||||
this.x = data.x || null
|
||||
this.y = data.y || null
|
||||
this.fx = data.fx || (sourceNode ? null : 0) // 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
|
||||
this.fy = data.fy || (sourceNode ? null : 0) // 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
|
||||
this.preDragX = null
|
||||
this.preDragY = null
|
||||
this.img = img
|
||||
|
||||
Reference in New Issue
Block a user