diff --git a/package.json b/package.json index 25d11716..5a2d05ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cn", - "version": "24.04", + "version": "24.4.0", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss index ed895195..5724b61a 100644 --- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss +++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss @@ -19,7 +19,7 @@ $color-regular: var(--el-text-color-regular); .graph-list-header-icon { font-size: 21px; - color: $color-regular; + color: #778391; margin-right: 9px; } } @@ -50,13 +50,10 @@ $color-regular: var(--el-text-color-regular); border-radius: 3px; font-size: 12px; color: var(--el-color-white); - display: flex; - align-items: center; - justify-content: center; - font-weight: 500; - padding: 14px 10px; + padding: 8px 10px; cursor: pointer; - border: 1px solid rgba(46, 136, 166, 0.85); + border: 1px solid var(--el-color-business); + text-align: center; i { font-size: 16px; diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue index 54c95a23..c6a67074 100644 --- a/src/views/entityExplorer/EntityGraph.vue +++ b/src/views/entityExplorer/EntityGraph.vue @@ -5,7 +5,7 @@ { - const nodeStyle = _this.getNodeStyle(node.type, node.data.entityType) + const nodeStyle = this.getNodeStyle(node.type, node.data.entityType) const iconWidth = nodeStyle.iconWidth / 2 const iconHeight = nodeStyle.iconHeight / 2 const x = node.x - iconWidth / 2 @@ -180,14 +180,14 @@ export default { } }) .nodePointerAreaPaint((node, color, ctx) => { // 鼠标hover起作用的范围 - const nodeStyle = _this.getNodeStyle(node.type, node.data.entityType) + const nodeStyle = this.getNodeStyle(node.type, node.data.entityType) const size = nodeStyle.innerR ctx.fillStyle = color ctx.fillRect(node.x - size / 2, node.y - size / 2, size, size) // draw square as pointer trap }) .linkCanvasObject((link, ctx) => { if (link.source.x !== undefined && link.source.y !== undefined && link.target.x !== undefined && link.target.y !== undefined) { - const nodeStyle = _this.getNodeStyle(link.target.type, link.target.data.entityType) + const nodeStyle = this.getNodeStyle(link.target.type, link.target.data.entityType) ctx.lineWidth = 0.5 ctx.beginPath() @@ -200,9 +200,9 @@ export default { const lineDash = link.target.type === nodeType.tempNode ? [2, 2] : [] ctx.setLineDash(lineDash) ctx.moveTo(link.source.x, link.source.y) - const xy = _this.findCircleLineIntersection(link.target.x, link.target.y, nodeStyle.innerR / 2, link.source.x, link.source.y) + const xy = this.findCircleLineIntersection(link.target.x, link.target.y, nodeStyle.innerR / 2, link.source.x, link.source.y) ctx.lineTo(xy[0].x, xy[0].y) - _this.drawArrow(ctx, link.source.x, link.source.y, xy[0].x, xy[0].y, 40, 3) + this.drawArrow(ctx, link.source.x, link.source.y, xy[0].x, xy[0].y, 40, 3) // 圆角三角形 if (this.clickNode && (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id)) { @@ -226,13 +226,12 @@ export default { .centerAt(0, 30)// 设置中心节点位置 .onNodeClick(async (nodeModel, e) => { this.clickNode = nodeModel || null - const newLevel = nodeModel.level + 1 if (nodeModel.type !== 'tempNode') { - // _this.rightBox.show = true - _this.cleanTempNodesAndTempEdges() + this.rightBox.show = true + this.cleanTempItems() // 点击entityNode，查询数据，并根据数据生成tempNode if (nodeModel.type === nodeType.entityNode) { - // _this.rightBox.loading = true + this.rightBox.loading = true try { // 若已查过数据，不重复查询 if (!nodeModel.data.relatedEntities) { @@ -251,12 +250,11 @@ export default { `${nodeModel.id}__${k}__temp`, { entityType: k, - ..._this.generateTempNodeCoordinate(nodeModel.getSourceNode(_this.currentNodeData), e) + ...this.generateTempNodeCoordinate(nodeModel.getSourceNode(this.currentNodeData), e) }, nodeModel, this.defaultChargeStrength, - this.getIconUrl(k, false, false), - newLevel + this.getIconUrl(k, false, false) ) this.$nextTick(() => { tempNode.fx = tempNode.x @@ -264,34 +262,34 @@ export default { }) const tempEdge = new Link(nodeModel, tempNode, 'temp', this.defaultLinkDistance, 3) - _this.currentNodeData.nodes.push(tempNode) - _this.currentNodeData.links.push(tempEdge) - _this.graph.graphData(_this.currentNodeData) + this.currentNodeData.nodes.push(tempNode) + this.currentNodeData.links.push(tempEdge) + this.graph.graphData(this.currentNodeData) } } }) - // change && _this.graph.layout()//????????????? - _this.rightBox.node = _.cloneDeep(nodeModel) - _this.rightBox.mode = 'detail' + // change && this.graph.layout()//????????????? + this.rightBox.node = _.cloneDeep(nodeModel) + this.rightBox.mode = 'detail' } catch (e) { - console.log(e) - _this.$message.error(_this.errorMsgHandler(e)) + console.error(e) + this.$message.error(this.errorMsgHandler(e)) } finally { - _this.rightBox.loading = false + this.rightBox.loading = false } } else if (nodeModel.type === nodeType.listNode) { - _this.rightBox.node = _.cloneDeep(nodeModel) - _this.rightBox.mode = 'list' + this.rightBox.node = _.cloneDeep(nodeModel) + this.rightBox.mode = 'list' } else if (nodeModel.type === nodeType.rootNode) { - _this.rightBox.node = _.cloneDeep(nodeModel) - _this.rightBox.mode = 'detail' + this.rightBox.node = _.cloneDeep(nodeModel) + this.rightBox.mode = 'detail' } } else { // 点击tempNode，根据source生成listNode和entityNode以及对应的edge。查完entityNode的接口再删除临时node和edge。 // 若已达第六层，则只生成listNode，不再展开entityNode const nodes = [] const edges = [] - const sourceNode = nodeModel.getSourceNode(_this.currentNodeData) + const sourceNode = nodeModel.getSourceNode(this.currentNodeData) const listNode = new Node( nodeType.listNode, `${sourceNode.id}__${nodeModel.data.entityType}-list`, @@ -302,16 +300,15 @@ export default { }, sourceNode, this.defaultChargeStrength, - this.getIconUrl(nodeModel.data.entityType, false, false), - newLevel + this.getIconUrl(nodeModel.data.entityType, false, false) ) nodes.push(listNode) edges.push(new Link(sourceNode, listNode, null, this.defaultLinkDistance, 2)) // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node - const level = _this.getNodeLevel(listNode.sourceNode.id) + const level = this.getNodeLevel(listNode.sourceNode.id) if (level < 10) { - // _this.rightBox.loading = true + // this.rightBox.loading = true try { const entities = await sourceNode.queryRelatedEntities(listNode.data.entityType) sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list) @@ -321,37 +318,37 @@ export default { 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, true, false), newLevel) + }, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, true, false)) nodes.push(entityNode) edges.push(new Link(listNode, entityNode, null, this.defaultLinkDistance, 2)) }) } catch (e) { - console.log(e) - _this.$message.error(_this.errorMsgHandler(e)) + console.error(e) + this.$message.error(this.errorMsgHandler(e)) } finally { - _this.rightBox.loading = false + this.rightBox.loading = false } } else { this.$message.warning(this.$t('tip.maxExpandDepth')) } - _this.addItems(nodes, edges) - _this.cleanTempNodesAndTempEdges() - // _this.graph.layout() + this.addItems(nodes, edges) + this.cleanTempItems() + // this.graph.layout() // 手动高亮listNode - /* const _listNode = _this.graph.findById(listNode.id) - _this.graph.emit('node:click', { item: _listNode, target: _listNode.getKeyShape() }) - if (_this.stackData.justUndo) { - _this.stackData.justUndo = false - _this.stackData.redo = [] + /* const _listNode = this.graph.findById(listNode.id) + this.graph.emit('node:click', { item: _listNode, target: _listNode.getKeyShape() }) + if (this.stackData.justUndo) { + this.stackData.justUndo = false + this.stackData.redo = [] } - if (_this.stackData.justRedo) { - _this.stackData.justRedo = false - _this.stackData.redo = [] + if (this.stackData.justRedo) { + this.stackData.justRedo = false + this.stackData.redo = [] } */ } - // _this.graph.zoom(1,0)//缩放画布 + // this.graph.zoom(1,0)//缩放画布 /* if(node.type !== nodeType.listNode && node.type !== nodeType.rootNode) { let clickNodeData = await this.generateInitialData(node) @@ -375,7 +372,7 @@ export default { }))// 设置线对点的力？ .d3Force('center', d3.forceCenter().strength(0))// 设置力导图点阵中心位置, 向心力设置为0以后，d3.forceCenter(-50,-70)不起作用了 .d3Force('charge', d3.forceManyBody().strength(node => { // 电荷力：吸引力或排斥力。forceManyBody使所有元素相互吸引或排斥。可以设置吸引或排斥的强度，.strength()其中正值导致元素相互吸引，而负值将导致元素相互排斥。 - const strength = node.level === 0 ? -350 : node.strength// 中心节点的排斥力要设置的比较大（-300，-200，-100），这样中心节点的子节点的子节点就会是远离中心节点的状态，进行聚集。 + const strength = node.type === nodeType.rootNode ? -350 : node.strength// 中心节点的排斥力要设置的比较大（-300，-200，-100），这样中心节点的子节点的子节点就会是远离中心节点的状态，进行聚集。 return strength })) .onNodeDrag((node, translate) => { @@ -413,7 +410,7 @@ export default { if (this.stackData.justRedo) { this.stackData.justRedo = false } - // this.cleanTempNodesAndTempEdges() + // this.cleanTempItems() this.graph.layout() this.onCloseBlock() } else if (code === 'redo') { @@ -424,7 +421,7 @@ export default { if (this.stackData.justUndo) { this.stackData.justUndo = false } - // this.cleanTempNodesAndTempEdges() + // this.cleanTempItems() this.graph.layout() this.onCloseBlock() } else if (code === 'autoZoom') { @@ -447,19 +444,18 @@ export default { }, getNodeStyle (curNodeType, entityType) { - const _this = this switch (curNodeType) { case nodeType.rootNode: { - return _this.getRootNodeStyle(entityType) + return this.getRootNodeStyle(entityType) } case nodeType.listNode: { - return _this.getListNodeStyle(entityType) + return this.getListNodeStyle(entityType) } case nodeType.entityNode: { - return _this.getEntityNodeStyle(entityType) + return this.getEntityNodeStyle(entityType) } case nodeType.tempNode: { - return _this.getTempNodeStyle(entityType) + return this.getTempNodeStyle(entityType) } } }, @@ -733,8 +729,15 @@ export default { ctx.lineTo(toX + topX, toY + topY) }, getNodeLevel (id) { - // this.graph.d3AlphaTarget() - return 2 + const { findShortestPath } = Algorithm + const { nodes, links } = this.graph.graphData() + const g6FormatData = { nodes: _.cloneDeep(nodes), edges: _.cloneDeep(links) } + g6FormatData.edges.forEach(l => { + l.source = l.source.id + l.target = l.target.id + }) + const info = findShortestPath(g6FormatData, this.entity.entityName, id) + return info.length }, generateTempNodeCoordinate (sourceNode, event) { const sx = sourceNode.x @@ -746,42 +749,26 @@ export default { y: cy + cy - sy + Math.random() * 30 - 15 } }, - addItems (nodes = [], edges = [], stack = true) { - // 过滤掉已经存在的node - const _nodes = nodes.filter(n => { - return !this.currentNodeData.nodes.find(node => node.id === n.id)// ??????????? - }) - _nodes.forEach(n => { - this.currentNodeData.nodes.push(n) - }) - edges.forEach(e => { - this.currentNodeData.links.push(e) - }) - if (_nodes.length > 0 || edges.length > 0) { - this.graph.graphData(this.currentNodeData) + addItems (toAddNodes, toAddLinks) { + if (toAddNodes.length || toAddLinks.length) { + const { nodes, links } = this.graph.graphData() + const nodes2 = toAddNodes.filter(n => !nodes.some(n2 => n.id === n2.id)) + nodes.push(...nodes2) + links.push(...toAddLinks) + this.graph.graphData({ nodes, links }) } }, - cleanTempNodesAndTempEdges () { - // 清除现有tempNode和tempEdge - const tempNodes = this.currentNodeData.nodes.filter(node => node.type === nodeType.tempNode) - tempNodes.forEach(n => { - const tempNodeIndex = this.currentNodeData.nodes.indexOf(n) - this.currentNodeData.nodes.splice(tempNodeIndex, 1) - }) - const tempEdges = this.currentNodeData.links.filter(edge => edge.type === 'temp') - tempEdges.forEach(n => { - const tempEdgeIndex = this.currentNodeData.links.indexOf(n) - this.currentNodeData.links.splice(tempEdgeIndex, 1) - }) - if (tempNodes.length > 0 || tempEdges.length > 0) { - this.graph.graphData(this.currentNodeData) - } + cleanTempItems () { + let { nodes, links } = this.graph.graphData() + nodes = nodes.filter(n => n.type !== nodeType.tempNode) + links = links.filter(l => l.level !== 3) + this.graph.graphData({ nodes, links }) }, async generateInitialData (clickNode) { const nodes = [] const links = [] - const rootNode = clickNode || new Node(nodeType.rootNode, this.entity.entityName, this.entity, null, this.defaultChargeStrength, this.getIconUrl(this.entity.entityType, true, true), 0) + const rootNode = clickNode || new Node(nodeType.rootNode, this.entity.entityName, this.entity, null, this.defaultChargeStrength, this.getIconUrl(this.entity.entityType, true, true)) await rootNode.queryDetailData() nodes.push(rootNode) this.clickNode = rootNode @@ -802,8 +789,7 @@ export default { }, rootNode, this.defaultChargeStrength, - this.getIconUrl(k, false, false), - 1 + this.getIconUrl(k, false, false) ) listNodes.push(listNode) links.push(new Link(rootNode, listNode, null, 60, 1)) @@ -824,8 +810,7 @@ export default { }, listNode, this.defaultChargeStrength, - this.getIconUrl(listNode.data.entityType, true, false), - 2 + this.getIconUrl(listNode.data.entityType, true, false) ) entityNodes.push(entityNode) links.push(new Link(listNode, entityNode, null, this.defaultLinkDistance, 2)) @@ -839,38 +824,34 @@ export default { } }, async expandList (nodeId) { - const node = this.graph.findById(nodeId) - const model = node.getModel() - const sourceNode = this.graph.findById(model.sourceNode.id) - const sourceModel = sourceNode.getModel() - const expandType = model.myData.entityType - if (sourceModel.myData.relatedEntity[expandType].list.length >= sourceModel.myData.relatedEntity[expandType].total) { + const { nodes } = this.graph.graphData() + const node = nodes.find(n => n.id === nodeId) + const sourceNode = nodes.find(n => n.id === node.sourceNode.id) + const expandType = node.data.entityType + if (sourceNode.data.relatedEntities[expandType].list.length >= sourceNode.data.relatedEntities[expandType].total) { return } - if (sourceModel.myData.relatedEntity[expandType].list.length < 50) { + if (sourceNode.data.relatedEntities[expandType].list.length < 50) { this.rightBox.loading = true try { - const entities = await queryRelatedEntity(sourceModel, expandType) - sourceModel.myData.relatedEntity[expandType].list.push(...entities.list) - const entityNodeModels = [] - const edgeModels = [] + const entities = await sourceNode.queryRelatedEntities(expandType) + sourceNode.data.relatedEntities[expandType].list.push(...entities.list) + const toAddNodes = [] + const toAddLinks = [] entities.list.forEach(entity => { - const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, { + const toAddNode = new Node(nodeType.entityNode, entity.vertex, { entityType: expandType, - entityName: entity.vertex, - x: model.x + Math.random() * 500 - 250, - y: model.y + Math.random() * 500 - 250 - }, model) - entityNodeModels.push(entityNodeModel) + entityName: entity.vertex + }, node, this.defaultChargeStrength, this.getIconUrl(node.data.entityType, true, false)) + toAddNodes.push(toAddNode) - const edge = new Edge(model, entityNodeModel) - edgeModels.push(edge) + const toAddLink = new Link(node, toAddNode, null, this.defaultLinkDistance) + toAddLinks.push(toAddLink) }) - this.addItems(entityNodeModels, edgeModels) - this.setItemsStata(edgeModels, 'mySelected', true) - this.graph.layout() - this.rightBox.node = _.cloneDeep(model) + this.addItems(toAddNodes, toAddLinks) + this.rightBox.node = _.cloneDeep(node) } catch (e) { + console.error(e) this.$message.error(this.errorMsgHandler(e)) } finally { this.rightBox.loading = false @@ -880,55 +861,43 @@ export default { } }, async expandDetailList (nodeId, expandType) { - const node = this.graph.findById(nodeId) + const { nodes } = this.graph.graphData() + const node = nodes.find(n => n.id === nodeId) if (node) { - const nodeModel = node.getModel() - if (nodeModel.myData.relatedEntity[expandType].list.length >= nodeModel.myData.relatedEntity[expandType].total) { + if (node.data.relatedEntities[expandType].list.length >= node.data.relatedEntities[expandType].total) { return } - if (nodeModel.myData.relatedEntity[expandType].list.length < 50) { - const toAddNodeModels = [] - const toAddEdgeModels = [] + if (node.data.relatedEntities[expandType].list.length < 50) { + const toAddNodes = [] + const toAddLinks = [] this.rightBox.loading = true try { - const entities = await queryRelatedEntity(nodeModel, expandType) - nodeModel.myData.relatedEntity[expandType].list.push(...entities.list) - const neighbors = node.getNeighbors('target') - const listNode = neighbors.find(n => n.getModel().myData.entityType === expandType) - let listNodeModel = listNode.getModel() - let listEdgeModel - // 如果listNode是tempNode，移除，并新建listNode - if (listNodeModel.type === nodeType.tempNode) { - // 移除tempNode和tempEdge - const tempEdges = listNode.getInEdges() - tempEdges.forEach(edge => { - this.graph.removeItem(edge) - }) - this.graph.removeItem(listNode) + const entities = await node.queryRelatedEntities(expandType) + node.data.relatedEntities[expandType].list.push(...entities.list) + // 移除 tempNode 和 tempEdge + this.cleanTempItems() - listNodeModel = new Node(nodeType.listNode, `${nodeModel.id}__${expandType}-list`, { entityType: expandType, x: listNodeModel.x, y: listNodeModel.y }, nodeModel) - listEdgeModel = new Edge(nodeModel, listNodeModel) - toAddNodeModels.push(listNodeModel) - toAddEdgeModels.push(listEdgeModel) + const neighbors = this.getNeighborItems(node) + let listNode = neighbors.targetNodes.find(n => n.data.entityType === expandType) + if (!listNode) { + listNode = new Node(nodeType.listNode, `${node.id}__${expandType}-list`, { entityType: expandType }, node, this.defaultChargeStrength, this.getIconUrl(expandType, false, false)) + const link = new Link(node, listNode, null, this.defaultLinkDistance) + toAddNodes.push(listNode) + toAddLinks.push(link) } entities.list.forEach(entity => { - const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, { + const entityNode = new Node(nodeType.entityNode, entity.vertex, { entityType: expandType, - entityName: entity.vertex, - x: listNodeModel.x + Math.random() * 500 - 250, - y: listNodeModel.y + Math.random() * 500 - 250 - }, listNodeModel) - toAddNodeModels.push(entityNodeModel) - toAddEdgeModels.push(new Edge(listNodeModel, entityNodeModel)) + entityName: entity.vertex + }, listNode, this.defaultChargeStrength, this.getIconUrl(expandType, true, false)) + toAddNodes.push(entityNode) + toAddLinks.push(new Link(listNode, entityNode, null, this.defaultLinkDistance)) }) - this.addItems(toAddNodeModels, toAddEdgeModels) - if (listEdgeModel) { - this.graph.setItemState(this.graph.findById(listEdgeModel.id), 'mySelected', true) - } - this.graph.layout() - this.rightBox.node = _.cloneDeep(nodeModel) + this.addItems(toAddNodes, toAddLinks) + this.rightBox.node = _.cloneDeep(node) } catch (e) { + console.error(e) this.$message.error(this.errorMsgHandler(e)) } finally { this.rightBox.loading = false @@ -946,22 +915,47 @@ export default { }, getIconUrl (entityType, colored, isRoot) { - let suffix - if (entityType === 'domain' && isRoot) { - suffix = '-colored2' - } else { - suffix = colored ? '-colored' : '' - } + const suffix = colored ? '-colored' : '' const img = new Image() img.src = require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`) return img + }, + getNeighborItems (node) { + const { links } = this.graph.graphData() + const neighboringNodes = [] + const neighboringTargetNodes = [] + const neighboringSourceNodes = [] + const neighboringTargetLinks = [] + const neighboringSourceLinks = [] + const neighboringLinks = links.filter(l => { + if (l.target === node || l.source === node) { + neighboringNodes.push(l.target === node ? l.source : l.target) + if (l.target === node) { + neighboringSourceNodes.push(l.source) + neighboringSourceLinks.push(l) + } else { + neighboringTargetNodes.push(l.target) + neighboringTargetLinks.push(l) + } + return true + } + return false + }) + return { + nodes: neighboringNodes, + targetNodes: neighboringTargetNodes, + sourceNodes: neighboringSourceNodes, + links: neighboringLinks, + targetLinks: neighboringTargetLinks, + sourceLinks: neighboringSourceLinks + } } }, watch: { }, async mounted () { if (this.entity.entityType && this.entity.entityName) { - this.init() + await this.init() this.debounceFunc = this.$_.debounce(this.resize, 300) window.addEventListener('resize', this.debounceFunc) } diff --git a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue index dff3acbc..9a528c69 100644 --- a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue +++ b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue @@ -75,7 +75,7 @@ -
+
@@ -85,7 +85,7 @@
-
+
{{ic.value}}
@@ -126,13 +126,13 @@ export default { computed: { iconClass () { let className - switch (_.get(this.node, 'myData.entityType', '')) { + switch (_.get(this.node, 'data.entityType', '')) { case ('ip'): { className = 'cn-icon cn-icon-ip2' break } case ('domain'): { - className = 'cn-icon cn-icon-domain2' + className = 'cn-icon cn-icon-subdomain' break } case ('app'): { @@ -145,7 +145,7 @@ export default { return className }, entityTypeName () { - const type = _.get(this.node, 'myData.entityType', '') + const type = _.get(this.node, 'data.entityType', '') let entityTypeName = '-' switch (type) { case ('ip'): { @@ -176,6 +176,7 @@ export default { node: { deep: true, handler (n) { + console.info(n) this.handleDetailData(n) } } @@ -270,59 +271,59 @@ export default { }, handleDetailData (node) { const n = node - const type = _.get(n, 'myData.entityType', '') + const type = _.get(n, 'data.entityType', '') switch (type) { case 'ip': { this.detailCards = [ - { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n, 'myData.basicInfo.asn.asn', '-') }, + { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n, 'data.basicInfo.asn.asn', '-') }, { name: 'asOrg', label: this.$t('entities.asOrg'), - value: _.get(n.myData, 'basicInfo.asn.organization', '-') + value: _.get(n.data, 'basicInfo.asn.organization', '-') }, { name: 'isp', label: this.$t('entities.graph.isp'), - value: _.get(n.myData, 'basicInfo.location.isp', '-') + value: _.get(n.data, 'basicInfo.location.isp', '-') }, - { name: 'location', label: this.$t('overall.location'), value: this.location(n.myData) } + { name: 'location', label: this.$t('overall.location'), value: this.location(n.data) } ] this.relationList = [ { icon: 'cn-icon cn-icon-subdomain', name: 'domain', label: this.$t('entity.graph.resolveDomain'), - value: _.get(n.myData, 'relatedEntity.domain.list', []).length, - total: _.get(n.myData, 'relatedEntity.domain.total', 0) || 0 + value: _.get(n.data, 'relatedEntities.domain.list', []).length, + total: _.get(n.data, 'relatedEntities.domain.total', 0) || 0 }, { icon: 'cn-icon cn-icon-app-name', name: 'app', label: this.$t('entities.tab.relatedApp'), - value: _.get(n.myData, 'relatedEntity.app.list', []).length, - total: _.get(n.myData, 'relatedEntity.app.total', '0') || 0 + value: _.get(n.data, 'relatedEntities.app.list', []).length, + total: _.get(n.data, 'relatedEntities.app.total', '0') || 0 } ] break } case 'domain': { - const expireDate = _.get(n.myData, 'basicInfo.whois.expireDate', '') - const createDate = _.get(n.myData, 'basicInfo.whois.createDate', '') + const expireDate = _.get(n.data, 'basicInfo.whois.expireDate', '') + const createDate = _.get(n.data, 'basicInfo.whois.createDate', '') this.detailCards = [ { name: 'categoryName', label: this.$t('entities.category'), - value: _.get(n.myData, 'basicInfo.category.categoryName', '-') + value: _.get(n.data, 'basicInfo.category.categoryName', '-') }, { name: 'categoryGroup', label: this.$t('entities.group'), - value: _.get(n.myData, 'basicInfo.category.categoryGroup', '-') + value: _.get(n.data, 'basicInfo.category.categoryGroup', '-') }, { name: 'reputationLevel', label: this.$t('entities.creditLevel2'), - value: _.get(n.myData, 'basicInfo.category.reputationLevel', '-') + value: _.get(n.data, 'basicInfo.category.reputationLevel', '-') }, { name: 'expireDate', @@ -332,17 +333,17 @@ export default { { name: 'registrarName', label: this.$t('entities.registrar'), - value: _.get(n.myData, 'basicInfo.whois.registrarName', '-') + value: _.get(n.data, 'basicInfo.whois.registrarName', '-') }, { name: 'registrantOrg', label: this.$t('entities.registry'), - value: _.get(n.myData, 'basicInfo.whois.registrantOrg', '-') + value: _.get(n.data, 'basicInfo.whois.registrantOrg', '-') }, { name: 'registrantCountry', label: this.$t('entities.registrationCountry'), - value: _.get(n.myData, 'basicInfo.whois.registrantCountry', '-') + value: _.get(n.data, 'basicInfo.whois.registrantCountry', '-') }, { name: 'createDate', @@ -352,7 +353,7 @@ export default { { name: 'email', label: this.$t('entities.registryEmail'), - value: _.get(n.myData, 'basicInfo.whois.email', '-') + value: _.get(n.data, 'basicInfo.whois.email', '-') } ] this.relationList = [ @@ -360,22 +361,22 @@ export default { icon: 'cn-icon cn-icon-resolve-ip', name: 'ip', label: this.$t('entities.graph.resolveIp'), - value: _.get(n.myData, 'relatedEntity.ip.list', []).length, - total: _.get(n.myData, 'relatedEntity.ip.total', '0') || 0 + value: _.get(n.data, 'relatedEntities.ip.list', []).length, + total: _.get(n.data, 'relatedEntities.ip.total', '0') || 0 }, { icon: 'cn-icon cn-icon-subdomain', name: 'domain', label: this.$t('entities.subdomain'), - value: _.get(n.myData, 'relatedEntity.domain.list', []).length, - total: _.get(n.myData, 'relatedEntity.domain.total', '0') || 0 + value: _.get(n.data, 'relatedEntities.domain.list', []).length, + total: _.get(n.data, 'relatedEntities.domain.total', '0') || 0 }, { icon: 'cn-icon cn-icon-app-name', name: 'app', label: this.$t('entities.tab.relatedApp'), - value: _.get(n.myData, 'relatedEntity.app.list', []).length, - total: _.get(n.myData, 'relatedEntity.app.total', 0) || 0 + value: _.get(n.data, 'relatedEntities.app.list', []).length, + total: _.get(n.data, 'relatedEntities.app.total', 0) || 0 } ] break @@ -385,32 +386,32 @@ export default { { name: 'appCategory', label: this.$t('entities.category'), - value: _.get(n.myData, 'basicInfo.category.appCategory', '-') + value: _.get(n.data, 'basicInfo.category.appCategory', '-') }, { name: 'appSubcategory', label: this.$t('entities.subcategory'), - value: _.get(n.myData, 'basicInfo.category.appSubcategory', '-') + value: _.get(n.data, 'basicInfo.category.appSubcategory', '-') }, { name: 'appRisk', label: this.$t('entities.riskLevel'), - value: this.appRisk(_.get(n.myData, 'basicInfo.category.appRisk', '-')) + value: this.appRisk(_.get(n.data, 'basicInfo.category.appRisk', '-')) }, { name: 'appTechnology', label: this.$t('overall.technology'), - value: _.get(n.myData, 'basicInfo.category.appTechnology', '-') + value: _.get(n.data, 'basicInfo.category.appTechnology', '-') }, { name: 'appLongname', label: this.$t('overall.appFullName'), - value: _.get(n.myData, 'basicInfo.category.appLongname', '-') + value: _.get(n.data, 'basicInfo.category.appLongname', '-') }, { name: 'appDescription', label: this.$t('config.dataSource.description'), - value: _.get(n.myData, 'basicInfo.category.appDescription', '-') + value: _.get(n.data, 'basicInfo.category.appDescription', '-') } ] @@ -419,15 +420,15 @@ export default { icon: 'cn-icon cn-icon-resolve-ip', name: 'ip', label: this.$t('entities.tab.relatedIp'), - value: _.get(n.myData, 'relatedEntity.ip.list', []).length, - total: _.get(n.myData, 'relatedEntity.ip.total', '0') || 0 + value: _.get(n.data, 'relatedEntities.ip.list', []).length, + total: _.get(n.data, 'relatedEntities.ip.total', '0') || 0 }, { icon: 'cn-icon cn-icon-subdomain', name: 'domain', label: this.$t('entities.graph.relatedDomain'), - value: _.get(n.myData, 'relatedEntity.domain.list', []).length, - total: _.get(n.myData, 'relatedEntity.domain.total', '0') || 0 + value: _.get(n.data, 'relatedEntities.domain.list', []).length, + total: _.get(n.data, 'relatedEntities.domain.total', '0') || 0 } ] } diff --git a/src/views/entityExplorer/entityGraph/GraphEntityList.vue b/src/views/entityExplorer/entityGraph/GraphEntityList.vue index 1d377e7a..f8350426 100644 --- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue +++ b/src/views/entityExplorer/entityGraph/GraphEntityList.vue @@ -4,11 +4,11 @@
- + {{ title }}
- {{ $t('entity.graph.associatedCount') }}: {{$_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.total', '-')}} + {{ $t('entity.graph.associatedCount') }}: {{$_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.total', '-')}}
@@ -16,10 +16,10 @@
-
+ {{ $t('entity.graph.continueToExpand') }} -
+
@@ -28,14 +28,14 @@
{{ $t('entity.graph.expandedEntityCount') }}:  - {{$_.get(node, 'sourceNode.myData.relatedEntity.' + $_.get(node, 'myData.entityType') + '.list', []).length}} + {{$_.get(node, 'sourceNode.data.relatedEntities.' + $_.get(node, 'data.entityType') + '.list', []).length}}
-
+
{{ item.vertex }}
-