更改自建系统样式

src/styles/view/biz/selfsupport/index.scss

@@ -171,7 +171,7 @@
     width: calc(100% - 800px);
     height: 100%;
 
-    
+
 
     .paslogy-content {
       // display: flex;
@@ -211,20 +211,20 @@
         opacity: 1;
         margin-right: 42px;
         opacity:1;
-          
+
       }
   }
 
-      
+
 
       .net-topo-content {
         height: calc(100% - 42px);
-  
+
         .topology-net {
           canvas {
             outline: none;
           }
-  
+
           .tooltip-content {
             width: 200px;
             background: #345fa6;
@@ -232,18 +232,18 @@
             opacity: 1;
             border-radius: 7px;
             padding: 22px 24px;
-  
+
             .tooltip-item {
               height: 24px;
               line-height: 24px;
               font-size: 13px;
               font-weight: bold;
               color: white;
-  
+
               .item-name {
                 display: inline-block;
               }
-  
+
               .item-value {
                 display: inline-block;
                 padding-left: 10px;
@@ -305,7 +305,7 @@
 
   .right-content {
     height: 100%;
-  
+
 
     .devive-title {
       height: 40px;
@@ -325,45 +325,46 @@
       .ant-table-wrapper {
         padding: 10px;
         width: 500px;
-  
+
         .ant-spin-nested-loading {
           border: 1px solid $core-border-color;
           border-bottom: 0;
         }
       }
-  
+
       .ant-table {
         border-radius: 0;
       }
-  
+
       .table-bar {
         .ant-table-pagination {
           float: right;
           display: inline;
+          width: 100%;
         }
       }
       .ant-table-title {
         display: none;
       }
-  
+
       .ant-table-content {
         border-color: $core-border-color;
-  
+
         .ant-table-header {
           & table {
             // margin-right: -17px;
             border: $core-border-color;
           }
         }
-  
+
         .ant-table-body {
           & table {
             border: $core-border-color;
           }
         }
       }
-  
-  
+
+
       .ant-table-thead {
         tr {
           th {
@@ -373,7 +374,7 @@
           }
         }
       }
-  
+
       .ant-table-body {
         tr {
           td {
@@ -383,16 +384,16 @@
           }
         }
       }
-  
+
       .ant-table-placeholder {
         color: $biz-table-font-color;
         background: $content-color;//rgba(40, 40, 40, 1);
       }
-  
+
       .highlight-row {
         background: #ecf6fd;
       }
-  
+
       .ant-pagination-item {
         height: 25px;
         min-width: 25px;
@@ -400,16 +401,16 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         a {
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-total-text {
         color: $biz-table-font-color;
       }
-  
+
       .ant-pagination-prev {
         height: 25px;
         min-width: 25px;
@@ -417,14 +418,14 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         ::after {
           height: 25px;
           line-height: 25px;
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-item-active {
         height: 25px;
         min-width: 25px;
@@ -432,12 +433,12 @@
         line-height: 25px;
         background: $core-color;//#151515;
         border-radius: 6px;
-  
+
         a {
           color: white;
         }
       }
-  
+
       .ant-pagination-next {
         height: 25px;
         min-width: 25px;
@@ -445,23 +446,25 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         ::after {
           height: 25px;
           line-height: 25px;
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-options {
-        margin-top: 5px;
-  
+        margin-top: -12%;
+        margin-left: 88%;
+
         .ant-select-selection {
           height: 25px;
           color: $biz-table-font-color;
           background: $biz-title-color;
           border-color: $core-border-color;
-  
+
+
           .ant-select-arrow {
             color: $biz-table-font-color;
           }
@@ -474,5 +477,5 @@
     display: none;
   }
 
-  
+
 }

src/view/bizview/selfSupport/TopologyComponent.js

@@ -9,7 +9,6 @@ const goObj = go.GraphObject.make;
 const deviceSource = '/src/assets/bizView/selfsupport';
 
 class TopologyComponent extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -27,7 +26,7 @@ class TopologyComponent extends Component {
   componentDidUpdate(prevProps, prevState) {
     const { topologyData } = this.props;
     const { nodeData, linkData } = topologyData;
-    if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
+    if (!deepEqual(prevProps.topologyData, this.props.topologyData)) {
       this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
       this.initTop = 0;
       this.initLeft = 0;
@@ -37,52 +36,54 @@ class TopologyComponent extends Component {
   // this function is the Node.dragComputation, to limit the movement of the parts
   stayInFixedArea = (part, pt, gridpt) => {
     let diagram = part.diagram;
-    if (diagram === null) {return pt;}
-		// compute the document area without padding
+    if (diagram === null) {
+      return pt;
+    }
+    // compute the document area without padding
     let v = diagram.documentBounds.copy();
     v.subtractMargin(diagram.padding);
-		// get the bounds of the part being dragged
+    // get the bounds of the part being dragged
     let b = part.actualBounds;
     let loc = part.location;
-		// now limit the location appropriately
+    // now limit the location appropriately
     let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
     let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
     return new go.Point(x, y);
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (node) => {
+  nodeSelectionChanged = node => {
     this.props.nodeSelectionChanged(node);
-  }
+  };
 
   // 设备资源图片
-  getDeviceSource = (v) => {
+  getDeviceSource = v => {
     return `${deviceSource}/${v}.png`;
-  }
+  };
 
   // 告警图片
-  getWarnPic = (v) => {
+  getWarnPic = v => {
     if (v) {
       return '/src/assets/bizView/netTopology/alarm.png';
     }
-  }
+  };
 
   // 告警高亮
-  warnHighlights = (d,v) => {
+  warnHighlights = (d, v) => {
     if (d.warnState) {
       this.showWarnHighlights(d, v);
       return d.text;
     }
     return d.text;
-  }
+  };
 
   // 获取线颜色
-  getLinkColor = (v) => {
+  getLinkColor = v => {
     if (v) {
       return '#FF0000';
     }
     return '#00FFFF';
-  }
+  };
 
   showWarnHighlights = (d, v) => {
     const oldDom = this[d.key];
@@ -92,19 +93,19 @@ class TopologyComponent extends Component {
       oldDom.style.width = '100px';
       oldDom.style.height = '100px';
       oldDom.style.left = `${pos.x + 18}px`;
-      oldDom.style.top  = `${pos.y + 20}px`;
+      oldDom.style.top = `${pos.y + 20}px`;
     } else {
       let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
       let customBox = document.createElement('div');
       customBox.style.left = `${pos.x + 10}px`;
-      customBox.style.top  = `${pos.y + 26}px`;
+      customBox.style.top = `${pos.y + 26}px`;
       customBox.style.position = 'absolute';
       customBox.style.zIndex = 1;
       customBox.style.width = '100px';
       customBox.style.height = '100px';
       customBox.style.backgroundPosition = 'center';
       customBox.id = d.key;
-      customBox.setAttribute('class','amos-help-tip-pulse-second');
+      customBox.setAttribute('class', 'amos-help-tip-pulse-second');
       this.diagram.div.appendChild(customBox);
     }
   };
@@ -113,32 +114,38 @@ class TopologyComponent extends Component {
   updateTopo = () => {
     const { nodeDataArray } = this.updateTopologyData;
     let pos;
-    nodeDataArray.filter(item => item.warnState).map(item => {
-      pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
-      this[item.key].style.left = `${pos.x + 18}px`;
-      this[item.key].style.top  = `${pos.y + 20}px`;
-    });
-  }
+    nodeDataArray
+      .filter(item => item.warnState)
+      .map(item => {
+        pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
+        this[item.key].style.left = `${pos.x + 18}px`;
+        this[item.key].style.top = `${pos.y + 20}px`;
+      });
+  };
 
-  getNodeDetail = (id) => {
+  getNodeDetail = id => {
     nodeDetailTopoAction(id).then(data => {
       this.setState({
         detailData: data
       });
     });
-  }
+  };
 
   renderDetail = () => {
     const { detailData } = this.state;
-    return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
-      {detailData.map(item => {
-        return (<div key={item.name} className="tooltip-item">
-          <div className="item-name">{item.name}: </div>
-          <div className="item-value">{item.value}</div>
-        </div>);
-      })}
-    </div>);
-  }
+    return (
+      <div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
+        {detailData.map(item => {
+          return (
+            <div key={item.name} className="tooltip-item">
+              <div className="item-name">{item.name}: </div>
+              <div className="item-value">{item.value}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
 
   // 提示框
   showToolTip = (obj, diagram, tool) => {
@@ -148,12 +155,18 @@ class TopologyComponent extends Component {
     toolTipDIV.style.top = `${pt.y}px`;
     toolTipDIV.style.display = 'block';
     this.getNodeDetail(obj.data.id);
-  }
+  };
+
+  //设置椭圆宽度
+  setEllipseWidth = v => {
+    let width = v === '西安中心' ? 500 : 300;
+    return width;
+  };
 
   hideToolTip = (diagram, tool) => {
     let toolTipDIV = document.getElementById('toolTipDIV');
     toolTipDIV.style.display = 'none';
-  }
+  };
 
   renderCanvas = () => {
     const { topologyData } = this.props;
@@ -162,66 +175,91 @@ class TopologyComponent extends Component {
       show: this.showToolTip,
       hide: this.hideToolTip
     });
-    this.customEditor = goObj(go.HTMLInfo,{
+    this.customEditor = goObj(go.HTMLInfo, {
       show: this.showWarnHighlights
     });
     this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
       // allowHorizontalScroll: false,  // disallow scrolling or panning
       // allowVerticalScroll: false,
-      allowZoom: false,              // disallow zooming
+      allowZoom: false, // disallow zooming
       initialContentAlignment: go.Spot.TopLeft,
       initialPosition: new go.Point(0, 0),
       'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
       'animationManager.isEnabled': false, // 过渡动画
       'textEditingTool.defaultTextEditor': this.customEditor,
       // fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
-      ModelChanged: (e) => {     // just for demonstration purposes,
-        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
+      ModelChanged: e => {
+        // just for demonstration purposes,
+        if (e.isTransactionFinished) {
+          // show the model data in the page's TextArea
           // console.log(e.model.toJson(), 'model');
           this.updateTopologyData = JSON.parse(e.model.toJson());
           this.props.nodeChange(e);
         }
       },
-      SelectionMoved: (e) => {
-        setTimeout(()=> {
+      SelectionMoved: e => {
+        setTimeout(() => {
           this.updateTopo();
-        },0);
+        }, 0);
       },
       ViewportBoundsChanged: () => {
-        setTimeout(()=> {
+        setTimeout(() => {
           this.updateTopo();
-        },0);
+        }, 0);
       }
     });
 
-
-    this.diagram.nodeTemplateMap.add('Circle',
-      goObj(go.Node, 'Vertical',
+    this.diagram.nodeTemplateMap.add(
+      'Circle',
+      goObj(
+        go.Node,
+        'Vertical',
         {
           selectionObjectName: 'ICON',
           locationObjectName: 'ICON'
         },
         new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-        goObj(go.Panel, 'Auto',
-          goObj(go.Shape, 'Circle', { name: 'ICON',portId: '',
-            width: 22, height: 22, strokeWidth: 0,fill: '#009dd9' },
-            ),
-        ),
-      goObj(go.TextBlock,
-        { margin: 15,cursor: 'pointer',font: '15px sans-serif' },
-        new go.Binding('text', 'text' )),
+        goObj(go.Panel, 'Auto', goObj(go.Shape, 'Circle', { name: 'ICON', portId: '', width: 22, height: 22, strokeWidth: 0, fill: '#009dd9' })),
+        goObj(go.TextBlock, { margin: 15, cursor: 'pointer', font: '15px sans-serif' }, new go.Binding('text', 'text')),
         {
-          selectionAdornmentTemplate:
-              goObj(go.Adornment, 'Auto',
-                goObj(go.Shape, 'Circle',
-                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
-                goObj(go.Placeholder)
-              )  // end Adornment
-        },
-    ));
+          selectionAdornmentTemplate: goObj(
+            go.Adornment,
+            'Auto',
+            goObj(go.Shape, 'Circle', { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+            goObj(go.Placeholder)
+          ) // end Adornment
+        }
+      )
+    );
 
-    this.diagram.nodeTemplateMap.add('Picture',
-      goObj(go.Node, 'Vertical',
+    this.diagram.nodeTemplateMap.add(
+      'Shape',
+      goObj(
+        go.Node,
+        'Vertical',
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(
+          go.Shape,
+          'Rectangle',
+          {
+            name: 'SHAPE',
+            fill: '#5BE3FF',
+            stroke: '#5BE3FF',
+            strokeWidth: 1,
+            width: 500,
+            height: 24
+          },
+          new go.Binding('width', 'text', v => this.setEllipseWidth(v))
+        ),
+        goObj(go.TextBlock, '无', { textAlign: 'left', margin: -25, stroke: '#fff', font: 'bold 18px Microsoft YaHei UI' }, new go.Binding('text'))
+      )
+    );
+
+    this.diagram.nodeTemplateMap.add(
+      'Picture',
+      goObj(
+        go.Node,
+        'Vertical',
         {
           locationSpot: go.Spot.Center,
           locationObjectName: 'ICON',
@@ -231,27 +269,31 @@ class TopologyComponent extends Component {
           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,
+        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 )
+              alignment: new go.Spot(1, 0, 100, 0)
             },
-            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),
               stroke: 'white',
               font: '15px sans-serif'
             },
             new go.Binding('text', 'warnMessage')
-          ),
+          )
         ),
-        goObj(go.Picture,
+        goObj(
+          go.Picture,
           {
             margin: 0,
             name: 'ICON',
@@ -260,24 +302,23 @@ class TopologyComponent extends Component {
             cursor: 'pointer',
             portId: ''
           },
-          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+          new go.Binding('source', 'source', v => this.getDeviceSource(v))
         ),
-        goObj(go.TextBlock, '无',
+        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)),
-          ),
+          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
+          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',
+    this.diagram.groupTemplate = goObj(
+      go.Group,
+      'Vertical',
       {
         resizable: true,
         locationObjectName: 'SHAPE',
@@ -287,7 +328,8 @@ 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.TextBlock, // group title
         {
           width: 100,
           height: 24,
@@ -298,8 +340,11 @@ class TopologyComponent extends Component {
           textAlign: 'center',
           verticalAlignment: go.Spot.Center
         },
-      new go.Binding('text')),
-      goObj(go.Shape, 'Rectangle',
+        new go.Binding('text')
+      ),
+      goObj(
+        go.Shape,
+        'Rectangle',
         {
           name: 'SHAPE',
           parameter1: 14,
@@ -307,27 +352,24 @@ class TopologyComponent extends Component {
           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)
       )
     );
 
-    this.diagram.linkTemplate =
-      goObj(go.Link,
-        goObj(go.Shape, { strokeWidth: 3 },
-        new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
-        )
-      );
+    this.diagram.linkTemplate = goObj(go.Link, goObj(go.Shape, { strokeWidth: 3 }, new go.Binding('stroke', 'warnState', v => this.getLinkColor(v))));
     this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
-  }
+  };
 
   render() {
-    const { className,style, topologyData } = this.props;
+    const { className, style, topologyData } = this.props;
     const { nodeData = [] } = topologyData || {};
     return (
       <div ref="goJsDiv" style={style} className={classnames('topology-net', className)}>
-        {
-          nodeData.filter(e => e.warnState).map(e => <div className="amos-help-tip-pulse-second warn-node" ref={node => this[e.key] = node} key={e.key} id={e.key} />)
-        }
+        {nodeData
+          .filter(e => e.warnState)
+          .map(e => (
+            <div className="amos-help-tip-pulse-second warn-node" ref={node => (this[e.key] = node)} key={e.key} id={e.key} />
+          ))}
         {nodeData.length > 0 && this.renderDetail()}
       </div>
     );

src/view/bizview/selfSupport/index.js

@@ -11,7 +11,7 @@ import AmosGridTable from './../../component/table/table/AmosGridTable';
 import SysWsURL from './../../../consts/wsUrlConsts';
 import { getTypeBySystem } from './../../bank/financialCityLan/conf';
 
-const checkListColumns = (self) => {
+const checkListColumns = self => {
   return [
     {
       title: '时间',
@@ -26,9 +26,10 @@ const checkListColumns = (self) => {
         } else {
           font.innerText = text;
         }
-        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
       }
-    }, {
+    },
+    {
       title: '设备名称',
       dataIndex: 'name',
       key: 'name',
@@ -41,9 +42,10 @@ const checkListColumns = (self) => {
         } else {
           font.innerText = text;
         }
-        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
       }
-    }, {
+    },
+    {
       title: 'ping结果',
       dataIndex: 'deviceStatus',
       key: 'deviceStatus',
@@ -61,20 +63,18 @@ const checkListColumns = (self) => {
           font.style.color = 'red';
           p.append(font);
         }
-        return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
       }
     }
   ];
 };
 
-
 //偏移
 const offsetHeight = 110;
 const defaultHeight = 450;
 const type = getTypeBySystem('SelfSupport');
 
 class SelfSupport extends Component {
-
   constructor(props) {
     super(props);
     this.pageConfig = {
@@ -112,16 +112,14 @@ class SelfSupport extends Component {
     this.updateTopologyData = {};
     this.mapView = true;
   }
-  componentWillMount() {
-
-  }
+  componentWillMount() {}
 
   // 数据初始化
   // eslint-disable-next-line react/sort-comp
   initData = () => {
     let expandedKeysData = [];
     getTopoTreeByTypeAction(type).then(data => {
-      if(data.length > 0){
+      if (data.length > 0) {
         data.map(item => {
           expandedKeysData.push(item.id);
         });
@@ -142,9 +140,8 @@ class SelfSupport extends Component {
           pHeight: this.getPanelHeight()
         });
       }
-
     });
-  }
+  };
 
   componentDidMount() {
     this.initData();
@@ -156,11 +153,9 @@ class SelfSupport extends Component {
     return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
   };
 
-
-
   // 拓扑图数据初始化
   initTopologyData = (id, value = '') => {
-    getNodesByTypeAndTreeIdAction(type,id).then(data => {
+    getNodesByTypeAndTreeIdAction(type, id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
       }
@@ -171,25 +166,22 @@ class SelfSupport extends Component {
       });
     });
 
-    let tatableDataXianshi =this.state.tableDataXianshi;
-    if(true === tatableDataXianshi){
+    let tatableDataXianshi = this.state.tableDataXianshi;
+    if (true === tatableDataXianshi) {
       getDeivceListAction(0, 10, null).then(data => {
         // console.log('表格刷新成功!');
         this.setState({ tableData: data.content, totalCount: data.totalElements });
       });
     }
-
-  }
-
+  };
 
   /**
-* 获取表格所选则的行数据
-*/
+   * 获取表格所选则的行数据
+   */
   getSelectedRows = (selectedRows, selectedRowKeys) => {
     this.setState({ selectedRows, selectedRowKeys });
   };
 
-
   // 树选择
   onSelect = (selectedKeys, e) => {
     if (selectedKeys.length && !e.node.props.parent) {
@@ -199,45 +191,42 @@ class SelfSupport extends Component {
         selectedKeys
       });
     }
-  }
+  };
 
   // 树展开
-  onExpand = (expandedKeys) => {
+  onExpand = expandedKeys => {
     this.setState({
       expandedKeys,
       autoExpandParent: false
     });
   };
 
-
   queryEquipPage = () => {
     let tableDataXianshi = this.state.tableDataXianshi;
-    if (true === tableDataXianshi ){
+    if (true === tableDataXianshi) {
       let pageConfig = this.pageConfig;
       let pageNumber = pageConfig.pageNumber - 1;
       let pageSize = pageConfig.pageSize;
       getDeivceListAction(pageNumber, pageSize, null).then(data => {
-
         this.setState({ tableData: data.content, totalCount: data.totalElements });
-
       });
     } else {
-      this.setState({ tableData:[], totalCount: 0 });
+      this.setState({ tableData: [], totalCount: 0 });
     }
-
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (e) => {
+  nodeSelectionChanged = e => {
     // console.log('e',e);
-    if (e.isSelected) { }
-  }
+    if (e.isSelected) {
+    }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
@@ -248,14 +237,14 @@ class SelfSupport extends Component {
       nodeData: nodeDataArray,
       linkData: linkDataArray
     };
-    saveNodesByTypeUrlAction(type,params).then(data => {
+    saveNodesByTypeUrlAction(type, params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   /**
-  * 分页设置参数
-  */
+   * 分页设置参数
+   */
   setPageConfig = ({ pageSize, current }) => {
     if (pageSize !== undefined) {
       this.pageConfig.pageSize = pageSize;
@@ -265,8 +254,8 @@ class SelfSupport extends Component {
   };
 
   /**
-* 获取表格刷新方法
-*/
+   * 获取表格刷新方法
+   */
   reload = r => {
     this.setState(
       {
@@ -283,10 +272,10 @@ class SelfSupport extends Component {
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys[0], 'refresh');
-  }
+  };
 
   // 视图切换
-  toggleView = (value) => {
+  toggleView = value => {
     if (value === 'left') {
       this.setState({
         isTreeDisplay: true,
@@ -304,14 +293,13 @@ class SelfSupport extends Component {
     //拓扑图刷新
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys[0], '');
-  }
+  };
 
   //webSocket 接收消息
-  handleData = (data) => {
+  handleData = data => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys[0], '');
-  }
-
+  };
 
   render() {
     const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
@@ -331,13 +319,7 @@ class SelfSupport extends Component {
     console.log(topologyData);
     return (
       <div className="self-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.selfURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.selfURI} onMessage={this.handleData} reconnect debug />
         <div className="self-header">
           <div className="self-view">
             <div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
@@ -357,27 +339,20 @@ class SelfSupport extends Component {
           </div>
         </div>
         <div className="self-content">
-          {<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
-
-            <TreeComponent
-              treeData={treeData}
-              //treeData={moniTreeData}
-              selectedKeys={selectedKeys}
-              expandedKeys={expandedKeys}
-              // onSelect={this.onSelect}
-              onExpand={this.onExpand}
-            />
-          </div>}
+          {
+            <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
+              <TreeComponent
+                treeData={treeData}
+                //treeData={moniTreeData}
+                selectedKeys={selectedKeys}
+                expandedKeys={expandedKeys}
+                // onSelect={this.onSelect}
+                onExpand={this.onExpand}
+              />
+            </div>
+          }
           <div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
             <div className="paslogy-content">
-              <div className="middle-content-div">
-                <div className="content-left">
-                  <div className="box">西安中心</div>
-                </div>
-                <div className="content-right">
-                  <div className="box">咸阳中心</div>
-                </div>
-              </div>
               <div className="net-topo-content">
                 <TopologyComponent
                   topologyData={topologyData}
@@ -389,13 +364,9 @@ class SelfSupport extends Component {
             </div>
           </div>
 
-
           <div className={classnames({ 'right-content': isTableDisplay, 'right-content-close': !isTableDisplay })}>
-            <div className="devive-title">
-              日志
-            </div>
-            <div className="device-lists" ref={node => this.tableNode = node}>
-
+            <div className="devive-title">日志</div>
+            <div className="device-lists" ref={node => (this.tableNode = node)}>
               <AmosGridTable
                 columns={checkListColumns(this)}
                 callBack={this.reload}
@@ -421,8 +392,6 @@ class SelfSupport extends Component {
   }
 }
 
-SelfSupport.propTypes = {
-
-};
+SelfSupport.propTypes = {};
 
 export default SelfSupport;