Skip to content

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

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

parent fe1a648d
Show whitespace changes
Inline Side-by-side
Showing with 302 additions and 99 deletions
src/styles/view/biz/dynamicRing/index.scss
View file @ abbc2778
......@@ -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
View file @ abbc2778
......@@ -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
View file @ abbc2778
......@@ -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
View file @ abbc2778
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,44 +57,62 @@ 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">
......@@ -106,11 +124,7 @@ class DynamicRing extends Component {
</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
View file @ abbc2778
......@@ -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
View file @ abbc2778
......@@ -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,58 +62,75 @@ 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">
......@@ -123,24 +141,16 @@ class NetTopology extends Component {
<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
View file @ abbc2778
......@@ -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 接收消息
......
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