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

<div class="orbox">
  <div class="lefttop">
    <span>单位基本信息</span>
  </div>
  <div class="topbox">
    <input type="text" nz-input placeholder="请输入单位" />
    <nz-select nzAllowClear nzPlaceHolder="单位类型">

    </nz-select>
    <input type="text" nz-input placeholder="请输入所属机构" />
    <nz-select nzAllowClear nzPlaceHolder="使用性质">
      <nz-option nzValue="一般单位" nzLabel="一般单位"></nz-option>
      <nz-option nzValue="重点单位" nzLabel="重点单位"></nz-option>
    </nz-select>
    <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
    <button nz-button><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
  </div>
  <div class="translate">
    <button nz-button nzType="primary" (click)="addOr()"><i nz-icon nzType="plus-circle"
        nzTheme="outline"></i>新增</button>
    <!-- <button nz-button nzType="primary"><i nz-icon nzType="edit" nzTheme="outline"></i>修改</button>
    <button nz-button nzType="primary" nzDanger><i nz-icon nzType="delete" nzTheme="outline"></i>删除</button> -->
  </div>
  <nz-table [nzLoading]="nzLoading" [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.companyName }}</td>
        <td>
          <div style="height: 20px; background: #eee; border-radius: 4px;">
            <div [ngStyle]="{'width':integrity+'%'}"
              style=" height: 100%; background: #46B783; border-radius: 4px; text-align: center; color: #fff;">
              {{integrity}}%</div>
          </div>
        </td>
        <td>{{ data.organization }}</td>
        <td>{{ data.level }}</td>
        <td>{{ data.useNature }}</td>
        <td>{{ data.creationTime | date:"yyyy-MM-dd hh:mm:ss"}}</td>
        <td>{{ data.addr }}</td>
        <!-- <td>{{ data.state }}</td> -->
        <td class="operation">
          <a class="bule" (click)="look(data)">查看</a>
          <a class="bule" (click)="edit(data)">编辑</a>
          <!-- <a class="bule">启用</a> -->
          <a class="red" (click)="delete(data)">删除</a>
        </td>
      </tr>
    </tbody>
    <div class="pagination">
      <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount" [nzPageSize]="16"
        [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
      </nz-pagination>
      <ng-template #totalTemplate let-total> 16条/页,共{{totalCount}}条 </ng-template>
    </div>

  </nz-table>
</div>