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-31 09:47:55
 */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
//import {Foimport { 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()) + '-' + String(("0" + (new Date().getMonth() + 1)).slice(-2))//添加时间
  endtime = String(new Date().getFullYear()) + '-' + String(("0" + (new Date().getMonth() + 1)).slice(-2))
  /* addtime=String(new Date().getFullYear()+new Date().getMonth())
  endtime=String(new Date().getFullYear()+new Date().getMonth()) */
  ngOnInit(): void {
    console.log(this.addtime,this.endtime,7899)
    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.addtime,
      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))
    console.log(this.rightbTable)
    this.rightbTable[0].planTypeStatistics.planTypes.forEach((value,index,array) => {
      if(array[index].planTypeName=='Plan2D'){
        this.indexData.push({name:'二维预案',value:array[index].count})
      }else if(array[index].planTypeName=='Plan3D'){
        //array[index].planTypeName=='三维预案'
        this.indexData.push({name:'三维预案',value:array[index].count})
      }else if(array[index].planTypeName=='Other'){
        //array[index].planTypeName=='其他预案'
        this.indexData.push({name:'其他预案',value:array[index].count})
      }else if(array[index].planTypeName=='PlanText'){
        //array[index].planTypeName=='文本预案'
        this.indexData.push({name:'文本预案',value:array[index].count})
      }
    });
    console.log(this.indexData)
    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.indexData = []
        //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 :14,
              color:'#000000'
            }
            
          }

        
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :14,
              color:'#000000'
            }
            
          }

        
      },
      /* tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip('',headName)
        },
        position: this.echartsData.tableTooltipNoShowq
      }, */
      dataZoom: [
        {
          type: 'slider',
          bottom:2
      }
      ],
      series: [{
        name: '数量',
        data: this.dateNum,
        type: 'bar',
        markPoint: {
          symbolSize: [65, 65],
          data: this.EchartsData.qipao(this.tiaoshiPao, this.dateNum, this.dateyue)
        },
        itemStyle: {
          normal:{
           color: "#3E91F9" 
          }
        },
        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 = []//所有数据
  lengthdata = ['二维预案', '三维预案', '文本预案', '其他预案']
  rightbingtu() {
    this.rightbing = echarts.init(document.getElementById('rightecharts'), 'walden');
    if (!this.indexData.length) {
      return
    }
    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
      },
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      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: '文本预案' }
          ], */
          data:this.indexData,
          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:2,
        left:50
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'none'
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          //axisLabel: this.axisLabel,
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :14,
              color:'#000000'
            },
            interval: 0,
            rotate: this.zhiNumData.length >= 10? 60 : 0, 
        formatter:function(value){
          var ret = "";//拼接加\n返回的类目项 
          var maxLength = 9;//每项显示文字个数
          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
          }

        
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :14,
              color:'#000000'
            }
            
          }
      },
      dataZoom: [
        {
          type: 'slider',
          bottom:90,
          //backgroundColor:'rgba(47,69,84,-0.2)',
          dataBackground:{
            areaStyle:{
              opacity:0
            }
          }
      }
      ],
      series: [{
        name: '数量',
        data: this.zhiNumData,
        type: 'bar',
        markPoint: {
          symbolSize: [65, 65],
          data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData)
        },
        itemStyle: {
          normal:{
           color: "#3E91F9" 
          }
        },
        barWidth :'38',
          //label: this.topTextlabel
        }]
      };
      this.bottomzhu.setOption(this.bottomZhuoption);
      /* this.bottomzhu.getZr().on('click',(params)=>{
        console.log(params)
      }) */
    }
  
  }