服务器

src/main/webapp/app/app.main.module.ts

@@ -114,6 +114,7 @@ import {WorkReportComponent} from './business/modal/work-report/work-report.comp
 import {SwitchComponent} from './overAll/modal/switch/switch.component';
 import {ServerComponent} from './overAll/modal/server/server.component';
 import {DatabaseComponent} from './overAll/modal/database/database.component';
+import {TopologyViewComponent} from './component/topology-view/topology-view.component';
 
 @NgModule({
     imports: [
@@ -230,6 +231,7 @@ import {DatabaseComponent} from './overAll/modal/database/database.component';
         SwitchComponent,
         ServerComponent,
         DatabaseComponent,
+        TopologyViewComponent,
     ],
     providers:[
         OverAllService,

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

+<div #topologyBody id="topology-body" class="topology-context">
+  <nz-spin [nzSpinning]="isLoading">
+    <canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
+      您的浏览器不支持HTML5!
+    </canvas>
+  </nz-spin>
+</div>
+
+

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

+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {TopologyService} from '../../netTopology/topology.service';
+
+declare let editor: any;
+
+@Component({
+    selector: 'smart-topology-view',
+    templateUrl: './topology-view.component.html',
+    styles: []
+})
+export class TopologyViewComponent implements OnInit, AfterViewInit {
+    @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
+    @ViewChild('topologyBody') topologyBody: ElementRef;
+
+    isLoading = false;
+
+    constructor(private topologySer: TopologyService) {
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit() {
+        const canvasWidth = this.topologyBody.nativeElement.clientWidth;
+        const canvasHeight = this.topologyBody.nativeElement.clientHeight;
+        let myCanvas = this.topologyCanvas.nativeElement;
+        let context = myCanvas.getContext('2d');
+        let ratio = this.getPixelRatio(context);
+        myCanvas.style.width = canvasWidth + 'px';
+        myCanvas.style.height = canvasHeight + 'px';
+
+        myCanvas.width = myCanvas.width * ratio;
+        myCanvas.height = myCanvas.height * ratio;
+        context.scale(ratio, ratio);
+
+        editor.loadTopology('', '', 'img/backimg.png', canvasWidth, canvasHeight);
+    }
+
+    // 获取像素比
+    getPixelRatio(context) {
+        const backingStore = context.backingStorePixelRatio ||
+            context.webkitBackingStorePixelRatio ||
+            context.mozBackingStorePixelRatio ||
+            context.msBackingStorePixelRatio ||
+            context.oBackingStorePixelRatio ||
+            context.backingStorePixelRatio || 1;
+        return (window.devicePixelRatio || 1) / backingStore;
+    }
+
+    //查询单个
+    getDetail(topoId) {
+        this.isLoading = true;
+        this.topologySer.findItem(topoId).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    if (res.data.json.length > 0) {
+                        let json = JSON.parse(res.data.json);
+                        if (json.topology) {
+                            this.viewTopology(JSON.parse(json.topology));
+                        } else {
+                            this.isLoading = false;
+                            editor.utils.clearTopology();
+                        }
+                    } else {
+                        this.isLoading = false;
+                        editor.utils.clearTopology();
+                    }
+                    this.findItemStatus();
+                }
+            }
+        );
+    }
+
+    //回显拓扑图
+    viewTopology(topologyJson) {
+        const arr = topologyJson.childs[0].childs;
+        const list = [];
+        const hostIds = [];
+        arr.forEach(e => {
+            if (e.elementType == 'link' && e.itemId && e.itemId.length > 2) {
+                const data = {
+                    itemIdIn: e.itemId.split(',')[0],
+                    itemIdOut: e.itemId.split(',')[1],
+                    linkId: e.id
+                };
+                list.push(data);
+            }
+        });
+        arr.forEach(e => {
+            if (e.elementType == 'node' && e.hostId) {
+                hostIds.push(e.hostId);
+            }
+        });
+        //危险对象
+        //故障对象
+        const glist = [];
+        //删除对象
+        const dlist = [];
+        if (hostIds.length > 0) {
+            const res = {
+                hostIds: hostIds
+            };
+            this.topologySer.findElementStatus(res).subscribe(
+                (res) => {
+                    //status -1=未监控, 0=正常, 1=危险, 2=故障, 3=未分类
+                    const resData = res.data;
+                    resData.forEach(e1 => {
+                        arr.forEach(e2 => {
+                            if (e1.elementId == e2.hostId) {
+                                // if(e1.status == -2){
+                                //     e2.alarm = "主机被删除，请及时清理";
+                                //     e2.fontColor='0,0,0';
+                                //     e2.alarmAlpha=0.9;
+                                // }
+                                if (e1.status == 1) {
+                                    e2.alarm = '危险';
+                                    e2.fontColor = '0,0,0';
+                                    e2.alarmColor = '255,153,18';
+                                    e2.alarmAlpha = 0.9;
+                                }
+                                if (e1.status == 2) {
+                                    e2.alarm = '故障';
+                                    e2.fontColor = '0,0,0';
+                                    e2.alarmAlpha = 0.9;
+                                }
+                            }
+                        });
+                    });
+                    editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
+                    this.isLoading = false;
+                }
+            );
+        }
+
+        //流量数据
+        if (list.length > 0) {   //有流量监控-->查询流量监控
+            const data = {
+                'list': list
+            };
+            this.topologySer.findFlow(data).subscribe(
+                (res) => {
+                    const response = res.data;
+                    response.forEach(e1 => {
+                        arr.forEach(e2 => {
+                            if (e1.linkId == e2.id) {
+                                e2.text = '进口流量:' + e1.fullValueIn + ' 出口流量:' + e1.fullValueOut;
+                            }
+                        });
+                    });
+                    this.isLoading = false;
+                    editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
+                }
+            );
+        } else {   //无流量监控
+            this.isLoading = false;
+            editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
+        }
+    }
+
+    //查询监控点状态
+    findItemStatus() {
+
+    }
+
+}

src/main/webapp/app/home/home.component.html

@@ -81,10 +81,20 @@
                 </div>
             </div>
         </nz-col>
-        <nz-col class="padding-10" nzSpan="12">
+        <nz-col class="padding-10" nzSpan="12" style="position: relative">
             <div class="host-item-title">告警总数趋势</div>
-            <div class="host-item-content" >
-                <div echarts [options]="charTrendOption" style="height: 100%;width: 100%"></div>
+            <div class="time-group" style="top: 18px;">
+                <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeTrend"
+                           (ngModelChange)="changeTrend($event)">
+                    <ng-container *ngFor="let time of timeList">
+                        <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
+                    </ng-container>
+                </nz-select>
+            </div>
+            <div class="host-item-content"  >
+                <nz-spin [nzSpinning]="isTrendLoading">
+                    <div echarts [options]="charTrendOption" style="height: 360px;width: 100%"></div>
+                </nz-spin>
             </div>
         </nz-col>
         <nz-col class="padding-10" nzSpan="12">
@@ -149,19 +159,15 @@
         </nz-col>
         <nz-col class="padding-10" nzSpan="16">
             <div class="host-item-title">网络拓扑图</div>
-            <div class="host-item-table" style="height: 500px">
-                <nz-row class="text-center table-title">
-                    <nz-col nzSpan="8">资源名称</nz-col>
-                    <nz-col nzSpan="8">发送流量</nz-col>
-                    <nz-col nzSpan="8">接受流量</nz-col>
-                </nz-row>
-                <ng-container *ngFor="let flow of flowListNum;">
-                    <nz-row class="table-content">
-                        <nz-col nzSpan="8">{{flow.name}}</nz-col>
-                        <nz-col nzSpan="8">{{flow.send}}</nz-col>
-                        <nz-col nzSpan="8">{{flow.receive}}</nz-col>
-                    </nz-row>
-                </ng-container>
+            <div  class="time-group" style="top: 18px;">
+                <nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId" (ngModelChange)="getDetail($event)">
+                    <ng-container *ngFor="let item of dataSet">
+                        <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
+                    </ng-container>
+                </nz-select>
+            </div>
+            <div class="host-item-content">
+               <smart-topology-view #smartTopologyView></smart-topology-view>
             </div>
         </nz-col>
         <nz-col class="padding-10" nzSpan="8">

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

@@ -9,7 +9,6 @@ import {NodeComponent} from '../model/node/node.component';
 import {SelectRadioGroupComponent} from '../../modal/select-radio-group/select-radio-group.component';
 
 declare let editor: any;
-declare var layui: any;
 
 @Component({
     selector: 'smart-ne-topology',
@@ -544,4 +543,4 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
         );
     }
 
-}
\ No newline at end of file
+}