Jinan_project/src/app/home/basic-info/unit/unit.component.html

<div class="orbox" id="orbox">
    <div class="topbox">
        <!-- <div class="lefttop">
          <span>菜单列表</span>
          
        </div> -->
        <div class="righttop">
            <!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
            <nz-form-item>
              <nz-form-control>
                <nz-input-group nzPrefixIcon="search">
                  <input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/>
                </nz-input-group>
              </nz-form-control>
              <button style="display: none;" type="submit"></button>
            </nz-form-item>
          </form> -->
            <nz-input-group nzPrefixIcon="search">
                <input type="text" nz-input placeholder="请输入单位" />
            </nz-input-group>
            <nz-input-group nzPrefixIcon="search">
                <input type="text" nz-input placeholder="请输入单位" />
            </nz-input-group>
            <nz-input-group nzPrefixIcon="search">
                <input type="text" nz-input placeholder="请输入单位" />
            </nz-input-group>
        </div>
        <div>
            <button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>查询</button>
            <button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>重置</button>
        </div>
        <div>

        </div>
    </div>
    <nz-table [nzBordered]="true" #basicTable [nzData]="listOfData">
        <thead>
          <tr>
            <th>单位名称</th>
            <th>信息完整度</th>
            <th>所属机构</th>
            <th>单位级别</th>
            <th>使用性质</th>
            <th>修改时间</th>
            <th>单位地址</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td >{{ data.name }}</td>
            <td ><div style="height: 20px; background: #eee; border-radius: 4px;">
                <div [ngStyle]="{'width':data.integrity+'%'}" style=" height: 100%; background: #46B783; border-radius: 4px; text-align: center; color: #fff;">{{data.integrity}}%</div>
            </div></td>
            <td >{{ data.organization }}</td>
            <td >{{ data.level }}</td>
            <td >{{ data.nature }}</td>
            <td >{{ data.time }}</td>
            <td >{{ data.addr }}</td>
            <td >{{ data.state }}</td>
            <td >
              <a>查看详情</a>
              &nbsp;
              <a>关闭</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    <!-- <button (click)="next()">下一页</button>
<input placeholder="label" value="value"> -->
</div>