[删除]修改3

src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-02 16:22:58
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-05 14:53:43
+ * @LastEditTime: 2020-09-07 08:50:58
  */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -23,10 +23,15 @@ export class DeleteFourComponent implements OnInit {
   constructor(public route: ActivatedRoute,public data: EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
   zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
   zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
-
+  level:string;
   ngOnInit(): void {
+    
+    this.route.queryParams.subscribe(param=>{
+     this.level=param.level
+      console.log(this.level)
+    }); 
     window.setTimeout(()=>{
-      this.detailEcharts()
+      this.detailEcharts(this.level)
     })
   }
   //返回
@@ -35,11 +40,11 @@ export class DeleteFourComponent implements OnInit {
     this.data.statefulInspectionToggle = true
   }
 
-  detailEcharts(){
+  detailEcharts(level){
     var detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
     var option = {
       title: {
-        text: this.data.statefulInspectionName,
+        text: level,
         left: "center",
         textStyle: {
           fontSize: 28

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-02 16:22:35
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-05 16:35:25
+ * @LastEditTime: 2020-09-07 08:41:54
 -->
 <div class="head">
     <select style="width: 80px;height: 30px; margin-left: 600px;margin-top: 20px;">
@@ -26,4 +26,7 @@
       <button mat-raised-button (click)='goBack()' style="float: right; margin-top: 20px;margin-right: 50px;">返回</button>
       
 </div>
-<div id="zhidui" class="zhu"></div>
+<div class="zhu">
+  <div id="zhidui" ></div>
+</div>
+

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

@@ -10,10 +10,15 @@
      padding: 15px 32px;
 }
 .zhu{
-    padding-top: 200px;
-    //padding: 100px 100px 100px 100px;
-    
-    text-align: center;
-    height: 300px;
-    width: 1700px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    #zhidui{
+        width: 100%;
+        height: 350px;
+        position: absolute;
+        left: 50%;
+        top: 45%;
+        transform: translate(-50%,-50%);
+    }
 }

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-02 16:22:35
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-05 16:27:05
+ * @LastEditTime: 2020-09-05 17:33:47
  */
 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
@@ -22,6 +22,7 @@ export class DeleteThereComponent implements OnInit {
 
   constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
   zhutu//echarts实例
+  option
   ngOnDestroy():void{
     this.zhutu.clear()
     this.zhutu.dispose()
@@ -31,14 +32,16 @@ export class DeleteThereComponent implements OnInit {
     let headtext:string;
     let datayuex:string;
     let headName:string;
-    this.activatedRoute.params.subscribe(param=>{
+    console.log(this.activatedRoute.queryParams.subscribe)
+    //headtext=this.activatedRoute.queryParams["headtext"];
+    this.activatedRoute.queryParams.subscribe(param=>{
       headtext=param.headtext
-      datayuex=param.datayuex
+      datayuex=param.level
       headName=headtext+''+datayuex;
-      //console.log(datayuex)
+      console.log(headName)
     }); 
     window.setTimeout(()=>{
-      this.zhuzhuangtu(this.echartsData.statefulInspectionName)
+      this.zhuzhuangtu(headName)
     },0)
   }
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
@@ -78,7 +81,7 @@ export class DeleteThereComponent implements OnInit {
   zhuzhuangtu(headName:string){
     var ec = echarts as any;
     this.zhutu = ec.init(document.getElementById('zhidui'));
-    var option = {
+    this.option = {
       title: {
         text: `${headName}`,
         left: "center",
@@ -119,12 +122,21 @@ export class DeleteThereComponent implements OnInit {
           //label: this.topTextlabel
       }]
     };
-    this.zhutu.on('click', (params) => {
+    this.zhutu.getZr().on('click',params=>{
+      console.log(params.name)
+      const pointInPixel= [params.offsetX, params.offsetY];
+      if (this.zhutu.containPixel('grid',pointInPixel)) {
+        let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+        /*事件处理代码书写位置*/
+        this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]}});
+      }
+    });
+    /* this.zhutu.on('click', (params) => {
       console.log(params)
       this.echartsData.statefulInspectionName =params.name;
       this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`);
-    });
-    this.zhutu.setOption(option);
+    }); */
+    this.zhutu.setOption(this.option);
   }
 
    /* 鼠标悬停提示 */

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

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-02 16:21:18
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-05 15:46:21
+ * @LastEditTime: 2020-09-07 08:56:53
 -->
 <body>
 
@@ -12,8 +12,8 @@
 
     <div class="queryField" *ngIf=" echartsData.statefulInspectionToggle">
       <mat-radio-group [(ngModel)]="selectType">
-        <mat-radio-button value="month">月</mat-radio-button>
-        <mat-radio-button value="year" style="margin-left: 10px;">年</mat-radio-button>
+        <mat-radio-button value="month" (click)='monthClick()'>月</mat-radio-button>
+        <mat-radio-button value="year" style="margin-left: 10px;" (click)='yearClick()'>年</mat-radio-button>
       </mat-radio-group>
     </div>
 

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

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-02 16:21:18
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-05 16:25:00
+ * @LastEditTime: 2020-09-07 08:55:28
  */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
@@ -84,6 +84,18 @@ export class DeleteTwoComponent implements OnInit {
   selectTwoYear:any = (new Date()).getFullYear() //结束年份
   selectStartMonth:any = 1 //开始月份
   selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
+  //点击月
+  monthClick(){
+    this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
+      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
+      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
+      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
+      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
+      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
+      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
+      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
+      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
+  }
   //按月查询
   monthSubmit (e) {
     this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
@@ -124,6 +136,18 @@ export class DeleteTwoComponent implements OnInit {
 
   selectStartYear:any = (new Date()).getFullYear() //开始年份
   selectEndYear:any = (new Date()).getFullYear() //结束年份
+  //点击年
+  yearClick(){
+    this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
+    this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
+    this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
+    this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
+    this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
+    this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
+    this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
+    this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
+    this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany)
+  }
   //按年查询
   yearSubmit (e) {
     console.log(this.selectType)
@@ -158,7 +182,7 @@ export class DeleteTwoComponent implements OnInit {
     var dianji:boolean=headtext=="删除数量总统计" ? false:true;
     var ec = echarts as any;
     this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp');
-    var options = {
+    this.options = {
       grid: {
         top: 50,
         left:40,
@@ -249,14 +273,21 @@ export class DeleteTwoComponent implements OnInit {
         }, */
       }]
     };
-    this.headZx.on('click', (params) => {
+    this.headZx.getZr().on('click', (params) => {
+      console.log(params.name)
       if(`${headtext}`!=="删除数量总统计"){
-        this.echartsData.statefulInspectionName =params.name+headtext;
-        this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`);
+        /* this.echartsData.statefulInspectionName =params.name+headtext;
+        this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
+        const pointInPixel= [params.offsetX, params.offsetY];
+      if (this.headZx.containPixel('grid',pointInPixel)) {
+        let xIndex=this.headZx.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+        /*事件处理代码书写位置*/
+        this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
+      }
       }
       
     });
-    this.headZx.setOption(options);
+    this.headZx.setOption(this.options);
   }
   /**
    * @name: 表格提示框封装