ShangHaiYuan-AnXin/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.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-add-unit-three-bar-details',
  templateUrl: './add-unit-three-bar-details.component.html',
  styleUrls: ['./add-unit-three-bar-details.component.scss']
})
export class AddUnitThreeBarDetailsComponent implements OnInit {

  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
  time:String
  buildingTypeName:String
  //level:String
  orId//上个页面传过来的组织id
  buildId//上个页面传过来的建筑id

  setTimeoutObj//延时器需要清除
  tabledata
  organizationId=[]

  ngOnInit(): void {
    if(sessionStorage.getItem('refresh') === 'true') {
      sessionStorage.removeItem('refresh');
      location.reload();
     }
    this.dateInit ()
    this.route.queryParams.subscribe(params => {
      this.time = params['time'];
      this.buildingTypeName = params['buildingTpye'];
      this.buildId=params['id']
      this.orId=params['zhuid']
    });
    
    this.setTimeoutObj = window.setTimeout(()=>{
      this.getechartsData()
    })
  }
  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    if (!this.detailPlanEchart) {
      return;
    }
    this.detailPlanEchart.clear()
    this.detailPlanEchart.dispose()
  }
  //获取服务层数据
  async getechartsData(){
     let paramsdata/* ={
      organizationId:this.orId
    } */
    if(this.serviceData.addYear==undefined&&this.serviceData.addMonth!=undefined){
      this.serviceData.addYear=new Date().getFullYear()
      paramsdata={
        organizationId:this.orId,
        TimeIntervalStart:this.serviceData.addYear+'-'+this.serviceData.addMonth,
        TimeIntervalEnd:this.serviceData.addYear+'-'+this.serviceData.addMonth,
      }
    }else if(this.serviceData.addYear==undefined&&this.serviceData.addMonth==undefined){
      paramsdata={
        organizationId:this.orId,
      }
    }else{
      paramsdata={
        organizationId:this.orId,
        TimeIntervalStart:this.serviceData.addYear+'-'+this.serviceData.addMonth,
        TimeIntervalEnd:this.serviceData.addYear+'-'+this.serviceData.addMonth,
      }
    }
    await this.serviceData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
    this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
      //console.log(this.tabledata)
      for(var i=0;i<this.tabledata[0].organizations.length;i++){
        this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
        this.zhiNumData.push(this.tabledata[0].organizations[i].count)
        this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
      }
      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
      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 = [300,290,280,270,260,250,240,230,220,210,200]

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

  detailPlanEchart
  option
  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');  
    this.option = {
      title: {
        text: this.time + '' +this.buildingTypeName +`：总数(${this.tabledata[0].totalCount})`,
        left: "center",
        textStyle: {
          fontSize: 28
        }
      },
      grid: {
        bottom:'18%'
    },
      xAxis: {
          id:this.organizationId,
          type: 'category',
          data:this.zhiNameData,
          axisLabel:{
            //this.axisLabel,
            interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate:38,   //调整数值改变倾斜的幅度（范围-90到90）
            textStyle:{
              fontSize :15,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.tiao==false? this.serviceData.biaogeTishida(params):this.tableTooltip(params)
        },
        position:this.serviceData.tableTooltipNoShowq
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          barWidth :'58',
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          //label: this.topTextlabel
      }]

    };
    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.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
          //总队不跳
          this.zhiNameData=[]
          this.zhiNumData=[]
          this.organizationId=[]
          this.tiaoshiPao=''
          let paramsdata={
            //id:this.buildId,
            organizationId:this.option.xAxis.id[xIndex]
          }
          this.serviceData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
          this.setTimeoutObj = window.setTimeout(()=>{
          this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
          //console.log(this.tabledata)
          for(var i=0;i<this.tabledata[0].organizations.length;i++){
            this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
            this.zhiNumData.push(this.tabledata[0].organizations[i].count)
            this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
          }
            this.option.title.text =this.option.xAxis.data[xIndex]+`：总数(${this.tabledata[0].totalCount})`
            this.option.xAxis.data = this.zhiNameData
            this.option.series[0].data = this.zhiNumData
            this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
            this.option.series[0].markPoint.data=this.tiaoshiPao
            this.option.xAxis.id=this.organizationId
            this.detailPlanEchart.clear()
            this.detailPlanEchart.setOption(this.option)
        },1000)
        this.tiao=true
        }else{
          this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':this.option.xAxis.data[xIndex],'type':1,'jsid':this.option.xAxis.id[xIndex],'buildid':this.buildId}});
        }
      }
      /* if(this.serviceData.level == "1"){//如果是支队则跳转
        this.option.title.text = params.name + '(' +this.buildingTypeName + ')'
        this.option.xAxis.data = this.zhongNameData
        this.option.series[0].data = this.zhongNumData
        this.detailPlanEchart.setOption(this.option)
      } */
    })
  }
  tiao=false
  //返回按钮
  backBtn(){
    /* if(this.level == "zhongdui"){
      this.level = "zhidui"
      this.option.title.text = this.time + '(' +this.buildingTypeName + ')'
      this.option.xAxis.data = this.zhiNameData
      this.option.series[0].data = this.zhiNumData
      this.detailPlanEchart.setOption(this.option)
    }else{
      
    } */
    //sessionStorage.setItem('refresh', 'true');
    history.go(-1);
  } 
  
  tableTooltip(params:any){
    var data
    if(this.serviceData.level == "1"){
      data = this.serviceData.tableDataZhong
    }else{
      data = [
        {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
      ]
    }
    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead style="font-size:18px;"><tr>';
        res+='<td style="text-align:center;width:30%;">名称</td>';
        res+='<td style="text-align:center;width:30%;">数量</td>'
        res+='<td style="text-align:center;width:30%;">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        for(var i=0;i<data.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;">'+data[i].name+'</td>'
          res+='<td style="text-align:center;">'+data[i].number+'</td>'
          res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
        }
        
        res+='</tbody>'
        res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+this.tabledata[0].totalCount+'</td><td style="text-align:center;">100%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }
 
}