diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html index 61e4648..3a6bf7b 100644 --- a/src/app/navigation/navigation.component.html +++ b/src/app/navigation/navigation.component.html @@ -52,7 +52,7 @@ - diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts index 3f3ffca..ab4b0eb 100644 --- a/src/app/navigation/navigation.component.ts +++ b/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') } - } diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 163dedd..b6e88c0 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/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' } + + + } diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts index 2ba90dc..b9b000a 100644 --- a/src/app/statistic-analysis/home/home.component.ts +++ b/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']) } diff --git a/src/assets/css/newStyle.css b/src/assets/css/newStyle.css index 843324d..597d950 100644 --- a/src/assets/css/newStyle.css +++ b/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; } }