Jinan_project/src/app/home/statistic-analysis/form/examine/examine.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MethodService } from 'src/app/service/method.service';
import { TreeService } from 'src/app/service/tree.service';
import * as moment from 'moment';
import * as echarts from 'echarts';
import { Router } from '@angular/router';
@Component({
  selector: 'app-examine',
  templateUrl: './examine.component.html',
  styleUrls: ['./examine.component.scss']
})
export class ExamineComponent implements OnInit {

  constructor(private http: HttpClient, private toTree: TreeService, private methodService: MethodService, private router: Router) { }


  echartsOfBar
  echartsOfBarOption = {
    grid: {
      left: '2%',
      right: '2%',
      top: '18%',
      bottom: '16%'
    },
    legend: {
      top: '3%',
      left: 'center',
      itemGap: 15,
      itemWidth: 10,
      itemHeight: 10,
      orient: 'horizontal'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisTick: { //x轴刻度尺
        show: false
      },
      axisLine: {//x轴线条颜色
        show: false,
        lineStyle: {
          color: '#C7CAD0'
        }
      },
      axisLabel: {
        show: true,
        interval: 0,//使x轴上的文字显示完全,
        //设置一行显示几个字,自己设置
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 6;
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {//网格线
        lineStyle: {
          type: 'solid',    //设置网格线类型 dotted：虚线   solid:实线
          color: '#ECEFF1'  //网格线颜色
        },
      },
      axisLine: {//y轴线条颜色
        show: false,
        lineStyle: {
          color: '#C7CAD0'
        }
      },
    },
    series: [
      {
        name: '隐患数',
        type: 'bar',
        barWidth: 16, // 柱子宽度
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '当场整改',
        type: 'bar',
        barWidth: 16, // 柱子宽度
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '推送大队',
        type: 'bar',
        barWidth: 16, // 柱子宽度
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '社会单位数量',
        type: 'bar',
        barWidth: 16, // 柱子宽度
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    ]
  };



  searchForm = {
    or: '',
    date: null
  }

  ngOnInit(): void {
    this.searchForm.date = this.methodService.getDateOf30()
    this.getAllOrganization()

    setTimeout(() => {
      this.echartsOfBar = echarts.init(document.getElementById('echarts'), null, { devicePixelRatio: 2 });
    }, 0);

  }



  isLoading = false
  expandKeys
  defaultOrId: string
  //获取所有组织机构
  nodes: any = []
  getAllOrganization() {
    this.isLoading = true
    let organizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
    let params = {
      ContainsChildren: "true",
      PageNumber: 1,
      PageSize: 9999,
      code: '0000'
    }
    this.http.get('/api/Organizations', {
      params: params
    }).subscribe((data: any) => {
      console.log(data.items)
      data.items.forEach(element => {
        if (element.id == organizationId) {
          element.parentId = null
        }
        element.key = element.id
        element.title = element.name
        if (element.level == 'squadron') {
          element.isLeaf = true
        }
      });
      this.nodes = [...this.toTree.toTree(data.items)]
      this.searchForm.or = JSON.parse(sessionStorage.getItem('userData')).organizationId


      this.getRecord()
    })
  }

  search() {
    this.getRecord()
  }
  reset() {
    this.searchForm = {
      date: this.methodService.getDateOf30(),
      or: JSON.parse(sessionStorage.getItem('userData')).organizationId
    }
    this.getRecord()
  }

  listOfData = [];

  getRecord() {
    this.isLoading = true
    this.http.get('/api/PlanTasks/GetOrgRecheckStat', {
      params: {
        OrganizationId: this.searchForm.or,
        CheckStartTime: moment(this.searchForm.date[0]).format('yyyy-MM-DD') + ' 00:00:00',
        CheckEndTime: moment(this.searchForm.date[1]).format('yyyy-MM-DD') + ' 23:59:59'
      }
    }).subscribe({
      next: (data: any) => {
        this.listOfData = [...data]
        console.log('统计表格', data)
        this.isLoading = false
        setTimeout(() => {
          this.echartsSetData(this.listOfData)
        }, 0);

      },
      error: (err) => {

      }
    })
  }


  echartsSetData(data) {
    this.echartsOfBar.clear();

    let barData = data
    let Barx = []
    let Bary1 = []
    let Bary2 = []
    let Bary3 = []
    let Bary4 = []
    barData.forEach(element => {
      Barx.push(element['组织机构'].name)
      Bary1.push(element['总隐患数'])//已完成
      Bary2.push(element['当场整改数'])//未完成
      Bary3.push(element['上报数量'])//已完成
      Bary4.push(element['单位数量'])//未完成
    });
    this.echartsOfBarOption.xAxis.data = Barx
    this.echartsOfBarOption.series[0].data = Bary1
    this.echartsOfBarOption.series[1].data = Bary2
    this.echartsOfBarOption.series[2].data = Bary3
    this.echartsOfBarOption.series[3].data = Bary4


    setTimeout(() => {
      this.echartsOfBar && this.echartsOfBar.setOption(this.echartsOfBarOption);
    }, 0);


  }


  isSubordinate = false
  openSubordinate(item) {
    if (item.id != this.searchForm.or && item.level === 'battalion') {
      this.isSubordinate = true
      this.searchForm.or = item.id
      this.getRecord()
    }
  }
  tableBack() {
    this.isSubordinate = false
    this.searchForm.or = JSON.parse(sessionStorage.getItem('userData')).organizationId
    this.getRecord()
  }

  goback() {
    this.router.navigate(['/statistic/home'])
  }
}