CN-1548 fix: 优化点击tempNode后弹出listNode和entityNode的交互

src/views/entityExplorer/EntityGraph.vue

@@ -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,
+                    nodeType.listNode,
                     `${sourceNode.realId}__${node.data.entityType}-list`,
                     {
                       entityType: node.data.entityType,
-                      x: node.x,
+                      fx: sourceNode.x + k1 * linkDistance.entityToList,
-                      y: node.y
+                      fy: sourceNode.y + k2 * linkDistance.entityToList,
                     },
                     sourceNode,
                     this.defaultChargeStrength,
@@ -395,36 +396,48 @@ export default {
               )
               nodes.push(listNode)
               links.push(new Link(sourceNode, listNode))
-
-              // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
-              const level = this.getNodeLevel(listNode.sourceNode.id)
-              if (level < 10) {
-                this.rightBox.loading = true
-                try {
-                  const entities = await sourceNode.queryRelatedEntities(listNode.data.entityType)
-                  sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list)
-                  entities.list.forEach(entity => {
-                    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
-                    }, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, false, false))
-                    nodes.push(entityNode)
-                    links.push(new Link(listNode, entityNode))
-                  })
-                } catch (e) {
-                  console.error(e)
-                  this.$message.error(this.errorMsgHandler(e))
-                } finally {
-                  this.rightBox.loading = false
-                }
-              } else {
-                this.$message.warning(this.$t('tip.maxExpandDepth'))
-              }
               this.addItems(nodes, links)
               this.cleanTempItems()
-              // this.graph.layout()
+              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)
+                    entities.list.forEach(entity => {
+                      const entityNode = new Node(nodeType.entityNode, entity.vertex, {
+                        entityType: listNode.data.entityType,
+                        entityName: entity.vertex,
+                        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))
+                  } finally {
+                    this.rightBox.loading = false
+                  }
+                } else {
+                  this.$message.warning(this.$t('tip.maxExpandDepth'))
+                }
+              }, 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

src/views/entityExplorer/entityGraph/GraphEntityDetail.vue

@@ -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)
     }
   }
 }

src/views/entityExplorer/entityGraph/link.js

@@ -21,3 +21,9 @@ export const linkType = {
   normal: 'normal',
   temp: 'temp'
 }
+
+export const linkDistance = {
+  root: 180,
+  entityToList: 120,
+  normal: 90
+}

src/views/entityExplorer/entityGraph/node.js

@@ -16,10 +16,10 @@ export default class Node {
     this.type = type
     this.vx = 0
     this.vy = 0
-    this.x = null
+    this.x = data.x || null
-    this.y = null
+    this.y = data.y || null
-    this.fx = sourceNode ? null : 0// 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
+    this.fx = data.fx || (sourceNode ? null : 0) // 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
-    this.fy = 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