server.component.html

<div>
    <nz-row>
        <nz-col nzSpan="12">
            <div class="padding-10" style="height: 20%;">
                <p class="host-item-title">关键指标</p>
                <div class="host-item-content" style="height:100%">
                    <nz-row>
                        <nz-col nzSpan="12">
                            <p style="text-align: center">cpu利用率</p>
                            <div class="width-host">
                                <div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
                            </div>
                        </nz-col>
                        <nz-col nzSpan="12">
                            <p style="text-align: center;color: #b7d1f1;">内存使用率</p>
                            <div class="width-host">
                                <div class="space" [style.width]="this.hostObj.used + '%'"></div>
                            </div>
                        </nz-col>
                    </nz-row>
                </div>
            </div>
            <div class="padding-10" style="height: 40%;position: relative">
                <p class="host-item-title">分区</p>
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择磁盘"
                               (ngModelChange)="setDiskChart($event)" [(ngModel)]="diskType">
                        <ng-container *ngFor="let disk of hostObj.disk;let i = index;">
                            <nz-option [nzLabel]="disk.name" [nzValue]="i"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-content" style="height: 300px;">
                    <ng-container *ngIf="noData">
                        <div class="img-noData" style="min-height: 400px">
                            <div class="noData" title="暂无数据"></div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="hostObj.disk.length > 0">
                        <nz-spin [nzSpinning]="isDiskLoading">
                            <div echarts [options]="chartDiskOption" style="height: 150px;width: 100%"></div>
                            <div class="text-center margin-bottom-10">
                                <span style="border: 1px solid #d8c5c5;padding: 4px 8px;border-radius: 3px;">{{hostObj.disk[diskType].name}}</span>
                            </div>
                            <nz-row>
                                <nz-col nzSpan="12">总大小：</nz-col>
                                <nz-col nzSpan="12">{{hostObj.disk[diskType].total | unitConversion}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="12">已用大小：</nz-col>
                                <nz-col nzSpan="12">{{hostObj.disk[diskType].used | unitConversion}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="12">剩余容量：</nz-col>
                                <nz-col nzSpan="12">{{(hostObj.disk[diskType].total - hostObj.disk[diskType].used) | unitConversion }}</nz-col>
                            </nz-row>
                        </nz-spin>
                    </ng-container>
                </div>
            </div>
            <div class="padding-10" style="height: 40%;">
                <nz-row>
                    <nz-col class="padding-right-10" nzSpan="12">
                        <p class="host-item-title">基本信息</p>
                        <div class="host-item-content" style="height: 300px;">
                            <nz-row>
                                <nz-col nzSpan="8">资源状态：</nz-col>
                                <nz-col nzSpan="16">{{server?.waringName}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">名称：</nz-col>
                                <nz-col nzSpan="16">{{server?.name}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">IP地址：</nz-col>
                                <nz-col nzSpan="16">{{server?.host || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">设备类型：</nz-col>
                                <nz-col nzSpan="16">{{equipmentType || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">资产编号：</nz-col>
                                <nz-col nzSpan="16">{{server?.inventory?.inventoryNo || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">负责人：</nz-col>
                                <nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
                            </nz-row>
                        </div>
                    </nz-col>
                    <nz-col class="padding-left-10" nzSpan="12">
                        <p class="host-item-title">指标列表</p>
                        <div class="host-item-content" style="height: 300px;">
                            <nz-row>
                                <nz-col nzSpan="16">CPU利用率(%)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.cpu || '-'}}</nz-col>
                            </nz-row>

                            <nz-row>
                                <nz-col nzSpan="16">Ping延时(ms)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.response || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="16">内存利用率(%)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.used || '-'}}</nz-col>
                            </nz-row>
                        </div>
                    </nz-col>
                </nz-row>
            </div>
        </nz-col>
        <nz-col nzSpan="12">
            <div class="padding-10" style="height: 50%;position: relative">
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择指标"
                               (ngModelChange)="changeTrend(trendObj.type)" [(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="选择时间" [(ngModel)]="timeTypeTrend"
                               (ngModelChange)="changeTrend($event)">
                        <ng-container *ngFor="let time of timeList">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-title">
                    指标趋势
                </div>
                <div class="host-item-content">
                    <nz-spin [nzSpinning]="isTrendLoading">
                        <div echarts [options]="chartTrendOption" style="height:360px;width: 100%"></div>
                    </nz-spin>
                </div>
            </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="选择时间" [(ngModel)]="timeTypeHistory"
                               (ngModelChange)="changeHistory($event)">
                        <ng-container *ngFor="let time of timeList">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-content">
                    <nz-spin [nzSpinning]="isHistoryLoading">
                        <div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
                    </nz-spin>
                </div>
            </div>
        </nz-col>
    </nz-row>
    <nz-row>
        <nz-col nzSpan="8">
            <div class="padding-10" style="position: relative">
                <div class="host-item-title">
                    风扇
                </div>
                <div class="host-item-content" style="height: 330px;">
                    <ng-container *ngIf="!fanObj.noData">
                        <nz-spin [nzSpinning]="fanObj.isFanLoading">
                            <div echarts [options]="fanObj.fanOption" style="height:310px;width: 100%"></div>
                        </nz-spin>
                    </ng-container>
                    <ng-container *ngIf="fanObj.noData">
                        <div class="img-noData" style="min-height: 300px">
                            <div class="noData" title="暂无数据"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </nz-col>
        <nz-col nzSpan="8">
            <div class="padding-10">
                <p class="host-item-title">温度</p>
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="temObj.time"
                               (ngModelChange)="changeTemp($event)">
                        <ng-container *ngFor="let time of handware">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-content" style="height: 330px;">
                    <ng-container *ngIf="!temObj.noData">
                        <nz-spin [nzSpinning]="temObj.isTemLoading">
                            <div echarts [options]="temObj.temOption" style="height:310px;width: 100%"></div>
                        </nz-spin>
                    </ng-container>
                    <ng-container *ngIf="temObj.noData">
                        <div class="img-noData" style="min-height: 300px">
                            <div class="noData" title="暂无数据"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </nz-col>
        <nz-col nzSpan="8">
            <div class="padding-10" >
                <p class="host-item-title">电压与功率</p>
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="powerObj.time"
                               (ngModelChange)="changePower($event)">
                        <ng-container *ngFor="let time of handware">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-content" style="height: 330px;">
                    <ng-container *ngIf="!powerObj.noData">
                        <nz-spin [nzSpinning]="powerObj.isPowerLoading">
                            <div echarts [options]="powerObj.powerOption" style="height:310px;width: 100%"></div>
                        </nz-spin>
                    </ng-container>
                    <ng-container *ngIf="powerObj.noData">
                        <div class="img-noData" style="min-height: 300px">
                            <div class="noData" title="暂无数据"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </nz-col>
    </nz-row>
</div>