[完善] echarts预案状态分析基本完成

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

@@ -9,6 +9,7 @@ export class EchartsDataService {
 
   //预案状态分析
   statefulInspectionName:string;
+  statefulInspectionToggle:boolean = true; // true=显示所有柱状图 flase=显示当前点击柱状图
 
 
 

src/app/statistic-analysis/state/page-two-name/page-two-name.component.html

@@ -1,4 +1,4 @@
-<div class="echartsBox" [hidden]="!isTrue">
+<div class="echartsBox" [hidden]="!data.statefulInspectionToggle">
     <div id="pie">
 
     </div>
@@ -30,4 +30,4 @@
     </div>
     
 </div>
-<app-page-zhong-dui-details #zhongDuiChild *ngIf="!isTrue"></app-page-zhong-dui-details>    
+<app-page-zhong-dui-details #zhongDuiChild *ngIf="!data.statefulInspectionToggle"></app-page-zhong-dui-details>    

src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@@ -53,7 +53,7 @@ export class PageTwoNameComponent implements OnInit {
   }//echarts两个字换行
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
-  isTrue = true
+
   //预案新增统计
   planAdd () {
     let _this = this
@@ -89,7 +89,7 @@ export class PageTwoNameComponent implements OnInit {
     addEchart.setOption(option);
     addEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案新增'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
   //预案审核通过
@@ -126,7 +126,7 @@ export class PageTwoNameComponent implements OnInit {
     passPlanEchart.setOption(option);
     passPlanEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核通过'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -164,7 +164,7 @@ export class PageTwoNameComponent implements OnInit {
     passMakeEchart.setOption(option);
     passMakeEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案编制'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -202,7 +202,7 @@ export class PageTwoNameComponent implements OnInit {
     passBackEchart.setOption(option);
     passBackEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核退回'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -240,7 +240,7 @@ export class PageTwoNameComponent implements OnInit {
     planAuditEchart.setOption(option);
     planAuditEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核中'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
   //预案状态统计

src/app/statistic-analysis/state/page-two-time/echarts.html

@@ -1,7 +1,9 @@
-<app-page-zhong-dui-details *ngIf="!toggle"></app-page-zhong-dui-details>
-<div style="height: 450px;width: 50%;margin: 0 auto;" id="one" [hidden]="!toggle"></div>
-<div class="publicCss" id="two" [hidden]="!toggle"></div>
-<div class="publicCss" id="three" [hidden]="!toggle"></div>
-<div class="publicCss" id="four" [hidden]="!toggle"></div>
-<div class="publicCss" id="five" [hidden]="!toggle"></div>
-<div class="publicCss" id="six" [hidden]="!toggle"></div>
+<app-page-zhong-dui-details *ngIf="!echartsData.statefulInspectionToggle"></app-page-zhong-dui-details>
+<div [hidden]="!echartsData.statefulInspectionToggle">
+  <div style="height: 450px;width: 50%;margin: 0 auto;" id="one"></div>
+  <div class="publicCss" id="two"></div>
+  <div class="publicCss" id="three"></div>
+  <div class="publicCss" id="four"></div>
+  <div class="publicCss" id="five"></div>
+  <div class="publicCss" id="six"></div>
+</div>

src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@@ -8,14 +8,14 @@
           <label style="margin-right: 10px;">开始时间:</label>
           <input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'>
           <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
-          <mat-datepicker #start></mat-datepicker>
+          <mat-datepicker #start startView="multi-year"></mat-datepicker>
         </div>
   
         <div class="queryField">
           <label style="margin-right: 10px;">结束时间:</label>
           <input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'>
           <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
-          <mat-datepicker #end></mat-datepicker>
+          <mat-datepicker #end startView="multi-year"></mat-datepicker>
         </div>
 
         <div class="btnbox" style="margin-left: 30px;">
@@ -32,8 +32,8 @@
 
   <div class="echarts">
     <div class="center">
-      <app-echarts *ngIf="!isQuery" #echarts></app-echarts>
-      <app-page-two-name *ngIf="isQuery"></app-page-two-name>
+      <app-echarts *ngIf="!isQuery" #appEcharts></app-echarts>
+      <app-page-two-name *ngIf="isQuery" #pageTwoName></app-page-two-name>
     </div>
   </div>
 

src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@@ -3,6 +3,8 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
 import { FormControl } from '@angular/forms';
 import { DateAdapter } from '@angular/material/core';
+import { PageTwoNameComponent } from '../page-two-name/page-two-name.component';
+import {EchartsDataService} from '../../echarts-data.service'
 declare var echarts: any;
 
 @Component({
@@ -12,28 +14,34 @@ declare var echarts: any;
 })
 export class PageTwoTimeComponent implements OnInit {
 
-  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
+  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
   
-  @ViewChild('echarts') echarts:echartsComponent; //父组件中获得子组件的引用
+  @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
+  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
-    this.startTime = new FormControl( (new Date()).getFullYear()+ '-' + '01' + '-' + '01' )
-    this.endTime = new FormControl( new Date() )
+    this.startTime = new FormControl( (new Date()).getFullYear()-10 )
+    this.endTime = new FormControl( (new Date()).getFullYear() )
     this.adapter.setLocale('CH')
   }
 
   isQuery:boolean = true; //横纵向查询
 
+  //查询
   query () {
-    this.echarts.toggleEcharts()
+
   }
 
+  //shao
   toggleTrue () { 
     this.isQuery = true
+    this.echartsData.statefulInspectionToggle = true
   }
 
+  //chen
   toggleFalse () { 
     this.isQuery = false
+    this.echartsData.statefulInspectionToggle = true
   }
 
   startTime:any; //查询开始时间
@@ -95,7 +103,7 @@ export class PageTwoTimeComponent implements OnInit {
 })
 export class echartsComponent implements OnInit {
 
-  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
+  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
 
   ngOnInit(): void {
     window.setTimeout(()=>{
@@ -108,11 +116,7 @@ export class echartsComponent implements OnInit {
     },0)
   }
 
-  toggle:boolean = true;//切换
 
-  toggleEcharts () {
-    this.toggle = !this.toggle
-  }
 
   oneInit () {
     var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp');
@@ -191,6 +195,7 @@ export class echartsComponent implements OnInit {
   }
 
   twoInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp');
     var option = {
       grid: {
@@ -257,9 +262,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案新增'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   threeInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp');
     var option = {
       grid: {
@@ -326,9 +336,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核通过'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   fourInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp');
     var option = {
       grid: {
@@ -395,9 +410,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案编制'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   fiveInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp');
     var option = {
       grid: {
@@ -464,9 +484,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核退回'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   sixInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp');
     var option = {
       grid: {
@@ -533,6 +558,10 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核中'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }