金融监控页面

src/services/monitorService.js

@@ -9,7 +9,6 @@ export const getTopoTreeByTypeAction = (type) => {
 
 // 拓扑图查询
 export const getNodesByTypeAndTreeIdAction = (type, treeId) => {
-  console.log(treeId);
   return commonGet(formatUrl(SpcSerUrl.getNodesByTypeAndTreeIdUrl, { type, treeId }));
 };
 

src/view/bank/financialCityLan/TopologyComponent.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { nodeDetailTopoAction } from './../../../services/dynamicRingService';
 
 const goObj = go.GraphObject.make;
-const deviceSource = '/src/assets/bizView/selfsupport';
+const deviceSource = '/src/assets/bizView/netTopology';
 
 class TopologyComponent extends Component {
 
@@ -69,19 +69,75 @@ class TopologyComponent extends Component {
 
   // 告警高亮
   warnHighlights = (d,v) => {
+    let text = this.getLine2Text(d.text);
     if (d.warnState) {
       this.showWarnHighlights(d, v);
-      return d.text;
+      return text;
     }
-    return d.text;
+    return text;
+  }
+
+  // 获取第一行数据
+  getLine1Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str && str.length === 3){
+      return str[0];
+    }
+    return '';
+  }
+
+  // 获取第二行数据
+  getLine2Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str.length === 1){
+      return str[0];
+    } else if (str.length === 2){
+      return str[0];
+    } else if (str.length === 3){
+      return str[1];
+    }
+  }
+
+  // 获取第三行数据（IP）
+  getLine3Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str && str.length === 2){
+      return str[1];
+    } else if (str.length > 2){
+      return str[2];
+    }
+    return '';
+  }
+
+  //设置椭圆宽度
+  setEllipseWidth = (v) => {
+    let width = (v === '总中心') ? 1100 : 800;
+    return width;
+  }
+
+  setTitleHeight = (v) => {
+    let titleHeight = (v.indexOf('DMZ') !== -1) ? 40 : 25;
+    return titleHeight;
+  }
+
+  setLine1Height = (v) => {
+    let str = this.getLine1Text(v);
+    if (str){
+      return str;
+    }
+    return 0;
   }
 
   // 获取线颜色
   getLinkColor = (v) => {
-    if (v) {
-      return '#FF0000';
-    }
-    return '#00FFFF';
+    const dicParams = {
+      0: '#00FFFF', //正常
+      2: '#ea5514' //告警
+    };
+    return dicParams[v];
   }
 
   showWarnHighlights = (d, v) => {
@@ -144,6 +200,7 @@ class TopologyComponent extends Component {
   showToolTip = (obj, diagram, tool) => {
     let toolTipDIV = document.getElementById('toolTipDIV');
     let pt = diagram.lastInput.viewPoint;
+    toolTipDIV.style.width = '300px'
     toolTipDIV.style.left = `${pt.x + 12}px`;
     toolTipDIV.style.top = `${pt.y}px`;
     toolTipDIV.style.display = 'block';
@@ -220,6 +277,23 @@ class TopologyComponent extends Component {
         },
     ));
 
+    this.diagram.nodeTemplateMap.add('Shape',
+      goObj(go.Node, 'Vertical',
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      goObj(go.Shape, 'Ellipse',
+        { fill: '#ffffff',
+          stroke: '#58b3dc',
+          strokeWidth: 3 ,
+          height: 50
+        },
+        new go.Binding('width', 'text', (v) => this.setEllipseWidth(v))
+      ),
+      goObj(go.TextBlock, '无',
+        { margin: -30 , stroke: '#1c9ad2', font: '20px sans-serif' },
+        new go.Binding('text'),
+      ),
+    ));
+
     this.diagram.nodeTemplateMap.add('Picture',
       goObj(go.Node, 'Vertical',
         {
@@ -262,10 +336,21 @@ class TopologyComponent extends Component {
           },
           new go.Binding('source','source',(v) => this.getDeviceSource(v))
         ),
+        //设备名称
+        goObj(go.TextBlock, '',
+          { margin: 1, stroke: '#999999', font: '13px sans-serif' },
+          new go.Binding('height','text', (v) => this.setLine1Height(v)),
+          new go.Binding('text','text', (v) => this.getLine1Text(v)),
+          ),
         goObj(go.TextBlock, '无',
-          { margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
+          { margin: 1, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
           new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
           ),
+        //IP
+        goObj(go.TextBlock, '',
+          { margin: 1, stroke: '#3399FF', font: '12px sans-serif' },
+          new go.Binding('text','text', (v) => this.getLine3Text(v)),
+          ),
         {
           selectionAdornmentTemplate:
               goObj(go.Adornment, 'Auto',
@@ -277,6 +362,7 @@ class TopologyComponent extends Component {
       )
     );
 
+
     this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
       {
         resizable: true,
@@ -290,7 +376,6 @@ class TopologyComponent extends Component {
       goObj(go.TextBlock,         // group title
         {
           width: 100,
-          height: 24,
           font: 'Bold 14px Sans-Serif',
           stroke: 'white',
           background: '#1c9ad2',
@@ -298,7 +383,10 @@ class TopologyComponent extends Component {
           textAlign: 'center',
           verticalAlignment: go.Spot.Center
         },
-      new go.Binding('text')),
+        //new go.Binding('text')
+        new go.Binding('height', 'text', (v) => this.setTitleHeight(v)),
+        new go.Binding('text')
+      ),
       goObj(go.Shape, 'Rectangle',
         {
           name: 'SHAPE',

src/view/bank/financialCityLan/index.js

@@ -6,15 +6,12 @@ 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 { getTypeBySystem } from './conf';
 import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from 'SERVICES/monitorService';
 import SysWsURL from './../../../consts/wsUrlConsts';
 
 
-const type =  getTypeBySystem('CityLan');
-//const type =  getTypeBySystem('SelfSupport');
+const type = getTypeBySystem('CityLan');
 
 //偏移
 const offsetHeight = 110;
@@ -68,7 +65,7 @@ class FinancialCityLan extends Component {
       this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
       this.viewlineItem();
     }
-   // this.receivcemqtt();
+    // this.receivcemqtt();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -101,7 +98,6 @@ class FinancialCityLan extends Component {
         }
       }
     }
-
   }
   componentWillUnmount() {
     window.localStorage.removeItem('cityLine');
@@ -109,7 +105,7 @@ class FinancialCityLan extends Component {
   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;
   };
 
   // 数据初始化
@@ -146,16 +142,6 @@ class FinancialCityLan extends Component {
     });
   }
 
-  /**
-* 获取表格所选则的行数据
-*/
-  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) {
@@ -167,14 +153,6 @@ class FinancialCityLan extends Component {
     }
   }
 
-
-  mapLineClick = (data) => {
-    window.localStorage.removeItem('cityLine');
-    this.state.cityLine = data;
-    this.viewlineItem();
-
-  }
-
   // 树展开
   onExpand = (expandedKeys) => {
     this.setState({
@@ -223,32 +201,6 @@ class FinancialCityLan extends Component {
     });
   }
 
-  /**
-  * 分页设置参数
-  */
-  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;
@@ -280,8 +232,7 @@ class FinancialCityLan extends Component {
 
 
   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;
     }
@@ -293,7 +244,7 @@ class FinancialCityLan extends Component {
       }
     }
     const { topologyData } = this.state;
-    const { tableData, isTableDisplay, pHeight, activeView } = this.state;
+    const { isTableDisplay, activeView } = this.state;
     console.log(topologyData);
     return (
       <div className="financialCityLan-wrapper">
@@ -337,7 +288,6 @@ class FinancialCityLan extends Component {
           <div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
             <div className="paslogy-content">
               <div className="middle-content-div">
-
               </div>
               <div className="net-topo-content">
                 <TopologyComponent
@@ -349,20 +299,6 @@ class FinancialCityLan 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>
     );