ShangHaiYuan-AnXin/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { EchartsDataService } from '../../echarts-data.service';
declare var echarts: any;

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

  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }

  tid
  year:String
  buildingTypeName:String
  level:String
  setTimeoutObj//延时器需要清除
  type
  tabledata//获取所有数据
  lastyears//上个页面传过来的年份
  count=0//总数
  pieonetype//判断是级别还是类型，上个页面传过来的参数
  planType//预案类型
  ngOnInit(): void {
    this.dateInit ()
    this.route.queryParams.subscribe(params => {
      this.year = params['level'];
      this.buildingTypeName = params['headtext'];
      this.type=params['type']
      this.lastyears=params['headtext'].substring(0,4)
      this.tid=params.tid
      this.pieonetype=params.pieonetype
    });
    if(this.year=='二维预案'){
      this.planType=1
    }else if(this.year=='三维预案'){
      this.planType=2
    }else if(this.year=='其他预案'){
      this.planType=4
    }else if(this.year=='文本预案'){
      this.planType=16
    }
    this.setTimeoutObj = window.setTimeout(()=>{
      this.getechartsData()
    })
  }
  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    this.detailPlanEchart.clear()
    this.detailPlanEchart.dispose()
  }
  async getechartsData(){
    let paramdata={
      planStatus:this.tid=='pieone'?'': this.type,
      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
      TrendYear:this.lastyears||'',
      TrendType:0
    }
    await this.serviceData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
    this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
      // console.log(this.tabledata)
      for(var i=0;i<this.tabledata[0].length;i++){
        this.date.push(this.tabledata[0][i].month)
        this.dateNum.push(this.tabledata[0][i].count)
        this.count+=this.tabledata[0][i].count
      }
      this.date.forEach((value,index,array)=>{
        this.date[index]=this.date[index]+'月'
      })
      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
      this.detailEcharts()
  }
  selectType:string = 'month'; //选择当前的 查询类型 按月/年

  //查询数据
  years:any = []
  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]

  //日期初始化
  dateInit () {
    let date = (new Date()).getFullYear()
    for (let i=date; i>=date-10;i--) {
      this.years.unshift(i)
    }
  }
  selectOneYear:any = (new Date()).getFullYear() //开始年份
  selectStartMonth:any = 1 //开始月份
  Submit (e) {
    
  }
  selectStartYear:any = (new Date()).getFullYear() //开始年份

  topTextlabel = {
    show: true, // 开启显示
    position: 'top', // 在上方显示
    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: 'middle',
    textStyle: { // 数值样式
      color: 'black',
      fontSize: 12
    }
  }//柱状图数值顶部显示
  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]

  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
  zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
  tiaoshiPao:any
  //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.dateNum.length;i++){
      arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
    //return tishiPao
  }
  //返回
  goBack () {
    history.go(-1)
    //this.echartsData.statefulInspectionToggle = true
  }

  detailPlanEchart
  option
  date = []
  dateNum = []

  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
    this.option = {
      grid: {
        top: 110,
        
      },
      // 标题
      title: {
        text: `${this.year}${this.buildingTypeName}总数（${this.count}）`,
        //top: -14,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 30
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        /* formatter:  (params)=>{
          if(params[0].seriesName == "year"){
            return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
          }else{
            return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
          }
        }, */
        position:this.serviceData.tableTooltipNoShow2
      },
      // x轴
      xAxis: {
        type: 'category',
        data: this.date,
        axisLabel: {
          color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :18,
            color:'#000000'
          }
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          //color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :18,
            color:'#000000'
          }
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: 'xxx',
          type: 'line',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: this.dateNum,
        }
      ],
    };
    this.detailPlanEchart.setOption(this.option);
    this.detailPlanEchart.getZr().on('click',params=>{
      const pointInPixel= [params.offsetX, params.offsetY];
      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){
          this.serviceData.isQuery=true
          this.serviceData.planMonth=this.option.xAxis.data[xIndex].substring(0,1)
          this.serviceData.planYear=this.lastyears
          /* if(!this.serviceData.isQuery){
            this.serviceData.planYear=this.lastyears
          } */
          
          //this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1','type':this.type}});
          this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.year,'headtext':this.buildingTypeName,'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':this.option.xAxis.data[xIndex]}});
        }
        else if(this.serviceData.level=='3'){
          //中队跳转
          this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':this.type}});
        }
      }
    });
  }
  //返回按钮
  backBtn(){
      window.history.go(-1)
  } 

}