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 *ngIf="echartType == 'history'" (click)="changeEchartType('now')" nz-button nzType="default">实时数据
        </button>
        <button *ngIf="echartType == 'now'" (click)="changeEchartType('history')" nz-button nzType="default">趋势数据
        </button>
        <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
        <smart-full-screen></smart-full-screen>
    </div>
</div>
<div nz-row [nzGutter]="4" class="search-form">
    <div nz-col nzSpan="6">
        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch [(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="6">
        <nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" nzShowSearch nzAllowClear [(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="6"></div>
    <div nz-col nzSpan="4"></div>
    <div nz-col nzSpan="2" class="search-input text-right">
        <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    </div>
</div>
<div nz-row [nzGutter]="4" class="padding-top-10 padding-bottom-10">
    <div nz-col nzSpan="7">
        <ng-container *ngIf="echartType == 'history'">
            <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()">
                <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="99">自定义</label>
            </nz-radio-group>
        </ng-container>
    </div>
    <div nz-col nzSpan="8">
        <ng-container *ngIf="timeType == '99'">
            <nz-date-picker
                    nzFormat="yyyy-MM-dd"
                    [(ngModel)]="timeBegin"
                    nzPlaceHolder="开始时间"
            ></nz-date-picker>
            <nz-date-picker
                    nzFormat="yyyy-MM-dd"
                    [(ngModel)]="timeEnd"
                    nzPlaceHolder="结束时间"
            ></nz-date-picker>
        </ng-container>
    </div>
</div>
<nz-spin [nzSpinning]="isLoading">
<div style="height: 400px">
    <ng-container *ngIf="echartType == 'now'">
        <ng-container *ngIf="data.now">
            <div class="img-noData">
                <div class="noData" title="暂无数据"></div>
            </div>
        </ng-container>
        <ng-container *ngIf="!data.now">
            <div echarts [options]="nowChartOption" (chartInit)="onEchartInit($event)" style="height: 400px;width: 100%"></div>
        </ng-container>
    </ng-container>
    <ng-container *ngIf="echartType == 'history'">
        <ng-container *ngIf="data.history">
            <div class="img-noData">
                <div class="noData" title="暂无数据"></div>
            </div>
        </ng-container>
        <ng-container *ngIf="!data.history">
            <div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
        </ng-container>
    </ng-container>
</div>
</nz-spin>
<div class="padding-15-0">
    <ng-container *ngIf="echartType == 'history'">
        <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 class="cursor" (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>
    </ng-container>
</div>