switch.component.html

<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:100px">
                <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: 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-row>
                <nz-row>
                    <nz-col nzSpan="8">名称：</nz-col>
                    <nz-col nzSpan="16">{{switch?.name}}</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">IP地址：</nz-col>
                    <nz-col nzSpan="16">{{switch?.ip || '-'}}</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">设备类型：</nz-col>
                    <nz-col nzSpan="16">交换机</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">资产编号：</nz-col>
                    <nz-col nzSpan="16">{{switch?.inventory?.no || '-'}}</nz-col>
                </nz-row>
                <nz-row>
                    <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">{{hostObj.cpu}}</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">Ping延时(ms)：</nz-col>
                    <nz-col nzSpan="16">{{hostObj.response}}</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">丢包数：</nz-col>
                    <nz-col nzSpan="16">{{hostObj.losed}}</nz-col>
                </nz-row>
                <nz-row>
                    <nz-col nzSpan="8">内存利用率(%)：</nz-col>
                    <nz-col nzSpan="16">{{hostObj.used}}</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(timeTypeTrend)" [(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>
            <div class="host-item-content" style="height: 300px">
                <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="选择接口"
                           (ngModelChange)="changeTimeFlow(timeTypeFLow)" [(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(timeTypeFLow)" [(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($event)" [(ngModel)]="timeTypeFLow">
                    <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" style="height: 300px">
                <nz-spin [nzSpinning]="isNetworkLoading">
                    <div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
                </nz-spin>
            </div>
        </div>
    </nz-col>
</nz-row>