修改链路分析页面决策树的样式

src/views/index/index.vue

@@ -803,6 +803,7 @@ export default {
 
       font-weight: bold;
       font-size: 18px;
+      
       //     position: fixed;
       // top: 0;
       // right: 0;

src/views/latency/components/TopoTree.vue

@@ -287,6 +287,7 @@ export default {
       lastNode:{},
       apis:require("../../../assets/apis.jpg"),
       apm:require("../../../assets/apm.jpg"),
+      iconDown:require("../../../assets/icon_down.png"),
       flag:false,
     }
   },
@@ -401,6 +402,7 @@ export default {
           return data
     },
     initGraph(data,id){
+          let _this = this;
           let graph = null;
           const container = document.getElementById(id);
 
@@ -772,55 +774,75 @@ export default {
         'flow-cubic',
         {
           afterDraw(cfg, group) {
-            // get the first shape in the graphics group of this edge, it is the path of the edge here
-            // 获取图形组中的第一个图形，在这里就是边的路径图形
-            const shape = group.get('children')[0];
-            // get the coordinate of the mid point on the path
-            // 获取路径图形的中点坐标
-            const midPoint = shape.getPoint(0.5);
-            // const rectColor = cfg.midPointColor || '#333';
-            // add a rect on the mid point of the path. note that the origin of a rect shape is on its lefttop
-            // 在中点增加一个矩形，注意矩形的原点在其左上角
-                group.addShape('rect', {
+            const sourceNode = cfg.sourceNode._cfg.model;
+            const sourceNodeServiceName = sourceNode.service_name;
+            const targetNode = cfg.targetNode._cfg.model;
+            const targetNodeServiceName = targetNode.service_name;
+            if(sourceNodeServiceName != targetNodeServiceName){
+              // get the first shape in the graphics group of this edge, it is the path of the edge here
+              // 获取图形组中的第一个图形，在这里就是边的路径图形
+              const shape = group.get('children')[0];
+              // get the coordinate of the mid point on the path
+              // 获取路径图形的中点坐标
+              const midPoint = shape.getPoint(0.5);
+              const iconDown = _this.iconDown;
+
+              // group.addShape('circle', {
+              //   attrs: {
+              //     r: 8,
+              //     fill: '#1890ff',
+              //     x: midPoint.x - 8,
+              //     y: midPoint.y - 16,
+              //     cursor: 'pointer',
+              //   },
+              // });
+              group.addShape('image', {
                   attrs: {
-                    width: 20,
-                    height: 12,
-                    fill: '#1890ff',
-                    // x and y should be minus width / 2 and height / 2 respectively to translate the center of the rect to the midPoint
-                    // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
-                    x: midPoint.x - 10,
-                    y: midPoint.y - 6,
-                  },
-                });
-                group.addShape('text', {
-                  attrs: {
-                    textAlign:'center',
-                    x: 10 + midPoint.x - 10,
-                    y: midPoint.y + 3,
-                    text: '点击',
-                    fontSize: 8,
-                    opacity: 1,
-                    fill: '#fff',
+                    x: midPoint.x - 8,
+                    y: midPoint.y - 8,
+                    height: 16,
+                    width: 16,
+                    img: iconDown,
                     cursor: 'pointer',
+                    // opacity: 1,
                   },
-                  // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                   name: 'name-edge-button',
-                });
-
-              // get the coordinate of the quatile on the path
-              // 获取路径上的四分位点坐标
-              // const quatile = shape.getPoint(0.25);
-              // const quatileColor = cfg.quatileColor || '#333';
-              //   // add a circle on the quatile of the path
-              //   // 在四分位点上放置一个圆形
-              //   group.addShape('circle', {
-              //     attrs: {
-              //       r: 5,
-              //       fill:'#333',
-              //       x: quatile.x,
-              //       y: quatile.y,
-              //     },
-              //   });
+                })
+              //   // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+              //   name: 'ip-cp-icon',
+              // });
+              // const rectColor = cfg.midPointColor || '#333';
+              // add a rect on the mid point of the path. note that the origin of a rect shape is on its lefttop
+              // 在中点增加一个矩形，注意矩形的原点在其左上角
+
+              // group.addShape('rect', {
+              //   attrs: {
+              //     width: 20,
+              //     height: 12,
+              //     fill: '#1890ff',
+              //     padding:[2,4],
+              //     // x and y should be minus width / 2 and height / 2 respectively to translate the center of the rect to the midPoint
+              //     // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
+              //     x: midPoint.x - 10,
+              //     y: midPoint.y - 6,
+              //     borderRadius: 2,
+              //   },
+              // });
+              // group.addShape('text', {
+              //   attrs: {
+              //     textAlign:'center',
+              //     x: 10 + midPoint.x - 10,
+              //     y: midPoint.y + 3,
+              //     text: '点击',
+              //     fontSize: 8,
+              //     opacity: 1,
+              //     fill: '#fff',
+              //     cursor: 'pointer',
+              //   },
+              //   // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+              //   name: 'name-edge-button',
+              // });
+            }
         },
         update: undefined,
           // getControlPoints(cfg,group) {
@@ -1526,7 +1548,7 @@ export default {
                 </div>`;
             }
             outDiv.innerHTML = `<div style='margin:-9px;position:relative'>
-              <div style='padding:10px; z-index: -1;backdrop-filter: blur(10px);background-color: rgba(0, 0, 0, 0.8);background-image:url("${item.span_category =='apm'?this.apm:this.apis}");background-size:cover;background-repeat:no-repeat;background-position: center center;'>
+              <div style='padding:10px;'>
                 <div class='nodeDetail' style='height:20px;line-height:20px;'>
                   <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanID：</span>
                   <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_id}</span>
@@ -1549,6 +1571,8 @@ export default {
                 </div>
                 ${html}
               </div>
+              <div style='position:absolute;bottom:10px;right:10px;width:80px;height:80px;z-index: -1;backdrop-filter: blur(10px);background-image:url("${item.span_category =='apm'?this.apm:this.apis}");background-size:cover;background-repeat:no-repeat;background-position: center;'>
+              </div>
             </div>
             `
             return outDiv;