增加动环监控和网络拓扑图视图切换

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

@@ -2,6 +2,69 @@
   height: 100%;
   display: flex;
 
+  .view-header {
+    height: 42px;
+    line-height: 42px;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    z-index: 1;
+    position: absolute;
+    width: 108%;
+  }
+
+  .view-header-close {
+    height: 42px;
+    line-height: 42px;
+    background: #f3f3f3;
+    /* border: 1px solid #eaeaea; */
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    position: relative;
+    z-index: 5;
+    width: 270%;
+    /* left: 30%; */
+    /* margin-left: 10px; */
+    /* float: left; */
+    top: 2px;
+  }
+
+  .image-sytle {
+    height: 20px;
+  }
+
+  .left-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+
+  .right-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
   .left-content {
     width: 300px;
     position: relative;
@@ -15,7 +78,7 @@
         height: 42px;
         line-height: 42px;
         background: #f3f3f3;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-right: none;
         display: flex;
         align-items: center;
@@ -40,16 +103,19 @@
       .ant-tree {
         height: calc(100% - 42px);
         padding-left: 24px;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-top: none;
         padding-top: 7px;
+
         .ant-tree-title {
           font-size: 16px;
           font-weight: bold;
         }
+
         li .ant-tree-node-content-wrapper.ant-tree-node-selected {
           background-color: rgba(230, 247, 255, 1);
         }
+
         li span.ant-tree-switcher.ant-tree-switcher_open:after {
           display: inline-block;
           width: 17px;
@@ -73,6 +139,7 @@
           background-size: cover;
           vertical-align: sub;
         }
+
         .ant-tree-child-tree {
           .ant-tree-switcher:before {
             display: inline-block;
@@ -93,6 +160,7 @@
       }
 
       .tree-right {
+
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -106,6 +174,7 @@
           font-size: 14px;
           height: 36px;
           line-height: 36px;
+
           .tree-add-img {
             width: 16px;
             height: 16px;
@@ -124,14 +193,22 @@
     }
   }
 
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+
   .right-content {
     flex: 1;
 
     .net-topo-header {
       height: 42px;
       line-height: 42px;
-      background:rgba(243,243,243,1);
-      border:1px solid rgba(234,234,234,1);
+      background: rgba(243, 243, 243, 1);
+      border: 1px solid rgba(234, 234, 234, 1);
       border-left: none;
       padding-right: 42px;
       text-align: right;
@@ -179,7 +256,7 @@
         .tooltip-content {
           width: 251px;
           background: #345fa6;
-          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
           border-radius: 7px;
           padding: 22px 24px;

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

@@ -2,6 +2,69 @@
   height: 100%;
   display: flex;
 
+  .view-header {
+    height: 42px;
+    line-height: 42px;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    z-index: 1;
+    position: absolute;
+    width: 108%;
+  }
+
+  .view-header-close {
+    height: 42px;
+    line-height: 42px;
+    background: #f3f3f3;
+    /* border: 1px solid #eaeaea; */
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    position: relative;
+    z-index: 5;
+    width: 270%;
+    /* left: 30%; */
+    /* margin-left: 10px; */
+    /* float: left; */
+    top: 2px;
+  }
+
+  .image-sytle {
+    height: 20px;
+  }
+
+  .left-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+  .right-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+
   .left-content {
     width: 300px;
     position: relative;
@@ -15,7 +78,7 @@
         height: 42px;
         line-height: 42px;
         background: #f3f3f3;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-right: none;
         display: flex;
         align-items: center;
@@ -40,16 +103,17 @@
       .ant-tree {
         height: calc(100% - 42px);
         padding-left: 24px;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-top: none;
         padding-top: 7px;
+
         //overflow-x: scroll;
         .ant-tree-title {
           font-size: 16px;
           font-weight: bold;
         }
 
-        li .ant-tree-node-content-wrapper{
+        li .ant-tree-node-content-wrapper {
           width: 82%;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -58,6 +122,7 @@
         li .ant-tree-node-content-wrapper.ant-tree-node-selected {
           background-color: rgba(230, 247, 255, 1);
         }
+
         li span.ant-tree-switcher.ant-tree-switcher_open:after {
           display: inline-block;
           width: 17px;
@@ -81,6 +146,7 @@
           background-size: cover;
           vertical-align: sub;
         }
+
         .ant-tree-child-tree {
           .ant-tree-switcher:before {
             display: inline-block;
@@ -101,6 +167,7 @@
       }
 
       .tree-right {
+
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -116,6 +183,7 @@
           line-height: 36px;
           margin-left: -70px;
           background-color: white;
+
           .tree-add-img {
             width: 16px;
             height: 16px;
@@ -134,14 +202,22 @@
     }
   }
 
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+
   .right-content {
     flex: 1;
 
     .net-topo-header {
       height: 42px;
       line-height: 42px;
-      background:rgba(243,243,243,1);
-      border:1px solid rgba(234,234,234,1);
+      background: rgba(243, 243, 243, 1);
+      border: 1px solid rgba(234, 234, 234, 1);
       border-left: none;
       padding-right: 42px;
       text-align: right;
@@ -189,7 +265,7 @@
         .tooltip-content {
           width: 251px;
           background: #345fa6;
-          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
           border-radius: 7px;
           padding: 22px 24px;
@@ -235,21 +311,25 @@
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   25% {
     opacity: 0.5;
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   50% {
     opacity: 1;
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   75% {
     opacity: 0.5;
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
   }
+
   100% {
     opacity: 0.3;
     -webkit-transform: scale(0.8);

src/view/bank/dynamicRing/TreeComponent.js

@@ -243,6 +243,25 @@ class TreeComponent extends Component {
     });
   }
 
+  // 视图切换
+  toggleView = (value) => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+   //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+
+  }
+
   renderTreeNodes = (data) => {
     let operableTreeData = deepCopy(data);
     return operableTreeData.map((item) => {

src/view/bank/dynamicRing/index.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { message } from 'amos-framework';
 import AmosWebSocket from 'amos-websocket';
 import TopologyComponent from './TopologyComponent';
 import TreeComponent from './TreeComponent';
-import { getDyTopoAction,updateDyTopoAction } from './../../../services/dynamicRingService';
+import { getDyTopoAction, updateDyTopoAction } from './../../../services/dynamicRingService';
 import SysWsURL from './../../../consts/wsUrlConsts';
 
-
 class DynamicRing extends Component {
   constructor(props) {
     super(props);
     this.state = {
       selectedKeys: [],
       wSelectedKeys: '',
+      isTreeDisplay: true,
       topologyData: {} //拓扑图数据
     };
   }
 
   // 拓扑图数据初始化
-  initTopologyData = (id,value = '') => {
+  initTopologyData = (id, value = '') => {
     getDyTopoAction(id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
@@ -28,27 +28,27 @@ class DynamicRing extends Component {
         topologyData: data
       });
     });
-  }
+  };
 
   // 树选择
-  onSelect = (selectedKeys) => {
+  onSelect = selectedKeys => {
     this.initTopologyData(selectedKeys);
     this.setState({
       selectedKeys,
       wSelectedKeys: ''
     });
-  }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
     const { selectedKeys } = this.state;
-    const { nodeDataArray,linkDataArray } = this.updateTopologyData;
+    const { nodeDataArray, linkDataArray } = this.updateTopologyData;
     const params = {
       treeid: selectedKeys,
       nodeData: nodeDataArray,
@@ -57,60 +57,74 @@ class DynamicRing extends Component {
     updateDyTopoAction(params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   // 刷新节点
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys, 'refresh');
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (e) => {
+  nodeSelectionChanged = e => {
     // console.log('e',e);
-    if (e.isSelected) { }
-  }
+    if (e.isSelected) {
+    }
+  };
 
   // // webSocket 接收消息
-  handleData = (data) => {
+  handleData = data => {
     this.onSelect(data);
     this.setState({
       wSelectedKeys: data
     });
-  }
+  };
+
+  // 视图切换
+  toggleView = value => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+    //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+  };
 
   render() {
-    const { topologyData,wSelectedKeys } = this.state;
+    const { topologyData, wSelectedKeys, isTreeDisplay } = this.state;
     return (
       <div className="dy-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.dyTopoURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
-        <div className="left-content">
-          <TreeComponent
-            onSelect={this.onSelect}
-            wSelectedKeys={wSelectedKeys}
-          />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.dyTopoURI} onMessage={this.handleData} reconnect debug />
+        <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
+          <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
+            <div className="left-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
+            </div>
+            <div className="right-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
+            </div>
+          </div>
+          <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
         </div>
         <div className="right-content">
           <div className="net-topo-header">
             <div className="net-topo-save">
-              <img src="/src/assets/bizView/netTopology/save.png" alt="保存"  onClick={this.saveTopologyData} />
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
             </div>
             <div className="net-topo-refresh">
-              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新"  onClick={this.refreshTopologyData} />
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
             </div>
           </div>
           <div className="net-topo-content">
-            <TopologyComponent
-              topologyData={topologyData}
-              nodeChange={this.nodeChange}
-              nodeSelectionChanged={this.nodeSelectionChanged}
-            />
+            <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
           </div>
         </div>
       </div>
@@ -118,8 +132,6 @@ class DynamicRing extends Component {
   }
 }
 
-DynamicRing.propTypes = {
-
-};
+DynamicRing.propTypes = {};
 
 export default DynamicRing;

src/view/bank/netTopology/TreeComponent.js

@@ -244,6 +244,7 @@ class TreeComponent extends Component {
   }
 
   renderTreeNodes = (data) => {
+
     let operableTreeData = deepCopy(data);
     return operableTreeData.map((item) => {
       if (item.isAdd) {
@@ -287,9 +288,9 @@ class TreeComponent extends Component {
     return (
       <div className={classnames('tree-wrapper', className)}>
         <div className="tree-btn">
-          <div className="add-topo" onClick={this.addTopology}>
+          {/**<div className="add-topo" onClick={this.addTopology}>
             <img src="/src/assets/bizView/netTopology/add-topo.png" alt="添加拓扑图" />
-          </div>
+          </div>*/}
         </div>
         <Tree
           selectedKeys={selectedKeys}
@@ -297,7 +298,7 @@ class TreeComponent extends Component {
           onSelect={this.onSelect}
           onExpand={this.onExpand}
           autoExpandParent={autoExpandParent}
-          onRightClick={this.treeNodeonRightClick}
+         // onRightClick={this.treeNodeonRightClick}
         >
           {this.renderTreeNodes(treeData)}
         </Tree>

src/view/bank/netTopology/index.js

@@ -4,11 +4,11 @@ import { message } from 'amos-framework';
 import AmosWebSocket from 'amos-websocket';
 import TopologyComponent from './TopologyComponent';
 import TreeComponent from './TreeComponent';
-import { getNetTopoAction,updateNetTopoAction } from './../../../services/netTopologyService';
+import { getNetTopoAction, updateNetTopoAction } from './../../../services/netTopologyService';
 import SysWsURL from './../../../consts/wsUrlConsts';
 import PamsTable from './pamsTable/index';
 import { UUID } from 'amos-tool';
-
+import classnames from 'classnames';
 
 class NetTopology extends Component {
   constructor(props) {
@@ -18,12 +18,13 @@ class NetTopology extends Component {
       wSelectedKeys: '',
       topologyData: {}, //拓扑图数据
       pamsDisplay: false,
-      pamsTableContent: []
+      pamsTableContent: [],
+      isTreeDisplay: true
     };
   }
 
   // 拓扑图数据初始化
-  initTopologyData = (id,value = '') => {
+  initTopologyData = (id, value = '') => {
     getNetTopoAction(id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
@@ -32,27 +33,27 @@ class NetTopology extends Component {
         topologyData: data
       });
     });
-  }
+  };
 
   // 树选择
-  onSelect = (selectedKeys) => {
+  onSelect = selectedKeys => {
     this.initTopologyData(selectedKeys);
     this.setState({
       selectedKeys,
       wSelectedKeys: ''
     });
-  }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
     const { selectedKeys } = this.state;
-    const { nodeDataArray,linkDataArray } = this.updateTopologyData;
+    const { nodeDataArray, linkDataArray } = this.updateTopologyData;
     const params = {
       treeid: selectedKeys,
       nodeData: nodeDataArray,
@@ -61,86 +62,95 @@ class NetTopology extends Component {
     updateNetTopoAction(params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   // 刷新节点
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys, 'refresh');
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (e) => {
-    console.log('e',e);
+  nodeSelectionChanged = e => {
+    console.log('e', e);
     if (e.isSelected) {
-      this.setState({pamsDisplay: true });
-      console.log(e.data,"device");
+      this.setState({ pamsDisplay: true });
+      console.log(e.data, 'device');
       const pamsTableContent = [<PamsTable data={e.data} key={UUID.uuid('16')}></PamsTable>];
-      this.setState({pamsTableContent });
+      this.setState({ pamsTableContent });
     } else {
       console.log('没进来');
-      this.setState({pamsDisplay: false });
+      this.setState({ pamsDisplay: false });
     }
-  }
+  };
 
   //pams底部表
-  renderPamsTable=()=>{
-    const {pamsTableContent } = this.state;
+  renderPamsTable = () => {
+    const { pamsTableContent } = this.state;
     return pamsTableContent;
-  }
+  };
 
   // // webSocket 接收消息
-  handleData = (data) => {
+  handleData = data => {
     this.onSelect(data);
     this.setState({
       wSelectedKeys: data
     });
-  }
+  };
+
+  // 视图切换
+  toggleView = value => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+    //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+  };
 
   render() {
-    const { topologyData,wSelectedKeys,selectedKeys, pamsDisplay } = this.state;
+    const { topologyData, wSelectedKeys, selectedKeys, pamsDisplay, isTreeDisplay } = this.state;
     return (
       <div className="net-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.netTopoURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
-        <div className="left-content">
-          <TreeComponent
-            onSelect={this.onSelect}
-            wSelectedKeys={wSelectedKeys}
-          />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.netTopoURI} onMessage={this.handleData} reconnect debug />
+        <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
+          <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
+            <div className="left-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
+            </div>
+            <div className="right-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
+            </div>
+          </div>
+          <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
         </div>
         <div className="right-content">
           <div className="net-topo-header">
             <div className="net-topo-save">
-              <img src="/src/assets/bizView/netTopology/save.png" alt="保存"  onClick={this.saveTopologyData} />
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
             </div>
             <div className="net-topo-refresh">
-              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新"  onClick={this.refreshTopologyData} />
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
             </div>
           </div>
-          <div className="net-topo-content" style={{height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ',overflow: 'auto'}}>
-            <TopologyComponent
-              topologyData={topologyData}
-              nodeChange={this.nodeChange}
-              nodeSelectionChanged={this.nodeSelectionChanged}
-            />
+          <div className="net-topo-content" style={{ height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ', overflow: 'auto' }}>
+            <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
           </div>
-          {
-            pamsDisplay ? this.renderPamsTable() : null
-          }
+          {pamsDisplay ? this.renderPamsTable() : null}
         </div>
       </div>
     );
   }
 }
 
-NetTopology.propTypes = {
-
-};
+NetTopology.propTypes = {};
 
 export default NetTopology;

src/view/bizview/pams/index.js

@@ -69,8 +69,8 @@ class Pams extends Component {
       this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
       this.viewlineItem();
     }
-
   }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.location.state) {
       this.state.cityLine = JSON.parse(nextProps.location.state.cityLine);
@@ -245,6 +245,10 @@ class Pams extends Component {
         activeView: 'detail'
       });
     }
+
+    //刷新视图
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
   }
 
   //webSocket 接收消息