Skip to content

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

金融城初始化

parent 7a754e2f
Hide whitespace changes
Inline Side-by-side
Showing with 641 additions and 433 deletions
src/styles/view/biz/financialCityLan/index.scss
View file @ f073bda6
.financialCityLan-dy-wrapper {
.financialCityLan-wrapper {
height: 100%;
display: flex;
.financialCityLan-header {
height: 42px;
display: flex;
background: rgba(243, 243, 243, 1);
border: 1px solid rgba(234, 234, 234, 1);
.financialCityLan-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);
}
}
.financialCityLan-data {
flex: 1;
padding-right: 42px;
text-align: right;
padding-top: 2px;
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-content {
height: calc(100% - 42px);
display: flex;
}
.left-content {
width: 300px;
position: relative;
z-index: 1;
background: #fff;
border-right: 1px solid rgba(234, 234, 234, 1);
.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;
}
}
}
padding-top: 26px;
.ant-tree {
height: calc(100% - 42px);
height: 100%;
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;
......@@ -91,87 +153,123 @@
}
}
}
}
}
.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;
}
.left-content-close {
position: relative;
.tree-del-img {
width: 16px;
height: 16px;
vertical-align: sub;
margin-right: 4px;
}
}
}
.tree-wrapper {
display: none;
}
}
.only-middle {
width: 100%!important;
}
.middle-content {
// flex: 1;
width: calc(100% - 300px);
height: 100%;
.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;
.paslogy-content {
// display: flex;
height: 100%;
img {
height: 20px;
.middle-content-div {
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;
}
.financialCityLan-topo-save {
display: inline-block;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
.content-right{
margin-top: 18px;
margin-left: 30px;
width: 350px;
height: 24px;
background: #5be3ff;
text-align: left;
padding-left: 10px;
padding-top: 3px;
opacity: 1;
border-radius: 4px 0px 0px 4px;
cursor: pointer;
padding: 8px;
margin-right: 42px;
opacity:1;
}
}
.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;
.net-topo-content {
height: calc(100% - 42px);
.topology-net {
canvas {
outline: none;
}
.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;
}
}
}
.financialCityLan-topo-content {
.net-topo-content {
height: calc(100% - 42px);
.topology-financialCityLan {
.topology-net {
canvas {
outline: none;
}
......@@ -199,15 +297,15 @@
display: inline-block;
padding-left: 10px;
}
.amosicon {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
}
src/view/bank/financialCityLan/TopologyComponent.js
View file @ f073bda6
......@@ -6,7 +6,7 @@ import classnames from 'classnames';
import { nodeDetailTopoAction } from './../../../services/dynamicRingService';
const goObj = go.GraphObject.make;
const deviceSource = '/src/assets/bizView/dynamicRing';
const deviceSource = '/src/assets/bizView/selfsupport';
class TopologyComponent extends Component {
......@@ -81,7 +81,7 @@ class TopologyComponent extends Component {
if (v) {
return '#FF0000';
}
return 'rgba(0,255,8,1)';
return '#00FFFF';
}
showWarnHighlights = (d, v) => {
......@@ -324,7 +324,7 @@ class TopologyComponent extends Component {
const { className,style, topologyData } = this.props;
const { nodeData = [] } = topologyData || {};
return (
<div ref="goJsDiv" style={style} className={classnames('topology-financialCityLan', 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} />)
}
......
src/view/bank/financialCityLan/TreeComponent.js
View file @ f073bda6
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';
import { Tree } from 'amos-antd';
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>
);
}
return data.map((item) => {
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}
>
<TreeNode title={item.name} key={item.id} parent={item.parent} >
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return (<TreeNode key={item.id}
title={item.name}
id={item.id}
dataRef={item}
parent={item.parent}
group={item.group}
/>);
return (<TreeNode title={item.name} key={item.id} parent={item.parent} />);
});
}
render() {
const { treeData,selectedKeys,expandedKeys,autoExpandParent,isMenuVisible } = this.state;
const { className } = this.props;
const { className,treeData,expandedKeys,selectedKeys,autoExpandParent,onSelect,onExpand } = 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}
onSelect={onSelect}
onExpand={onExpand}
autoExpandParent={autoExpandParent}
// onRightClick={this.treeNodeonRightClick}
>
{this.renderTreeNodes(treeData)}
</Tree>
{isMenuVisible && this.getNodeTreeRightClickMenu()}
</div>
);
}
......@@ -310,12 +41,11 @@ class TreeComponent extends Component {
TreeComponent.propTypes = {
className: PropTypes.string,
treeData: PropTypes.object,
selectedKeys: PropTypes.array,
expandedKeys: PropTypes.array,
autoExpandParent: PropTypes.bool,
onSelect: PropTypes.func,
wSelectedKeys: PropTypes.string
};
TreeComponent.defaultProps = {
wSelectedKeys: ''
onExpand: PropTypes.func
};
export default TreeComponent;
src/view/bank/financialCityLan/index.js
View file @ f073bda6
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { message } from 'amos-framework';
import dt2react from 'dt2react';
import AmosWebSocket from 'amos-websocket';
import TopologyComponent from './TopologyComponent';
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';
/**
* 金融城域网
*/
const AmosConfig = endConf.AmosConfig;
const mqttURI = AmosConfig.wsURI.mqttURI;
const options = {
//默认 30 * 1000毫秒，收到 CONNACK 之前等待的时间，即连接超时时间。
connectTimeout: 40000,
// 客户端 ID,随机生成
clientId: 'bank_financialCityLan_mqtt' + Math.random().toString(16).substr(2, 8),
clean: true,
//默认 1000 毫秒，两次重新连接之间的间隔，客户端 ID 重复、认证失败等客户端会重新连接；
reconnectPeriod: 1000 * 50
}
let client = mqtt.connect(mqttURI, options)
const checkListColumns = (financialCityLan) => {
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 FinancialCityLan extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 10,
pageNumber: 1
};
this.state = {
treeData: [
{
name: '',
id: '1',
children: []
}
], //树数据
autoExpandParent: true,
selectedKeys: [],
wSelectedKeys: '',
topologyData: {} //拓扑图数据
expandedKeys: [],
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 = '') => {
getDyTopoAction(id).then(data => {
initTopologyData = (id, value = '') => {
getSelfTopographyAction(id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
//console.log('视图刷新成功!');
this.setState({
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) => {
this.initTopologyData(selectedKeys);
onSelect = (selectedKeys, e) => {
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({
selectedKeys,
wSelectedKeys: ''
expandedKeys,
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) => {
// console.log(e.model.toJson());
......@@ -50,70 +343,157 @@ class FinancialCityLan extends Component {
// 保存节点数据
saveTopologyData = () => {
const { selectedKeys } = this.state;
const { nodeDataArray,linkDataArray } = this.updateTopologyData;
const { nodeDataArray, linkDataArray } = this.updateTopologyData;
const params = {
treeid: selectedKeys,
treeid: selectedKeys[0],
nodeData: nodeDataArray,
linkData: linkDataArray
};
updateDyTopoAction(params).then(data => {
updateSelfTopographyAction(params).then(data => {
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 = () => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh');
this.initTopologyData(selectedKeys[0], 'refresh');
}
// 选择节点
nodeSelectionChanged = (e) => {
// console.log('e',e);
if (e.isSelected) { }
// 视图切换
toggleView = (value) => {
if (value === 'left') {
this.setState({
isTreeDisplay: true,
isTableDisplay: true,
activeView: 'left'
});
} else {
this.setState({
isTreeDisplay: false,
isTableDisplay: false,
activeView: 'detail'
});
}
}
// // webSocket 接收消息
//webSocket 接收消息
handleData = (data) => {
this.onSelect(data);
this.setState({
wSelectedKeys: data
});
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
}
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 (
<div className="financialCityLan-dy-wrapper">
<AmosWebSocket
<div className="financialCityLan-wrapper">
{/* <AmosWebSocket
ref={node => this.aws = node}
url={SysWsURL.dyTopoURI}
url={SysWsURL.financialCityLanURI}
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-header">
<div className="financialCityLan-view">
<div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
<img src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
</div>
<div className={classnames('detail-view', { 'detail-active-view': activeView === 'detail' })}>
<img src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
</div>
</div>
<div className="financialCityLan-data">
<div className="financialCityLan-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="financialCityLan-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="financialCityLan-topo-content">
<TopologyComponent
topologyData={topologyData}
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged}
</div>
<div className="financialCityLan-content">
{<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
<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 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>
);
......
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