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';
declare var echarts: any;
declare var AMap: any;
declare var AMapUI: 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:any; //地图
  yuandata
   ngOnInit() {
    this.level=sessionStorage.getItem("level")
     this.getechartsdata()
    /* this.emitService.eventEmit.subscribe((value: any) => {
      if (value == 'echarts') {
        setTimeout(() => {
          this.updateEcharts()
        }, 500);
      }
    });
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.updateEcharts()
      }, 0);
    }) */

    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//组织级别
  orid
  mapInit () {
    //创建地图
    this.map = new AMap.Map('chartMap', {
      cursor: 'default',
      zooms:[8,16],
      mapStyle:"amap://styles/grey", 
      // bubble: true
    });

    let colors = [
      "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
      "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
      "#651067", "#329262", "#5574a6", "#3b3eac"
    ];
    
    AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> {

      //创建一个实例
      let districtExplorer = new DistrictExplorer({
        map: this.map,
        eventSupport: true, //打开事件支持
      });

      // let adcode = this.adcode; //行政编码 
      let adcode
      if(sessionStorage.getItem("realName") == "上海总队"){
        adcode = 310000
      }else{
        adcode = 310000
      }

      districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {

          //更新地图视野
          this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            // console.log(123,feature,i)
  
            let fillColor = colors[i % colors.length];
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
      });
      if(this.level=="0"||this.level=="1"||this.level=="2"){
        //区域内点击
      districtExplorer.on('featureClick', (e, feature) =>{
        //console.log(feature)
        let paramsdata:any ={
          name:feature.properties.name,
          level:Number(this.level)+1
        }
        this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{
          console.log(data)
          this.orid=data[0]
          this.getechartsdata()
        })
        
        let props = feature.properties;
        adcode = props.adcode
        let fillColor2
        if(props.level == 'city'){
            fillColor2 = null
        }else{
            fillColor2 = '#d0daee'
        }
        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
          //更新地图视野
          // this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            let fillColor = colors[i % colors.length];
            // console.log(111,fillColor)
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: fillColor2, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
      
        //this.planState.setOption(this.planStateOptionsZhong);
        //this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong);
        //this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong);
        /* this.planNum = ["0","0","3","1","6","5"]
        this.keyUnitNum = 666 */
        //this.dataGetNum = 456

        /* this.threePlanNum = "867"
        this.twoPlanNum = "485"
        this.cardPlanNum = "756"
        this.otherPlanNum = "658" */
      });

      districtExplorer.on('outsideClick', (e) => {
        this.orid=''
        this.getechartsdata()
        // console.log('区域外点击');
        let adcode
        if(sessionStorage.getItem("realName") == "上海总队"){
          adcode = 310000
        }else{
          adcode = 310000
        }
        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
          //更新地图视野
          // this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            let fillColor = colors[i % colors.length];
            // console.log(111,fillColor)
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
        /* this.planState.setOption(this.planStateOptionsZhi);
        this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi);
        this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); */
        /* this.planNum = ["0","2","2","6","7","8"]
        this.keyUnitNum = 8036
        this.dataGetNum = 6578 */

        /* this.threePlanNum = "4374"
        this.twoPlanNum = "9693"
        this.cardPlanNum = "6403"
        this.otherPlanNum = "2208" */
      })
      }
      
      
    });


  }
  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
  }
}