Skip to content

A
AmosBankView
Commit b10c714d authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

修改拓扑图框顶部样式

parent abbc2778
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 111 deletions
src/view/bank/dynamicRing/TopologyComponent.js
View file @ b10c714d
...@@ -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(
width: 100, go.Panel,
height: 24, 'Auto',
font: 'Bold 14px Sans-Serif', { stretch: go.GraphObject.Horizontal },
stroke: 'white', // 定义画板的样式
background: '#1c9ad2', goObj(go.Shape, 'Rectangle', {
margin: 5, fill: '#E5E5E5',
textAlign: 'center', stroke: '#49ADDA', // node边框
verticalAlignment: go.Spot.Center strokeWidth: 1,
},
new go.Binding('text')), }),
goObj(go.Shape, 'Rectangle',
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', 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)
) )
); );
......
src/view/bank/equipMonitor/TopologyComponent.js
View file @ b10c714d
...@@ -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,
width: 100, 'Auto',
height: 24, { stretch: go.GraphObject.Horizontal },
font: 'Bold 14px Sans-Serif', // 定义画板的样式
stroke: 'white', goObj(go.Shape, 'Rectangle', {
background: '#1c9ad2', fill: '#E5E5E5',
margin: 5, stroke: '#49ADDA', // node边框
textAlign: 'center', strokeWidth: 1,
verticalAlignment: go.Spot.Center
}, }),
new go.Binding('text')),
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', 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
}, },
......
src/view/bank/financialCityLan/TopologyComponent.js
View file @ b10c714d
...@@ -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,
width: 100, 'Auto',
font: 'Bold 14px Sans-Serif', { stretch: go.GraphObject.Horizontal },
stroke: 'white', // 定义画板的样式
background: '#1c9ad2', goObj(go.Shape, 'Rectangle', {
margin: 5, fill: '#E5E5E5',
textAlign: 'center', stroke: '#49ADDA', // node边框
verticalAlignment: go.Spot.Center strokeWidth: 1,
},
//new go.Binding('text') }),
new go.Binding('height', 'text', (v) => this.setTitleHeight(v)),
new go.Binding('text')
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', 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
}, },
......
src/view/bank/netTopology/TopologyComponent.js
View file @ b10c714d
...@@ -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,
width: 100, 'Auto',
height: 24, { stretch: go.GraphObject.Horizontal },
font: 'Bold 14px Sans-Serif', // 定义画板的样式
stroke: 'white', goObj(go.Shape, 'Rectangle', {
background: '#1c9ad2', fill: '#E5E5E5',
margin: 5, stroke: '#49ADDA', // node边框
textAlign: 'center', strokeWidth: 1,
verticalAlignment: go.Spot.Center
}, }),
new go.Binding('text')),
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', 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
}, },
......
src/view/bank/virtualCloudPlatform/TopologyComponent.js
View file @ b10c714d
...@@ -24,7 +24,7 @@ class TopologyComponent extends Component { ...@@ -24,7 +24,7 @@ class TopologyComponent extends Component {
this.renderCanvas(); this.renderCanvas();
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const { topologyData } = this.props; const { topologyData } = this.props;
const { nodeData, linkData } = topologyData; const { nodeData, linkData } = topologyData;
...@@ -81,9 +81,9 @@ class TopologyComponent extends Component { ...@@ -81,9 +81,9 @@ class TopologyComponent extends Component {
this.showWarnHighlights(d, v); this.showWarnHighlights(d, v);
return d.text.split("#")[0]; return d.text.split("#")[0];
} }
return d.text.split("#")[0]; return d.text.split("#")[0];
} }
// 获取ip // 获取ip
...@@ -95,7 +95,7 @@ class TopologyComponent extends Component { ...@@ -95,7 +95,7 @@ class TopologyComponent extends Component {
}else{ }else{
return ""; return "";
} }
} }
getIp2 = (d,v) => { getIp2 = (d,v) => {
...@@ -106,7 +106,7 @@ class TopologyComponent extends Component { ...@@ -106,7 +106,7 @@ class TopologyComponent extends Component {
}else{ }else{
return ""; return "";
} }
} }
// 获取线颜色 // 获取线颜色
...@@ -275,7 +275,7 @@ class TopologyComponent extends Component { ...@@ -275,7 +275,7 @@ class TopologyComponent extends Component {
}, },
new go.Binding('source','warnState',(v) => this.getWarnPic(v)) new go.Binding('source','warnState',(v) => this.getWarnPic(v))
), ),
goObj(go.TextBlock, goObj(go.TextBlock,
{ {
alignment: new go.Spot(1, 0, 100 ,-1), alignment: new go.Spot(1, 0, 100 ,-1),
...@@ -396,7 +396,7 @@ class TopologyComponent extends Component { ...@@ -396,7 +396,7 @@ class TopologyComponent extends Component {
), ),
goObj(go.Shape, goObj(go.Shape,
{ {
fromSpot: new go.Spot(0, 5, 2, -22), fromSpot: new go.Spot(0, 5, 2, -22),
toSpot: new go.Spot(0, 5, 2, -22) toSpot: new go.Spot(0, 5, 2, -22)
}, },
...@@ -498,7 +498,7 @@ class TopologyComponent extends Component { ...@@ -498,7 +498,7 @@ class TopologyComponent extends Component {
goObj(go.Placeholder) goObj(go.Placeholder)
) // end Adornment ) // end Adornment
} }
) )
); );
...@@ -512,48 +512,60 @@ class TopologyComponent extends Component { ...@@ -512,48 +512,60 @@ 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,
width: 200, 'Auto',
height: 24, { stretch: go.GraphObject.Horizontal },
font: 'Bold 14px Sans-Serif', // 定义画板的样式
stroke: 'white', goObj(go.Shape, 'Rectangle', {
background: '#1c9ad2', fill: '#E5E5E5',
margin: 5, stroke: '#49ADDA', // node边框
textAlign: 'center', strokeWidth: 1
verticalAlignment: go.Spot.Center }),
},
new go.Binding('text')), 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', 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),
) )
); );
this.diagram.linkTemplate = this.diagram.linkTemplate =
goObj(go.Link, goObj(go.Link,
{ {
selectionAdorned: true, selectionAdorned: true,
routing: go.Link.AvoidsNodes, routing: go.Link.AvoidsNodes,
corner: 2, corner: 2,
curve: go.Link.JumpOver, curve: go.Link.JumpOver,
fromEndSegmentLength: 60, //设置箭头后线长度 fromEndSegmentLength: 60, //设置箭头后线长度
toEndSegmentLength: 60, //设置箭头后线长度 toEndSegmentLength: 60, //设置箭头后线长度
}, },
goObj(go.Shape, { strokeWidth: 2 }, goObj(go.Shape, { strokeWidth: 2 },
new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v)) new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
) )
); );
......
src/view/bizview/pams/TopologyComponent.js
View file @ b10c714d
...@@ -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,
width: 100, 'Auto',
height: 24, { stretch: go.GraphObject.Horizontal },
font: 'Bold 14px Sans-Serif', // 定义画板的样式
stroke: 'white', goObj(go.Shape, 'Rectangle', {
background: '#1c9ad2', fill: '#E5E5E5',
margin: 5, stroke: '#49ADDA', // node边框
textAlign: 'center', strokeWidth: 1,
verticalAlignment: go.Spot.Center
}, }),
new go.Binding('text')),
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', 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
}, },
......
src/view/bizview/selfSupport/TopologyComponent.js
View file @ b10c714d
...@@ -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.TextBlock, // group title go.Panel,
{ 'Auto',
width: 100, { stretch: go.GraphObject.Horizontal },
height: 24, // 定义画板的样式
font: 'Bold 14px Sans-Serif', goObj(go.Shape, 'Rectangle', {
stroke: 'white', fill: '#E5E5E5',
background: '#1c9ad2', stroke: '#49ADDA', // node边框
margin: 5, strokeWidth: 1,
textAlign: 'center',
verticalAlignment: go.Spot.Center }),
},
new go.Binding('text')
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( 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