Skip to content

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

虚拟云平台初始化

parent 41c0de3a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 388 deletions
src/styles/view/biz/virtualCloudPlatform/index.scss
View file @ 7a754e2f
.virtualCloudPlatform-dy-wrapper { .virtualCloudPlatform-wrapper {
height: 100%; height: 100%;
display: flex;
.virtualCloudPlatform-header {
height: 42px;
display: flex;
background: rgba(243, 243, 243, 1);
border: 1px solid rgba(234, 234, 234, 1);
.virtualCloudPlatform-view {
width: 300px;
padding-right: 42px;
text-align: right;
padding-top: 2px;
img {
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;
}
.detail-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: 0px 4px 4px 0px;
padding: 8px;
cursor: pointer;
}
.left-active-view {
background: rgba(227, 227, 227, 1);
border: 1px solid rgba(234, 234, 234, 1);
}
.detail-active-view {
background: rgba(227, 227, 227, 1);
border: 1px solid rgba(234, 234, 234, 1);
}
}
.virtualCloudPlatform-data {
flex: 1;
padding-right: 42px;
text-align: right;
padding-top: 2px;
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-content {
height: calc(100% - 42px);
display: flex;
}
.left-content { .left-content {
width: 300px; width: 300px;
position: relative; position: relative;
z-index: 1; border-right: 1px solid rgba(234, 234, 234, 1);
background: #fff;
.tree-wrapper { .tree-wrapper {
height: 100%; height: 100%;
padding-top: 26px;
.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 { .ant-tree {
height: calc(100% - 42px); height: 100%;
padding-left: 24px; padding-left: 24px;
border:1px solid rgba(234,234,234,1);
border-top: none;
padding-top: 7px;
.ant-tree-title { .ant-tree-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -91,87 +153,123 @@ ...@@ -91,87 +153,123 @@
} }
} }
} }
}
}
.tree-right { .left-content-close {
.ant-menu-item:hover, position: relative;
.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 { .tree-wrapper {
width: 16px; display: none;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
}
}
} }
} }
.only-middle {
width: 100%!important;
}
.middle-content {
// flex: 1;
width: calc(100% - 300px);
height: 100%;
.right-content {
flex: 1;
.virtualCloudPlatform-topo-header { .paslogy-content {
height: 42px; // display: flex;
line-height: 42px; height: 100%;
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 { .middle-content-div {
height: 20px; display: flex;
.box {
font-family: Microsoft YaHei UI;
font-size: 18px;
font-weight: bold;
line-height: 19px;
color: rgba(255,255,255,1);
}
.content-left{
margin-top: 18px;
margin-left: 54px;
width: 724px;
height: 24px;
background:rgba(91,227,255,1);
text-align: left;
padding-left: 10px;
padding-top: 3px;
} }
.virtualCloudPlatform-topo-save { .content-right{
display: inline-block; margin-top: 18px;
width: 36px; margin-left: 30px;
height: 36px; width: 350px;
background: rgba(255, 255, 255, 1); height: 24px;
border: 1px solid rgba(234, 234, 234, 1); background: #5be3ff;
text-align: left;
padding-left: 10px;
padding-top: 3px;
opacity: 1; opacity: 1;
border-radius: 4px 0px 0px 4px; margin-right: 42px;
cursor: pointer; opacity:1;
padding: 8px;
} }
}
.virtualCloudPlatform-topo-refresh {
display: inline-block;
width: 36px; .net-topo-content {
height: 36px; height: calc(100% - 42px);
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1); .topology-net {
opacity: 1; canvas {
border-radius: 0px 4px 4px 0px; outline: none;
padding: 8px; }
cursor: pointer;
.tooltip-content {
width: 200px;
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;
}
}
}
}
}
.chart-content {
// flex: 1
}
.topology-pas {
flex: 1;
canvas {
outline: none;
}
} }
} }
.virtualCloudPlatform-topo-content { .net-topo-content {
height: calc(100% - 42px); height: calc(100% - 42px);
.topology-virtualCloudPlatform { .topology-net {
canvas { canvas {
outline: none; outline: none;
} }
...@@ -199,15 +297,15 @@ ...@@ -199,15 +297,15 @@
display: inline-block; display: inline-block;
padding-left: 10px; padding-left: 10px;
} }
.amosicon {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
} }
} }
} }
src/view/bank/virtualCloudPlatform/TopologyComponent.js
View file @ 7a754e2f
...@@ -6,7 +6,7 @@ import classnames from 'classnames'; ...@@ -6,7 +6,7 @@ import classnames from 'classnames';
import { nodeDetailTopoAction } from './../../../services/dynamicRingService'; import { nodeDetailTopoAction } from './../../../services/dynamicRingService';
const goObj = go.GraphObject.make; const goObj = go.GraphObject.make;
const deviceSource = '/src/assets/bizView/dynamicRing'; const deviceSource = '/src/assets/bizView/selfsupport';
class TopologyComponent extends Component { class TopologyComponent extends Component {
...@@ -81,7 +81,7 @@ class TopologyComponent extends Component { ...@@ -81,7 +81,7 @@ class TopologyComponent extends Component {
if (v) { if (v) {
return '#FF0000'; return '#FF0000';
} }
return 'rgba(0,255,8,1)'; return '#00FFFF';
} }
showWarnHighlights = (d, v) => { showWarnHighlights = (d, v) => {
...@@ -324,7 +324,7 @@ class TopologyComponent extends Component { ...@@ -324,7 +324,7 @@ class TopologyComponent extends Component {
const { className,style, topologyData } = this.props; const { className,style, topologyData } = this.props;
const { nodeData = [] } = topologyData || {}; const { nodeData = [] } = topologyData || {};
return ( return (
<div ref="goJsDiv" style={style} className={classnames('topology-virtualCloudPlatform', className)}> <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} />)
} }
......
src/view/bank/virtualCloudPlatform/TreeComponent.js
View file @ 7a754e2f
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Tree,Menu,Icon,Button } from 'amos-antd'; import { Tree } from 'amos-antd';
import { deepCopy } from 'amos-tool';
import { getDyTreeAction } from './../../../services/dynamicRingService';
const TreeNode = Tree.TreeNode; const TreeNode = Tree.TreeNode;
class TreeComponent extends Component { 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) => { renderTreeNodes = (data) => {
let operableTreeData = deepCopy(data); return data.map((item) => {
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) { if (item.children && item.children.length) {
return ( return (
<TreeNode title={item.name} <TreeNode title={item.name} key={item.id} parent={item.parent} >
key={item.id}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
>
{this.renderTreeNodes(item.children)} {this.renderTreeNodes(item.children)}
</TreeNode> </TreeNode>
); );
} }
return (<TreeNode key={item.id} return (<TreeNode title={item.name} key={item.id} parent={item.parent} />);
title={item.name}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
/>);
}); });
} }
render() { render() {
const { treeData,selectedKeys,expandedKeys,autoExpandParent,isMenuVisible } = this.state; const { className,treeData,expandedKeys,selectedKeys,autoExpandParent,onSelect,onExpand } = this.props;
const { className } = this.props;
return ( return (
<div className={classnames('tree-wrapper', className)}> <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 <Tree
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
onSelect={this.onSelect} onSelect={onSelect}
onExpand={this.onExpand} onExpand={onExpand}
autoExpandParent={autoExpandParent} autoExpandParent={autoExpandParent}
// onRightClick={this.treeNodeonRightClick}
> >
{this.renderTreeNodes(treeData)} {this.renderTreeNodes(treeData)}
</Tree> </Tree>
{isMenuVisible && this.getNodeTreeRightClickMenu()}
</div> </div>
); );
} }
...@@ -310,12 +41,11 @@ class TreeComponent extends Component { ...@@ -310,12 +41,11 @@ class TreeComponent extends Component {
TreeComponent.propTypes = { TreeComponent.propTypes = {
className: PropTypes.string, className: PropTypes.string,
treeData: PropTypes.object, treeData: PropTypes.object,
selectedKeys: PropTypes.array,
expandedKeys: PropTypes.array,
autoExpandParent: PropTypes.bool,
onSelect: PropTypes.func, onSelect: PropTypes.func,
wSelectedKeys: PropTypes.string onExpand: PropTypes.func
};
TreeComponent.defaultProps = {
wSelectedKeys: ''
}; };
export default TreeComponent; export default TreeComponent;
src/view/bank/virtualCloudPlatform/index.js
View file @ 7a754e2f
This diff is collapsed.
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