[修改]预案管理白色pad自适应

src/app/key-unit/key-unit-management/key-unit-management.component.html

@@ -15,6 +15,8 @@
                         <input (click)="stopclose($event)" readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
                     </mat-form-field>
                     <mat-checkbox color="primary" style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
+                    <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+                    <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
                     <div class="organizationbox" *ngIf="isorganizationbox">
                         <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
                         <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -36,15 +38,16 @@
                             </mat-tree-node>
                         </mat-tree>  
                     </div>
+                    
                 </div>
-    
-                <div class="queryField">
+                
+                <div class="queryField" *ngIf="!padMore">
                     <label style="margin-right: 10px;">统一社会信用代码:</label>
                     <mat-form-field class="example-full-width">
                         <input matInput placeholder="请输入统一社会信用代码" name="shehui" [(ngModel)]="shehui" autocomplete="off">
                     </mat-form-field>
                 </div>
-                <div class="queryField">
+                <div class="queryField" *ngIf="!padMore">
                     <label style="margin-right: 10px;">单位类型:</label>
                     <mat-form-field>
                         <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
@@ -53,8 +56,9 @@
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
+                    <!-- <span style="margin-left: 2%;">更多筛选条件</span> -->
                 </div>
-                <div class="queryField">
+                <div class="queryField" *ngIf="!padMore">
                     <label style="margin-right: 10px;">关注单位:</label>
                     <mat-form-field>
                         <mat-select placeholder='请选择单位是否关注' [(ngModel)]="follow" name="follow">
@@ -63,7 +67,7 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
-                <div class="queryField">
+                <div class="queryField" *ngIf="!padMore">
                     <label style="margin-right: 10px;">信息完整度排序:</label>
                     <mat-form-field>
                         <mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort">
@@ -72,12 +76,12 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
-                <div class="queryField" style="margin-left: 100px;">
+                <div class="queryField"  *ngIf="!padMore">
                     <label style="margin-right: 10px;">完整度查询:</label>
                     <mat-form-field class="example-full-width">
                         <input type="number" oninput="if(value>100)value=100;if(value<0)value=0"  matInput placeholder="请输入完整度最小值" name="integrityScoreMin" [(ngModel)]="integrityScoreMin" autocomplete="off">
                     </mat-form-field>
-                    🠊
+                    <mat-icon aria-hidden="false" style="position: relative;right: 125px;top: 5px;">arrow forward</mat-icon>
                     <mat-form-field class="example-full-width" style="margin-left: 5px;">
                         <input type="number" oninput="if(value>100)value=100;if(value<0)value=0"  matInput placeholder="请输入完整度最大值" name="integrityScoreMax" [(ngModel)]="integrityScoreMax" autocomplete="off">
                     </mat-form-field>

src/app/key-unit/key-unit-management/key-unit-management.component.scss

@@ -1,4 +1,10 @@
-
+@media screen and (min-device-width:1280px){
+    
+}
+//margin: 3px 40px;
+@media screen and (max-device-width:1290px){
+    
+}
 
 
 .header {
@@ -16,7 +22,14 @@
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 3px 40px;
+        @media screen and (min-device-width:1280px){
+            margin: 3px 40px;
+        }
+        //margin: 3px 40px;
+        @media screen and (max-device-width:1280px){
+            margin-left: 20px;
+        }
+        
         input {
           width: 180px;
           height: 22px;

src/app/key-unit/key-unit-management/key-unit-management.component.ts

@@ -21,6 +21,16 @@ export class KeyUnitManagementComponent implements OnInit {
 
   constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
   
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  open="更多筛选条件"
+  down="收起"
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
   private _transformer = (node, level: number) => {   //初始化tree
     return {
       expandable: !!node.children && node.children.length > 0,
@@ -208,6 +218,11 @@ export class KeyUnitManagementComponent implements OnInit {
     this.getOrganizations();
     this.getUnittype();
     this.getAllKeyUnit();
+    if(window.matchMedia("(max-width: 1290px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
   }
   //获得所有重点单位
 

src/app/plan-management/entry-plan-look/entry-plan-look.component.html

@@ -4,100 +4,101 @@
  * @Author: sueRimn
  * @Date: 2020-12-24 10:59:48
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-22 10:56:29
+ * @LastEditTime: 2021-03-23 15:09:09
 -->
 <!-- <p>录入预案</p> -->
-<div class="header" style="position: relative;">
-    <div>
-        <span>单位名称：{{unitdata.unitname == "null" ? "无" : unitdata.unitname}}</span>
-    </div>
-    <div>
-        <span>消防救援站：{{unitdata.organizationName == "null" ? "无" : unitdata.organizationName}}</span>
-    </div>
-    <div>
-        <span>单位类型：{{unitdata.unittype == "null" ? "无" : unitdata.unittype}}</span>
-    </div>
-    <div>
-        <span>单位地址：{{unitdata.unitaddress == "null" ? "无" : unitdata.unitaddress}}</span>
-    </div>
-
-    <span style="position: absolute;right:60px;bottom:15px;font-size: 13px;color: cornflowerblue;cursor: pointer;" (click)="lookUnitData()">查看详情</span>
-</div>
-<mat-divider style="margin-bottom: 15px;"></mat-divider>
-<div class="body">
-    <div class="btn" style="display: flex;">
-        <button *ngIf="isoperation == 'true'" mat-raised-button color="primary" (click)="addplan()">新建</button>
-        <!-- *ngIf="downloadisLoading" {{downloadFileName}}下载中...-->
-        <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
-            
-            <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
-            <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
-            <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
-            <mat-progress-bar  mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+<div style="overflow: auto;height: 100%;">
+    <div class="header" style="position: relative;">
+        <div>
+            <span>单位名称：{{unitdata.unitname == "null" ? "无" : unitdata.unitname}}</span>
+        </div>
+        <div>
+            <span>消防救援站：{{unitdata.organizationName == "null" ? "无" : unitdata.organizationName}}</span>
+        </div>
+        <div>
+            <span>单位类型：{{unitdata.unittype == "null" ? "无" : unitdata.unittype}}</span>
+        </div>
+        <div>
+            <span>单位地址：{{unitdata.unitaddress == "null" ? "无" : unitdata.unitaddress}}</span>
         </div>
-    </div>
-    <div class="tablebox">
-        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
-            
-            <ng-container matColumnDef="planname">
-                <th mat-header-cell *matHeaderCellDef>预案名称</th>
-                <td mat-cell *matCellDef="let element">{{element.name}}</td>
-            </ng-container>
-            <ng-container matColumnDef="addpeople">
-                <th mat-header-cell *matHeaderCellDef>添加人</th>
-                <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-            </ng-container>
-            <ng-container matColumnDef="addtime">
-                <th mat-header-cell *matHeaderCellDef>修改时间</th>
-                <td mat-cell *matCellDef="let element">
-                    {{element.modifiedTime | date:'yyyy-MM-dd'}}
-                </td>
-            </ng-container>
-            <ng-container matColumnDef="plantype">
-                <th mat-header-cell *matHeaderCellDef>预案类型</th>
-                <td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td>
-            </ng-container>
     
-            <ng-container matColumnDef="auditstate">
-                <th mat-header-cell *matHeaderCellDef>审核状态</th>
-                <td mat-cell *matCellDef="let element">{{element.auditStatus=='8'?'未提交审核':element.auditStatus=='1'?'审核中':element.auditStatus=='2'?'审核通过':element.auditStatus=='4'?
-                    '审核退回':element.auditStatus=='16'?'初审通过':'初审驳回'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="isopen">
-                <th mat-header-cell *matHeaderCellDef>是否公开</th>
-                <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-            </ng-container>
-            <ng-container matColumnDef="preparethelevel">
-                <th mat-header-cell *matHeaderCellDef>编制级别</th>
-                <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
-            </ng-container>
-            <ng-container *ngIf="isoperation == 'true'" matColumnDef="operation">
-                <th mat-header-cell *matHeaderCellDef>操作</th>
-                <td  mat-cell *matCellDef="let element">
-                    <span (click)="changeName(element)" *ngIf="element.auditStatus!=0||element.auditStatus!=3">改名</span>
-                    <span (click)="editPlan(element)" [ngClass]="{'grey': element.planMode == '0' || element.planMode == '3' || element.auditStatus == '1' || element.auditStatus == '2'}">编辑</span>
-                    <span (click)="lookPlan(element)">查看</span>
-                    <span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>
-                    <span (click)="deletePlan(element)">删除</span>
-                    <span (click)="auditResult(element)">审批结果</span>
-                    <span (click)="submitAudit(element)" *ngIf="element.auditStatus == 8 || element.auditStatus == 2 || element.auditStatus == 4"  >提交审核</span>
-                    <span (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1">撤销审核</span>
-                </td>
-            </ng-container>
-            <ng-container  *ngIf="isoperation == 'false'" matColumnDef="operation">
-                <th mat-header-cell *matHeaderCellDef>操作</th>
-                <td mat-cell *matCellDef="let element">
-                    <span (click)="lookPlan(element)">查看</span>
-                    <span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>
-                </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-        <mat-paginator [length]="length"
-            [pageSize]="pageSize"
-            [pageSizeOptions]="pageSizeOptions"
-            (page)="changePage($event)">
-        </mat-paginator>
+        <span style="position: absolute;right:60px;bottom:15px;font-size: 13px;color: cornflowerblue;cursor: pointer;" (click)="lookUnitData()">查看详情</span>
     </div>
-</div>
+    <mat-divider style="margin-bottom: 15px;"></mat-divider>
+    <div class="body">
+        <div class="btn" style="display: flex;">
+            <button *ngIf="isoperation == 'true'" mat-raised-button color="primary" (click)="addplan()">新建</button>
+            <!-- *ngIf="downloadisLoading" {{downloadFileName}}下载中...-->
+            <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
+                
+                <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
+                <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
+                <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
+                <mat-progress-bar  mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+            </div>
+        </div>
+        <div class="tablebox">
+            <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+                
+                <ng-container matColumnDef="planname">
+                    <th mat-header-cell *matHeaderCellDef>预案名称</th>
+                    <td mat-cell *matCellDef="let element">{{element.name}}</td>
+                </ng-container>
+                <ng-container matColumnDef="addpeople">
+                    <th mat-header-cell *matHeaderCellDef>添加人</th>
+                    <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
+                </ng-container>
+                <ng-container matColumnDef="addtime">
+                    <th mat-header-cell *matHeaderCellDef>修改时间</th>
+                    <td mat-cell *matCellDef="let element">
+                        {{element.modifiedTime | date:'yyyy-MM-dd'}}
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="plantype">
+                    <th mat-header-cell *matHeaderCellDef>预案类型</th>
+                    <td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td>
+                </ng-container>
+        
+                <ng-container matColumnDef="auditstate">
+                    <th mat-header-cell *matHeaderCellDef>审核状态</th>
+                    <td mat-cell *matCellDef="let element">{{element.auditStatus=='8'?'未提交审核':element.auditStatus=='1'?'审核中':element.auditStatus=='2'?'审核通过':element.auditStatus=='4'?
+                        '审核退回':element.auditStatus=='16'?'初审通过':'初审驳回'}}</td>
+                </ng-container>
+                <ng-container matColumnDef="isopen">
+                    <th mat-header-cell *matHeaderCellDef>是否公开</th>
+                    <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
+                </ng-container>
+                <ng-container matColumnDef="preparethelevel">
+                    <th mat-header-cell *matHeaderCellDef>编制级别</th>
+                    <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
+                </ng-container>
+                <ng-container *ngIf="isoperation == 'true'" matColumnDef="operation">
+                    <th mat-header-cell *matHeaderCellDef>操作</th>
+                    <td  mat-cell *matCellDef="let element">
+                        <span (click)="changeName(element)" *ngIf="element.auditStatus!=0||element.auditStatus!=3">改名</span>
+                        <span (click)="editPlan(element)" [ngClass]="{'grey': element.planMode == '0' || element.planMode == '3' || element.auditStatus == '1' || element.auditStatus == '2'}">编辑</span>
+                        <span (click)="lookPlan(element)">查看</span>
+                        <span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>
+                        <span (click)="deletePlan(element)">删除</span>
+                        <span (click)="auditResult(element)">审批结果</span>
+                        <span (click)="submitAudit(element)" *ngIf="element.auditStatus == 8 || element.auditStatus == 2 || element.auditStatus == 4"  >提交审核</span>
+                        <span (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1">撤销审核</span>
+                    </td>
+                </ng-container>
+                <ng-container  *ngIf="isoperation == 'false'" matColumnDef="operation">
+                    <th mat-header-cell *matHeaderCellDef>操作</th>
+                    <td mat-cell *matCellDef="let element">
+                        <span (click)="lookPlan(element)">查看</span>
+                        <span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>
+                    </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+            <mat-paginator [length]="length"
+                [pageSize]="pageSize"
+                [pageSizeOptions]="pageSizeOptions"
+                (page)="changePage($event)">
+            </mat-paginator>
+        </div>
+    </div></div>

src/app/plan-management/entry-plan-look/entry-plan-look.component.scss

@@ -15,6 +15,7 @@
     // margin-bottom: 30px;
 }
 .body{
+    overflow: auto;
     .btn{
         button{
             width: 80px;
@@ -23,6 +24,7 @@
         }
     }
     .tablebox{
+        overflow: auto;
         table{
             width: 100%;
             margin-left: 0%;

src/app/plan-management/entry-plan/entry-plan.component.html

@@ -16,6 +16,8 @@
                 <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
               </mat-form-field>
               <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
+              <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
               <div class="organizationbox" *ngIf="isorganizationbox">
                   <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
                   <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -39,7 +41,7 @@
               </div>
           </div>
       
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">单位类型:</label>
               <mat-form-field>
                   <mat-select placeholder='请选择单位类型' name="unittype" [(ngModel)]="unittype">
@@ -49,7 +51,7 @@
                   </mat-select>
               </mat-form-field>
           </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">预案类型:</label>
               <mat-form-field>
                 <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
@@ -60,7 +62,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine" [(ngModel)]="toExamine" placeholder='请选择审核状态'>
@@ -71,7 +73,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel" [(ngModel)]="preparelevel" placeholder='请选择编制级别'>
@@ -85,7 +87,7 @@
               <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
             </div>
             
-              <div class="queryField">
+              <div class="queryField" *ngIf="!padMore">
                   <label style="margin-right: 10px;">信息完整度排序:</label>
                   <mat-form-field>
                       <mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort">
@@ -94,7 +96,7 @@
                       </mat-select>
                   </mat-form-field>
               </div>
-              <div class="queryField">
+              <div class="queryField" *ngIf="!padMore">
                 <label style="margin-right: 10px;">制作情况:</label>
                 <mat-form-field>
                     <mat-select placeholder='请选择预案制作情况' [(ngModel)]="haveyuan" name="haveyuan">

src/app/plan-management/entry-plan/entry-plan.component.ts

@@ -170,6 +170,11 @@ export class EntryPlanComponent implements OnInit {
   }
   level
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1300px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
@@ -202,6 +207,14 @@ export class EntryPlanComponent implements OnInit {
       ]
     }
   }
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
  
 
 

src/app/plan-management/meet-plan/meet-plan.component.html

@@ -19,24 +19,26 @@
                     <mat-option value="7">市级</mat-option>
                   </mat-select>
               </mat-form-field>
+              <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+              <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
           </div>
-          <div class="queryField">
+          <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">添加人:</label>
             <mat-form-field class="example-full-width">
               <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
             </mat-form-field>
           </div>
-          <div class="queryField">
+          <div class="queryField" *ngIf="!padMore">
             <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-form-field class="example-full-width">
+            <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon>
+            <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">
+          <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">预案类型:</label>
             <mat-form-field>
               <!-- <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
@@ -48,7 +50,7 @@
               <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
             </mat-form-field>
           </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
@@ -59,7 +61,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">

src/app/plan-management/meet-plan/meet-plan.component.ts

@@ -20,6 +20,11 @@ export class MeetPlanComponent implements OnInit {
   constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1300px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
       this.preparelevels = [
@@ -73,8 +78,17 @@ export class MeetPlanComponent implements OnInit {
   pageSize:any; //每页条数
   pageSizeOptions: number[] = [10] //设置每页条数
   PageNumber:any; //第几页
-
   
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  open="更多筛选条件"
+  down="收起"
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
 
   //获取表格数据
   getAlltabledate(){

src/app/plan-management/onetwo-entry-plan/onetwo-entry-plan.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-12-24 14:15:10
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-02-05 15:09:48
+ * @LastEditTime: 2021-03-23 14:24:41
 -->
 <div style="height: 100%;overflow-y: auto;">
     <div class="header" >
@@ -17,26 +17,25 @@
                 <input matInput placeholder="请输入单位名称" name="companyName"  autocomplete="off" [(ngModel)]="unitname">
               </mat-form-field>
             </div>
-      
-      
-            
           <div class="queryField">
             <label style="margin-right: 10px;">添加人:</label>
             <mat-form-field class="example-full-width">
               <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
             </mat-form-field>
+            <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
           </div>
-          <div class="queryField">
+          <div class="queryField" *ngIf="!padMore">
             <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-form-field class="example-full-width">
+            <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon>
+            <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">
+          <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">预案类型:</label>
             <mat-form-field>
               <!-- <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
@@ -48,7 +47,7 @@
               <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
             </mat-form-field>
           </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
@@ -59,7 +58,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">

src/app/plan-management/onetwo-entry-plan/onetwo-entry-plan.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-12-24 14:15:10
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-06 09:14:22
+ * @LastEditTime: 2021-03-23 15:18:08
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -33,6 +33,11 @@ export class OnetwoEntryPlanComponent implements OnInit {
   constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1300px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
       this.preparelevels = [
@@ -63,6 +68,14 @@ export class OnetwoEntryPlanComponent implements OnInit {
     this.url=window.location.href.substring(window.location.href.length-1,window.location.href.length)
     this.getAlltabledate()
   }
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
 
   levels
   url

src/app/plan-management/open-plan/open-plan.component.html

@@ -1,4 +1,5 @@
-<div class="header">
+<div style="height: 100%;overflow: auto;">
+  <div class="header">
     <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
       <div class="queryBox">
         <div class="queryField">
@@ -106,4 +107,6 @@
     
     </div>
 </div>
+</div>
+
 

src/app/plan-management/pass-plan/pass-plan.component.html

@@ -1,4 +1,5 @@
-<div class="header">
+<div style="height: 100%;overflow: auto;">
+  <div class="header">
     <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
       <div class="queryBox">
   
@@ -15,6 +16,8 @@
             <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
           </mat-form-field>
           <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
+          <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
           <div class="organizationbox" *ngIf="isorganizationbox">
               <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
               <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -38,7 +41,7 @@
           </div>
         </div>
   
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">单位类型:</label>
             <mat-form-field>
                 <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
@@ -48,7 +51,7 @@
                 </mat-select>
             </mat-form-field>
         </div>
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">预案类型:</label>
           <mat-form-field>
             <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
@@ -60,7 +63,7 @@
           </mat-form-field>
         </div>
         
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">编制级别:</label>
           <mat-form-field>
             <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
@@ -73,13 +76,13 @@
           </mat-form-field>
           <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
         </div>
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
           <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-form-field class="example-full-width">
+          <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon>
+          <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>
@@ -155,4 +158,5 @@
         </mat-paginator>
     
     </div>
-</div>
+</div>
+</div>

src/app/plan-management/pass-plan/pass-plan.component.ts

@@ -52,6 +52,11 @@ export class PassPlanComponent implements OnInit {
 
   preparelevels:any
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1300px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
@@ -86,6 +91,14 @@ export class PassPlanComponent implements OnInit {
     this.url=window.location.href.substring(window.location.href.length-1,window.location.href.length)
     //console.log(this.url)
   }
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
 
   allPlanInfo:any //存储所有预案信息
   //获得所有预案信息

src/app/plan-management/reinforce-plan/reinforce-plan.component.html

@@ -1,4 +1,5 @@
-<div class="header">
+<div style="height: 100%;overflow: auto;">
+  <div class="header">
     <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
       <div class="queryBox">
   
@@ -15,6 +16,8 @@
             <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
           </mat-form-field>
           <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
+          <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
           <div class="organizationbox" *ngIf="isorganizationbox">
               <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
               <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -38,7 +41,7 @@
           </div>
         </div>
   
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">单位类型:</label>
             <mat-form-field>
                 <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
@@ -48,7 +51,7 @@
                 </mat-select>
             </mat-form-field>
         </div>
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">预案类型:</label>
           <mat-form-field>
             <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
@@ -60,7 +63,7 @@
           </mat-form-field>
         </div>
         
-        <div class="queryField">
+        <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">编制级别:</label>
           <mat-form-field>
             <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
@@ -150,4 +153,5 @@
         </mat-paginator>
     
     </div>
-</div>
+</div>
+</div>

src/app/plan-management/reinforce-plan/reinforce-plan.component.ts

@@ -51,6 +51,11 @@ export class ReinforcePlanComponent implements OnInit {
 
   preparelevels:any
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1300px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
@@ -83,6 +88,14 @@ export class ReinforcePlanComponent implements OnInit {
       ]
     }
   }
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
 
   allPlanInfo:any //存储所有预案信息
   //获得所有预案信息

src/app/plan-management/type-plan/type-plan.component.html

@@ -15,19 +15,21 @@
             <mat-form-field class="example-full-width">
               <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
             </mat-form-field>
+            <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
           </div>
-          <div class="queryField">
+          <div class="queryField" *ngIf="!padMore">
             <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-form-field class="example-full-width">
+            <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon>
+            <mat-form-field class="example-full-width" style="margin-left: 10px;">
               <input type="date" matInput  autocomplete="off" name="endtime" [(ngModel)]="endtime">
             </mat-form-field>
           </div>
           
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
@@ -38,7 +40,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField">
+            <div class="queryField" *ngIf="!padMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">

src/app/plan-management/type-plan/type-plan.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-01-06 09:47:43
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-06 09:12:59
+ * @LastEditTime: 2021-03-23 14:22:18
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -29,6 +29,11 @@ export class TypePlanComponent implements OnInit {
   constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1290px)").matches){
+      this.padMore=true
+    }else{
+      this.padMore=false
+    }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
       this.preparelevels = [
@@ -58,6 +63,14 @@ export class TypePlanComponent implements OnInit {
     }
     this.getAlltabledate()
   }
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
   
   levels
   preparelevels:any