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

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-01 15:24:39
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-07-07 14:07:26
 */
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-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.scss']
})
export class PageOneComponent implements OnInit {
  options:any;
  
  constructor(private router: Router,public echartsData:EchartsDataService) { }

  padHw
  orid
  ngOnInit() {
    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();
     }
    
    window.setTimeout(()=>{
      this.getechartsdata()
    })
    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
    //console.log(identityJsonparse)
  }
  ngOnDestroy(): void {
    this.indexBzt.clear()
    this.indexBzt.dispose()
  }
  async getechartsdata(){
    await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`)
    this.initCharts("pieone")
    this.initCharts("pietwo")
  }

  /* 首页饼状图 */
  indexBzt
  tabledata
  count
  indexData
  planCategoriesData=[]
  planStatusesData=[]
  initCharts(tid){
    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
    if(tid=='pieone')
    {
      this.tabledata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => {
        if(array[index].planCategoryName=='LevelOne'){
          this.planCategoriesData.push({name:'Ⅰ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:1})
        }else if(array[index].planCategoryName=='LevelTwo'){
          this.planCategoriesData.push({name:'Ⅱ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:2})
        }else if(array[index].planCategoryName=='LevelThree'){
          this.planCategoriesData.push({name:'Ⅲ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:3})
        }else if(array[index].planCategoryName=='LevelFour'){
          this.planCategoriesData.push({name:'Ⅳ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:4})
        }else if(array[index].planCategoryName=='LevelFive'){
          this.planCategoriesData.push({name:'Ⅴ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:5})
        }
      });
    }else{
      this.tabledata[0].planStatusStatistics.planStatuses.forEach((value,index,array) => {
        if(array[index].planStatusName=='New'){
          this.planStatusesData.push({name:'预案新增',value:array[index].count,type:1,planStatusName:array[index].planStatusName})
        }else if(array[index].planStatusName=='Auditing'){
          this.planStatusesData.push({name:'预案审核通过',value:array[index].count,type:3,planStatusName:array[index].planStatusName})
        }else if(array[index].planStatusName=='Approved'){
          this.planStatusesData.push({name:'预案编制',value:array[index].count,type:5,planStatusName:array[index].planStatusName})
        }else if(array[index].planStatusName=='Rejected'){
          this.planStatusesData.push({name:'预案审核退回',value:array[index].count,type:4,planStatusName:array[index].planStatusName})
        }else if(array[index].planStatusName=='Editing'){
          this.planStatusesData.push({name:'预案审核中',value:array[index].count,type:2,planStatusName:array[index].planStatusName})
        }
      });
    }
    
    
    var ec = echarts as any;
    this.indexBzt = ec.init(document.getElementById(tid),'walden');
    var options={
      title: {
          text:tid=='pieone'?`预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` :`预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`,
          top: "7%",
          left: 'center',
          textStyle:{
            fontSize:this.padHw?25: 31
          }
      },
      tooltip: {
          trigger: 'item',
            formatter:  (params)=>{
            this.echartsData.biaogeTishiyuan(params.data,tid)
            return this.echartsData.res
          }
      },
      legend: {
        bottom: 50,
        left: 'center',
          //padding:20,
          // itemWidth:60,
          // itemHeight:25,
          textStyle:{
            fontSize:this.padHw?15: 18,
            color:"#000000"
          },
          data:tid=='pieone'?['Ⅰ级预案', 'Ⅱ级预案', 'Ⅲ级预案', 'Ⅳ级预案', 'Ⅴ级预案'] :['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
      },
      series: [
          {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              center: ['50%', '45%'],
              label:{
                normal:{
                show:true,
                // position: 'inner',
                fontSize:this.padHw?14: 18,
                formatter:this.padHw?'{b} \n{c}份({d}%)' :'{b} {c}份\n({d}%)',
                },
                rich: {
                  d: {
                    align: 'center',
                  }
                },
                
              },
              data:tid=='pieone'?this.planCategoriesData:this.planStatusesData,
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    };
    this.indexBzt.on('click', (params) => {
      // console.log(params)
      if(tid=='pieone'){
        for(var i=0;i<this.tabledata[0].planCategoryStatistics.planCategories.length;i++){
          if(this.tabledata[0].planCategoryStatistics.planCategories[i].planCategoryName==params.data.planStatusName){
            if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){
              this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.forEach((element,index,array) => {
                if(array[index].organizationId==this.orid){
                  array.splice(index,1)
                }
                window.setTimeout(()=>{
                  if(array.length>0){
                    this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone'}});
                  }
                  else{
                    this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pieone'}});
                  }
                })
              });
              
            }
            else if(this.echartsData.level=='3'){
              //中队跳转
              this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pieone'}});
            }
          }
        }
      }else{
        for(var i=0;i<this.tabledata[0].planStatusStatistics.planStatuses.length;i++){
          if(this.tabledata[0].planStatusStatistics.planStatuses[i].planStatusName==params.data.planStatusName){
            if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.length>0){
              this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.forEach((element,index,array) => {
                if(array[index].organizationId==this.orid){
                  array.splice(index,1)
                }
                window.setTimeout(()=>{
                  if(array.length>0){
                    this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pietwo'}});
                  }
                  else{
                    this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}});
                  }
                })
              });
              
            }
            else if(this.echartsData.level=='3'){
              //中队跳转
              this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}});
            }
          }
        }
      }
      
      
      
    });
    this.indexBzt.setOption(options);
  }
  /**
   * @name: 表格提示框封装
   * @test: test font
   * @msg: 
   * @param {string(表头)}
   * @return {type} 
   */
  biaogeTishi(biaotou:string){
    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
    var jsonObj =  JSON.parse(shuju);
    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:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead><tr>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        for(var i=0;i<jsonObj.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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
  }

}