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 *ngIf="selectedItem == '重点图示'" class="leftKeyImg">
                <div class="keyImgTitle">
                    重点图示
                </div>
                <div class="planlist" id="planlist">
                    <!-- 总平面图 -->
                    <div style="margin: 10px 0;">
                        <mat-accordion>
                            <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
                                <mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px'
                                    style="position: relative;padding-left:20px;background: #F2F9FF;">
                                    <mat-panel-title>
                                        总平面图
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                                <div class="content">
                                    <div class="contentitem" *ngFor="let item of sitePlanItems">
                                        <div>
                                            <img (click)="openPlan(item,-1)"
                                                [src]="item.imageUrl ? item.imageUrl+'?x-oss-process=image/resize,m_fill,h_100,w_100' : '../../../assets/images/noImg.png'"
                                                alt="">
                                        </div>
                                        <p>{{item.name}}</p>
                                    </div>
                                </div>
                            </mat-expansion-panel>
                        </mat-accordion>
                    </div>
                    <!-- 建筑平面图 -->
                    <div>
                        <div *ngFor="let item of allBuildings;let key=index" style="margin-bottom: 10px;">
                            <mat-accordion>
                                <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
                                    <mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px'
                                        style="position: relative;padding-left:20px;background: #F2F9FF;">
                                        <mat-panel-title>
                                            {{item.name}}
                                        </mat-panel-title>
                                    </mat-expansion-panel-header>
                                    <ng-template matExpansionPanelContent>
                                        <div class="content">
                                            <div class="contentitem" *ngFor="let i of item.plandata">
                                                <div>
                                                    <img (click)="openPlan(i,key)"
                                                        [src]="i.imageUrl ? i.imageUrl+'?x-oss-process=image/resize,m_fill,h_100,w_100' : '../../../assets/images/noImg.png'"
                                                        alt="">
                                                </div>
                                                <p>{{i.name}}</p>
                                            </div>
                                        </div>
                                    </ng-template>
                                </mat-expansion-panel>
                            </mat-accordion>
                        </div>
                    </div>
                    <!-- 实景图 -->
                    <div style="margin: 10px 0;">
                        <mat-accordion>
                            <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
                                <mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px'
                                    style="position: relative;padding-left:20px;background: #F2F9FF;">
                                    <mat-panel-title>
                                        实景图
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                                <div class="content">
                                    <div class="realPictureItem" *ngFor="let item of allRealPicture">
                                        <div class="realPictureTitle">{{item.name}}</div>
                                        <div class="contentitem"
                                            *ngFor="let i of item.realityImages">
                                            <div class="realPictureImgItem">
                                                <img [src]="i.newImageUrl" alt="">
                                                <div class="realPictureImgItemBtn realPictureImgItemBtn1">
                                                    查看图片
                                                </div>
                                                <div class="realPictureImgItemBtn realPictureImgItemBtn2" (click)="addkeyImgItemLeft(i)">
                                                    增加分组
                                                </div>
                                            </div>
                                            <p>{{i.name}}</p>

                                        </div>
                                    </div>

                                </div>
                            </mat-expansion-panel>
                        </mat-accordion>
                    </div>
                </div>
            </div>
        </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>
                            <ng-container *ngIf="planLevel == '5'; else elseTemplate">
                                Ⅴ级
                            </ng-container>
                            <ng-template #elseTemplate>
                                Ⅲ级
                            </ng-template>
                        </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!='预案附件'">
                        <div class="boxHead">
                            <span>{{item.groupName}}</span>
                        </div>
                        <div class="boxBody" *ngFor="let element of item.attribute;let i=index">
                            <div class="boxBodyHead">
                                <span>{{element.headName}}</span>
                                <img src="../../../assets/images/deleteblue.png" *ngIf="element.level==1" (click)='delTd(key,i)'>
                                <img src="../../../assets/images/add.png" *ngIf="element.level==1" (click)='addTd(key,i)'>
                            </div>
                            <div class="body">
                                <!--表格类型-->
                                <table *ngIf="element.level==1">
                                  <thead>
                                     <th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
                                       placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
                                  </thead>
                                  <tbody>
                                     <!--  <tr>
                                          <td><input type="text"placeholder="请输入内容" ></td>
                                          <td><input type="text"placeholder="请输入内容" ></td>
                                          <td><input type="text"placeholder="请输入内容" ></td>
                                      </tr> -->
                                      <tr *ngFor="let itemtr of element.tabletr">
                                          <td *ngFor="let itemtd of itemtr.tabletd;let tabletdi=index;TrackBy:trackByFn">
                                              <input type="text" placeholder="请输入" [(ngModel)]="itemtr.tabletd[tabletdi]">
                                          </td>
                                      </tr>
                                  </tbody>
                                </table>
                                <!--文本区域-->
                                <textarea style="width: 99%;height: 100px;" *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
                                <!--输入框-->
                                <div class="inputtext" *ngIf="element.level==2">
                                  <div class="inputj" style="height: 100%;width: 100%;"
                                   *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
                                    <div style="height: 100%;width: 100%;"
                                   *ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
                                   <input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;"
                                      [(ngModel)]="itemthj.head">
                                     <input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
                                </div>
                               </div>
                            </div>
                            <!--树形图-->
                             <div style="height: 300px;width: 100%;" *ngIf="element.level==4">
                                 <tree-diagram [data]="element.tableth" [(ngModel)]="element.tableth"></tree-diagram>
                             </div>
                            </div>
                        </div>
                    </div>
                    <div class="keyImg" *ngIf="item.groupName == '重点图示'">
                        <div class="keyImgItem" *ngFor="let i of item.attribute;let key = index">
                            <div class="keyImgTitle">
                                <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
                                <mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(item,key)">delete
                                </mat-icon>
                            </div>
                            <div class="keyImgImg">
                                <div class="imgbox" *ngFor="let imgUrl of i.imgArr;let imgkey = index">
                                    <mat-icon class="deleteImg" (click)="deleteImgItem(i.imgArr,imgkey)">delete
                                    </mat-icon>
                                    <img [src]="imgUrl" alt="">
                                </div>
                                <div class="uploadBtn">
                                    <button mat-stroked-button>
                                        <mat-icon>add</mat-icon>上传图片
                                    </button>
                                    <input (change)="filechange($event,i)" type="file" name="" id="">
                                </div>
                            </div>
                        </div>
                        <!-- 增加分组 -->
                        <div class="addkeyImgItem">
                            <button mat-flat-button color="primary" (click)="addkeyImgItem(item)">
                                增加分组
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightbox">

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