CN-1087 feat: 实体关系图完善

src/assets/css/components/views/charts2/entityDetailBasicInfo.scss

@@ -24,11 +24,12 @@
       display: flex;
       height: 134px;
       align-items: center;
-      justify-content: space-around;
+      justify-content: space-evenly;
 
       .analysis-entry-item {
         display: flex;
         flex-direction: column;
+        min-width: 70px;
         align-items: center;
         cursor: pointer;
 
@@ -69,7 +70,7 @@
 
   .dividing-line {
     height: 1px;
-    width: calc(100% - 60px);
+    width: 100%;
     margin-top: 21px;
     background-color: #EFF2F5;
   }

src/assets/css/components/views/charts2/graphRightDetailBlock.scss

@@ -11,7 +11,6 @@ $font-size: 12px;
     flex-direction: column;
 
     .entity-graph-type {
-      font-family: NotoSansSChineseRegular;
       font-size: 12px;
       color: #717171;
       font-weight: 400;
@@ -33,10 +32,13 @@ $font-size: 12px;
 
       .graph-basic-info-name {
         padding-right: 10px;
-        font-family: Helvetica-Bold;
+        width: 260px;
         font-size: 20px;
         color: #353636;
         font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .graph-basic-info-icon {
@@ -197,7 +199,6 @@ $font-size: 12px;
 }
 
 .graph-basic-info__block-title {
-  font-family: NotoSansHans-Medium;
   font-size: 13px;
   color: #353636;
   font-weight: 600;

src/utils/tools.js

@@ -741,34 +741,38 @@ export function truncateText (text, limitWidth, fontSize = 12, ellipsis = '...')
 }
 
 export function scrollToTop (dom, toTop, duration, direction) {
-  const clientHeight = dom.clientHeight
-  const currentTop = dom.scrollTop
-  const totalScrollDistance = Math.abs(currentTop - toTop)
-  let scrollY = currentTop
-  let oldTimestamp = null
-
-  function step (newTimestamp) {
-    if (oldTimestamp !== null) {
-      if (direction === 'up') {
-        scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration
-        if (scrollY < 0) {
-          dom.scrollTop = 0
-          return
+  if (toTop && duration && direction) {
+    const clientHeight = dom.clientHeight
+    const currentTop = dom.scrollTop
+    const totalScrollDistance = Math.abs(currentTop - toTop)
+    let scrollY = currentTop
+    let oldTimestamp = null
+    function step (newTimestamp) {
+      if (oldTimestamp !== null) {
+        if (direction === 'up') {
+          scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration
+          if (scrollY < 0) {
+            dom.scrollTop = 0
+            return
+          }
+          dom.scrollTop = scrollY
+        } else if (direction === 'down') {
+          scrollY += totalScrollDistance * (newTimestamp - oldTimestamp) / duration
+          if (scrollY > clientHeight) {
+            dom.scrollTop = clientHeight
+            return
+          }
+          dom.scrollTop = scrollY
         }
-        dom.scrollTop = scrollY
-      } else if (direction === 'down') {
-        scrollY += totalScrollDistance * (newTimestamp - oldTimestamp) / duration
-        if (scrollY > clientHeight) {
-          dom.scrollTop = clientHeight
-          return
-        }
-        dom.scrollTop = scrollY
       }
+      oldTimestamp = newTimestamp
+      window.requestAnimationFrame(step)
     }
-    oldTimestamp = newTimestamp
     window.requestAnimationFrame(step)
+  } else {
+    const wraps = document.querySelector('.entity-graph__detail')
+    wraps.scrollTop = 0
   }
-  window.requestAnimationFrame(step)
 }
 
 export function getChainRatio (current, prev) {

src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue

@@ -9,7 +9,7 @@
       </div>
       <el-popover
           placement="bottom-end"
-          :width="390"
+          :width="450"
           trigger="click"
           popper-class="analysis-popper"
           @show="analysisPopSwitch(true)"
@@ -254,6 +254,17 @@ export default {
       label: i18n.global.t('dns.dnsInsights'),
       path: '/panel/dnsServiceInsights'
     }
+    const graphItem = {
+      icon: 'cn-icon cn-icon-graph',
+      label: i18n.global.t('entities.graph'),
+      url: resolvePath({
+        path: '/entityGraph',
+        query: {
+          entityType: props.entity.entityType,
+          entityName: props.entity.entityName
+        }
+      })
+    }
     switch (props.entity.entityType) {
       case 'ip': {
         const queryCondition = `common_client_ip='${props.entity.entityName}' OR common_server_ip='${props.entity.entityName}'`
@@ -379,6 +390,7 @@ export default {
         break
       }
     }
+    analysisItems.value.push(graphItem)
     // 底部各属性
     const detailCards = ref([])
     switch (props.entity.entityType) {

src/views/entityExplorer/EntityGraph.vue

@@ -55,7 +55,7 @@ import { ref, shallowRef } from 'vue'
 import _ from 'lodash'
 import { api } from '@/utils/api'
 import axios from 'axios'
-import G6 from '@antv/g6'
+import G6, { Algorithm } from '@antv/g6'
 import { entityDetailTags } from '@/utils/constants'
 
 export default {
@@ -148,20 +148,31 @@ export default {
         * */
         let change = false // 图数据是否有变更，需要刷新
         // 清除temp node和temp edge
+        const toDeleteTempNodeIds = []
+        const toDeleteTempEdgeIds = []
         _this.graphData.nodes = _this.graphData.nodes.filter(n => {
           if (n.data && !n.data.isTemp) {
             return true
           }
-          change = true
+          toDeleteTempNodeIds.push(n.id)
+          // change = true
           return false
         })
         _this.graphData.edges = _this.graphData.edges.filter(e => {
           if (e.data && !e.data.isTemp) {
             return true
           }
-          change = true
+          toDeleteTempEdgeIds.push(e.id)
+          // change = true
           return false
         })
+        toDeleteTempNodeIds.forEach(n => {
+          _this.graph.removeItem(n)
+        })
+        toDeleteTempEdgeIds.forEach(n => {
+          _this.graph.removeItem(n)
+        })
+
         if (node.nodeType === 'root') { // 点击了root
           _this.entity = {
             entityName: node.id,
@@ -170,10 +181,11 @@ export default {
             tags: node.data.tags,
             type: node.data.type,
             detailData: node.data.data,
+            relatedEntityCount: node.data.relatedEntityCount,
             isSubdomain: node.data.isSubdomain || false,
-            loading: true
+            loading: false
           }
-          const relatedEntityCount = await _this.queryRelatedEntityCount(_this.entity.entityType, node.id)
+          /* const relatedEntityCount = await _this.queryRelatedEntityCount(_this.entity.entityType, node.id)
           _this.entity = {
             ..._this.entity,
             relatedEntityCount: _this.handleRelatedEntityCount(node, relatedEntityCount),
@@ -206,9 +218,21 @@ export default {
               }
               _this.graph.refreshItem(n.id)
             })
-          }
+          } */
         } else if (node.nodeType === 'primary') { // 点击了primary
-          _this.entity.loading = true
+          _this.entity = {
+            entityType: _this.entity.entityType,
+            entityName: _this.entity.entityName,
+            listData: node.data.loaded,
+            count: node.data.count,
+            isSubdomain: node.data.isSubdomain || false,
+            sourceType: node.data.sourceType,
+            sourceName: node.data.sourceName,
+            type: node.data.type,
+            nodeId: node.id,
+            loading: false
+          }
+          /* _this.entity.loading = true
           const queryRelatedEntityCount = await _this.queryRelatedEntityCount(node.data.sourceType, node.data.sourceName)
           const sourceNode = _this.graphData.nodes.find(n => n.id === node.data.sourceName)
           _this.handleRelatedEntityCount(sourceNode, queryRelatedEntityCount)
@@ -246,10 +270,26 @@ export default {
               break
             }
           }
-          _this.graph.refreshItem(node.id)
+          _this.graph.refreshItem(node.id) */
           // TODO 高亮
         } else if (node.nodeType === 'entity') {
-          _this.entity.loading = true
+          // 点击节点时，看是否已查询过related count，已查过则不再查
+          if (!node.data.childNodes) {
+            _this.entity.loading = true
+            const relatedEntityCount = await _this.queryRelatedEntityCount(node.data.type, node.id)
+            node.data.relatedEntityCount = _this.handleRelatedEntityCount(node, relatedEntityCount)
+          }
+          _this.entity = {
+            entityType: _this.entity.entityType,
+            entityName: _this.entity.entityName,
+            relatedEntityCount: node.data.relatedEntityCount,
+            detailData: node.data.data,
+            type: node.data.type,
+            isSubdomain: false,
+            name: node.id,
+            loading: false
+          }
+          /* _this.entity.loading = true
           const relatedEntityCount = await _this.queryRelatedEntityCount(node.data.type, node.id)
           // 赋值总数和已拓展数。entity node可从其childNodes取到已拓展数
           _this.entity = {
@@ -289,8 +329,8 @@ export default {
               }
               _this.graph.refreshItem(n.id)
             })
-          }
-          const { tempNodes, tempEdges } = _this.generateTempNodesAndEdges(node, relatedEntityCount)
+          } */
+          const { tempNodes, tempEdges } = _this.generateTempNodesAndEdges(node, node.data.relatedEntityCount)
           if (tempNodes.length > 0) {
             change = true
             _this.addNodes(tempNodes)
@@ -329,10 +369,13 @@ export default {
           const entityNodes = []
           const edges = []
           if (level < 9) {
+            _this.entity.loading = true
             const queryEntityNodes = await _this.generateHalfLevelNodes(primaryNode)
+            _this.entity.loading = false
             _this.updateRelatedCount(sourceNode, [primaryNode])
             entityNodes.push(...queryEntityNodes)
             edges.push(..._this.generateEdges(primaryNode))
+
             // TODO 高亮
           } else {
             // TODO 提示无法拓展
@@ -499,7 +542,22 @@ export default {
         }
       }
     },
-    generateEntityNode (nodeData, data) {
+    async generateEntityNode (nodeData, data) {
+      const tags = await this.queryTags(nodeData.type, data.vertex)
+      let _tags = []
+      Object.keys(tags).forEach(k => {
+        if (k !== 'userDefinedTags' && tags[k]) {
+          Object.keys(tags[k]).forEach(k2 => {
+            const find = entityDetailTags[this.entity.entityType].find(t => t.name === k2)
+            if (find) {
+              _tags.push({ key: k2, value: this.tagValueHandler(k, k2, tags[k][k2]), type: find.type })
+            }
+          })
+        }
+      })
+      if (_.isArray(tags.userDefinedTags)) {
+        _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, type: 'normal' })))
+      }
       let width = 0
       let height = 0
       switch (nodeData.type) {
@@ -539,7 +597,8 @@ export default {
           type: nodeData.type,
           isSubdomain: nodeData.isSubdomain || false,
           name: data.vertex,
-          data
+          data,
+          tags: _tags
         }
       }
     },
@@ -623,6 +682,7 @@ export default {
       const nodes = []
       if (relatedEntityCount) {
         this.entity.relatedEntityCount = this.handleRelatedEntityCount(rootNode, relatedEntityCount)
+        rootNode.data.relatedEntityCount = this.entity.relatedEntityCount
         const ipNode = this.generatePrimaryNode({
           id: 'ip-1',
           parentId: rootNode.id,
@@ -738,9 +798,9 @@ export default {
         const data = await this.queryRelatedEntity(node.data.sourceType, node.data.sourceName, node.data.type, pageNo)
         if (data) {
           // 生成节点
-          data.list.forEach(d => {
-            newNodes2.push(this.generateEntityNode(node.data, d))
-          })
+          for (const d of data.list) {
+            newNodes2.push(await this.generateEntityNode(node.data, d))
+          }
           // 更新源节点的已拓展数和列表
           this.handleLoaded(node, data, newNodes2)
           newNodes.push(...newNodes2)
@@ -807,6 +867,7 @@ export default {
       }
       const response = await axios.get(url).catch(e => {
         console.error(e)
+        this.entity.loading = false
         this.showError = true
         this.errorMsg = this.errorMsgHandler(e)
       })
@@ -815,6 +876,7 @@ export default {
       } else {
         console.error(response)
         this.showError = true
+        this.entity.loading = false
         this.errorMsg = this.errorMsgHandler(response)
         return null
       }
@@ -887,16 +949,16 @@ export default {
       const tempEdges = []
       switch (node.data.type) {
         case 'ip': {
-          if (relatedEntityCount.domainCount && !this.hasChildNodeByType(node, 'domain')) {
+          if (relatedEntityCount.domain.total && !this.hasChildNodeByType(node, 'domain')) {
             const tempNode = this.generateTempNode('domain', node)
-            tempNode.data.count = relatedEntityCount.domainCount
+            tempNode.data.count = relatedEntityCount.domain.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
           }
-          if (relatedEntityCount.appCount && !this.hasChildNodeByType(node, 'app')) {
+          if (relatedEntityCount.app.total && !this.hasChildNodeByType(node, 'app')) {
             const tempNode = this.generateTempNode('app', node)
-            tempNode.data.count = relatedEntityCount.appCount
+            tempNode.data.count = relatedEntityCount.app.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
@@ -904,23 +966,23 @@ export default {
           break
         }
         case 'domain': {
-          if (relatedEntityCount.ipCount && !this.hasChildNodeByType(node, 'ip')) {
+          if (relatedEntityCount.ip.total && !this.hasChildNodeByType(node, 'ip')) {
             const tempNode = this.generateTempNode('ip', node)
-            tempNode.data.count = relatedEntityCount.ipCount
+            tempNode.data.count = relatedEntityCount.ip.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
           }
-          if (relatedEntityCount.subDomainCount && !this.hasChildNodeByType(node, 'domain')) {
+          if (relatedEntityCount.subDomain.total && !this.hasChildNodeByType(node, 'domain')) {
             const tempNode = this.generateTempNode('domain', node, true)
-            tempNode.data.count = relatedEntityCount.subDomainCount
+            tempNode.data.count = relatedEntityCount.subDomain.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
           }
-          if (relatedEntityCount.appCount && !this.hasChildNodeByType(node, 'app')) {
+          if (relatedEntityCount.app.total && !this.hasChildNodeByType(node, 'app')) {
             const tempNode = this.generateTempNode('app', node)
-            tempNode.data.count = relatedEntityCount.appCount
+            tempNode.data.count = relatedEntityCount.app.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
@@ -928,16 +990,16 @@ export default {
           break
         }
         case 'app': {
-          if (relatedEntityCount.ipCount && !this.hasChildNodeByType(node, 'ip')) {
+          if (relatedEntityCount.ip.total && !this.hasChildNodeByType(node, 'ip')) {
             const tempNode = this.generateTempNode('ip', node)
-            tempNode.data.count = relatedEntityCount.ipCount
+            tempNode.data.count = relatedEntityCount.ip.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
           }
-          if (relatedEntityCount.domainCount && !this.hasChildNodeByType(node, 'domain')) {
+          if (relatedEntityCount.domain.total && !this.hasChildNodeByType(node, 'domain')) {
             const tempNode = this.generateTempNode('domain', node)
-            tempNode.data.count = relatedEntityCount.domainCount
+            tempNode.data.count = relatedEntityCount.domain.total
             const tempEdge = this.generateTempEdge(node, tempNode)
             tempNodes.push(tempNode)
             tempEdges.push(tempEdge)
@@ -1028,10 +1090,9 @@ export default {
       })
     },
     getNodeLevel (id) {
-      const matrix = this.graph.getShortestPathMatrix(false)
-      const rootPathMatrix = matrix[0]
-      const nodeIndex = this.graphData.nodes.findIndex(n => n.id === id)
-      return rootPathMatrix[nodeIndex]
+      const { findShortestPath } = Algorithm
+      const info = findShortestPath(this.graphData, this.entity.entityName, id)
+      return info.length
     },
     onCloseBlock () {
       // todo 关闭右侧graph面板
@@ -1085,16 +1146,42 @@ export default {
                 <span>${_this.$t('entity.graph.expandedEntityQuantity')}:&nbsp;${node.data.loaded ? node.data.loaded.length : 0}</span>
               </div>
             </div>`
-          } else {
-            // TODO 逻辑
-            return `<div class="entity-node-tooltip">
-              <div class="tooltip__header"><span class="tooltip__title">${node.id}</span></div>
-            </div>`
+          } else if (node.nodeType === 'entity' || node.nodeType === 'root') {
+            if (node.data && node.data.tags && node.data.tags.length > 0) {
+              return `<div class="entity-node-tooltip">
+                <div class="tooltip__header">
+                  <span class="tooltip__title">${node.id}</span>
+                </div>
+                <div class="tooltip__content">
+                  <div class="content-header">
+                    <div class="header-icon"></div>
+                    <span>${_this.$t('entity.graph.tags')}</span>
+                  </div>
+                  <div class="content-tag-list">${generateTagHTML(node.data.tags)}</div>
+                </div>
+              </div>`
+            } else {
+              return `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.id}</div>`
+            }
+          } else if (node.nodeType === 'temp') {
+            return node.label
+          }
+          function generateTagHTML (tags) {
+            let html = ''
+            if (tags) {
+              tags.forEach(t => {
+                html += `<div class="entity-tag entity-tag--level-two-${t.type}">
+                  <span>${t.value}</span>
+                </div>`
+              })
+            }
+            return html
           }
         }
       })
     },
     async expandList (sourceNodeId, nodeId) {
+      this.entity.loading = true
       const sourceNode = this.graphData.nodes.find(n => n.id === sourceNodeId)
       const node = this.graphData.nodes.find(n => n.id === nodeId)
       if (node && sourceNode) {
@@ -1105,8 +1192,11 @@ export default {
           this.entity = {
             ...this.entity,
             relatedEntityCount: this.handleRelatedEntityCount(sourceNode, relatedEntityCount),
-            listData: node.data.loaded
+            listData: node.data.loaded,
+            loading: false
           }
+          sourceNode.data.relatedEntityCount = this.entity.relatedEntityCount
+
           this.addNodes(queryEntityNodes)
           this.addEdges(this.generateEdges(node, queryEntityNodes))
           this.graph.changeData(this.graphData)
@@ -1117,16 +1207,13 @@ export default {
     },
     async expandDetailList (expandType, currentName) {
       const currentNode = this.graphData.nodes.find(n => n.id === currentName)
-      console.info(expandType, currentName, currentNode)
       // 如果存在primary node，直接拓展
       const _primaryNode = currentNode.data.childNodes ? currentNode.data.childNodes.find(n => n.data.type === expandType) : null
-      console.info('primary', _primaryNode)
       if (_primaryNode) {
         await this.expandList(currentName, _primaryNode.id)
       } else {
         // 如果是temp node，删掉，新增primary node，再拓展
         const tempNode = this.graphData.nodes.find(n => n.nodeType === 'temp' && n.data.sourceName === currentName && n.data.type === expandType)
-        console.info('temp', tempNode)
         if (tempNode) {
           // 先清除此temp node和temp edge
           this.graphData.nodes = this.graphData.nodes.filter(n => {
@@ -1160,7 +1247,9 @@ export default {
           const edges = []
           const level = this.getNodeLevel(primaryNode.id)
           if (level < 9) {
+            this.entity.loading = true
             const queryEntityNodes = await this.generateHalfLevelNodes(primaryNode)
+            this.entity.loading = false
             this.updateRelatedCount(currentNode, [primaryNode])
             entityNodes.push(...queryEntityNodes)
             edges.push(...this.generateEdges(primaryNode))
@@ -1170,7 +1259,6 @@ export default {
           }
           this.addNodes(entityNodes)
           this.addEdges(edges)
-          console.info(this.graphData)
           this.graph.changeData(this.graphData)
         }
       }
@@ -1360,11 +1448,13 @@ export default {
       }
     }
     .entity-node-tooltip {
+      width: 300px;
       padding: 5px;
 
       .tooltip__header {
         display: flex;
         align-items: center;
+        margin-bottom: 20px;
 
         .tooltip__title {
           font-size: 15px;
@@ -1372,6 +1462,60 @@ export default {
           color: #111;
         }
       }
+
+      .tooltip__content {
+        display: flex;
+        flex-direction: column;
+
+        .content-header {
+          display: flex;
+          align-items: center;
+
+          .header-icon {
+            width: 3px !important;
+            height: 12px !important;
+            background: #38ACD2;
+            border-radius: 1px;
+            margin-right: 6px;
+          }
+        }
+        .content-tag-list {
+          display: flex;
+          align-items: flex-start;
+          flex-wrap: wrap;
+
+          .entity-tag {
+            margin: 10px 0;
+            padding: 0 8px;
+            height: 20px;
+            font-size: 12px;
+            border: 1px solid;
+            border-radius: 2px;
+
+            $normal-color: #778391;
+            $normal-light-color: #F7F8F9;
+            $negative-color: #E26154;
+            $negative-light-color: #FEF6F5;
+            $positive-color: #749F4D;
+            $positive-light-color: #F7FAF5;
+            &.entity-tag--level-two-normal {
+              border-color: $normal-color;
+              color: $normal-color;
+              background-color: $normal-light-color;
+            }
+            &.entity-tag--level-two-negative {
+              border-color: $negative-color;
+              color: $negative-color;
+              background-color: $negative-light-color;
+            }
+            &.entity-tag--level-two-positive {
+              border-color: $positive-color;
+              color: $positive-color;
+              background-color: $positive-light-color;
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/entityExplorer/entityGraphDetail/AppList.vue

@@ -66,6 +66,7 @@
 <script>
 import { riskLevelMapping } from '@/utils/constants'
 import Loading from '@/components/common/Loading'
+import { scrollToTop } from '@/utils/tools'
 export default {
   name: 'AppList',
   props: {
@@ -110,6 +111,11 @@ export default {
         this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
       }
     }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      scrollToTop()
+    })
   }
 }
 </script>

src/views/entityExplorer/entityGraphDetail/DomainList.vue

@@ -62,6 +62,7 @@
 <script>
 import { riskLevelMapping } from '@/utils/constants'
 import Loading from '@/components/common/Loading'
+import { scrollToTop } from '@/utils/tools'
 export default {
   name: 'DomainList',
   props: {
@@ -106,6 +107,11 @@ export default {
         this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
       }
     }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      scrollToTop()
+    })
   }
 }
 </script>

src/views/entityExplorer/entityGraphDetail/GraphDetail.vue

@@ -8,7 +8,7 @@
         <div class="entity-graph-type">{{ entityType[entity.type || entity.entityType] }}</div>
         <div class="graph-basic-info">
           <div class="graph-basic-info-name__block">
-            <div class="graph-basic-info-name" id="entityName">{{ $_.get(entity, 'detailData.vertex', '') }}</div>
+            <div class="graph-basic-info-name" :title="$_.get(entity, 'detailData.vertex', '')" id="entityName">{{ $_.get(entity, 'detailData.vertex', '') }}</div>
             <div class="graph-basic-info-icon" @click="copyEntityName">
               <i class="cn-icon cn-icon-copy"></i>
             </div>
@@ -153,7 +153,7 @@
   </div>
 
   <!--标签-->
-  <div class="digital-certificate graph-basic-info__block">
+  <div v-if="entity.tags" class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
       <div class="graph-basic-info__block-title">
@@ -238,171 +238,13 @@ export default {
     entity: {
       deep: true,
       handler (n) {
-        const type = n.type || n.entityType
-        switch (type) {
-          case 'ip': {
-            this.detailCards = [
-              { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n.detailData, 'detail.asn.asn', '-') },
-              {
-                name: 'asOrg',
-                label: this.$t('entities.asOrg'),
-                value: _.get(n.detailData, 'detail.asn.organization', '-')
-              },
-              {
-                name: 'isp',
-                label: this.$t('entities.graph.isp'),
-                value: _.get(n.detailData, 'detail.location.isp', '-')
-              },
-              { name: 'location', label: this.$t('overall.location'), value: this.location(n.detailData) }
-            ]
-            this.relationList = [
-              {
-                icon: 'cn-icon cn-icon-subdomain',
-                name: 'domain',
-                label: this.$t('entity.graph.resolveDomain'),
-                value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
-              },
-              {
-                icon: 'cn-icon cn-icon-app-name',
-                name: 'app',
-                label: this.$t('entities.tab.relatedApp'),
-                value: _.get(n.relatedEntityCount, 'app.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'app.total', '0') || 0
-              }
-            ]
-            break
-          }
-          case 'domain': {
-            const expireDate = _.get(n.detailData, 'detail.whois.expireDate', '')
-            const createDate = _.get(n.detailData, 'detail.whois.createDate', '')
-            this.detailCards = [
-              {
-                name: 'categoryName',
-                label: this.$t('entities.category'),
-                value: _.get(n.detailData, 'detail.category.name', '-')
-              },
-              {
-                name: 'categoryGroup',
-                label: this.$t('entities.group'),
-                value: _.get(n.detailData, 'detail.category.group', '-')
-              },
-              {
-                name: 'reputationLevel',
-                label: this.$t('entities.creditLevel2'),
-                value: _.get(n.detailData, 'detail.category.reputationLevel', '-')
-              },
-              {
-                name: 'expireDate',
-                label: this.$t('entities.graph.expirationDate'),
-                value: expireDate ? dateFormatByAppearance(expireDate) : '-'
-              },
-              {
-                name: 'registrarName',
-                label: this.$t('entities.registrar'),
-                value: _.get(n.detailData, 'detail.whois.registrarName', '-')
-              },
-              {
-                name: 'registrantOrg',
-                label: this.$t('entities.registry'),
-                value: _.get(n.detailData, 'detail.whois.registrantOrg', '-')
-              },
-              {
-                name: 'registrantCountry',
-                label: this.$t('entities.registrationCountry'),
-                value: _.get(n.detailData, 'detail.whois.registrantCountry', '-')
-              },
-              {
-                name: 'createDate',
-                label: this.$t('entities.registrationDate'),
-                value: createDate ? dateFormatByAppearance(createDate) : '-'
-              },
-              {
-                name: 'email',
-                label: this.$t('entities.registryEmail'),
-                value: _.get(n.detailData, 'detail.whois.email', '-')
-              }
-            ]
-            this.relationList = [
-              {
-                icon: 'cn-icon cn-icon-resolve-ip',
-                name: 'ip',
-                label: this.$t('entities.graph.resolveIp'),
-                value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
-              },
-              {
-                icon: 'cn-icon cn-icon-subdomain',
-                name: 'subDomain',
-                label: this.$t('entities.subdomain'),
-                value: _.get(n.relatedEntityCount, 'subDomain.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'subDomain.total', '0') || 0
-              },
-              {
-                icon: 'cn-icon cn-icon-app-name',
-                name: 'app',
-                label: this.$t('entities.tab.relatedApp'),
-                value: _.get(n.relatedEntityCount, 'app.current', 0) || 0,
-                total: _.get(n.relatedEntityCount, 'app.total', 0) || 0
-              }
-            ]
-            break
-          }
-          case 'app': {
-            this.detailCards = [
-              {
-                name: 'appCategory',
-                label: this.$t('entities.category'),
-                value: _.get(n.detailData, 'detail.category.appCategory', '-')
-              },
-              {
-                name: 'appSubcategory',
-                label: this.$t('entities.subcategory'),
-                value: _.get(n.detailData, 'detail.category.appSubcategory', '-')
-              },
-              {
-                name: 'appRisk',
-                label: this.$t('entities.riskLevel'),
-                value: _.get(n.detailData, 'detail.category.appRisk', '-')
-              },
-              {
-                name: 'appTechnology',
-                label: this.$t('overall.technology'),
-                value: _.get(n.detailData, 'detail.category.appTechnology', '-')
-              },
-              {
-                name: 'appLongname',
-                label: this.$t('overall.appFullName'),
-                value: _.get(n.detailData, 'detail.category.appLongname', '-')
-              },
-              {
-                name: 'appDescription',
-                label: this.$t('config.dataSource.description'),
-                value: _.get(n.detailData, 'detail.category.appDescription', '-')
-              }
-            ]
-
-            this.relationList = [
-              {
-                icon: 'cn-icon cn-icon-resolve-ip',
-                name: 'ip',
-                label: this.$t('entities.graph.resolveIp'),
-                value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
-              },
-              {
-                icon: 'cn-icon cn-icon-subdomain',
-                name: 'domain',
-                label: this.$t('entity.graph.resolveDomain'),
-                value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
-                total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
-              }
-            ]
-          }
-        }
+        this.handleDetailData(n)
       }
     }
   },
+  mounted () {
+    this.handleDetailData(this.entity)
+  },
   setup (props) {
     const detailCards = ref([])
     const relationList = ref([])
@@ -480,6 +322,171 @@ export default {
         }
       }
       return location || '-'
+    },
+    handleDetailData (entity) {
+      const n = entity
+      const type = n.type || n.entityType
+      switch (type) {
+        case 'ip': {
+          this.detailCards = [
+            { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n.detailData, 'detail.asn.asn', '-') },
+            {
+              name: 'asOrg',
+              label: this.$t('entities.asOrg'),
+              value: _.get(n.detailData, 'detail.asn.organization', '-')
+            },
+            {
+              name: 'isp',
+              label: this.$t('entities.graph.isp'),
+              value: _.get(n.detailData, 'detail.location.isp', '-')
+            },
+            { name: 'location', label: this.$t('overall.location'), value: this.location(n.detailData) }
+          ]
+          this.relationList = [
+            {
+              icon: 'cn-icon cn-icon-subdomain',
+              name: 'domain',
+              label: this.$t('entity.graph.resolveDomain'),
+              value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
+            },
+            {
+              icon: 'cn-icon cn-icon-app-name',
+              name: 'app',
+              label: this.$t('entities.tab.relatedApp'),
+              value: _.get(n.relatedEntityCount, 'app.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'app.total', '0') || 0
+            }
+          ]
+          break
+        }
+        case 'domain': {
+          const expireDate = _.get(n.detailData, 'detail.whois.expireDate', '')
+          const createDate = _.get(n.detailData, 'detail.whois.createDate', '')
+          this.detailCards = [
+            {
+              name: 'categoryName',
+              label: this.$t('entities.category'),
+              value: _.get(n.detailData, 'detail.category.name', '-')
+            },
+            {
+              name: 'categoryGroup',
+              label: this.$t('entities.group'),
+              value: _.get(n.detailData, 'detail.category.group', '-')
+            },
+            {
+              name: 'reputationLevel',
+              label: this.$t('entities.creditLevel2'),
+              value: _.get(n.detailData, 'detail.category.reputationLevel', '-')
+            },
+            {
+              name: 'expireDate',
+              label: this.$t('entities.graph.expirationDate'),
+              value: expireDate ? dateFormatByAppearance(expireDate) : '-'
+            },
+            {
+              name: 'registrarName',
+              label: this.$t('entities.registrar'),
+              value: _.get(n.detailData, 'detail.whois.registrarName', '-')
+            },
+            {
+              name: 'registrantOrg',
+              label: this.$t('entities.registry'),
+              value: _.get(n.detailData, 'detail.whois.registrantOrg', '-')
+            },
+            {
+              name: 'registrantCountry',
+              label: this.$t('entities.registrationCountry'),
+              value: _.get(n.detailData, 'detail.whois.registrantCountry', '-')
+            },
+            {
+              name: 'createDate',
+              label: this.$t('entities.registrationDate'),
+              value: createDate ? dateFormatByAppearance(createDate) : '-'
+            },
+            {
+              name: 'email',
+              label: this.$t('entities.registryEmail'),
+              value: _.get(n.detailData, 'detail.whois.email', '-')
+            }
+          ]
+          this.relationList = [
+            {
+              icon: 'cn-icon cn-icon-resolve-ip',
+              name: 'ip',
+              label: this.$t('entities.graph.resolveIp'),
+              value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
+            },
+            {
+              icon: 'cn-icon cn-icon-subdomain',
+              name: 'subDomain',
+              label: this.$t('entities.subdomain'),
+              value: _.get(n.relatedEntityCount, 'subDomain.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'subDomain.total', '0') || 0
+            },
+            {
+              icon: 'cn-icon cn-icon-app-name',
+              name: 'app',
+              label: this.$t('entities.tab.relatedApp'),
+              value: _.get(n.relatedEntityCount, 'app.current', 0) || 0,
+              total: _.get(n.relatedEntityCount, 'app.total', 0) || 0
+            }
+          ]
+          break
+        }
+        case 'app': {
+          this.detailCards = [
+            {
+              name: 'appCategory',
+              label: this.$t('entities.category'),
+              value: _.get(n.detailData, 'detail.category.appCategory', '-')
+            },
+            {
+              name: 'appSubcategory',
+              label: this.$t('entities.subcategory'),
+              value: _.get(n.detailData, 'detail.category.appSubcategory', '-')
+            },
+            {
+              name: 'appRisk',
+              label: this.$t('entities.riskLevel'),
+              value: _.get(n.detailData, 'detail.category.appRisk', '-')
+            },
+            {
+              name: 'appTechnology',
+              label: this.$t('overall.technology'),
+              value: _.get(n.detailData, 'detail.category.appTechnology', '-')
+            },
+            {
+              name: 'appLongname',
+              label: this.$t('overall.appFullName'),
+              value: _.get(n.detailData, 'detail.category.appLongname', '-')
+            },
+            {
+              name: 'appDescription',
+              label: this.$t('config.dataSource.description'),
+              value: _.get(n.detailData, 'detail.category.appDescription', '-')
+            }
+          ]
+
+          this.relationList = [
+            {
+              icon: 'cn-icon cn-icon-resolve-ip',
+              name: 'ip',
+              label: this.$t('entities.graph.resolveIp'),
+              value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
+            },
+            {
+              icon: 'cn-icon cn-icon-subdomain',
+              name: 'domain',
+              label: this.$t('entity.graph.resolveDomain'),
+              value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
+              total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
+            }
+          ]
+        }
+      }
     }
   }
 }

src/views/entityExplorer/entityGraphDetail/IpList.vue

@@ -60,6 +60,7 @@
 
 <script>
 import Loading from '@/components/common/Loading'
+import { scrollToTop } from '@/utils/tools'
 export default {
   name: 'IpList',
   props: {
@@ -90,6 +91,11 @@ export default {
       // 继续拓展ip列表，传递信息，调用接口
       this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
     }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      scrollToTop()
+    })
   }
 }
 </script>