[新增]新增resize事件

src/app/navigation/navigation.component.html

@@ -52,7 +52,7 @@
         </div>
     </mat-sidenav>
 
-    <button type="button" mat-button (click)="drawer.toggle()" class="shownav">
+    <button type="button" mat-button (click)="drawer.toggle();isShowNav()" class="shownav">
         <mat-icon style="color:white;">menu</mat-icon>
     </button>
 

src/app/navigation/navigation.component.ts

@@ -8,6 +8,7 @@ import { TreeService } from '../http-interceptors/tree.service'
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
 import { Router,ActivatedRoute } from '@angular/router'
+import { EchartsDataService } from '../statistic-analysis/echarts-data.service';
 
 
 
@@ -19,7 +20,7 @@ import { Router,ActivatedRoute } from '@angular/router'
 export class NavigationComponent implements OnInit {
   
   constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar,
-    private router:Router,private route:ActivatedRoute) { }
+    private router:Router,private route:ActivatedRoute,public emitService: EchartsDataService) { }
 
   treedata:any
   isgrey:boolean
@@ -51,10 +52,8 @@ export class NavigationComponent implements OnInit {
   redtheme(){
     this.darktheme = true
   }
-  toGis(){
-    // console.log(123)
-    window.open(`http://39.106.78.171:8000`);
+  isShowNav(){
+    this.emitService.eventEmit.emit('echarts')
   }
 
-
 }

src/app/statistic-analysis/echarts-data.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
-
+import { Injectable, EventEmitter} from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
 @Injectable({
   providedIn: 'root'
 })
@@ -16,7 +16,7 @@ export class EchartsDataService {
   scheduledUpdatesName:string;
   scheduledUpdatesToggle:boolean = true; // 显示  当前点击 已核查/未核查
 
-
+  eventEmit = new EventEmitter();
 
   //echarts 悬停 显示表格假数据
   //支队提示框
@@ -296,4 +296,7 @@ export class EchartsDataService {
     return 't'
   }
 
+
+
+
 }

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Router } from '@angular/router';
+import { EchartsDataService } from '../echarts-data.service';
 declare var echarts: any;
 declare var AMap: any;
 
@@ -12,24 +13,42 @@ declare var AMapUI: any;
 })
 export class HomeComponent implements OnInit {
 
-  constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router) { }
+  constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { }
 
 
   map:any; //地图
   ngOnInit() {
+    this.emitService.eventEmit.subscribe((value: any) => {
+      if (value == 'echarts') {
+        this.updateEcharts()
+      }
+    });
+
     window.setTimeout(()=>{
       this.unitType()
       this.unitData()
-      // this.teamData()
       this.keyUnit()
       this.mapInit() //初始化地图
       let that = this
-      window.addEventListener('resize',function () {
-
+      window.addEventListener('resize', () => {
+        this.updateEcharts()
       })
+      window.addEventListener('keydown', (e) => {
+        if(e.keyCode == 122){
+          this.updateEcharts()
+        }
+      })
+      
     },0)
   }
 
+  //更新echarts视图
+  updateEcharts(){
+    this.planState.resize()
+    this.chartDwsjcj.resize()
+    this.chartZdgzqy.resize()
+  }
+
   threePlan(){
     // this.router.navigate(['/planManagement/entryPlan'])
   }

src/assets/css/newStyle.css

@@ -280,13 +280,13 @@ iframe { display: block; }
 
 .text-linear { background: linear-gradient(to bottom, #fff, #C0C2C2); -webkit-background-clip: text; color: transparent; }
 
-.panel, .box-wrap { max-height: 270px; max-width: 590px; background-image: url(../images/panel-bg.png); background-size: 100% 100%; display: flex; flex-direction: column; width: 100%; }
+.panel, .box-wrap { max-width: 590px; background-image: url(../images/panel-bg.png); background-size: 100% 100%; display: flex; flex-direction: column; width: 100%; }
 .panel.panel-lg, .box-wrap.panel-lg { width: 120%; }
 .panel.panel02, .box-wrap.panel02 { background-image: url(../images/panel-bg02.png); }
-.panel.panel03, .box-wrap.panel03 { background-image: url(../images/panel-bg03.png); max-height: 226px; }
+.panel.panel03, .box-wrap.panel03 { background-image: url(../images/panel-bg03.png);  }
 .panel.panel04, .box-wrap.panel04 { background-image: url(../images/panel-bg04.png); }
 .panel.panel05, .box-wrap.panel05 { background-image: url(../images/panel-bg05.png); max-width: 100%; background-size: 100% 100%; }
-.panel.panel06, .box-wrap.panel06 { background-image: url(../images/panel-bg06.png); max-width: none; max-height: 339px; background-size: 100% 100%; }
+.panel.panel06, .box-wrap.panel06 { background-image: url(../images/panel-bg06.png); max-width: none; background-size: 100% 100%; }
 .panel .panel-hd, .box-wrap .panel-hd { padding: 5px 30px 15px; position: relative; }
 .panel .panel-hd .panel-tit, .box-wrap .panel-hd .panel-tit { padding-top: 15px; font-size: 18px; line-height: 26px; }
 .panel .panel-hd .panel-more, .box-wrap .panel-hd .panel-more { position: absolute; right: 30px; top: 20px; z-index: 100; transition: .3s opactiy; }
@@ -299,7 +299,7 @@ iframe { display: block; }
 
 .box-wrap:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; background: linear-gradient(#93FCFF, #93FCFF) left top, linear-gradient(#93FCFF, #93FCFF) left top, linear-gradient(#93FCFF, #93FCFF) right top, linear-gradient(#93FCFF, #93FCFF) right top, linear-gradient(#93FCFF, #93FCFF) left bottom, linear-gradient(#93FCFF, #93FCFF) left bottom, linear-gradient(#93FCFF, #93FCFF) right bottom, linear-gradient(#93FCFF, #93FCFF) right bottom; background-repeat: no-repeat; background-size: 18px 2px, 2px 18px; }
 
-.chart-item { height: 100%; }
+.chart-item { height: 100%;}
 
 .table { width: 100%; text-align: center; color: rgba(255, 255, 255, 0.8); }
 .table th { background-color: rgba(18, 148, 184, 0.9); line-height: 22px; padding: 7px 5px; font-size: 16px; }
@@ -334,7 +334,7 @@ iframe { display: block; }
 .page-right { padding-right: 30px; left: auto; right: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
 .page-right div { flex: 1; margin-bottom: 10px; }
 .page-right div:last-child { margin-bottom: 0; }
-.page-right > .chart-item { margin-bottom: 0px; width: 100%; max-height: 270px; min-height: 190px; }
+.page-right > .chart-item { margin-bottom: 0px; width: 100%; min-height: 190px; }
 
 .page-center { left: 32%; right: 32%; position: absolute; top: 106px; bottom: 20px; z-index: 100; }
 
@@ -351,11 +351,11 @@ iframe { display: block; }
 .page-bd { padding: 40px 30px 10px; display: flex; }
 .page-bd .page-map { flex: 1; margin: 0 90px; height: 677px; background-image: url(../images/panel-bg07.png); background-size: 100% 100%; display: flex; align-items: center; padding-right: 60px; }
 .page-bd .page-map .chart-item { width: 62%; }
-.page-bd .page-map .table-box { overflow: hidden; padding: 20px 0; width: 38%; max-height: 90%; display: flex; flex-direction: column; }
+.page-bd .page-map .table-box { overflow: hidden; padding: 20px 0; width: 38%; display: flex; flex-direction: column; }
 .page-bd .page-map .table-box .table-body { flex: 1; overflow: auto; }
 .page-bd .page-map .table-box .table-body::-webkit-scrollbar { display: none; }
 
-.common-list { padding: 10px 0 0 44px; margin-left: -44px; background-image: url(../images/common-bg.png); background-repeat: no-repeat; background-size: 44px 280px; display: flex; flex-direction: column; justify-content: space-between; max-height: 326px; }
+.common-list { padding: 10px 0 0 44px; margin-left: -44px; background-image: url(../images/common-bg.png); background-repeat: no-repeat; background-size: 44px 280px; display: flex; flex-direction: column; justify-content: space-between;}
 .common-list .list-item { display: block; line-height: 62px; height: 60px; overflow: hidden; width: 200px; background-image: url(../images/common01.png); background-size: cover; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .3s all; }
 .common-list .list-item.is-active, .common-list .list-item:hover { background-image: url(../images/common-active.png); }
 .common-list .list-item .list-tit { font-size: 18px; }
@@ -369,7 +369,7 @@ iframe { display: block; }
 
 .main { display: flex; flex-direction: column; padding: 0 30px 10px; height: 93%; }
 
-.main-top { flex: 2; display: flex; padding: 30px 0 0; max-height: 699px; }
+.main-top { flex: 2; display: flex; padding: 30px 0 0; }
 
 .main-left { flex: 0.7; display: flex; flex-direction: column; justify-content: space-between; }
 .main-left > div { flex: 1; }
@@ -378,7 +378,7 @@ iframe { display: block; }
 .main-right > div { flex: 1; }
 
 .main-bottom { flex: 1; overflow: hidden; margin-top: 10px; display: flex; align-items: center; }
-.main-bottom > div { height: 100%; max-height: none; }
+.main-bottom > div { height: 100%; }
 
 .main-center { padding: 0 50px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
 .main-center .number-area { flex: 0.5; display: flex; justify-content: space-between; }
@@ -461,7 +461,7 @@ iframe { display: block; }
   .page-top .num-item .num-text .unit { font-size: 26px; } }
 @media all and (min-width: 1630px) { .main-bottom { margin-top: 30px; } }
 @media all and (max-width: 1630px) { .panel .panel-bd, .panel .panel-hd, .box-wrap .panel-bd, .box-wrap .panel-hd { padding-left: 10px; padding-right: 10px; } }
-@media all and (max-height: 620px) { .page-top { padding-top: 105px; } }
+/* @media all and (max-height: 620px) { .page-top { padding-top: 105px; } } */
 @media all and (min-height: 768px) { .main-bottom { flex: 1.2; } }
 @media all and (min-height: 820px) { .box-wrap.mt { margin-top: 30px; }
   .main-bottom { margin-top: 30px; } }