链路分析，网络节点上添加数据

src/views/latency/components/TopoTree.vue

@@ -378,7 +378,7 @@ export default {
     handleData(data) {
           data.forEach((v, k) => {
           v.id = v.id.toString();
-          v.type = 'circle';
+          v.type = 'flow-circle';
           v.size=[60],
           v.name = (v.flat_duration.toFixed(2)).toString()+'ms'
           v.collapsed = false;
@@ -491,6 +491,8 @@ export default {
             //   rate
             // } = cfg;
 
+            
+
             const {
               name = '',
               // variableName,
@@ -919,9 +921,7 @@ export default {
         getContent: (e) => {
           const outDiv = document.createElement('div');
           //outDiv.style.padding = '0px 0px 20px 0px';
-          console.log(e.item.getModel(),'e.item.getModel()')
           const nodeName = e.item.getModel().name;
-          console.log(nodeName,'nodeName')
           let formatedNodeName = '';
           if(nodeName != undefined){
 
@@ -997,7 +997,6 @@ export default {
       });
       //点击线   edge:click
       graph.on("name-edge-button:click", (evt) => {
-        console.log(evt)
         let _this = this;
         this.networkQuery.parent_span_id='';
         this.networkQuery.span_id = '';
@@ -1028,22 +1027,15 @@ export default {
                 let optList = this.handleData(res.data.OPT_STATUS);
                 let newOptList = this.buildNestedTree(optList);
 
-                console.log(optList,'optList这块数据是添加决策树需要的字段');
-
-                console.log(newOptList,'newOptList 这块是转成数形结构')
-
                 newFirstNode.children = newOptList;
 
-                console.log(newFirstNode,'firstNode children,赋于新的值')
 
                 let firstList =[newFirstNode];
 
                 let resultList = this.addDataToTree(firstList,newLastNode)
 
-                console.log(resultList,'这是在末尾添加数据')
                 topoData = resultList[0]
 
-                console.log(topoData,'this.topoData')
 
                 // _this.$emit('changeNetwork',this.topoData);
                 this.networkOpen = true;
@@ -1182,6 +1174,7 @@ export default {
         {
           shapeType: 'flow-rect',
           draw(cfg, group) {
+            console.log(cfg,'自定义节点------')
             // const {
             //   name = '',
             //   variableName,
@@ -1193,7 +1186,6 @@ export default {
             //   status,
             //   rate
             // } = cfg;
-
             const {
               name = '',
               // variableName,
@@ -1473,6 +1465,74 @@ export default {
         'rect',
       );
 
+      G6.registerNode(
+        'flow-circle',
+        {
+          shapeType: 'flow-circle',
+          draw(cfg, group) {
+          const {
+              span_name,
+              label,
+              span_category,
+            } = cfg;
+            console.log(cfg,'cfg=========圆形节点')
+              const radius = (60 / 2) - 2;
+              const circleBoxlenght = cfg.size;
+              const circle = group.addShape('circle', {
+                attrs: {
+                  x: 0,
+                  y: 0,
+                  r: radius,
+                  fill: '#F0F4FE',
+                  stroke: '#6B94F7',
+                  lineWidth:2,
+                },
+                name: 'circle-shape',
+              });
+
+              group.addShape('text', {
+                attrs: {
+                  x: 0,
+                  y: 0,
+                  text:label,
+                  fill:"#333",
+                  fontSize:12,
+                  textAlign: 'center', // 文本居中
+                  textBaseline: 'middle', // 文本垂直居中
+                  // fill: cfg.color, // 节点颜色
+                },
+                name: 'label-shape',
+              });
+
+              group.addShape('text', {
+                attrs: {
+                  x: 0,
+                  y: radius + 20,
+                  text:span_name,
+                  fill:"#333",
+                  fontSize:12,
+                  textAlign: 'center', // 文本居中
+                },
+                name: 'span-name-shape',
+              });
+              group.addShape('text', {
+                attrs: {
+                  x: 0,
+                  y: radius + 40,
+                  text:span_category,
+                  fill:"#333",
+                  fontSize:12,
+                  textAlign: 'center', // 文本居中
+                },
+                name: 'span-category-shape',
+              });
+
+              return circle; // 返回创建的圆形
+          }
+        },
+        'circle',
+      );
+
       G6.registerEdge(
         'flow-cubic',
         {
@@ -1538,7 +1598,6 @@ export default {
           const nodeName = e.item.getModel().name;
           const item  = e.item.getModel()
           const detail= item.detail
-          console.log(item,'item,提示')
           if(item.detail != undefined){
             let html = ''
             for (let key in detail) {