ShangHaiYuan-AnXin/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService,} from '../../echarts-data.service';
declare var echarts: any;
declare var CryptoJS
@Component({
  selector: 'app-add-unit-one',
  templateUrl: './add-unit-one.component.html',
  styleUrls: ['./add-unit-one.component.scss']
})
export class AddUnitOneComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  setTimeoutObj//延时器需要清除
  tabledata
  padHw
  orid//获取本组织id

  ngOnInit(): void {
    if(window.matchMedia("(max-width: 1400px)").matches){
      this.padHw=true
      //this.padjt=
    }else{
      this.padHw=false
    }
    if(sessionStorage.getItem('refresh') === 'true') {
      sessionStorage.removeItem('refresh');
      location.reload();
     }
    /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`))
    this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */
    let jwt = sessionStorage.getItem("token");
    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
    let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
    let identityJsonparse=JSON.parse(identityJson)
    this.orid=identityJsonparse.oid
    this.setTimeoutObj = window.setTimeout(()=>{
     this.getechartsdata()
    })
    this.echartsData.eventEmit.subscribe((value: any) => {
      if (value == 'echarts') {
        setTimeout(() => {
          this.indexBzt.resize()
        }, 500);
      
      }
    });
  }
  //更新echarts视图
  updateEcharts(){
    this.indexBzt.resize()
  }
  //获取服务层数据
  async getechartsdata(){
    await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`)
    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
    //console.log(this.tabledata)
    this.initCharts("pieone")
    this.initCharts("pietwo")
  }
  //组件销毁时
  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    this.indexBzt.clear()
    this.indexBzt.dispose()
  }
  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
  indexBzt//首页饼状图实例
  /* 首页饼状图 */
  lengthBuildData=[]
  lengthOrData=[]
  buildData=[]
  orData=[]
  initCharts(tid){
    for(var i=0;i<this.tabledata[0].buildingTypeStatistics.buildingTypes.length;i++){
      this.buildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i])
      this.lengthBuildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i].buildingTypeName)
    }
    for(var i=0;i<this.tabledata[0].organizationStatistics.organizations.length;i++){
      this.orData.push(this.tabledata[0].organizationStatistics.organizations[i])
      if(this.tabledata[0].organizationStatistics.organizations[i].organizationName.length>5&&this.padHw){
        this.tabledata[0].organizationStatistics.organizations[i].organizationName=this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(0, 5)
        +'\n'+this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(5)
      }
      this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName)
    }
    this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
    this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}})
    this.indexBzt = echarts.init(document.getElementById(tid),'walden');
    let options={
      title: {
        text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`,
        left: 'center',
        //top: "5%",
        //bottom:800,
        textStyle: {
          fontSize:28
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return tid=="pieone"?this.biaogeTishi(params.data,'one'):this.biaogeTishi(params.data,'two')
          //return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name)
        },
        position:this.echartsData.tableTooltipNoShow2
      },
      legend: {
        //type: tid=="pieone"?'scroll':'',
        //orient: 'vertical',
        //left: tid=="pieone"?0:650,
        //right:30,
        //top:100,
        //bottom:tid=="pieone"?600:500,
        bottom: 90,
        left: 'center',
        textStyle:{
          fontSize:14,
          color:"#000000"
           },
        data: tid=="pieone"?this.lengthOrData:this.lengthBuildData
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius:this.padHw?'42%':'50%',
          center: ['48%', '53%'],
          bottom:130,
          left:30,
          label:{
            show:true,
            fontSize:16,
            formatter:'{b}\n{c}家{d|({d}%)}',
            rich: {
              d: {
                align: 'center',
                fontSize:16
              }
            },
          },
          data:tid=="pieone"?this.orData:this.buildData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.indexBzt.on('click', (params) => {
      tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building"
      if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tishiData.length>0){
        //总队,支队，大队跳转
        this.tishiData.forEach((value,index,array) => {
          if(array[index].organizationId==this.orid){
            array.splice(index,1)
          }
          if(array.length>0){
            this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id,'type':tid=="pieone"?'zhi':'build'}});
          }
          else{
            this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}});
          }
        });
        
      }else{
        //中队跳转
        this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}});
      }
      
      
    });
    this.indexBzt.setOption(options);
  }
  res
  tishiData
  biaogeTishi(datas,type){
    //console.log(datas)
    this.res=''
    this.tishiData=''
    if(type=='two'){
      for(var a in this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes){
        if(this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].buildingTypeName==datas.name){
          this.tishiData=this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].organizations
        }
      }
    }else{
      for(var a in this.echartsData.obdata[0].organizationStatistics.organizations){
        if(this.echartsData.obdata[0].organizationStatistics.organizations[a].organizationId==datas.id){
          this.tishiData=this.echartsData.obdata[0].organizationStatistics.organizations[a].buildingTypes
        }
      }
    }
    
    //console.log(this.tishiData)
    var countall=0//总计
    var countbi=0//站比
    var allCountbi=0//总站比
      for(var i=0;i<this.tishiData.length;i++){
        countall+=this.tishiData[i].count
      }
      this.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;">'+datas.name+'</span></div>'
      this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:14px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
      this.res+='<thead style="font-size:18px;"><tr>';
      this.res+='<td style="text-align:center;width:30%;">名称</td>';
      this.res+='<td style="text-align:center;width:30%;">数量</td>'
      this.res+='<td style="text-align:center;width:30%;">总占比</td>'
      this.res+='</tr></thead>'
      this.res+='<tbody>';
      for(var i=0;i<this.tishiData.length;i++){
        countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00
        allCountbi=allCountbi+countbi
       this.res+='<tr>'
       if(type=='two'){
        this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
       }
       else{
        this.res+='<td style="text-align:center;">'+this.tishiData[i].buildingTypeName+'</td>'
       }
       
       this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
       if(countall==0){
        this.res+='<td style="text-align:center;">0%</td></tr>'
       }else{
        this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>'
       }
       
      }
      this.res+='</tbody>'
      this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">100%</td></tfoot>'
      this.res+='</table></div></div>'
      return this.res
  }

  
}