examSystem-Anxin/src/app/student/examination-details/examination-details.component.html

<div class="content">
  <div><app-tabbar></app-tabbar></div>
  <div class="center">

    <div class="left">
      <div class="headerLeft">
        <div>单位列表</div>
        <div style="text-align: right;">总分: 
          <label style="color: #07CDCF;">{{examScore}}</label>
        </div>
      </div>
      <div class="centerLeft" style="background: #F5FDFE;"><div class="overflowText">单位名称</div><div class="overflowText">总分</div></div>
      <div class="centerLeft" *ngFor="let item of paperCompanyData" [ngClass]="{'selectPaper': selectPaper.id == item.id}" (click)='togglePaper(item)'>
        <div class="overflowText">{{item.companyInfo.name}}</div>
        <div class="overflowText">{{item.score}}+{{item.planScore || 0}}</div>
      </div>
    </div>
    <div class="right">
      <div class="headerRight">
        <label (click)='togglePaperType(1)' [ngClass]="{'selectPaperType': selectPaperType == '1'}">基本信息</label>
        <label (click)='togglePaperType(2)' [ngClass]="{'selectPaperType': selectPaperType == '2'}">作战部署</label>
        <button (click)='uploadPaper()'>交卷</button>
      </div>
      <div class="centerRight">
        <div class="paperCenter" *ngIf="selectPaperType == '1'">

          <mat-accordion multi>
            <!-- 基本信息 -->
            <mat-expansion-panel>
              <mat-expansion-panel-header class="panelHeader">
                <label class="mariginRight">基本信息</label>
                <label>总分: <label class="mark"> 25</label>分, </label><label>单项<label class="mark">2</label>分</label>
              </mat-expansion-panel-header>

            </mat-expansion-panel>
            <!-- 基本信息 -->
            <!-- 四周毗邻 -->
            <mat-expansion-panel *ngIf="selectPaper.adjoinData && selectPaper.adjoinData.length">
              <mat-expansion-panel-header class="panelHeader">
                <label class="mariginRight">四周毗邻</label>
                <label>总分: <label class="mark"> {{selectPaper.adjoinScore}}</label>分, </label><label>单项<label class="mark"></label>分</label>
              </mat-expansion-panel-header>
              <div class="publicTest" *ngFor="let item of selectPaper.adjoinData">
                <div class="publicTitle">{{item.name}}</div>
                <div class="publicInput" *ngFor="let element of item.children"><label>{{element.name}}:</label><input type="text" [(ngModel)]="element.userAnswer" name="userAnswer"></div>
              </div>
            </mat-expansion-panel>
            <!-- 四周毗邻 -->
            <!-- 重点部位 -->
            <mat-expansion-panel *ngIf="selectPaper.importLocationData && selectPaper.importLocationData.length">
              <mat-expansion-panel-header class="panelHeader">
                <label class="mariginRight">重点部位</label>
                <label>总分: <label class="mark"> {{selectPaper.importLocationScore}}</label>分, </label><label>单项<label class="mark"></label>分</label>
              </mat-expansion-panel-header>
              <div class="publicTest" *ngFor="let item of selectPaper.importLocationData">
                <div class="publicTitle">{{item.name}}</div>
                <div class="publicTable">
                  <div class="tableRow" *ngFor="let element of item.tabledata; let key = index">
                    <div class="tabelHeader">{{element.propertyName}}</div>
                    <div class="tabelCenter" *ngFor="let elements of element.data">
                      <label *ngIf="key===0">{{elements.result}}</label>
                      <input type="text" [(ngModel)]="elements.userAnswer" name="userAnswer" *ngIf="key!=0">
                    </div>
                  </div>
                </div>
              </div>
            </mat-expansion-panel>
            <!-- 重点部位 -->
            <!-- 功能分区 -->
            <mat-expansion-panel *ngIf="selectPaper.functionalDivisionData && selectPaper.functionalDivisionData.length">
              <mat-expansion-panel-header class="panelHeader">
                <label class="mariginRight">功能分区</label>
                <label>总分: <label class="mark"> {{selectPaper.functionalDivisionScore}}</label>分, </label><label>单项<label class="mark"></label>分</label>
              </mat-expansion-panel-header>
              <div class="publicTest" *ngFor="let item of selectPaper.functionalDivisionData">
                <div class="publicTitle">{{item.name}}</div>
                <div class="publicTable">
                  <div class="tableRow" *ngFor="let element of item.tabledata; let key = index">
                    <div class="tabelHeader">{{element.propertyName}}</div>
                    <div class="tabelCenter" *ngFor="let elements of element.data">
                      <label *ngIf="key===0">{{elements.result}}</label>
                      <input type="text" [(ngModel)]="elements.userAnswer" name="userAnswer" *ngIf="key!=0">
                    </div>
                  </div>
                </div>
              </div>
            </mat-expansion-panel>
            <!-- 功能分区 -->
            <!-- 数据核验 -->
            <mat-expansion-panel *ngIf="selectPaper.facilityData && selectPaper.facilityData.length">
              <mat-expansion-panel-header class="panelHeader">
                <label class="mariginRight">数据核验</label>
                <label>总分: <label class="mark"> {{selectPaper.facilityScore}}</label>分, </label><label>单项<label class="mark"></label>分</label>
              </mat-expansion-panel-header>
              <div class="publicTest" *ngFor="let item of selectPaper.facilityData">
                <div class="publicTitle">{{item.name}}</div>
                <div class="publicInput" *ngFor="let element of item.children"><label>{{element.name}}:</label><input type="text" [(ngModel)]="element.userAnswer" name="userAnswer"></div>
              </div>
            </mat-expansion-panel>
            <!-- 数据核验 -->
          </mat-accordion>

        </div>
        <div class="paperCenter" *ngIf="selectPaperType == '2'">作战部署</div>
      </div>
    </div>

  </div>
</div>