diff --git a/src/app/data-collection/fire-force/fire-force.component.scss b/src/app/data-collection/fire-force/fire-force.component.scss
index 597f4b6..76e67df 100644
--- a/src/app/data-collection/fire-force/fire-force.component.scss
+++ b/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;
@@ -574,4 +576,101 @@
             line-height: 36px;
         }
     }
+}
+
+
+@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;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/data-collection/fire-force/fire-force.component.ts b/src/app/data-collection/fire-force/fire-force.component.ts
index 6a6b9a2..077a144 100644
--- a/src/app/data-collection/fire-force/fire-force.component.ts
+++ b/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
+        }
+      })//取消
     }
     
   }
diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.scss b/src/app/data-collection/linkage-forces/linkage-forces.component.scss
index 10ce7fe..ddf644c 100644
--- a/src/app/data-collection/linkage-forces/linkage-forces.component.scss
+++ b/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;
@@ -537,4 +540,124 @@
             margin: 0 20px;
         }
     }
+}
+
+
+@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;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.ts b/src/app/data-collection/linkage-forces/linkage-forces.component.ts
index 3ceabef..f113b29 100644
--- a/src/app/data-collection/linkage-forces/linkage-forces.component.ts
+++ b/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'
       }
       // 用于点集合的数组
-      markerArrcluster.push({
-        lnglat : [item.location.x,item.location.y],
-        image : image,
-        data : item
-      })
+      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
+        }
+      })//取消
     }
     
   }
diff --git a/src/app/data-collection/water-collection/water-collection.component.html b/src/app/data-collection/water-collection/water-collection.component.html
index 862522f..2d07aa3 100644
--- a/src/app/data-collection/water-collection/water-collection.component.html
+++ b/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>
diff --git a/src/app/data-collection/water-collection/water-collection.component.scss b/src/app/data-collection/water-collection/water-collection.component.scss
index b8caeac..dd72757 100644
--- a/src/app/data-collection/water-collection/water-collection.component.scss
+++ b/src/app/data-collection/water-collection/water-collection.component.scss
@@ -317,6 +317,10 @@
                     opacity: 0.4;
                 }
             }
+            .setPositionBtn{
+                width:85px;
+                text-align: center;
+            }
         }
     }
 }
@@ -379,4 +383,93 @@
             line-height: 36px;
         }
     }
-}
\ No newline at end of file
+}
+
+@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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
diff --git a/src/app/data-collection/water-collection/water-collection.component.ts b/src/app/data-collection/water-collection/water-collection.component.ts
index 59d10c0..3e6b7a7 100644
--- a/src/app/data-collection/water-collection/water-collection.component.ts
+++ b/src/app/data-collection/water-collection/water-collection.component.ts
@@ -72,11 +72,13 @@ export class WaterCollectionComponent implements OnInit {
         image = '/assets/waterMarkers/天然水源.png'
       }
       // 用于点集合的数组
-      markerArrcluster.push({
-        lnglat : [item.location.x,item.location.y],
-        image : image,
-        data : item
-      })
+      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
+        }
+      })//取消
     }
   }
 }
diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
index bbf9211..313e55e 100644
--- a/src/app/ui/collection-tools/collection-tools.component.html
+++ b/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}">
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
index 2ca8282..ed539b9 100644
--- a/src/app/ui/collection-tools/collection-tools.component.scss
+++ b/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,8 +172,49 @@
     right: 0;
     
   }
-    //右边导航栏显示隐藏
-  .togglePanel2 {
+  .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;
     transition:  margin-right 1s;
   }
@@ -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,53 +604,33 @@ div:focus {
     vertical-align: middle;
   }
 }
+@media screen and (max-width:1400px){
+  .bigBox{
+    z-index: 9999;
+    width: 479px;
+    right: 233px;
+    top: 35px;
+    .weatherBox{
+      .name{
+        font-size: 13px;
+      }
+      .weatherInput{
+        width: 99px;
+      }
+      .weatherSelect{
+        width: 88px;
+      }
+    }
+  }
+}
+
 .open{
   right: 0px;
 }
 .close{
   right:-622px;
 }
-.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;
-   }   
-  }
-}
+
 
 //人或车所属单位输入框
 .orInput{
diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss
index 666a2ad..9dd9848 100644
--- a/src/app/ui/collection-tools/panel.scss
+++ b/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;
diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.html b/src/app/ui/enterpriseuser/enterpriseuser.component.html
index af329b3..b22183d 100644
--- a/src/app/ui/enterpriseuser/enterpriseuser.component.html
+++ b/src/app/ui/enterpriseuser/enterpriseuser.component.html
@@ -1,78 +1,82 @@
-<div class="header">
-  <form #form="ngForm">
-    <div class="queryBox">
 
-      <div class="queryField">
-        <button type="button"  mat-raised-button color="primary" (click)='open()'>创建企业用户</button>
+<div class="box">
+  <div class="header">
+    <form #form="ngForm">
+      <div class="queryBox">
+  
+        <div class="queryField">
+          <button type="button"  mat-raised-button color="primary" (click)='open()'>创建企业用户</button>
+        </div>
+  
+        <div class="queryField">
+          <label style="margin-right: 10px;">登录账号:</label>
+          <input type="text" [(ngModel)]="userLogin" name="userLogin">
+        </div>
+  
+        <div class="queryField">
+          <label style="margin-right: 10px;">单位名称:</label>
+          <input type="text" [(ngModel)]="userName" name="userName">
+        </div>
+  
+        <div class="queryField">
+          <label style="margin-right: 10px;">统一社会信用代码:</label>
+          <input type="text" [(ngModel)]="creditcode" name="creditcode">
+        </div>
+  
       </div>
-
-      <div class="queryField">
-        <label style="margin-right: 10px;">登录账号:</label>
-        <input type="text" [(ngModel)]="userLogin" name="userLogin">
-      </div>
-
-      <div class="queryField">
-        <label style="margin-right: 10px;">单位名称:</label>
-        <input type="text" [(ngModel)]="userName" name="userName">
-      </div>
-
-      <div class="queryField">
-        <label style="margin-right: 10px;">统一社会信用代码:</label>
-        <input type="text" [(ngModel)]="creditcode" name="creditcode">
+      <div style="width: 100%;text-align: center;">
+          <button mat-raised-button color="primary" (click)='initData()'>查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button>
       </div>
-
-    </div>
-    <div style="width: 100%;text-align: center;">
-        <button mat-raised-button color="primary" (click)='initData()'>查询</button>
-        <button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button>
-    </div>
-  </form>
+    </form>
+  </div>
+  
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  
+      <ng-container matColumnDef="loginName">
+        <th mat-header-cell *matHeaderCellDef>登录账号</th>
+        <td mat-cell *matCellDef="let element">{{element.name}}<span style="color: red;" *ngIf="element.cancelled">(该账号已被注销)</span></td>
+      </ng-container>
+  
+      <ng-container matColumnDef="unitName">
+        <th mat-header-cell *matHeaderCellDef>单位名称</th>
+        <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
+      </ng-container>
+  
+      <ng-container matColumnDef="creditcode">
+        <th mat-header-cell *matHeaderCellDef>统一社会信用代码</th>
+        <td mat-cell *matCellDef="let element">{{element.usci}}</td>
+      </ng-container>
+  
+  
+      <ng-container matColumnDef="time">
+        <th mat-header-cell *matHeaderCellDef>创建时间</th>
+        <td mat-cell *matCellDef="let element">
+          {{element.creationTime|date:'yyyy-MM-dd'}}
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="operation">
+        <th mat-header-cell *matHeaderCellDef>操作</th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-raised-button color="primary" class="maginleft" (click)='reset(element)' *ngIf="!element.cancelled">重置密码</button>
+          <button mat-raised-button color="primary" class="maginleft" (click)='see(element)' *ngIf="!element.cancelled">查看</button>
+          <button mat-raised-button color="primary" class="maginleft" (click)='edit(element)' *ngIf="!element.cancelled">编辑</button>
+          <button mat-raised-button color="primary" class="maginleft" (click)='enabled(element)' *ngIf="!element.cancelled && !element.enabled">启用</button>
+          <button mat-raised-button color="warn" class="maginleft" (click)='noEnabled(element)' *ngIf="!element.cancelled && element.enabled">禁用</button>
+          <button mat-raised-button color="warn" class="maginleft" (click)='logoff(element)' *ngIf="!element.cancelled">注销</button>
+          <button mat-raised-button color="warn" class="maginleft" (click)='delete(element)' *ngIf="element.cancelled">删除</button>
+        </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)="chagePage($event)">
+  </mat-paginator>
+  
+    
 </div>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-
-    <ng-container matColumnDef="loginName">
-      <th mat-header-cell *matHeaderCellDef>登录账号</th>
-      <td mat-cell *matCellDef="let element">{{element.name}}<span style="color: red;" *ngIf="element.cancelled">(该账号已被注销)</span></td>
-    </ng-container>
-
-    <ng-container matColumnDef="unitName">
-      <th mat-header-cell *matHeaderCellDef>单位名称</th>
-      <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="creditcode">
-      <th mat-header-cell *matHeaderCellDef>统一社会信用代码</th>
-      <td mat-cell *matCellDef="let element">{{element.usci}}</td>
-    </ng-container>
-
-
-    <ng-container matColumnDef="time">
-      <th mat-header-cell *matHeaderCellDef>创建时间</th>
-      <td mat-cell *matCellDef="let element">
-        {{element.creationTime|date:'yyyy-MM-dd'}}
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="operation">
-      <th mat-header-cell *matHeaderCellDef>操作</th>
-      <td mat-cell *matCellDef="let element">
-        <button mat-raised-button color="primary" class="maginleft" (click)='reset(element)' *ngIf="!element.cancelled">重置密码</button>
-        <button mat-raised-button color="primary" class="maginleft" (click)='see(element)' *ngIf="!element.cancelled">查看</button>
-        <button mat-raised-button color="primary" class="maginleft" (click)='edit(element)' *ngIf="!element.cancelled">编辑</button>
-        <button mat-raised-button color="primary" class="maginleft" (click)='enabled(element)' *ngIf="!element.cancelled && !element.enabled">启用</button>
-        <button mat-raised-button color="warn" class="maginleft" (click)='noEnabled(element)' *ngIf="!element.cancelled && element.enabled">禁用</button>
-        <button mat-raised-button color="warn" class="maginleft" (click)='logoff(element)' *ngIf="!element.cancelled">注销</button>
-        <button mat-raised-button color="warn" class="maginleft" (click)='delete(element)' *ngIf="element.cancelled">删除</button>
-      </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)="chagePage($event)">
-</mat-paginator>
-
diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.scss b/src/app/ui/enterpriseuser/enterpriseuser.component.scss
index 6171aff..1c67d9c 100644
--- a/src/app/ui/enterpriseuser/enterpriseuser.component.scss
+++ b/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;
diff --git a/src/app/ui/fire-fighting-template/editingFireControl.html b/src/app/ui/fire-fighting-template/editingFireControl.html
index 9d2be33..ec6e028 100644
--- a/src/app/ui/fire-fighting-template/editingFireControl.html
+++ b/src/app/ui/fire-fighting-template/editingFireControl.html
@@ -1,45 +1,47 @@
-<div mat-dialog-title>编辑消防要素模板</div>
+<div class="dialogBox">
+    <div mat-dialog-title>编辑消防要素模板</div>
 
-<div>
-    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
-        <mat-form-field>
-            <input matInput placeholder="消防要素模板名称" [(ngModel)]="fireName"
-             name='name' required>
-        </mat-form-field>
-        <div>
-            <!-- <mat-checkbox>全选</mat-checkbox> -->
-            <label>请选择消防要素</label>
-        </div>
-    
-        <div class="tree">
-            <mat-tree [dataSource]="newDataSource" [treeControl]="treeControl">
-                <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
-                    <button mat-icon-button disabled ></button>
-                    <mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'>
-                        {{node.name}}
-                    </mat-checkbox>
-                </mat-tree-node>
-                
-                <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-                    <button mat-icon-button type="button"
-                            [attr.aria-label]="'toggle ' + node.name">
-                    <mat-icon class="mat-icon-rtl-mirror">
-                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                    </mat-icon>
-                    </button>
-                    <mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'>
-                        {{node.name}}
-                    </mat-checkbox>
-                </mat-tree-node>
-            </mat-tree>
-        </div>
-    
-        <div mat-dialog-actions>
-            <button mat-raised-button color="primary" type="submit" 
-            [disabled]="!form.form.valid">
-                确定
-            </button>
-            <button mat-raised-button mat-dialog-close>取消</button>
-        </div>
-    </form>
-</div>
\ No newline at end of file
+    <div>
+        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+            <mat-form-field>
+                <input matInput placeholder="消防要素模板名称" [(ngModel)]="fireName"
+                 name='name' required>
+            </mat-form-field>
+            <div>
+                <!-- <mat-checkbox>全选</mat-checkbox> -->
+                <label>请选择消防要素</label>
+            </div>
+        
+            <div class="tree">
+                <mat-tree [dataSource]="newDataSource" [treeControl]="treeControl">
+                    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+                        <button mat-icon-button disabled ></button>
+                        <mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'>
+                            {{node.name}}
+                        </mat-checkbox>
+                    </mat-tree-node>
+                    
+                    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+                        <button mat-icon-button type="button"
+                                [attr.aria-label]="'toggle ' + node.name">
+                        <mat-icon class="mat-icon-rtl-mirror">
+                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                        </mat-icon>
+                        </button>
+                        <mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'>
+                            {{node.name}}
+                        </mat-checkbox>
+                    </mat-tree-node>
+                </mat-tree>
+            </div>
+        
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/src/app/ui/fire-fighting-template/fire-fighting-template.component.scss b/src/app/ui/fire-fighting-template/fire-fighting-template.component.scss
index 06f7d26..a1d74b1 100644
--- a/src/app/ui/fire-fighting-template/fire-fighting-template.component.scss
+++ b/src/app/ui/fire-fighting-template/fire-fighting-template.component.scss
@@ -15,4 +15,10 @@ table {
 .tree {
   height: 450px;
   overflow: auto;
-}
\ No newline at end of file
+}
+@media screen and (max-width:1400px){
+  .dialogBox{
+    max-height: 580px;
+    overflow-y: auto;
+  }
+}
diff --git a/src/app/ui/fire-fighting-template/newFireFighting.html b/src/app/ui/fire-fighting-template/newFireFighting.html
index 9d9fa46..2400daa 100644
--- a/src/app/ui/fire-fighting-template/newFireFighting.html
+++ b/src/app/ui/fire-fighting-template/newFireFighting.html
@@ -1,44 +1,46 @@
-<div mat-dialog-title>创建消防要素模板</div>
+<div class="dialogBox">
+    <div mat-dialog-title>创建消防要素模板</div>
 
-<div>
-    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
-        <mat-form-field>
-            <input matInput placeholder="消防要素模板名称" ngModel name='name' required>
-        </mat-form-field>
-        <div>
-            <!-- <mat-checkbox>全选</mat-checkbox> -->
-            <label>请选择消防要素</label>
-        </div>
-    
-        <div class="tree">
-            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-                <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
-                    <button mat-icon-button disabled ></button>
-                    <mat-checkbox (change)='changed($event,node.id)'>
-                        {{node.name}}
-                    </mat-checkbox>
-                </mat-tree-node>
-                
-                <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-                    <button mat-icon-button type="button"
-                            [attr.aria-label]="'toggle ' + node.name">
-                    <mat-icon class="mat-icon-rtl-mirror">
-                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                    </mat-icon>
-                    </button>
-                    <mat-checkbox (change)='changed($event,node.id)'>
-                        {{node.name}}
-                    </mat-checkbox>
-                </mat-tree-node>
-            </mat-tree>
-        </div>
-    
-        <div mat-dialog-actions>
-            <button mat-raised-button color="primary" type="submit" 
-            [disabled]="!form.form.valid">
-                确定
-            </button>
-            <button mat-raised-button mat-dialog-close>取消</button>
-        </div>
-    </form>
-</div>
\ No newline at end of file
+    <div>
+        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+            <mat-form-field>
+                <input matInput placeholder="消防要素模板名称" ngModel name='name' required>
+            </mat-form-field>
+            <div>
+                <!-- <mat-checkbox>全选</mat-checkbox> -->
+                <label>请选择消防要素</label>
+            </div>
+        
+            <div class="tree">
+                <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+                    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+                        <button mat-icon-button disabled ></button>
+                        <mat-checkbox (change)='changed($event,node.id)'>
+                            {{node.name}}
+                        </mat-checkbox>
+                    </mat-tree-node>
+                    
+                    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+                        <button mat-icon-button type="button"
+                                [attr.aria-label]="'toggle ' + node.name">
+                        <mat-icon class="mat-icon-rtl-mirror">
+                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                        </mat-icon>
+                        </button>
+                        <mat-checkbox (change)='changed($event,node.id)'>
+                            {{node.name}}
+                        </mat-checkbox>
+                    </mat-tree-node>
+                </mat-tree>
+            </div>
+        
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/src/app/ui/material-bank/addoriginalcopy.component.html b/src/app/ui/material-bank/addoriginalcopy.component.html
index 90fdbe0..59a9749 100644
--- a/src/app/ui/material-bank/addoriginalcopy.component.html
+++ b/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>
diff --git a/src/app/ui/material-bank/editoriginalcopy.component.html b/src/app/ui/material-bank/editoriginalcopy.component.html
index 788a503..77fcaba 100644
--- a/src/app/ui/material-bank/editoriginalcopy.component.html
+++ b/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>
diff --git a/src/app/ui/material-bank/material-bank.component.scss b/src/app/ui/material-bank/material-bank.component.scss
index 5bdbccb..b7c1698 100644
--- a/src/app/ui/material-bank/material-bank.component.scss
+++ b/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-y: auto;
+    // overflow-x: hidden;
+    
     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;
diff --git a/src/app/ui/unit-information/unit-information.component.scss b/src/app/ui/unit-information/unit-information.component.scss
index 6131605..e9c225a 100644
--- a/src/app/ui/unit-information/unit-information.component.scss
+++ b/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-y: auto;
+    // overflow-x: hidden;
     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;
diff --git a/src/app/ui/usermanagement/usermanagement.component.html b/src/app/ui/usermanagement/usermanagement.component.html
index 13f2fab..1a25e4c 100644
--- a/src/app/ui/usermanagement/usermanagement.component.html
+++ b/src/app/ui/usermanagement/usermanagement.component.html
@@ -1,117 +1,120 @@
-<div class="header">
-  <form #form="ngForm">
-    <div class="queryBox">
-
-      <div class="queryField">
-        <button type="button" mat-raised-button color="primary" (click)='open()'>创建用户</button>
-      </div>
-
-      <div class="queryField">
-        <label style="margin-right: 10px;">用户账号:</label>
-        <input type="text" [(ngModel)]="userLogin" name="userLogin">
-      </div>
-
-      <div class="queryField">
-        <label style="margin-right: 10px;">用户姓名:</label>
-        <input type="text" [(ngModel)]="userName" name="userName">
-      </div>
-
-      <div class="queryField" style="position: relative;">
-        <label style="margin-right: 10px;">所属机构:</label>
-        <input type="text" [(ngModel)]="js" name="userMechanism"  (click)="stopclose($event)" readonly autocomplete="off" (focus)="openorganizationbox()">
-
-        <div class="organizationbox" *ngIf="isorganizationbox">
-          <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
-            <mat-tree [dataSource]="treedataSource" [treeControl]="treeControl">
-              <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
-                <button type="button" mat-icon-button disabled ></button>
-                <li>{{node.name}}</li>
-              </mat-tree-node>
-              <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
-                <button 
-                    type="button" 
-                    mat-icon-button 
-                    matTreeNodeToggle
-                    [attr.aria-label]="'toggle ' + node.name">
-                <mat-icon class="mat-icon-rtl-mirror">
-                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                </mat-icon>
-                </button>
-                <li>{{node.name}}</li>
-              </mat-tree-node>
-          </mat-tree>  
+<div class="box">
+  <div class="header">
+    <form #form="ngForm">
+      <div class="queryBox">
+  
+        <div class="queryField">
+          <button type="button" mat-raised-button color="primary" (click)='open()'>创建用户</button>
+        </div>
+  
+        <div class="queryField">
+          <label style="margin-right: 10px;">用户账号:</label>
+          <input type="text" [(ngModel)]="userLogin" name="userLogin">
+        </div>
+  
+        <div class="queryField">
+          <label style="margin-right: 10px;">用户姓名:</label>
+          <input type="text" [(ngModel)]="userName" name="userName">
         </div>
-        
+  
+        <div class="queryField" style="position: relative;">
+          <label style="margin-right: 10px;">所属机构:</label>
+          <input type="text" [(ngModel)]="js" name="userMechanism"  (click)="stopclose($event)" readonly autocomplete="off" (focus)="openorganizationbox()">
+  
+          <div class="organizationbox" *ngIf="isorganizationbox">
+            <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
+              <mat-tree [dataSource]="treedataSource" [treeControl]="treeControl">
+                <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
+                  <button type="button" mat-icon-button disabled ></button>
+                  <li>{{node.name}}</li>
+                </mat-tree-node>
+                <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
+                  <button 
+                      type="button" 
+                      mat-icon-button 
+                      matTreeNodeToggle
+                      [attr.aria-label]="'toggle ' + node.name">
+                  <mat-icon class="mat-icon-rtl-mirror">
+                      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  </mat-icon>
+                  </button>
+                  <li>{{node.name}}</li>
+                </mat-tree-node>
+            </mat-tree>  
+          </div>
+          
+        </div>
+  
       </div>
-
-    </div>
-    <div style="width: 100%;text-align: center;">
-        <button mat-raised-button color="primary" (click)='initData()'>查询</button>
-        <button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button>
-    </div>
-  </form>
+      <div style="width: 100%;text-align: center;">
+          <button mat-raised-button color="primary" (click)='initData()'>查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button>
+      </div>
+    </form>
+  </div>
+  
+  <table mat-table [dataSource]="dataSource">
+  
+    <ng-container matColumnDef="loginName">
+      <th mat-header-cell *matHeaderCellDef>登录账号</th>
+      <td mat-cell *matCellDef="let element">{{element.name}}</td>
+    </ng-container>
+  
+    <ng-container matColumnDef="realName">
+      <th mat-header-cell *matHeaderCellDef>真实姓名</th>
+      <td mat-cell *matCellDef="let element">{{element.realName}}</td>
+    </ng-container>
+  
+    <ng-container matColumnDef="mechanism">
+      <th mat-header-cell *matHeaderCellDef>所属机构</th>
+      <td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
+    </ng-container>
+  
+    <ng-container matColumnDef="office">
+      <th mat-header-cell *matHeaderCellDef>所属机关</th>
+      <td mat-cell *matCellDef="let element">{{element.organizationOfficeName}}</td>
+    </ng-container>
+  
+    <ng-container matColumnDef="role">
+      <th mat-header-cell *matHeaderCellDef>所属角色</th>
+      <td mat-cell *matCellDef="let element">
+        <span *ngFor="let item of element.roleNames" class="maginleft">{{item}}</span>
+      </td>
+    </ng-container>
+  
+    <ng-container matColumnDef="time">
+      <th mat-header-cell *matHeaderCellDef>创建时间</th>
+      <td mat-cell *matCellDef="let element">
+        {{element.creationTime|date:'yyyy-MM-dd'}}
+      </td>
+    </ng-container>
+  
+    <ng-container matColumnDef="operation">
+      <th mat-header-cell *matHeaderCellDef>操作</th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-raised-button color="primary" class="maginleft" (click)=reset(element.name)>重置密码</button>
+  
+        <button mat-raised-button color="primary" class="maginleft" (click)='openuser(element)'>分配角色</button>
+  
+        <!-- <button mat-raised-button color="primary" class="maginleft" (click)='see(element.name)'>查看</button> -->
+  
+        <button mat-raised-button color="primary" class="maginleft" (click)='edit(element)'>编辑</button>
+  
+        <button mat-raised-button color="primary" class="maginleft" *ngIf=!element.enabled (click)='enable(element)'>启用</button>
+        <button mat-raised-button color="warn" class="maginleft" *ngIf=element.enabled (click)='prohibit(element)'>禁用</button>
+  
+        <button mat-raised-button color="warn" class="maginleft" (click)='delete(element.name)'>删除</button>
+      </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)="chagePage($event)">
+  </mat-paginator>
 </div>
 
-<table mat-table [dataSource]="dataSource">
-
-  <ng-container matColumnDef="loginName">
-    <th mat-header-cell *matHeaderCellDef>登录账号</th>
-    <td mat-cell *matCellDef="let element">{{element.name}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="realName">
-    <th mat-header-cell *matHeaderCellDef>真实姓名</th>
-    <td mat-cell *matCellDef="let element">{{element.realName}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="mechanism">
-    <th mat-header-cell *matHeaderCellDef>所属机构</th>
-    <td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="office">
-    <th mat-header-cell *matHeaderCellDef>所属机关</th>
-    <td mat-cell *matCellDef="let element">{{element.organizationOfficeName}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="role">
-    <th mat-header-cell *matHeaderCellDef>所属角色</th>
-    <td mat-cell *matCellDef="let element">
-      <span *ngFor="let item of element.roleNames" class="maginleft">{{item}}</span>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="time">
-    <th mat-header-cell *matHeaderCellDef>创建时间</th>
-    <td mat-cell *matCellDef="let element">
-      {{element.creationTime|date:'yyyy-MM-dd'}}
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="operation">
-    <th mat-header-cell *matHeaderCellDef>操作</th>
-    <td mat-cell *matCellDef="let element">
-      <button mat-raised-button color="primary" class="maginleft" (click)=reset(element.name)>重置密码</button>
-
-      <button mat-raised-button color="primary" class="maginleft" (click)='openuser(element)'>分配角色</button>
-
-      <!-- <button mat-raised-button color="primary" class="maginleft" (click)='see(element.name)'>查看</button> -->
-
-      <button mat-raised-button color="primary" class="maginleft" (click)='edit(element)'>编辑</button>
-
-      <button mat-raised-button color="primary" class="maginleft" *ngIf=!element.enabled (click)='enable(element)'>启用</button>
-      <button mat-raised-button color="warn" class="maginleft" *ngIf=element.enabled (click)='prohibit(element)'>禁用</button>
-
-      <button mat-raised-button color="warn" class="maginleft" (click)='delete(element.name)'>删除</button>
-    </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)="chagePage($event)">
-</mat-paginator>
 
diff --git a/src/app/ui/usermanagement/usermanagement.component.scss b/src/app/ui/usermanagement/usermanagement.component.scss
index 89057c3..0a59f49 100644
--- a/src/app/ui/usermanagement/usermanagement.component.scss
+++ b/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;
     }