diff --git a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
index dfc9a7a2..345804f8 100644
--- a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
@@ -103,7 +103,7 @@ $font-size: 12px;
     .graph-content-item {
 
       .graph-content-item-label, .graph-content-item-value {
-        width: 100px;
+        width: 130px;
         font-family: NotoSansSChineseRegular;
         font-size: $font-size;
         color: #717171;
@@ -125,14 +125,8 @@ $font-size: 12px;
     .graph-content-relationship-item {
       justify-content: space-between;
       line-height: 24px;
-      cursor: pointer;
-
-      &:hover {
-        background: rgba(135, 135, 135, 0.1);
-      }
 
       .graph-relationship-item-label, .graph-relationship-item-value {
-        font-family: NotoSansSChineseRegular;
         font-size: $font-size;
         color: #353636;
         font-weight: 400;
@@ -148,6 +142,10 @@ $font-size: 12px;
 
       .graph-relationship-item-value {
         color: #717171;
+
+        i {
+          cursor: pointer;
+        }
       }
     }
   }
@@ -196,9 +194,6 @@ $font-size: 12px;
 
 .graph-expand-relationship__icon {
   font-size: 13px;
-  &:hover {
-    color: #D80000 !important;
-  }
 }
 
 .graph-basic-info__block-title {
diff --git a/src/assets/css/components/views/charts2/graphRightListBlock.scss b/src/assets/css/components/views/charts2/graphRightListBlock.scss
index beecb33f..aa2b5169 100644
--- a/src/assets/css/components/views/charts2/graphRightListBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightListBlock.scss
@@ -9,10 +9,9 @@ $font-size: 12px;
     margin-bottom: 10px;
 
     span {
-      font-family: PingFangSC-Semibold;
       font-size: 16px;
       color: #353636;
-      line-height: 22px;
+      line-height: 21px;
       font-weight: 600;
     }
 
@@ -24,7 +23,6 @@ $font-size: 12px;
   }
 
   .graph-list-header-number {
-    font-family: NotoSansSChineseRegular;
     font-size: 12px;
     color: #717171;
     font-weight: 400;
@@ -49,7 +47,6 @@ $font-size: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: NotoSansHans-Medium;
     font-weight: 500;
     padding: 14px 10px;
     cursor: pointer;
@@ -59,6 +56,11 @@ $font-size: 12px;
       font-size: 16px;
       margin-right: 7px;
     }
+
+    &.graph-list-expand-btn--disabled {
+      opacity: .4;
+      cursor: default;
+    }
   }
 }
 
@@ -73,15 +75,9 @@ $font-size: 12px;
 
   .graph-list-item-ip {
     margin-bottom: 10px;
-    font-family: NotoSansSChineseRegular;
     font-size: $font-size;
     color: #353636;
     font-weight: 400;
-    cursor: pointer;
-
-    &:hover {
-      color: #D80000;
-    }
   }
 
   .graph-list-item-block {
@@ -97,7 +93,6 @@ $font-size: 12px;
       .graph-list-item-label, .graph-list-item-label__app {
         width: 62px;
         //margin-right: 15px;
-        font-family: NotoSansSChineseRegular;
         font-size: $font-size;
         color: #717171;
         font-weight: 400;
@@ -118,7 +113,6 @@ $font-size: 12px;
       }
 
       .graph-list-item-value {
-        font-family: NotoSansSChineseRegular;
         font-size: $font-size;
         color: #353636;
         font-weight: 400;
diff --git a/public/images/entity-symbol2/app-colored.svg b/src/assets/img/entity-symbol2/app-colored.svg
similarity index 100%
rename from public/images/entity-symbol2/app-colored.svg
rename to src/assets/img/entity-symbol2/app-colored.svg
diff --git a/public/images/entity-symbol2/app.svg b/src/assets/img/entity-symbol2/app.svg
similarity index 100%
rename from public/images/entity-symbol2/app.svg
rename to src/assets/img/entity-symbol2/app.svg
diff --git a/public/images/entity-symbol2/domain-colored.svg b/src/assets/img/entity-symbol2/domain-colored.svg
similarity index 100%
rename from public/images/entity-symbol2/domain-colored.svg
rename to src/assets/img/entity-symbol2/domain-colored.svg
diff --git a/public/images/entity-symbol2/domain-colored2.svg b/src/assets/img/entity-symbol2/domain-colored2.svg
similarity index 100%
rename from public/images/entity-symbol2/domain-colored2.svg
rename to src/assets/img/entity-symbol2/domain-colored2.svg
diff --git a/public/images/entity-symbol2/domain.svg b/src/assets/img/entity-symbol2/domain.svg
similarity index 100%
rename from public/images/entity-symbol2/domain.svg
rename to src/assets/img/entity-symbol2/domain.svg
diff --git a/public/images/entity-symbol2/ip-colored.svg b/src/assets/img/entity-symbol2/ip-colored.svg
similarity index 100%
rename from public/images/entity-symbol2/ip-colored.svg
rename to src/assets/img/entity-symbol2/ip-colored.svg
diff --git a/public/images/entity-symbol2/ip.svg b/src/assets/img/entity-symbol2/ip.svg
similarity index 100%
rename from public/images/entity-symbol2/ip.svg
rename to src/assets/img/entity-symbol2/ip.svg
diff --git a/src/utils/api.js b/src/utils/api.js
index 3fa6108f..efb68903 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -255,6 +255,8 @@ export const api = {
     informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
     // 实体关系
     entityGraph: {
+      basicInfo: apiVersion + '/entity/graph/relation/basic',
+      tags: apiVersion + '/entity/graph/relation/kb/intelligence/tag',
       relatedEntityCount: apiVersion + '/entity/graph/relation/summaryCount',
       domainRelatedIp: apiVersion + '/entity/graph/relation/domain/relate/ips',
       domainRelatedApp: apiVersion + '/entity/graph/relation/domain/relate/apps',
diff --git a/src/views/charts/charts/IpBasicInfo.vue b/src/views/charts/charts/IpBasicInfo.vue
index ba38933c..aa50526f 100644
--- a/src/views/charts/charts/IpBasicInfo.vue
+++ b/src/views/charts/charts/IpBasicInfo.vue
@@ -37,25 +37,15 @@ export default {
     location () {
       let location = ''
       if (this.chartInfo) {
-        if (this.chartInfo.country) {
-          location = this.chartInfo.country
-          if (this.chartInfo.province) {
-            location += ', '
-            location += this.chartInfo.province
-            if (this.chartInfo.city) {
-              location += ', '
-              location += this.chartInfo.city
-            }
-          }
-        } else if (this.chartInfo.province) {
-          location = this.chartInfo.province
-          if (this.chartInfo.city) {
-            location += ', '
-            location += this.chartInfo.city
-          }
-        } else if (this.chartInfo.city) {
+        if (this.chartInfo.city) {
           location = this.chartInfo.city
         }
+        if (this.chartInfo.province) {
+          location = location ? `${this.chartInfo.province}, ${location}` : this.chartInfo.province
+        }
+        if (this.chartInfo.country) {
+          location = location ? `${this.chartInfo.country}, ${location}` : this.chartInfo.country
+        }
       }
       return location
     },
diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index 3fc337e2..aae9216e 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -7,28 +7,37 @@
           v-model="rightBox.show"
           direction="rtl"
           custom-class="entity-graph__detail"
+          :close-on-click-modal="true"
           :modal="false"
-          :size="360"
+          :size="400"
           :with-header="false"
           destroy-on-close>
         <ip-list
             v-if="rightBox.mode === 'ipList'"
             :entity="entity"
+            @expandList="expandList"
             @closeBlock="onCloseBlock"
             @mouseenter="onMouseenter"
             @expandDetail="onExpandDetail">
         </ip-list>
-        <app-or-domain-list
-            v-if="rightBox.mode === 'appList' || rightBox.mode === 'domainList'"
+        <domain-list
+            v-else-if="rightBox.mode === 'domainList'"
             :entity="entity"
-            @expandDetail="onExpandDetail"
+            @expandList="expandList"
             @mouseenter="onMouseenter"
             @closeBlock="onCloseBlock">
-        </app-or-domain-list>
-        <graph-detail
-            v-if="rightBox.mode === 'appDetail' || rightBox.mode === 'ipDetail' || rightBox.mode === 'domainDetail'"
+        </domain-list>
+        <app-list
+            v-else-if="rightBox.mode === 'appList'"
             :entity="entity"
-            @expand="onExpand"
+            @expandList="expandList"
+            @mouseenter="onMouseenter"
+            @closeBlock="onCloseBlock">
+        </app-list>
+        <graph-detail
+            v-else-if="rightBox.mode === 'appDetail' || rightBox.mode === 'ipDetail' || rightBox.mode === 'domainDetail'"
+            :entity="entity"
+            @expandDetailList="expandDetailList"
             @closeBlock="onCloseBlock">
         </graph-detail>
       </el-drawer>
@@ -39,53 +48,52 @@
 <script>
 import IpList from '@/views/entityExplorer/entityGraphDetail/IpList'
 import GraphDetail from '@/views/entityExplorer/entityGraphDetail/GraphDetail'
-import AppOrDomainList from '@/views/entityExplorer/entityGraphDetail/AppOrDomainList'
+import DomainList from '@/views/entityExplorer/entityGraphDetail/DomainList'
+import AppList from '@/views/entityExplorer/entityGraphDetail/AppList'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
 import _ from 'lodash'
 import { api } from '@/utils/api'
 import axios from 'axios'
 import G6 from '@antv/g6'
-import testData from './testData'
+import { entityDetailTags } from '@/utils/constants'
 
 export default {
   name: 'EntityRelationship',
   components: {
     IpList,
     GraphDetail,
-    AppOrDomainList
+    DomainList,
+    AppList
   },
   data () {
     return {
-      rightBox: {
-        show: false
-      },
       chartOption: {
         container: 'entityGraph',
         layout: {
           type: 'force',
           preventOverlap: true,
           linkDistance: (d) => {
-            if (!d.target.isRoot && d.target.data.level && d.target.data.level.length === 1) {
-              return 300
+            if (d.target.nodeType && d.target.nodeType === 'primary') {
+              return 200
             }
             return 80
           },
           nodeStrength: (d) => {
-            if (!d.isRoot && d.data.level && d.data.level.length === 1) {
-              return -50
+            if (d.nodeType && d.nodeType === 'primary') {
+              return -100
             }
             return -10
           },
           edgeStrength: (d) => {
-            if (!d.target.isRoot && d.target.data.level && d.target.data.level.length === 1) {
+            if (d.target.nodeType && d.target.nodeType === 'primary') {
               return 0.1
             }
             return 0.7
           }
         },
         modes: {
-          default: ['drag-nodes', 'click-select', 'zoom-canvas']
+          default: ['drag-canvas', 'drag-nodes', 'click-select', 'zoom-canvas']
         }
       }
     }
@@ -93,38 +101,247 @@ export default {
   methods: {
     async init () {
       const _this = this
-      const graph = new G6.Graph(this.chartOption)
-      /*const rootNode = this.generateRootNode()
+      const tooltip = this.buildTooltip() // tooltip组件
+      this.chartOption.plugins = [tooltip]
+      this.graph = new G6.Graph(this.chartOption)
+      const rootNode = await this.generateRootNode()
       const secondLevelNodes = await this.generateSecondLevelNodes(rootNode)
       const secondHalfLevelNodes = await this.generateHalfLevelNodes(secondLevelNodes)
+      this.updateRelatedCount(rootNode, rootNode.data.childNodes)
       this.graphData.nodes = [rootNode, ...secondLevelNodes, ...secondHalfLevelNodes]
       const rootEdges = this.generateEdges(rootNode)
       const secondEdges = this.generateEdges(secondLevelNodes)
       this.graphData.edges = [...rootEdges, ...secondEdges]
-      graph.data(this.graphData)*/
-      graph.data(testData)
-      graph.render()
-
-      graph.on('node:dragstart', function (e) {
-        graph.layout()
+      console.info(this.graphData)
+      this.graph.data(this.graphData)
+      this.graph.render()
+      this.graph.on('node:dragstart', function (e) {
+        _this.graph.layout()
         refreshDragedNodePosition(e)
       })
-      graph.on('node:drag', function (e) {
+      this.graph.on('node:drag', function (e) {
         refreshDragedNodePosition(e)
       })
-      graph.on('node:dragend', function (e) {
+      this.graph.on('node:dragend', function (e) {
         e.item.get('model').fx = null
         e.item.get('model').fy = null
       })
-      graph.on('node:click', function (e) {
+      this.graph.on('node:click', async function (e) {
         const node = e.item.get('model')
-        if (!_this.rightBox.show) {
-          _this.rightBox.show = true
+        // 点击后，若不是临时节点，且右侧没弹框，就弹出弹框。若是临时节点，在另一处逻辑中处理
+        if (!node.data.isTemp) {
+          if (node.nodeType && (node.nodeType === 'root' || node.nodeType === 'entity')) {
+            _this.rightBox.mode = `${node.data.type || _this.entity.entityType}Detail`
+          } else if (node.nodeType && node.nodeType === 'primary') {
+            _this.rightBox.mode = `${node.data.type}List`
+          }
+          if (!_this.rightBox.show) {
+            _this.rightBox.show = true
+          }
         }
-        if (node.data.level && node.data.level.length === 1) {
-          _this.rightBox.mode = `${node.data.type}List`
-        } else {
-          _this.rightBox.mode = `${node.data.type}Detail`
+        // 先清除所有temp node和temp edge
+        // 若是primary node，在弹框中显示相关list数据，且高亮node和target=node的edge
+        // 若是entity node，查数量，生成temp edge关联的、除已有的primary node外的temp node。并在弹框中显示detail，且高亮node和target=node的edge
+        /* 若是temp node，增加primary node，并高亮此node.
+        *  然后判断primary node的level，若小于5，查询其关联的entity node并渲染，并高亮target=node和source=node的edge。
+        * 若等于5，不渲染下级node并提示用户。
+        * */
+        let change = false // 图数据是否有变更，需要刷新
+        // 清除temp node和temp edge
+        _this.graphData.nodes = _this.graphData.nodes.filter(n => {
+          if (n.data && !n.data.isTemp) {
+            return true
+          }
+          change = true
+          return false
+        })
+        _this.graphData.edges = _this.graphData.edges.filter(e => {
+          if (e.data && !e.data.isTemp) {
+            return true
+          }
+          change = true
+          return false
+        })
+        if (node.nodeType === 'root') { // 点击了root
+          _this.entity = {
+            entityName: node.id,
+            entityType: _this.entity.entityType,
+            name: node.id,
+            tags: node.data.tags,
+            type: node.data.type,
+            detailData: node.data.data,
+            isSubdomain: node.data.isSubdomain || false,
+            loading: true
+          }
+          const relatedEntityCount = await _this.queryRelatedEntityCount(_this.entity.entityType, node.id)
+          _this.entity = {
+            ..._this.entity,
+            relatedEntityCount: _this.handleRelatedEntityCount(node, relatedEntityCount),
+            loading: false
+          }
+          // 更新childNodes的label的数值
+          if (node.data.childNodes) {
+            node.data.childNodes.forEach(n => {
+              switch (n.data.type) {
+                case 'ip': {
+                  n.data.count = relatedEntityCount.ipCount
+                  n.label = _this.$t('entities.graph.resolveIp') + `(${n.data.count})`
+                  break
+                }
+                case 'domain': {
+                  if (n.data.isSubdomain) {
+                    n.data.count = relatedEntityCount.subDomainCount
+                    n.label = _this.$t('entities.subdomain') + `(${n.data.count})`
+                  } else {
+                    n.data.count = relatedEntityCount.domainCount
+                    n.label = _this.$t('entity.graph.resolveDomain') + `(${n.data.count})`
+                  }
+                  break
+                }
+                case 'app': {
+                  n.data.count = relatedEntityCount.appCount
+                  n.label = _this.$t('entities.tab.relatedApp') + `(${n.data.count})`
+                  break
+                }
+              }
+              _this.graph.refreshItem(n.id)
+            })
+          }
+        } else if (node.nodeType === 'primary') { // 点击了primary
+          _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)
+          _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
+          }
+          switch (node.data.type) {
+            case 'ip': {
+              node.data.count = queryRelatedEntityCount.ipCount
+              node.label = _this.$t('entities.graph.resolveIp') + `(${node.data.count})`
+              break
+            }
+            case 'domain': {
+              if (node.data.isSubdomain) {
+                node.data.count = queryRelatedEntityCount.subDomainCount
+                node.label = _this.$t('entities.subdomain') + `(${node.data.count})`
+              } else {
+                node.data.count = queryRelatedEntityCount.domainCount
+                node.label = _this.$t('entity.graph.resolveDomain') + `(${node.data.count})`
+              }
+              break
+            }
+            case 'app': {
+              node.data.count = queryRelatedEntityCount.appCount
+              node.label = _this.$t('entities.tab.relatedApp') + `(${node.data.count})`
+              break
+            }
+          }
+          _this.graph.refreshItem(node.id)
+          // TODO 高亮
+        } else if (node.nodeType === 'entity') {
+          _this.entity.loading = true
+          const relatedEntityCount = await _this.queryRelatedEntityCount(node.data.type, node.id)
+          // 赋值总数和已拓展数。entity node可从其childNodes取到已拓展数
+          _this.entity = {
+            entityType: _this.entity.entityType,
+            entityName: _this.entity.entityName,
+            relatedEntityCount: _this.handleRelatedEntityCount(node, relatedEntityCount),
+            detailData: node.data.data,
+            type: node.data.type,
+            isSubdomain: false,
+            name: node.id,
+            loading: false
+          }
+          // 更新childNodes的label的数值
+          if (node.data.childNodes) {
+            node.data.childNodes.forEach(n => {
+              switch (n.data.type) {
+                case 'ip': {
+                  n.data.count = relatedEntityCount.ipCount
+                  n.label = _this.$t('entities.graph.resolveIp') + `(${n.data.count})`
+                  break
+                }
+                case 'domain': {
+                  if (n.data.isSubdomain) {
+                    n.data.count = relatedEntityCount.subDomainCount
+                    n.label = _this.$t('entities.subdomain') + `(${n.data.count})`
+                  } else {
+                    n.data.count = relatedEntityCount.domainCount
+                    n.label = _this.$t('entity.graph.resolveDomain') + `(${n.data.count})`
+                  }
+                  break
+                }
+                case 'app': {
+                  n.data.count = relatedEntityCount.appCount
+                  n.label = _this.$t('entities.tab.relatedApp') + `(${n.data.count})`
+                  break
+                }
+              }
+              _this.graph.refreshItem(n.id)
+            })
+          }
+          const { tempNodes, tempEdges } = _this.generateTempNodesAndEdges(node, relatedEntityCount)
+          if (tempNodes.length > 0) {
+            change = true
+            _this.addNodes(tempNodes)
+          }
+          if (tempEdges.length > 0) {
+            change = true
+            _this.addEdges(tempEdges)
+          }
+          // TODO 高亮
+        } else if (node.nodeType === 'temp') {
+          change = true
+          // 根据temp node生成primary node
+          const primaryNode = _this.generatePrimaryNode({
+            id: `${node.data.type}-${node.data.sourceName}`,
+            label: node.label + `(${node.data.count})`,
+            data: {
+              sourceName: node.data.sourceName,
+              sourceType: node.data.sourceType,
+              type: node.data.type,
+              isSubdomain: node.data.isSubdomain || false,
+              count: node.data.count
+            }
+          })
+          const sourceNode = _this.graphData.nodes.find(n => n.id === node.data.sourceName)
+          // 新node放入source node的childNodes中
+          if (!sourceNode.data.childNodes) {
+            sourceNode.data.childNodes = []
+          }
+          sourceNode.data.childNodes.push(primaryNode)
+          _this.addNodes([primaryNode])
+
+          const edge = _this.generateEdges(sourceNode, primaryNode)
+          _this.addEdges(edge)
+          // 判断primary层级，若大于等于5，则不继续拓展entity node，并给用户提示。否则拓展entity node
+          const level = _this.getNodeLevel(primaryNode.id)
+          const entityNodes = []
+          const edges = []
+          if (level < 9) {
+            const queryEntityNodes = await _this.generateHalfLevelNodes(primaryNode)
+            _this.updateRelatedCount(sourceNode, [primaryNode])
+            entityNodes.push(...queryEntityNodes)
+            edges.push(..._this.generateEdges(primaryNode))
+            // TODO 高亮
+          } else {
+            // TODO 提示无法拓展
+          }
+          _this.addNodes(entityNodes)
+          _this.addEdges(edges)
+        }
+        if (change) {
+          _this.graph.changeData(_this.graphData)
         }
       })
       function refreshDragedNodePosition (e) {
@@ -140,9 +357,36 @@ export default {
       } else {
         subfix = colored ? '-colored' : ''
       }
-      return `${window.location.protocol}//${window.location.host}/images/entity-symbol2/${entityType}${subfix}.svg`
+      return require(`@/assets/img/entity-symbol2/${entityType}${subfix}.svg`)
     },
-    generateRootNode () {
+    async generateRootNode () {
+      const basicInfo = await this.queryEntityBasicInfo(this.entity.entityType, this.entity.entityName)
+      const tags = await this.queryTags(this.entity.entityType, this.entity.entityName)
+      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' })))
+      }
+      this.entity = {
+        ...this.entity,
+        detailData: {
+          vertex: this.entity.entityName,
+          detail: basicInfo
+        },
+        tags: _tags,
+        type: this.entity.entityType,
+        name: this.entity.entityName
+      }
+
       let borderColor = ''
       let shadowColor = ''
       let width = 0
@@ -151,22 +395,22 @@ export default {
         case 'ip': {
           borderColor = '#CBD9BB'
           shadowColor = 'rgba(126,159,84,0.14)'
-          width = 36
-          height = 33
+          width = 30
+          height = 27
           break
         }
         case 'domain': {
           borderColor = '#AFDEED'
           shadowColor = 'rgba(56,172,210,0.14)'
-          width = 36
-          height = 30
+          width = 30
+          height = 25
           break
         }
         case 'app': {
           borderColor = '#F5DAA3'
           shadowColor = 'rgba(229,162,25,0.14)'
-          width = 30
-          height = 36
+          width = 25
+          height = 30
           break
         }
       }
@@ -175,7 +419,8 @@ export default {
         type: 'circle',
         id: this.entity.entityName,
         label: this.entity.entityName,
-        size: 82,
+        nodeType: 'root',
+        size: 52,
         x: 0,
         y: 0,
         icon: {
@@ -198,7 +443,13 @@ export default {
           }
         },
         data: {
-          level: '1'
+          type: this.entity.entityType,
+          name: this.entity.entityName,
+          data: {
+            vertex: this.entity.entityName,
+            detail: basicInfo
+          },
+          tags: _tags
         }
       }
     },
@@ -207,8 +458,8 @@ export default {
       let height = 0
       switch (props.data.type) {
         case 'ip': {
-          width = 24
-          height = 22
+          width = 22
+          height = 20
           break
         }
         case 'domain': {
@@ -225,7 +476,8 @@ export default {
       return {
         ...props,
         type: 'circle',
-        size: 66,
+        size: 42,
+        nodeType: 'primary',
         icon: {
           show: true,
           img: this.generateIconUrl(props.data.type, false),
@@ -247,10 +499,10 @@ export default {
         }
       }
     },
-    generateEntityNode (level, type, data) {
+    generateEntityNode (nodeData, data) {
       let width = 0
       let height = 0
-      switch (type) {
+      switch (nodeData.type) {
         case 'ip': {
           width = 20
           height = 18
@@ -271,9 +523,66 @@ export default {
         id: data.vertex,
         type: 'circle',
         size: 28,
+        nodeType: 'entity',
         icon: {
           show: true,
-          img: this.generateIconUrl(type, true),
+          img: this.generateIconUrl(nodeData.type, true),
+          width,
+          height
+        },
+        style: {
+          fill: 'transparent',
+          stroke: 'transparent',
+          lineWidth: 0
+        },
+        data: {
+          type: nodeData.type,
+          isSubdomain: nodeData.isSubdomain || false,
+          name: data.vertex,
+          data
+        }
+      }
+    },
+    generateTempNode (entityType, node, isSubdomain) {
+      let width = 0
+      let height = 0
+      let label = ''
+      switch (entityType) {
+        case 'ip': {
+          width = 24
+          height = 22
+          label = this.$t('entities.graph.resolveIp')
+          break
+        }
+        case 'subdomain': {
+          width = 24
+          height = 24
+          label = this.$t('entities.subdomain')
+          break
+        }
+        case 'domain': {
+          width = 24
+          height = 24
+          label = this.$t('entity.graph.resolveDomain')
+          break
+        }
+        case 'app': {
+          width = 20
+          height = 24
+          label = this.$t('entities.tab.relatedApp')
+          break
+        }
+      }
+      return {
+        id: `${node.id}-${entityType}-temp`,
+        parentId: node.id,
+        label,
+        type: 'circle',
+        size: 28,
+        nodeType: 'temp',
+        icon: {
+          show: true,
+          img: this.generateIconUrl(entityType, false),
           width,
           height
         },
@@ -291,27 +600,36 @@ export default {
           }
         },
         data: {
-          level,
-          type,
-          name: data.vertex,
-          data
+          type: entityType,
+          isSubdomain: isSubdomain || false,
+          isTemp: true,
+          sourceType: node.data.type,
+          sourceName: node.id
         }
       }
     },
+    hasChildNodeByType (node, type) {
+      if (node.data && node.data.childNodes) {
+        return node.data.childNodes.some(n => n.data.type === type)
+      }
+      return false
+    },
     async generateSecondLevelNodes (rootNode) {
       /*
       * 2级及以上的整数层节点，先查数量，大于0的才展示
+      * TODO 优化：与generatePrimaryNode合并
       * */
       const relatedEntityCount = await this.queryRelatedEntityCount(this.entity.entityType, this.entity.entityName)
       const nodes = []
       if (relatedEntityCount) {
+        this.entity.relatedEntityCount = this.handleRelatedEntityCount(rootNode, relatedEntityCount)
         const ipNode = this.generatePrimaryNode({
           id: 'ip-1',
+          parentId: rootNode.id,
           label: this.$t('entities.graph.resolveIp'),
           x: 0,
           y: 300,
           data: {
-            level: '2',
             sourceName: this.entity.entityName,
             sourceType: this.entity.entityType,
             type: 'ip'
@@ -319,11 +637,11 @@ export default {
         })
         const domainNode = this.generatePrimaryNode({
           id: 'domain-1',
+          parentId: rootNode.id,
           label: this.$t('entity.graph.resolveDomain'),
           x: 260,
           y: -150,
           data: {
-            level: '2',
             sourceName: this.entity.entityName,
             sourceType: this.entity.entityType,
             type: 'domain'
@@ -331,23 +649,24 @@ export default {
         })
         const subdomainNode = this.generatePrimaryNode({
           id: 'domain-1',
+          parentId: rootNode.id,
           label: this.$t('entities.subdomain'),
           x: 260,
           y: -150,
           data: {
-            level: '2',
             sourceName: this.entity.entityName,
             sourceType: this.entity.entityType,
-            type: 'domain'
+            type: 'domain',
+            isSubdomain: true
           }
         })
         const appNode = this.generatePrimaryNode({
           id: 'app-1',
+          parentId: rootNode.id,
           label: this.$t('entities.tab.relatedApp'),
           x: -260,
           y: -150,
           data: {
-            level: '2',
             sourceName: this.entity.entityName,
             sourceType: this.entity.entityType,
             type: 'app'
@@ -401,18 +720,26 @@ export default {
         }
         rootNode.data.childNodes = nodes
       }
-      console.info(nodes)
       return nodes
     },
+    // nodes: primary nodes
     async generateHalfLevelNodes (nodes) {
+      const nodeArr = []
+      if (_.isArray(nodes)) {
+        nodeArr.push(...nodes)
+      } else {
+        nodeArr.push(nodes)
+      }
       const newNodes = []
-      for (const node of nodes) {
+
+      for (const node of nodeArr) {
         const newNodes2 = []
-        const data = await this.queryRelatedEntity(node.data.sourceType, node.data.sourceName, node.data.type)
+        const pageNo = node.data.loaded ? node.data.loaded.length / 10 + 1 : 1
+        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(String(parseInt(node.data.level) + 0.5), node.data.type, d))
+            newNodes2.push(this.generateEntityNode(node.data, d))
           })
           // 更新源节点的已拓展数和列表
           this.handleLoaded(node, data, newNodes2)
@@ -421,6 +748,38 @@ export default {
       }
       return newNodes
     },
+    async queryEntityBasicInfo (entityType, entityName) {
+      const response = await axios.get(`${api.entity.entityGraph.basicInfo}/${entityType}?resource=${entityName}`).catch(e => {
+        console.error(e)
+        this.showError = true
+        this.errorMsg = this.errorMsgHandler(e)
+      })
+      if (response.data && response.data.code === 200) {
+        return response.data.data
+      } else {
+        console.error(response)
+        this.entity.loading = false
+        this.showError = true
+        this.errorMsg = this.errorMsgHandler(response)
+        return {}
+      }
+    },
+    async queryTags (entityType, entityName) {
+      const response = await axios.get(`${api.entity.entityGraph.tags}/${entityType}?resource=${entityName}`).catch(e => {
+        console.error(e)
+        this.showError = true
+        this.errorMsg = this.errorMsgHandler(e)
+      })
+      if (response.data && response.data.code === 200) {
+        return response.data.data
+      } else {
+        console.error(response)
+        this.entity.loading = false
+        this.showError = true
+        this.errorMsg = this.errorMsgHandler(response)
+        return []
+      }
+    },
     async queryRelatedEntityCount (entityType, entityName) {
       const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
         console.error(e)
@@ -431,17 +790,22 @@ export default {
         return response.data.data
       } else {
         console.error(response)
+        this.entity.loading = false
         this.showError = true
         this.errorMsg = this.errorMsgHandler(response)
         return null
       }
     },
-    async queryRelatedEntity (sourceType, sourceName, type) {
+    async queryRelatedEntity (sourceType, sourceName, type, pageNo) {
       if (sourceType === type) {
         // 若源type和关联type都是domain，说明关联type是subdomain
         type = 'subdomain'
       }
-      const response = await axios.get(`${api.entity.entityGraph[`${sourceType}Related${_.upperFirst(type)}`]}?resource=${sourceName}`).catch(e => {
+      let url = `${api.entity.entityGraph[`${sourceType}Related${_.upperFirst(type)}`]}?resource=${sourceName}&pageSize=10`
+      if (pageNo) {
+        url += `&pageNo=${pageNo}`
+      }
+      const response = await axios.get(url).catch(e => {
         console.error(e)
         this.showError = true
         this.errorMsg = this.errorMsgHandler(e)
@@ -462,14 +826,14 @@ export default {
     generateEdges (source, target) {
       const edges = []
 
-      if (!target) {
-        const sourceArr = []
-        if (!source.length) {
-          sourceArr.push(source)
-        } else {
-          sourceArr.push(...source)
-        }
-        sourceArr.forEach(s => {
+      const sourceArr = []
+      if (!source.length) {
+        sourceArr.push(source)
+      } else {
+        sourceArr.push(...source)
+      }
+      sourceArr.forEach(s => {
+        if (!target) {
           if (s.data && s.data.childNodes) {
             const edges2 = []
             s.data.childNodes.forEach(c => {
@@ -482,16 +846,124 @@ export default {
                   endArrow: {
                     path: G6.Arrow.triangle(5, 5)
                   }
-                }
+                },
+                data: {}
               })
             })
             s.edges = edges2
             edges.push(...edges2)
           }
-        })
-      }
+        } else {
+          const edges2 = []
+          const targetArr = []
+          if (!target.length) {
+            targetArr.push(target)
+          } else {
+            targetArr.push(...target)
+          }
+          targetArr.forEach(c => {
+            edges2.push({
+              id: `${s.id}-${c.id}`,
+              source: s.id,
+              target: c.id,
+              style: {
+                stroke: '#BEBEBE',
+                endArrow: {
+                  path: G6.Arrow.triangle(5, 5)
+                }
+              },
+              data: {}
+            })
+          })
+          s.edges = edges2
+          edges.push(...edges2)
+        }
+      })
       return edges
     },
+    generateTempNodesAndEdges (node, relatedEntityCount) {
+      // 根据parent node和其childNodes，生成temp node和temp edge
+      const tempNodes = []
+      const tempEdges = []
+      switch (node.data.type) {
+        case 'ip': {
+          if (relatedEntityCount.domainCount && !this.hasChildNodeByType(node, 'domain')) {
+            const tempNode = this.generateTempNode('domain', node)
+            tempNode.data.count = relatedEntityCount.domainCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          if (relatedEntityCount.appCount && !this.hasChildNodeByType(node, 'app')) {
+            const tempNode = this.generateTempNode('app', node)
+            tempNode.data.count = relatedEntityCount.appCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          break
+        }
+        case 'domain': {
+          if (relatedEntityCount.ipCount && !this.hasChildNodeByType(node, 'ip')) {
+            const tempNode = this.generateTempNode('ip', node)
+            tempNode.data.count = relatedEntityCount.ipCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          if (relatedEntityCount.subDomainCount && !this.hasChildNodeByType(node, 'domain')) {
+            const tempNode = this.generateTempNode('domain', node, true)
+            tempNode.data.count = relatedEntityCount.subDomainCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          if (relatedEntityCount.appCount && !this.hasChildNodeByType(node, 'app')) {
+            const tempNode = this.generateTempNode('app', node)
+            tempNode.data.count = relatedEntityCount.appCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          break
+        }
+        case 'app': {
+          if (relatedEntityCount.ipCount && !this.hasChildNodeByType(node, 'ip')) {
+            const tempNode = this.generateTempNode('ip', node)
+            tempNode.data.count = relatedEntityCount.ipCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          if (relatedEntityCount.domainCount && !this.hasChildNodeByType(node, 'domain')) {
+            const tempNode = this.generateTempNode('domain', node)
+            tempNode.data.count = relatedEntityCount.domainCount
+            const tempEdge = this.generateTempEdge(node, tempNode)
+            tempNodes.push(tempNode)
+            tempEdges.push(tempEdge)
+          }
+          break
+        }
+      }
+      return { tempNodes, tempEdges }
+    },
+    generateTempEdge (node, tempNode) {
+      return {
+        id: `${node.id}-${tempNode.id}`,
+        source: node.id,
+        target: tempNode.id,
+        style: {
+          stroke: '#DDD',
+          lineDash: [3, 2],
+          endArrow: {
+            path: G6.Arrow.triangle(5, 5)
+          },
+          data: {
+            isTemp: true
+          }
+        }
+      }
+    },
     handleLoaded (node, data, childNodes) {
       if (!node.data.loaded) {
         node.data.loaded = []
@@ -503,6 +975,64 @@ export default {
       }
       node.data.childNodes.push(...childNodes)
     },
+    handleRelatedEntityCount (node, relatedEntityTotalCount) {
+      const relatedEntityCount = {
+        ip: { total: relatedEntityTotalCount.ipCount, current: null },
+        domain: { total: relatedEntityTotalCount.domainCount, current: null },
+        subDomain: { total: relatedEntityTotalCount.subDomainCount, current: null },
+        app: { total: relatedEntityTotalCount.appCount, current: null }
+      }
+      if (node.data.childNodes) {
+        node.data.childNodes.forEach(n => {
+          switch (n.data.type) {
+            case 'ip': {
+              relatedEntityCount.ip.current = n.data.loaded ? n.data.loaded.length : 0
+              n.data.count = relatedEntityTotalCount.ipCount
+              break
+            }
+            case 'domain': {
+              if (n.data.isSubdomain) {
+                relatedEntityCount.subDomain.current = n.data.loaded ? n.data.loaded.length : 0
+                n.data.count = relatedEntityTotalCount.subDomainCount
+              } else {
+                relatedEntityCount.domain.current = n.data.loaded ? n.data.loaded.length : 0
+                n.data.count = relatedEntityTotalCount.domainCount
+              }
+              break
+            }
+            case 'app': {
+              relatedEntityCount.app.current = n.data.loaded ? n.data.loaded.length : 0
+              n.data.count = relatedEntityTotalCount.appCount
+              break
+            }
+          }
+        })
+      }
+      return relatedEntityCount
+    },
+    addNodes (nodes) {
+      const _nodes = nodes.filter(n => {
+        return !this.graphData.nodes.some(n2 => n2.id === n.id)
+      })
+      this.graphData.nodes.push(..._nodes)
+    },
+    addEdges (edges) {
+      const _edges = edges.filter(e => {
+        return !this.graphData.edges.some(e2 => e2.source === e.source && e2.target === e.target)
+      })
+      this.graphData.edges.push(..._edges)
+    },
+    updateRelatedCount (node, childNodes) {
+      childNodes.forEach(c => {
+        this.entity.relatedEntityCount[c.data.isSubdomain ? 'subDomain' : c.data.type].current = c.data.loaded.length
+      })
+    },
+    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]
+    },
     onCloseBlock () {
       // todo 关闭右侧graph面板
       this.rightBox.mode = ''
@@ -519,6 +1049,131 @@ export default {
       if (!val.isTrusted) {
         // 鼠标移动反馈
       }
+    },
+    buildTooltip () {
+      const _this = this
+      return new G6.Tooltip({
+        offsetX: 10,
+        offsetY: 20,
+        itemTypes: ['node'],
+        getContent (e) {
+          const node = e.item.getModel()
+          if (node.nodeType === 'primary') {
+            let iconClass = ''
+            let title = ''
+            switch (node.data.type) {
+              case 'ip': {
+                iconClass = 'cn-icon cn-icon-resolve-ip'
+                title = _this.$t('entities.graph.resolveIp')
+                break
+              }
+              case 'domain': {
+                iconClass = 'cn-icon cn-icon-subdomain'
+                title = _this.$t('entity.graph.resolveDomain')
+                break
+              }
+              case 'app': {
+                iconClass = 'cn-icon cn-icon-app-name'
+                title = _this.$t('entities.tab.relatedApp')
+                break
+              }
+            }
+            return `<div class="primary-node-tooltip">
+              <div class="tooltip__header"><i class="${iconClass}"></i><span class="tooltip__title">${title}</span></div>
+              <div class="tooltip__content">
+                <span>${_this.$t('entity.graph.associatedQuantity')}:&nbsp;${node.data.count || 0}</span>
+                <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>`
+          }
+        }
+      })
+    },
+    async expandList (sourceNodeId, nodeId) {
+      const sourceNode = this.graphData.nodes.find(n => n.id === sourceNodeId)
+      const node = this.graphData.nodes.find(n => n.id === nodeId)
+      if (node && sourceNode) {
+        if (node.data.childNodes && node.data.childNodes.length < 50) {
+          const queryEntityNodes = await this.generateHalfLevelNodes(node)
+          const relatedEntityCount = await this.queryRelatedEntityCount(sourceNode.data.type, sourceNodeId)
+          // 赋值总数和已拓展数。entity node可从其childNodes取到已拓展数
+          this.entity = {
+            ...this.entity,
+            relatedEntityCount: this.handleRelatedEntityCount(sourceNode, relatedEntityCount),
+            listData: node.data.loaded
+          }
+          this.addNodes(queryEntityNodes)
+          this.addEdges(this.generateEdges(node, queryEntityNodes))
+          this.graph.changeData(this.graphData)
+        } else {
+          // TODO 提示已达50上限
+        }
+      }
+    },
+    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 => {
+            return n.id !== tempNode.id
+          })
+          this.graphData.edges = this.graphData.edges.filter(e => {
+            return e.target !== tempNode.id
+          })
+
+          const primaryNode = this.generatePrimaryNode({
+            id: `${tempNode.data.type}-${tempNode.data.sourceName}`,
+            label: tempNode.label + `(${tempNode.data.count})`,
+            data: {
+              sourceName: tempNode.data.sourceName,
+              sourceType: tempNode.data.sourceType,
+              type: tempNode.data.type,
+              isSubdomain: tempNode.data.isSubdomain || false,
+              count: tempNode.data.count
+            }
+          })
+          // 新node放入source node的childNodes中
+          if (!currentNode.data.childNodes) {
+            currentNode.data.childNodes = []
+          }
+          currentNode.data.childNodes.push(primaryNode)
+          const edge = this.generateEdges(currentNode, primaryNode)
+          this.addNodes([primaryNode])
+          this.addEdges(edge)
+          // 判断primary层级，若大于等于5，则不继续拓展entity node，并给用户提示。否则拓展entity node
+          const entityNodes = []
+          const edges = []
+          const level = this.getNodeLevel(primaryNode.id)
+          if (level < 9) {
+            const queryEntityNodes = await this.generateHalfLevelNodes(primaryNode)
+            this.updateRelatedCount(currentNode, [primaryNode])
+            entityNodes.push(...queryEntityNodes)
+            edges.push(...this.generateEdges(primaryNode))
+            // TODO 高亮
+          } else {
+            // TODO 提示无法拓展
+          }
+          this.addNodes(entityNodes)
+          this.addEdges(edges)
+          console.info(this.graphData)
+          this.graph.changeData(this.graphData)
+        }
+      }
     }
   },
   async mounted () {
@@ -529,24 +1184,23 @@ export default {
   setup () {
     const route = useRoute()
     const { entityType, entityName } = route.query
-    const entity = {
+    const entity = ref({
       entityType,
       entityName
-    }
+    })
+    const graph = shallowRef(null)
     const rightBox = ref({
-      mode: 'ipList', // ipList, ipDetail, domainList, domainDetail, appList, appDetail
-      show: false
+      mode: `${entityType}Detail`, // ipList, ipDetail, domainList, domainDetail, appList, appDetail
+      show: true
     })
 
     // echarts关系图的节点和连线
-    const graphData = ref({})
-    // 从url获取实体类型、名称，若为空直接报错
-    const myChart = shallowRef(null)
+    const graphData = shallowRef({})
     return {
       graphData,
       entity,
-      myChart,
-      rightBox
+      rightBox,
+      graph
     }
   }
 }
@@ -659,19 +1313,66 @@ export default {
       }
     }
   }
+
   .entity-graph__right-box {
     & > div {
       left: unset !important;
       right: 0 !important;
-      width: 360px;
     }
     .entity-graph__detail {
       height: calc(100% - 100px) !important;
       top: 100px !important;
-      border-left: 1px solid #E2E5EC;
+      // border-left: 1px solid #E2E5EC;
       overflow: auto;
       padding: 20px;
     }
   }
+
+  .g6-component-tooltip {
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+    .primary-node-tooltip {
+      padding: 5px;
+
+      .tooltip__header {
+        display: flex;
+        align-items: center;
+
+        i {
+          color: #717171;
+          font-size: 14px;
+        }
+        .tooltip__title {
+          padding-left: 6px;
+          font-size: 15px;
+          line-height: 15px;
+          color: #111;
+        }
+      }
+      .tooltip__content {
+        padding-top: 10px;
+        color: #222;
+        font-size: 12px;
+
+        span:first-of-type {
+          padding-right: 20px;
+        }
+      }
+    }
+    .entity-node-tooltip {
+      padding: 5px;
+
+      .tooltip__header {
+        display: flex;
+        align-items: center;
+
+        .tooltip__title {
+          font-size: 15px;
+          line-height: 15px;
+          color: #111;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/entityExplorer/entityGraphDetail/AppList.vue b/src/views/entityExplorer/entityGraphDetail/AppList.vue
new file mode 100644
index 00000000..a4308d57
--- /dev/null
+++ b/src/views/entityExplorer/entityGraphDetail/AppList.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <loading :loading="entity.loading" size="small"></loading>
+    <div class="graph-list-header">
+      <div>
+        <div class="graph-list-header-title">
+          <i class="graph-list-header-icon cn-icon cn-icon-app-name"></i>
+          <span>{{ $t('entities.tab.relatedApp') }}</span>
+        </div>
+        <div class="graph-list-header-number">
+          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
+        </div>
+      </div>
+
+      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
+    </div>
+    <div class="graph-list-expand-btn-block">
+      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
+        <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
+        {{ $t('entity.graph.continueToExpand') }}
+      </div>
+    </div>
+    <div>
+      <div class="digital-certificate">
+        <div class="digital-certificate-header padding-b-12">
+          <div class="digital-certificate-header__icon graph-header__icon"></div>
+          <div class="graph-list-content-header ">
+            {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
+            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
+          </div>
+        </div>
+
+        <div class="graph-list-content">
+          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
+            <div class="graph-list-item-ip" @click="expandDetail">{{ item.vertex }}</div>
+            <div class="graph-list-item-block">
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">APP ID:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appId', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.category')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appCategory', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.subcategory')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appSubcategory', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.riskLevel')}}:</div>
+                <div class="graph-list-item-value">{{ appRisk($_.get(item.detail, 'category.appRisk', '-')) }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('config.dataSource.description')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appDescription', '-') }}</div>
+              </div>
+            </div>
+            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { riskLevelMapping } from '@/utils/constants'
+import Loading from '@/components/common/Loading'
+export default {
+  name: 'AppList',
+  props: {
+    entity: {
+      type: Object
+    }
+  },
+  components: {
+    Loading
+  },
+  computed: {
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    },
+    expandBtnDisable () {
+      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
+    }
+  },
+  methods: {
+    closeBlock () {
+      this.$emit('closeBlock')
+    },
+    expandDetail () {
+      if (this.entity.entityType === 'app') {
+        this.$emit('expandDetail', 'appDetail')
+      } else if (this.entity.entityType === 'domain') {
+        this.$emit('expandDetail', 'domainDetail')
+      }
+    },
+    onMouseenter (val) {
+      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
+      this.$emit('mouseenter', val)
+    },
+    expandList () {
+      // 继续拓展ip列表，传递信息，调用接口
+      if (!this.expandBtnDisable) {
+        this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue b/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
deleted file mode 100644
index 1f96c9b2..00000000
--- a/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <div class="graph-list-header">
-      <div>
-        <div class="graph-list-header-title">
-          <i class="graph-list-header-icon" :class="entityIcon"></i>
-          <span>{{ $t(entityName) }}</span>
-        </div>
-        <div class="graph-list-header-number" style="margin-bottom: 24px">
-          {{ $t('entity.graph.associatedQuantity') }}：<span>2</span>
-        </div>
-      </div>
-
-      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
-    </div>
-
-    <div>
-      <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-12">
-          <div class="digital-certificate-header__icon graph-header__icon"></div>
-          <div class="graph-list-content-header ">
-            {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
-            <span>{{ cardData.length }}</span>
-          </div>
-        </div>
-
-        <div class="graph-list-content">
-          <div v-for="(item, index) in cardData" :key="index" @mouseenter="onMouseenter(item)">
-            <div class="graph-list-item-ip" @click="expandDetail">{{ item.name }}</div>
-            <div class="graph-list-item-block">
-              <div v-for="card in item.data" :key="card.name">
-                <div class="graph-list-item__app">
-                  <div class="graph-list-item-label__app">{{ card.label }}:</div>
-                  <div class="graph-list-item-value">{{ card.value }}</div>
-                </div>
-              </div>
-            </div>
-
-            <div class="graph-list-dividing-line" v-if="index !== cardData.length - 1"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import i18n from '@/i18n'
-import { ref } from 'vue'
-
-export default {
-  name: 'AppOrDomainList',
-  props: {
-    entity: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  setup (props) {
-    const cardData = ref([]) // 列表数据
-    const entityIcon = ref('') // 顶部icon
-    const entityName = ref('') // 顶部名称，非实体名
-
-    switch (props.entity.entityType) {
-      case 'app': {
-        entityIcon.value = 'cn-icon cn-icon-app-name'
-        entityName.value = 'entities.tab.relatedApp'
-
-        cardData.value = [
-          {
-            name: 'Wechat',
-            data: [
-              { name: 'appId', label: i18n.global.t('entities.domainDetail.appid'), value: '2376' },
-              { name: 'appCategory', label: i18n.global.t('entities.category'), value: 'Sensitive' },
-              { name: 'appSubcategory', label: i18n.global.t('entities.subcategory'), value: 'Parked Domain' },
-              { name: 'appRisk', label: i18n.global.t('entities.riskLevel'), value: 'Moderate Risk' },
-              { name: 'appDescription', label: i18n.global.t('config.dataSource.description'), value: 'Wechat is a Chinese multinational networking and services company.' }
-            ]
-          },
-          {
-            name: 'Wechat',
-            data: [
-              { name: 'appId', label: i18n.global.t('entities.domainDetail.appid'), value: '2376' },
-              { name: 'appCategory', label: i18n.global.t('entities.category'), value: 'Sensitive' },
-              { name: 'appSubcategory', label: i18n.global.t('entities.subcategory'), value: 'Parked Domain' },
-              { name: 'appRisk', label: i18n.global.t('entities.riskLevel'), value: 'Moderate Risk' },
-              { name: 'appDescription', label: i18n.global.t('config.dataSource.description'), value: 'Wechat is a Chinese multinational networking and services company.' }
-            ]
-          }
-        ]
-        break
-      }
-      case 'domain': {
-        entityIcon.value = 'cn-icon cn-icon-subdomain'
-        entityName.value = 'entities.subdomain'
-
-        cardData.value = [
-          {
-            name: '-*.webproxy.at.1.baidu.com',
-            data: [
-              { name: 'categoryName', label: i18n.global.t('entities.category'), value: 'Business and Economy' },
-              { name: 'categoryGroup', label: i18n.global.t('entities.group'), value: 'Productivity' },
-              { name: 'registration', label: i18n.global.t('entities.registration'), value: 'China' },
-              { name: 'registrantOrg', label: i18n.global.t('entities.registry'), value: 'Beijing Baidu Netcom Science Technology Co, Ltd' },
-              { name: 'icpLicense', label: i18n.global.t('entities.icpLicense'), value: '京ICP备24537号' }
-            ]
-          },
-          {
-            name: '-*.webproxy.at.1.baidu.com',
-            data: [
-              { name: 'categoryName', label: i18n.global.t('entities.category'), value: 'Business and Economy' },
-              { name: 'categoryGroup', label: i18n.global.t('entities.group'), value: 'Productivity' },
-              { name: 'registration', label: i18n.global.t('entities.registration'), value: 'China' },
-              { name: 'registrantOrg', label: i18n.global.t('entities.registry'), value: 'Beijing Baidu Netcom Science Technology Co, Ltd' },
-              { name: 'icpLicense', label: i18n.global.t('entities.icpLicense'), value: '京ICP备24537号' }
-            ]
-          }
-        ]
-        break
-      }
-    }
-
-    return {
-      entityIcon,
-      entityName,
-      cardData
-    }
-  },
-  methods: {
-    initData () {
-      // 此处请求接口
-    },
-    closeBlock () {
-      this.$emit('closeBlock')
-    },
-    expandDetail () {
-      if (this.entity.entityType === 'app') {
-        this.$emit('expandDetail', 'appDetail')
-      } else if (this.entity.entityType === 'domain') {
-        this.$emit('expandDetail', 'domainDetail')
-      }
-    },
-    onMouseenter (val) {
-      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
-      this.$emit('mouseenter', val)
-    }
-  }
-}
-</script>
diff --git a/src/views/entityExplorer/entityGraphDetail/DomainList.vue b/src/views/entityExplorer/entityGraphDetail/DomainList.vue
new file mode 100644
index 00000000..1bd1037e
--- /dev/null
+++ b/src/views/entityExplorer/entityGraphDetail/DomainList.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <loading :loading="entity.loading" size="small"></loading>
+    <div class="graph-list-header">
+      <div>
+        <div class="graph-list-header-title">
+          <i class="graph-list-header-icon cn-icon cn-icon-subdomain"></i>
+          <span>{{ entity.isSubdomain ? $t('entities.subdomain') : $t('entity.graph.resolveDomain') }}</span>
+        </div>
+        <div class="graph-list-header-number">
+          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
+        </div>
+      </div>
+
+      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
+    </div>
+    <div class="graph-list-expand-btn-block">
+      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
+        <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
+        {{ $t('entity.graph.continueToExpand') }}
+      </div>
+    </div>
+    <div>
+      <div class="digital-certificate">
+        <div class="digital-certificate-header padding-b-12">
+          <div class="digital-certificate-header__icon graph-header__icon"></div>
+          <div class="graph-list-content-header ">
+            {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
+            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
+          </div>
+        </div>
+
+        <div class="graph-list-content">
+          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
+            <div class="graph-list-item-ip" @click="expandDetail">{{ item.vertex }}</div>
+            <div class="graph-list-item-block">
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.category')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.name', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.group')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.group', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.registration')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'whois.registrantCountry', '-') }}</div>
+              </div>
+              <div class="graph-list-item__app">
+                <div class="graph-list-item-label__app">{{$t('entities.registry')}}:</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'whois.registrantOrg', '-') }}</div>
+              </div>
+            </div>
+            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { riskLevelMapping } from '@/utils/constants'
+import Loading from '@/components/common/Loading'
+export default {
+  name: 'DomainList',
+  props: {
+    entity: {
+      type: Object
+    }
+  },
+  components: {
+    Loading
+  },
+  computed: {
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    },
+    expandBtnDisable () {
+      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
+    }
+  },
+  methods: {
+    closeBlock () {
+      this.$emit('closeBlock')
+    },
+    expandDetail () {
+      if (this.entity.entityType === 'app') {
+        this.$emit('expandDetail', 'appDetail')
+      } else if (this.entity.entityType === 'domain') {
+        this.$emit('expandDetail', 'domainDetail')
+      }
+    },
+    onMouseenter (val) {
+      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
+      this.$emit('mouseenter', val)
+    },
+    expandList () {
+      // 继续拓展ip列表，传递信息，调用接口
+      if (!this.expandBtnDisable) {
+        this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue b/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
index d0543955..5c5decd6 100644
--- a/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
+++ b/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
@@ -5,10 +5,10 @@
       <div class="graph-detail__icon"><i :class="iconClass"></i></div>
 
       <div class="graph-detail-header">
-        <div class="entity-graph-type">{{ entityType[entity.entityType] }}</div>
+        <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">{{ entity.entityName }}</div>
+            <div class="graph-basic-info-name" id="entityName">{{ $_.get(entity, 'detailData.vertex', '') }}</div>
             <div class="graph-basic-info-icon" @click="copyEntityName">
               <i class="cn-icon cn-icon-copy"></i>
             </div>
@@ -30,15 +30,94 @@
     </div>
 
     <div class="graph-basic-info__block-content">
-      <div class="graph-content-item" v-for="item in detailCards" :key="item.name">
-        <div class="graph-content-item-label">{{ item.label }}:</div>
-        <div class="graph-content-item-value">{{ item.value || '-' }}</div>
-      </div>
+      <template v-if="entity.type === 'ip'">
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.asNumber') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.asn.asn', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.asOrg') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.asn.organization', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.graph.isp') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.location.isp', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('overall.location') }}:</div>
+          <div class="graph-content-item-value">{{ location(entity.detailData) }}</div>
+        </div>
+      </template>
+      <template v-else-if="entity.type === 'domain'">
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.category') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.name', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.group') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.group', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.creditLevel2') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.reputationLevel', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.graph.expirationDate') }}:</div>
+          <div class="graph-content-item-value">{{ handleDate('detailData.detail.whois.expireDate') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.registrar') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrarName', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.registry') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrantOrg', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.registrationCountry') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrantCountry', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.registrationDate') }}:</div>
+          <div class="graph-content-item-value">{{ handleDate('detailData.detail.whois.createDate') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.registryEmail') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.email', '-') }}</div>
+        </div>
+      </template>
+      <template v-else-if="entity.type === 'app'">
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.category') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appCategory', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.subcategory') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appSubcategory', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('entities.riskLevel') }}:</div>
+          <div class="graph-content-item-value">{{ appRisk($_.get(entity, 'detailData.detail.category.appRisk', '-')) }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('overall.technology') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appTechnology', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('overall.appFullName') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appLongname', '-') }}</div>
+        </div>
+        <div class="graph-content-item" >
+          <div class="graph-content-item-label">{{ $t('config.dataSource.description') }}:</div>
+          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appDescription', '-') }}</div>
+        </div>
+      </template>
     </div>
   </div>
 
   <!--关系拓展-->
   <div class="digital-certificate graph-basic-info__block">
+    <loading :loading="entity.loading" size="small"></loading>
     <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">
@@ -47,28 +126,17 @@
     </div>
 
     <div class="graph-basic-info__block-content" style="margin-top: -4px;">
-      <div v-for="item in relationList" :key="item.name" @click="expandRelation(item.name)">
-        <el-popover
-            v-if="item.value.length === item.total"
-            placement="top"
-            auto-close="2000"
-            trigger="click"
-            :content="$t('entity.graph.completed')"
-            popper-class="graph-popover"
-        >
-          <template #reference>
-            <div class="graph-content-item graph-content-relationship-item">
-              <div class="graph-relationship-item-label">
-                <i class="margin-r-6" :class="item.icon"></i>
-                <span>{{ item.label }}：</span>
-              </div>
-              <div class="graph-relationship-item-value">
-                <span class="margin-r-6">{{ item.value.length }}/{{ item.total }}</span>
-                <i class="cn-icon cn-icon-expand-relationship" :style="{color: iconColor(item.value.length, item.total)}"></i>
-              </div>
-            </div>
-          </template>
-        </el-popover>
+      <div v-for="item in relationList" :key="item.name">
+        <div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total">
+          <div class="graph-relationship-item-label">
+            <i class="margin-r-6" :class="item.icon"></i>
+            <span>{{ item.label }}：</span>
+          </div>
+          <div class="graph-relationship-item-value">
+            <span class="margin-r-6">{{ item.value }}/{{ item.total }}</span>
+            <i class="cn-icon cn-icon-expand-relationship" :style="{color: iconColor(item.value, item.total)}"></i>
+          </div>
+        </div>
 
         <div v-else class="graph-content-item graph-content-relationship-item">
           <div class="graph-relationship-item-label">
@@ -76,14 +144,8 @@
             <span>{{ item.label }}：</span>
           </div>
           <div class="graph-relationship-item-value">
-            <span class="margin-r-6">{{ item.value.length }}/{{ item.total }}</span>
-            <el-tooltip
-                effect="dark"
-                :content="$t('entity.graph.expandDownward')"
-                placement="top-end"
-            >
-              <i class="cn-icon cn-icon-expand-relationship graph-expand-relationship__icon" :style="{color: iconColor(item.value.length, item.total)}"></i>
-            </el-tooltip>
+            <span class="margin-r-6">{{ item.value }}/{{ item.total }}</span>
+            <i class="cn-icon cn-icon-expand-relationship graph-expand-relationship__icon" :style="{color: iconColor(item.value, item.total)}" @click="expandRelation(item.name)"></i>
           </div>
         </div>
       </div>
@@ -95,13 +157,13 @@
     <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">
-        {{ $t('entity.graph.labels') }}
+        {{ $t('entity.graph.tags') }}
       </div>
     </div>
 
     <div class="entity-detail graph-basic-info__block-content">
       <div class="graph-tag-list">
-        <div v-for="ic in tagList" :key="ic.key">
+        <div v-for="ic in entity.tags" :key="ic.value">
           <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`">
             <span>{{ic.value}}</span>
           </div>
@@ -112,15 +174,13 @@
 </template>
 
 <script>
-import i18n from '@/i18n'
 import { copySelectionText, selectElementText } from '@/utils/tools'
 import { entityType, riskLevelMapping } from '@/utils/constants'
-import axios from 'axios'
-import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { dateFormatByAppearance } from '@/utils/date-util'
 import { ref } from 'vue'
 import _ from 'lodash'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'DomainDetail',
@@ -130,12 +190,23 @@ export default {
     }
   },
   mixins: [chartMixin],
+  components: {
+    Loading
+  },
   data () {
     return {
       entityType
     }
   },
   computed: {
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    },
     iconClass () {
       let className
       switch (this.entity.entityType) {
@@ -155,87 +226,187 @@ export default {
           break
       }
       return className
+    },
+    handleDate () {
+      return function (key) {
+        const date = _.get(this.entity, key, '')
+        return date ? dateFormatByAppearance(date) : '-'
+      }
     }
   },
-  mounted () {
-    this.initData()
+  watch: {
+    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
+              }
+            ]
+          }
+        }
+      }
+    }
   },
   setup (props) {
     const detailCards = ref([])
     const relationList = ref([])
     const tagList = ref([])
-    // 标签列表，后续请求接口时处理
-    tagList.value = [
-      { key: 'isp', value: '信息技术', type: 'positive' },
-      { key: 'malwareName', value: '互联网', type: 'normal' },
-      { key: 'malwareName1', value: '互联网', type: 'normal' },
-      { key: 'malwareName2', value: '互联网', type: 'normal' },
-      { key: 'malwareName3', value: '互联网', type: 'normal' },
-      { key: 'malwareName4', value: '互联网', type: 'normal' },
-      { key: 'malwareName5', value: '互联网', type: 'normal' },
-      { key: 'malwareName6', value: '互联网', type: 'normal' },
-      { key: 'malwareName7', value: '互联网', type: 'normal' },
-      { key: 'malwareName8', value: '互联网', type: 'normal' },
-      { key: 'malwareName9', value: '互联网', type: 'normal' },
-      { key: 'malwareName10', value: '互联网', type: 'normal' },
-      { key: 'malwareName11', value: '互联网', type: 'normal' },
-      { key: 'malwareName12', value: '互联网', type: 'normal' }
-    ]
-
-    switch (props.entity.entityType) {
-      case 'ip': {
-        detailCards.value = _.concat(detailCards.value,
-          { name: 'asn', label: i18n.global.t('entities.asNumber'), value: '' },
-          { name: 'asOrg', label: i18n.global.t('entities.asOrg'), value: '' },
-          { name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
-          { name: 'isp', label: i18n.global.t('entities.graph.isp'), value: '' },
-          { name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '' }
-          // { name: 'dnsPtr', label: 'DNS PTR', value: '' }
-        )
-
-        relationList.value = _.concat(relationList.value,
-          { icon: 'cn-icon cn-icon-subdomain', name: 'resolveIp', label: i18n.global.t('entity.graph.resolveDomain'), value: [], total: 12 },
-          { icon: 'cn-icon cn-icon-app-name', name: 'relatedApp', label: i18n.global.t('entities.tab.relatedApp'), value: [], total: 6 }
-        )
-        break
-      }
-      case 'domain': {
-        detailCards.value = _.concat(detailCards.value,
-          { name: 'categoryName', label: i18n.global.t('entities.category'), value: '' },
-          { name: 'categoryGroup', label: i18n.global.t('entities.domainDetail.subcategory'), value: '' },
-          { name: 'reputationLevel', label: i18n.global.t('entities.creditLevel2'), value: '' },
-          { name: 'expireDate', label: i18n.global.t('entities.graph.expirationDate'), value: '' },
-          { name: 'registrarName', label: i18n.global.t('entities.registrar'), value: '' },
-          { name: 'registrantOrg', label: i18n.global.t('entities.registry'), value: '' },
-          { name: 'registrantCountry', label: i18n.global.t('entities.registrationCountry'), value: '' },
-          { name: 'createDate', label: i18n.global.t('entities.registrationDate'), value: '' },
-          { name: 'email', label: i18n.global.t('entities.registryEmail'), value: '' }
-        )
-
-        relationList.value = _.concat(relationList.value,
-          { icon: 'cn-icon cn-icon-resolve-ip', name: 'resolveIp', label: i18n.global.t('entities.graph.resolveIp'), value: [], total: 12 },
-          { icon: 'cn-icon cn-icon-subdomain', name: 'subdomain', label: i18n.global.t('entities.subdomain'), value: [1, 2], total: 2 },
-          { icon: 'cn-icon cn-icon-app-name', name: 'relatedApp', label: i18n.global.t('entities.tab.relatedApp'), value: [], total: 6 }
-        )
-        break
-      }
-      case 'app': {
-        detailCards.value = _.concat(detailCards.value,
-          { name: 'appCategory', label: i18n.global.t('entities.category'), value: '' },
-          { name: 'appSubcategory', label: i18n.global.t('entities.subcategory'), value: '' },
-          { name: 'appRisk', label: i18n.global.t('entities.riskLevel'), value: '' },
-          { name: 'appTechnology', label: i18n.global.t('overall.technology'), value: '' },
-          { name: 'appName', label: i18n.global.t('overall.appName2'), value: '' },
-          { name: 'appLongname', label: i18n.global.t('overall.appFullName'), value: '' },
-          { name: 'appDescription', label: i18n.global.t('config.dataSource.description'), value: '' }
-        )
-
-        relationList.value = _.concat(relationList.value,
-          { icon: 'cn-icon cn-icon-resolve-ip', name: 'resolveIp', label: i18n.global.t('entities.graph.resolveIp'), value: [], total: 12 },
-          { icon: 'cn-icon cn-icon-subdomain', name: 'resolveDomain', label: i18n.global.t('entity.graph.resolveDomain'), value: [], total: 12 }
-        )
-      }
-    }
 
     return {
       detailCards,
@@ -244,62 +415,6 @@ export default {
     }
   },
   methods: {
-    initData () {
-      axios.get(`${api.entity.basicInfo}/${this.entity.entityType}?resource=${this.entity.entityName}`).then(response => {
-        const res = response.data
-        if (res.code === 200) {
-          switch (this.entity.entityType) {
-            case 'ip': {
-              if (res.data.asn) {
-                this.detailCards.find(c => c.name === 'asn').value = res.data.asn.asn
-                this.detailCards.find(c => c.name === 'asOrg').value = res.data.asn.organization
-                // AS子网接口未返回
-              }
-              if (res.data.location) {
-                this.detailCards.find(c => c.name === 'isp').value = res.data.location.isp
-                this.detailCards.find(c => c.name === 'location').value = this.handleLocation(res.data.location)
-                // DNS PTR接口未返回
-              }
-              break
-            }
-            case 'domain': {
-              if (res.data.category) {
-                this.detailCards.find(c => c.name === 'categoryName').value = res.data.category.categoryName
-                this.detailCards.find(c => c.name === 'categoryGroup').value = res.data.category.categoryGroup
-                this.detailCards.find(c => c.name === 'reputationLevel').value = res.data.category.reputationLevel
-              }
-
-              if (res.data.whois) {
-                this.detailCards.find(c => c.name === 'expireDate').value = dateFormatByAppearance(res.data.whois.expireDate)
-                this.detailCards.find(c => c.name === 'registrarName').value = res.data.whois.registrarName
-                this.detailCards.find(c => c.name === 'registrantOrg').value = res.data.whois.registrantOrg
-                this.detailCards.find(c => c.name === 'registrantCountry').value = res.data.whois.registrantCountry
-                this.detailCards.find(c => c.name === 'createDate').value = dateFormatByAppearance(res.data.whois.createDate)
-                this.detailCards.find(c => c.name === 'email').value = res.data.whois.email
-              }
-              break
-            }
-            case 'app': {
-              if (res.data.category) {
-                this.detailCards.find(c => c.name === 'appCategory').value = res.data.category.appCategory
-                this.detailCards.find(c => c.name === 'appSubcategory').value = res.data.category.appSubcategory
-                this.detailCards.find(c => c.name === 'appRisk').value = this.appRisk(res.data.category.appRisk)
-                this.detailCards.find(c => c.name === 'appTechnology').value = res.data.category.appTechnology
-                this.detailCards.find(c => c.name === 'appName').value = res.data.category.appName
-                this.detailCards.find(c => c.name === 'appLongname').value = res.data.category.appLongname
-                this.detailCards.find(c => c.name === 'appDescription').value = res.data.category.appDescription
-              }
-              break
-            }
-          }
-        }
-      }).catch(e => {
-        console.error(e)
-        this.httpError(e)
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    },
     /** 复制实体名称 */
     copyEntityName () {
       selectElementText(document.getElementById('entityName'))
@@ -312,7 +427,11 @@ export default {
     /** 修改关系拓展图标颜色，全部拓展浅灰色，否则深灰色 */
     iconColor (length, total) {
       if (length < total) {
-        return 'rgba(57, 57, 57, 1)'
+        if (length === 50) {
+          return 'rgba(57, 57, 57, 0.5)'
+        } else {
+          return 'rgba(57, 57, 57, 1)'
+        }
       } else {
         return 'rgba(57, 57, 57, 0.5)'
       }
@@ -335,31 +454,32 @@ export default {
       }
       return location.join(' - ')
     },
-    appRisk (level) {
-      const m = riskLevelMapping.find(mapping => {
-        return mapping.value === level
-      })
-      return (m && m.name) || level
-    },
     /** 关系拓展 */
     expandRelation (name) {
-      // todo 模拟效果，后续修改
-      const obj = this.relationList.find(item => item.name === name)
-      if (obj) {
-        const num = obj.total - obj.value.length
-        if (num > 0) {
-          const len = num < 10 ? num : 10
-          for (let i = 0; i < len; i++) {
-            obj.value.push(i)
-          }
-          this.$emit('expand')
-        }
-      }
+      this.$emit('expandDetailList', name === 'subDomain' ? 'domain' : name, this.entity.name)
     },
     httpError (e) {
       this.isNoData = false
       this.showError = true
       this.errorMsg = this.errorMsgHandler(e)
+    },
+    location (detailData) {
+      let location = ''
+      if (detailData) {
+        const data = detailData.detail
+        if (data) {
+          if (data.city) {
+            location = data.city
+          }
+          if (data.province) {
+            location = location ? `${data.province}, ${location}` : data.province
+          }
+          if (data.country) {
+            location = location ? `${data.country}, ${location}` : data.country
+          }
+        }
+      }
+      return location || '-'
     }
   }
 }
diff --git a/src/views/entityExplorer/entityGraphDetail/IpList.vue b/src/views/entityExplorer/entityGraphDetail/IpList.vue
index 3f83e348..8554aebe 100644
--- a/src/views/entityExplorer/entityGraphDetail/IpList.vue
+++ b/src/views/entityExplorer/entityGraphDetail/IpList.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <loading :loading="entity.loading" size="small"></loading>
     <div class="graph-list-header">
       <div>
         <div class="graph-list-header-title">
@@ -7,7 +8,7 @@
           <span>{{ $t('entities.graph.resolveIp') }}</span>
         </div>
         <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedQuantity') }}：<span>12</span>
+          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
         </div>
       </div>
 
@@ -15,7 +16,7 @@
     </div>
 
     <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" style="display: inline-flex;" @click="expandList">
+      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
           <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
         {{ $t('entity.graph.continueToExpand') }}
       </div>
@@ -27,29 +28,29 @@
           <div class="digital-certificate-header__icon graph-header__icon"></div>
           <div class="graph-list-content-header ">
             {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
-            <span>{{ ipList.length }}</span>
+            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
           </div>
         </div>
 
         <div class="graph-list-content">
-          <div v-for="(item, index) in ipList" :key="index" @mouseenter="onMouseenter(item)">
-            <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.ip }}</span></div>
+          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
+            <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
             <div class="graph-list-item-block">
               <div class="graph-list-item padding-b-4">
                 <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
                 <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;">
-                  <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>
-                  <span>{{ item.city }}</span>
+<!--                  <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>-->
+                  <span>{{ $_.get(item.detail, 'location.city', '-') }}</span>
                 </div>
               </div>
 
               <div class="graph-list-item">
                 <div class="graph-list-item-label">ASN:</div>
-                <div class="graph-list-item-value">{{ item.asn }}</div>
+                <div class="graph-list-item-value">{{ $_.get(item.detail, 'asn.asn', '-') }}</div>
               </div>
             </div>
 
-            <div class="graph-list-dividing-line" v-if="index !== ipList.length - 1"></div>
+            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
           </div>
         </div>
       </div>
@@ -58,22 +59,20 @@
 </template>
 
 <script>
+import Loading from '@/components/common/Loading'
 export default {
   name: 'IpList',
-  data () {
-    return {
-      ipList: [
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' },
-        { ip: '192.168.22.11', flag: '011-china', city: 'China, Beijing', asn: 'Sensitive' }
-      ]
+  props: {
+    entity: {
+      type: Object
+    }
+  },
+  components: {
+    Loading
+  },
+  computed: {
+    expandBtnDisable () {
+      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
     }
   },
   methods: {
@@ -89,12 +88,8 @@ export default {
     },
     expandList () {
       // 继续拓展ip列表，传递信息，调用接口
-      // this.$emit('expandList')
+      this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
     }
   }
 }
 </script>
-
-<style lang="scss">
-
-</style>