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

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { ActivatedRoute, Router } from '@angular/router';
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'
import { resolve } from 'dns';
declare var echarts: any;

@Component({
  selector: 'app-page-two-time',
  templateUrl: './page-two-time.component.html',
  styleUrls: ['./page-two-time.component.scss']
})
export class PageTwoTimeComponent implements OnInit {

  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { }
  
  @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
  @ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(param=>{
      this.type=param.type
    });
    this.echartsData.statefulInspectionToggle = true
    this.dateInit()
    this.bianli()
  }
  ngOnDestroy(): void {
  }

  isQuery:boolean = true; //横纵向查询
  type
  //shao
  toggleTrue () { 
    //this.isQuery = true
    this.echartsData.isQuery=true
    this.echartsData.statefulInspectionToggle = true
  }

  //chen
  toggleFalse () { 
    //this.isQuery = false
    this.echartsData.isQuery=false
    this.echartsData.statefulInspectionToggle = true
    this.selectType = 'month'
  }

  //返回
  goBack () {
    //this.echartsComponent.twoExample.clear()
    //this.echartsComponent.dispose()
    this.echartsData.statefulInspectionToggle = true
    sessionStorage.setItem('refresh', 'true');
    history.go(-1);
  }

  selectType:string = 'month'; //选择当前的 查询类型 按月/年

  async changeTime (e) {
    let data = e.value
    await this.appEcharts.changeTime(data)
    if(e.value=='month'){
      this.echartsData.selectType=0
    }
    else if(e.value=='year'){
      this.years=[]
      this.echartsData.selectType=2
      this.appEcharts.tabledata[0].forEach((value,index,array) => {
        this.years.push(array[index].year)
      });
      this.years=Array.from(new Set(this.years))
      //console.log()
    }
  }

  //查询数据
  years= []
  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
  tiaoshiPao:any
  datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
  datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']

  //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.datayuey.length;i++){
      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
  }

  //日期初始化
  dateInit () {
    let date = (new Date()).getFullYear()
    for (let i=date; i>=date-10;i--) {
      //this.years.unshift(i)
    }
  }

  selectOneYear:any = (new Date()).getFullYear() //开始年份
  selectTwoYear:any = (new Date()).getFullYear() //结束年份
  selectStartMonth:any = 1 //开始月份
  selectEndMonth:any = 12 //结束月份
  //按月查询
  monthSubmit (e) {
    if(e.selectEndMonth >= e.selectStartMonth) {
      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
      this.echartsData.selectStartMonth=e.selectStartMonth
      this.echartsData.selectEndMonth=e.selectEndMonth
      this.appEcharts.findYue()
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择正确时间区段','确定',config);
    }
  }



  selectStartYear:any = (new Date()).getFullYear()-1 //开始年份
  selectEndYear:any = (new Date()).getFullYear() //结束年份
  //按年查询
  yearSubmit (e) {
    if (e.selectEndYear >= e.selectStartYear) {
      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
      this.echartsData.selectOneYear=e.selectStartYear
      this.echartsData.selectTwoYear=e.selectEndYear
      this.appEcharts.findyear()
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('结束时间必须大于开始时间','确定',config);
    }
  }



}

@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.html',
  styleUrls: ['./page-two-time.component.scss']
})
export class echartsComponent implements OnInit {

  constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }

  tid
  zongcount=0
  type
  organizationId=[]
  tiaoshiPao:any
  datayuey=[]
  datayuex=[]
  dataYearX = []
  dataYearY = []
  toggleTrue (){}
    //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.datayuey.length;i++){
      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
  }
  ngOnInit(): void {
    if(sessionStorage.getItem('refresh') === 'true') {
      sessionStorage.removeItem('refresh');
      location.reload();
     }
    this.activatedRoute.queryParams.subscribe(param=>{
      this.headtext=param.level
      this.type=param.type
      this.tid=param.tid
    });
    
    window.setTimeout(()=>{
      this.getechartsData()
    })
  }
  
  ngOnDestroy () {
    this.twoExample.clear()
    this.twoExample.dispose()
   
  }
  //获取数据
  async getechartsData(){
    let paramdata={
      planStatus:this.tid=='pieone'?'': this.type,
      PlanCategory:this.tid=='pieone'?this.type:'',
      objectType:this.tid=='pieone'?2: 1,
      TrendType:0
    }
    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
       console.log(this.tabledata)
        for(var i=0;i<this.tabledata[0].length;i++){
          if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth||this.tabledata[0][i].month<=this.echartsData.selectEndMonth){
            this.datayuex.push(this.tabledata[0][i].month)
            this.datayuey.push(this.tabledata[0][i].count)
            this.zongcount=this.zongcount+this.tabledata[0][i].count
          }
        }
      this.datayuex.forEach((value,index,array)=>{
        array[index]=array[index]+'月'
      })
      
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
      //this.oneInit()
      this.twoInit(this.datayuex,this.datayuey)
  }

  async changeTime (e) {
    this.twoExample.clear()
    this.twoExample.dispose()
    if (e=='year') {
      //this.oneInit(this.dataYearX,this.dataYearY)
      this.dataYearX=[]
      this.echartsData.selectType=2
      this.zongcount=0
      let paramdata={
        objectType:this.tid=='pieone'?2: 1,
        planStatus:this.tid=='pieone'?'': this.type,
        PlanCategory:this.tid=='pieone'?this.type:'',
        TrendType:this.echartsData.selectType
      }
      await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
      window.setTimeout(()=>{
        this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
        console.log(this.tabledata)
        //resolve(this.tabledata)
        for(var i=0;i<this.tabledata[0].length;i++){
          this.dataYearX.push(this.tabledata[0][i].year)
          this.dataYearY.push(this.tabledata[0][i].count)
          this.zongcount=this.zongcount+this.tabledata[0][i].count
        }
        this.dataYearX.forEach((value,index,array)=>{
          this.dataYearX[index]=this.dataYearX[index]+'年'
        })
        this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
        //this.oneInit()
        this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
        this.twoInit(this.dataYearX,this.dataYearY)
      })
      //this.twoInit(this.dataYearX,this.dataYearY)
      
    } else {
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
      //this.oneInit()
      this.echartsData.selectType=0
      this.twoInit(this.datayuex,this.datayuey)
      
    }
  }
  //按月查询
  async findYue(){
    this.twoExample.clear()
    this.datayuex=[]
    this.datayuey=[]
    let paramdata={
      objectType:this.tid=='pieone'?2: 1,
      planStatus:this.tid=='pieone'?'': this.type,
      PlanCategory:this.tid=='pieone'?this.type:'',
      TrendType:this.echartsData.selectType
    }
    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
    window.setTimeout(()=>{
      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
      //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
        for(var i=0;i<this.tabledata[0].length;i++){
          if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth&&this.tabledata[0][i].month<=this.echartsData.selectEndMonth){
            this.datayuex.push(this.tabledata[0][i].month)
            this.datayuey.push(this.tabledata[0][i].count)
          }
        }
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
      this.twoInit(this.datayuex,this.datayuey)
    })
  }
  //按年查询
  async findyear(){
    this.twoExample.clear()
    this.dataYearX=[]
    this.dataYearY=[]
    let paramdata={
      objectType:this.tid=='pieone'?2: 1,
      planStatus:this.tid=='pieone'?'': this.type,
      PlanCategory:this.tid=='pieone'?this.type:'',
      TrendType:this.echartsData.selectType
    }
    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
    window.setTimeout(()=>{
      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
      //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
        for(var i=0;i<this.tabledata[0].length;i++){
          if(this.tabledata[0][i].year>=this.echartsData.selectOneYear&&this.tabledata[0][i].year<=this.echartsData.selectTwoYear){
            this.dataYearX.push(this.tabledata[0][i].year)
            this.dataYearY.push(this.tabledata[0][i].count)
          }
        }
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) 
      this.twoInit(this.dataYearX,this.dataYearY)
    })
  }
  headtext
  twoExample:any;
  tabledata
  twoInit (X, Y) {
    /* X.forEach((element,index,array) => {
      array[index]=array[index]+'月'
    }); */
    let that = this
    this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
    var option = {
      // 标题
      title: {
        text: this.headtext+`：总数（${this.zongcount}）`,
        top: -4,
        left: 'center',
        bottom: 100,
        textStyle:{
          //文字颜色
          fontSize: 30,
          color:'#000',
        }
      },
      grid: {
        top: 90,
      },
      tooltip: {
        trigger: 'axis',
        position: this.echartsData.tableTooltipNoShowq,
        /* formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
        } */
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :18,
            color:'#000000'
          },
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.twoExample.setOption(option);
    this.twoExample.getZr().on('click', (params) => {
      // console.log(params.name)
        /* this.echartsData.statefulInspectionName =params.name+headtext;
        this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.twoExample.containPixel('grid',pointInPixel)) {
        let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        if(this.echartsData.selectType==2){
          this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':this.headtext,'headtext':X[xIndex],'type':this.type,'tid':this.tid}});
        }else{
          /*事件处理代码书写位置*/
          if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
            this.twoExample.clear()
            this.echartsData.isQuery=true
            this.twoExample.setOption(option);
            //this.router.navigate(['/statisticanalysis/statePageOne/name'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}});
          } else if(this.echartsData.level=='3'){
            //中队跳转
            this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'type':this.type,'tid':this.tid}});
          }
          
        }
        
      }
      
    });
  }

  threeExample:any;
  



}