ShangHaiYuan-AnXin/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-05-08 09:42:43
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-05-12 14:37:07
 */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {FormGroup, FormControl} from '@angular/forms';
import {EchartsDataService} from '../echarts-data.service';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
declare var echarts: any;

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

  /* campaignOne: FormGroup;
  campaignTwo: FormGroup; */
  constructor(private router: Router,public EchartsData:EchartsDataService,private route:ActivatedRoute,public snackBar: MatSnackBar) { }

  addtime= String(new Date().getFullYear())+'-01'//添加时间
  endtime= String(new Date().getFullYear())+'-0'+String(new Date().getMonth()+1)
  /* addtime=String(new Date().getFullYear()+new Date().getMonth())
  endtime=String(new Date().getFullYear()+new Date().getMonth()) */
  ngOnInit(): void {
    window.setTimeout(()=>{
      this.getechartsdata(true)
    },0)
  }
  //获取echarts数据
  async getechartsdata(chushi:boolean){
    /* var  date=new Date()
    var year=date.getFullYear();
    var month=date.getMonth()+1
    this.addtime=String(year)+'-01'
      this.endtime=String(year)+'-0'+String(month) */
    /* if(this.endtime=='0'&&this.addtime=='0'){
      
      let paramdataleft={
        objectType:3,
      }
      //获取左侧柱状图的数据
    await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends')
    this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
    console.log(this.leftzhuTable)
    this.leftzhuTable[0].forEach((value,index,array) => {
      if(array[index].month==date.getMonth()+1){
        this.dateNum.push(array[index].count)
        this.dateyue.push(array[index].year+'-'+array[index].month)
      }
      
    });
    } */
    
      for(var i=Number(this.addtime.split('-')[0]);i<=Number(this.endtime.split('-')[0]);i++){
        let paramdataleft={
          objectType:3,
          TrendYear:i
        }
        //获取左侧柱状图的数据
      await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends')
      this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
      //console.log(this.leftzhuTable)
      this.leftzhuTable[0].forEach((value,index,array) => {
        if(this.addtime.split('-')[0]!=this.endtime.split('-')[0]){
          if((array[index].year==Number(this.addtime.split('-')[0])&&array[index].month>=Number(this.addtime.split('-')[1]))||(array[index].year==Number(this.endtime.split('-')[0])&&array[index].month<=Number(this.endtime.split('-')[1]))){
            this.dateNum.push(array[index].count)
            this.dateyue.push(array[index].year+'-'+array[index].month)
          }
        }else{
          if(array[index].month>=this.addtime.split('-')[1]&&array[index].month<=this.endtime.split('-')[1]){
            this.dateNum.push(array[index].count)
            this.dateyue.push(array[index].year+'-'+array[index].month)
          }
        }
        
      });
      }
    
    //获取底端柱状图数据
    let paramBottom={
      TimeIntervalStart:this.addtime=='0'?'':this.endtime,
      TimeIntervalEnd:this.endtime=='0'?'':this.endtime
    }
    if(chushi){
      await this.EchartsData.getData(paramBottom,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations')
    this.bottomTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
    this.addNum= this.bottomTable[0].totalCount
    this.bottomTable[0].organizations.forEach((value,index,array) => {
      this.zhiNameData.push(array[index].organizationName)
      this.zhiNumData.push(array[index].count)
      if(index>0&&index<4){
        this.addyuan.push(array[index].organizationName)
      }
      
    });
    this.bottomzhutu()
    }
    
    //右侧饼状图数据
    let param={
      TimeIntervalStart:this.addtime=='0'?'':this.addtime,
      TimeIntervalEnd:this.endtime=='0'?'':this.endtime
    }
    await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes')
    this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
    this.leftzhuzhuangtu()
    this.rightbingtu()
    
  }
  //查询按钮
  findClick(){
    console.log(this.addtime,this.endtime)
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    if(this.addtime=='0'||this.endtime=='0'){
      this.snackBar.open('结束时间或者开始时间不能为空!','确定',config);
    }else{
      if(this.endtime<this.addtime){
        this.snackBar.open('结束时间不能大于开始时间!','确定',config);
      }else{
        this.leftzhutu.clear()
        this.leftzhutu.dispose()
        this.dateyue=[]
        this.dateNum = []
        this.zhiNameData = []
        this.zhiNumData = []
        this.addyuan=[]
        this.getechartsdata(false)
      }
    }
    
  }

  addNum=0//新增预案个数
  addyuan=[]
  leftzhuTable//左侧柱状图数据
  rightbTable//右侧饼图数据
  bottomTable//最低端柱状图数据
  leftzhutu
  optionLeftzhu//中间左侧柱状图实例
  dateyue = []
  dateNum = []
  zhiNameData = []
  zhiNumData = []
  rightbing
  optionRightbing//中间右侧柱状图
  bottomzhu//底部柱状图实例
  bottomZhuoption
  tiaoshiPao:any
  //中间左侧柱状图
  async leftzhuzhuangtu(){
    var ec = echarts as any;
    this.leftzhutu = ec.init(document.getElementById(`leftecharts`),'walden');
    this.optionLeftzhu = {
      grid: {
        //top: 10,
        containLabel:true,
        bottom:10,
        left:50
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'none'
      } 
  },
      xAxis: {
          type: 'category',
          data: this.dateyue,
          //axisLabel: this.axisLabel,
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
            
          }
      },
      /* tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip('',headName)
        },
        position: this.echartsData.tableTooltipNoShowq
      }, */
      dataZoom:[
        {
          type: 'inside'
      }, {
          type: 'slider'
      }
      ],
      series: [{
          name: '数量',
          data: this.dateNum,
          type: 'bar',
          markPoint: {
            symbolSize:[65, 65],
            data: this.EchartsData.qipao(this.tiaoshiPao,this.dateNum,this.dateyue)
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'38',
          //label: this.topTextlabel
      }]
    };
    this.leftzhutu.setOption(this.optionLeftzhu);
    /* this.leftzhutu.getZr().on('click', async (params)=>{
      console.log(111)
        const pointInPixel= [params.offsetX, params.offsetY];
        if (this.leftzhutu.containPixel('grid',pointInPixel)) {
          let xIndex=this.leftzhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
          //console.log(this.optionLeftzhu.xAxis.data[xIndex])
          if(this.optionLeftzhu.xAxis.data[xIndex]!=undefined){
            this.zhiNameData = []
            this.zhiNumData = []
            this.addyuan=[]
            let param={
              TimeIntervalStart:this.optionLeftzhu.xAxis.data[xIndex],
              TimeIntervalEnd:this.optionLeftzhu.xAxis.data[xIndex]
            }
           await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations')
            this.bottomTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
            console.log(this.bottomTable)
            this.addNum= this.bottomTable[0].totalCount
            this.bottomTable[0].organizations.forEach((value,index,array) => {
              this.zhiNameData.push(array[index].organizationName)
              this.zhiNumData.push(array[index].count)
              if(index>0&&index<4){
                this.addyuan.push(array[index].organizationName)
              }
              
            });
            //右侧饼状图数据
            await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes')
            this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
            this.bottomzhutu()
            this.rightbingtu()
          }
      }
      
      
    }); */
    
    
  }
  //中间右侧饼图
  indexData=[{name:'二维预案','value':1},{name:'三维预案','value':1}]//所有数据
  lengthdata=['二维预案','三维预案','文本预案','其他预案']
  rightbingtu(){
    this.rightbing = echarts.init(document.getElementById('rightecharts'),'walden');
    this.optionRightbing={
      /* title: {
        text: `建筑类型统计（${this.count}家）`,
        left: 'center',
          top: "7%",
          textStyle: {
            fontSize:31
          }
      }, */
      /* tooltip: {
        trigger: 'item',
        position: this.echartsData.tableTooltipNoShow2,
        formatter: (params)=>{
          this.echartsData.biaogeTishiZhi(params.data)
            return this.echartsData.res
        }
      }, */
      tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
      legend: {
        orient: 'vertical',
        //left:this.padHw?50:0,
        //right:this.padHw?20:250,
        top:20,
        right:30,
        textStyle:{
          fontSize:16,
          color:"#000000"
        }, 
        data: this.lengthdata
      },
      series: [
        {
          top:'0',
          name: '预案类型',
          type: 'pie',
          radius: '60%',
          center: ['50%', '53%'],
          label:{
            show:true,
            fontSize:16,
            formatter:'{b}{c}家\n{d|({d}%)}',
            rich: {
              d: {
                align: 'center',
                fontSize:18
              }
            },
          },
          data:[
            {value:this.rightbTable[0].planTypeStatistics.planTypes[0]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[0].count:0, name: '二维预案'},
            {value:this.rightbTable[0].planTypeStatistics.planTypes[1]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[1].count:0, name: '三维预案'},
            {value:this.rightbTable[0].planTypeStatistics.planTypes[2]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[2].count:0, name: '其他预案'},
            {value:this.rightbTable[0].planTypeStatistics.planTypes[3]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[3].count:0, name: '文本预案'}
        ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.rightbing.setOption(this.optionRightbing)
  }
  //最底部柱状图
  bottomzhutu(){
    var ec = echarts as any;
    this.bottomzhu = ec.init(document.getElementById(`bottomEcharts`),'walden');
    this.bottomZhuoption = {
      grid: {
        //top: 10,
        containLabel:true,
        bottom:10,
        left:50
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'none'
      } 
  },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          //axisLabel: this.axisLabel,
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
            
          }
      },
      dataZoom:[
        {
          type: 'inside'
      }, {
          type: 'slider'
      }
      ],
      series: [{
          name: '数量',
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            symbolSize:[65, 65],
            data: this.EchartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'38',
          //label: this.topTextlabel
      }]
    };
    this.bottomzhu.setOption(this.bottomZhuoption);
    /* this.bottomzhu.getZr().on('click',(params)=>{
      console.log(params)
    }) */
  }

}