update

src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html

@@ -27,7 +27,7 @@
         </nz-select>
     </div>
     <div nz-col nzSpan="3">
-        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO($event)">
+        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
             <ng-container *ngFor="let item of hostList;">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
             </ng-container>
@@ -57,9 +57,10 @@
         ></nz-date-picker>
     </div>
 </div>
+<div echarts [options]="chartOption" style="height: 420px;width: 100%"></div>
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
     <nz-tab  nzTitle="接收流量排行">
-        <nz-table #nzTable [nzData]="inList" [nzLoading]="" [nzFrontPagination]="false" [nzTotal]="inTotalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="getInList()">
+        <nz-table #nzTable [nzData]="inList" [nzLoading]="inLoading" [nzFrontPagination]="false" [nzTotal]="inTotalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="inChnagePage($event)">
             <thead>
             <tr>
                 <th nzWidth="20%">监测点名称</th>
@@ -69,17 +70,20 @@
             </tr>
             </thead>
             <tbody>
-            <tr *ngFor="let data of inList">
-                <td>{{data.itemName}}</td>
-                <td>{{data.max}}</td>
-                <td>{{data.min}}</td>
-                <td>{{data.avg}}</td>
+            <ng-container *ngFor="let item of inList">
+                <tr (click)="getEcharts(item)">
+                    <td>{{item.itemName}}</td>
+                    <td>{{item.max}}</td>
+                    <td>{{item.min}}</td>
+                    <td>{{item.avg}}</td>
                 </tr>
+            </ng-container>
+
             </tbody>
         </nz-table>
     </nz-tab>
     <nz-tab  nzTitle="发送流量排行">
-        <nz-table #nzTable [nzData]="outList" [nzFrontPagination]="false" [nzTotal]="outTotalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount" (nzPageIndexChange)="getOutList()">
+        <nz-table #nzTable [nzData]="outList" [nzLoading]="outLoading" [nzFrontPagination]="false" [nzTotal]="outTotalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount" (nzPageIndexChange)="outChnagePage($event)">
             <thead>
             <tr>
                 <th nzWidth="20%">监测点名称</th>

src/main/webapp/app/netTopology/flow-trend/flow-trend.component.ts

@@ -25,14 +25,14 @@ export class FlowTrendComponent implements OnInit {
     //in
     inList = [];
     inPageNum = 1;
-    inPageCount = pageSize;
+    inPageCount = '5';
     inTotalNum;
     inLoading;
 
     //out
     outList = [];
     outPageNum = 1;
-    outPageCount = pageSize;
+    outPageCount = '5';
     outTotalNum;
     outLoading;
 
@@ -40,6 +40,9 @@ export class FlowTrendComponent implements OnInit {
     timeBegin;
     timeEnd;
 
+    //图表
+    chartOption;
+
     constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
                 private message: NzMessageService,private datePipe:DatePipe) {
     }
@@ -79,19 +82,106 @@ export class FlowTrendComponent implements OnInit {
         );
     }
 
-    getEcharts() {
-        const data = {
-            itemid: '',
+    //获取图标数据
+    getEcharts(item) {
+        const  data= {
+            itemid: item.itemid,
             endTime: this.obj.endTime,
             startTime: this.obj.startTime
         };
         this.topologySer.findTrendData(data).subscribe(
             (res) => {
-
+                if(res.errCode == 10000){
+                    this.setEacharts();
+                }else{
+                    this.message.warning(res.errMsg);
+                }
             }
         );
     }
 
+    //
+    setEacharts(){
+
+        let xAxisData = [];
+        let data1 = [];
+        let data2 = [];
+        let data3 = [];
+        let data4 = [];
+
+        for (let i = 0; i < 10; i++) {
+            xAxisData.push('Class' + i);
+            data1.push((Math.random() * 2).toFixed(2));
+            data2.push(-Math.random().toFixed(2));
+            data3.push((Math.random() * 5).toFixed(2));
+            data4.push((Math.random() + 0.3).toFixed(2));
+        }
+
+        let itemStyle = {
+            normal: {
+            },
+            emphasis: {
+                barBorderWidth: 1,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0,0,0,0.5)'
+            }
+        };
+
+         this.chartOption = {
+            backgroundColor: '#eee',
+            tooltip: {},
+            xAxis: {
+                data: xAxisData,
+                name: 'X Axis',
+                silent: false,
+                axisLine: {onZero: true},
+                splitLine: {show: false},
+                splitArea: {show: false}
+            },
+            yAxis: {
+                inverse: true,
+                splitArea: {show: false}
+            },
+            grid: {
+                left: 100
+            },
+            series: [
+                {
+                    name: 'bar',
+                    type: 'bar',
+                    stack: 'one',
+                    itemStyle: itemStyle,
+                    data: data1
+                },
+                {
+                    name: 'bar2',
+                    type: 'bar',
+                    stack: 'one',
+                    itemStyle: itemStyle,
+                    data: data2
+                },
+                {
+                    name: 'bar3',
+                    type: 'bar',
+                    stack: 'two',
+                    itemStyle: itemStyle,
+                    data: data3
+                },
+                {
+                    name: 'bar4',
+                    type: 'bar',
+                    stack: 'two',
+                    itemStyle: itemStyle,
+                    data: data4
+                }
+            ]
+        };
+
+         console.log(this.chartOption);
+    }
+
     //获取流量
     getList(e) {
         this.obj.hostid = null;
@@ -105,22 +195,37 @@ export class FlowTrendComponent implements OnInit {
         this.getOutList();
     }
 
+    //in改变页数
+    inChnagePage(e){
+        this.inPageNum = e;
+        this.getInList();
+    }
+
+    //out改变页数
+    outChnagePage(e){
+        this.outPageNum = e;
+        this.getOutList();
+    }
+
     //进口流量
     getInList() {
         this.inLoading = true;
         const data = {
+            obj:{
                 type: 'in',
-            pageNum: this.inPageNum,
-            pageCount: this.inPageCount,
                 hostid: this.obj.hostid,
                 startTime: this.obj.startTime,
                 endTime: this.obj.endTime,
                 groupid:this.obj.groupid
+            },
+            pageNum: this.inPageNum,
+            pageCount: this.inPageCount,
         };
         this.topologySer.findTrend(data).subscribe(
             (res) => {
                 if (res.errCode == 10000) {
-                    this.inList = res.data;
+                    this.inList = res.data.data;
+                    this.inTotalNum = res.data.totalNum;
                 } else {
                     this.message.warning(res.errMsg);
                 }
@@ -133,18 +238,22 @@ export class FlowTrendComponent implements OnInit {
     getOutList() {
         this.outLoading = true;
         const data = {
-            type: 'out',
-            pageNum: this.outPageNum,
-            pageCount: this.outPageCount,
+            obj: {
+                type:'out',
                 hostid: this.obj.hostid,
                 startTime: this.obj.startTime,
                 endTime: this.obj.endTime,
                 groupid:this.obj.groupid
+            },
+            pageNum: this.outPageNum,
+            pageCount: this.outPageCount,
+
         };
         this.topologySer.findTrend(data).subscribe(
             (res) => {
                 if (res.errCode == 10000) {
-                    this.outList = res.data;
+                    this.outList = res.data.data;
+                    this.outTotalNum = res.data.totalNum;
                 } else {
                     this.message.warning(res.errMsg);
                 }

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

@@ -18,7 +18,6 @@
     <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
   </div>
 </div>
-
 <div nz-row class="search-form">
   <div nz-col nzSpan="12">
     <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择类型" (ngModelChange)="getList()">

src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.ts

@@ -121,7 +121,7 @@ export class BasicDetailComponent implements OnInit, AfterViewInit {
         this.inOutInfo();
 
         //监测点
-       this.getList()
+       this.getList();
 
         //历史告警
         const obj = {};
@@ -129,9 +129,7 @@ export class BasicDetailComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        console.log(this.colorEle.nativeElement.offsetWidth);
         this.checkEle.nativeElement.children[1].children[0].children[0].children[2].children[0].children[0].children[2].style.marginRight = this.colorEle.nativeElement.offsetWidth +'px';
-        console.log(this.checkEle.nativeElement.children[1].children[0].children[0].children[2].children[0].children[0].children[2].style.marginRight);
     }
 
     //平均响应时间

src/main/webapp/app/system/modal/role/role.component.html

@@ -21,7 +21,7 @@
       <nz-form-label [nzSm]="6" [nzXs]="24"   nzRequired nzFor="comments">角色说明</nz-form-label>
       <nz-form-control [nzSm]="14" [nzXs]="24">
         <textarea id="comments" row="4" nz-input formControlName="comments"></textarea>
-        <nz-form-explain *ngIf="validateForm.get('comments').dirty && validateForm.get('comments').errors">Please select your gender!</nz-form-explain>
+        <nz-form-explain *ngIf="validateForm.get('comments').dirty && validateForm.get('comments').errors">请输入角色说明!</nz-form-explain>
       </nz-form-control>
     </nz-form-item>
     <!--<nz-form-item>-->

src/main/webapp/app/system/modal/role/role.component.ts

@@ -41,12 +41,24 @@ export class RoleComponent implements OnInit {
         this.isVisible = false;
     }
 
-    handleOk(): void {
+    handleOk() {
         for (let i in this.validateForm.controls) {
             this.validateForm.controls[i].markAsDirty();
             this.validateForm.controls[i].updateValueAndValidity();
         }
-        this.systemSer.addRole(this.validateForm.value).subscribe(
+        if (this.validateForm.invalid) {
+            return false;
+        }
+        const data = {
+            role:{
+                name:this.validateForm.value.name,
+                status:this.validateForm.value.status,
+                comments:this.validateForm.value.comments,
+            },
+            resources:[],
+            menus:[]
+        };
+        this.systemSer.addRole(data).subscribe(
             (res) => {
                 if (res.errCode == 10000) {
                     this.isVisible = false;

src/main/webapp/app/system/power/power.component.ts

 import {Component, OnInit, ViewChild} from '@angular/core';
 import {SystemService} from '../system.service';
 import {RoleComponent} from '../modal/role/role.component';
-import {NzModalService} from 'ng-zorro-antd';
+import {NzMessageService, NzModalService} from 'ng-zorro-antd';
 
 @Component({
     selector: 'jhi-power',
@@ -13,7 +13,7 @@ export class PowerComponent implements OnInit {
     dataSet: any[];
     isVisible = false;
 
-    constructor(private systemSer: SystemService,
+    constructor(private systemSer: SystemService,private message:NzMessageService,
                 private modalSer:NzModalService) {
     }
 
@@ -44,6 +44,12 @@ export class PowerComponent implements OnInit {
             nzOnOk:()=>{
                 this.systemSer.deleteRole(data.id).subscribe(
                     (res) => {
+                        if(res.errCode == 10000){
+                            this.message.success("删除成功");
+                            this.getRole();
+                        }else{
+                            this.message.error(res.errMsg);
+                        }
                     }
                 );
             },