update

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

@@ -68,6 +68,7 @@ import {CheckComponent} from './netTopology/model/check/check.component';
 import {TopologyImgComponent} from './netTopology/topology-img/topology-img.component';
 import {DeviceComponent} from './netTopology/model/device/device.component';
 import {IconComponent} from './netTopology/model/icon/icon.component';
+import {ToUtilPipe} from './shared/common/toUtil.pipe';
 
 @NgModule({
     imports: [
@@ -136,7 +137,8 @@ import {IconComponent} from './netTopology/model/icon/icon.component';
         CheckComponent,
         TopologyImgComponent,
         DeviceComponent,
-        IconComponent
+        IconComponent,
+        ToUtilPipe
     ],
     providers:[
         OverAllService,

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

@@ -57,28 +57,29 @@
         ></nz-date-picker>
     </div>
 </div>
-<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
+<nz-spin [nzSpinning]="isLoading">
+    <div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
+</nz-spin>
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
     <nz-tab  nzTitle="接收流量排行">
         <nz-table #nzTable [nzData]="inList" [nzLoading]="inLoading" [nzFrontPagination]="false" [nzTotal]="inTotalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="inChnagePage($event)">
             <thead>
             <tr>
                 <th nzWidth="20%">监测点名称</th>
-                <th>最大值(kb/s)</th>
-                <th>最小值(kb/s)</th>
-                <th>平均值(kb/s)</th>
+                <th>最大值</th>
+                <th>最小值</th>
+                <th>平均值</th>
             </tr>
             </thead>
             <tbody>
             <ng-container *ngFor="let item of inList">
                 <tr (click)="getEcharts(item.itemid)">
                     <td>{{item.itemName}}</td>
-                    <td>{{item.max}}</td>
-                    <td>{{item.min}}</td>
-                    <td>{{item.avg}}</td>
+                    <td>{{item.max | toUtil}}</td>
+                    <td>{{item.min | toUtil}}</td>
+                    <td>{{item.avg | toUtil}}</td>
                 </tr>
             </ng-container>
-
             </tbody>
         </nz-table>
     </nz-tab>
@@ -96,9 +97,9 @@
             <ng-container *ngFor="let data of outList">
                 <tr (click)="getEcharts(data.itemid)">
                     <td>{{data.itemName}}</td>
-                    <td>{{data.max}}</td>
-                    <td>{{data.min}}</td>
-                    <td>{{data.avg}}</td>
+                    <td>{{data.max | toUtil}}</td>
+                    <td>{{data.min | toUtil}}</td>
+                    <td>{{data.avg | toUtil}}</td>
                 </tr>
             </ng-container>
             </tbody>

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

@@ -15,6 +15,7 @@ declare var vis: any;
 export class FlowTrendComponent implements OnInit {
     groupList;
     hostList;
+    isLoading;
     obj = {
         groupid:null,
         hostid: null,
@@ -90,6 +91,7 @@ export class FlowTrendComponent implements OnInit {
 
     //获取图标数据
     getEcharts(itemid) {
+        this.isLoading = true;
         const  data= {
             itemid: itemid,
             endTime: this.obj.endTime,
@@ -97,24 +99,27 @@ export class FlowTrendComponent implements OnInit {
             hostid:this.obj.hostid,
             groupid:this.obj.groupid,
             type:'in',
+            limit:'1000'
         };
         this.topologySer.findTrendData(data).subscribe(
             (res) => {
                 if(res.errCode == 10000){
-                    if(res.data){
+                    if(res.data.length > 0){
                         this.inEchartData = res.data;
                     }else{
                         this.message.info("图表暂无数据");
+                        this.isLoading = false;
                     }
                     data.type = "out";
                     this.topologySer.findTrendData(data).subscribe(
                         (res)=>{
-                            if(res.data){
+                            if(res.data.length > 0){
                                 this.outEchartData = res.data;
+                                this.setEacharts();
                             }else{
                                 this.message.info("图表暂无数据");
+                                this.isLoading = false;
                             }
-                            this.setEacharts();
                         }
                     )
                 }else{
@@ -139,27 +144,37 @@ export class FlowTrendComponent implements OnInit {
 
         this.chartOption = {
             backgroundColor: '#eee',
-            tooltip: {},
+            tooltip: {
+                // trigger: 'axis',
+                formatter: (params)=> {
+                    console.log(params);
+                    let res = params.seriesName;
+                    res += '<br/>时间：'  + params.name;
+                    let Mbps = 1000*1000;
+                    let kbps = 1000;
+                    let size = Math.abs(params.data);
+                    if(size/Mbps > 1){
+                        res += '<br/>流量：' + (size/Mbps).toFixed(2) + 'Mbps';
+                    }else if(size/kbps >1){
+                        res += '<br/>流量：' +(size/kbps).toFixed(2) + 'kbps';
+                    }else{
+                        res += '<br/>流量：' + (size)+ 'bbps';
+                    }
+
+                    return res;
+                }
+            },
             xAxis: {
                 data: this.inEchartData.map(e=>{
                     return e.clock;
                 }),
                 name: '时间',
-                silent: false,
-                axisLine: {onZero: true},
-                splitLine: {show: false},
-                splitArea: {show: false},
-                axisLabel:{
-                    margin: 10,
-                    interval: 100000,
-                    showMinLabel: true,
-                    showMaxLabel: true,
-                    textStyle: {
-                        color: '#999',
-                        fontSize: 12,
-                    }
-                }
             },
+            dataZoom: [{
+                startValue: this.obj.startTime
+            }, {
+                type: 'inside'
+            }],
             yAxis: {
                 inverse: true,
                 splitArea: {show: false},
@@ -189,7 +204,7 @@ export class FlowTrendComponent implements OnInit {
                 {
                     name: '出口流量',
                     type: 'bar',
-                    stack: 'two',
+                    stack: 'one',
                     itemStyle: itemStyle,
                     data: this.outEchartData.map(e=>{
                         return -e.avg;
@@ -197,6 +212,7 @@ export class FlowTrendComponent implements OnInit {
                 }
             ]
         };
+        this.isLoading = false;
     }
 
     //获取流量

src/main/webapp/app/shared/common/toUtil.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+    name: 'toUtil'
+})
+export class ToUtilPipe implements PipeTransform {
+
+    transform(value: any): any {
+        console.log(value);
+        if(value){
+            let res;
+            let Mbps = 1000 * 1000;
+            let kbps = 1000;
+            let size = Math.abs(value);
+            if (size / Mbps > 1) {
+                const m = size / Mbps;
+                res = m.toFixed(2) + 'Mbps';
+            } else if (size / kbps > 1) {
+                const k = size / kbps;
+                res = k.toFixed(2) + 'kbps';
+            } else {
+                res = (size) + 'bbps';
+            }
+            return res;
+        }else{
+            return true;
+        }
+
+    }
+
+}

src/main/webapp/app/work/asset-part/asset-part.component.html

-<p>
-  asset-part works!
-</p>

src/main/webapp/app/work/inspect-plan/inspect-plan.component.html

-<p>
-  inspect-plan works!
-</p>

src/main/webapp/app/work/work-handle/work-handle.component.html

@@ -20,19 +20,21 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form">
   <div nz-col nzSpan="3">
-    <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="事件分类">
+    <nz-select style="width: 100%;" [(ngModel)]="obj.type" nzPlaceHolder="事件分类">
       <nz-option nzLabel="告警" nzValue="告警"></nz-option>
       <nz-option nzLabel="严重" nzValue="严重"></nz-option>
     </nz-select>
   </div>
   <div nz-col nzSpan="3">
-    <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="事件状态">
-        <nz-option nzLabel="" nzValue=""></nz-option>
+    <nz-select style="width: 100%;"  [(ngModel)]="obj.status" nzPlaceHolder="事件状态">
+        <nz-option nzLabel="待处理" nzValue="0"></nz-option>
+        <nz-option nzLabel="已结束" nzValue="1"></nz-option>
     </nz-select>
   </div>
   <div nz-col nzSpan="3">
-    <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="事件来源">
-        <nz-option nzLabel="" nzValue=""></nz-option>
+    <nz-select style="width: 100%;" [(ngModel)]="obj.source" nzPlaceHolder="事件来源">
+        <nz-option nzLabel="系统警告" nzValue="0"></nz-option>
+        <nz-option nzLabel="手动新增" nzValue="1"></nz-option>
     </nz-select>
   </div>
   <div nz-col nzSpan="8">
@@ -52,7 +54,7 @@
   </div>
 </div>
 
-<nz-table #nzTable [nzData]="eventList">
+<nz-table #nzTable [nzData]="eventList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
   <thead>
   <tr>
     <th>事件编号</th>

src/main/webapp/app/work/work-handle/work-handle.component.ts

 import { Component, OnInit } from '@angular/core';
+import {pageSize} from '../../app.constants';
+import {WorkService} from '../work.service';
 
 @Component({
   selector: 'smart-work-handle',
@@ -11,9 +13,52 @@ export class WorkHandleComponent implements OnInit {
     eventList;
     timeBegin;
     timeEnd;
-  constructor() { }
+    pageCount = pageSize;
+    pageNum = 1;
+    totalNum;
+
+    obj = {
+        pageCount:null,
+        pageNum:null,
+        searchStr:'',
+        type:null,
+        status:null,
+        source:null,
+        startTime:'',
+        endTime:'',
+    };
+  constructor(private workSer:WorkService) { }
 
   ngOnInit() {
+        this.getList();
+  }
+
+  getList(){
+      const obj = {
+          pageCount:this.pageCount,
+          pageNum:this.pageNum,
+          searchStr:this.obj.searchStr,
+          type:this.obj.type,
+          status:this.obj.status,
+          source:this.obj.source,
+          startTime:this.obj.startTime,
+          endTime:this.obj.endTime,
+      };
+      this.workSer.find(obj).subscribe(
+          (res)=>{
+            if(res.errCode == 10000){
+                this.eventList = res.data.data;
+                this.totalNum = res.data.totalNum;
+            }else{
+
+            }
+          }
+      )
+  }
+
+    change(e){
+        this.pageNum = e;
+        this.getList();
     }
 
 }

src/main/webapp/content/javascript/jtopo/js/util.js

@@ -18,8 +18,6 @@ var SysUtil = {
 }
 // url根路径
 var rootPath = SysUtil.getRootPath();
-console.log("rootPath");
-console.log(rootPath);
 // var topoImgPath = 'javascript/jtopo/img/';
 var topoImgPath = 'http://10.10.38.99:8282/file/icon/';