Skip to content

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

修改自建系统为通用接口

parent 3a321c1a
Show whitespace changes
Inline Side-by-side
Showing with 75 additions and 351 deletions
src/view/bank/virtualCloudPlatform/index.js
View file @ c8140d95
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 mqtt from 'mqtt';
import * as endConf from 'amos-processor/lib/config/endconf';
// import AmosGridTable from './../../bizview/common/tableComponent/table/AmosGridTable';
import AmosGridTable from './../../component/table/table/AmosGridTable';
import SysWsURL from './../../../consts/wsUrlConsts';
const AmosConfig = endConf.AmosConfig;
import { getTypeBySystem } from './../financialCityLan/conf';
import { getTopoTreeByTypeAction,getNodesByTypeAndTreeIdAction,saveNodesByTypeUrlAction } from './../../../services/monitorService';
import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from './../../../services/monitorService';
const type = getTypeBySystem('CloudPlatform');
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
class VirtualCloudPlatform extends Component {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -59,100 +49,21 @@ class VirtualCloudPlatform extends Component {
selectedRows: [],
selectedRowKeys: [],
pagination: true,
isChecked: false,
isChecked: false
};
this.updateTopologyData = {};
this.mapView = true;
}
componentWillMount() {
}
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;
return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
};
// 数据初始化
......@@ -164,20 +75,20 @@ class VirtualCloudPlatform extends Component {
});
this.initTopologyData(data[0].id);
//this.initTopologyEventData();
this.setState({
this.setState(
{
treeData: data,
selectedKeys: [data[0].id],
expandedKeys: expandedKeysData,
pHeight: this.getPanelHeight()
}, () => {
this.viewlineItem();
});
});
}
);
});
};
// 拓扑图数据初始化
initTopologyData = (id, value = '') => {
getNodesByTypeAndTreeIdAction(type,id).then(data => {
getNodesByTypeAndTreeIdAction(type, id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
......@@ -187,21 +98,15 @@ class VirtualCloudPlatform extends Component {
topologyData: data
});
});
}
};
/**
* 获取表格所选则的行数据
*/
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
// 树选择
onSelect = (selectedKeys, e) => {
if (selectedKeys.length && !e.node.props.parent) {
......@@ -211,39 +116,29 @@ class VirtualCloudPlatform extends Component {
selectedKeys
});
}
}
mapLineClick = (data) => {
window.localStorage.removeItem('cityLine');
this.state.cityLine = data;
this.viewlineItem();
};
}
// 树展开
onExpand = (expandedKeys) => {
onExpand = expandedKeys => {
this.setState({
expandedKeys,
autoExpandParent: false
});
};
// 选择节点
nodeSelectionChanged = (e) => {
nodeSelectionChanged = e => {
// console.log('e',e);
if (e.isSelected) { }
if (e.isSelected) {
}
};
// 节点数据改变
nodeChange = (e) => {
nodeChange = e => {
// console.log(e.model.toJson());
this.updateTopologyData = JSON.parse(e.model.toJson());
}
};
// 保存节点数据
saveTopologyData = () => {
......@@ -254,10 +149,10 @@ class VirtualCloudPlatform extends Component {
nodeData: nodeDataArray,
linkData: linkDataArray
};
saveNodesByTypeUrlAction(type,params).then(data => {
saveNodesByTypeUrlAction(type, params).then(data => {
message.success('拓扑图保存成功!');
});
}
};
/**
* 分页设置参数
......@@ -271,8 +166,8 @@ class VirtualCloudPlatform extends Component {
};
/**
* 获取表格刷新方法
*/
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
......@@ -289,10 +184,10 @@ class VirtualCloudPlatform extends Component {
refreshTopologyData = () => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], 'refresh');
}
};
// 视图切换
toggleView = (value) => {
toggleView = value => {
if (value === 'left') {
this.setState({
isTreeDisplay: true,
......@@ -306,63 +201,55 @@ class VirtualCloudPlatform extends Component {
activeView: 'detail'
});
}
}
};
//webSocket 接收消息
handleData = (data) => {
handleData = data => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
}
handetopologyData =(topologyData) =>{
};
handetopologyData = topologyData => {
let pointdatas = topologyData.nodeData || [];
let newNodeData = [];
console.log(pointdatas)
console.log(pointdatas);
pointdatas.map(e => {
if(e && e.ports && null !== e.ports){
if (e && e.ports && null !== e.ports) {
var jsonObj = JSON.parse(e.ports);
let item = {...e, ...jsonObj};
newNodeData.push(item)
}else if(e){
let item = { ...e, ...jsonObj };
newNodeData.push(item);
} else if (e) {
let item = e;
newNodeData.push(item)
newNodeData.push(item);
}
})
});
topologyData.nodeData = newNodeData;
return topologyData;
}
};
render() {
const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
let defaultPageConfig = this.pageConfig;
const { treeData, selectedKeys, expandedKeys, isTreeDisplay } = this.state;
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]) {
if (treeData[0].id !== selectedKeys[0]) {
this.mapView = false;
} else {
this.mapView = true;
}
}
debugger
let { topologyData } = this.state;
let newtopologyData= this.handetopologyData(topologyData)
const { tableData, isTableDisplay, pHeight, activeView } = this.state;
let newtopologyData = this.handetopologyData(topologyData);
const { isTableDisplay, activeView } = this.state;
console.log(topologyData);
return (
<div className="virtualCloudPlatform-wrapper">
<AmosWebSocket
ref={node => this.aws = node}
url={SysWsURL.technologyIpURI}
onMessage={this.handleData}
reconnect
debug
/>
<AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.technologyIpURI} onMessage={this.handleData} reconnect debug />
<div className="virtualCloudPlatform-header">
<div className="virtualCloudPlatform-view">
<div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
......@@ -382,8 +269,8 @@ class VirtualCloudPlatform extends Component {
</div>
</div>
<div className="virtualCloudPlatform-content">
{<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
{
<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
<TreeComponent
treeData={treeData}
//treeData={moniTreeData}
......@@ -392,12 +279,11 @@ class VirtualCloudPlatform extends Component {
// onSelect={this.onSelect}
onExpand={this.onExpand}
/>
</div>}
</div>
}
<div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
<div className="paslogy-content">
<div className="middle-content-div">
</div>
<div className="middle-content-div"></div>
<div className="net-topo-content">
<TopologyComponent
topologyData={newtopologyData}
......@@ -408,28 +294,12 @@ class VirtualCloudPlatform extends Component {
</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>
);
}
}
VirtualCloudPlatform.propTypes = {
};
VirtualCloudPlatform.propTypes = {};
export default VirtualCloudPlatform;
src/view/bizview/selfSupport/index.js
View file @ c8140d95
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 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 { getDeivceListAction } from './../../../services/selfServices';
import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from './../../../services/monitorService';
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_self_mqtt' + Math.random().toString(16).substr(2, 8),
clean: true,
//默认 1000 毫秒，两次重新连接之间的间隔，客户端 ID 重复、认证失败等客户端会重新连接；
reconnectPeriod: 1000 * 50
}
let client = mqtt.connect(mqttURI, options)
import { getTypeBySystem } from './../../bank/financialCityLan/conf';
const checkListColumns = (self) => {
return [
......@@ -87,6 +71,7 @@ const checkListColumns = (self) => {
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
const type = getTypeBySystem('SelfSupport');
class SelfSupport extends Component {
......@@ -121,7 +106,7 @@ class SelfSupport extends Component {
selectedRows: [],
selectedRowKeys: [],
pagination: true,
isChecked: false,
isChecked: false
};
this.updateTopologyData = {};
this.mapView = true;
......@@ -130,97 +115,11 @@ class SelfSupport extends Component {
}
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;
};
// 数据初始化
// eslint-disable-next-line react/sort-comp
initData = () => {
let expandedKeysData = [];
getSelfTopoTreeAction().then(data => {
getTopoTreeByTypeAction(type).then(data => {
data.map(item => {
expandedKeysData.push(item.id);
});
......@@ -231,15 +130,25 @@ class SelfSupport extends Component {
selectedKeys: [data[0].id],
expandedKeys: expandedKeysData,
pHeight: this.getPanelHeight()
}, () => {
this.viewlineItem();
});
});
}
componentDidMount() {
this.initData();
}
getPanelHeight = () => {
let tableNode = this.tableNode;
let tableLocation = dt2react.getOffset(tableNode) || {};
return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
};
// 拓扑图数据初始化
initTopologyData = (id, value = '') => {
getSelfTopographyAction(id).then(data => {
getNodesByTypeAndTreeIdAction(type,id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
......@@ -255,23 +164,12 @@ class SelfSupport extends Component {
});
}
// // 拓扑图事件数据初始化
// 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);
};
......@@ -286,14 +184,6 @@ class SelfSupport extends Component {
}
}
mapLineClick = (data) => {
window.localStorage.removeItem('cityLine');
this.state.cityLine = data;
this.viewlineItem();
}
// 树展开
onExpand = (expandedKeys) => {
this.setState({
......@@ -314,20 +204,6 @@ class SelfSupport extends Component {
});
}
// // 选择节点连线
// 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);
......@@ -349,7 +225,7 @@ class SelfSupport extends Component {
nodeData: nodeDataArray,
linkData: linkDataArray
};
updateSelfTopographyAction(params).then(data => {
saveNodesByTypeUrlAction(type,params).then(data => {
message.success('拓扑图保存成功!');
});
}
......@@ -424,7 +300,7 @@ class SelfSupport extends Component {
}
}
const { topologyData } = this.state;
const { tableData, isTableDisplay, pHeight, activeView } = this.state;
const { tableData, isTableDisplay, activeView } = this.state;
console.log(topologyData);
return (
<div className="self-wrapper">
......@@ -485,36 +361,14 @@ class SelfSupport extends Component {
</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 className={classnames({ 'right-content': isTableDisplay, 'right-content-close': !isTableDisplay })}>
<div className="devive-title">
日志
</div>
<div className="device-lists" ref={node => this.tableNode = node}>
{/* <AmosGridTable
columns={checkListColumns(this)}
getTableDataAction={()=>{}}
callBack={()=>{}}
isPageable={true}
isChecked={false}
dataList={tableData}
//dataList={data}
getPanelHeight={this.getPanelHeight}
pHeight={pHeight}
/>
</div> */}
<AmosGridTable
columns={checkListColumns(this)}
callBack={this.reload}
......
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