ShangHaiYuan-AnXin/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { EchartsDataService } from '../../echarts-data.service';
declare var echarts: any;
@Component({
  selector: 'app-add-unit-three-line-details',
  templateUrl: './add-unit-three-line-details.component.html',
  styleUrls: ['./add-unit-three-line-details.component.scss']
})
export class AddUnitThreeLineDetailsComponent implements OnInit {

  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
  year:String
  buildingTypeName:String
  level:String
  setTimeoutObj//延时器需要清除
  qopao
  lastId
  ngOnInit(): void {
    this.serviceData.selectType=0
    this.dateInit ()
    this.route.queryParams.subscribe(params => {
      this.year = params['year'];
      this.buildingTypeName = params['buildingType'];
      this.lastId=params['id']
    });
    this.setTimeoutObj = window.setTimeout(()=>{
      this.getdata()
    },1000)
  }

  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    this.detailPlanEchart.clear()
    this.detailPlanEchart.dispose()
  }
  tabledata
  zongcount=0
  getdata(){
    let parzhi={
      BuildingTypeId:this.lastId,
      TrendType:this.serviceData.selectType,
      //TrendYear:this.year||''
    }
    let parbuild={
      OrganizationId:this.lastId,
      TrendType:this.serviceData.selectType,
      //TrendYear:this.year||''
    }
    this.serviceData.getData(this.serviceData.zuzhiorBuilding=='zhi'?parbuild:parzhi,`/api/StatisticsAnalysis`)
    this.setTimeoutObj = window.setTimeout(() => {
      this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
      console.log(this.tabledata)
        for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){
          if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.serviceData.selectStartMonth||this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.serviceData.selectEndMonth){
            this.date.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
            this.dateNum.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
            this.zongcount=this.zongcount+this.tabledata[0].companyStatistics.trendStatistics.added[i].count
          }
        }
      
      
      //this.oneInit (this.date,this.dateNum)
      this.qopao=this.serviceData.qipao(this.qopao,this.dateNum,this.zhiNameData)
      this.detailEcharts()
    }, 1000);
  }

  selectType:string = 'month'; //选择当前的 查询类型 按月/年

  //查询数据
  years:any = []
  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]

  //日期初始化
  dateInit () {
    let date = (new Date()).getFullYear()
    for (let i=date; i>=date-10;i--) {
      this.years.unshift(i)
    }
  }
  selectOneYear:any = (new Date()).getFullYear() //开始年份
  selectStartMonth:any = 1 //开始月份
  Submit (e) {
    
  }
  selectStartYear:any = (new Date()).getFullYear() //开始年份

  topTextlabel = {
    show: true, // 开启显示
    position: 'top', // 在上方显示
    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: 'middle',
    textStyle: { // 数值样式
      color: 'black',
      fontSize: 12
    }
  }//柱状图数值顶部显示
  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]

  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
  zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]


  detailPlanEchart
  option
  date = []
  dateNum = []

  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
    this.option = {
      grid: {
        top: 50,
        left:40,
        right: 20,
        //bottom: 20,
      },
      // 标题
      title: {
        text: this.buildingTypeName ,
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 30
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          if(params[0].seriesName == "year"){
            return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
          }else{
            return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
          }
        },
        position:this.serviceData.tableTooltipNoShow2
      },
      // x轴
      xAxis: {
        type: 'category',
        data: this.date,
        axisLabel: {
          textStyle:{
            fontSize :18,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :18,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: 'xxx',
          type: 'line',
          data: this.dateNum,
          barWidth :'38',
          markPoint: {
            symbolSize:[65, 65],
            data: this.qopao
        },
        }
      ],
    };
    this.detailPlanEchart.setOption(this.option);
    this.detailPlanEchart.getZr().on('click',params=>{
      const pointInPixel= [params.offsetX, params.offsetY];
      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.buildingTypeName,'id':this.lastId}})
        //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}});
      }
    });
  }
  //返回按钮
  backBtn(){
      window.history.go(-1)
  } 
  
  tableTooltip(params:any){
    var data = [
      {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
    ]
    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;">'+params.name+'</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<data.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+data[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
  }
}