ShangHaiYuan-AnXin/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

<div class="bigbox">
    <div class="titlebox">
        <div class="titleitembox">
            <div class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
                1.封面
            </div>
            <div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)"
                [ngClass]="{'selectedItem': selectedItem == item.groupName}">
                {{key + 2}}.{{item.groupName}}
            </div>
        </div>
        <div class="btnbox">
            <button mat-stroked-button>
                <mat-icon>visibility</mat-icon> 预览
            </button>
            <button mat-flat-button color="primary">
                <mat-icon>save</mat-icon> 提交
            </button>
        </div>
    </div>
    <div class="contentbox">
        <div class="leftbox">

        </div>
        <div class="mainbox">
            <!-- 封面 -->
            <div class="cover" *ngIf="selectedItem == '封面'">
                <p class="planNum">
                    预案编号: <input type="text" name="" id="">
                </p>
                <h1>{{planName}}</h1>
                <ul *ngIf="unitData">
                    <li>
                        <div>
                            对象名称：
                        </div>
                        <div>
                            {{unitData.name}}
                        </div>
                    </li>
                    <li>
                        <div>
                            单位性质：
                        </div>
                        <div>
                            {{unitData.buildingTypes[0].name}}
                        </div>
                    </li>
                    <li>
                        <div>
                            <span class="redspan">*</span>预案级别：
                        </div>
                        <div>
                            V级
                        </div>
                    </li>
                    <li>
                        <div>
                            <span class="redspan">*</span>灾害类型：
                        </div>
                        <div>
                            <select ngModel="0">
                                <option value="0">火灾</option>
                                <option value="1">抢险救援</option>
                                <option value="2">其他</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div>
                            防火级别：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            防火管辖：
                        </div>
                        <div>
                            {{unitData.organizationName}}
                        </div>
                    </li>
                    <li>
                        <div>
                            灭火责任队站：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            制作人职务/姓名：
                        </div>
                        <div>
                            <input type="text" style="width: 160px;margin-right: 10px;">
                            <input type="text" style="width: 50px;">
                        </div>
                    </li>
                    <li>
                        <div>
                            审核人职务/姓名：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            审核时间：
                        </div>
                        <div>

                        </div>
                    </li>
                </ul>
            </div>
            <!-- 模板页面 -->
            <div *ngFor="let item of planTemplateData;let key = index">
                <div *ngIf="selectedItem == item.groupName">
                    <!-- <p>{{item.groupName}}</p> -->
                    <div class="centerBox" *ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'">
                        <span>111</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightbox">

        </div>
    </div>
</div>