ShangHai-YuAn/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-02 16:21:18
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-09-07 08:55:28
 */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { DateAdapter } from '@angular/material/core';
import {EchartsDataService,} from '../../echarts-data.service'
declare var echarts: any;

@Component({
  selector: 'app-delete-two',
  templateUrl: './delete-two.component.html',
  styleUrls: ['./delete-two.component.scss']
})
export class DeleteTwoComponent implements OnInit {
  options:any;
  datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月'];
  datayuey=[210, 160, 150, 140, 130, 120, 110,120,150];
  datanianx=[2019,2020];
  dataniany=[201,174]

  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
  /* @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */

  ngOnInit(): void {
    this.dateInit()
    
    window.setTimeout(()=>{

      this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
      
      /* else if(this.selectType=='year'){
        this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
      } */
      
    },0)
  }
  ngOnDestroy():void{
    this.headZx.clear()
    this.headZx.dispose()
  }

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

  //查询数据
  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() //开始年份
  selectTwoYear:any = (new Date()).getFullYear() //结束年份
  selectStartMonth:any = 1 //开始月份
  selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
  //点击月
  monthClick(){
    this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
  }
  //按月查询
  monthSubmit (e) {
    this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
    if (e.selectTwoYear > e.selectOneYear) {
      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
      console.log(startTime)
      console.log(endTime)
    } else if (e.selectTwoYear === e.selectOneYear) {
      if(e.selectEndMonth >= e.selectStartMonth) {
        let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
        let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
        console.log(startTime)
        console.log(endTime)
      } else {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请选择正确时间区段','确定',config);
      }
    }else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择正确时间区段','确定',config);
    }
  }



  selectStartYear:any = (new Date()).getFullYear() //开始年份
  selectEndYear:any = (new Date()).getFullYear() //结束年份
  //点击年
  yearClick(){
    this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
    this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
    this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
    this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
    this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
    this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
    this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
    this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
    this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany)
  }
  //按年查询
  yearSubmit (e) {
    console.log(this.selectType)
    this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
    this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
    this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
    this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
    this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
    this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
    this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
    this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
    this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany)
    if (e.selectEndYear >= e.selectStartYear) {
      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择正确时间区段','确定',config);
    }
  }

  /**
   * @name: 折线图
   * @test: test font
   * @msg: 
   * @param {divid(传入的div),headtext(标题)} 
   * @return {type} 
   */  
  headZhexian(divid:string,headtext:string,datayuex,datayuey){
    var dianji:boolean=headtext=="删除数量总统计" ? false:true;
    var ec = echarts as any;
    this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp');
<<<<<<< HEAD
    this.options = {
      grid: {
        top: 50,
        left:40,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: `${headtext}`,
        left:'center',
        top: -4,
        //副标题文本样式
    　subtextStyle:{
      color:'#999',
      fontWeight:'bold',
    },
=======
    var options = {
        grid: {
          top: 50,
          left:40,
          right: 20,
          bottom: 20,
        },
        // 标题
        title: {
          text: `${headtext}`,
          left:'center',
          top: -4,
          //副标题文本样式
      　subtextStyle:{
          color:'#999',
          fontWeight:'bold',
        },
>>>>>>> b56d7ae0c7cd644e4ed01e4efc5232a7cfdf07d3
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 22,
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          return this.biaogeTishi(`${headtext}`)
        },
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0',
        position: this.echartsData.tableTooltipNoShow
      },
      xAxis: {
          type: 'category',
          boundaryGap:true,
          data: datayuex,
          axisLabel: {
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {
              color: "#000",
            },
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: '#999',
            }
          }
      },
      yAxis: {
          type: 'value',
          axisLabel: {
            color: "#000" //刻度线标签颜色
          },
            //设置坐标轴字体颜色和宽度
            axisLine: {
            lineStyle: {
              color: "#000",
            }
          }
      },
      series: [{
          data: datayuey,
          type: 'line',
          clickable:false,
          /* lineStyle:{
            color:'#1369bf'
          }, */
          /* markLine: {
            symbol: ['none', 'none'],
            label: {show: false},
            lineStyle:{
              color:'#9A9A9A',
              type:'solid',
            },
            data: [
                {xAxis: 1},
                {xAxis: 2},
                {xAxis: 3},
                {xAxis: 4},
                {xAxis: 5},
                {xAxis: 6},
                {xAxis: 7}
            ]
        }, */
      }]
    };
    this.headZx.getZr().on('click', (params) => {
      console.log(params.name)
      if(`${headtext}`!=="删除数量总统计"){
        /* this.echartsData.statefulInspectionName =params.name+headtext;
        this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.headZx.containPixel('grid',pointInPixel)) {
        let xIndex=this.headZx.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
      }
      }
    });
    this.headZx.setOption(this.options);
  }
  /**
   * @name: 表格提示框封装
   * @test: test font
   * @msg: 
   * @param {string(表头)}
   * @return {type} 
   */
  biaogeTishi(biaotou:string){
    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
    var jsonObj =  JSON.parse(shuju);
    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;">'+biaotou+'</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<jsonObj.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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
  }
  
}