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

<div class="orbox" id="orbox">
  <div class="lefttop">
    <span>单位基本信息</span>
    
  </div>
  <div class="topbox">

    
    <div class="righttop">

      <nz-form-item style="width: 200px;">

        <input type="text" nz-input placeholder="请输入单位" />

      </nz-form-item>
      <nz-form-item >
        <nz-form-control style="width: 200px; text-align: left;">
          <nz-select [nzMaxTagCount]="1" nzAllowClear id="area" nzPlaceHolder="单位类型">
            <nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
            <nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
            <nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
            <nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
            <nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
            <nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item style="width: 200px;">

        <input type="text" nz-input placeholder="请输入所属机构" />

      </nz-form-item>
      <nz-form-item style="width: 200px;">

        <input type="text" nz-input placeholder="请输入使用性质" />

      </nz-form-item>
    </div>
    <div>
      <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
      &nbsp;
      <button nz-button ><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
    </div>

  </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 [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>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td [nzChecked]="checked">

        </td>
        <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 [routerLink]="['/basicInfo/unit/details']" routerLinkActive="router-link-active">查看详情</a>
          &nbsp;
          <a>关闭</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <!-- <button (click)="next()">下一页</button>
<input placeholder="label" value="value"> -->
</div>