Skip to content

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

更改自建系统样式

parent 024c1a16
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 225 deletions
src/styles/view/biz/selfsupport/index.scss
View file @ bcb56af6
......@@ -171,7 +171,7 @@
width: calc(100% - 800px);
height: 100%;
.paslogy-content {
// display: flex;
......@@ -211,20 +211,20 @@
opacity: 1;
margin-right: 42px;
opacity:1;
}
}
.net-topo-content {
height: calc(100% - 42px);
.topology-net {
canvas {
outline: none;
}
.tooltip-content {
width: 200px;
background: #345fa6;
......@@ -232,18 +232,18 @@
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;
......@@ -305,7 +305,7 @@
.right-content {
height: 100%;
.devive-title {
height: 40px;
......@@ -325,45 +325,46 @@
.ant-table-wrapper {
padding: 10px;
width: 500px;
.ant-spin-nested-loading {
border: 1px solid $core-border-color;
border-bottom: 0;
}
}
.ant-table {
border-radius: 0;
}
.table-bar {
.ant-table-pagination {
float: right;
display: inline;
width: 100%;
}
}
.ant-table-title {
display: none;
}
.ant-table-content {
border-color: $core-border-color;
.ant-table-header {
& table {
// margin-right: -17px;
border: $core-border-color;
}
}
.ant-table-body {
& table {
border: $core-border-color;
}
}
}
.ant-table-thead {
tr {
th {
......@@ -373,7 +374,7 @@
}
}
}
.ant-table-body {
tr {
td {
......@@ -383,16 +384,16 @@
}
}
}
.ant-table-placeholder {
color: $biz-table-font-color;
background: $content-color;//rgba(40, 40, 40, 1);
}
.highlight-row {
background: #ecf6fd;
}
.ant-pagination-item {
height: 25px;
min-width: 25px;
......@@ -400,16 +401,16 @@
line-height: 25px;
background: $core-border-color;//#333;
border-radius: 6px;
a {
color: $biz-table-font-color;
}
}
.ant-pagination-total-text {
color: $biz-table-font-color;
}
.ant-pagination-prev {
height: 25px;
min-width: 25px;
......@@ -417,14 +418,14 @@
line-height: 25px;
background: $core-border-color;//#333;
border-radius: 6px;
::after {
height: 25px;
line-height: 25px;
color: $biz-table-font-color;
}
}
.ant-pagination-item-active {
height: 25px;
min-width: 25px;
......@@ -432,12 +433,12 @@
line-height: 25px;
background: $core-color;//#151515;
border-radius: 6px;
a {
color: white;
}
}
.ant-pagination-next {
height: 25px;
min-width: 25px;
......@@ -445,23 +446,25 @@
line-height: 25px;
background: $core-border-color;//#333;
border-radius: 6px;
::after {
height: 25px;
line-height: 25px;
color: $biz-table-font-color;
}
}
.ant-pagination-options {
margin-top: 5px;
margin-top: -12%;
margin-left: 88%;
.ant-select-selection {
height: 25px;
color: $biz-table-font-color;
background: $biz-title-color;
border-color: $core-border-color;
.ant-select-arrow {
color: $biz-table-font-color;
}
......@@ -474,5 +477,5 @@
display: none;
}
}
src/view/bizview/selfSupport/TopologyComponent.js
View file @ bcb56af6
......@@ -9,7 +9,6 @@ const goObj = go.GraphObject.make;
const deviceSource = '/src/assets/bizView/selfsupport';
class TopologyComponent extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -27,7 +26,7 @@ class TopologyComponent extends Component {
componentDidUpdate(prevProps, prevState) {
const { topologyData } = this.props;
const { nodeData, linkData } = topologyData;
if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
if (!deepEqual(prevProps.topologyData, this.props.topologyData)) {
this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
this.initTop = 0;
this.initLeft = 0;
......@@ -37,52 +36,54 @@ class TopologyComponent extends Component {
// this function is the Node.dragComputation, to limit the movement of the parts
stayInFixedArea = (part, pt, gridpt) => {
let diagram = part.diagram;
if (diagram === null) {return pt;}
// compute the document area without padding
if (diagram === null) {
return pt;
}
// compute the document area without padding
let v = diagram.documentBounds.copy();
v.subtractMargin(diagram.padding);
// get the bounds of the part being dragged
// get the bounds of the part being dragged
let b = part.actualBounds;
let loc = part.location;
// now limit the location appropriately
// now limit the location appropriately
let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
return new go.Point(x, y);
}
};
// 选择节点
nodeSelectionChanged = (node) => {
nodeSelectionChanged = node => {
this.props.nodeSelectionChanged(node);
}
};
// 设备资源图片
getDeviceSource = (v) => {
getDeviceSource = v => {
return `${deviceSource}/${v}.png`;
}
};
// 告警图片
getWarnPic = (v) => {
getWarnPic = v => {
if (v) {
return '/src/assets/bizView/netTopology/alarm.png';
}
}
};
// 告警高亮
warnHighlights = (d,v) => {
warnHighlights = (d, v) => {
if (d.warnState) {
this.showWarnHighlights(d, v);
return d.text;
}
return d.text;
}
};
// 获取线颜色
getLinkColor = (v) => {
getLinkColor = v => {
if (v) {
return '#FF0000';
}
return '#00FFFF';
}
};
showWarnHighlights = (d, v) => {
const oldDom = this[d.key];
......@@ -92,19 +93,19 @@ class TopologyComponent extends Component {
oldDom.style.width = '100px';
oldDom.style.height = '100px';
oldDom.style.left = `${pos.x + 18}px`;
oldDom.style.top = `${pos.y + 20}px`;
oldDom.style.top = `${pos.y + 20}px`;
} else {
let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
let customBox = document.createElement('div');
customBox.style.left = `${pos.x + 10}px`;
customBox.style.top = `${pos.y + 26}px`;
customBox.style.top = `${pos.y + 26}px`;
customBox.style.position = 'absolute';
customBox.style.zIndex = 1;
customBox.style.width = '100px';
customBox.style.height = '100px';
customBox.style.backgroundPosition = 'center';
customBox.id = d.key;
customBox.setAttribute('class','amos-help-tip-pulse-second');
customBox.setAttribute('class', 'amos-help-tip-pulse-second');
this.diagram.div.appendChild(customBox);
}
};
......@@ -113,32 +114,38 @@ class TopologyComponent extends Component {
updateTopo = () => {
const { nodeDataArray } = this.updateTopologyData;
let pos;
nodeDataArray.filter(item => item.warnState).map(item => {
pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
this[item.key].style.left = `${pos.x + 18}px`;
this[item.key].style.top = `${pos.y + 20}px`;
});
}
nodeDataArray
.filter(item => item.warnState)
.map(item => {
pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
this[item.key].style.left = `${pos.x + 18}px`;
this[item.key].style.top = `${pos.y + 20}px`;
});
};
getNodeDetail = (id) => {
getNodeDetail = id => {
nodeDetailTopoAction(id).then(data => {
this.setState({
detailData: data
});
});
}
};
renderDetail = () => {
const { detailData } = this.state;
return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
{detailData.map(item => {
return (<div key={item.name} className="tooltip-item">
<div className="item-name">{item.name}: </div>
<div className="item-value">{item.value}</div>
</div>);
})}
</div>);
}
return (
<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
{detailData.map(item => {
return (
<div key={item.name} className="tooltip-item">
<div className="item-name">{item.name}: </div>
<div className="item-value">{item.value}</div>
</div>
);
})}
</div>
);
};
// 提示框
showToolTip = (obj, diagram, tool) => {
......@@ -148,12 +155,18 @@ class TopologyComponent extends Component {
toolTipDIV.style.top = `${pt.y}px`;
toolTipDIV.style.display = 'block';
this.getNodeDetail(obj.data.id);
}
};
//设置椭圆宽度
setEllipseWidth = v => {
let width = v === '西安中心' ? 500 : 300;
return width;
};
hideToolTip = (diagram, tool) => {
let toolTipDIV = document.getElementById('toolTipDIV');
toolTipDIV.style.display = 'none';
}
};
renderCanvas = () => {
const { topologyData } = this.props;
......@@ -162,66 +175,91 @@ class TopologyComponent extends Component {
show: this.showToolTip,
hide: this.hideToolTip
});
this.customEditor = goObj(go.HTMLInfo,{
this.customEditor = goObj(go.HTMLInfo, {
show: this.showWarnHighlights
});
this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
// allowHorizontalScroll: false, // disallow scrolling or panning
// allowVerticalScroll: false,
allowZoom: false, // disallow zooming
allowZoom: false, // disallow zooming
initialContentAlignment: go.Spot.TopLeft,
initialPosition: new go.Point(0, 0),
'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
'animationManager.isEnabled': false, // 过渡动画
'textEditingTool.defaultTextEditor': this.customEditor,
// fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
ModelChanged: (e) => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
ModelChanged: e => {
// just for demonstration purposes,
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
// console.log(e.model.toJson(), 'model');
this.updateTopologyData = JSON.parse(e.model.toJson());
this.props.nodeChange(e);
}
},
SelectionMoved: (e) => {
setTimeout(()=> {
SelectionMoved: e => {
setTimeout(() => {
this.updateTopo();
},0);
}, 0);
},
ViewportBoundsChanged: () => {
setTimeout(()=> {
setTimeout(() => {
this.updateTopo();
},0);
}, 0);
}
});
this.diagram.nodeTemplateMap.add('Circle',
goObj(go.Node, 'Vertical',
this.diagram.nodeTemplateMap.add(
'Circle',
goObj(
go.Node,
'Vertical',
{
selectionObjectName: 'ICON',
locationObjectName: 'ICON'
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.Panel, 'Auto',
goObj(go.Shape, 'Circle', { name: 'ICON',portId: '',
width: 22, height: 22, strokeWidth: 0,fill: '#009dd9' },
),
),
goObj(go.TextBlock,
{ margin: 15,cursor: 'pointer',font: '15px sans-serif' },
new go.Binding('text', 'text' )),
goObj(go.Panel, 'Auto', goObj(go.Shape, 'Circle', { name: 'ICON', portId: '', width: 22, height: 22, strokeWidth: 0, fill: '#009dd9' })),
goObj(go.TextBlock, { margin: 15, cursor: 'pointer', font: '15px sans-serif' }, new go.Binding('text', 'text')),
{
selectionAdornmentTemplate:
goObj(go.Adornment, 'Auto',
goObj(go.Shape, 'Circle',
{ fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
goObj(go.Placeholder)
) // end Adornment
},
));
selectionAdornmentTemplate: goObj(
go.Adornment,
'Auto',
goObj(go.Shape, 'Circle', { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
goObj(go.Placeholder)
) // end Adornment
}
)
);
this.diagram.nodeTemplateMap.add('Picture',
goObj(go.Node, 'Vertical',
this.diagram.nodeTemplateMap.add(
'Shape',
goObj(
go.Node,
'Vertical',
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(
go.Shape,
'Rectangle',
{
name: 'SHAPE',
fill: '#5BE3FF',
stroke: '#5BE3FF',
strokeWidth: 1,
width: 500,
height: 24
},
new go.Binding('width', 'text', v => this.setEllipseWidth(v))
),
goObj(go.TextBlock, '无', { textAlign: 'left', margin: -25, stroke: '#fff', font: 'bold 18px Microsoft YaHei UI' }, new go.Binding('text'))
)
);
this.diagram.nodeTemplateMap.add(
'Picture',
goObj(
go.Node,
'Vertical',
{
locationSpot: go.Spot.Center,
locationObjectName: 'ICON',
......@@ -231,27 +269,31 @@ class TopologyComponent extends Component {
toolTip: myToolTip
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.Panel,'Spot',
goObj(go.Shape, 'Rectangle',
{ fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
goObj(go.Picture,
goObj(
go.Panel,
'Spot',
goObj(go.Shape, 'Rectangle', { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
goObj(
go.Picture,
{
width: 65,
height: 45,
alignment: new go.Spot(1, 0, 100 ,0 )
alignment: new go.Spot(1, 0, 100, 0)
},
new go.Binding('source','warnState',(v) => this.getWarnPic(v))
new go.Binding('source', 'warnState', v => this.getWarnPic(v))
),
goObj(go.TextBlock,
goObj(
go.TextBlock,
{
alignment: new go.Spot(1, 0, 100 ,-1),
alignment: new go.Spot(1, 0, 100, -1),
stroke: 'white',
font: '15px sans-serif'
},
new go.Binding('text', 'warnMessage')
),
)
),
goObj(go.Picture,
goObj(
go.Picture,
{
margin: 0,
name: 'ICON',
......@@ -260,24 +302,23 @@ class TopologyComponent extends Component {
cursor: 'pointer',
portId: ''
},
new go.Binding('source','source',(v) => this.getDeviceSource(v))
new go.Binding('source', 'source', v => this.getDeviceSource(v))
),
goObj(go.TextBlock, '无',
goObj(
go.TextBlock,
'无',
{ margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
),
new go.Binding('text', '', (v, d) => this.warnHighlights(v, d))
),
{
selectionAdornmentTemplate:
goObj(go.Adornment, 'Auto',
goObj(go.Shape,
{ fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
goObj(go.Placeholder)
) // end Adornment
selectionAdornmentTemplate: goObj(go.Adornment, 'Auto', goObj(go.Shape, { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }), goObj(go.Placeholder)) // end Adornment
}
)
);
this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
this.diagram.groupTemplate = goObj(
go.Group,
'Vertical',
{
resizable: true,
locationObjectName: 'SHAPE',
......@@ -287,7 +328,8 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.TextBlock, // group title
goObj(
go.TextBlock, // group title
{
width: 100,
height: 24,
......@@ -298,8 +340,11 @@ class TopologyComponent extends Component {
textAlign: 'center',
verticalAlignment: go.Spot.Center
},
new go.Binding('text')),
goObj(go.Shape, 'Rectangle',
new go.Binding('text')
),
goObj(
go.Shape,
'Rectangle',
{
name: 'SHAPE',
parameter1: 14,
......@@ -307,27 +352,24 @@ class TopologyComponent extends Component {
stroke: 'rgba(28,154,210,1)',
strokeWidth: 1
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify)
)
);
this.diagram.linkTemplate =
goObj(go.Link,
goObj(go.Shape, { strokeWidth: 3 },
new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
)
);
this.diagram.linkTemplate = goObj(go.Link, goObj(go.Shape, { strokeWidth: 3 }, new go.Binding('stroke', 'warnState', v => this.getLinkColor(v))));
this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
}
};
render() {
const { className,style, topologyData } = this.props;
const { className, style, topologyData } = this.props;
const { nodeData = [] } = topologyData || {};
return (
<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} />
))}
{nodeData.length > 0 && this.renderDetail()}
</div>
);
......
src/view/bizview/selfSupport/index.js
View file @ bcb56af6
......@@ -11,7 +11,7 @@ import AmosGridTable from './../../component/table/table/AmosGridTable';
import SysWsURL from './../../../consts/wsUrlConsts';
import { getTypeBySystem } from './../../bank/financialCityLan/conf';
const checkListColumns = (self) => {
const checkListColumns = self => {
return [
{
title: '时间',
......@@ -26,9 +26,10 @@ const checkListColumns = (self) => {
} else {
font.innerText = text;
}
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
}
}, {
},
{
title: '设备名称',
dataIndex: 'name',
key: 'name',
......@@ -41,9 +42,10 @@ const checkListColumns = (self) => {
} else {
font.innerText = text;
}
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
}
}, {
},
{
title: 'ping结果',
dataIndex: 'deviceStatus',
key: 'deviceStatus',
......@@ -61,20 +63,18 @@ const checkListColumns = (self) => {
font.style.color = 'red';
p.append(font);
}
return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
}
}
];
};
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
const type = getTypeBySystem('SelfSupport');
class SelfSupport extends Component {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -112,16 +112,14 @@ class SelfSupport extends Component {
this.updateTopologyData = {};
this.mapView = true;
}
componentWillMount() {
}
componentWillMount() {}
// 数据初始化
// eslint-disable-next-line react/sort-comp
initData = () => {
let expandedKeysData = [];
getTopoTreeByTypeAction(type).then(data => {
if(data.length > 0){
if (data.length > 0) {
data.map(item => {
expandedKeysData.push(item.id);
});
......@@ -142,9 +140,8 @@ class SelfSupport extends Component {
pHeight: this.getPanelHeight()
});
}
});
}
};
componentDidMount() {
this.initData();
......@@ -156,11 +153,9 @@ class SelfSupport extends Component {
return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
};
// 拓扑图数据初始化
initTopologyData = (id, value = '') => {
getNodesByTypeAndTreeIdAction(type,id).then(data => {
getNodesByTypeAndTreeIdAction(type, id).then(data => {
if (value === 'refresh') {
message.success('拓扑图刷新成功!');
}
......@@ -171,25 +166,22 @@ class SelfSupport extends Component {
});
});
let tatableDataXianshi =this.state.tableDataXianshi;
if(true === tatableDataXianshi){
let tatableDataXianshi = this.state.tableDataXianshi;
if (true === tatableDataXianshi) {
getDeivceListAction(0, 10, null).then(data => {
// console.log('表格刷新成功!');
this.setState({ tableData: data.content, totalCount: data.totalElements });
});
}
}
};
/**
* 获取表格所选则的行数据
*/
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
};
// 树选择
onSelect = (selectedKeys, e) => {
if (selectedKeys.length && !e.node.props.parent) {
......@@ -199,45 +191,42 @@ class SelfSupport extends Component {
selectedKeys
});
}
}
};
// 树展开
onExpand = (expandedKeys) => {
onExpand = expandedKeys => {
this.setState({
expandedKeys,
autoExpandParent: false
});
};
queryEquipPage = () => {
let tableDataXianshi = this.state.tableDataXianshi;
if (true === tableDataXianshi ){
if (true === tableDataXianshi) {
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 });
});
} else {
this.setState({ tableData:[], totalCount: 0 });
this.setState({ tableData: [], totalCount: 0 });
}
}
};
// 选择节点
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 = () => {
......@@ -248,14 +237,14 @@ class SelfSupport extends Component {
nodeData: nodeDataArray,
linkData: linkDataArray
};
saveNodesByTypeUrlAction(type,params).then(data => {
saveNodesByTypeUrlAction(type, params).then(data => {
message.success('拓扑图保存成功!');
});
}
};
/**
* 分页设置参数
*/
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
......@@ -265,8 +254,8 @@ class SelfSupport extends Component {
};
/**
* 获取表格刷新方法
*/
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
......@@ -283,10 +272,10 @@ class SelfSupport extends Component {
refreshTopologyData = () => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], 'refresh');
}
};
// 视图切换
toggleView = (value) => {
toggleView = value => {
if (value === 'left') {
this.setState({
isTreeDisplay: true,
......@@ -304,14 +293,13 @@ class SelfSupport extends Component {
//拓扑图刷新
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
}
};
//webSocket 接收消息
handleData = (data) => {
handleData = data => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
}
};
render() {
const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
......@@ -331,13 +319,7 @@ class SelfSupport extends Component {
console.log(topologyData);
return (
<div className="self-wrapper">
<AmosWebSocket
ref={node => this.aws = node}
url={SysWsURL.selfURI}
onMessage={this.handleData}
reconnect
debug
/>
<AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.selfURI} onMessage={this.handleData} reconnect debug />
<div className="self-header">
<div className="self-view">
<div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
......@@ -357,27 +339,20 @@ class SelfSupport extends Component {
</div>
</div>
<div className="self-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={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 className="content-left">
<div className="box">西安中心</div>
</div>
<div className="content-right">
<div className="box">咸阳中心</div>
</div>
</div>
<div className="net-topo-content">
<TopologyComponent
topologyData={topologyData}
......@@ -389,13 +364,9 @@ class SelfSupport extends Component {
</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}>
<div className="devive-title">日志</div>
<div className="device-lists" ref={node => (this.tableNode = node)}>
<AmosGridTable
columns={checkListColumns(this)}
callBack={this.reload}
......@@ -421,8 +392,6 @@ class SelfSupport extends Component {
}
}
SelfSupport.propTypes = {
};
SelfSupport.propTypes = {};
export default SelfSupport;
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