Skip to content

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

虚拟云监控平台和金融城域网菜单和demo增加

parent 05fc2e02
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1333 additions and 2 deletions
src/routes/asyncView.js
View file @ 4d8b078c
......@@ -94,6 +94,9 @@ const AsyncDynamicRing = props => <AsyncLoader load={import('./../view/bank/dyna
const AsyncEqpAndMovingRing = props => <AsyncLoader load={import('./../view/bank/eqpAndMovingRing/index')} componentProps={props} />;
const AsyncEquipMonitor = props => <AsyncLoader load={import('./../view/bank/equipMonitor')} componentProps={props} />;
const AsyncSelfSupport = props => <AsyncLoader load={import('./../view/bizview/selfSupport/index')} componentProps={props} />;
const AsyncVirtualCloudPlatformSupport = props => <AsyncLoader load={import('./../view/bank/virtualCloudPlatform/index')} componentProps={props} />;
const AsyncFinancialCityLanSupport = props => <AsyncLoader load={import('./../view/bank/financialCityLan/index')} componentProps={props} />;
const Routes = {
// 添加 rules 路由
......@@ -175,7 +178,9 @@ const Routes = {
donghuan: AsyncDynamicRing,
deviceMonitor: AsyncEquipMonitor,
eqpAndMovingRing: AsyncEqpAndMovingRing,
selfSupport:AsyncSelfSupport
selfSupport:AsyncSelfSupport,
financialCityLan:AsyncVirtualCloudPlatformSupport,
virtualCloudPlatform:AsyncFinancialCityLanSupport
};
......
src/routes/view.js
View file @ 4d8b078c
......@@ -87,6 +87,8 @@ import PamsTable from './../view/pamsTable';
import DynamicRing from './../view/bank/dynamicRing';
import EquipMonitor from './../view/bank/equipMonitor';
import EqpAndMovingRing from './../view/bank/eqpAndMovingRing/index';
import VirtualCloudPlatform from './../view/bank/virtualCloudPlatform/index';
import FinancialCityLan from './../view/bank/financialCityLan/index';
const Routes = {
......@@ -171,7 +173,11 @@ const Routes = {
deviceMonitor: EquipMonitor,
eqpAndMovingRing: EqpAndMovingRing,
//自建系统
selfSupport: SelfSupport
selfSupport: SelfSupport,
//虚拟云平台监控
virtualCloudPlatform : VirtualCloudPlatform,
//金融城域网
financialCityLan : FinancialCityLan
};
const pageCompontent = key => {
......
src/styles/view/biz/financialCityLan/index.scss 0 → 100644
View file @ 4d8b078c
.financialCityLan-dy-wrapper {
height: 100%;
display: flex;
.left-content {
width: 300px;
position: relative;
z-index: 1;
background: #fff;
.tree-wrapper {
height: 100%;
.tree-btn {
height: 42px;
line-height: 42px;
background: #f3f3f3;
border:1px solid rgba(234,234,234,1);
border-right: none;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 42px;
.add-topo {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 4px;
padding: 8px;
cursor: pointer;
img {
height: 20px;
}
}
}
.ant-tree {
height: calc(100% - 42px);
padding-left: 24px;
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;
height: 17px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-folder.png');
background-size: cover;
vertical-align: sub;
}
li span.ant-tree-switcher.ant-tree-switcher_close:after {
display: inline-block;
width: 17px;
height: 17px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-folder.png');
background-size: cover;
vertical-align: sub;
}
.ant-tree-child-tree {
.ant-tree-switcher:before {
display: inline-block;
width: 16px;
height: 16px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-floor.png');
background-size: cover;
vertical-align: sub;
}
.ant-tree-title {
font-size: 14px;
}
}
}
.tree-right {
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
background-color: rgba(230, 247, 255, 1);
color: #3f3f3f;
}
.ant-menu-item {
font-size: 14px;
height: 36px;
line-height: 36px;
.tree-add-img {
width: 16px;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
.tree-del-img {
width: 16px;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
}
}
}
}
.right-content {
flex: 1;
.financialCityLan-topo-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;
position: relative;
z-index: 1;
img {
height: 20px;
}
.financialCityLan-topo-save {
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;
}
.financialCityLan-topo-refresh {
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: 0px 4px 4px 0px;
padding: 8px;
cursor: pointer;
}
}
.financialCityLan-topo-content {
height: calc(100% - 42px);
.topology-financialCityLan {
canvas {
outline: none;
}
.tooltip-content {
width: 251px;
background: #345fa6;
box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
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;
}
.amosicon {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
}
src/styles/view/biz/index.scss
View file @ 4d8b078c
......@@ -22,6 +22,8 @@
@import './dynamicRing/index.scss';
@import './equipMonitor/index.scss';
@import './selfsupport/index.scss';
@import './financialCityLan/index.scss';
@import './virtualCloudPlatform/index.scss';
.ant-calendar-picker-container {
&.ant-calendar-picker-container-placement-bottomRight {
......
src/styles/view/biz/virtualCloudPlatform/index.scss 0 → 100644
View file @ 4d8b078c
.virtualCloudPlatform-dy-wrapper {
height: 100%;
display: flex;
.left-content {
width: 300px;
position: relative;
z-index: 1;
background: #fff;
.tree-wrapper {
height: 100%;
.tree-btn {
height: 42px;
line-height: 42px;
background: #f3f3f3;
border:1px solid rgba(234,234,234,1);
border-right: none;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 42px;
.add-topo {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 4px;
padding: 8px;
cursor: pointer;
img {
height: 20px;
}
}
}
.ant-tree {
height: calc(100% - 42px);
padding-left: 24px;
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;
height: 17px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-folder.png');
background-size: cover;
vertical-align: sub;
}
li span.ant-tree-switcher.ant-tree-switcher_close:after {
display: inline-block;
width: 17px;
height: 17px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-folder.png');
background-size: cover;
vertical-align: sub;
}
.ant-tree-child-tree {
.ant-tree-switcher:before {
display: inline-block;
width: 16px;
height: 16px;
content: '';
transform: unset;
transition: unset;
background: url('/src/assets/bizView/netTopology/tree-floor.png');
background-size: cover;
vertical-align: sub;
}
.ant-tree-title {
font-size: 14px;
}
}
}
.tree-right {
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
background-color: rgba(230, 247, 255, 1);
color: #3f3f3f;
}
.ant-menu-item {
font-size: 14px;
height: 36px;
line-height: 36px;
.tree-add-img {
width: 16px;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
.tree-del-img {
width: 16px;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
}
}
}
}
.right-content {
flex: 1;
.virtualCloudPlatform-topo-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;
position: relative;
z-index: 1;
img {
height: 20px;
}
.virtualCloudPlatform-topo-save {
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;
}
.virtualCloudPlatform-topo-refresh {
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: 0px 4px 4px 0px;
padding: 8px;
cursor: pointer;
}
}
.virtualCloudPlatform-topo-content {
height: calc(100% - 42px);
.topology-virtualCloudPlatform {
canvas {
outline: none;
}
.tooltip-content {
width: 251px;
background: #345fa6;
box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
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;
}
.amosicon {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
}
src/view/bank/financialCityLan/TopologyComponent.js 0 → 100644
View file @ 4d8b078c
This diff is collapsed.
src/view/bank/financialCityLan/TreeComponent.js 0 → 100644
View file @ 4d8b078c
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Tree,Menu,Icon,Button } from 'amos-antd';
import { deepCopy } from 'amos-tool';
import { getDyTreeAction } from './../../../services/dynamicRingService';
const TreeNode = Tree.TreeNode;
class TreeComponent extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [
{
name: '',
id: '1',
children: []
}
], //树数据
autoExpandParent: true,
selectedKeys: [],
expandedKeys: [],
rightClickNodeTreeItem: {},
isMenuVisible: false
};
this.treeLists = [];
this.activeKey = null;
this.activeValue = '';
}
componentDidMount() {
document.addEventListener('click', this.bindBodyClick, false);
this.initData();
}
componentWillUnmount() {
document.removeEventListener('click', this.bindBodyClick);
}
componentWillReceiveProps(nextProps) {
if (nextProps.wSelectedKeys && nextProps.wSelectedKeys !== this.props.wSelectedKeys) {
this.setState({
selectedKeys: nextProps.wSelectedKeys
});
}
}
// 绑定body
bindBodyClick = (e) => {
e.stopPropagation();
this.setState({
isMenuVisible: false
});
}
// 初始化树数据
initData = (treeData) => {
const { onSelect } = this.props;
const expandedKeysData = [];
getDyTreeAction().then(data => {
data.map(item => {
expandedKeysData.push(item.id);
});
this.treeLists = data;
onSelect(data[0].id);
this.setState({
treeData: data,
selectedKeys: [data[0].id],
expandedKeys: expandedKeysData
});
});
}
// 树选择
onSelect = (selectedKeys,e) => {
const { onSelect } = this.props;
if (!selectedKeys.length) {return;}
if (!e.node.props.parent) {
onSelect(selectedKeys[0]);
}
this.setState({
selectedKeys
});
}
// 树展开
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false
});
};
// 节点右键事件
treeNodeonRightClick = (e) => {
// if (e.node.props.parent) {
// return;
// }
const x = e.event.currentTarget.offsetLeft + e.event.currentTarget.clientWidth;
const y = e.event.currentTarget.offsetTop;
this.activeKey = e.node.props.id;
this.setState({
rightClickNodeTreeItem: {
pageX: x,
pageY: y,
id: e.node.props.id,
parent: e.node.props.parent
},
isMenuVisible: true
});
}
// 节点右键菜单
getNodeTreeRightClickMenu = () => {
const { rightClickNodeTreeItem } = this.state;
const { pageX, pageY, id, parent } = rightClickNodeTreeItem;
if (!rightClickNodeTreeItem.id) {
return null;
}
const style = {
position: 'absolute',
left: `${pageX}px`,
top: `${pageY}px`
};
const menu = (
<Menu
onClick={(e) => this.handleMenuClick(e, id)}
style={style}
className="tree-right"
>
{!parent && <Menu.Item key='1'><img src="/src/assets/bizView/netTopology/add-node.png" alt="添加子图" className="tree-add-img" />{'添加子图'}</Menu.Item>}
<Menu.Item key='2'><img src="/src/assets/bizView/netTopology/del-node.png" alt="删除子图" className="tree-del-img" />{'删除'}</Menu.Item>
</Menu>
);
return menu;
}
// 选择菜单
handleMenuClick = (value, id) => {
let { expandedKeys } = this.state;
if (!expandedKeys.includes(id)) {
expandedKeys = [...expandedKeys, id];
}
if (value.key === '1') {
this.addNode(id);
} else {
this.deleteNode(id);
}
this.setState({
isMenuVisible: false,
expandedKeys
});
}
// 添加拓扑插件
addTopology = () => {
this.treeLists.push({
name: '',
id: Math.random(100),
isAdd: true,
children: [],
parent: null
});
this.setState({
treeData: this.treeLists
});
}
// 添加节点
addNode = (id) => {
this.treeLists.map(item => {
if (item.id === id) {
item.children.push({
name: '',
id: id + Math.random(100),
isAdd: true,
children: [],
parent: null
});
}
});
this.setState({
treeData: this.treeLists
});
}
onInputChange = (e, id) => {
this.activeValue = e.target.value;
this.changeNode(id, e.target.value, this.treeLists);
this.setState({
treeData: this.treeLists
});
}
// 改变节点
changeNode = (id, value, data) => data.map((item) => {
if (item.isAdd) {
item.name = value;
return;
}
if (item.children.length) {
this.changeNode(id, value, item.children);
}
})
onClose = (id) => {
this.closeNode(id, this.treeLists);
// this.setState({
// treeData: this.treeLists
// });
this.initData();
}
// 关闭节点
closeNode = (id, data) => data.map((item,index) => {
if (item.id === id) {
data.splice(index, 1);
return;
}
if (item.children.length) {
this.closeNode(id, item.children);
}
})
// 保存节点
onSave = () => {
const params = {
name: this.activeValue,
parent: this.activeKey
};
addWebTreeAction(params).then(() => {
this.initData();
});
}
// 删除节点
deleteNode = (id) => {
delWebTreeAction(id).then(() => {
this.initData();
});
}
renderTreeNodes = (data) => {
let operableTreeData = deepCopy(data);
return operableTreeData.map((item) => {
if (item.isAdd) {
item.name = (
<div>
<input
value={item.name}
onChange={(e) => this.onInputChange(e, item.id)}
/>
<Icon type='close' style={{ marginLeft: 10 }} onClick={() => this.onClose(item.id)} />
<Icon type='check' style={{ marginLeft: 10 }} onClick={() => this.onSave(item.id)} />
</div>
);
}
if (item.children && item.children.length) {
return (
<TreeNode title={item.name}
key={item.id}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return (<TreeNode key={item.id}
title={item.name}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
/>);
});
}
render() {
const { treeData,selectedKeys,expandedKeys,autoExpandParent,isMenuVisible } = this.state;
const { className } = this.props;
return (
<div className={classnames('tree-wrapper', className)}>
<div className="tree-btn">
{/**<div className="add-topo" onClick={this.addTopology}>
<img src="/src/assets/bizView/netTopology/add-topo.png" alt="添加拓扑图" />
</div>*/}
</div>
<Tree
selectedKeys={selectedKeys}
expandedKeys={expandedKeys}
onSelect={this.onSelect}
onExpand={this.onExpand}
autoExpandParent={autoExpandParent}
// onRightClick={this.treeNodeonRightClick}
>
{this.renderTreeNodes(treeData)}
</Tree>
{isMenuVisible && this.getNodeTreeRightClickMenu()}
</div>
);
}
}
TreeComponent.propTypes = {
className: PropTypes.string,
treeData: PropTypes.object,
onSelect: PropTypes.func,
wSelectedKeys: PropTypes.string
};
TreeComponent.defaultProps = {
wSelectedKeys: ''
};
export default TreeComponent;
src/view/bank/financialCityLan/index.js 0 → 100644
View file @ 4d8b078c
import React, { Component } from 'react';
import PropTypes from 'prop-types';
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 SysWsURL from './../../../consts/wsUrlConsts';
class FinancialCityLan extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: [],
wSelectedKeys: '',
topologyData: {} //拓扑图数据
};
}
// 拓扑图数据初始化
initTopologyData = (id,value = '') => {
getDyTopoAction(id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
this.setState({
topologyData: data
});
});
}
// 树选择
onSelect = (selectedKeys) => {
this.initTopologyData(selectedKeys);
this.setState({
selectedKeys,
wSelectedKeys: ''
});
}
// 节点数据改变
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 params = {
treeid: selectedKeys,
nodeData: nodeDataArray,
linkData: linkDataArray
};
updateDyTopoAction(params).then(data => {
message.success('拓扑图保存成功!');
});
}
// 刷新节点
refreshTopologyData = () => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh');
}
// 选择节点
nodeSelectionChanged = (e) => {
// console.log('e',e);
if (e.isSelected) { }
}
// // webSocket 接收消息
handleData = (data) => {
this.onSelect(data);
this.setState({
wSelectedKeys: data
});
}
render() {
const { topologyData,wSelectedKeys } = this.state;
return (
<div className="financialCityLan-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}
/>
</div>
<div className="right-content">
<div className="financialCityLan-topo-header">
<div className="financialCityLan-topo-save">
<img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
</div>
<div className="financialCityLan-topo-refresh">
<img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
</div>
</div>
<div className="financialCityLan-topo-content">
<TopologyComponent
topologyData={topologyData}
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged}
/>
</div>
</div>
</div>
);
}
}
FinancialCityLan.propTypes = {
};
export default FinancialCityLan;
src/view/bank/virtualCloudPlatform/TopologyComponent.js 0 → 100644
View file @ 4d8b078c
This diff is collapsed.
src/view/bank/virtualCloudPlatform/TreeComponent.js 0 → 100644
View file @ 4d8b078c
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Tree,Menu,Icon,Button } from 'amos-antd';
import { deepCopy } from 'amos-tool';
import { getDyTreeAction } from './../../../services/dynamicRingService';
const TreeNode = Tree.TreeNode;
class TreeComponent extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [
{
name: '',
id: '1',
children: []
}
], //树数据
autoExpandParent: true,
selectedKeys: [],
expandedKeys: [],
rightClickNodeTreeItem: {},
isMenuVisible: false
};
this.treeLists = [];
this.activeKey = null;
this.activeValue = '';
}
componentDidMount() {
document.addEventListener('click', this.bindBodyClick, false);
this.initData();
}
componentWillUnmount() {
document.removeEventListener('click', this.bindBodyClick);
}
componentWillReceiveProps(nextProps) {
if (nextProps.wSelectedKeys && nextProps.wSelectedKeys !== this.props.wSelectedKeys) {
this.setState({
selectedKeys: nextProps.wSelectedKeys
});
}
}
// 绑定body
bindBodyClick = (e) => {
e.stopPropagation();
this.setState({
isMenuVisible: false
});
}
// 初始化树数据
initData = (treeData) => {
const { onSelect } = this.props;
const expandedKeysData = [];
getDyTreeAction().then(data => {
data.map(item => {
expandedKeysData.push(item.id);
});
this.treeLists = data;
onSelect(data[0].id);
this.setState({
treeData: data,
selectedKeys: [data[0].id],
expandedKeys: expandedKeysData
});
});
}
// 树选择
onSelect = (selectedKeys,e) => {
const { onSelect } = this.props;
if (!selectedKeys.length) {return;}
if (!e.node.props.parent) {
onSelect(selectedKeys[0]);
}
this.setState({
selectedKeys
});
}
// 树展开
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false
});
};
// 节点右键事件
treeNodeonRightClick = (e) => {
// if (e.node.props.parent) {
// return;
// }
const x = e.event.currentTarget.offsetLeft + e.event.currentTarget.clientWidth;
const y = e.event.currentTarget.offsetTop;
this.activeKey = e.node.props.id;
this.setState({
rightClickNodeTreeItem: {
pageX: x,
pageY: y,
id: e.node.props.id,
parent: e.node.props.parent
},
isMenuVisible: true
});
}
// 节点右键菜单
getNodeTreeRightClickMenu = () => {
const { rightClickNodeTreeItem } = this.state;
const { pageX, pageY, id, parent } = rightClickNodeTreeItem;
if (!rightClickNodeTreeItem.id) {
return null;
}
const style = {
position: 'absolute',
left: `${pageX}px`,
top: `${pageY}px`
};
const menu = (
<Menu
onClick={(e) => this.handleMenuClick(e, id)}
style={style}
className="tree-right"
>
{!parent && <Menu.Item key='1'><img src="/src/assets/bizView/netTopology/add-node.png" alt="添加子图" className="tree-add-img" />{'添加子图'}</Menu.Item>}
<Menu.Item key='2'><img src="/src/assets/bizView/netTopology/del-node.png" alt="删除子图" className="tree-del-img" />{'删除'}</Menu.Item>
</Menu>
);
return menu;
}
// 选择菜单
handleMenuClick = (value, id) => {
let { expandedKeys } = this.state;
if (!expandedKeys.includes(id)) {
expandedKeys = [...expandedKeys, id];
}
if (value.key === '1') {
this.addNode(id);
} else {
this.deleteNode(id);
}
this.setState({
isMenuVisible: false,
expandedKeys
});
}
// 添加拓扑插件
addTopology = () => {
this.treeLists.push({
name: '',
id: Math.random(100),
isAdd: true,
children: [],
parent: null
});
this.setState({
treeData: this.treeLists
});
}
// 添加节点
addNode = (id) => {
this.treeLists.map(item => {
if (item.id === id) {
item.children.push({
name: '',
id: id + Math.random(100),
isAdd: true,
children: [],
parent: null
});
}
});
this.setState({
treeData: this.treeLists
});
}
onInputChange = (e, id) => {
this.activeValue = e.target.value;
this.changeNode(id, e.target.value, this.treeLists);
this.setState({
treeData: this.treeLists
});
}
// 改变节点
changeNode = (id, value, data) => data.map((item) => {
if (item.isAdd) {
item.name = value;
return;
}
if (item.children.length) {
this.changeNode(id, value, item.children);
}
})
onClose = (id) => {
this.closeNode(id, this.treeLists);
// this.setState({
// treeData: this.treeLists
// });
this.initData();
}
// 关闭节点
closeNode = (id, data) => data.map((item,index) => {
if (item.id === id) {
data.splice(index, 1);
return;
}
if (item.children.length) {
this.closeNode(id, item.children);
}
})
// 保存节点
onSave = () => {
const params = {
name: this.activeValue,
parent: this.activeKey
};
addWebTreeAction(params).then(() => {
this.initData();
});
}
// 删除节点
deleteNode = (id) => {
delWebTreeAction(id).then(() => {
this.initData();
});
}
renderTreeNodes = (data) => {
let operableTreeData = deepCopy(data);
return operableTreeData.map((item) => {
if (item.isAdd) {
item.name = (
<div>
<input
value={item.name}
onChange={(e) => this.onInputChange(e, item.id)}
/>
<Icon type='close' style={{ marginLeft: 10 }} onClick={() => this.onClose(item.id)} />
<Icon type='check' style={{ marginLeft: 10 }} onClick={() => this.onSave(item.id)} />
</div>
);
}
if (item.children && item.children.length) {
return (
<TreeNode title={item.name}
key={item.id}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return (<TreeNode key={item.id}
title={item.name}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
/>);
});
}
render() {
const { treeData,selectedKeys,expandedKeys,autoExpandParent,isMenuVisible } = this.state;
const { className } = this.props;
return (
<div className={classnames('tree-wrapper', className)}>
<div className="tree-btn">
{/**<div className="add-topo" onClick={this.addTopology}>
<img src="/src/assets/bizView/netTopology/add-topo.png" alt="添加拓扑图" />
</div>*/}
</div>
<Tree
selectedKeys={selectedKeys}
expandedKeys={expandedKeys}
onSelect={this.onSelect}
onExpand={this.onExpand}
autoExpandParent={autoExpandParent}
// onRightClick={this.treeNodeonRightClick}
>
{this.renderTreeNodes(treeData)}
</Tree>
{isMenuVisible && this.getNodeTreeRightClickMenu()}
</div>
);
}
}
TreeComponent.propTypes = {
className: PropTypes.string,
treeData: PropTypes.object,
onSelect: PropTypes.func,
wSelectedKeys: PropTypes.string
};
TreeComponent.defaultProps = {
wSelectedKeys: ''
};
export default TreeComponent;
src/view/bank/virtualCloudPlatform/index.js 0 → 100644
View file @ 4d8b078c
import React, { Component } from 'react';
import PropTypes from 'prop-types';
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 SysWsURL from './../../../consts/wsUrlConsts';
class VirtualCloudPlatform extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: [],
wSelectedKeys: '',
topologyData: {} //拓扑图数据
};
}
// 拓扑图数据初始化
initTopologyData = (id,value = '') => {
getDyTopoAction(id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
this.setState({
topologyData: data
});
});
}
// 树选择
onSelect = (selectedKeys) => {
this.initTopologyData(selectedKeys);
this.setState({
selectedKeys,
wSelectedKeys: ''
});
}
// 节点数据改变
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 params = {
treeid: selectedKeys,
nodeData: nodeDataArray,
linkData: linkDataArray
};
updateDyTopoAction(params).then(data => {
message.success('拓扑图保存成功!');
});
}
// 刷新节点
refreshTopologyData = () => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh');
}
// 选择节点
nodeSelectionChanged = (e) => {
// console.log('e',e);
if (e.isSelected) { }
}
// // webSocket 接收消息
handleData = (data) => {
this.onSelect(data);
this.setState({
wSelectedKeys: data
});
}
render() {
const { topologyData,wSelectedKeys } = this.state;
return (
<div className="virtualCloudPlatform-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}
/>
</div>
<div className="right-content">
<div className="virtualCloudPlatform-topo-header">
<div className="virtualCloudPlatform-topo-save">
<img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
</div>
<div className="virtualCloudPlatform-topo-refresh">
<img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
</div>
</div>
<div className="virtualCloudPlatform-topo-content">
<TopologyComponent
topologyData={topologyData}
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged}
/>
</div>
</div>
</div>
);
}
}
VirtualCloudPlatform.propTypes = {
};
export default VirtualCloudPlatform;
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