resource-usabil.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)="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="4">
        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
            <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="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">
        <ng-container *ngIf="timeType == '5'">
            <nz-date-picker
                    nzShowTime
                    [(ngModel)]="startTime"
                    nzPlaceHolder="开始时间"
            ></nz-date-picker>
            <nz-date-picker
                    nzShowTime
                    nzFormat="yyyy-MM-dd HH:mm:ss"
                    [(ngModel)]="endTime"
                    nzPlaceHolder="结束时间"
            ></nz-date-picker>
        </ng-container>
    </div>
    <div nz-col nzSpan="2" class="text-right">
        <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search"
                                                                 style="color: #6097b7"></i>搜索
        </button>
    </div>
    <div nz-col nzSpan="3">
        <nz-spin [nzIndicator]="indicatorTemplate" nzTip='下载中...' [nzSpinning]="isDownload">
            <button (click)="downLoadCommon()" nz-button nzType="default"><i class="anticon anticon-download"></i>下载</button>
        </nz-spin>
    </div>
</div>
<nz-spin [nzSpinning]="isLoading">
    <div style="margin-top: 30px" nz-row nzGutter="4">
        <div nz-col nzSpan="12" style="height: 500px">
            <ng-container *ngIf="data.left">
                <div class="img-noData">
                    <div class="noData" title="暂无数据"></div>
                </div>
            </ng-container>
            <ng-container *ngIf="!data.left" >
                <div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
            </ng-container>
        </div>
        <div nz-col nzSpan="12" style="height: 500px;">
            <ng-container *ngIf="data.right">
                <div class="img-noData">
                    <div class="noData" title="暂无数据"></div>
                </div>
            </ng-container>
            <ng-container *ngIf="!data.right">
                <div echarts [options]="chartLastOption" style="height: 400px;width: 100%"></div>
            </ng-container>
        </div>
    </div>
</nz-spin>
<ng-template #indicatorTemplate><i class="anticon anticon-spin anticon-loading" style="font-size: 24px;"></i></ng-template>