Skip to content

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

虚拟云平台初始化

parent 41c0de3a
Hide whitespace changes
Inline Side-by-side
Showing with 640 additions and 433 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
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 { message } from 'amos-framework'; import { message } from 'amos-framework';
import dt2react from 'dt2react';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import TopologyComponent from './TopologyComponent'; import TopologyComponent from './TopologyComponent';
import TreeComponent from './TreeComponent'; import TreeComponent from './TreeComponent';
import { getDyTopoAction,updateDyTopoAction } from './../../../services/dynamicRingService'; import mqtt from 'mqtt';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getSelfTopoTreeAction, getSelfTopographyAction, updateSelfTopographyAction, getTopographyEventsAction, getDeivceListAction } from './../../..//services/selfServices';
// import AmosGridTable from './../../bizview/common/tableComponent/table/AmosGridTable';
import AmosGridTable from './../../component/table/table/AmosGridTable';
import SysWsURL from './../../../consts/wsUrlConsts'; import SysWsURL from './../../../consts/wsUrlConsts';
const AmosConfig = endConf.AmosConfig;
const mqttURI = AmosConfig.wsURI.mqttURI;
const options = {
//默认 30 * 1000毫秒，收到 CONNACK 之前等待的时间，即连接超时时间。
connectTimeout: 40000,
// 客户端 ID,随机生成
clientId: 'bank_virtualCloudPlatform_mqtt' + Math.random().toString(16).substr(2, 8),
clean: true,
//默认 1000 毫秒，两次重新连接之间的间隔，客户端 ID 重复、认证失败等客户端会重新连接；
reconnectPeriod: 1000 * 50
}
let client = mqtt.connect(mqttURI, options)
const checkListColumns = (virtualCloudPlatform) => {
return [
{
title: '时间',
dataIndex: 'updateDate',
key: 'updateDate',
width: '45%',
render: (text, record) => {
let font = document.createElement('font');
if (record.deviceStatus === 1) {
font.innerText = text;
font.style.color = 'red';
} else {
font.innerText = text;
}
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
}
}, {
title: '设备名称',
dataIndex: 'name',
key: 'name',
width: '30%',
render: (text, record) => {
let font = document.createElement('font');
if (record.deviceStatus === 1) {
font.innerText = text;
font.style.color = 'red';
} else {
font.innerText = text;
}
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
}
}, {
title: 'ping结果',
dataIndex: 'deviceStatus',
key: 'deviceStatus',
render: (text, record) => {
let p = document.createElement('span');
if (text === 0) {
let font = document.createElement('font');
font.innerText = '连接正常';
p.append(font);
}
if (text === 1) {
let font = document.createElement('font');
font.innerText = '连接异常';
font.style.color = 'red';
p.append(font);
}
return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
}
}
];
};
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 虚拟云平台监控
*/
class VirtualCloudPlatform extends Component { class VirtualCloudPlatform extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = {
current: 1,
pageSize: 10,
pageNumber: 1
};
this.state = { this.state = {
treeData: [
{
name: '',
id: '1',
children: []
}
], //树数据
autoExpandParent: true,
selectedKeys: [], selectedKeys: [],
wSelectedKeys: '', expandedKeys: [],
topologyData: {} //拓扑图数据 topologyData: {}, //拓扑图数据
tableData: [],
isTreeDisplay: true,
isTableDisplay: true,
activeView: 'left',
pHeight: 0,
cityLine: '',
totalCount: 0,
searchParam: [],
selectedRows: [],
selectedRowKeys: [],
pagination: true,
isChecked: false,
}; };
this.updateTopologyData = {};
this.mapView = true;
}
componentWillMount() {
}
componentDidMount() {
this.initData();
if (this.props.location.state) {
this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
this.viewlineItem();
}
// this.receivcemqtt();
}
componentWillReceiveProps(nextProps) {
if (nextProps.location.state) {
this.state.cityLine = JSON.parse(nextProps.location.state.cityLine);
this.viewlineItem();
}
}
receivcemqtt = () => {
client.on('connect', (e) => {
console.log("连接成功！！！")
//QoS0，最多一次送达。也就是发出去就fire掉，没有后面的事情了。
// QoS1，至少一次送达。发出去之后必须等待ack，没有ack，就要找时机重发
// QoS2，准确一次送达。消息id将拥有一个简单的生命周期。
// client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => {
client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => {
if (!res) {
console.log('订阅成功');
} else {
console.log('订阅失败')
}
});
// 接收消息处理
client.on('message', (topic, message) => {
// console.log('收到来自', topic, '的消息', message.toString());
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
});
// 断开发起重连
client.on('reconnect', (error) => {
console.log('正在重连:', error)
});
// 链接异常处理
client.on('error', (error) => {
console.log('连接失败:', error)
});
});
}
//点击地图线操作
viewlineItem = () => {
let { treeData, selectedKeys, cityLine } = this.state;
if (cityLine) {
let currentLine = `${cityLine.citys[0]}-${cityLine.citys[1]}`;
for (let i = 0; i < treeData.length; i++) {
let dataItem = treeData[i].children;
for (let j = 0; j < dataItem.length; j++) {
if (dataItem[j].name === currentLine) {
// selectedKeys.push(dataItem[j].id)
selectedKeys = [dataItem[j].id];
console.log(selectedKeys);
if (selectedKeys[0]) {
this.initTopologyData(selectedKeys[0]);
}
this.setState({
selectedKeys
});
}
}
}
}
}
componentWillUnmount() {
window.localStorage.removeItem('cityLine');
}
getPanelHeight = () => {
let tableNode = this.tableNode;
let tableLocation = dt2react.getOffset(tableNode) || {};
return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight)-30;
};
// 数据初始化
initData = () => {
let expandedKeysData = [];
getSelfTopoTreeAction().then(data => {
data.map(item => {
expandedKeysData.push(item.id);
});
this.initTopologyData(data[0].id);
//this.initTopologyEventData();
this.setState({
treeData: data,
selectedKeys: [data[0].id],
expandedKeys: expandedKeysData,
pHeight: this.getPanelHeight()
}, () => {
this.viewlineItem();
});
});
} }
// 拓扑图数据初始化 // 拓扑图数据初始化
initTopologyData = (id,value = '') => { initTopologyData = (id, value = '') => {
getDyTopoAction(id).then(data => { getSelfTopographyAction(id).then(data => {
if (value === 'refresh') { if (value === 'refresh') {
message.success('拓扑图刷新成功!'); message.success('拓扑图刷新成功!');
} }
//console.log('视图刷新成功!');
this.setState({ this.setState({
topologyData: data topologyData: data
}); });
}); });
getDeivceListAction(0, 10, null).then(data => {
// console.log('表格刷新成功!');
this.setState({ tableData: data.content, totalCount: data.totalElements });
});
} }
// // 拓扑图事件数据初始化
// initTopologyEventData = () => {
// debugger
// getDeivceListAction().then(data => {
// this.setState({
// tableData: data
// });
// });
// }
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
// 树选择 // 树选择
onSelect = (selectedKeys) => { onSelect = (selectedKeys, e) => {
this.initTopologyData(selectedKeys); if (selectedKeys.length && !e.node.props.parent) {
window.localStorage.removeItem('cityLine');
this.initTopologyData(selectedKeys[0]);
this.setState({
selectedKeys
});
}
}
mapLineClick = (data) => {
window.localStorage.removeItem('cityLine');
this.state.cityLine = data;
this.viewlineItem();
}
// 树展开
onExpand = (expandedKeys) => {
this.setState({ this.setState({
selectedKeys, expandedKeys,
wSelectedKeys: '' autoExpandParent: false
});
};
queryEquipPage = () => {
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 });
}); });
} }
// // 选择节点连线
// nodeSelectionLinkChanged = (node) => {
// if (node.isSelected) {
// // 点击选择节点
// if (node.data.clickable) {
// this.initTopologyData(node.data.treeNodeId);
// this.setState({
// selectedKeys: [node.data.treeNodeId]
// });
// }
// // console.log(node.data);
// }
// }
// 选择节点
nodeSelectionChanged = (e) => {
// console.log('e',e);
if (e.isSelected) { }
}
// 节点数据改变 // 节点数据改变
nodeChange = (e) => { nodeChange = (e) => {
// console.log(e.model.toJson()); // console.log(e.model.toJson());
...@@ -51,70 +343,157 @@ class VirtualCloudPlatform extends Component { ...@@ -51,70 +343,157 @@ class VirtualCloudPlatform extends Component {
// 保存节点数据 // 保存节点数据
saveTopologyData = () => { saveTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
const { nodeDataArray,linkDataArray } = this.updateTopologyData; const { nodeDataArray, linkDataArray } = this.updateTopologyData;
const params = { const params = {
treeid: selectedKeys, treeid: selectedKeys[0],
nodeData: nodeDataArray, nodeData: nodeDataArray,
linkData: linkDataArray linkData: linkDataArray
}; };
updateDyTopoAction(params).then(data => { updateSelfTopographyAction(params).then(data => {
message.success('拓扑图保存成功!'); message.success('拓扑图保存成功!');
}); });
} }
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
this.pageConfig.pageNumber = current;
};
/**
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
// 刷新节点 // 刷新节点
refreshTopologyData = () => { refreshTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh'); this.initTopologyData(selectedKeys[0], 'refresh');
} }
// 选择节点 // 视图切换
nodeSelectionChanged = (e) => { toggleView = (value) => {
// console.log('e',e); if (value === 'left') {
if (e.isSelected) { } this.setState({
isTreeDisplay: true,
isTableDisplay: true,
activeView: 'left'
});
} else {
this.setState({
isTreeDisplay: false,
isTableDisplay: false,
activeView: 'detail'
});
}
} }
// // webSocket 接收消息 //webSocket 接收消息
handleData = (data) => { handleData = (data) => {
this.onSelect(data); const { selectedKeys } = this.state;
this.setState({ this.initTopologyData(selectedKeys[0], '');
wSelectedKeys: data
});
} }
render() { render() {
const { topologyData,wSelectedKeys } = this.state; const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
let defaultPageConfig = this.pageConfig;
if (treeData[0] && treeData[0].children.length < 1) {
return null;
}
if (treeData && treeData.length > 0 && selectedKeys && selectedKeys.length > 0) {
if (treeData[0].id != selectedKeys[0]) {
this.mapView = false;
} else {
this.mapView = true;
}
}
const { topologyData } = this.state;
const { tableData, isTableDisplay, pHeight, activeView } = this.state;
console.log(topologyData);
return ( return (
<div className="virtualCloudPlatform-dy-wrapper"> <div className="virtualCloudPlatform-wrapper">
<AmosWebSocket {/* <AmosWebSocket
ref={node => this.aws = node} ref={node => this.aws = node}
url={SysWsURL.dyTopoURI} url={SysWsURL.virtualCloudPlatformURI}
onMessage={this.handleData} onMessage={this.handleData}
reconnect reconnect
debug debug
/> /> */}
<div className="left-content"> <div className="virtualCloudPlatform-header">
<TreeComponent <div className="virtualCloudPlatform-view">
onSelect={this.onSelect} <div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
wSelectedKeys={wSelectedKeys} <img src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
/> </div>
</div> <div className={classnames('detail-view', { 'detail-active-view': activeView === 'detail' })}>
<div className="right-content"> <img src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
<div className="virtualCloudPlatform-topo-header"> </div>
</div>
<div className="virtualCloudPlatform-data">
<div className="virtualCloudPlatform-topo-save"> <div className="virtualCloudPlatform-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>
<div className="virtualCloudPlatform-topo-refresh"> <div className="virtualCloudPlatform-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> </div>
<div className="virtualCloudPlatform-topo-content"> </div>
<TopologyComponent <div className="virtualCloudPlatform-content">
topologyData={topologyData} {<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged} <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>
<div className="net-topo-content">
<TopologyComponent
topologyData={topologyData}
//nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
nodeSelectionChanged={this.nodeSelectionChanged}
nodeChange={this.nodeChange}
/>
</div>
</div>
</div> </div>
{/* <div className={`middle-content ${isTreeDisplay && isTableDisplay?'':'only-middle'}`}>
<div className="paslogy-content">
{
this.mapView ? <IndexChart mapLineClick={this.mapLineClick} /> :
<TopologyComponent
topologyData={topologyData}
nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
nodeChange={this.nodeChange}
/>
}
</div>
</div> */}
</div> </div>
</div> </div>
); );
......
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