ShangHaiYuan-AnXin/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-05 13:50:45
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-07-22 11:28:02
 */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service'
declare var echarts: any;
@Component({
  selector: 'app-page-zhong-dui-details',
  templateUrl: './page-zhong-dui-details.component.html',
  styleUrls: ['./page-zhong-dui-details.component.scss']
})
export class PageZhongDuiDetailsComponent implements OnInit {

  constructor( public route: ActivatedRoute,public data: EchartsDataService,private router: Router) { }
  
  zhongNameData = []
  zhongNumData = []
  tiaoshiPao:any
  headtext:string;
  headName:string;
  type
  lastid
  tabledata
  organizationId=[]
  padHw
  tid
  yuanName
  pieonetype//判断是级别还是类型，上个页面传过来的参数
  planType//预案类型
  ngOnInit(): void {
    if(sessionStorage.getItem('refresh') === 'true') {
      sessionStorage.removeItem('refresh');
      location.reload();
     }
     if(window.matchMedia("(max-width: 1400px)").matches){
      this.padHw=true
      //this.padjt=
    }else{
      this.padHw=false
    }
    let level:string;
      this.route.queryParams.subscribe(param=>{
        //this.headtext=param.headtext
        level=param.level
        this.headName=level;
        this.type=param.type
        this.lastid=param.id
        this.tid=param.tid
        this.yuanName=param.name
        this.pieonetype=param.pieonetype
      }); 
      if(this.yuanName=='二维预案'){
        this.planType=1
      }else if(this.yuanName=='三维预案'){
        this.planType=2
      }else if(this.yuanName=='其他预案'){
        this.planType=4
      }else if(this.yuanName=='文本预案'){
        this.planType=16
      }
      window.setTimeout(()=>{
        this.getechartsdata()
    })
  }
  ngOnDestroy(): void {
    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:'',
      OrganizationId:this.lastid,
      PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:''
    }
    await this.data.getData(paramdata,this.tid=='pieone'&&this.pieonetype=='true'?'/api/StatisticsAnalysis/Plans/Category':this.tid=='pieone'&&this.pieonetype=='false'?'/api/StatisticsAnalysis/Plans/Type': `/api/StatisticsAnalysis/Plans/Status`)
    this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
        // console.log(this.tabledata)
        for(var i=0;i<this.tabledata[0].organizations.length;i++){
          this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName)
          this.zhongNumData.push(this.tabledata[0].organizations[i].count)
          this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
        }
      this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
      this.detailEcharts()
  }
  //返回
  goBack () {
    sessionStorage.setItem('refresh', 'true');
    history.go(-1);
   
    //this.echartsData.statefulInspectionToggle = true
  }
  axisLabel = {
    interval: 0,
    //rotate:-30,  
    textStyle:{
      fontSize :15,
      color:'#000000'
    },
    formatter:function(value)  
      {    
        var ret = "";//拼接加\n返回的类目项  
        var maxLength = 2;//每项显示文字个数  
        var valLength = value.length;//X轴类目项的文字个数  
        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
        if (rowN > 1)//如果类目项的文字大于3,  
        {  
            for (var i = 0; i < rowN; i++) {  
                var temp = "";//每次截取的字符串  
                var start = i * maxLength;//开始截取的位置  
                var end = start + maxLength;//结束截取的位置  
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                temp = value.substring(start, end) + "\n";  
                ret += temp; //凭借最终的字符串  
            }  
            return ret;  
        }  
        else {  
            return value;  
        }  
      }
  }//echarts两个字换行
  detailPlanEchart
  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden');  
    var option = {
      title: {
        text: this.headName+this.yuanName+`总数(${this.tabledata[0].totalCount})`,
        left: "center",
        top: "0",
        textStyle: {
          fontSize: 30
        }
      },
      grid: {
        containLabel:true,
        top: 110,
        //bottom: 10
    },
      xAxis: {
          id:this.organizationId,
          type: 'category',
          data: this.zhongNameData,
          axisLabel:this.padHw?this.axisLabel: {
            //this.axisLabel,
            interval: 0,
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishida(params)
        }
      },
      series: [{
          data: this.zhongNumData,
          type: 'bar',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'38'
      }]
    };
    this.detailPlanEchart.setOption(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];
        this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':option.xAxis.data[xIndex],'name':this.yuanName,'id':option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}});
      }
      
    });
    
  }

 
  tableTooltip(params:any){
    var 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:30px;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><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><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }
}