ShangHaiYuan-AnXin/src/app/statistic-analysis/combined-query/combined-query.component.html

<!-- 报表统计 -->
<div style="height: 100%;overflow: auto;">
        <mat-tab-group style="height: 100%;" [selectedIndex]="selected.value" (selectedIndexChange)="selectedIndexChange($event)">
          <mat-tab *ngFor="let item of lable" [label]="item">
            <ng-template matTabContent>
              <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
                <div class="header">
                  <div class="queryBox">
                    <div class="queryField ordiv">
                      <label style="margin-right: 10px;">消防救援站:</label>
                      <mat-form-field class="example-full-width">
                        <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"
                          (focus)="openorganizationbox()">
                      </mat-form-field>
                      <mat-checkbox style="margin-left: 6px;" color="primary" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
                      <div class="organizationbox" *ngIf="isorganizationbox">
                        <div (click)="closediv()" class="closediv">
                          <mat-icon>clear</mat-icon>
                        </div>
                        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                          <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist">
                            <button type="button" mat-icon-button disabled></button>
                            <li>{{node.name}}</li>
                          </mat-tree-node>
                          <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)'
                            class="organizationlist">
                            <button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                              <mat-icon class="mat-icon-rtl-mirror">
                                {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                              </mat-icon>
                            </button>
                            <li>{{node.name}}</li>
                          </mat-tree-node>
                        </mat-tree>
                      </div>
                    </div>
                    <div class="queryField">
                      <label style="margin-right: 10px;">时间查询:</label>
                      <mat-form-field class="example-full-width">
                        <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
                      </mat-form-field>
                      <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
                      <span style="margin-left: 15px;">🠊</span>
                      <mat-form-field class="example-full-width" style="margin-left: 10px;">
                        <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
                      </mat-form-field>
                    </div>
                    <div class="queryField" *ngIf="preparelevels==1">
                      <label style="margin-right: 10px;">预案类型:</label>
                      <mat-form-field>
                        <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
                          <mat-option value=16>文本预案</mat-option>
                          <mat-option value=1>二维预案</mat-option>
                          <mat-option value=2>三维预案</mat-option>
                          <mat-option value=4>其他预案</mat-option>
                        </mat-select>
                      </mat-form-field>
            
                    </div>
                    <div class="queryField" *ngIf="preparelevels==0">
                      <label style="margin-right: 10px;">单位类型:</label>
                      <mat-form-field>
                        <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype" [multiple]="true">
                          <mat-option *ngFor="let unit of allunittype" [value]="unit.id">
                            {{unit.name}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                    
                    <div class="queryField" *ngIf="preparelevels==0">
                      <label style="margin-right: 10px;">单位状态:</label>
                      <mat-form-field>
                        <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
                          <mat-option value=1>新增</mat-option>
                          <mat-option value=2>维护更新</mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
            
                    <div class="queryField" *ngIf="preparelevels==1">
                      <label style="margin-right: 10px;">预案级别:</label>
                      <mat-form-field>
                        <mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true">
                          <mat-option value=6>应急预案(国家级)</mat-option>
                          <mat-option value=7>应急预案(市级)</mat-option>
                          <mat-option value=8>类型预案</mat-option>
                          <mat-option value=1>Ⅰ级预案</mat-option>
                          <mat-option value=2>Ⅱ级预案</mat-option>
                          <mat-option value=3>Ⅲ级预案</mat-option>
                          <mat-option value=4>Ⅳ级预案</mat-option>
                          <mat-option value=5>Ⅴ级预案</mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                    <div class="queryField" *ngIf="preparelevels==0||preparelevels==1">
                      <button mat-raised-button color="primary">查询</button>
                      <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
                      <button mat-raised-button style="margin-left: 25px;" color="primary" (click)='export()'>导出</button>
                    </div>
                  </div>
                </div>
              
            </form>
            <mat-divider></mat-divider>
    <div class="body">
      <div class="tablebox">
        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8" id="table">
          <ng-container *ngFor="let item of displayedColumns;let i=index" [matColumnDef]="displayedColumns[i]">
            <th mat-header-cell *matHeaderCellDef>{{item}}</th>
            <td mat-cell *matCellDef="let element">{{element.name}}</td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
  
      </div>
    </div>
            </ng-template>
          </mat-tab>
          
        </mat-tab-group>
  </div>