<nz-row>
    <nz-col nzSpan="8">
        <div class="padding-10" style="height: 30%;">
            <p class="host-item-title">关键指标</p>
            <div class="host-item-content" style="height: 100%;">

            </div>
        </div>
        <div class="padding-10" style="height: 35%;">
            <p class="host-item-title">基本信息</p>
            <div class="host-item-content" style="height: 100%;">
                <nz-row>
                    <nz-col nzSpan="8">资源状态：</nz-col>
                    <nz-col nzSpan="16">{{switch?.waringName}}</nz-col>

                    <nz-col nzSpan="8">名称：</nz-col>
                    <nz-col nzSpan="16">{{switch?.name}}</nz-col>

                    <nz-col nzSpan="8">IP地址：</nz-col>
                    <nz-col nzSpan="16">{{switch?.ip}}</nz-col>

                    <nz-col nzSpan="8">设备类型：</nz-col>
                    <nz-col nzSpan="16">交换机</nz-col>

                    <nz-col nzSpan="8">资产编号：</nz-col>
                    <nz-col nzSpan="16">{{switch?.inventory?.no}}</nz-col>

                    <nz-col nzSpan="8">负责人：</nz-col>
                    <nz-col nzSpan="16">{{switch?.inventory?.person}}</nz-col>
                </nz-row>
            </div>
        </div>
        <div class="padding-10" style="height: 35%;">
            <p class="host-item-title">指标列表</p>
            <div class="host-item-content" style="height: 100%;">
                <nz-row>
                    <nz-col nzSpan="8">CPU利用率(%)：</nz-col>
                    <nz-col nzSpan="16">100</nz-col>

                    <nz-col nzSpan="8">Ping延时(ms)：</nz-col>
                    <nz-col nzSpan="16">100</nz-col>

                    <nz-col nzSpan="8">丢包数：</nz-col>
                    <nz-col nzSpan="16">100</nz-col>

                    <nz-col nzSpan="8">内存利用率(%)：</nz-col>
                    <nz-col nzSpan="16">100</nz-col>

                    <nz-col nzSpan="8">总流速(Kbps)：</nz-col>
                    <nz-col nzSpan="16">100</nz-col>
                </nz-row>
            </div>
        </div>
    </nz-col>
    <nz-col nzSpan="16">
        <div class="padding-10" style="height: 50%;position: relative">
            <div class="host-item-title">指标趋势</div>
            <div class="time-group" style="top: 18px;">
                <nz-select style="width: 150px;"  nzPlaceHolder="选择指标"
                           (ngModelChange)="changeTimeTarget(null)" [(ngModel)]="trendObj.type">
                    <ng-container *ngFor="let flow of targetFlow">
                        <nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
                    </ng-container>
                </nz-select>
                <nz-select style="width: 150px;"  nzPlaceHolder="选择时间"
                           (ngModelChange)="changeTimeTarget($event)" [(ngModel)]="timeTypeTrend">
                    <ng-container *ngFor="let time of timeList">
                        <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                    </ng-container>
                </nz-select>
            </div>
            <nz-spin [nzSpinning]="isTrendLoading">
                <div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
            </nz-spin>
        </div>
        <div class="padding-10" style="height: 50%;position: relative">
            <div class="host-item-title">网卡流量</div>
            <div class="time-group"  style="top: 18px;">
                <nz-select style="width: 150px;" nzPlaceHolder="选择接口"
                           (ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.itemName">
                    <ng-container *ngFor="let interface of interfaceList">
                        <nz-option [nzLabel]="interface" [nzValue]="interface"></nz-option>
                    </ng-container>
                </nz-select>
                <nz-select style="width: 150px;" nzPlaceHolder="选择单位"
                           (ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.unit">
                    <ng-container *ngFor="let unit of unitList">
                        <nz-option [nzLabel]="unit.label" [nzValue]="unit.value"></nz-option>
                    </ng-container>
                </nz-select>
                <nz-select style="width: 150px;" nzPlaceHolder="选择时间"
                           (ngModelChange)="changeTimeFlow(null)" [(ngModel)]="timeTypeFLow">
                    <ng-container *ngFor="let time of timeList">
                        <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                    </ng-container>
                </nz-select>
            </div>

            <nz-spin [nzSpinning]="isNetworkLoading">
                <div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
            </nz-spin>
        </div>
    </nz-col>
</nz-row>

