|
|
@@ -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;
|
