flow-trend.component.html

<div nz-row class="breadcrumbs">
    <div nz-col nzSpan="16">
        <nz-breadcrumb class="padding-8-0">
            <nz-breadcrumb-item>
                首页
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a>网络拓扑</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                流量趋势
            </nz-breadcrumb-item>
        </nz-breadcrumb>
    </div>
    <div nz-col nzSpan="8" class="text-right">
        <button (click)="search()" nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
        <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
        <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
    </div>
</div>
<div nz-row [nzGutter]="4" class="search-form">
    <div nz-col nzSpan="3">
        <nz-select style="width: 100%;"   nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList()">
            <ng-container *ngFor="let item of groupList">
                <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="3">
        <nz-select style="width: 100%;"   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>
        </nz-select>
    </div>
    <div nz-col nzSpan="7">
        <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()"
                        [nzButtonStyle]="'solid'">
            <label nz-radio-button nzValue="1">今天</label>
            <label nz-radio-button nzValue="2">昨天</label>
            <label nz-radio-button nzValue="3">三天</label>
            <label nz-radio-button nzValue="4">一周</label>
            <label nz-radio-button nzValue="5">自定义</label>
        </nz-radio-group>
    </div>
    <div nz-col nzSpan="8" *ngIf="timeType == '5'">
        <nz-date-picker
                nzShowTime
                [(ngModel)]="timeBegin"
                nzPlaceHolder="开始时间"
        ></nz-date-picker>
        <nz-date-picker
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                [(ngModel)]="timeEnd"
                nzPlaceHolder="结束时间"
        ></nz-date-picker>
    </div>
</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>最大值</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 | toUtil}}</td>
                    <td>{{item.min | toUtil}}</td>
                    <td>{{item.avg | toUtil}}</td>
                </tr>
            </ng-container>
            </tbody>
        </nz-table>
    </nz-tab>
    <nz-tab  nzTitle="发送流量排行">
        <nz-table #nzTable [nzData]="outList" [nzLoading]="outLoading" [nzFrontPagination]="false" [nzTotal]="outTotalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount" (nzPageIndexChange)="outChnagePage($event)">
            <thead>
            <tr>
                <th nzWidth="20%">监测点名称</th>
                <th>最大值</th>
                <th>最小值</th>
                <th>平均值</th>
            </tr>
            </thead>
            <tbody>
            <ng-container *ngFor="let data of outList">
                <tr class="cursor" (click)="getEcharts(data.itemid)">
                    <td>{{data.itemName}}</td>
                    <td>{{data.max | toUtil}}</td>
                    <td>{{data.min | toUtil}}</td>
                    <td>{{data.avg | toUtil}}</td>
                </tr>
            </ng-container>
            </tbody>
        </nz-table>
    </nz-tab>
</nz-tabset>