Edge-host-maintenance/src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.html

<div class="bigbox" id="hostbox">
    <div class="orbox">
        <div class="topbox">
            <div class="lefttop">
                <span>组织机构列表</span>
            </div>
            <div class="righttop">
                <nz-input-group nzPrefixIcon="search">
                    <input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" />
                </nz-input-group>
            </div>
        </div>
        <div class="treeTitle">
            <span>组织机构</span>
        </div>
        <div class="treebox">
            <nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll"
                [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)"
                [nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]="multiExpandedIconTpl">
            </nz-tree>
            <ng-template #nzTreeTemplate let-node let-origin="origin">
                <div class="nodebox">
                    <span class="name">{{ node.title }}</span>
                </div>
            </ng-template>
            <ng-template #multiExpandedIconTpl let-node let-origin="origin">
                <ng-container *ngIf="node.children.length == 0; else elseTemplate">

                </ng-container>
                <ng-template #elseTemplate>
                    <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
                        class="ant-tree-switcher-line-icon"></i>
                </ng-template>
            </ng-template>
        </div>

    </div>
    <div class="hostListbox">
        <div class="topbox">
            <div class="lefttop">
                <span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 分析主机列表
                    <span class="yellowspan">（请从左侧选择加油站）</span>
                </span>
            </div>
            <div class="righttop" *ngIf="selectedOilStation">
                <button nz-button nzType="primary" (click)="addHost()"><i nz-icon nzType="plus-circle"
                        nzTheme="outline"></i>新增分析主机</button>
            </div>
        </div>
        <div class="tablebox">
            <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'>
                <thead>
                    <tr>
                        <th>ip</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTable.data">
                        <td>{{data.hostIPAddress}}</td>
                        <td class="operation">
                            <a (click)="edit(data)" style="margin-right: 12px;">编辑</a>
                            <a (click)="config(data)" style="margin-right: 12px;">配置</a>
                            <a (click)="delete(data)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</div>