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

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

@@ -32,7 +32,7 @@ $font-size: 12px;
 
       .graph-basic-info-name {
         padding-right: 10px;
-        width: 260px;
+        max-width: 260px;
         font-size: 20px;
         color: #353636;
         font-weight: 700;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1688009911333') format('woff2'),
+  src: url('iconfont.woff2?t=1689317280458') format('woff2'),
-       url('iconfont.woff?t=1688009911333') format('woff'),
+       url('iconfont.woff?t=1689317280458') format('woff'),
-       url('iconfont.ttf?t=1688009911333') format('truetype');
+       url('iconfont.ttf?t=1689317280458') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-add-knowledge-base:before {
+  content: "\e802";
+}
+
+.cn-icon-update-knowledge-base:before {
+  content: "\e803";
+}
+
+.cn-icon-zoom-out:before {
+  content: "\e7fd";
+}
+
+.cn-icon-to-default:before {
+  content: "\e7fe";
+}
+
+.cn-icon-reset:before {
+  content: "\e7ff";
+}
+
+.cn-icon-next-step:before {
+  content: "\e800";
+}
+
+.cn-icon-pre-step:before {
+  content: "\e801";
+}
+
+.cn-icon-zoom-in:before {
+  content: "\e7f";
+}
+
 .cn-icon-expand-continue:before {
   content: "\e7fc";
 }

src/views/entityExplorer/EntityGraph.vue

@@ -57,6 +57,7 @@ import { api } from '@/utils/api'
 import axios from 'axios'
 import G6, { Algorithm } from '@antv/g6'
 import { entityDetailTags } from '@/utils/constants'
+import { ElMessage } from 'element-plus'
 
 export default {
   name: 'EntityRelationship',
@@ -102,6 +103,7 @@ export default {
     async init () {
       const _this = this
       const tooltip = this.buildTooltip() // tooltip组件
+      // const toolbar = this.buildToolbar() // 工具栏组装件
       this.chartOption.plugins = [tooltip]
       this.graph = new G6.Graph(this.chartOption)
       const rootNode = await this.generateRootNode()
@@ -112,7 +114,7 @@ export default {
       const rootEdges = this.generateEdges(rootNode)
       const secondEdges = this.generateEdges(secondLevelNodes)
       this.graphData.edges = [...rootEdges, ...secondEdges]
-      console.info(this.graphData)
+      // console.info(this.graphData)
       this.graph.data(this.graphData)
       this.graph.render()
       this.graph.on('node:dragstart', function (e) {
@@ -206,7 +208,7 @@ export default {
                     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})`
+                    n.label = _this.$t('entity.graph.resolvedDomain') + `(${n.data.count})`
                   }
                   break
                 }
@@ -260,7 +262,7 @@ export default {
                 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})`
+                node.label = _this.$t('entity.graph.resolvedDomain') + `(${node.data.count})`
               }
               break
             }
@@ -317,7 +319,7 @@ export default {
                     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})`
+                    n.label = _this.$t('entity.graph.resolvedDomain') + `(${n.data.count})`
                   }
                   break
                 }
@@ -378,7 +380,7 @@ export default {
 
             // TODO 高亮
           } else {
-            // TODO 提示无法拓展
+            this.$message.error(this.$t('entities.graph.expandedLevelMaxLimit'))
           }
           _this.addNodes(entityNodes)
           _this.addEdges(edges)
@@ -610,7 +612,11 @@ export default {
         case 'ip': {
           width = 24
           height = 22
+          if (node.data.type === 'app') {
+            label = this.$t('entities.tab.relatedIp')
+          } else if (node.data.type === 'ip') {
             label = this.$t('entities.graph.resolveIp')
+          }
           break
         }
         case 'subdomain': {
@@ -622,7 +628,11 @@ export default {
         case 'domain': {
           width = 24
           height = 24
-          label = this.$t('entity.graph.resolveDomain')
+          if (node.data.type === 'app') {
+            label = this.$t('entities.relatedDomain')
+          } else if (node.data.type === 'ip') {
+            label = this.$t('entities.graph.resolvedDomain')
+          }
           break
         }
         case 'app': {
@@ -698,7 +708,7 @@ export default {
         const domainNode = this.generatePrimaryNode({
           id: 'domain-1',
           parentId: rootNode.id,
-          label: this.$t('entity.graph.resolveDomain'),
+          label: this.$t('entity.graph.resolvedDomain'),
           x: 260,
           y: -150,
           data: {
@@ -1130,7 +1140,7 @@ export default {
               }
               case 'domain': {
                 iconClass = 'cn-icon cn-icon-subdomain'
-                title = _this.$t('entity.graph.resolveDomain')
+                title = _this.$t('entity.graph.resolvedDomain')
                 break
               }
               case 'app': {
@@ -1142,8 +1152,8 @@ export default {
             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.associatedCount')}:&nbsp;${node.data.count || 0}</span>
-                <span>${_this.$t('entity.graph.expandedEntityQuantity')}:&nbsp;${node.data.loaded ? node.data.loaded.length : 0}</span>
+                <span>${_this.$t('entity.graph.expandedEntityCount')}:&nbsp;${node.data.loaded ? node.data.loaded.length : 0}</span>
               </div>
             </div>`
           } else if (node.nodeType === 'entity' || node.nodeType === 'root') {
@@ -1180,12 +1190,40 @@ export default {
         }
       })
     },
+    buildToolbar () {
+      const tc = document.createElement('div')
+      tc.id = 'toolbarContainer'
+      tc.className = 'graph-toolbar'
+      document.body.appendChild(tc)
+      const toolbar = new G6.ToolBar({
+        container: tc,
+        className: 'toolbar__tools',
+        getContent: () => {
+          return `<ul>
+            <li code='zoomOut'><i class="cn-icon cn-icon-zoom-in"></i></li>
+            <li code='zoomIn'><i class="cn-icon cn-icon-zoom-out"></i></li>
+            <li code='undo'><i class="cn-icon cn-icon-next-step"></i></li>
+            <li code='redo'><i class="cn-icon cn-icon-pre-step"></i></li>
+            <li code='autoZoom'><i class="cn-icon cn-icon-auto-zoom"></i></li>
+          </ul>`
+        },
+        handleClick: (code, graph) => {
+          console.info(code)
+          toolbar.handleDefaultOperator(code)
+        }
+      })
+      return toolbar
+    },
     async expandList (sourceNodeId, nodeId) {
-      this.entity.loading = true
       const sourceNode = this.graphData.nodes.find(n => n.id === sourceNodeId)
       const node = this.graphData.nodes.find(n => n.id === nodeId)
       if (node && sourceNode) {
+        console.info(node)
         if (node.data.childNodes && node.data.childNodes.length < 50) {
+          if (node.data.childNodes.length >= node.data.count) {
+            this.$message.error(this.$t('entities.graph.allEntitiesExpanded'))
+          } else {
+            this.entity.loading = true
             const queryEntityNodes = await this.generateHalfLevelNodes(node)
             const relatedEntityCount = await this.queryRelatedEntityCount(sourceNode.data.type, sourceNodeId)
             // 赋值总数和已拓展数。entity node可从其childNodes取到已拓展数
@@ -1200,8 +1238,9 @@ export default {
             this.addNodes(queryEntityNodes)
             this.addEdges(this.generateEdges(node, queryEntityNodes))
             this.graph.changeData(this.graphData)
+          }
         } else {
-          // TODO 提示已达50上限
+          this.$message.error(this.$t('entities.graph.expandedNumberMaxLimit'))
         }
       }
     },
@@ -1255,7 +1294,7 @@ export default {
             edges.push(...this.generateEdges(primaryNode))
             // TODO 高亮
           } else {
-            // TODO 提示无法拓展
+            this.$message.error(this.$t('entities.graph.expandedLevelMaxLimit'))
           }
           this.addNodes(entityNodes)
           this.addEdges(edges)
@@ -1294,6 +1333,29 @@ export default {
 }
 </script>
 <style lang="scss">
+.graph-toolbar {
+  position: fixed;
+  top: 100px;
+  left: 0;
+
+  .toolbar__tools {
+    display: flex;
+    padding: 0 10px;
+
+    li {
+      display: flex;
+      justify-content: center;
+      width: 32px;
+      margin-right: 4px;
+      cursor: pointer;
+
+      i {
+        color: #575757;
+        font-size: 18px;
+      }
+    }
+  }
+}
 .entity-graph {
   display: flex;
 

src/views/entityExplorer/entityGraphDetail/AppList.vue

@@ -8,7 +8,7 @@
           <span>{{ $t('entities.tab.relatedApp') }}</span>
         </div>
         <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
+          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
         </div>
       </div>
 
@@ -25,7 +25,7 @@
         <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;
+            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
             <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
           </div>
         </div>
@@ -107,10 +107,8 @@ export default {
     },
     expandList () {
       // 继续拓展ip列表，传递信息，调用接口
-      if (!this.expandBtnDisable) {
       this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
     }
-    }
   },
   mounted () {
     this.$nextTick(() => {

src/views/entityExplorer/entityGraphDetail/DomainList.vue

@@ -5,10 +5,10 @@
       <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>
+          <span>{{ entity.isSubdomain ? $t('entities.subdomain') : (entity.sourceType === 'ip' ? $t('entity.graph.resolveDomain') : $t('entities.relatedDomain')) }}</span>
         </div>
         <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
+          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
         </div>
       </div>
 
@@ -25,7 +25,7 @@
         <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;
+            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
             <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
           </div>
         </div>
@@ -103,10 +103,8 @@ export default {
     },
     expandList () {
       // 继续拓展ip列表，传递信息，调用接口
-      if (!this.expandBtnDisable) {
       this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
     }
-    }
   },
   mounted () {
     this.$nextTick(() => {

src/views/entityExplorer/entityGraphDetail/GraphDetail.vue

@@ -153,7 +153,7 @@
   </div>
 
   <!--标签-->
-  <div v-if="entity.tags" class="digital-certificate graph-basic-info__block">
+  <div v-if="entity.tags && entity.tags.length > 1" class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
       <div class="graph-basic-info__block-title">
@@ -473,14 +473,14 @@ export default {
             {
               icon: 'cn-icon cn-icon-resolve-ip',
               name: 'ip',
-              label: this.$t('entities.graph.resolveIp'),
+              label: this.$t('entities.tab.relatedIp'),
               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'),
+              label: this.$t('entities.relatedDomain'),
               value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
               total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
             }

src/views/entityExplorer/entityGraphDetail/IpList.vue

@@ -5,10 +5,10 @@
       <div>
         <div class="graph-list-header-title">
           <i class="cn-icon cn-icon-resolve-ip graph-list-header-icon"></i>
-          <span>{{ $t('entities.graph.resolveIp') }}</span>
+          <span>{{ entity.sourceType === 'domain' ? $t('entities.graph.resolveIp') : $t('entities.tab.relatedIp') }}</span>
         </div>
         <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedQuantity') }}:&nbsp;<span>{{entity.count}}</span>
+          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
         </div>
       </div>
 
@@ -27,7 +27,7 @@
         <div class="digital-certificate-header padding-b-16">
           <div class="digital-certificate-header__icon graph-header__icon"></div>
           <div class="graph-list-content-header ">
-            {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
+            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
             <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
           </div>
         </div>