云平台页面

src/view/bank/virtualCloudPlatform/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/virtualCloudPlatform';
 
 class TopologyComponent extends Component {
 
@@ -69,13 +69,41 @@ class TopologyComponent extends Component {
 
   // 告警高亮
   warnHighlights = (d,v) => {
+
+    let str = [];
+    str = d.text.split("#");
     if (d.warnState) {
       this.showWarnHighlights(d, v);
-      return d.text;
+      return d.text.split("#")[0];
     }
-    return d.text;
+    
+    return d.text.split("#")[0];
+   
   }
 
+    // 获取ip
+   getIp = (d,v) => {
+      let str = [];
+      str = d.text.split("#");
+      if(str && str.length > 1){
+        return d.text.split("#")[1];
+      }else{
+        return "";
+      }
+     
+    }
+
+    getIp2 = (d,v) => {
+      let str = [];
+      str = d.text.split("#");
+      if(str && str.length > 2){
+        return d.text.split("#")[2];
+      }else{
+        return "";
+      }
+     
+    }
+
   // 获取线颜色
   getLinkColor = (v) => {
     if (v) {
@@ -262,10 +290,22 @@ class TopologyComponent extends Component {
           },
           new go.Binding('source','source',(v) => this.getDeviceSource(v))
         ),
+        //图标下面的字
         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)),
           ),
+
+          //ip1
+        goObj(go.TextBlock, '无',
+        { margin: 3, stroke: '#3399FF', font: '12px sans-serif' },
+        new go.Binding('text','', (v,d) => this.getIp(v,d)),
+        ),
+         //ip2
+        goObj(go.TextBlock, '无',
+        { margin: 3, stroke: '#3399FF', font: '12px sans-serif' },
+        new go.Binding('text','', (v,d) => this.getIp2(v,d)),
+        ),
         {
           selectionAdornmentTemplate:
               goObj(go.Adornment, 'Auto',
@@ -289,7 +329,7 @@ class TopologyComponent extends Component {
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
       goObj(go.TextBlock,         // group title
         {
-          width: 100,
+          width: 200,
           height: 24,
           font: 'Bold 14px Sans-Serif',
           stroke: 'white',
@@ -313,7 +353,16 @@ class TopologyComponent extends Component {
 
     this.diagram.linkTemplate =
       goObj(go.Link,
-        goObj(go.Shape, { strokeWidth: 3 },
+        {
+           selectionAdorned: true,
+           layerName: "Foreground",
+           reshapable: true,
+           routing: go.Link.AvoidsNodes,
+           corner: 5,
+           curve: go.Link.JumpGap
+        },
+        goObj(go.Shape, { strokeWidth: 2 },
+       
         new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
         )
       );

src/view/bank/virtualCloudPlatform/index.js

@@ -8,80 +8,18 @@ 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 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_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>
-      }
-    }
-  ];
-};
+import { getTypeBySystem } from './../financialCityLan/conf';
+import { getTopoTreeByTypeAction,getNodesByTypeAndTreeIdAction,saveNodesByTypeUrlAction } from './../../../services/monitorService';
+
+
+const type =  getTypeBySystem('CloudPlatform');
+
 
 
 //偏移
@@ -220,7 +158,7 @@ class VirtualCloudPlatform extends Component {
   // 数据初始化
   initData = () => {
     let expandedKeysData = [];
-    getSelfTopoTreeAction().then(data => {
+    getTopoTreeByTypeAction(type).then(data => {
       data.map(item => {
         expandedKeysData.push(item.id);
       });
@@ -239,7 +177,7 @@ class VirtualCloudPlatform extends Component {
 
   // 拓扑图数据初始化
   initTopologyData = (id, value = '') => {
-    getSelfTopographyAction(id).then(data => {
+    getNodesByTypeAndTreeIdAction(type,id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
       }
@@ -249,21 +187,10 @@ class VirtualCloudPlatform extends Component {
         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
-  //     });
-  //   });
-  // }
+
 
   /**
 * 获取表格所选则的行数据
@@ -303,30 +230,8 @@ class VirtualCloudPlatform extends Component {
   };
 
 
-  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) => {
@@ -349,7 +254,7 @@ class VirtualCloudPlatform extends Component {
       nodeData: nodeDataArray,
       linkData: linkDataArray
     };
-    updateSelfTopographyAction(params).then(data => {
+    saveNodesByTypeUrlAction(type,params).then(data => {
       message.success('拓扑图保存成功!');
     });
   }