Commit b10c714d authored by zhengjiangtao's avatar zhengjiangtao

修改拓扑图框顶部样式

parent abbc2778
......@@ -67,6 +67,12 @@ class TopologyComponent extends Component {
}
}
//设置文字
setFontText = (v) => {
return v.text;
}
// 告警高亮
warnHighlights = (d,v) => {
if (d.warnState) {
......@@ -277,7 +283,9 @@ class TopologyComponent extends Component {
)
);
this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
this.diagram.groupTemplate = goObj(
go.Group,
'Vertical',
{
resizable: true,
locationObjectName: 'SHAPE',
......@@ -287,27 +295,46 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 100,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(go.Shape, 'Rectangle',
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
// new go.Binding('text')
new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(
go.Shape,
'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify)
)
);
......
......@@ -533,23 +533,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 100,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
......
......@@ -382,25 +382,40 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 100,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
//new go.Binding('text')
new go.Binding('height', 'text', (v) => this.setTitleHeight(v)),
new go.Binding('text')
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
// new go.Binding('text')
new go.Binding('height', 'text', (v) => this.setTitleHeight(v)),
new go.Binding('text')
)
),
goObj(go.Shape, 'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
......
......@@ -288,23 +288,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 100,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
......
......@@ -24,7 +24,7 @@ class TopologyComponent extends Component {
this.renderCanvas();
}
componentDidUpdate(prevProps, prevState) {
const { topologyData } = this.props;
const { nodeData, linkData } = topologyData;
......@@ -81,9 +81,9 @@ class TopologyComponent extends Component {
this.showWarnHighlights(d, v);
return d.text.split("#")[0];
}
return d.text.split("#")[0];
}
// 获取ip
......@@ -95,7 +95,7 @@ class TopologyComponent extends Component {
}else{
return "";
}
}
getIp2 = (d,v) => {
......@@ -106,7 +106,7 @@ class TopologyComponent extends Component {
}else{
return "";
}
}
// 获取线颜色
......@@ -275,7 +275,7 @@ class TopologyComponent extends Component {
},
new go.Binding('source','warnState',(v) => this.getWarnPic(v))
),
goObj(go.TextBlock,
{
alignment: new go.Spot(1, 0, 100 ,-1),
......@@ -396,7 +396,7 @@ class TopologyComponent extends Component {
),
goObj(go.Shape,
{
fromSpot: new go.Spot(0, 5, 2, -22),
toSpot: new go.Spot(0, 5, 2, -22)
},
......@@ -498,7 +498,7 @@ class TopologyComponent extends Component {
goObj(go.Placeholder)
) // end Adornment
}
)
);
......@@ -512,48 +512,60 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 200,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
)
),
goObj(go.Shape, 'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
)
)
);
this.diagram.linkTemplate =
goObj(go.Link,
{
selectionAdorned: true,
routing: go.Link.AvoidsNodes,
corner: 2,
curve: go.Link.JumpOver,
fromEndSegmentLength: 60, //设置箭头后线长度
toEndSegmentLength: 60, //设置箭头后线长度
},
goObj(go.Shape, { strokeWidth: 2 },
new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
)
);
......
......@@ -232,23 +232,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
{
width: 100,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
new go.Binding('text')
)
),
goObj(go.Shape, 'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
......
......@@ -329,18 +329,31 @@ class TopologyComponent extends Component {
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(
go.TextBlock, // group title
{
width: 100,
height: 24,
font: 'Bold 14px Sans-Serif',
stroke: 'white',
background: '#1c9ad2',
margin: 5,
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{
height: 24,
font: 'Bold 14px Sans-Serif',
textAlign: 'left',
margin: new go.Margin(0, 0, 0, 12),
verticalAlignment: go.Spot.Center,
alignment: go.Spot.TopLeft
},
new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(
go.Shape,
......@@ -348,7 +361,7 @@ class TopologyComponent extends Component {
{
name: 'SHAPE',
parameter1: 14,
fill: 'rgba(185,185,185,0.2)',
fill: 'white',
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment