<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>
                统计分析
            </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 class="search-form">
    <div nz-col nzSpan="8">
        <nz-select style="width: 200px;" nzPlaceHolder="选择业务" [(ngModel)]="serviceId" (ngModelChange)="changeService()">
            <ng-container *ngFor="let item of rootList">
                <nz-option [nzLabel]="item.name" [nzValue]="item.serviceid"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="8">
        <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>
    </div>
    <div nz-col nzSpan="8" *ngIf="timeType == '99'">
        <nz-date-picker nzFormat="yyyy-MM-dd"
                        [(ngModel)]="obj.startTime"
                        nzPlaceHolder="开始时间"
        ></nz-date-picker>
        <nz-date-picker
                nzFormat="yyyy-MM-dd"
                [(ngModel)]="obj.endTime"
                nzPlaceHolder="结束时间"
                (ngModelChange)="findChart()"
        ></nz-date-picker>
    </div>
</div>
<div class="tabset">
    <div class="releative">
        <div nz-row class="header">
            <div nz-col nzSpan="7">
                <div echarts [options]="analyOption" style="height: 250px;width: 100%;"></div>
            </div>
            <div nz-col nzSpan="5">
                <div class="position-center">
                    <p class="tag-form">
                        <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
                        严重：{{analyObj?.danger}}个，{{analyObj?.dangerPercent}}
                    </p>
                    <p class="tag-form">
                        <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                        告警：{{analyObj?.alarm}}个，{{analyObj?.alarmPercent}}
                    </p>
                    <p class="tag-form">
                        <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                        正常：{{analyObj?.normal}}个，{{analyObj?.normalPercent}}
                    </p>
                    <p class="tag-form">
                        <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                        未知：{{analyObj?.unknown}}个，{{analyObj?.unknownPercent}}
                    </p>
                </div>
            </div>
            <div nz-col class="text-center" nzSpan="7">
                <div echarts [options]="runOption" style="height: 250px;width: 100%;"></div>
            </div>
            <div nz-col nzSpan="5">
                <div class="position-center">
                    <p class="tag-form">
                        <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
                        断线：{{runObj?.downtimeTimeValue}}
                    </p>
                    <p class="tag-form">
                        <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                        问题：{{runObj?.problemTimeValue}}
                    </p>
                    <p class="tag-form">
                        <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                        正常：{{runObj?.okTImeValue}}
                    </p>
                </div>
            </div>
        </div>
        <div style="min-height: 500px">
            <ng-container *ngIf="noData">
                <div class="img-noData">
                    <div class="noData" title="暂无数据"></div>
                </div>
            </ng-container>
            <ng-container *ngIf="!noData">
                <div style="margin: 30px 0;">
                    <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
                        <div nz-row class="chart-div">
                            <div nz-col [nzSpan]="12">
                                <div echarts [options]="chartSpeed" style="height: 250px;width: 100%;"></div>
                            </div>
                            <div nz-col [nzSpan]="12">
                                <div echarts [options]="chartTime" style="height: 250px;width: 100%;"></div>
                            </div>
                        </div>
                    </nz-spin>
                </div>
            </ng-container>
        </div>
    </div>
</div>
