修改拓扑图框顶部样式

src/view/bank/dynamicRing/TopologyComponent.js

@@ -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
+
+      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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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',
+         // 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)
       )
     );
 

src/view/bank/equipMonitor/TopologyComponent.js

@@ -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
+      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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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')
+         //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
         },

src/view/bank/financialCityLan/TopologyComponent.js

@@ -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
+      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',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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')
          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
         },

src/view/bank/netTopology/TopologyComponent.js

@@ -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
+      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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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')
+         //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
         },

src/view/bank/virtualCloudPlatform/TopologyComponent.js

@@ -512,23 +512,35 @@ class TopologyComponent extends Component {
         // selectionChanged: this.nodeSelectionChanged
       },
       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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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,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
         },

src/view/bizview/pams/TopologyComponent.js

@@ -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
+      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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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')
+
+        )
+      ),
       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
         },

src/view/bizview/selfSupport/TopologyComponent.js

@@ -329,18 +329,31 @@ class TopologyComponent extends Component {
       },
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
       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,
             font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
+            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
         },