更改自建系统样式

src/styles/view/biz/selfsupport/index.scss

@@ -340,6 +340,7 @@
         .ant-table-pagination {
           float: right;
           display: inline;
+          width: 100%;
         }
       }
       .ant-table-title {
@@ -454,7 +455,8 @@
       }
 
       .ant-pagination-options {
-        margin-top: 5px;
+        margin-top: -12%;
+        margin-left: 88%;
 
         .ant-select-selection {
           height: 25px;
@@ -462,6 +464,7 @@
           background: $biz-title-color;
           border-color: $core-border-color;
 
+
           .ant-select-arrow {
             color: $biz-table-font-color;
           }

src/view/bizview/selfSupport/index.js

@@ -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,10 +237,10 @@ class SelfSupport extends Component {
       nodeData: nodeDataArray,
       linkData: linkDataArray
     };
-    saveNodesByTypeUrlAction(type,params).then(data => {
+    saveNodesByTypeUrlAction(type, params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   /**
    * 分页设置参数
@@ -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,8 +339,8 @@ class SelfSupport extends Component {
           </div>
         </div>
         <div className="self-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}
@@ -367,17 +349,10 @@ class SelfSupport 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 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;