[完善]采集页面以及系统管理页面的UI自适应

src/app/data-collection/fire-force/fire-force.component.scss

@@ -298,6 +298,8 @@
             .btnbox{
                 display: flex;
                 align-items: center;
+                flex: 1;
+                justify-content: flex-end;
                 .uploadAttachment{
                     display: inline-block;
                     margin-right: 20px;
@@ -575,3 +577,100 @@
         }
     }
 }
+
+
+@media screen and (max-width:1400px){
+    .box{
+        padding: 5px;
+        font-size: 14px;
+    }
+    .listbox{
+        width: 310px;
+        .contantbox{
+            .waterList{
+                li{ 
+                    .address{
+                        width: 50%;
+                    }
+                    .integrity{
+                        width: 36%;
+                    }
+                }
+            }
+        }
+    }
+    .mapbox{
+        .mapcheckbox{
+            height: 30px;
+            line-height: 30px;
+        }
+        #map{
+            .gistopbox{
+                width: 43%;
+            }
+        }
+        .detailsbox{
+            height:338px;
+            .tabsbox{
+                height: 38px;
+                line-height: 38px;
+                .tabs{
+                    div{
+                        width: 90px;
+                    }
+                }
+                .btnbox{
+                    .uploadAttachment{
+                        margin-right: 12px;
+                        width: 80px;
+                        button{
+                            mat-icon{
+                                display: none;
+                            }
+                        }
+                     }
+                    .state{
+                        margin-right:12px;
+                    }
+                    .submitAudit{
+                        margin-right:12px;
+                    }
+                    .close{
+                        margin-right: 12px;
+                    }
+                }
+            }
+            .contant{
+                height:300px;
+                p{
+                    padding-left: 20px;
+                    font-size: 14px;
+                }
+                span{
+                    font-size: 14px;
+                }
+                input,select{
+                    width: 50%;
+                }
+                textarea{
+                    width: 87%;
+                }
+                .longinput{
+                    width: 66%;
+                }
+                .unitDiv{
+                    width: 50%;
+                    position: relative;
+                }
+                .setPositionBtn{
+                    width:85px;
+                    text-align: center;
+                    margin-right: 8px;
+                    mat-icon{
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

src/app/data-collection/fire-force/fire-force.component.ts

@@ -878,6 +878,36 @@ export class FireForceComponent implements OnInit {
           this.positionLngLat = this.atLastPositionLngLat
         }
       })//取消
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        this.newPositionMarker = new AMap.Marker({
+          position: [this.positionLngLat.x,this.positionLngLat.y],
+          content: this.newPositionMarkerContent,
+          offset: new AMap.Pixel(-15, -18)
+        });
+        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
+        this.map.add(this.newPositionMarker);
+        this.positionLngLat = this.atLastPositionLngLat
+      })
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
+          this.map.remove(this.newPositionMarker)
+          this.positionLngLat = {}
+          this.atLastPositionLngLat = {}
+        }else{
+          this.newPositionMarker = new AMap.Marker({
+            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
+            content: this.newPositionMarkerContent,
+            offset: new AMap.Pixel(-15, -18)
+          });
+          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
+          this.map.add(this.newPositionMarker);
+          this.positionLngLat = this.atLastPositionLngLat
+        }
+      })//取消
     }
     
   }

src/app/data-collection/linkage-forces/linkage-forces.component.scss

@@ -259,8 +259,11 @@
                 }
             }
             .btnbox{
+               
                 display: flex;
                 align-items: center;
+                flex: 1;
+                justify-content: flex-end;
                 .uploadAttachment{
                     display: inline-block;
                     margin-right: 20px;
@@ -538,3 +541,123 @@
         }
     }
 }
+
+
+@media screen and (max-width:1400px){
+    .box{
+        padding: 5px;
+        font-size: 14px;
+    }
+    .listbox{
+        width: 310px;
+        .contantbox{
+            .waterList{
+                li{ 
+                    .address{
+                        width: 50%;
+                    }
+                    .integrity{
+                        width: 36%;
+                    }
+                }
+            }
+        }
+    }
+    .mapbox{
+        .mapcheckbox,.swiper-container{
+            width: 100%;
+            height: 50px;
+            .swiper-wrapper{
+                flex: 1;
+                display: flex;
+                height: 50px;
+                line-height: 50px;
+            }
+            mat-checkbox{
+                font-size: 15px;
+                min-width: 120px;
+                span{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    img{
+                        margin-right: 3px;
+                    }
+                }
+               
+            }
+            mat-checkbox:nth-child(1){
+                margin-left: 20px;
+            }
+           
+        }
+        #map{
+            .gistopbox{
+                width: 43%;
+            }
+        }
+        .detailsbox{
+            height:338px;
+            .tabsbox{
+                height: 38px;
+                line-height: 38px;
+                .tabs{
+                    div{
+                        width: 90px;
+                    }
+                }
+                .btnbox{
+                    .uploadAttachment{
+                        margin-right: 12px;
+                        width: 80px;
+                        button{
+                            mat-icon{
+                                display: none;
+                            }
+                        }
+                     }
+                    .state{
+                        margin-right:12px;
+                    }
+                    .submitAudit{
+                        margin-right:12px;
+                    }
+                    .close{
+                        margin-right: 12px;
+                    }
+                }
+            }
+            .contant{
+                height:300px;
+                p{
+                    padding-left: 20px;
+                    font-size: 14px;
+                }
+                span{
+                    font-size: 14px;
+                }
+                input,select{
+                    width: 50%;
+                }
+                textarea{
+                    width: 87%;
+                }
+                .longinput{
+                    width: 66%;
+                }
+                .unitDiv{
+                    width: 50%;
+                    position: relative;
+                }
+                .setPositionBtn{
+                    width:85px;
+                    text-align: center;
+                    margin-right: 8px;
+                    mat-icon{
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

src/app/data-collection/linkage-forces/linkage-forces.component.ts

@@ -81,6 +81,7 @@ export class LinkageForcesComponent implements OnInit {
   createMarker(list){
     let markerArrcluster = []
     this.cluster ? this.cluster.setData([]) : null
+    console.log(678,list)
     list.forEach((item) => {
       let image
       if(item.linkageForceType == 0){//消火栓
@@ -115,11 +116,13 @@ export class LinkageForcesComponent implements OnInit {
         image = '/assets/linkageForcesMarkers/住建.png'
       }
       // 用于点集合的数组
+      if(item.location && item.location.x){
         markerArrcluster.push({
           lnglat : [item.location.x,item.location.y],
           image : image,
           data : item
         })
+      }
     })
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
@@ -172,8 +175,15 @@ export class LinkageForcesComponent implements OnInit {
   ngOnInit(): void {  
     this.getAllFireForce()
     setTimeout(() => {
+      console.log(document.documentElement.clientWidth)
+      let slidesPerView
+      if(document.documentElement.clientWidth < 1400){
+        slidesPerView = 5
+      }else{
+        slidesPerView = 10
+      }
       var mySwiper = new Swiper('.swiper-container', {
-        slidesPerView: 10,//每页显示的个数
+        slidesPerView: slidesPerView,//每页显示的个数
         slidesPerGroup: 3,//点击一次需要跳多少次
         // 如果需要前进后退按钮
         navigation: {
@@ -597,6 +607,37 @@ export class LinkageForcesComponent implements OnInit {
           this.positionLngLat = this.atLastPositionLngLat
         }
       })//取消
+      //点击确定
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        this.newPositionMarker = new AMap.Marker({
+          position: [this.positionLngLat.x,this.positionLngLat.y],
+          content: this.newPositionMarkerContent,
+          offset: new AMap.Pixel(-15, -18)
+        });
+        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
+        this.map.add(this.newPositionMarker);
+        this.positionLngLat = this.atLastPositionLngLat
+      })
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
+          this.map.remove(this.newPositionMarker)
+          this.positionLngLat = {}
+          this.atLastPositionLngLat = {}
+        }else{
+          this.newPositionMarker = new AMap.Marker({
+            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
+            content: this.newPositionMarkerContent,
+            offset: new AMap.Pixel(-15, -18)
+          });
+          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
+          this.map.add(this.newPositionMarker);
+          this.positionLngLat = this.atLastPositionLngLat
+        }
+      })//取消
     }
     
   }

src/app/data-collection/water-collection/water-collection.component.html

@@ -143,7 +143,7 @@
                             纬度:
                         </span>
                         <input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;">
-                        <button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary">
+                        <button class="setPositionBtn" (click)="setPosition()" mat-flat-button color="primary">
                             <mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置
                         </button>
                     </mat-grid-tile>

src/app/data-collection/water-collection/water-collection.component.scss

@@ -317,6 +317,10 @@
                     opacity: 0.4;
                 }
             }
+            .setPositionBtn{
+                width:85px;
+                text-align: center;
+            }
         }
     }
 }
@@ -380,3 +384,92 @@
         }
     }
 }
+
+@media screen and (max-width:1400px){
+    .box{
+        padding: 5px;
+        font-size: 14px;
+    }
+    .listbox{
+        width: 310px;
+        .contantbox{
+            .waterList{
+                li{ 
+                    .address{
+                        width: 50%;
+                    }
+                    .integrity{
+                        width: 36%;
+                    }
+                }
+            }
+        }
+    }
+    .mapbox{
+        .mapcheckbox{
+            height: 30px;
+            line-height: 30px;
+        }
+        #map{
+            .gistopbox{
+                width: 43%;
+            }
+        }
+        .detailsbox{
+            height:338px;
+            .tabsbox{
+                height: 38px;
+                line-height: 38px;
+                .tabs{
+                    div{
+                        width: 90px;
+                    }
+                }
+                .btnbox{
+                    .state{
+                        margin-right:22px;
+                    }
+                    .submitAudit{
+                        margin-right:22px;
+                    }
+                    .close{
+                        margin-right: 22px;
+                    }
+                }
+            }
+            .contant{
+                height:300px;
+                p{
+                    padding-left: 20px;
+                    font-size: 14px;
+                }
+                span{
+                    font-size: 14px;
+                }
+                input,select{
+                    width: 50%;
+                }
+                textarea{
+                    width: 87%;
+                }
+                .longinput{
+                    width: 66%;
+                }
+                .unitDiv{
+                    width: 50%;
+                    position: relative;
+                }
+                .setPositionBtn{
+                    width:85px;
+                    text-align: center;
+                    margin-right: 8px;
+                    mat-icon{
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+

src/app/data-collection/water-collection/water-collection.component.ts

@@ -72,11 +72,13 @@ export class WaterCollectionComponent implements OnInit {
         image = '/assets/waterMarkers/天然水源.png'
       }
       // 用于点集合的数组
+      if(item.location && item.location.x){
         markerArrcluster.push({
           lnglat : [item.location.x,item.location.y],
           image : image,
           data : item
         })
+      }
     })
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
@@ -612,6 +614,37 @@ export class WaterCollectionComponent implements OnInit {
           this.positionLngLat = this.atLastPositionLngLat
         }
       })//取消
+      //点击确定
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        this.newPositionMarker = new AMap.Marker({
+          position: [this.positionLngLat.x,this.positionLngLat.y],
+          content: this.newPositionMarkerContent,
+          offset: new AMap.Pixel(-15, -18)
+        });
+        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
+        this.map.add(this.newPositionMarker);
+        this.positionLngLat = this.atLastPositionLngLat
+      })
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'touchstart',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
+          this.map.remove(this.newPositionMarker)
+          this.positionLngLat = {}
+          this.atLastPositionLngLat = {}
+        }else{
+          this.newPositionMarker = new AMap.Marker({
+            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
+            content: this.newPositionMarkerContent,
+            offset: new AMap.Pixel(-15, -18)
+          });
+          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
+          this.map.add(this.newPositionMarker);
+          this.positionLngLat = this.atLastPositionLngLat
+        }
+      })//取消
     }
   }
 }

src/app/ui/collection-tools/collection-tools.component.html

@@ -40,14 +40,14 @@
     <div class="bigBox">
       <div class="weatherBox" [ngClass]="{'opened': weatherBtn,'close': !weatherBtn}">
         <span class="name">天气</span>
-        <input [(ngModel)]="canvasData.selectPanelPointBaseData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+        <input class="weatherInput" [(ngModel)]="canvasData.selectPanelPointBaseData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
         <span class="name">气温</span>
         <div style="display: inline-block;position: relative;">
           <input [(ngModel)]="canvasData.selectPanelPointBaseData.airTemperature" style="width: 60px;" type="number" value="0" oninput="if(value.length>2)value=value.slice(0,2)">
           <span style="position: absolute;right: 20px;top: 10px;color: #9c9fa5;">℃</span>
         </div>
         <span class="name">风力</span>
-        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windScale">
+        <select class="weatherSelect" [(ngModel)]="canvasData.selectPanelPointBaseData.windScale">
           <option value ="0">0(无风)</option>
           <option value ="1">1(软风)</option>
           <option value ="2">2(轻风)</option>
@@ -57,7 +57,7 @@
           <option value ="6">6(强风)</option>
         </select>
         <span class="name">风向</span>
-        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windDirection">
+        <select class="weatherSelect" [(ngModel)]="canvasData.selectPanelPointBaseData.windDirection">
           <option value ="0">东</option>
           <option value ="1">西</option>
           <option value ="2">南</option>
@@ -67,10 +67,10 @@
           <option value ="6">东北</option>
           <option value ="7">西北</option>
         </select>
-        <label title="保存" (click)="saveSite()" class="rightSave" *ngIf="isEditPattern"><mat-icon>description</mat-icon>保存</label>
+        
       </div>
     </div>
-  
+    <label title="保存" (click)="saveSite()" class="rightSave" *ngIf="isEditPattern"><mat-icon style="vertical-align: sub;">description</mat-icon>保存</label>
   </div>
 
   <!--功能区 -->
@@ -125,7 +125,7 @@
             <mat-icon *ngIf="toggleHandlePlans">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!toggleHandlePlans">keyboard_arrow_down</mat-icon>
             <label class="overflowText" style="font-weight: 550;">处置预案</label>
-            <label style="margin-left: 20px;" *ngIf="isEditPattern">
+            <label class="btnlabel" style="margin-left: 20px;" *ngIf="isEditPattern">
               <mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon>
               <mat-icon style="margin: 0 3px;" title="新建空节点" (click)='addPanelPoint($event,null,treeData)'>add</mat-icon>
               <mat-icon class="matIcons" (click)='addBGCPanelPoint($event)'>photo_size_select_actual</mat-icon>
@@ -550,7 +550,7 @@
         </div>
       </div>
 
-      <div id="bottomDiv" (mousewheel)="$event.stopPropagation()" class="bottomCss" *ngIf="!pattern">
+      <div id="bottomDiv" (mousewheel)="$event.stopPropagation()"  [ngClass]="{'togglePanel3': toggleExpandPanel==true}" class="bottomCss" *ngIf="!pattern">
         <div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
         <div class="title">
           <div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">

src/app/ui/collection-tools/collection-tools.component.scss

@@ -69,10 +69,16 @@
     }
   }
   .rightSave {
-    margin: 0 10px;
-    cursor: pointer;
     vertical-align: middle;
     color: #279FFF;
+    position: absolute;
+    right: 15px;
+    cursor: pointer;
+  }
+}
+@media screen and (max-width:1400px){
+  .header {
+    min-height: 30px;
   }
 }
 
@@ -166,6 +172,47 @@
     right: 0;
     
   }
+  .bottomCss{
+    position: absolute;
+    left: 232px;
+    right: 0px;
+    bottom: 0;
+    height: 158px;
+    width: auto;
+    z-index: 100;
+    background-color: white;
+    border: 1px solid #464646;
+    .dragDiv{
+      width: 100%;
+      height: 3px;
+      position: absolute;
+      top: 0;
+      z-index: 1000;
+      cursor: n-resize;
+    }
+    .title{
+      height: 35px;
+      background-color: #464646;
+      div{
+        background-color: #464646;
+        float: left;
+        width: 80px;
+        color: white;
+        font-size: 13px;
+        padding-left: 5px;
+        cursor: pointer;
+      }
+      .detailsAndattentBtn{
+        background-color: #595959;
+      }
+    }
+    .body{
+      textarea{
+        width: 100%;
+        border-radius: 0px;
+     }   
+    }
+  }
   //右边导航栏显示隐藏
  .togglePanel2 {
     margin-right: -2000px;
@@ -179,6 +226,98 @@
 
 }
 
+@media screen and (max-width:1400px){
+  .functionalDomain {
+    .centerBuildingDiv {
+      position: absolute;
+      max-width: 400px;
+      top:50px;
+      left: 223px;
+      z-index: 150;
+      display: flex;
+    }
+    .functionalDomainLeft {
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      margin-left: 0px;
+      transition: margin-left 0.5s;
+      min-width: 215px;
+      border: 1px solid #E6EAEE;
+      width: 215px;
+      left: 0;
+      z-index: 111;
+      .leftDragDiv{
+        position: absolute;
+        right: 0;
+        height: 100%;
+        width: 3px;
+        z-index: 1000;
+        cursor: e-resize;
+      }
+    }
+    .functionalDomainRight {
+      z-index: 111;
+      margin-right: 0px;
+      transition:  margin-right 0.5s;
+      border: 1px solid #464646;
+      width: 200px;
+      right: 0;
+    }
+    .bottomCss{
+      left: 216px;
+      bottom: 0;
+      height: 120px;
+      width: auto;
+      z-index: 100;
+      background-color: white;
+      border: 1px solid #464646;
+      transition:  left 0.5s;
+      .dragDiv{
+        display: none;
+      }
+      .title{
+        height: 28px;
+        background-color: #464646;
+        div{
+          height: 28px;
+          line-height: 28px;
+          background-color: #464646;
+          float: left;
+          width: 60px;
+          color: white;
+          font-size: 13px;
+          padding-left: 5px;
+          cursor: pointer;
+        }
+        .detailsAndattentBtn{
+          background-color: #595959;
+        }
+      }
+      .body{
+        textarea{
+          width: 100%;
+          border-radius: 0px;
+       }   
+      }
+    }
+    //右边导航栏显示隐藏
+    .togglePanel2 {
+      margin-right: -2000px;
+      transition:  margin-right 1s;
+    }
+    //左侧导航栏显示隐藏
+    .togglePanel {
+      margin-left: -220px;
+      transition: margin-left 1s;
+    }
+    .togglePanel3{
+      left: 0;
+      transition: left 1s;
+    }
+  }
+}
+
 //中间建筑/楼层
 .centerTotal {
   width: 197px;
@@ -213,6 +352,11 @@
   }
 }
 //中间建筑/楼层
+@media screen and (max-width:1400px){
+  .centerTotal{
+    width: 160px;
+  }
+}
 
 //右边操作栏
 .title{
@@ -428,12 +572,12 @@ div:focus {
 }
 
 .bigBox{
-  width: 650px;
+  width: 580px;
   height: 40px;
   line-height: 40px;
   position: absolute;
   overflow: hidden;
-  right: 0;
+  right: 52px;
   top: 0;
 }
 .weatherBox{
@@ -460,54 +604,34 @@ div:focus {
     vertical-align: middle;
   }
 }
-.open{
+@media screen and (max-width:1400px){
-  right: 0px;
+  .bigBox{
-}
+    z-index: 9999;
-.close{
+    width: 479px;
-  right:-622px;
+    right: 233px;
+    top: 35px;
+    .weatherBox{
+      .name{
+        font-size: 13px;
       }
-.bottomCss{
+      .weatherInput{
-  position: absolute;
+        width: 99px;
-  left: 232px;
-  right: 0px;
-  bottom: 0;
-  height: 158px;
-  width: auto;
-  z-index: 100;
-  background-color: white;
-  border: 1px solid #464646;
-  .dragDiv{
-    width: 100%;
-    height: 3px;
-    position: absolute;
-    top: 0;
-    z-index: 1000;
-    cursor: n-resize;
       }
-  .title{
+      .weatherSelect{
-    height: 35px;
+        width: 88px;
-    background-color: #464646;
-    div{
-      background-color: #464646;
-      float: left;
-      width: 80px;
-      color: white;
-      font-size: 13px;
-      padding-left: 5px;
-      cursor: pointer;
       }
-    .detailsAndattentBtn{
-      background-color: #595959;
     }
   }
-  .body{
-    textarea{
-      width: 100%;
-      border-radius: 0px;
 }
+
+.open{
+  right: 0px;
 }
+.close{
+  right:-622px;
 }
 
+
 //人或车所属单位输入框
 .orInput{
   position: relative;

src/app/ui/collection-tools/panel.scss

@@ -20,6 +20,18 @@
   color: #000;
   background: linear-gradient(to top,#cdced1,#FFF);
 }
+@media screen and (max-width:1400px){
+  .planarGraphHeader{
+    position: relative;
+   .btnlabel{
+     margin-left: 0px;
+     display: flex;
+     position: absolute;
+     right: 8px;
+   }
+  }
+}
+
 //平面图头部字体图标样式
 .hover {
   width: 18px;

src/app/ui/enterpriseuser/enterpriseuser.component.html

@@ -1,3 +1,5 @@
+
+<div class="box">
   <div class="header">
     <form #form="ngForm">
       <div class="queryBox">
@@ -76,3 +78,5 @@
       (page)="chagePage($event)">
   </mat-paginator>
   
+    
+</div>

src/app/ui/enterpriseuser/enterpriseuser.component.scss

@@ -1,3 +1,8 @@
+.box{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
 table {
     width: 100%;
     text-align: center;

src/app/ui/fire-fighting-template/editingFireControl.html

@@ -1,3 +1,4 @@
+<div class="dialogBox">
     <div mat-dialog-title>编辑消防要素模板</div>
 
     <div>
@@ -43,3 +44,4 @@
             </div>
         </form>
     </div>
+</div>

src/app/ui/fire-fighting-template/fire-fighting-template.component.scss

@@ -16,3 +16,9 @@ table {
   height: 450px;
   overflow: auto;
 }
+@media screen and (max-width:1400px){
+  .dialogBox{
+    max-height: 580px;
+    overflow-y: auto;
+  }
+}

src/app/ui/fire-fighting-template/newFireFighting.html

@@ -1,3 +1,4 @@
+<div class="dialogBox">
     <div mat-dialog-title>创建消防要素模板</div>
 
     <div>
@@ -42,3 +43,4 @@
             </div>
         </form>
     </div>
+</div>

src/app/ui/material-bank/addoriginalcopy.component.html

@@ -1,4 +1,4 @@
-<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container dialogBox">
     <div class="topbox">
         <span  mat-dialog-title>新增原件</span>
     </div>

src/app/ui/material-bank/editoriginalcopy.component.html

@@ -1,4 +1,4 @@
-<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container dialogBox">
     <div class="topbox">
         <span  mat-dialog-title>编辑原件</span>
     </div>

src/app/ui/material-bank/material-bank.component.scss

@@ -2,14 +2,22 @@
     padding: 0 0 0 10px;
     width: 100%;
     height: 100%;
-    overflow-x: hidden;
+    // overflow-x: hidden;
-    overflow-y: auto;
+    
     display: flex;
     .leftBox {
         flex: 20%;
+        box-sizing: border-box;
         padding-top: 10px;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
     }
     .rightBox {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
         border-left: 1px solid #999;
         flex: 80%;
         display: flex;
@@ -147,6 +155,14 @@ table {
    font-size: 14px;
    margin-right: 5px;
 }
+@media screen and (max-width:1400px){
+    .dialogBox{
+        max-height: 580px;
+        overflow-y: auto;
+    }
+}
+
+
 .topbox{
     height: 32px;
     border-bottom: 1px solid black;

src/app/ui/unit-information/unit-information.component.scss

@@ -2,14 +2,21 @@
     margin: 0 0 0 10px;
     width: 100%;
     height: 100%;
-    overflow-x: hidden;
+    // overflow-x: hidden;
-    overflow-y: auto;
     display: flex;
     .leftBox {
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
         flex: 20%;
         padding-top: 10px;
+        box-sizing: border-box;
     }
     .rightBox {
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
         border-left: 1px solid #999;
         flex: 80%;
         display: flex;

src/app/ui/usermanagement/usermanagement.component.html

@@ -1,3 +1,4 @@
+<div class="box">
   <div class="header">
     <form #form="ngForm">
       <div class="queryBox">
@@ -114,4 +115,6 @@
       [pageSizeOptions]="pageSizeOptions"
       (page)="chagePage($event)">
   </mat-paginator>
+</div>
+
 

src/app/ui/usermanagement/usermanagement.component.scss

@@ -1,6 +1,12 @@
+.box{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
 table {
     width: 100%;
     text-align: center;
+    
     .cdk-header-cell {
       text-align: center;
     }