pad-Sixfamiliar/src/app/key-unit/key-site/key-site.component.html

<div class="content">
  <mat-tab-group style="height: 100%;">
    <mat-tab label="单位重点部位">
      <div class="contentBox">

        <div style="margin-top: 25px;">
          <h3 style="text-align: center;font-weight: 550;font-size: 20px;">重点部位情况</h3>
          <table mat-table [dataSource]="allCompanyPosition">
            <ng-container matColumnDef="mainname">
              <th mat-header-cell *matHeaderCellDef>重点部位名称</th>
              <td mat-cell *matCellDef="let element">
                {{element.name}}
              </td>
            </ng-container>
            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef>重点部位所在位置</th>
              <td mat-cell *matCellDef="let element">
                {{element.position}}
              </td>
            </ng-container>
            <ng-container matColumnDef="construction">
              <th mat-header-cell *matHeaderCellDef>建筑结构</th>
              <td mat-cell *matCellDef="let element">
                {{element.structure}}
              </td>
            </ng-container>
            <ng-container matColumnDef="nature">
              <th mat-header-cell *matHeaderCellDef>使用性质</th>
              <td mat-cell *matCellDef="let element">
                {{element.nature}}
              </td>
            </ng-container>
            <ng-container matColumnDef="danger">
              <th mat-header-cell *matHeaderCellDef>主要危险性</th>
              <td mat-cell *matCellDef="let element">
                {{element.hazards}}
              </td>
            </ng-container>
            <ng-container matColumnDef="img">
              <th mat-header-cell *matHeaderCellDef>图片</th>
              <td mat-cell *matCellDef="let element">
                <a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
          <p style="text-align: center;font-size: 18px;" *ngIf="!allCompanyPosition.length">暂无数据,请前往平面图进行相关数据录入</p>
        </div>
        <div style="margin-top: 25px; text-align: left;">
          <h3 style="text-align: center;font-weight: 550;font-size: 18px;">重点提示</h3>
          <mat-icon *ngIf="isEditPattern" title="保存" style="margin-left: 11%; cursor: pointer;" (click)='Preservation()'>description</mat-icon>
          <p class="tips">
            <textarea [disabled]="!isEditPattern" [(ngModel)]="companyInput" maxlength="5000"></textarea>
          </p>
        </div>

      </div>
    </mat-tab>

    <mat-tab label="{{item.name}}" *ngFor="let item of allBuilding;let key = index">
      <div class="contentBox">

        <div style="margin-top: 25px;">
          <h3 style="text-align: center;font-weight: 550;font-size: 18px;">重点部位情况</h3>
          <table mat-table [dataSource]="item.position">
            <ng-container matColumnDef="mainname">
              <th mat-header-cell *matHeaderCellDef>重点部位名称</th>
              <td mat-cell *matCellDef="let element">
                {{element.name}}
              </td>
            </ng-container>
            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef>重点部位所在位置</th>
              <td mat-cell *matCellDef="let element">
                {{element.position}}
              </td>
            </ng-container>
            <ng-container matColumnDef="construction">
              <th mat-header-cell *matHeaderCellDef>建筑结构</th>
              <td mat-cell *matCellDef="let element">
                {{element.structure}}
              </td>
            </ng-container>
            <ng-container matColumnDef="nature">
              <th mat-header-cell *matHeaderCellDef>使用性质</th>
              <td mat-cell *matCellDef="let element">
                {{element.nature}}
              </td>
            </ng-container>
            <ng-container matColumnDef="danger">
              <th mat-header-cell *matHeaderCellDef>主要危险性</th>
              <td mat-cell *matCellDef="let element">
                {{element.hazards}}
              </td>
            </ng-container>
            <ng-container matColumnDef="img">
              <th mat-header-cell *matHeaderCellDef>图片</th>
              <td mat-cell *matCellDef="let element;let x = index">
                <a href="javascript:void(0);" style="color: blue;" (click)='seeImg(element.imageUrls)'>查看图片</a>
                <!-- <div id="viewerjs{{key}}" style="display: none;" >
                  <img *ngFor="let i of element.imageUrls" [src]="i" alt="">
                </div> -->
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
          <p style="text-align: center;font-size: 18px;" *ngIf="!item.position.length">暂无数据,请前往平面图进行相关数据录入</p>
        </div>
        <div style="margin-top: 25px; text-align: left;">
          <h3 style="text-align: center;font-weight: 550;font-size: 18px;">重点提示</h3>
          <mat-icon *ngIf="isEditPattern" title="保存" style="margin-left: 11%;cursor: pointer;" (click)='PreservationBuilding(item)'>description</mat-icon>
          <p class="tips">
            <textarea [disabled]="!isEditPattern" [(ngModel)]="item.companyInput" maxlength="5000"></textarea>
          </p>
        </div>

      </div>
    </mat-tab>

  </mat-tab-group>  
</div>