服务器

src/main/webapp/app/app.constants.ts

@@ -20,6 +20,15 @@ export const ThemeList = [
     {value: 'dark', label: '深色主题'},
 ];
 
+export const colorObj = {
+    dark:{
+        fontColor:'#b7d1f1',
+    },
+    white:{
+        fontColor:'#333'
+    }
+}
+
 //流量单位
 export const UnitList = [
     {'label': 'bps', value: 'bps'},

src/main/webapp/app/component/topology-view/topology-view.component.ts

@@ -148,7 +148,7 @@ export class TopologyViewComponent implements OnInit, AfterViewInit {
                     response.forEach(e1 => {
                         arr.forEach(e2 => {
                             if (e1.linkId == e2.id) {
-                                e2.text = '进口流量:' + e1.fullValueIn + ' 出口流量:' + e1.fullValueOut;
+                                e2.text = 'In:' + e1.fullValueIn + ' Out:' + e1.fullValueOut;
                             }
                         });
                     });

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -11,11 +11,11 @@
             </span>
         </div>
         <div nz-col [nzSpan]="12" style="text-align: right">
-            <nz-select style="width: 100px;" [(ngModel)]="theme" (ngModelChange)="changeTheme()">
-                <ng-container *ngFor="let item of themeList">
-                    <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
-                </ng-container>
-            </nz-select>
+<!--            <nz-select style="width: 150px;margin-right: 20px" [(ngModel)]="theme" (ngModelChange)="changeTheme()">-->
+<!--                <ng-container *ngFor="let item of themeList">-->
+<!--                    <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>-->
+<!--                </ng-container>-->
+<!--            </nz-select>-->
             <nz-dropdown [nzTrigger]="'click'">
                 <a nz-dropdown>{{user.loginName}}<i class="anticon anticon-down"></i>
                 </a>

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html

@@ -38,6 +38,7 @@
     <div nz-col nzSpan="12" class="layui-header ">
         <ng-container *ngIf="editType == '只读模式'">
             <nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor" (ngModelChange)="changeColor()">
+                <nz-option nzLabel="深蓝" nzValue="#3d76ab"></nz-option>
                 <nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
                 <nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
                 <nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
@@ -76,7 +77,7 @@
         </ng-container>
     </div>
 </div>
-<div class="container">
+<div class="topo-container">
     <div class="layui-row">
         <div class="layui-col-md12">
             <div #topologyBody id="topology-body" class="topology-context">

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts

@@ -426,7 +426,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
                     response.forEach(e1=>{
                         arr.forEach(e2=>{
                             if(e1.linkId == e2.id){
-                                e2.text = "进口流量:"+e1.fullValueIn+" 出口流量:"+e1.fullValueOut;
+                                e2.text = "In:"+e1.fullValueIn+" Out:"+e1.fullValueOut;
                             }
                         })
                     });

src/main/webapp/app/overAll/modal/server/server.component.html

@@ -89,16 +89,16 @@
                         <div class="host-item-content" style="height: 300px;">
                             <nz-row>
                                 <nz-col nzSpan="16">CPU利用率(%)：</nz-col>
-                                <nz-col nzSpan="8">{{hostObj.cpu}}</nz-col>
+                                <nz-col nzSpan="8">{{hostObj.cpu || '-'}}</nz-col>
                             </nz-row>
 
                             <nz-row>
                                 <nz-col nzSpan="16">Ping延时(ms)：</nz-col>
-                                <nz-col nzSpan="8">{{hostObj.response}}</nz-col>
+                                <nz-col nzSpan="8">{{hostObj.response || '-'}}</nz-col>
                             </nz-row>
                             <nz-row>
                                 <nz-col nzSpan="16">内存利用率(%)：</nz-col>
-                                <nz-col nzSpan="8">{{hostObj.used}}</nz-col>
+                                <nz-col nzSpan="8">{{hostObj.used || '-'}}</nz-col>
                             </nz-row>
 <!--                            <nz-row>-->
 <!--                                <nz-col nzSpan="16">CPU个数：</nz-col>-->

src/main/webapp/app/overAll/modal/server/server.component.ts

@@ -115,7 +115,7 @@ export class ServerComponent implements OnInit {
         this.overAllSer.responseTime(this.hostId).subscribe(
             (res) => {
                 if (res.data) {
-                    this.hostObj.response = res.data.response;
+                    this.hostObj.response = res.data.responseTime;
                 } else {
                     this.hostObj.response = 0;
                 }

src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js

@@ -176,7 +176,7 @@ function TopologyEditor() {
         nodeShadow: false,                     // 节点是否显示阴影
         nodeShadowColor: 'rgba(0,0,0,0.5)',  // 节点阴影的颜色
         nodeFont: '18px Consolas',            // 节点字体
-        nodeFontColor: 'black',               // 节点文字颜色,如"255,255,0"
+        nodeFontColor: '177,209,239',               // 节点文字颜色,如"255,255,0"
         nodeDefaultWidth: 32,                 // 新建节点默认宽
         nodeDefaultHeight: 32,                // 新建节点默认高
         nodeBorderColor: 'black',            // 节点容器边框颜色,如"255,255,0"
@@ -185,8 +185,8 @@ function TopologyEditor() {
         nodeScale: 0.2,                       // 节点缩放幅度(此处保证X和Y均等缩放)
         // Link属性
         linkAlpha: 1,                         // 连线透明度,取值范围[0-1]
-        linkStrokeColor: '0,0,0',     // 连线的颜色
-        linkFillColor: '0,0,0',
+        linkStrokeColor: '177,209,239',     // 连线的颜色
+        linkFillColor: '177,209,239',
         linkShadow: false,                   // 是否显示连线阴影
         linkShadowColor: 'rgba(0,0,0,0.5)',
         linkFont: '25px Consolas',           // 节点字体
@@ -647,14 +647,14 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson,ca
 
         // 只处理双击节点事件
         if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
-            const nodeObj = {
+            var nodeObj = {
                 name:event.target.text,
                 hostId:event.target.hostId
             }
             localStorage.setItem("node",'true');
             localStorage.setItem("nodeObj",JSON.stringify(nodeObj));
         } else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
-            const lineObj = {
+            var lineObj = {
                 hostIds:[],
                 itemId:event.target.itemId
             }
@@ -1184,11 +1184,11 @@ editor.utils = {
         link[0].itemId = "";
         link[0].text = "";
         if(inItem){
-            link[0].text = "进口流量:"+inItem.name;
+            link[0].text = "In:"+inItem.name;
             link[0].itemId = (inItem.itemId)
         }
         if(outItem){
-            link[0].text += "   出口流量:"+outItem.name;
+            link[0].text += "   Out:"+outItem.name;
             link[0].itemId += "," +(outItem.itemId);
         }
     },

src/main/webapp/content/scss/darkBlue.scss

@@ -182,4 +182,7 @@ $fontColor: #b7d1f1;
       transition: all 500ms;
     }
   }
+  .topology-context {
+    background: rgba(0, 0, 0, 0.2);
+  }
 }

src/main/webapp/content/scss/style.scss

@@ -62,3 +62,110 @@
     flex: #{$j};
   }
 }
+
+//UI框架
+
+
+
+
+
+.container {
+  height: 100%;
+  padding: 0 16px;
+}
+
+nz-header {
+  padding: 0 16px;
+}
+
+
+
+//自己写的
+//主机详情
+.host-item-title {
+  padding: 10px 15px;
+  height: 50px;
+  line-height: 30px;
+}
+
+.database-name {
+  padding: 2px 5px;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+.host-item-content {
+  padding: 10px;
+  height: 400px;
+  position: relative;
+
+  nz-row {
+    nz-col:nth-child(2n +1) {
+      text-align: right;
+      margin-bottom: 10px;
+    }
+
+    nz-col:nth-child(2n) {
+      text-align: left;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.host-item-table {
+  padding: 10px;
+  height: 400px;
+
+  nz-col {
+    padding: 5px 10px;
+  }
+
+  .table-title {
+    nz-col {
+      border: 1px solid #597cb5;
+    }
+  }
+
+  .table-content {
+    border-bottom: 1px solid #597cb5;
+  }
+}
+
+.dataChart {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  font-size: 12px;
+  p {
+    margin-bottom: 10px;
+  }
+
+  p:nth-child(2n) {
+    text-align: right;
+    border-bottom: 1px solid #b7d1f1;
+  }
+
+  p:nth-child(2n +1) {
+    text-align: left;
+  }
+}
+
+.time-group {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 9;
+}
+
+.width-host {
+  position: relative;
+  width: 80%;
+  margin: 0 auto;
+  height: 23px;
+  .space{
+    height: 23px;
+    transition: all 500ms;
+  }
+}

src/main/webapp/content/scss/white.scss

-.white{
-  .container{
-    background-color: #fff;
-    padding: 0 16px;
+.white {
+  //自己写的
+  //主机详情
+  .host-item-title {
+    color: #4b4b4b;
+    padding: 10px 15px;
+    height: 50px;
+    line-height: 30px;
+  }
+
+  .database-name {
+    border: 1px solid #4b4b4b;
+    color: #4b4b4b;
+    padding: 2px 5px;
+    border-radius: 5px;
+    font-size: 12px;
+  }
+
+  .host-item-content {
+    color: #4b4b4b;
+    padding: 10px;
+    height: 400px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    position: relative;
+
+    nz-row {
+      nz-col:nth-child(2n +1) {
+        color: #4b4b4b;
+        text-align: right;
+        margin-bottom: 10px;
+      }
+
+      nz-col:nth-child(2n) {
+        color: #4b4b4b;
+        text-align: left;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .host-item-table {
+    color: #4b4b4b;
+    padding: 10px;
+    height: 400px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    nz-col {
+      padding: 5px 10px;
+    }
+
+    .table-title {
+      background-color: rgba(0, 0, 0, .4);
+
+      nz-col {
+        border: 1px solid #dddddd;
+      }
+    }
+
+    .table-content {
+      border-bottom: 1px solid #dddddd;
+    }
+  }
+
+  .dataChart {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    font-size: 12px;
+
+    p {
+      margin-bottom: 10px;
+    }
+
+    p:nth-child(2n) {
+      text-align: right;
+      border-bottom: 1px solid #dddddd;
+    }
+
+    p:nth-child(2n +1) {
+      text-align: left;
+    }
+  }
+
+  .time-group {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9;
+  }
+
+  .width-host {
+    position: relative;
+    width: 80%;
+    margin: 0 auto;
+    background-color: #e5e5e5;
+    height: 23px;
+    .space{
+      height: 23px;
+      background-color: #89d885;
+      transition: all 500ms;
     }
-  nz-header{
-    background: #fff;
-    padding: 0 16px;
-    border-bottom: 1px solid #e5e5e5;
   }
 }
 
+

tsconfig.json

@@ -10,7 +10,7 @@
         "noImplicitAny": false,
         "skipLibCheck": true,
         "suppressImplicitAnyIndexErrors": true,
-        "outDir": "build/www/app",
+        "outDir": "build/wx/app",
         "lib": ["es7", "dom"],
         "typeRoots": [
             "node_modules/@types"