Commit b10c714d authored by zhengjiangtao's avatar zhengjiangtao

修改拓扑图框顶部样式

parent abbc2778
...@@ -67,6 +67,12 @@ class TopologyComponent extends Component { ...@@ -67,6 +67,12 @@ class TopologyComponent extends Component {
} }
} }
//设置文字
setFontText = (v) => {
return v.text;
}
// 告警高亮 // 告警高亮
warnHighlights = (d,v) => { warnHighlights = (d,v) => {
if (d.warnState) { if (d.warnState) {
...@@ -277,7 +283,9 @@ class TopologyComponent extends Component { ...@@ -277,7 +283,9 @@ class TopologyComponent extends Component {
) )
); );
this.diagram.groupTemplate = goObj(go.Group, 'Vertical', this.diagram.groupTemplate = goObj(
go.Group,
'Vertical',
{ {
resizable: true, resizable: true,
locationObjectName: 'SHAPE', locationObjectName: 'SHAPE',
...@@ -287,27 +295,46 @@ class TopologyComponent extends Component { ...@@ -287,27 +295,46 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{ {
width: 100,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), // new go.Binding('text')
goObj(go.Shape, 'Rectangle', new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(
go.Shape,
'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 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 { ...@@ -533,23 +533,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{ {
width: 100,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -382,25 +382,40 @@ class TopologyComponent extends Component { ...@@ -382,25 +382,40 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{ {
width: 100,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
//new go.Binding('text') // new go.Binding('text')
new go.Binding('height', 'text', (v) => this.setTitleHeight(v)), new go.Binding('height', 'text', (v) => this.setTitleHeight(v)),
new go.Binding('text') new go.Binding('text')
)
), ),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -288,23 +288,38 @@ class TopologyComponent extends Component { ...@@ -288,23 +288,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{ {
width: 100,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -512,23 +512,35 @@ class TopologyComponent extends Component { ...@@ -512,23 +512,35 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1
}),
goObj(
go.TextBlock, // group title
{ {
width: 200,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -232,23 +232,38 @@ class TopologyComponent extends Component { ...@@ -232,23 +232,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title
{ {
width: 100,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -329,18 +329,31 @@ class TopologyComponent extends Component { ...@@ -329,18 +329,31 @@ class TopologyComponent extends Component {
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj( goObj(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
// 定义画板的样式
goObj(go.Shape, 'Rectangle', {
fill: '#E5E5E5',
stroke: '#49ADDA', // node边框
strokeWidth: 1,
}),
goObj(
go.TextBlock, // group title go.TextBlock, // group title
{ {
width: 100,
height: 24, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text') new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
), ),
goObj( goObj(
go.Shape, go.Shape,
...@@ -348,7 +361,7 @@ class TopologyComponent extends Component { ...@@ -348,7 +361,7 @@ class TopologyComponent extends Component {
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'white',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 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