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.hostid"
                   (ngModelChange)="getCheckList()">
            <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">
        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch nzAllowClear [(ngModel)]="obj.itemKey"
                   (ngModelChange)="getEcharts()">
            <ng-container *ngFor="let item of checkList;">
                <nz-option [nzLabel]="item.name" [nzValue]="item.name"></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" style="padding-bottom: 10px">
    <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="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>
    </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>-->