[完善]除统计分析页面其他所有页面pad端适配以及ui优化

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { PlanPassComponent } from '../app/plan-audit/plan-pass/plan-pass.compone
 import {AuthGuard} from './auth.guard'
 import {MTokenK1Component} from './m-token-k1/m-token-k1.component' //K1秘钥
 import {ViewUnitDetailsPlanComponent} from './key-unit/view-unit-details-plan/view-unit-details-plan.component'
+import { TestComponent } from './test/test.component';
 
 
 const routes: Routes = [
@@ -40,6 +41,8 @@ const routes: Routes = [
   { path:'keyUnit/viewunitinfoplans', component:ViewUnitDetailsPlanComponent,canActivate: [AuthGuard],},
   {path:'getNoMToken',component:MTokenK1Component, canActivate: [AuthGuard],}, //K1秘钥验证失败是跳转页面
   { path: 'planAudit/planpass', component: PlanPassComponent },
+  { path: 'test', component: TestComponent },
+
 
 ];
 

src/app/app.component.ts

@@ -37,7 +37,21 @@ export class AppComponent {
         this.token.startUp()
       })
     } 
-
+    // console.log(1234,document.documentElement.clientWidth)
+    function addMeta(name,content){//手动添加mate标签
+
+      let meta = document.createElement('meta');
+      
+          meta.content=content;
+      
+          meta.name=name;
+      
+          document.getElementsByTagName('head')[0].appendChild(meta);
+      
+      }
+    if(document.documentElement.clientWidth < 800){
+      addMeta('viewport','initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no,uc-fitscreen=yes,viewport-fit=cover')
+    }
   }
 
 

src/app/app.module.ts

@@ -22,12 +22,14 @@ import { CountdownModule } from 'ngx-countdown'; //倒计时插件
 import { GISManagementModule } from './gis-management/gis-management.module';
 import { DataCollectionModule } from './data-collection/data-collection.module';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TestComponent } from './test/test.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    MTokenK1Component
+    MTokenK1Component,
+    TestComponent
   ],
   imports: [
     BrowserModule,

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

@@ -105,7 +105,10 @@
                 </div>
             </div>
         </div>
-        <div class="detailsbox" *ngIf="selectedFireForceLevel != null">
+        <div class="detailsbox" *ngIf="selectedFireForceLevel != null" [ngClass]="{'noHeight': isPutDown}">
+            <div class="putDown" (click)="putDown()">
+                <img src="/assets/images/向下收起.png" alt="">
+            </div>
             <div class="masklayer" *ngIf="isMasklayer">
                 <mat-spinner [diameter]='30'></mat-spinner>
                 <span>请等待...</span>

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

@@ -270,7 +270,15 @@
         width: 100%;
         height:500px;
         position: relative;
+        transition: height 0.5s;
+        .putDown{
+            position: absolute;
+            right: 0;
+            top: -40px;
+            cursor: pointer;
+        }
         .tabsbox{
+            margin-top: 10px;
             width: 100%;
             height: 40px;
             overflow: hidden;
@@ -515,6 +523,10 @@
             }
         }
     }
+    .noHeight{
+        height: 0px;
+        transition: height 0.5s;
+    }
 }
 
 
@@ -611,7 +623,9 @@
         }
         .detailsbox{
             height:338px;
+            transition: height 0.5s;
             .tabsbox{
+                margin-top: 5px;
                 height: 38px;
                 line-height: 38px;
                 .tabs{
@@ -642,6 +656,7 @@
             }
             .contant{
                 height:300px;
+                
                 p{
                     padding-left: 20px;
                     font-size: 14px;
@@ -672,5 +687,9 @@
                 }
             }
         }
+        .noHeight{
+            height: 0px;
+            transition: height 0.5s;
+        }
     }
 }

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

@@ -1163,6 +1163,12 @@ export class FireForceComponent implements OnInit {
       dialogRef.afterClosed().subscribe();
     }
   }
+
+  //收起展开列表
+  isPutDown:boolean = false
+  putDown(){
+    this.isPutDown = !this.isPutDown
+  }
 }
 
 

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

@@ -83,7 +83,7 @@
                 </div>
             </div>
         </div>
-        <div class="detailsbox" *ngIf="LinkageForceDetailInfo.linkageForceType || LinkageForceDetailInfo.linkageForceType == '0'">
+        <div class="detailsbox" [ngClass]="{'noHeight': isPutDown}" *ngIf="LinkageForceDetailInfo.linkageForceType || LinkageForceDetailInfo.linkageForceType == '0'">
             <div class="masklayer" *ngIf="isMasklayer">
                 <mat-spinner [diameter]='30'></mat-spinner>
                 <span>请等待...</span>
@@ -97,6 +97,9 @@
                 <mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar>
                 <span>下载中...({{progressBarValue}}%)</span>
             </div>
+            <div class="putDown" (click)="putDown()">
+                <img src="/assets/images/向下收起.png" alt="">
+            </div>
             <div class="tabsbox">
                 <div class="tabs">
                     <div (click)="selectedTab(1)" [ngClass]="{'selectedBtn': tabIndex == 1}">

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

@@ -233,6 +233,13 @@
         width: 100%;
         height:500px;
         position: relative;
+        transition: height 0.5s;
+        .putDown{
+            position: absolute;
+            right: 0;
+            top: -40px;
+            cursor: pointer;
+        }
         .tabsbox{
             width: 100%;
             height: 40px;
@@ -242,6 +249,7 @@
             display: flex;
             justify-content: space-between;
             font-size: 15px;
+            margin-top: 10px;
             .tabs{
                 div{
                     float: left;
@@ -479,6 +487,10 @@
             }
         }
     }
+    .noHeight{
+        height: 0px;
+        transition: height 0.5s;
+    }
 }
 
 
@@ -598,9 +610,11 @@
         }
         .detailsbox{
             height:338px;
+            transition: height 0.5s;
             .tabsbox{
                 height: 38px;
                 line-height: 38px;
+                margin-top: 5px;
                 .tabs{
                     div{
                         width: 90px;
@@ -659,5 +673,9 @@
                 }
             }
         }
+        .noHeight{
+            height: 0px;
+            transition: height 0.5s;
+        }
     }
 }

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

@@ -896,6 +896,12 @@ export class LinkageForcesComponent implements OnInit {
     }
   }
 
+
+  //收起展开列表
+  isPutDown:boolean = false
+  putDown(){
+    this.isPutDown = !this.isPutDown
+  }
 }
 
 

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

@@ -70,7 +70,10 @@
                 </div>
             </div>
         </div>
-        <div class="detailsbox" *ngIf="selectedWaterTypeIndex != null">
+        <div class="detailsbox" *ngIf="selectedWaterTypeIndex != null" [ngClass]="{'noHeight': isPutDown}">
+            <div class="putDown" (click)="putDown()">
+                <img src="/assets/images/向下收起.png" alt="">
+            </div>
             <div class="tabsbox">
                 <div class="tabs">
                     <div class="selectedBtn">

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

@@ -217,6 +217,14 @@
     .detailsbox{
         width: 100%;
         height:500px;
+        transition: height 0.5s;
+        position: relative;
+        .putDown{
+            position: absolute;
+            right: 0;
+            top: -40px;
+            cursor: pointer;
+        }
         .tabsbox{
             width: 100%;
             height: 40px;
@@ -224,6 +232,7 @@
             display: flex;
             justify-content: space-between;
             font-size: 15px;
+            margin-top: 10px;
             .tabs{
                 div{
                     float: left;
@@ -323,6 +332,10 @@
             }
         }
     }
+    .noHeight{
+        height: 0px;
+        transition: height 0.5s;
+    }
 }
 
 .addWaterBox{
@@ -417,8 +430,10 @@
         }
         .detailsbox{
             height:338px;
+            transition: height 0.5s;
             .tabsbox{
                 height: 38px;
+                margin-top: 5px;
                 line-height: 38px;
                 .tabs{
                     div{
@@ -469,6 +484,10 @@
                 }
             }
         }
+        .noHeight{
+            height: 0px;
+            transition: height 0.5s;
+        }
     }
 }
 

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

@@ -134,6 +134,7 @@ export class WaterCollectionComponent implements OnInit {
     
   }
   ngOnInit(): void {
+    console.log(88888,navigator.userAgent)
     this.getAllWaterData()
     setTimeout(() => {
       this.createMap()
@@ -647,6 +648,13 @@ export class WaterCollectionComponent implements OnInit {
       })//取消
     }
   }
+
+
+  //收起展开列表
+  isPutDown:boolean = false
+  putDown(){
+    this.isPutDown = !this.isPutDown
+  }
 }
 
 

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

@@ -114,15 +114,41 @@
 .rotateA {transform: rotate(90deg) scale(0.75);}
 .rotateB {transform: rotate(180deg)}
 .rotateC {transform: rotate(270deg) scale(0.75);}
-@media screen and (max-width:1400px){
+@media screen and (max-width:1200px){
   .bigimgbox{
-    width:920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
   }
-  //预览图片
-  .previewImgBox {
-    width: 800px;
-    height: 500px;
-    text-align: center;
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .bigimgbox{
+    width:880px;
+    height: 610px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+  
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .bigimgbox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
   }
+  
 }

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

@@ -220,14 +220,31 @@
       }
     }
   }
-  @media screen and (max-width:1300px){
+  @media screen and (max-width:1200px){
     .imageList{
-      width:911px;
-      height:570px;
+      width: 880px;
+      height: 580px;
+      .imageListBox {
+        .imagesBox{
+          width:262px;
+        }
+      }
+    }
+  }
+  @media screen and (min-width:1200px) and (max-width:1400px){
+    .imageList{
+      width: 880px;
+      height: 610px;
       .imageListBox {
         .imagesBox{
           width:275px;
         }
       }
     }
+  }
+  @media screen and (min-width:1400px) and (max-width:1600px){
+    .imageList{
+      width:1110px;
+      height: 660px;
+    }
   }

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

@@ -177,10 +177,22 @@
     margin: 20px auto;
   }
 }
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+@media screen and (min-width:1200px)  and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -189,4 +201,17 @@
     }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+}
+
 

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

@@ -22,18 +22,18 @@
   <!-- 导航路线 -->
   <div class="routeGIS" *ngIf="isShowRouteGIS">
     <div class="routeHeader">
-      <label style="bottom: 8px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label>
-      <label style="bottom: 8px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label>
-      <label style="top: -3px; right: 7px; font-size: 24px;" class="routeGISPublicIcon" (click)='closeRouteGIS()' title="关闭">×</label>
+      <label style="bottom: 13px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label>
+      <label style="bottom: 13px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label>
+      <label style="top: 0px; right: 5px; font-size: 19px;" class="routeGISPublicIcon" (click)='closeRouteGIS()' title="关闭">×</label>
       <div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div>
-      <div class="routeContent">
+      <div class="routeContent" style="margin-top: -14px;">
         <div class="routeEveryRow">
           <label class="routeText">起</label>
           <input type="text" list="start" [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)">
           <datalist id="start">
             <option *ngFor="let item of routeStartList" value="{{item.district}} {{item.name}}">
           </datalist>
-          <label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'>×</label>
+          <label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'><mat-icon>highlight_off</mat-icon></label>
         </div>
         <div class="routeEveryRow">
           <label class="routeText">终</label>
@@ -41,7 +41,7 @@
           <datalist id="end">
             <option *ngFor="let item of routeEndList" value="{{item.district}} {{item.name}}">
           </datalist>
-          <label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'>×</label>
+          <label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'><mat-icon>highlight_off</mat-icon></label>
         </div>
       </div>
     </div>

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

@@ -139,8 +139,8 @@
   flex-direction: column;
   .routeHeader {
     width: 100%;
-    height: 130px;
-    min-height: 130px;
+    height: 140px;
+    min-height: 140px;
     position: relative;
     display: flex;
     align-items: center;
@@ -166,9 +166,15 @@
           left: 5px;
         }
         .routeClear {
-          top: 0px;
-          right: 18px;
-          font-size: 20px;
+          top: 5px;
+          right: 13px;
+          mat-icon{
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+            color: #333333;
+            opacity: 0.16;
+          }
         }
         input { 
           width: 80%;
@@ -367,12 +373,28 @@
   }
 }
 
-
-@media screen and (min-width:1200px) and (max-width:1300px){
+@media screen and (max-width:1200px){
+  .leftDiv {
+    width: 320px;
+  }
+  #leftHide{
+    left: 320px;
+  }
+  .rightTopBox{
+    right: 8px;
+  }
+  .searchInput,.routeGIS{
+    left: 18px;
+  }
+  .routeGIS{
+    max-height: 539px;
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
   .leftDiv {
     width: 328px;
   }
   #leftHide{
     left: 328px;
   }
-}
+}

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

@@ -141,10 +141,22 @@ table {
     margin: 20px auto;
   }
 }
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -153,3 +165,15 @@ table {
     }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  } 
+}

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

@@ -2,9 +2,15 @@
     width: 1500px;
     height:850px
 }
-@media screen and (min-width:1000px) and (max-width:1400px){
+@media screen and (max-width:1400px){
     .divbox{
         width: 950px;
         height: 618px;
     }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+    .divbox{
+        width: 1100px;
+        height: 660px;
+    }
 }

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

@@ -40,7 +40,7 @@
             width: 110px;
         }
     }
-    @media screen and (min-width:1200px) and (max-width:1300px){
+    @media screen and (max-width:1400px){
         .contantitem{
             margin-right: 30px;
         }

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

@@ -241,10 +241,22 @@
     margin: 20px auto;
   }
 }
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -252,4 +264,17 @@
       text-align: center;
     }
   }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
 }

src/app/home/home.component.ts

@@ -28,6 +28,7 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {
     this.getVisualizationData()
+    
   }
 
   ngAfterViewInit(): void {

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

@@ -61,11 +61,22 @@
     margin: 20px auto;
   }
 }
-
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -74,3 +85,16 @@
     }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
+}

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

@@ -171,14 +171,14 @@
                 <mat-tab *ngFor="let item of houses;let key = index" label="{{item.name}}"> 
                     <ng-template matTabContent>
                         <form *ngIf="item.data && item.data.length!=0" style="height: 100%; overflow-y:auto; display: block;" (ngSubmit)="onSubmitBuildingInfo(form.value,item,key,form.invalid)" #form="ngForm" class="example-container">
-                            <div class="buildInfoInput" >
+                            <div class="buildInfoInput marginLeft" >
                                 <span>建筑名称：</span>
                                 <mat-form-field>
                                     <input required matInput name="buildingName" type='text' minlength="1" [(ngModel)]="item.name">
                                 </mat-form-field>
                                 <span style="color: red;">*</span>
                             </div>
-                            <div class="buildInfoInput">
+                            <div class="buildInfoInput marginLeft">
                                 <span>建筑类型：</span>
                                 <mat-form-field>
                                     <mat-select  name="buildingTypeName" [(ngModel)]="item.buildingTypes[0].name">
@@ -191,7 +191,7 @@
                                 <!-- 类型为表单并且不是 罐区 -->
                                 <div *ngIf="element.type == 0 && element.name.indexOf('罐区') == -1">
                                     <p style="font-size: 22px;">{{element.name}}</p>
-                                    <div class="buildInfoInput" *ngFor="let i of element.propertyInfos;let inputIndex = index"  style="float: left;margin-left: 250px;position: relative;">
+                                    <div class="buildInfoInput marginLeft" *ngFor="let i of element.propertyInfos;let inputIndex = index"  style="float: left;position: relative;">
                                         <span>{{i.propertyName}}<span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span>：</span>
                                         <!-- 如果类型是文本 --> 
                                         <mat-form-field  *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
@@ -266,7 +266,7 @@
                                         </p>
                                         <p style="font-size: 22px;">{{element.name}}</p>
                                         
-                                        <div class="buildInfoInput" *ngFor="let i of element.propertyInfos;let inputIndex = index"  style="float: left;margin-left: 250px;position: relative;">
+                                        <div class="buildInfoInput marginLeft" *ngFor="let i of element.propertyInfos;let inputIndex = index"  style="float: left;position: relative;">
                                             <span>{{i.propertyName}}<span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span>：</span>
                                             <!-- 如果类型是文本 --> 
                                             <mat-form-field  *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
@@ -332,13 +332,13 @@
                                 <h1 style="font-size: 22px;width: 200px;">自定义信息</h1>
                             </div>
                             <div style="position: relative;" *ngIf="item.isCustomData">
-                                <button  style="position: absolute;left: 100px;top: 5px;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData">
+                                <button  style="position: absolute;left: 80px;top: 8px;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData">
                                     <mat-icon>add_circle_outline</mat-icon>
                                 </button>
-                                <button style="position: absolute;left:150px;top: 5px;" type="button" mat-icon-button (click)="popCustomData(item)" class="deleteCustomData">
+                                <button style="position: absolute;left:120px;top: 8px;" type="button" mat-icon-button (click)="popCustomData(item)" class="deleteCustomData">
                                     <mat-icon>remove_circle_outline</mat-icon>
                                 </button>
-                                <div class="houseinfoinput" style="float: left;margin-left: 250px;" *ngFor="let i of item.customData.customProperties;let key = index">
+                                <div class="houseinfoinput marginLeft" style="float: left;" *ngFor="let i of item.customData.customProperties;let key = index">
                                     <mat-form-field>
                                         <input matInput type='text' name="customData{{key}}Name"
                                         required

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

@@ -367,12 +367,12 @@
     .buildInfoInput{
         width: 393px;
         text-align: end;
-        margin-left:240px;
+        // margin-left:240px;
     }
     .infobtnbox{
         position: absolute;
         top: 30px;
-        right: 75px;
+        right: 66px;
         button{
             width: 80px;
             height: 40px;
@@ -381,6 +381,15 @@
         }
     }
 }
+
+.marginLeft{
+    margin-left: 250px;
+}
+@media screen and (max-width:1400px){
+    .marginLeft{
+        margin-left: 155px;
+    }
+}
 .btn{
     width: 100%;
     text-align: center;

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

@@ -143,15 +143,51 @@ textarea {
   }
 }
 
-
-@media screen and (max-width:1300px){
-  .imageList{
-    width: 920px;
-    height: 600px;
-    .imageListBox {
-      .imagesBox {
-        width: 270px;
-      }
+@media screen and (max-width:1200px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+  .imageList {
+    width:880px;
+    height:580px;
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
     }
   }
+  .imageList {
+    width:880px;
+    height: 610px;
+  }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  .imageList {
+    width: 1110px;
+    height: 660px;
+  }
 }

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

@@ -145,15 +145,51 @@ textarea {
 }
 
 
-@media screen and (max-width:1300px){
-  .imageList{
-    width: 920px;
-    height: 600px;
-    .imageListBox {
-      .imagesBox {
-        width: 270px;
-      }
+@media screen and (max-width:1200px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
     }
   }
+  .imageList {
+    width:880px;
+    height:580px;
+  }
 }
-
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+  .imageList {
+    width:880px;
+    height: 610px;
+  }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  .imageList {
+    width: 1110px;
+    height: 660px;
+  }
+}

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

@@ -64,10 +64,23 @@ table {
   }
 }
 
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -75,4 +88,17 @@ table {
       text-align: center;
     }
   }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
 }

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

@@ -62,10 +62,23 @@ table {
   }
 }
 
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -74,3 +87,16 @@ table {
     }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
+}

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

@@ -216,6 +216,7 @@ export class KeyUnitManagementComponent implements OnInit {
     this.getAllKeyUnit();
   }
   ngOnInit(): void {
+    // alert(document.documentElement.clientHeight)
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();

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

@@ -175,11 +175,24 @@
     margin: 20px auto;
   }
 }
+@media screen and (max-width:1200px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
 
-@media screen and (max-width:1300px){
+
+@media screen and (min-width:1200px) and (max-width:1400px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -187,4 +200,17 @@
       text-align: center;
     }
   }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
 }

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

@@ -178,10 +178,23 @@
   }
 }
 
-@media screen and (max-width:1300px){
+@media screen and (max-width:1200px){
   .imgDiaLogBox{
-    width: 920px;
-    height: 600px;
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
     //预览图片
     .previewImgBox {
       width: 800px;
@@ -189,4 +202,16 @@
       text-align: center;
     }
   }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
 }

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

@@ -106,11 +106,21 @@
     }
   }
 }
-@media screen and (max-width:1400px){
+@media screen and (max-width:1200px){
+  .routeGIS{
+    max-height: 490px;
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
   .routeGIS{
     max-height: 520px;
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .routeGIS{
+    max-height: 628px;
+  }
+}
 
 .routeGISPublicIcon { position: absolute; color: #fff; font-size: 14px; } //导航 定位部分公共样式
 //选择路线 方案 button

src/app/key-unit/water-road/water-road.component.scss

@@ -38,7 +38,7 @@
 
   .dialogbox{
     width: 800px;
-    height: 600px;
+    height: 610px;
     .title{
       span{
         font-size: 16px;

src/app/navigation/navigation.component.html

@@ -57,7 +57,7 @@
     </button>
 
     <div class="example-sidenav-content">
-      <div style="width: 100%; height: 64px;">
+      <div style="width: 100%;">
         <app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
       </div>
       <div style="flex: 1; overflow: hidden;">

src/app/navigation/navigation.component.scss

@@ -40,6 +40,11 @@ mat-sidenav{
         z-index: 200;
 
     }
+    @media screen and (max-width:1400px){
+        .shownav{
+            top: 7px;
+        }
+    }
     .mat-accordion .mat-expansion-panel:first-of-type {
         border-top-right-radius:0px;
         border-top-left-radius:0px;

src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss

@@ -12,7 +12,7 @@
   }
   #Line{
       width: 80%;
-      height: 600px;
+      height: 610px;
       margin: 80px auto;
   }
 }

src/app/statistic-analysis/home/home.component.html

@@ -10,7 +10,7 @@
             <div id="chartHynyxf" class="chart-item"></div>
           </div>
         </div>
-        <div class="box-wrap mt" style="flex: 0.7;cursor: pointer;" (click)="scheduled()">
+        <div class="box-wrap mt plan" style="flex: 0.7;cursor: pointer;" (click)="scheduled()">
           <div class="panel-hd" style="padding-top: 0px;">
             <div class="panel-tit" style="color: white;">计划完成情况</div>
           </div>
@@ -77,7 +77,7 @@
       </div>
       <!-- 右侧 -->
       <div class="main-right">
-        <div class="box-wrap" style="flex: 0.7">
+        <div class="box-wrap planNum" style="flex: 0.7">
           <div class="panel-bd" style="padding-top: 13px;">
             <div class="total-box">
               <div class="total-item" (click)="threePlan()">

src/app/statistic-analysis/home/home.component.ts

@@ -299,8 +299,11 @@ export class HomeComponent implements OnInit {
   planStateOptionsZhi = {
     title: {
         text: '预案状态统计（7005份）',
-        left: 'center',
-
+        left: 'left', 
+        textStyle:{
+          color:'#fff',
+          fontWeight:'normal'
+        }
     },
     tooltip: {
         trigger: 'item',
@@ -325,9 +328,9 @@ export class HomeComponent implements OnInit {
           },
           data: [
               {value: 1585, name: '预案新增'},
-              {value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}},
+              {value: 2000, name: '审核通过',itemStyle:{color:'#02A7F0'}},
               {value: 2600, name: '预案编制'},
-              {value: 1500, name: '预案审核退回'},
+              {value: 1500, name: '审核退回'},
               {value: 1800, name: '预案审核中'}
           ],
           emphasis: {
@@ -343,8 +346,11 @@ export class HomeComponent implements OnInit {
   planStateOptionsZhong = {
     title: {
         text: '预案状态统计（895份）',
-        left: 'center',
-
+        left: 'left', 
+        textStyle:{
+          color:'#fff',
+          fontWeight:'normal'
+        }
     },
     tooltip: {
         trigger: 'item',
@@ -368,9 +374,9 @@ export class HomeComponent implements OnInit {
           },
           data: [
               {value: 200, name: '预案新增'},
-              {value: 234, name: '预案审核通过',itemStyle:{color:'#02A7F0'}},
+              {value: 234, name: '审核通过',itemStyle:{color:'#02A7F0'}},
               {value: 165, name: '预案编制'},
-              {value: 189, name: '预案审核退回'},
+              {value: 189, name: '审核退回'},
               {value: 211, name: '预案审核中'}
           ],
           emphasis: {
@@ -400,6 +406,10 @@ export class HomeComponent implements OnInit {
       text: '新增、删除单位统计',
       left: 0,
       top: 0,
+      textStyle:{
+        color:'#fff',
+        fontWeight:'normal'
+      },
     },
     grid: {
       left: 30,
@@ -488,6 +498,10 @@ export class HomeComponent implements OnInit {
       text: '新增、删除单位统计',
       left: 0,
       top: 0,
+      textStyle:{
+        color:'#fff',
+        fontWeight:'normal'
+      },
     },
     grid: {
       left: 30,
@@ -584,11 +598,12 @@ export class HomeComponent implements OnInit {
   chartZdgzqyOptionsZhi = {
     title: {
       text: '建筑类型统计（8900家）',
-      left: 'center',
-      top: -3,
-        // textStyle: {
-        //   fontSize:31
-        // }
+      top: -5,
+      left: 'left', 
+      textStyle:{
+        color:'#fff',
+        fontWeight:'normal'
+      }
     },
     tooltip: {
       trigger: 'item',
@@ -605,7 +620,7 @@ export class HomeComponent implements OnInit {
         name: '访问来源',
         type: 'pie',
         radius: '70%',
-        center: ['50%', '60%'],
+        center: ['50%', '61%'],
         label:{
           show:true,
           // fontSize:13,
@@ -647,7 +662,11 @@ export class HomeComponent implements OnInit {
   chartZdgzqyOptionsZhong = {
     title: {
       text: '建筑类型统计（1015家）',
-      left: 'center',
+      left: 'left', 
+      textStyle:{
+        color:'#fff',
+        fontWeight:'normal'
+      },
       top: -3,
         // textStyle: {
         //   fontSize:31

src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.scss

@@ -107,7 +107,7 @@
   } 
   font-size: 30px;
   width: 100%;
-  height: 600px;
+  height: 610px;
   overflow: auto;
   .tableHeader {
     font-size: 30px;

src/app/test/test.component.html

@@ -0,0 +1 @@
+<p>测试当前视图宽高</p>

src/app/test/test.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test/test.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.scss']
+})
+export class TestComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    alert(document.documentElement.clientWidth)
+    alert(document.documentElement.clientHeight)
+  }
+
+}

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

@@ -157,7 +157,7 @@
     width: 235px;
     right: 0;
   }
-  @media screen and (min-width:1200px) and (max-width:1300px){
+  @media screen and (max-width:1400px){
     .functionalDomainLeft{
       min-width: 195px;
       width: 195px;

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

@@ -572,7 +572,7 @@ div:focus {
 }
 
 .bigBox{
-  width: 580px;
+  width: 590px;
   height: 40px;
   line-height: 40px;
   position: absolute;
@@ -623,6 +623,25 @@ div:focus {
     }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .bigBox{
+    z-index: 9999;
+    width: 479px;
+    right: 300px;
+    top: 35px;
+    .weatherBox{
+      .name{
+        font-size: 13px;
+      }
+      .weatherInput{
+        width: 99px;
+      }
+      .weatherSelect{
+        width: 88px;
+      }
+    }
+  }
+}
 
 .open{
   right: 0px;
@@ -649,7 +668,7 @@ div:focus {
 }
 .orBox{
   width: 500px;
-  height: 600px;
+  height: 610px;
   .treebox{
     width: 100%;
     height: 552px;

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

@@ -35,7 +35,7 @@
                 </mat-tree>
             </div>
         
-            <div mat-dialog-actions>
+            <div class="btnbox">
                 <button mat-raised-button color="primary" type="submit" 
                 [disabled]="!form.form.valid">
                     确定

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

@@ -16,9 +16,36 @@ table {
   height: 450px;
   overflow: auto;
 }
+.btnbox{
+  display: flex;
+  justify-content: center;
+  margin: 3px 0;
+  button{
+    margin: 0 8px;
+  }
+}
 @media screen and (max-width:1400px){
-  .dialogBox{
-    max-height: 580px;
-    overflow-y: auto;
+  .imgDiaLogBox{
+    width: 880px;
+    height: 610px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
   }
 }
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .imgDiaLogBox{
+    width:1110px;
+    height: 660px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 550px;
+      text-align: center;
+    }
+  }
+  
+}

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

@@ -34,7 +34,7 @@
                 </mat-tree>
             </div>
         
-            <div mat-dialog-actions>
+            <div class="btnbox">
                 <button mat-raised-button color="primary" type="submit" 
                 [disabled]="!form.form.valid">
                     确定

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

@@ -157,11 +157,16 @@ table {
 }
 @media screen and (max-width:1400px){
     .dialogBox{
-        max-height: 580px;
+        max-height: 600px;
+        overflow-y: auto;
+    }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+    .dialogBox{
+        max-height: 660px;
         overflow-y: auto;
     }
 }
-
 
 .topbox{
     height: 32px;

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

@@ -200,7 +200,7 @@ export class MaterialBankComponent implements OnInit {
   editoriginalcopy(node){
     if(this.Original){
       const dialogRef = this.dialog.open(EditOriginalCopy, {//调用open方法打开对话框并且携带参数过去
-        // height:"580px",
+        // height:"590px",
         width:"640px",
         data: {allMaterialBank:this.allMaterialBank,node:node,Original:this.Original}
       });

src/assets/css/newStyle.css

@@ -531,8 +531,33 @@ z-index:
 */
 
 /*# sourceMappingURL=style.css.map */
-@media screen and (min-width:1200px) and (max-width:1300px){
+@media screen and (max-width:1200px){
+  .main-left{
+    max-width: 250px;
+    
+  }
+  .box-wrap{
+    min-width: 250px
+  }
   #chartMap{
     padding-left: 25px;
+    min-width: 358px;
+  }
+  .planNum{
+    min-height: 150px;
+  }
+
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  #chartMap{
+    padding-left: 25px;
+  }
+}
+@media screen and (min-width:1400px) and (max-width:1600px){
+  .plan{
+    min-height: 150px;
+  }
+  .planNum{
+    min-height: 160px;
   }
 }

src/index.html

@@ -13,6 +13,7 @@
   <title>数字化预案编制管理平台</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no,uc-fitscreen=yes,viewport-fit=cover"> -->
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='/assets/icon/material-icons.css' rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>

src/styles.scss

@@ -216,4 +216,9 @@ table td.mat-footer-cell:last-of-type{
 }
 td{
 	word-break:break-all;
+}
+@media screen and (max-width:1400px){
+	.mat-toolbar-row, .mat-toolbar-single-row {
+		height: 50px!important;
+	}
 }