[完善]gis管理页面响应式布局

src/app/gis-management/allaround/allaround.component.html

@@ -7,83 +7,6 @@
  * @LastEditTime: 2020-11-26 17:11:54
 -->
 <div class="content" id="allaround">
-  <!-- <mat-tab-group style="height: 100%;">
-    <mat-tab label="单位毗邻">
-      <div class="allImgs">
-
-        <div class="imgBox" *ngFor="let item of AllAdjoining" >
-          <div class="fixedImg" *ngIf="item.imageUrls.length">
-            <img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
-          </div>
-          <div class="fixedImg" *ngIf="!item.imageUrls.length">
-            <img src="../../../assets/images/upload.png" (click)='imgdetails(item.imageUrls)'>
-          </div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">建筑物名称:</label>
-            <label style="margin-left: 25px;">{{item.name}}</label>
-          </div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">建筑物方向:</label>
-            <label style="margin-left: 25px;">
-              <label *ngIf="item.direction==0">东</label>
-              <label *ngIf="item.direction==1">西</label>
-              <label *ngIf="item.direction==2">南</label>
-              <label *ngIf="item.direction==3">北</label>
-              <label *ngIf="item.direction==4">东南</label>
-              <label *ngIf="item.direction==5">西南</label>
-              <label *ngIf="item.direction==6">东北</label>
-              <label *ngIf="item.direction==7">西北</label>
-            </label>
-          </div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">图片数量:</label>
-            <label style="margin-left: 25px;" *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</label>
-            <label style="margin-left: 25px;" *ngIf="!item.imageUrls.length">0张</label>
-          </div>
-        </div>
-
-        <p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!AllAdjoining.length">暂无数据,请前往平面图进行相关数据录入</p>
-      </div>
-    </mat-tab>
-
-    <mat-tab label="{{item.name}}" *ngFor="let item of AllBuilding">
-      <div class="allImgs">
-
-        <div class="imgBox" *ngFor="let items of item.allImgs">
-          <div class="fixedImg" *ngIf="items.imageUrls.length">
-            <img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'>
-          </div>
-          <div class="fixedImg" *ngIf="!items.imageUrls.length"><img src="../../../assets/images/upload.png" (click)='imgdetails(items.imageUrls)'></div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">建筑物名称:</label>
-            <label style="margin-left: 25px;">{{items.name}}</label>
-          </div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">建筑物方向:</label>
-            <label style="margin-left: 25px;">
-              <label *ngIf="items.direction==0">东</label>
-              <label *ngIf="items.direction==1">西</label>
-              <label *ngIf="items.direction==2">南</label>
-              <label *ngIf="items.direction==3">北</label>
-              <label *ngIf="items.direction==4">东南</label>
-              <label *ngIf="items.direction==5">西南</label>
-              <label *ngIf="items.direction==6">东北</label>
-              <label *ngIf="items.direction==7">西北</label>
-            </label>
-          </div>
-          <div style="margin-top: 5px;">
-            <label style="margin-left: 25px;">图片数量:</label>
-            <label style="margin-left: 25px;" *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</label>
-            <label style="margin-left: 25px;" *ngIf="!items.imageUrls.length">0张</label>
-          </div>
-        </div>
-
-        <p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!item.allImgs.length">暂无数据,请前往平面图进行相关数据录入</p>
-      </div>
-    </mat-tab>
-
-  </mat-tab-group> -->  
-
   <div style="margin: 10px 0;">
     <mat-accordion class="tableContent">
       <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
@@ -92,8 +15,6 @@
             单位毗邻
           </mat-panel-title>
         </mat-expansion-panel-header >
-  
-  
         <div class="colum" *ngFor="let item of AllAdjoining">
           <div class="left">
             <img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
@@ -122,8 +43,6 @@
             </div>
           </div>  
         </div>
-  
-      
       </mat-expansion-panel>
     </mat-accordion>
   </div>

src/app/gis-management/allaround/allaround.component.scss

@@ -32,7 +32,6 @@
     flex-direction: row;
     .left{
       width: 45%;
-      //height: 140px;
       img{
         width: 140px;
         height: 100px;
@@ -40,6 +39,11 @@
         cursor:pointer;
       }
     }
+    @media screen and (min-width:1000px) and (max-width:1400px){
+      .left{
+        width: 57%;
+      }
+    }
     .right{
       width: 40%;
       margin-top: 4%;
@@ -84,8 +88,13 @@
     }
   }
 }
-
 //预览图片
+.bigimgbox{
+  width: 1500px;
+  height: 900px;
+  display: flex;
+  align-items: center;
+}
 .previewImgBox {
   width: 1500px;
   height: 700px;
@@ -105,3 +114,15 @@
 .rotateA {transform: rotate(90deg) scale(0.75);}
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
+@media screen and (min-width:1000px) and (max-width:1400px){
+  .bigimgbox{
+    width:900px;
+    height: 580px;
+  }
+  //预览图片
+  .previewImgBox {
+    width: 800px;
+    height: 500px;
+    text-align: center;
+  }
+}

src/app/gis-management/allaround/allaround.component.ts

@@ -75,8 +75,8 @@ export class AllaroundComponent implements OnInit {
     if (e.length && e!=null) {
       let data = e
       const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
-        width: '1600px',
-        height:'900px',data});
+      data,
+      id:'gisImgDialog'});
       dialogRef.afterClosed().subscribe();
     } else{
       const config = new MatSnackBarConfig();

src/app/gis-management/allaround/imgdetails.component.html

@@ -1,4 +1,6 @@
-<div mat-dialog-title>图片详情</div>
+
+<div class="bigimgbox">
+  <!-- <div mat-dialog-title>图片详情</div> -->
   <div class="swiper-container">
       <div class="swiper-wrapper">
           <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
@@ -12,7 +14,8 @@
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
   </div>
-
+<!--   
   <div class="previewImgBottom">
     <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+  </div> -->
 </div>

src/app/gis-management/fire-facilities/fire-facilities.component.scss

@@ -194,8 +194,9 @@
   
   //img图片列表页面
   .imageList {
-    width: 100%;
-    height: 100%;
+    width:1350px;
+    height:700px;
+    
     overflow-y: auto;
     .imageListBox {
       width: 100%;
@@ -219,4 +220,14 @@
       }
     }
   }
-  
+  @media screen and (max-width:1300px){
+    .imageList{
+      width:911px;
+      height:570px;
+      .imageListBox {
+        .imagesBox{
+          width:275px;
+        }
+      }
+    }
+  }

src/app/gis-management/fire-facilities/fire-facilities.component.ts

@@ -420,7 +420,7 @@ export class FireFacilitiesComponent implements OnInit {
           }); //newDate
   
           if (data.images.length) {
-            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+            let dialogRef = this.dialog.open(ImagesData2,{data}); //打开图片弹窗
           } else {
             const config = new MatSnackBarConfig();
             config.verticalPosition = 'top';
@@ -446,7 +446,7 @@ export class FireFacilitiesComponent implements OnInit {
                 data.images.push(elements)} });
           });
           if (data.images.length) {
-            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+            let dialogRef = this.dialog.open(ImagesData2,{data}); //打开图片弹窗
           } else {
             const config = new MatSnackBarConfig();
             config.verticalPosition = 'top';

src/app/gis-management/fire-facilities/imagesdata.component.ts

@@ -34,8 +34,7 @@ export class ImagesData2 {
       allImages:this.data.images,
       imgIndex: index}
     let dialogRef = this.dialog.open(previewBigImg2,
-      {width: '1600px',
-      height:'900px',data});
+      {data});
   }
 
 }

src/app/gis-management/fire-facilities/previewImg.html

@@ -6,6 +6,7 @@
  * @LastEditors: sueRimn
  * @LastEditTime: 2020-11-27 08:47:38
 -->
+<div class="imgDiaLogBox">
   <div mat-dialog-title>图片详情</div>
   <div class="swiper-container">
       <div class="swiper-wrapper">
@@ -23,3 +24,4 @@
   <div class="previewImgBottom">
     <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
   </div>
+</div>

src/app/gis-management/fire-facilities/realistic-picture.component.scss

@@ -156,9 +156,13 @@
 
 
 
+
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
   //预览图片
   .previewImgBox {
-  width: 1500px;
+    width: 1350px;
     height: 700px;
     text-align: center;
     img{
@@ -172,3 +176,17 @@
     height: 30px;
     margin: 20px auto;
   }
+}
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 588px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}
+

src/app/gis-management/gis-labeling/gis-labeling.component.html

@@ -81,9 +81,9 @@
   
   <!-- 左侧 -->
   <div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}">
-    <app-left-working (onCustomEvent)="closeDiv()" #appLeft></app-left-working>
+    <app-left-working style="width: 100%;height: 100%;" (onCustomEvent)="closeDiv()" #appLeft></app-left-working>
   </div>
-  <img *ngIf="showLeftDiv" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt="">
+  <img *ngIf="showLeftDiv" id="leftHide" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt="">
   <img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt="">
   <!-- 左侧 -->
 

src/app/gis-management/gis-labeling/gis-labeling.component.scss

@@ -1,8 +1,8 @@
 .content {
   width: 100%;
   height: 100%;
-  min-width: 1024px;
-  min-height: 768px;
+  // min-width: 1024px;
+  // min-height: 768px;
   box-sizing: border-box;
   padding: 1px;
   position: relative;
@@ -22,6 +22,7 @@
   box-sizing: border-box;
   padding: 3px;
 }
+
 //左侧工作区 显隐图标
 .publicButton {
   display: block;
@@ -37,6 +38,7 @@
 .leftHide {
   left: 400px;
 }
+
 .leftShow {
   left: 0px;;
 }
@@ -364,3 +366,13 @@
     outline-color: #FFFFFF;
   }
 }
+
+
+@media screen and (min-width:1200px) and (max-width:1300px){
+  .leftDiv {
+    width: 328px;
+  }
+  #leftHide{
+    left: 328px;
+  }
+}

src/app/gis-management/gis-labeling/gis-labeling.component.ts

@@ -810,8 +810,7 @@ export class GisLabelingComponent implements OnInit {
         this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件	
         this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
       })
-
-      this.map.setZoomAndCenter(13,marker._position); //设置地图中心点
+      this.map.setZoomAndCenter(13,[marker._position[0],marker._position[1]+0.015]); //设置地图中心点
       this.allCompany = []
     } else {
       const config = new MatSnackBarConfig();

src/app/gis-management/key-site-look/key-site.component.scss

@@ -121,9 +121,12 @@ table {
 .rotateA {transform: rotate(90deg) scale(0.75);}
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
   //预览图片
   .previewImgBox {
-  width: 1500px;
+    width: 1350px;
     height: 700px;
     text-align: center;
     img{
@@ -137,3 +140,16 @@ table {
     height: 30px;
     margin: 20px auto;
   }
+}
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 588px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

src/app/gis-management/key-site-look/key-site.component.ts

@@ -159,8 +159,7 @@ export class KeySiteLookComponent implements OnInit {
     if (e.length) {
       let data = e
       const dialogRef = this.dialog.open(KeySiteImgs2, {//调用open方法打开对话框并且携带参数过去
-        width: '1600px',
-        height:'900px',data});
+      data});
       dialogRef.afterClosed().subscribe();
     } else {
       const config = new MatSnackBarConfig();

src/app/gis-management/key-site-look/keysiteimgs.component.html

@@ -1,3 +1,5 @@
+
+<div class="imgDiaLogBox">
   <div mat-dialog-title>图片详情</div>
   <div class="swiper-container">
       <div class="swiper-wrapper">
@@ -16,3 +18,4 @@
   <div class="previewImgBottom">
     <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
   </div>
+</div>

src/app/gis-management/plan-list/openPlanTool.html

@@ -1,3 +1,3 @@
-<div style="width: 100%;height: 100%;">
+<div class="divbox">
     <app-collection-tools-plan #plan></app-collection-tools-plan>
 </div>

src/app/gis-management/plan-list/openPlanTool.scss

@@ -0,0 +1,10 @@
+.divbox{
+    width: 1500px;
+    height:850px
+}
+@media screen and (min-width:1000px) and (max-width:1400px){
+    .divbox{
+        width: 950px;
+        height: 618px;
+    }
+}

src/app/gis-management/plan-list/plan-list.component.scss

@@ -27,7 +27,6 @@
         div{
             width: 110px;
             height: 110px;
-            
             img{
                 width: 100%;
                 height: 100%;
@@ -41,4 +40,9 @@
             width: 110px;
         }
     }
+    @media screen and (min-width:1200px) and (max-width:1300px){
+        .contantitem{
+            margin-right: 30px;
+        }
+    }
 }

src/app/gis-management/plan-list/plan-list.component.ts

@@ -51,8 +51,6 @@ export class PlanListComponent implements OnInit {
     sessionStorage.setItem("companyId",this.unitId)
     let data = {select: item, key: index, allBuildings: this.allBuildings}
     let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去
-      width: '1500px',
-      height:'850px',
       id:'openPlanToolDialog',
       data
     });

src/app/gis-management/realistic-picture-look/previewImg.html

@@ -1,3 +1,4 @@
+<div class="imgDiaLogBox">
   <div mat-dialog-title>图片详情</div>
   <div class="swiper-container">
       <div class="swiper-wrapper">
@@ -15,3 +16,4 @@
   <div class="previewImgBottom">
     <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
   </div>
+</div>

src/app/gis-management/realistic-picture-look/realistic-picture.component.scss

@@ -84,6 +84,16 @@
       margin-left: 5%;
       margin-top: 7%;
     }
+    @media screen and (max-width:1300px){
+      img{
+        width: 138px;
+        height: 100px;
+        margin-left: 5%;
+        margin-top: 7%;
+      }
+    }
+    
+    
     input{
       width: 80%;
       border: none;
@@ -211,9 +221,12 @@
 
 
 
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
   //预览图片
   .previewImgBox {
-  width: 1500px;
+    width: 1350px;
     height: 700px;
     text-align: center;
     img{
@@ -227,3 +240,16 @@
     height: 30px;
     margin: 20px auto;
   }
+}
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 588px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

src/app/gis-management/realistic-picture-look/realistic-picture.component.ts

@@ -129,8 +129,7 @@ export class RealisticPictureLookComponent implements OnInit {
         allImages:this.allImages,
         imgIndex: index}
       let dialogRef = this.dialog.open(previewImg3,
-        {width: '1600px',
-        height:'900px',data});
+        {data});
       dialogRef.afterClosed().subscribe();   
     }
 

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

@@ -47,16 +47,16 @@
       <div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
         <div class="leftDragDiv"  (mousedown)="leftDivMouseDown($event)"></div>
         <!-- 平面图 -->
-        <div class="planarGraph">
+        <div class="planarGraph" style="overflow: hidden;display: flex;flex-direction: column;">
           <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
             <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
             <label class="overflowText" style="font-weight: 550;">平面图</label>
-            <label class="hover" *ngIf="isEditPattern && pattern">
-              <mat-icon (click)='foundPanel($event)'>add</mat-icon>
+            <label class="hover" *ngIf="isEditPattern && pattern" (click)='foundPanel($event)'>
+              <mat-icon >add</mat-icon>
             </label>
           </div>
-          <div [hidden]="!togglePlane" >
+          <div [hidden]="!togglePlane" style="flex: 1;overflow-y: auto;">
               <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
               <label class="overflowText" style="display:inline-block; max-width: 160px;"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label>
               <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">

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

@@ -139,7 +139,7 @@
     border: 1px solid #E6EAEE;
     width: 235px;
     left: 0;
-    z-index: 111;
+    z-index: 112;
     .leftDragDiv{
       position: absolute;
       right: 0;
@@ -156,6 +156,15 @@
     border: 1px solid #E6EAEE;
     width: 235px;
     right: 0;
+  }
+  @media screen and (min-width:1200px) and (max-width:1300px){
+    .functionalDomainLeft{
+      min-width: 195px;
+      width: 195px;
+    }
+    .functionalDomainRight{
+      width: 195px;
+    }
   }
     //右边导航栏显示隐藏
   .togglePanel2 {

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

@@ -24,7 +24,10 @@
 .hover {
   width: 18px;
   height: 18px;
-  margin-left: 90px;
+  // margin-left: 90px;
+  position: absolute;
+  right: 26px;
+  z-index:112;
   border: 1px solid #999;
   border-radius: 3px;
   .mat-icon {font-size: 18px; color: #999;}

src/assets/css/newStyle.css

@@ -531,3 +531,8 @@ z-index:
 */
 
 /*# sourceMappingURL=style.css.map */
+@media screen and (min-width:1200px) and (max-width:1300px){
+  #chartMap{
+    padding-left: 25px;
+  }
+}

src/styles.scss

@@ -139,7 +139,7 @@ table td.mat-footer-cell:last-of-type{
 	
 }
 //弹出框样式取消padding
-#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2{
+#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2,#gisImgDialog{
 	padding: 0;
 }