ShangHaiYuan-AnXin/src/app/statistic-analysis/home/home.component.ts

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router';
import { EchartsDataService } from '../echarts-data.service';
import { MapFactory } from '@src/modules/map/declare/factory';
import { IMap } from '@src/modules/map/declare/map';
declare var echarts: any;

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

  constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { }

  map:IMap; //地图
  yuandata
   ngOnInit() {
    this.getechartsdata()
    window.setTimeout(()=>{
      /* this.unitType()
      this.unitData()
      this.keyUnit() */
      this.mapInit() //初始化地图
    },0)
  }

  //更新echarts视图
  /* updateEcharts(){
    this.planState.resize()
    this.chartDwsjcj.resize()
    this.chartZdgzqy.resize()

  } */
  //获取数据
  ordata
  buildtableData
  lengthdata=[]//建筑提示数据
  buildcount=0//建筑总数
  indexData=[]//建筑所有数据
  async getechartsdata(){
    let paramsdata:any = {
      OrganizationId:this.orid||'',
      //organizationId:'1'
    }
    //获取组织机构数据
    await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/Companies`)
    this.ordata=JSON.parse(JSON.stringify(this.emitService.allDate))
    console.log(this.ordata)
    this.keyUnitNum=this.ordata[0].organizationStatistics.totalCount
    this.unitData()
    //获取预案状态统计数据
    await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/Plans`)
    this.unitType()
    //获取建筑类型统计数据
    await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/BuildingTypes`)
    this.keyUnit()
  }
  

  threePlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  twoPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  cardPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  otherPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  } 
  
  //计划更新页面跳转
  scheduled(){
    this.router.navigate(['/statisticanalysis/scheduledUpdates'])
  }

  ngOnDestroy(): void {
    /* this.planState.clear()
    this.planState.dispose()
    this.chartDwsjcj.clear()
    this.chartDwsjcj.dispose()
    this.chartZdgzqy.clear()
    this.chartZdgzqy.dispose() */
    
  }
  //初始化地图
  adcode:any  //行政编码 
  level = sessionStorage.getItem("level")//组织级别
  orid

   //封装Gaode 
  getEchartsData (data) {
    return new Promise((resolve, reject)=>{
      let paramsdata:any ={
        name:data.properties.name,
        level:Number(this.level)+1
      }
      this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{
        this.orid=data[0]
        this.getechartsdata()
        resolve('success')
      })
    })
  }
  setEchartsData () {
    this.orid=''
    this.getechartsdata()
  }
  //封装Gaode 

  mapInit () {
    //创建地图
    this.map = MapFactory.MapInstance('chartMap', {
      cursor: 'default',
      zooms:[8,16],
      mapStyle:"amap://styles/grey", 
    });
    this.map.setAdministrativeAreaStyle(this,this.getEchartsData,this.setEchartsData)
  }
  planNum = []
  keyUnitNum
  dataGetNum = 6578

  threePlanNum = "4374"
  twoPlanNum = "9693"
  cardPlanNum = "6403"
  otherPlanNum = "2208"


  aPlan = '328'
  bPlan = '219'
  cPlan = '168'
  dPlan = '254'
  ePlan = '116'
  ngAfterViewInit(): void {
  }

  planState
  
  
  //预案状态统计
  pagedata
  pagedataCount
  unitType () {
    this.planNum=[]
    this.pagedata=JSON.parse(JSON.stringify(this.emitService.allDate))
    console.log(this.pagedata)
    this.pagedataCount=String(this.pagedata[0].planStatusStatistics.totalCount)
    for(var i=0;i<this.pagedataCount.length;i++){
      this.planNum.push(this.pagedataCount[i])
    }
    //this.planNum.push(this.pagedataCount.split(','))
    if(this.pagedata[0].planTypeStatistics.planTypes.length<=0){
      this.threePlanNum='0'
      this.twoPlanNum='0'
      this.cardPlanNum='0'
      this.otherPlanNum='0'
    }else{
      this.pagedata[0].planTypeStatistics.planTypes.forEach((value,index,array) => {
        if(array[index].planTypeName=='Plan2D'){
          this.twoPlanNum=array[index].count
        }else if(array[index].planTypeName=='Plan3D'){
          this.threePlanNum=array[index].count
        }else if(array[index].planTypeName=='Other'){
          this.otherPlanNum=array[index].count
        }else if(array[index].planTypeName=='PlanText'){
          this.cardPlanNum=array[index].count
        }
      });
    }
    if(this.pagedata[0].planCategoryStatistics.planCategories.length<=0){
      this.aPlan='0'
      this.bPlan='0'
      this.cPlan='0'
      this.dPlan='0'
      this.ePlan='0'
    }else{
      this.pagedata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => {
        if(array[index].planCategoryName=='LevelOne'){
          this.aPlan=array[index].count
        }else if(array[index].planCategoryName=='LevelTwo'){
          this.bPlan=array[index].count
        }else if(array[index].planCategoryName=='LevelThree'){
          this.cPlan=array[index].count
        }else if(array[index].planCategoryName=='LevelFour'){
          this.dPlan=array[index].count
        }else if(array[index].planCategoryName=='LevelFive'){
          this.ePlan=array[index].count
        }
      });
    }
    
    
    /*  */
    let planStateOptionsZhi = {
      title: {
          text: `预案状态统计（${this.pagedata[0].planStatusStatistics.totalCount}份）`,
          left: 'left', 
          textStyle:{
            color:'#fff',
            fontWeight:'normal'
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
      },
      series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '60%',
            center: ['50%', '58%'],
            label:{
              show:true,
              //fontSize:10,
              formatter:'{b}\n{d|{c}份}',
              rich: {
                d: {
                  align: 'center',
                }
              },
              
            },
            data: [
              {value:this.pagedata[0].planStatusStatistics.planStatuses[0]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[0].count:0, name: '预案新增',type:1,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[0]!=undefined?this.pagedata[0].planStatusStatistics.planStatuses[0].planStatusName:''},
              {value:this.pagedata[0].planStatusStatistics.planStatuses[2]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[2].count:0, name: '预案审核通过',type:3,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[2]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[2].planStatusName:''},
              {value:this.pagedata[0].planStatusStatistics.planStatuses[4]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[4].count:0, name: '预案编制',type:5,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[4]!=undefined?this.pagedata[0].planStatusStatistics.planStatuses[4].planStatusName:''},
              {value:this.pagedata[0].planStatusStatistics.planStatuses[3]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[3].count:0, name: '预案审核退回',type:4,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[3]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[3].planStatusName:''},
              {value:this.pagedata[0].planStatusStatistics.planStatuses[1]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[1].count:0, name: '预案审核中',type:2,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[1]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[1].planStatusName:''}
          ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
          }
      ]
    };
    this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden');
    this.planState.setOption(planStateOptionsZhi);
    this.planState.on("click",(params) => {
      this.router.navigate(['/statisticanalysis/statePageOne'])
    })
  }

  //新增、删除单位统计
  chartDwsjcj
  addtable
  addxdata=[]
  addydata=[]
  chartDwsjcjOptionsZhong =  {
    // color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
    // 标题
    title: {
      text: '新增、删除单位统计',
      left: 0,
      top: 0,
      textStyle:{
        color:'#fff',
        fontWeight:'normal'
      },
    },
    grid: {
      left: 30,
      right: 0,
    },
    //图例
    legend: {
      top: 0,
      data: ['新增单位', '删除单位', ],
      icon: 'circle',
      itemGap: 20,
    },
    //提示框
    tooltip: {
      trigger: 'axis',
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"],
      axisLabel: {
        interval: 0,

        formatter:function(value){
          var ret = "";//拼接加\n返回的类目项 
          var maxLength = 5;//每项显示文字个数
          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;
          }
        } //function

      }
    },
    // y轴
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.4)'
        }
      },
    },
    // 数据
    series: [
      {
        name: '新增单位',
        type: 'bar',
        data: [88, 45, 95, 105, 75, 89, 69, 110, 96, 90, 80, 78, 94, 102],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }, {
        name: '删除单位',
        type: 'bar',
        data: [35, 33, 27, 30, 35, 36, 28, 32, 36, 22, 19, 28, 34, 36],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }
    ],
  };
  unitData () {
    this.addxdata=[]
    this.addydata=[]
    this.addtable=JSON.parse(JSON.stringify(this.emitService.allDate))
    this.addtable[0].organizationStatistics.organizations.forEach((value,index,array) => {
      this.addxdata.push(array[index].organizationName)
      this.addydata.push(array[index].count)
    });
    let chartDwsjcjOptionsZhi =  {
      // 标题
      title: {
        text: `新增单位统计(${this.addtable[0].totalCount}家)`,
        left: 0,
        top: 0,
        textStyle:{
          color:'#fff',
          fontWeight:'normal'
        },
      },
      grid: {
        //containLabel:true,
        left: 30,
        right: 0,
        bottom:30
      },
      //图例
      /* legend: {
        top: 0,
        data: ['新增单位' ],
        icon: 'circle',
        itemGap: 20,
      }, */
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: this.addxdata,
        axisLabel: {
          interval: 0,
  
          formatter:function(value){
            var ret = "";//拼接加\n返回的类目项 
            var maxLength = 5;//每项显示文字个数
            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;
            }
          } //function
  
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.4)'
          }
        },
      },
      // 数据
      series: [
        {
          name: '新增单位',
          type: 'bar',
          data: this.addydata,
          label: {
            show: false,
            position: "top",
            formatter: '{c}',
            color: "#fff",
          },
          barMaxWidth:'20%'
        }
        /* , {
          name: '删除单位',
          type: 'bar',
          data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ],
          label: {
            show: false,
            position: "top",
            formatter: '{c}',
            color: "#fff",
          }
        } */
      ],
    };
    this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'),'walden');
    this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi);
    this.chartDwsjcj.on("click",(params) => {
      this.router.navigate(['/statisticanalysis/addUnit_one'])
    })
  }

  chartZdgzqy
  
  
  //建筑类型统计
  keyUnit () {
    this.buildcount=0
    this.buildtableData=JSON.parse(JSON.stringify(this.emitService.allDate))
    //console.log(this.buildtableData)
    for(var i=0;i<this.buildtableData[0].buildingTypes.length;i++){
      this.lengthdata.push(this.buildtableData[0].buildingTypes[i].buildingTypeName)
      this.buildcount=this.buildcount+this.buildtableData[0].buildingTypes[i].count
      this.indexData.push(this.buildtableData[0].buildingTypes[i])
    }
    //JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
    this.indexData=this.indexData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
    let chartZdgzqyOptionsZhi = {
      title: {
        text: `建筑类型统计（${this.buildcount}家）`,
        top: -5,
        left: 'left', 
        textStyle:{
          color:'#fff',
          fontWeight:'normal'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}家 ({d}%)'
      },
      // legend: {
      //   orient: 'vertical',
      //   right: 150,
      //   top:80,
      //   data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
      // },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '70%',
          center: ['50%', '61%'],
          label:{
            show:true,
            // fontSize:13,
            formatter:'{b}{c}家',
            rich: {
              d: {
                align: 'center',
              }
            },
          },
          data: this.indexData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden');
    this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi);
    this.chartZdgzqy.on("click",(params) => {
      this.router.navigate(['/statisticanalysis/buildingType_one'])
    })
  }

  isNumList:boolean = true
  changeNumList(){
    this.isNumList = !this.isNumList
  }
}