basic.component.html

<div nz-row class="breadcrumbs">
    <div nz-col nzSpan="6">
        <nz-breadcrumb class="padding-8-0">
            <nz-breadcrumb-item>
                首页
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a>综合监控</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a (click)="backList()">基础资源监控</a>
            </nz-breadcrumb-item>
        </nz-breadcrumb>
    </div>
    <div nz-col nzSpan="4">
        <nz-select style="width: 200px;" nzPlaceHolder="按组分开" [(ngModel)]="selectedValue"
                   (ngModelChange)="select($event)">
            <nz-option nzLabel="按设备类型展开" nzValue="type"></nz-option>
            <nz-option nzLabel="按资源分组展开" nzValue="group"></nz-option>
        </nz-select>
    </div>
    <div nz-col nzSpan="6" class="text-right">
        <nz-select *ngIf="selectedValue == 'group'" style="width: 200px;" nzPlaceHolder="所有分组" nzAllowClear nzShowSearch
                   (ngModelChange)="changeGroup($event)" [(ngModel)]="groupid">
            <ng-container *ngFor="let item of groupList">
                <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
            </ng-container>
        </nz-select>
        <nz-select *ngIf="selectedValue == 'type'" style="width: 200px;" nzPlaceHolder="所有设备类型" nzShowSearch nzAllowClear
                   (ngModelChange)="changeEquiment($event)" [(ngModel)]="equipmentTypeid">
            <nz-option nzLabel="全部" [nzValue]="null"></nz-option>
            <ng-container *ngFor="let item of groupList">
                <nz-option [nzLabel]="item.equipmentType" [nzValue]="item.equipmentTypeId"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="6" class="search-input text-right">
        <input (keyup.enter)="search()" type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
        <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索
        </button>
    </div>
    <div nz-col nzSpan="2" 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 tag-form tag-warn">
    <div nz-col nzSpan="8" class="padding-5-0">
        <span>监控设备数：{{deviceNo}}</span>
        <span>设备状态：
      <span [ngClass]="{'select-border': status == '正常'}" (click)="changeStatus('正常')" style="margin-right: 8px"> <nz-tag
              class="tag-green" [nzColor]="color.green"></nz-tag>
          <i *ngIf="!green && green !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{green}}
      </span>
      <span [ngClass]="{'select-border': status == '告警'}" (click)="changeStatus('告警')" style="margin-right: 8px"> <nz-tag
              class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
          <i *ngIf="!yellow && yellow != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{yellow}}
      </span>
      <span [ngClass]="{'select-border': status == '严重'}" (click)="changeStatus('严重')" style="margin-right: 8px"> <nz-tag
              class="tag-red" [nzColor]="color.red"></nz-tag>
           <i *ngIf="!red && red != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{red}}
      </span>
      <span [ngClass]="{'select-border': status == '禁用'}" (click)="changeStatus('禁用')"> <nz-tag
              [nzColor]="color.gray"></nz-tag>
            <i *ngIf="!gray && gray!=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{gray}}
      </span>
    </span>
    </div>
    <div nz-col nzSpan="9" class="button">
        <button nz-button nzType="default"  (click)="showGroupModal()">
            <i class="anticon anticon-plus-circle-o"></i>添加分组
        </button>
        <button nz-button nzType="default"  (click)="updateGroup()">
            <i class="anticon anticon-form"></i>编辑分组
        </button>
        <button nz-button nzType="default"  (click)="showDeleteGroupConfirm()">
            <i class="anticon anticon-close-circle-o"></i>删除分组
        </button>
        <button nz-button nzType="default"  (click)="showBasicEditModal()">
            <i class="anticon anticon-plus-circle-o"></i>添加资源
        </button>
    </div>
    <div nz-col nzSpan="7" class="text-right button">
        <button (click)="openBatchHost(1,'停止')"  nz-button nzType="default">
            <i class="anticon anticon-pause-circle-o"></i>停止监控
        </button>
        <button (click)="openBatchHost(0,'开启')"  nz-button nzType="default">
            <i class="anticon anticon-play-circle-o"></i>开启监控
        </button>
        <button (click)="batchDeleteConfirm()" nz-button nzType="default"  >
            <i class="anticon anticon-close-circle-o"></i>删除资源
        </button>
    </div>
</div>
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="false" [nzShowPagination]="true"
          [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount"
          (nzPageIndexChange)="change($event)">
    <thead>
    <tr>
        <th [nzChecked]="allChecked"></th>
        <th nzWidth="20%">名称</th>
        <th>状态</th>
        <th>关联资产</th>
        <th>设备类型</th>
        <th>可用性</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let item of nzTable.data">
        <tr>
            <td nzShowCheckbox (nzCheckedChange)="selectChecked($event,item)"
                [(nzChecked)]="item.checked"></td>
            <td class="cursor main-color">
                <span (click)="goDetail(item)">{{item.name}}</span>
            </td>
            <td class="round-tag tag-form">
                <ng-container *ngIf="item.waringName == '正常'">
                    <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                </ng-container>
                <ng-container *ngIf="item.waringName == '禁用'">
                    <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                </ng-container>
                <ng-container *ngIf="item.waringName == '告警'">
                    <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                </ng-container>
                <ng-container *ngIf="item.waringName == '严重'">
                    <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
                </ng-container>
            </td>
            <td class="cursor">
                <span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
            </td>
            <td class="cursor main-color">
                <span (click)="goEquip(item)">{{item?.equipmentType}}</span>
            </td>
            <td class="default">
                <ng-container *ngIf="!item.available || item.available == 0">
                    <nz-tag>AGENT</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.available == 1">
                    <nz-tag [nzColor]="'#3bae6a'">AGENT</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.available == 2">
                    <nz-tooltip [nzTitle]="item.error">
                        <nz-tag nz-tooltip [nzColor]="'#d44f51'">AGENT</nz-tag>
                    </nz-tooltip>
                </ng-container>

                <ng-container *ngIf=" !item.snmp_available || item.snmp_available == 0">
                    <nz-tooltip [nzTitle]="item?.snmp_error">
                        <nz-tag>SNMP</nz-tag>
                    </nz-tooltip>
                </ng-container>
                <ng-container *ngIf="item.snmp_available == 1">
                    <nz-tag [nzColor]="'#3bae6a'">SNMP</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.snmp_available == 2">
                    <nz-tooltip [nzTitle]="item.snmp_error">
                        <nz-tag nz-tooltip [nzColor]="'#d44f51'">SNMP</nz-tag>
                    </nz-tooltip>
                </ng-container>

                <ng-container *ngIf="!item.jmx_available || item.jmx_available == 0">
                    <nz-tag>JMX</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.jmx_available == 1">
                    <nz-tag [nzColor]="'#3bae6a'">JMX</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.jmx_available == 2">
                    <nz-tooltip [nzTitle]="item.jmx_error">
                        <nz-tag nz-tooltip [nzColor]="'#d44f51'">JMX</nz-tag>
                    </nz-tooltip>
                </ng-container>

                <ng-container *ngIf="!item.ipmi_available || item.ipmi_available == 0">
                    <nz-tag>IPMI</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.ipmi_available == 1">
                    <nz-tag [nzColor]="'#3bae6a'">IPMI</nz-tag>
                </ng-container>
                <ng-container *ngIf="item.ipmi_available == 2">
                    <nz-tooltip [nzTitle]="item.ipmi_error">
                        <nz-tag nz-tooltip [nzColor]="'#d44f51'">IPMI</nz-tag>
                    </nz-tooltip>
                </ng-container>
            </td>
            <td class="handle main-color">
                <span (click)="showBasicCheckModal(item.hostid,item.host)">添加监测点</span>
                <span (click)="editBasicModal(item)">编辑</span>
                <span class="handle-delete" (click)="showDeleteConfirm(item)">删除</span>
                <nz-dropdown [nzTrigger]="'click'" class="table-dropdown">
                    <a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
                    </a>
                    <ul nz-menu nzSelectable>
                        <li (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
                        <li (click)="openHost(item)" nz-menu-item><a>
                            <ng-container *ngIf="item.status == 1">开启</ng-container><ng-container *ngIf="item.status == 0">停止</ng-container>监控
                        </a></li>
                        <li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
                        <li (click)="showAlarm()" nz-menu-item><a>添加告警</a></li>
                    </ul>
                </nz-dropdown>
            </td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>


<!-- 添加资源-->
<smart-basic-edit #basicEdit (done)="handleOk($event)"></smart-basic-edit>
<!--添加监测点-->
<smart-basi-check #smartCheck></smart-basi-check>
<!--添加分组-->
<smart-create-group #smartCreateGroup (add)="handleOk($event)"></smart-create-group>
<!--临时暂停-->
<smart-pause #smartPause (done)="handleOk($event)"></smart-pause>
<!--添加告警-->
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>