[完善]重点单位管理模块所有的pad端自适应

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

@@ -208,6 +208,7 @@ export class WaterCollectionComponent implements OnInit {
   selectedLiIndex:any 
   clickWaterLi(item,index){
     if(this.selectedLiIndex != index){
+      this.isGisTopBox = false
       this.selectedLiIndex = index
       this.clearData()
       this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型
@@ -559,10 +560,13 @@ export class WaterCollectionComponent implements OnInit {
       this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
       let center
       if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
+        // console.log(1)
         center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
       }else if(this.newPositionMarker && !this.atLastPositionLngLat.x && this.waterData.location.x){
+        // console.log(2)
         center = [this.waterData.location.x, this.waterData.location.y]
       }else{
+        // console.log(3)
         center = this.map.getCenter(); //获取当前地图中心位置
       }
       this.newPositionMarker = new AMap.Marker({
@@ -609,7 +613,6 @@ export class WaterCollectionComponent implements OnInit {
         }
       })//取消
     }
-    
   }
 }
 

src/app/gis-management/left-working/left-working.component.html

@@ -13,16 +13,21 @@
     <span (click)="closeDiv()">关闭</span>
   </div>
 
-  <mat-tab-group style="flex: 1;overflow-y: auto;" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
+  <mat-tab-group style="flex: 1;overflow-y: auto;" [selectedIndex]="selected.value" (selectedIndexChange)="selectedIndexChange($event)">
 
     <mat-tab label="基本信息">
       <ng-template matTabContent>
         <app-basic-info #baseInfo></app-basic-info>
       </ng-template>
     </mat-tab>
-    <mat-tab label="平面图">
+    <mat-tab label="总平面图">
       <ng-template matTabContent>
-        <app-plan-list></app-plan-list>
+        <app-plan-list [planType]="planType"></app-plan-list>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="层平面图">
+      <ng-template matTabContent>
+        <app-plan-list [planType]="planType"></app-plan-list>
       </ng-template>
     </mat-tab>
     <mat-tab label="四周毗邻">

src/app/gis-management/left-working/left-working.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { id } from 'date-fns/locale';
 
 @Component({
   selector: 'app-left-working',
@@ -11,14 +12,23 @@ export class LeftWorkingComponent implements OnInit {
   @Output() onCustomEvent: EventEmitter<any> = new　EventEmitter();//创建实例
   @ViewChild( 'baseInfo',{static: false} ) baseInfo:any //基本信息子组件
   constructor() { }
-
+  planType //平面图类型 是总平面图还是层平面图
   ngOnInit(): void {
 
   }
   
   selected = new FormControl(0); //选项卡 实例
   selectCompany:any = { name: null, id: null } //选择单位
-
+  selectedIndexChange(e){
+    this.selected.setValue(e)
+    // console.log(6666,e)
+    if(e == 1){
+      this.planType = 'zong'
+    }else if(e == 2){
+      this.planType = 'ceng'
+    }
+  }
+  
   //父组件 点击基本信息时
   selectBaseInfo (e) {
     if (this.selectCompany.id != e.id) { //选择单位 更改时

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

@@ -1,5 +1,5 @@
 <div class="planlist" id="planlist">
-    <div style="margin: 10px 0;">
+    <div style="margin: 10px 0;" *ngIf="planType == 'zong'">
         <mat-accordion>
             <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
               <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;">
@@ -18,9 +18,10 @@
             </mat-expansion-panel>
         </mat-accordion>
     </div>
-    <div *ngFor="let item of allBuildings;let key=index"  style="margin-bottom: 10px;">
+    <div *ngIf="planType == 'ceng'">
+      <div *ngFor="let item of allBuildings;let key=index"  style="margin-bottom: 10px;">
         <mat-accordion >
-            <mat-expansion-panel  style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+            <mat-expansion-panel [expanded]='key == 0' style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
               <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;">
                 <mat-panel-title>
                   {{item.name}}
@@ -38,5 +39,7 @@
               </ng-template>
             </mat-expansion-panel>
         </mat-accordion>
+      </div>
     </div>
+    
 </div>

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

@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { HttpClient} from '@angular/common/http';
+import { Component, Inject, OnInit, Renderer2, ViewChild,Input } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
@@ -10,7 +10,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 })
 export class PlanListComponent implements OnInit {
   constructor(private http: HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog) { }
-  
+  @Input() public planType: any;//data名字根据引用场景自定义
   //单位相关数据
   unitId:any =  sessionStorage.getItem('unitId')
 

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

@@ -9,6 +9,7 @@
 //图片外部div
 .allImgs {
   display: flex;
+  height: 100%;
   overflow-y: auto;
   flex-direction: row;
   flex-wrap: wrap;
@@ -33,23 +34,43 @@
   }
 }
 
-//预览图片
-.previewImgBox {
-  width: 1500px;
-  height: 700px;
-  text-align: center;
-  img{
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    height: 100%;}
-}
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
-}
+
 //预览图片旋转角度
 .rotateA {transform: rotate(90deg) scale(0.75);}
 .rotateB {transform: rotate(180deg)}
-.rotateC {transform: rotate(270deg) scale(0.75);}
+.rotateC {transform: rotate(270deg) scale(0.75);}
+
+//预览图片
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
+  //预览图片
+  .previewImgBox {
+    width: 1350px;
+    height: 700px;
+    text-align: center;
+    img{
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;}
+  }
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
+}
+
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 600px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

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

@@ -67,8 +67,7 @@ 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});
       dialogRef.afterClosed().subscribe();
     } else{
       const config = new MatSnackBarConfig();

src/app/key-unit/allaround/imgdetails.component.html

@@ -1,18 +1,21 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-        <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
-          <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
-           [attr.data-src]="item">
-           <div class="swiper-lazy-preloader"></div>
-        </div>
-    </div>
 
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+          <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+            <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
+             [attr.data-src]="item">
+             <div class="swiper-lazy-preloader"></div>
+          </div>
+      </div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/fire-fighting-device-look/fire-fighting-device.component.scss

@@ -115,11 +115,10 @@ textarea {
 }
 
 
-
 //img图片列表页面
 .imageList {
-  width: 100%;
-  height: 100%;
+  width: 1450px;
+  height: 810px;
   overflow-y: auto;
   .imageListBox {
     width: 100%;
@@ -143,3 +142,16 @@ textarea {
     }
   }
 }
+
+
+@media screen and (max-width:1300px){
+  .imageList{
+    width: 920px;
+    height: 600px;
+    .imageListBox {
+      .imagesBox {
+        width: 270px;
+      }
+    }
+  }
+}

src/app/key-unit/fire-fighting-device-look/fire-fighting-device.component.ts

@@ -448,7 +448,7 @@ export class FireFightingDeviceLookComponent 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';
@@ -474,7 +474,7 @@ export class FireFightingDeviceLookComponent 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';
@@ -509,7 +509,7 @@ export class FireFightingDeviceLookComponent 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';
@@ -536,7 +536,7 @@ export class FireFightingDeviceLookComponent implements OnInit {
             });
         });
         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/key-unit/fire-fighting-device-look/imagesdata.component.ts

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

src/app/key-unit/fire-fighting-device-look/previewImg.html

@@ -1,17 +1,19 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
-        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
-        <div class="swiper-lazy-preloader"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+          <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+          <div class="swiper-lazy-preloader"></div>
+        </div>
       </div>
-    </div>
-
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/fire-fighting-device/fire-fighting-device.component.scss

@@ -118,8 +118,8 @@ textarea {
 
 //img图片列表页面
 .imageList {
-  width: 100%;
-  height: 100%;
+  width: 1450px;
+  height: 810px;
   overflow-y: auto;
   .imageListBox {
     width: 100%;
@@ -143,3 +143,17 @@ textarea {
     }
   }
 }
+
+
+@media screen and (max-width:1300px){
+  .imageList{
+    width: 920px;
+    height: 600px;
+    .imageListBox {
+      .imagesBox {
+        width: 270px;
+      }
+    }
+  }
+}
+

src/app/key-unit/fire-fighting-device/fire-fighting-device.component.ts

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

src/app/key-unit/fire-fighting-device/imagesdata.component.ts

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

src/app/key-unit/fire-fighting-device/previewImg.html

@@ -1,17 +1,19 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
-        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
-        <div class="swiper-lazy-preloader"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+          <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+          <div class="swiper-lazy-preloader"></div>
+        </div>
       </div>
-    </div>
-
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/key-site-look/key-site.component.scss

@@ -42,18 +42,37 @@ table {
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
 //预览图片
-.previewImgBox {
-  width: 1500px;
-  height: 700px;
-  text-align: center;
-  img{
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    height: 100%;}
-}
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
+  //预览图片
+  .previewImgBox {
+    width: 1350px;
+    height: 700px;
+    text-align: center;
+    img{
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;
+    }
+  }
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
 }
+
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 600px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

src/app/key-unit/key-site-look/key-site.component.ts

@@ -142,8 +142,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/key-unit/key-site-look/keyimgdetail.component.ts

@@ -1,17 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import Swiper from 'swiper';
-
-
-
-@Component({
-    selector: 'keyimgdetail',
-    templateUrl: './keyimgdetail.component.html',
-    styleUrls: ['./key-site.component.scss']
-  })
-export class KeyImgDetail {
-
-}
-  

src/app/key-unit/key-site-look/keysiteimgs.component.html

@@ -1,18 +1,20 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-        <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
-          <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
-          [attr.data-src]="item">
-          <div class="swiper-lazy-preloader"></div>
-        </div>
-    </div>
-
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+          <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+            <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
+            [attr.data-src]="item">
+            <div class="swiper-lazy-preloader"></div>
+          </div>
+      </div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

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

@@ -41,18 +41,36 @@ table {
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
 //预览图片
-.previewImgBox {
-  width: 1500px;
-  height: 700px;
-  text-align: center;
-  img{
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    height: 100%;}
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
+  //预览图片
+  .previewImgBox {
+    width: 1350px;
+    height: 700px;
+    text-align: center;
+    img{
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;}
+  }
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
 }
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
+
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 600px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
 }

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

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

src/app/key-unit/key-site/keyimgdetail.component.ts

@@ -1,17 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import Swiper from 'swiper';
-
-
-
-@Component({
-    selector: 'keyimgdetail',
-    templateUrl: './keyimgdetail.component.html',
-    styleUrls: ['./key-site.component.scss']
-  })
-export class KeyImgDetail {
-
-}
-  

src/app/key-unit/key-site/keysiteimgs.component.html

@@ -1,18 +1,21 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-        <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
-          <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
-          [attr.data-src]="item">
-          <div class="swiper-lazy-preloader"></div>
-        </div>
-    </div>
 
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+          <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+            <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
+            [attr.data-src]="item">
+            <div class="swiper-lazy-preloader"></div>
+          </div>
+      </div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/key-unit.module.ts

@@ -59,7 +59,6 @@ import {ImgDetails} from './allaround/imgdetails.component'
 import { RealisticPictureComponent, previewImg, addRealPicture, editRealPicture } from './realistic-picture/realistic-picture.component';
 import { FileUploadModule } from 'ng2-file-upload';
 import {KeySiteComponent} from './key-site/key-site.component'
-import {KeyImgDetail} from './key-site/keyimgdetail.component'
 import {KeySiteImgs} from './key-site/keysiteimgs.component'
 import {UploadingCADComponent,readFile,editFile} from './uploading-cad/uploading-cad.component'
 import { KeySiteLookComponent } from './key-site-look/key-site.component';
@@ -87,7 +86,7 @@ import { upname } from './key-unit-management/key-unit-management.component';
 import { companyAuditResult } from './key-unit-management/key-unit-management.component'
 
 @NgModule({
-  declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent,upname,companyAuditResult,StatisticsOfFireFightingFacilities],
+  declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent,upname,companyAuditResult,StatisticsOfFireFightingFacilities],
   exports:[ViewUnitDetailsPlanComponent],
   imports: [
     CommonModule,

src/app/key-unit/realistic-picture-look/previewImg.html

@@ -1,17 +1,19 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
-        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
-        <div class="swiper-lazy-preloader"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+          <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+          <div class="swiper-lazy-preloader"></div>
+        </div>
       </div>
-    </div>
-
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/realistic-picture-look/realistic-picture.component.scss

@@ -154,21 +154,37 @@
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
 
-
-
 //预览图片
-.previewImgBox {
-  width: 1500px;
-  height: 700px;
-  text-align: center;
-  img{
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    height: 100%;}
-}
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
+  //预览图片
+  .previewImgBox {
+    width: 1350px;
+    height: 700px;
+    text-align: center;
+    img{
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;}
+  }
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
 }
+
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 600px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

src/app/key-unit/realistic-picture-look/realistic-picture.component.ts

@@ -122,8 +122,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/key-unit/realistic-picture/previewImg.html

@@ -1,17 +1,19 @@
-<div mat-dialog-title>图片详情</div>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
-        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
-        <div class="swiper-lazy-preloader"></div>
+<div class="imgDiaLogBox">
+  <div mat-dialog-title>图片详情</div>
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+          <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+          <div class="swiper-lazy-preloader"></div>
+        </div>
       </div>
-    </div>
-
-    <!-- 如果需要导航按钮 -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+  
+      <!-- 如果需要导航按钮 -->
+      <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>
-
-<div class="previewImgBottom">
-  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
-</div>

src/app/key-unit/realistic-picture/realistic-picture.component.scss

@@ -157,18 +157,36 @@
 
 
 //预览图片
-.previewImgBox {
-  width: 1500px;
-  height: 700px;
-  text-align: center;
-  img{
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    height: 100%;}
-}
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
+.imgDiaLogBox{
+  width: 1450px;
+  height: 810px;
+  //预览图片
+  .previewImgBox {
+    width: 1350px;
+    height: 700px;
+    text-align: center;
+    img{
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;}
+  }
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
 }
+
+@media screen and (max-width:1300px){
+  .imgDiaLogBox{
+    width: 920px;
+    height: 600px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+}

src/app/key-unit/realistic-picture/realistic-picture.component.ts

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

src/app/key-unit/router-gis/router-gis.component.scss

@@ -106,6 +106,12 @@
     }
   }
 }
+@media screen and (max-width:1400px){
+  .routeGIS{
+    max-height: 520px;
+  }
+}
+
 .routeGISPublicIcon { position: absolute; color: #fff; font-size: 14px; } //导航 定位部分公共样式
 //选择路线 方案 button
 .routeType { margin: 0 10px; outline: none; border: none; background-color: transparent; font-size: 14px; font-weight: 550; color: rgb(122, 116, 116); }

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

@@ -69,7 +69,7 @@
       <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" style="overflow: hidden;display: flex;flex-direction: column;">
+        <div class="planarGraph" style="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>

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

@@ -47,7 +47,7 @@
       <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" style="overflow: hidden;display: flex;flex-direction: column;">
+        <div class="planarGraph" style="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>
@@ -56,7 +56,7 @@
               <mat-icon >add</mat-icon>
             </label>
           </div>
-          <div [hidden]="!togglePlane" style="flex: 1;overflow-y: auto;">
+          <div [hidden]="!togglePlane" style="flex: 1;">
               <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">