examSystem-Anxin/src/app/examiner/create-test-score/create-test-score.component.html

<div class="box" id="createtestscore">
    <div class="topbox">
        <app-tabbar></app-tabbar>
    </div>
    <div class="contant">
        <div class="main">
            <div class="leftDiv">
                <div class="title">
                    <div>
                        单位列表
                    </div>
                    <div>
                        总分: <span class="colorspan">{{examScore}}</span>
                    </div>
                </div>
                <div class="unitList">
                    <table>
                        <tr>
                            <td>单位名称</td>
                            <td>总分</td>
                        </tr>
                        <tr *ngFor="let item of unitDatas">
                            <td>{{item.name}}</td>
                            <td class="colorspan">{{item.score}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="rightDiv">
                <div class="tabsbox">
                    <div [ngClass]="{selectedTab: selectedTab == 1}" (click)="selectTab(1)">
                        基本信息
                    </div>
                    <div [ngClass]="{selectedTab: selectedTab == 2}" (click)="selectTab(2)">
                        作战部署
                    </div>
                </div>
                <div class="maincontantbox">
                    <div class="basicinfodiv" *ngIf="selectedTab == 1">
                        <div *ngFor="let unit of unitDatas;let key = index" style="margin-bottom: 30px;">
                            <!-- 选择的单位名称 -->
                            <p class="colorspan" style="margin: 0 0 12px 6px;">{{unit.name}}</p> 
                            <!-- 基本信息 -->
                            <mat-accordion>
                                <mat-expansion-panel style="box-shadow: 0 0 black;" expanded>
                                  <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;">
                                    <mat-panel-title>
                                      基本信息
                                      <span  class="colorspan" style="margin-left: 20px;">{{unit.basicInfoScore ? unit.basicInfoScore : 0}}分</span>
                                    </mat-panel-title>
                                  </mat-expansion-panel-header>
                                  
                                  <div style="box-sizing: border-box;padding: 10px;">
                                        <nz-tree
                                        [nzData]="unit.basicInfoNodes"
                                        nzCheckable
                                        nzMultiple
                                        [nzCheckedKeys]="defaultCheckedKeys"
                                        [nzExpandedKeys]="defaultExpandedKeys"
                                        [nzSelectedKeys]="defaultSelectedKeys"
                                        (nzClick)="nzEvent($event,key)"
                                        (nzExpandChange)="nzEvent($event,key)"
                                        (nzCheckBoxChange)="nzEvent($event,key)"
                                        [nzTreeTemplate]="nzTreeTemplate"
                                        >
                                        </nz-tree>
                                        <ng-template #nzTreeTemplate let-node let-origin="origin">
                                            <div class="treeNodeTemplate">
                                                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
                                                <div class="scoreDiv" *ngIf="node.origin.zIndex == '0'">
                                                    <span class="colorspan lookitem">查看</span>
                                                    <span class="item">单项<input type="number" [(ngModel)]="node.origin.itemScore" (input)="itemScore(node,key)">分</span>
                                                    <span class="item">总共<input type="number" [(ngModel)]="node.origin.sumScore" (input)="sumScore(node,key)">分</span>
                                                </div>
                                             
                                            </div>
                                        </ng-template>
                                  </div>
                                </mat-expansion-panel>
                            </mat-accordion>
                            <!-- 四周毗邻 -->
                            <mat-accordion>
                                <mat-expansion-panel style="box-shadow: 0 0 black;" expanded>
                                  <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;">
                                    <mat-panel-title>
                                      四周毗邻
                                      <span  class="colorspan" style="margin-left: 20px;">{{unit.aroundScore ? unit.aroundScore : 0}}分</span>
                                    </mat-panel-title>
                                  </mat-expansion-panel-header>
                                  
                                  <div style="box-sizing: border-box;padding: 10px;">
                                        <nz-tree
                                        [nzData]="unit.aroundNodes"
                                        nzCheckable
                                        nzMultiple
                                        [nzCheckedKeys]="defaultCheckedKeys"
                                        [nzExpandedKeys]="defaultExpandedKeys"
                                        [nzSelectedKeys]="defaultSelectedKeys"
                                        (nzClick)="nzEvent($event,key)"
                                        (nzExpandChange)="nzEvent($event,key)"
                                        (nzCheckBoxChange)="nzEvent($event,key)"
                                        [nzTreeTemplate]="nzTreeTemplate"
                                        >
                                        </nz-tree>
                                        <ng-template #nzTreeTemplate let-node let-origin="origin">
                                            <div class="treeNodeTemplate">
                                                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
                                                <div class="scoreDiv" *ngIf="node.origin.zIndex == '0'">
                                                    <span class="colorspan lookitem">查看</span>
                                                    <span class="item">单项<input type="number" [(ngModel)]="node.origin.itemScore" (input)="itemScore(node,key)">分</span>
                                                    <span class="item">总共<input type="number" [(ngModel)]="node.origin.sumScore" (input)="sumScore(node,key)">分</span>
                                                </div>
                                             
                                            </div>
                                        </ng-template>
                                  </div>
                                </mat-expansion-panel>
                            </mat-accordion>
                        </div>
                    </div>
                    <div class="fightdeploydiv" *ngIf="selectedTab == 2">
                        <div class="addPlan" (click)="addPlan()">
                            <mat-icon style="vertical-align: text-top">add_circle_outline</mat-icon>添加预案
                        </div>
                        <div class="planList">
                            <table>
                                <tr >
                                    <td>预案名称</td>
                                    <td>添加人</td>
                                    <td>修改时间</td>
                                    <td>是否公开</td>
                                    <td>编制级别</td>
                                    <td>设置分数</td>
                                    <td>操作</td>
                                </tr>
                                <tr *ngFor="let item of planDatas">
                                    <td>{{item.name}}</td>
                                    <td>{{item.or}}</td>
                                    <td>{{item.time}}</td>
                                    <td>{{item.isOpen}}</td>
                                    <td>{{item.level}}</td>
                                    <td>
                                        <input (input)="planItemScore(item)" type="number" [(ngModel)]="item.score">
                                    </td>
                                    <td>
                                        <span style="color: #07CDCF;">编辑</span>
                                        <span style="color: #FF8678;">删除</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btnbox">
            <div class="btn">
                上一步
            </div>
            <div class="btn">
                完成
            </div>
        </div>
    </div>
</div>