线条样式修改

src/view/bank/equipMonitor/TopologyComponent.js

@@ -274,7 +274,7 @@ class TopologyComponent extends Component {
         ),
         goObj(go.Panel, 'Spot',
           goObj(go.Shape, 'Rectangle',
-          { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+          { fill: 'lightgreen', stroke: 'red', width: 1, height: 1 }),
           goObj(go.Picture,
             {
               margin: 0,
@@ -290,7 +290,7 @@ class TopologyComponent extends Component {
               fromSpot: new go.Spot(0, 0.5, -2, 0),
               toSpot: new go.Spot(0, 0.5, -2, 0)
             },
-          { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -17, -16) },
+          { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, -17, -16) },
             new go.Binding('portId', 'left_1')
           ),
           goObj(go.Shape,
@@ -298,7 +298,7 @@ class TopologyComponent extends Component {
               fromSpot: new go.Spot(0, 0.5, -2, 0),
               toSpot: new go.Spot(0, 0.5, -2, 0)
             },
-            { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -17, -10) },
+            { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, -17, -10) },
               new go.Binding('portId', 'left_2')
             ),
             goObj(go.Shape,
@@ -306,7 +306,7 @@ class TopologyComponent extends Component {
                 fromSpot: new go.Spot(0, 0.5, -2, 0),
                 toSpot: new go.Spot(0, 0.5, -2, 0)
               },
-              { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -17, -4) },
+              { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, -17, -4) },
                 new go.Binding('portId', 'left_3')
               ),
               goObj(go.Shape,
@@ -314,7 +314,7 @@ class TopologyComponent extends Component {
                   fromSpot: new go.Spot(0, 0.5, -2, 0),
                   toSpot: new go.Spot(0, 0.5, -2, 0)
                 },
-                { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -17, 2) },
+                { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, -17, 2) },
                   new go.Binding('portId', 'left_4')
                 ),
                 goObj(go.Shape,
@@ -322,7 +322,7 @@ class TopologyComponent extends Component {
                     fromSpot: new go.Spot(0, 0.5, -2, 0),
                     toSpot: new go.Spot(0, 0.5, -2, 0)
                   },
-                  { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -17, 8) },
+                  { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, -17, 8) },
                     new go.Binding('portId', 'left_5')
                   ),
           goObj(go.Shape,
@@ -330,7 +330,7 @@ class TopologyComponent extends Component {
               fromSpot: new go.Spot(1, 0.5, 2, 0),
               toSpot: new go.Spot(1, 0.5, 2, 0)
             },
-          { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, 14, -16) },
+          { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, 14, -16) },
           new go.Binding('portId', 'right_1')
           ),
           goObj(go.Shape,
@@ -338,7 +338,7 @@ class TopologyComponent extends Component {
               fromSpot: new go.Spot(1, 0.5, 2, 0),
               toSpot: new go.Spot(1, 0.5, 2, 0)
             },
-            { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, 14, -10) },
+            { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, 14, -10) },
             new go.Binding('portId', 'right_2')
             ),
             goObj(go.Shape,
@@ -346,7 +346,7 @@ class TopologyComponent extends Component {
                 fromSpot: new go.Spot(1, 0.5, 2, 0),
                 toSpot: new go.Spot(1, 0.5, 2, 0)
               },
-              { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, 14, -4) },
+              { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, 14, -4) },
               new go.Binding('portId', 'right_3')
               ),
               goObj(go.Shape,
@@ -354,7 +354,7 @@ class TopologyComponent extends Component {
                   fromSpot: new go.Spot(1, 0.5, 2, 0),
                   toSpot: new go.Spot(1, 0.5, 2, 0)
                 },
-                { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, 14, 2) },
+                { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, 14, 2) },
                 new go.Binding('portId', 'right_4')
                 ),
                 goObj(go.Shape,
@@ -362,7 +362,7 @@ class TopologyComponent extends Component {
                     fromSpot: new go.Spot(1, 0.5, 2, 0),
                     toSpot: new go.Spot(1, 0.5, 2, 0)
                   },
-                  { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, 14, 8) },
+                  { width: 6, height: 6, portId: '',fill: 'red',stroke: null,alignment: new go.Spot(1, 1, 14, 8) },
                   new go.Binding('portId', 'right_5')
                 )
         ),
@@ -560,8 +560,8 @@ class TopologyComponent extends Component {
     this.diagram.linkTemplate =
       goObj(go.Link,
         {
-          fromEndSegmentLength: 40, //设置箭头后线长度
-          toEndSegmentLength: 40, //设置箭头后线长度
+          fromEndSegmentLength: 20, //设置箭头后线长度
+          toEndSegmentLength: 20, //设置箭头后线长度
           adjusting: go.Link.Stretch,
 		      curve: go.Link.JumpGap,
           corner: 2

src/view/bank/virtualCloudPlatform/TopologyComponent.js

@@ -24,13 +24,18 @@ class TopologyComponent extends Component {
     this.renderCanvas();
   }
 
+ 
   componentDidUpdate(prevProps, prevState) {
     const { topologyData } = this.props;
     const { nodeData, linkData } = topologyData;
     if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
-      this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
-      this.initTop = 0;
-      this.initLeft = 0;
+      this.diagram.model =  goObj(go.GraphLinksModel,
+        {
+          linkFromPortIdProperty: 'fromPort',  // required information:
+          linkToPortIdProperty: 'toPort',      // identifies data property names
+          nodeDataArray: nodeData || [],
+          linkDataArray: linkData || []
+        });
     }
   }
 
@@ -270,6 +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),
@@ -277,7 +283,7 @@ class TopologyComponent extends Component {
               font: '15px sans-serif'
             },
             new go.Binding('text', 'warnMessage')
-          ),
+          )
         ),
         goObj(go.Picture,
           {
@@ -317,6 +323,183 @@ class TopologyComponent extends Component {
       )
     );
 
+    this.diagram.nodeTemplateMap.add('Physical',
+    goObj(go.Node, 'Vertical',
+      {
+        locationSpot: go.Spot.Center,
+        locationObjectName: 'ICON',
+        selectionObjectName: 'ICON',
+        // dragComputation: this.stayInFixedArea
+        selectionChanged: this.nodeSelectionChanged,
+        toolTip: myToolTip
+      },
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      // goObj(go.Panel,'Spot',
+      //   goObj(go.Shape, 'Rectangle',
+      //   { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+      //   goObj(go.Picture,
+      //     {
+      //       width: 65,
+      //       height: 45,
+      //       alignment: new go.Spot(1, 0, 100 ,0 )
+      //     },
+      //     new go.Binding('source','warnState',(v) => this.getWarnPic(v))
+      //   ),
+      //   goObj(go.TextBlock,
+      //     {
+      //       alignment: new go.Spot(1, 0, 100 ,-1),
+      //       stroke: 'white',
+      //       font: '15px sans-serif'
+      //     },
+      //     new go.Binding('text', 'warnMessage')
+      //   ),
+      // ),
+      goObj(go.Panel, 'Spot',
+        { fromSpot: go.Spot.RightSide,  // coming out from right side
+          toSpot: go.Spot.LeftSide },   // going into at left side
+        goObj(go.Shape, 'Rectangle',
+        { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+        goObj(go.Picture,
+          {
+            margin: 0,
+            name: 'ICON',
+            width: 150,
+            height: 150,
+            cursor: 'pointer'
+          },
+          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+        ),
+            //绑定点开始
+            goObj(go.Shape,
+              {
+                fromSpot: new go.Spot(0, 0.5, -2, 0),
+                toSpot: new go.Spot(0, 0.5, -2, 0)
+              },
+            { width: 6, height: 6, portId: '', fill: null,stroke: null,toArrow: "standard",alignment: new go.Spot(1, 1, -53, -5) },
+              new go.Binding('portId', 'left_1')
+            ),
+            goObj(go.Shape,
+              {
+                fromSpot: new go.Spot(0, 0.5, -2, 0),
+                toSpot: new go.Spot(0, 0.5, -2, 0)
+              },
+              { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -59, 22) },
+                new go.Binding('portId', 'left_2')
+              ),
+              goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(0, 0.5, -2, 0),
+                  toSpot: new go.Spot(0, 0.5, -2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: null ,stroke: null,alignment: new go.Spot(1, 1, -43, 42) },
+                  new go.Binding('portId', 'left_3')
+                ),
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    toSpot: new go.Spot(0, 0.5, -2, 0)
+                  },
+                  { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -25, 49) },
+                    new go.Binding('portId', 'left_4')
+                ),
+
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    toSpot: new go.Spot(0, 0.5, -2, 0)
+                  },
+                  { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -2, 49) },
+                    new go.Binding('portId', 'left_5')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                      toSpot: new go.Spot(0, 0.5, -2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill:null,stroke: null,alignment: new go.Spot(1, 1, 18, 49) },
+                      new go.Binding('portId', 'left_6')
+                    ),
+                 goObj(go.Shape,
+                   {
+                     fromSpot: new go.Spot(0, 0.5, -2, 0),
+                     toSpot: new go.Spot(0, 0.5, -2, 0)
+                   },
+                   { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 46, 50) },
+                     new go.Binding('portId', 'right_1')
+                   ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                      toSpot: new go.Spot(0, 0.5, -2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 60, 25) },
+                      new go.Binding('portId', 'right_2')
+                    ),
+              goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(0, 0.5, -2, 0),
+                  toSpot: new go.Spot(0, 0.5, -2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: 'yellow',toArrow: "BackwardTriangle",stroke: null,alignment: new go.Spot(1, 1, 63, 5) },
+                  new go.Binding('portId', 'right_3')
+                ),
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    toSpot: new go.Spot(0, 0.5, -2, 0)
+                  },
+                  { width: 6, height: 6, portId: '', fill: 'blue',toArrow: "standard",stroke: null,alignment: new go.Spot(1, 1, 45, -15) },
+                    new go.Binding('portId', 'right_4')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                      toSpot: new go.Spot(0, 0.5, -2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill: 'red',toArrow: "standard",stroke: null,alignment: new go.Spot(1, 1, 30, -40) },
+                      new go.Binding('portId', 'right_5')
+                    ),
+                    goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(0, 0.5, -2, 0),
+                  toSpot: new go.Spot(0, 0.5, -2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 15, -53) },
+                  new go.Binding('portId', 'right_6')
+                ),
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    toSpot: new go.Spot(0, 0.5, -2, 0)
+                  },
+                  { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -1, -60) },
+                    new go.Binding('portId', 'right_7')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                      toSpot: new go.Spot(0, 0.5, -2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -35, -30) },
+                      new go.Binding('portId', 'right_8')
+                    ),
+              //绑定点结束
+      ),
+      goObj(go.TextBlock, '无',
+        { margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
+        new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
+        ),
+      {
+        selectionAdornmentTemplate:
+            goObj(go.Adornment, 'Auto',
+              goObj(go.Shape,
+              { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+              goObj(go.Placeholder)
+            )  // end Adornment
+      }
+    )
+  );
+
     this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
       {
         resizable: true,
@@ -347,27 +530,40 @@ class TopologyComponent extends Component {
           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,
-          layerName: "Foreground",
-          reshapable: true,
+        
           routing: go.Link.AvoidsNodes,
-          corner: 5,
-          curve: go.Link.JumpOver
+         
+          corner: 2,
+          curve: go.Link.JumpOver,
+          fromEndSegmentLength: 20, //设置箭头后线长度
+          toEndSegmentLength: 20, //设置箭头后线长度
+          
         },
        
-        goObj(go.Shape, { strokeWidth: 2 },
+        goObj(go.Shape, { toArrow: "standard", stroke: null, fill: "gray"},
        
         new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
         )
       );
-    this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
+      this.diagram.model =  goObj(go.GraphLinksModel,
+        {
+          linkFromPortIdProperty: 'fromPort',  // required information:
+          linkToPortIdProperty: 'toPort',      // identifies data property names
+          nodeDataArray: nodeData || [],
+          linkDataArray: linkData || []
+        });
   }
 
   render() {

src/view/bank/virtualCloudPlatform/index.js

@@ -314,6 +314,27 @@ class VirtualCloudPlatform extends Component {
     this.initTopologyData(selectedKeys[0], '');
   }
 
+  handetopologyData =(topologyData) =>{
+    
+    let  pointdatas = topologyData.nodeData || [];
+    let  newNodeData = [];
+    console.log(pointdatas)
+    pointdatas.map(e => {
+      if(e && e.ports && null !== e.ports){
+        var jsonObj = JSON.parse(e.ports);
+        let item = {...e, ...jsonObj};
+        newNodeData.push(item)
+      }else if(e){
+        let item = e;
+        newNodeData.push(item)
+      }
+    })
+
+    topologyData.nodeData = newNodeData;
+ 
+    return topologyData;
+  }
+
 
   render() {
     const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
@@ -328,7 +349,9 @@ class VirtualCloudPlatform extends Component {
         this.mapView = true;
       }
     }
-    const { topologyData } = this.state;
+    debugger
+    let { topologyData } = this.state;
+    let newtopologyData=  this.handetopologyData(topologyData)
     const { tableData, isTableDisplay, pHeight, activeView } = this.state;
     console.log(topologyData);
     return (
@@ -377,7 +400,7 @@ class VirtualCloudPlatform extends Component {
               </div>
               <div className="net-topo-content">
                 <TopologyComponent
-                  topologyData={topologyData}
+                  topologyData={newtopologyData}
                   //nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
                   nodeSelectionChanged={this.nodeSelectionChanged}
                   nodeChange={this.nodeChange}