[新增]pc端预案管理模块新增展开收缩按钮

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

@@ -40,7 +40,10 @@
                     </div>
                     
                 </div>
-                
+                <div class="queryField" *ngIf="!pcfind">
+                    <button mat-raised-button color="primary">查询</button>
+                    <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+                </div>
                 <div class="queryField" *ngIf="!padMore">
                     <label style="margin-right: 10px;">统一社会信用代码:</label>
                     <mat-form-field class="example-full-width">
@@ -56,9 +59,14 @@
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
-                    <!-- <span style="margin-left: 2%;">更多筛选条件</span> -->
+                    <span *ngIf="pcMore" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+                    <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
                 </div>
-                <div class="queryField" *ngIf="!padMore">
+                <div class="queryField" *ngIf="pcfind" >
+                    <button mat-raised-button color="primary">查询</button>
+                    <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+                </div>
+                <div class="queryField" *ngIf="!padMore&&!pcMore">
                     <label style="margin-right: 10px;">关注单位:</label>
                     <mat-form-field>
                         <mat-select placeholder='请选择单位是否关注' [(ngModel)]="follow" name="follow">
@@ -67,7 +75,7 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
-                <div class="queryField" *ngIf="!padMore">
+                <div class="queryField" *ngIf="!padMore&&!pcMore">
                     <label style="margin-right: 10px;">信息完整度排序:</label>
                     <mat-form-field>
                         <mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort">
@@ -76,7 +84,7 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
-                <div class="queryField"  *ngIf="!padMore">
+                <div class="queryField"  *ngIf="!padMore&&!pcMore">
                     <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">
@@ -89,10 +97,7 @@
                 </div>
                 
             </div>
-            <div style="width: 100%;text-align: center;">
-                <button mat-raised-button color="primary">查询</button>
-                <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-            </div>
+            
         </form>
     </div>
     <mat-divider></mat-divider>

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

@@ -1,40 +1,33 @@
-@media screen and (min-device-width:1280px){
-    
-}
-//margin: 3px 40px;
-@media screen and (max-device-width:1290px) and (max-device-height:690px){
-    
-}
+
 
 
 .header {
     width: 100%;
-    padding: 12px 10px;
+    padding: 12px 0 12px 10px;
   //   margin-bottom: 10px;
     box-sizing: border-box;
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px;
+      padding: 5px 0;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        @media screen and (min-device-width:1280px){
-            margin: 3px 40px;
-        }
-        //margin: 3px 40px;
-        @media screen and (max-device-width:1280px){
-            margin-left: 20px;
-        }
+        margin: 3px 10px;
         
         input {
-          width: 180px;
+          //width: 180px;
           height: 22px;
           line-height: 22px;
           border-radius: 3px;}
+          @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 110px;
+            }
+        }
       }
   
     } //queryBox

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

@@ -11,6 +11,7 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { TreeService } from '../../http-interceptors/tree.service'
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { truncateSync } from 'fs';
 
 @Component({
   selector: 'app-key-unit-management',
@@ -21,15 +22,19 @@ export class KeyUnitManagementComponent implements OnInit {
 
   constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
   
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
   padjt=false
   padMore=true//pad收缩控制
   padput=false//pad收起按钮
-  open="更多筛选条件"
-  down="收起"
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
-    this.padjt=!this.padjt
     this.padMore=!this.padMore
     this.padput=!this.padput
   }
@@ -221,9 +226,15 @@ export class KeyUnitManagementComponent implements OnInit {
     this.getUnittype();
     this.getAllKeyUnit();
     if(window.matchMedia("(max-width: 1290px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
   }
   //获得所有重点单位

src/app/plan-audit/wait-examineer/wait-examineer.component.scss

@@ -128,7 +128,7 @@
         display: flex;
         flex-direction: column;
         .company{
-            @media screen and (min-device-width:1300px){
+            @media screen and (min-device-width:1400px){
                 overflow-y: auto;
             }
             flex: 1;

src/app/plan-management/maintain-up/maintain-up.component.html

@@ -39,7 +39,11 @@
                       </mat-tree>  
                   </div>
               </div>
-  
+              <div  *ngIf="!pcfind">
+                <button mat-raised-button color="primary">查询</button>
+                <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+              </div>
+            <br>
               <div class="queryField" *ngIf="!padMore">
                   <label style="margin-right: 10px;">统一社会信用代码:</label>
                   <mat-form-field class="example-full-width">
@@ -55,8 +59,14 @@
                           </mat-option>
                       </mat-select>
                   </mat-form-field>
+                  <span *ngIf="pcMore" style="margin-left: 20px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+                  <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
               </div>
-              <div class="queryField" *ngIf="!padMore">
+              <div class="queryField" *ngIf="pcfind" >
+                <button mat-raised-button color="primary">查询</button>
+                <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+              </div>
+              <div class="queryField" *ngIf="!padMore&&!pcMore">
                   <label style="margin-right: 10px;">关注单位:</label>
                   <mat-form-field>
                       <mat-select placeholder='请选择单位是否关注' [(ngModel)]="follow" name="follow">
@@ -65,7 +75,7 @@
                       </mat-select>
                   </mat-form-field>
               </div>
-              <div class="queryField" *ngIf="!padMore">
+              <div class="queryField" *ngIf="!padMore&&!pcMore">
                   <label style="margin-right: 10px;">信息完整度排序:</label>
                   <mat-form-field>
                       <mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort">
@@ -74,7 +84,7 @@
                       </mat-select>
                   </mat-form-field>
               </div>
-              <div class="queryField"  *ngIf="!padMore">
+              <div class="queryField"  *ngIf="!padMore&&!pcMore">
                   <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">
@@ -87,10 +97,7 @@
               </div>
               
           </div>
-          <div style="width: 100%;text-align: center;">
-              <button mat-raised-button color="primary">查询</button>
-              <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-          </div>
+          
       </form>
   </div>
   <mat-divider></mat-divider>

src/app/plan-management/maintain-up/maintain-up.component.scss

@@ -3,25 +3,30 @@
 
 .header {
     width: 100%;
-    padding: 12px 10px;
+    padding: 12px 0;
   //   margin-bottom: 10px;
     box-sizing: border-box;
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px;
+      padding: 5px 0 0 5px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 3px 40px;
+        margin: 3px 10px;
         input {
           width: 180px;
           height: 22px;
           line-height: 22px;
           border-radius: 3px;}
+          @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 130px;
+            }
+        }
       }
   
     } //queryBox

src/app/plan-management/maintain-up/maintain-up.component.ts

@@ -203,23 +203,33 @@ export class MaintainUpComponent implements OnInit {
     this.PageNumber = e.pageIndex+1
     this.getAllKeyUnit();
   }
-  padMore//pad收缩控制
-  padput=false//pad收起按钮
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
   padjt=false
-  open="更多筛选条件"
-  down="收起"
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
     this.padMore=!this.padMore
     this.padput=!this.padput
-    this.padjt=!this.padjt
   }
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.getunitdata();
     this.getOrganizations();

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

@@ -19,16 +19,39 @@
                     <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>
+              <span *ngIf="padMore" style="margin-left: 20px; 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" *ngIf="!pcfind">
+            <button mat-raised-button color="primary">查询</button>
+            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+          </div>
+          <div class="queryField" *ngIf="!padMore">
+            <label style="margin-right: 10px;">编制级别:</label>
+            <mat-form-field>
+              <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
+                <!-- <mat-option value="1">总队</mat-option>
+                <mat-option value="2">支队</mat-option>
+                <mat-option value="4">大队</mat-option>
+                <mat-option value="8">中队</mat-option> -->
+                <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
           </div>
           <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>
+            <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
           </div>
-          <div class="queryField" *ngIf="!padMore">
+          <div class="queryField" *ngIf="pcfind" >
+            <button mat-raised-button color="primary">查询</button>
+            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+        </div>
+          <div class="queryField" *ngIf="!padMore&&!pcMore">
             <label style="margin-right: 10px;">添加时间:</label>
             <mat-form-field class="example-full-width">
               <input type="date" matInput  name="addtime"  autocomplete="off" [(ngModel)]="addtime">
@@ -39,20 +62,17 @@
             <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="!padMore">
+
+          
+          <div class="queryField" *ngIf="!padMore&&!pcMore">
             <label style="margin-right: 10px;">预案类型:</label>
             <mat-form-field>
-              <!-- <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
-                <mat-option value="8">卡片预案</mat-option>
-                <mat-option value="1">二维预案</mat-option>
-                <mat-option value="2">三维预案</mat-option>
-                <mat-option value="4">其他预案</mat-option>
-              </mat-select> -->
               <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
             </mat-form-field>
           </div>
-            <div class="queryField" *ngIf="!padMore">
+            <div class="queryField" *ngIf="!padMore&&!pcMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
@@ -63,25 +83,12 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField" *ngIf="!padMore">
-              <label style="margin-right: 10px;">编制级别:</label>
-              <mat-form-field>
-                <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
-                  <!-- <mat-option value="1">总队</mat-option>
-                  <mat-option value="2">支队</mat-option>
-                  <mat-option value="4">大队</mat-option>
-                  <mat-option value="8">中队</mat-option> -->
-                  <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-            </div>
             
           </div>
-          <div class="butclass" style="width: 100%;text-align: center;">
+          <!-- <div class="butclass" style="width: 100%;text-align: center;">
               <button mat-raised-button color="primary" type="submit">查询</button>
               <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
-          </div>
+          </div> -->
         </form>
     </div>
     <mat-divider></mat-divider>

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

@@ -6,19 +6,25 @@
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px 0 25px;
+      padding: 5px 25px 0 15px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 3px 40px;
+        margin: 3px 10px;
         input {
           width: 180px;
           height: 22px;
           line-height: 22px;
-          border-radius: 3px;}
+          border-radius: 3px;
+        }
+        @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 140px;
+            }
+        }
       }
   
     } //queryBox

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

@@ -21,11 +21,16 @@ export class MeetPlanComponent implements OnInit {
 
   ngOnInit(): void {
     //console.log(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches)
-    if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
-      //this.padjt=
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
@@ -78,20 +83,24 @@ export class MeetPlanComponent implements OnInit {
   paginator: MatPaginator;
   length:any; //共多少条数据
   pageSize:any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [13] //设置每页条数
   PageNumber:any; //第几页
   
-  padMore//pad收缩控制
-  padput=false//pad收起按钮
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
   padjt=false
-  open="更多筛选条件"
-  down="收起"
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
     this.padMore=!this.padMore
     this.padput=!this.padput
-    this.padjt=!this.padjt
   }
 
   //获取表格数据

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-03-29 09:51:14
+ * @LastEditTime: 2021-03-30 15:54:25
 -->
 <div style="height: 100%;overflow-y: auto;">
     <div class="header" >
@@ -25,6 +25,10 @@
             <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" *ngIf="!pcfind">
+            <button mat-raised-button color="primary">查询</button>
+            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+          </div>
           <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">添加时间:</label>
             <mat-form-field class="example-full-width">
@@ -40,16 +44,16 @@
           <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">预案类型:</label>
             <mat-form-field>
-              <!-- <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
-                <mat-option value="8">卡片预案</mat-option>
-                <mat-option value="1">二维预案</mat-option>
-                <mat-option value="2">三维预案</mat-option>
-                <mat-option value="4">其他预案</mat-option>
-              </mat-select> -->
               <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
             </mat-form-field>
+            <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
+          </div>
+          <div class="queryField" *ngIf="pcfind" >
+            <button mat-raised-button color="primary">查询</button>
+            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
           </div>
-            <div class="queryField" *ngIf="!padMore">
+            <div class="queryField" *ngIf="!padMore&&!pcMore">
               <label style="margin-right: 10px;">审核状态:</label>
               <mat-form-field>
                 <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
@@ -60,7 +64,7 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="queryField" *ngIf="!padMore">
+            <div class="queryField" *ngIf="!padMore&&!pcMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
@@ -75,10 +79,7 @@
             </div>
             
           </div>
-          <div class="butclass" style="width: 100%;text-align: center;">
-              <button mat-raised-button color="primary" type="submit">查询</button>
-              <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
-          </div>
+          
         </form>
     </div>
     <mat-divider></mat-divider>

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

@@ -6,19 +6,25 @@
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px 0 25px;
+      padding: 5px 25px 0 15px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 0 40px;
+        margin: 0 10px;
         input {
           width: 180px;
           height: 22px;
           line-height: 22px;
-          border-radius: 3px;}
+          border-radius: 3px;
+        }
+        @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 160px;
+            }
+        }
       }
   
     } //queryBox

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-29 09:51:04
+ * @LastEditTime: 2021-03-30 15:54:05
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -33,10 +33,16 @@ 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){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
@@ -68,15 +74,21 @@ export class OnetwoEntryPlanComponent implements OnInit {
     this.url=window.location.href.substring(window.location.href.length-1,window.location.href.length)
     this.getAlltabledate()
   }
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
+  padjt=false
   padMore=true//pad收缩控制
   padput=false//pad收起按钮
-  padjt=false
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
     this.padMore=!this.padMore
     this.padput=!this.padput
-    this.padjt=!this.padjt
   }
 
   levels
@@ -100,7 +112,7 @@ export class OnetwoEntryPlanComponent implements OnInit {
   paginator: MatPaginator;
   length:any; //共多少条数据
   pageSize:any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [13] //设置每页条数
   PageNumber:any; //第几页
 
   //获取表格数据

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

@@ -19,8 +19,23 @@
                   </mat-option>
               </mat-select>
           </mat-form-field>
+          <span *ngIf="padMore" style="margin-left: 20px; 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="!pcfind">
+        <button mat-raised-button color="primary">查询</button>
+        <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+      </div>
+      <div class="queryField" *ngIf="!padMore">
+        <label style="margin-right: 10px;">编制级别:</label>
+        <mat-form-field>
+          <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
+            <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+      </div>
+      <div class="queryField" *ngIf="!padMore">
         <label style="margin-right: 10px;">预案类型:</label>
         <mat-form-field>
           <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
@@ -32,25 +47,13 @@
         </mat-form-field>
       </div>
         
-      <div class="queryField">
-        <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-option value="4">大队</mat-option>
-            <mat-option value="8">中队</mat-option> -->
-            <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-      </div>
-  
+      
+      <div class="queryField" *ngIf="pcfind" >
+        <button mat-raised-button color="primary">查询</button>
+        <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
       </div>
-      <div style="width: 100%;text-align: center;">
-          <button mat-raised-button color="primary" type="submit">查询</button>
-          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
       </div>
+      
     </form>
 </div>
 <mat-divider></mat-divider>

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

@@ -6,19 +6,25 @@
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px;
+      padding: 5px 15px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 3px 40px;
+        margin: 3px 10px;
         input {
           width: 180px;
           height: 22px;
           line-height: 22px;
-          border-radius: 3px;}
+          border-radius: 3px;
+        }
+        @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 140px;
+            }
+        }
       }
   
     } //queryBox

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

@@ -51,6 +51,17 @@ export class OpenPlanComponent implements OnInit {
   tabledataSource:any //表格数据
   preparelevels:any //编制级别
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
+      this.padMore=true
+      this.pcfind=false
+      this.padjt=true
+    }else{
+      this.pcfind=true
+      this.pcMore=true
+      this.padMore=false
+      this.padjt=false
+    }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
@@ -84,6 +95,22 @@ export class OpenPlanComponent implements OnInit {
     }
   }
 
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
+  padjt=false
+  padMore=true//pad收缩控制
+  padput=false//pad收起按钮
+  imgsrcopen="../../../assets/images/routdown2.png"
+  imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
+  padInfo(){
+    this.padMore=!this.padMore
+    this.padput=!this.padput
+  }
 
   allPlanInfo:any //存储所有预案信息
   //获得所有预案信息

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

@@ -40,7 +40,19 @@
               </mat-tree>  
           </div>
         </div>
-  
+        <div class="queryField" *ngIf="!pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">编制级别:</label>
+          <mat-form-field>
+            <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
+              <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+        </div>
         <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">单位类型:</label>
             <mat-form-field>
@@ -50,8 +62,14 @@
                     </mat-option>
                 </mat-select>
             </mat-form-field>
+            <span *ngIf="pcMore" style="margin-left: 20px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+            <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
         </div>
-        <div class="queryField" *ngIf="!padMore">
+        <div class="queryField" *ngIf="pcfind" >
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
           <label style="margin-right: 10px;">预案类型:</label>
           <mat-form-field>
             <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
@@ -61,22 +79,11 @@
               <mat-option value="4">其他预案</mat-option>
             </mat-select>
           </mat-form-field>
+          
         </div>
         
-        <div class="queryField" *ngIf="!padMore">
-          <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-option value="4">大队</mat-option>
-              <mat-option value="8">中队</mat-option> -->
-              <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-        </div>
-        <div class="queryField" *ngIf="!padMore">
+        
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
           <label style="margin-right: 10px;">添加时间:</label>
           <mat-form-field class="example-full-width">
             <input type="date" matInput  name="addtime"  autocomplete="off" [(ngModel)]="addtime">
@@ -89,10 +96,7 @@
         </div>
   
       </div>
-      <div class="butclass" style="width: 100%;text-align: center;">
-          <button mat-raised-button color="primary" type="submit">查询</button>
-          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
-      </div>
+      
     </form>
 </div>
 <mat-divider></mat-divider>

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

@@ -4,7 +4,7 @@
     box-sizing: border-box;
     .queryBox {
         box-sizing: border-box;
-        padding: 5px 25px 0 25px;
+        padding: 5px 5px 0 5px;
         // margin-left: 50px;
         display: flex;
         flex-direction: row;
@@ -12,13 +12,21 @@
         align-items:center;
         // justify-content:center;
     .queryField {
-      margin: 0 40px;
+      margin: 0 10px;
       input {
         width: 180px;
         height: 22px;
         line-height: 22px;
-        border-radius: 3px;}
+        border-radius: 3px;
     }
+    @media screen and (max-device-width:1400px){
+        mat-form-field{
+            width: 110px;
+        }
+    }
+        
+    }
+    
 
   } //queryBox
   .butclass{

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

@@ -41,7 +41,7 @@ export class PassPlanComponent implements OnInit {
   paginator: MatPaginator;
   length:any; //共多少条数据
   pageSize:any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [13] //设置每页条数
   PageNumber:any; //第几页
 
   displayedColumns: string[] = ['planname', 'addpeople','level','addtime','plantype','auditStatus','openRange','projectlevel','operation'];
@@ -52,10 +52,16 @@ export class PassPlanComponent implements OnInit {
 
   preparelevels:any
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.getunitdata();
     this.getOrganizations();
@@ -91,10 +97,18 @@ export class PassPlanComponent implements OnInit {
     this.url=window.location.href.substring(window.location.href.length-1,window.location.href.length)
     //console.log(this.url)
   }
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
+  padjt=false
   padMore=true//pad收缩控制
   padput=false//pad收起按钮
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
     this.padMore=!this.padMore
     this.padput=!this.padput

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

@@ -40,7 +40,23 @@
               </mat-tree>  
           </div>
         </div>
-  
+        <div class="queryField" *ngIf="!pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <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-option value="4">大队</mat-option>
+              <mat-option value="8">中队</mat-option>
+              <!-- <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option> -->
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+        </div>
         <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">单位类型:</label>
             <mat-form-field>
@@ -63,32 +79,10 @@
           </mat-form-field>
         </div>
         
-        <div class="queryField" *ngIf="!padMore">
-          <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-option value="4">大队</mat-option>
-              <mat-option value="8">中队</mat-option>
-              <!-- <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option> -->
-            </mat-select>
-          </mat-form-field>
-          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-        </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-form-field class="example-full-width">
-            <input type="date" matInput name="endtime"  autocomplete="off"  [(ngModel)]="endtime">
-          </mat-form-field>
-        </div> -->
+        
   
       </div>
-      <div class="butclass" style="width: 100%;text-align: center;">
+      <div class="butclass" style="width: 100%;text-align: center;" *ngIf="pcfind">
           <button mat-raised-button color="primary" type="submit">查询</button>
           <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
       </div>

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

@@ -4,7 +4,7 @@
     box-sizing: border-box;
     .queryBox {
         box-sizing: border-box;
-        padding: 5px 25px 0 25px;
+        padding:5px 5px 0 5px;
         // margin-left: 50px;
         display: flex;
         flex-direction: row;
@@ -12,12 +12,18 @@
         align-items:center;
         // justify-content:center;
     .queryField {
-      margin: 0 40px;
+      margin: 0 10px;
       input {
         width: 180px;
         height: 22px;
         line-height: 22px;
-        border-radius: 3px;}
+        border-radius: 3px;
+    }
+    @media screen and (max-device-width:1400px){
+        mat-form-field{
+            width: 110px;
+        }
+    }
     }
 
   } //queryBox

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

@@ -51,10 +51,16 @@ export class ReinforcePlanComponent implements OnInit {
 
   preparelevels:any
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.getunitdata();
     this.getOrganizations();
@@ -88,10 +94,18 @@ export class ReinforcePlanComponent implements OnInit {
       ]
     }
   }
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
+  padjt=false
   padMore=true//pad收缩控制
   padput=false//pad收起按钮
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
     this.padMore=!this.padMore
     this.padput=!this.padput

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

@@ -15,9 +15,13 @@
             <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="padMore" style="margin-left: 20px; 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" *ngIf="!pcfind">
+            <button mat-raised-button color="primary">查询</button>
+            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+          </div>
           <div class="queryField" *ngIf="!padMore">
             <label style="margin-right: 10px;">添加时间:</label>
             <mat-form-field class="example-full-width">
@@ -41,8 +45,14 @@
                   <mat-option value="4">审核退回</mat-option>
                 </mat-select>
               </mat-form-field>
+              <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
+              <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'> </span>
             </div>
-            <div class="queryField" *ngIf="!padMore">
+            <div class="queryField" *ngIf="pcfind" >
+              <button mat-raised-button color="primary">查询</button>
+              <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+          </div>
+            <div class="queryField" *ngIf="!padMore&&!pcMore">
               <label style="margin-right: 10px;">编制级别:</label>
               <mat-form-field>
                 <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
@@ -57,10 +67,6 @@
             </div>
             
           </div>
-          <div class="butclass" style="width: 100%;text-align: center;">
-              <button mat-raised-button color="primary" type="submit">查询</button>
-              <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
-          </div>
         </form>
     </div>
     <mat-divider></mat-divider>

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

@@ -6,19 +6,25 @@
   //   border-bottom: 1px solid black;
     .queryBox {
       box-sizing: border-box;
-      padding: 5px 25px 0 25px;
+      padding: 5px 25px 0 15px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       align-items:center;
       // justify-content:center;
       .queryField {
-        margin: 3px 40px;
+        margin: 3px 10px;
         input {
           width: 180px;
           height: 22px;
           line-height: 22px;
-          border-radius: 3px;}
+          border-radius: 3px;
+        }
+        @media screen and (max-device-width:1400px){
+            mat-form-field{
+                width: 150px;
+            }
+        }
       }
   
     } //queryBox

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-29 09:49:11
+ * @LastEditTime: 2021-03-30 16:36:01
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -29,10 +29,16 @@ 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&&window.matchMedia("(max-height: 700px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.pcMore=false
       this.padMore=true
+      this.pcfind=false
+      this.padjt=true
     }else{
+      this.pcfind=true
+      this.pcMore=true
       this.padMore=false
+      this.padjt=false
     }
     this.levels = sessionStorage.getItem("level");
     if(this.levels == "0"){//如果是总队
@@ -63,13 +69,19 @@ export class TypePlanComponent implements OnInit {
     }
     this.getAlltabledate()
   }
+  pcMore//pc更多
+  pcput=false//pc收起
+  pcfind//pc查询
+  padjt=false
   padMore=true//pad收缩控制
   padput=false//pad收起按钮
-  padjt=false
   imgsrcopen="../../../assets/images/routdown2.png"
   imgsrcdown="../../../assets/images/routup2.png"
+  pcInfo(){
+    this.pcMore=!this.pcMore
+    this.pcput=!this.pcput
+  }
   padInfo(){
-    this.padjt=!this.padjt
     this.padMore=!this.padMore
     this.padput=!this.padput
   }
@@ -93,7 +105,7 @@ export class TypePlanComponent implements OnInit {
   paginator: MatPaginator;
   length:any; //共多少条数据
   pageSize:any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [13] //设置每页条数
   PageNumber:any; //第几页
 
   //获取表格数据