Sinopec-Anxin/src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewContainerRef, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as echarts from 'echarts';
import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
import * as moment from 'moment';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { Router } from '@angular/router';
import { OilUnloadingProcessComponent } from '../oil-unloading-process/oil-unloading-process.component';
import { TreeService } from 'src/app/service/tree.service';
import { DisposeequipmentComponent } from './disposeequipment/disposeequipment.component';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-warning-statistics-list',
  templateUrl: './warning-statistics-list.component.html',
  styleUrls: ['./warning-statistics-list.component.scss']
})
export class WarningStatisticsListComponent implements OnInit {

  validateForm!: FormGroup;
  constructor(private toTree: TreeService, private message: NzMessageService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { }

  myChart: any //左侧饼图
  mybarChart: any //柱状图
  isEcharts: boolean = true
  isEchartsShow() {
    this.isEcharts = !this.isEcharts
  }
  startdate
  enddate

  isOrShow: boolean

  isMisinformation: boolean = false//误报按钮的显隐
  ngOnInit(): void {
    let loginUserInfo
    if (sessionStorage.getItem('isGasStation') == 'true') {
      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
    } else {
      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
    }

    if (loginUserInfo.roles.find((item) => {
      return item.name == 'ViolationPositiveCensorer'
    })) {
      this.isMisinformation = true
    } else {
      this.isMisinformation = false
    }
    //当前日期
    let myDate: any = new Date();
    let nowY = myDate.getFullYear();
    let nowM = myDate.getMonth() + 1;
    let nowD = myDate.getDate();
    this.enddate = JSON.parse(JSON.stringify(nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD)));//当前日期
    //获取三十天前日期
    let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
    let lastY = lw.getFullYear();
    let lastM = lw.getMonth() + 1;
    let lastD = lw.getDate();
    this.startdate = JSON.parse(JSON.stringify(lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD)));//三十天之前日期
    this.validateForm = this.fb.group({
      eventSystemName: null,
      organization: [null],
      datePicker: [[this.startdate, this.enddate]]
    });

    // 饼图
    this.myChart = echarts.init(document.getElementById('piechart'));
    //柱状折线图
    this.mybarChart = echarts.init(document.getElementById('barchart'));
    this.tableSpin = true
    this.getAllOrganization()
    this.getAggregations()
    if (this.router.url.indexOf('petrolStation') != -1) {
      this.isOrShow = false
    } else {
      this.isOrShow = true
    }
  }

  //刷新饼图图表数据
  num
  echartsData: any
  //一级饼图
  oilchartpieOption = {
    color: ['#FF4B65', '#36A2FF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '12%',
      left: 'center',
      itemGap: 40,
      itemWidth: 8,
      itemHeight: 8,
      formatter: (name) => {
        let data = this.oilchartpieOptionPieData1
        let value
        for (var i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            value = data[i].value;
          }
        }
        return '{a|' + name + '}' + '{b|' + value + '}';
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 80
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'],
        bottom: '10%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        data: [],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };
  oilchartpieOptionPieData1: any
  //一级柱状图
  oilchartbarOption = {
    xAxis: {
      type: 'category',
      data: [],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF'
        }
      },
      axisTick: {//刻度线
        show: false
      },
      inverse: true
    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#C4E2FC'
      },
      splitLine: {//分割线
        lineStyle: {
          color: ['#0f4374'],
          width: 2
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLine: {//轴线
        show: false,
        lineStyle: {
          color: '#C4E2FC'
        }
      }
    },
    tooltip: {
      // trigger: 'axis'
    },
    series: [
      {
        name: '预警事件',
        data: [],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#23F0FF' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        barWidth: '25%'
      },
      {
        name: '预警事件',
        data: [],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        label: {
          show: true
        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    // legend: {
    //   selectedMode: false, // 是否允许点击
    //   data: ['预警事件'],
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   right: 28,
    //   top: 18,
    //   itemWidth: 8,
    //   itemHeight: 8,
    // },
    grid: {
      left: '42px',
      right: '30px',
      bottom: '38px',
      top: '80px'
    }
  };

  //二级饼图
  oilchartpieOption2 = {
    color: ['#36A2FF', '#FFBD4B', '#46DFFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '8%',
      left: 'center',
      itemGap: 10,
      itemWidth: 8,
      itemHeight: 8,
      formatter: (name) => {
        let data = this.oilchartpieOptionPieData2
        let value
        for (var i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            value = data[i].value;
          }
        }
        return '{a|' + name + '}' + '{b|' + value + '}';
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 60
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'],
        bottom: '10%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每二个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        data: [],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };
  oilchartpieOptionPieData2: any
  //二级柱状图
  oilchartbarOption2 = {
    tooltip: {
      // trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF'
        }
      },
      axisTick: {//刻度线
        show: false
      },
      inverse: true

    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#C4E2FC'
      },
      splitLine: {//分割线
        lineStyle: {
          color: ['#0f4374'],
          width: 2
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLine: {//轴线
        show: false,
        lineStyle: {
          color: '#C4E2FC'
        }
      }
    },
    legend: {
      selectedMode: false, // 是否允许点击
      data: ['事前准备', '事中操作', '全程监测'],
      textStyle: {
        color: '#fff'
      },
      right: 18,
      top: 18,
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        name: '',
        data: [],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(54, 162, 255, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(54, 162, 255, 0.1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        barWidth: '25%'
      },
      {
        name: '',
        data: [],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 189, 75, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255, 189, 75, 0.1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        barWidth: '25%'
      },
      {
        name: '',
        data: [],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(70, 223, 255, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(70, 223, 255, 0.1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        barWidth: '25%'
      }
    ],
    grid: {
      left: '42px',
      right: '30px',
      bottom: '38px',
      top: '80px'
    }
  };
  isgoback: boolean = false
  //获取统计信息
  chartsSpin: boolean = false
  getAggregations() {
    this.chartsSpin = true
    let organizationUnitId
    if (this.router.url.indexOf('petrolStation') != -1) {
      organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id
    } else {
      organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
    }
    let params: any = {
      OrganizationUnitId: organizationUnitId,
      IsContainsChildren: 'true'
    }
    this.http.get('/api/services/app/ViolateRecord/LicenseSummary', { params: params }).subscribe((data: any) => {
      this.chartsSpin = false
      this.echartsData = data.result
      this.refreshEchartsData1(this.echartsData)
    })
  }
  refreshEchartsData1(data) {
    // console.log('echarts信息', data)
    //饼图
    let totalCount = 0
    data.violationList.forEach(element => {
      element.name = element.eventSystemName
      element.value = element.count
      totalCount += element.count
    });
    this.num = totalCount
    this.oilchartpieOptionPieData1 = data.violationList
    this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1
    this.myChart.setOption(this.oilchartpieOption);
    this.myChart.off('legendselectchanged')
    this.myChart.off('click')
    this.myChart.on('click', (params) => {
      if (params.name == '证照预警') {
        console.log('点击myChart')
        // this.validateForm.patchValue({
        //   state: '0'
        // });
        // this.list = []
        // this.SkipCount = '0'
        // this.getViolateRecordList()
      }
    });

    //柱状图
    let monthArr = []
    let valuedata = []
    data.timeList.forEach(element => {
      monthArr.push(moment(element.key).format('MM.DD'))
      valuedata.push(element.count)
    });
    this.oilchartbarOption.xAxis.data = monthArr
    this.oilchartbarOption.series[0].data = valuedata
    this.oilchartbarOption.series[1].data = valuedata
    this.mybarChart.setOption(this.oilchartbarOption);
  }


  //预警类型接口
  licenseId
  equipmentId
  defaultOrId: string
  //获取所有组织机构
  nodes: any = []
  eventSystemNameOption = []
  getAllOrganization() {
    let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
    let params = {
      OrganizationUnitId: OrganizationUnitId,
      IsContainsChildren: "true"
    }
    this.http.get('/api/services/app/Organization/GetAll', {
      params: params
    }).subscribe((data: any) => {
      data.result.items.forEach(element => {
        if (element.id == OrganizationUnitId) {
          element.parentId = null
        }
        element.key = element.id
        element.title = element.displayName
      });
      this.nodes = [...this.toTree.toTree(data.result.items)]
      this.defaultOrId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
      this.validateForm.value.organization = JSON.parse(sessionStorage.getItem('userdata')).organization.id
      this.validateForm.patchValue({
        datePicker: [this.startdate, this.enddate]
      });
      this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
        console.log('预警事件', data.result)
        let option1
        let option2
        data.result.forEach(element => {
          if (element.eventSystemName == '证照预警') {
            option1 = element.id
          }
          if (element.eventSystemName == '灭火器维护') {
            option2 = element.id
          }
        });
        this.eventSystemNameOption = [
          { id: option1, name: '证照预警' },
          { id: option2, name: '消防设施预警' },
        ]
        this.list = []
        this.SkipCount = '0'
        this.getLicenseList()
      })

    })
  }


  //获得卸油记录列表
  SkipCount: string = '0'
  MaxResultCount: string = '50'
  list: any = []
  totalCount: string
  tableSpin: boolean = false
  isLoading = false
  //获得证照预警
  getLicenseList() {
    this.isLoading = true
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
    this.tableSpin = true
    let organizationUnitId
    if (this.router.url.indexOf('petrolStation') != -1) {
      organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id
    } else {
      organizationUnitId = this.validateForm.value.organization
    }

    let ViolationIds = []
    // console.log(456, this.validateForm.value)
    if (this.validateForm.value.eventSystemName) {
      ViolationIds.push(this.validateForm.value.eventSystemName)
    } else {
      this.eventSystemNameOption.forEach(element => {
        ViolationIds.push(element.id)
      });
    }
    let params = {
      ViolationIds: ViolationIds,
      organizationUnitId: organizationUnitId,
      ViolateTime: (this.validateForm.value.datePicker[0] && this.validateForm.value.datePicker[1]) ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD HH:mm:ss')] : null,
      IsContainsChildren: 'true',
      SkipCount: this.SkipCount,
      MaxResultCount: '50'
    }
    this.http.get('/api/services/app/ViolateRecord/GetAll', {
      params: params
    }).subscribe((data: any) => {
      this.tableSpin = false
      data.result.items.forEach(element => {
        element.violatedItemSnapshotObj = JSON.parse(element.violatedItemSnapshot)
      });
      this.list = this.list.concat(data.result.items);
      this.list = [...this.list]
      this.totalCount = data.result.totalCount
      this.isLoading = false
      console.log('证照预警列表', data.result.items)
    })
  }


  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }

    this.list = []
    this.SkipCount = '0'
    this.getLicenseList()
  }

  resetForm(e: MouseEvent): void {
    e.preventDefault();
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
    // console.log('赋值日期', [this.startdate, this.enddate])
    this.validateForm.patchValue({
      datePicker: [this.startdate, this.enddate],
      eventSystemName: null,
      organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id
    });
    this.list = []
    this.SkipCount = '0'
    this.getLicenseList()
  }
  ngAfterViewInit(): void {
    fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
        if (this.totalCount > this.list.length) {
          console.log('需要加载数据了', event)
          this.SkipCount = String(Number(this.SkipCount) + 50)
          this.getLicenseList()
        }

      }
    });
  }
  look(item) {
    console.log(item)
    if (item.violation.eventSystemName == '证照预警') {
      const modal = this.modal.create({
        nzContent: GetOutOfLineDetailsComponent,
        nzWrapClassName: "vertical-center-modal",
        nzViewContainerRef: this.viewContainerRef,
        nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
        nzBodyStyle: {
          'border': '1px solid #6d9cc7',
          'border-radius': '0px',
          'padding': '0px',
          'box-shadow': '0 0 8px 0 #fff',
          'background': '#000D21',
        },
        nzComponentParams: {
          data: item
        },
        nzFooter: null,
        nzOnOk: async () => {
          // console.log(99999, instance.content)
        }
      });
      const instance = modal.getContentComponent();
    } else {
      this.dispose(item)
    }


  }
  //处置消防设施
  dispose(item) {
    const modal = this.modal.create({
      nzContent: DisposeequipmentComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 380,
      nzBodyStyle: {
        'border': '1px solid #91CCFF',
        'border-radius': '0px',
        'padding': '7px',
        'box-shadow': '0 0 8px 0 #fff',
        'background-image': 'linear-gradient(#003665, #000f25)'
      },
      nzComponentParams: {
        data: item
      },
      nzFooter: null,
      nzClosable: false,
      nzOnOk: async () => {
        if (instance.isScrap) {
          await new Promise(resolve => {
            let body = {
              id: item.violatedItemSnapshotObj.id,
              name: instance.copydata2.violatedItemSnapshotObj.name,
              storageLocation: instance.copydata2.violatedItemSnapshotObj.storageLocation,
              productionDate: moment(instance.copydata2.violatedItemSnapshotObj.productionDate).format('yyyy-MM-DD'),
              maintenanceDate: moment(instance.copydata2.violatedItemSnapshotObj.maintenanceDate).format('yyyy-MM-DD'),
              validityEndTime: moment(instance.copydata2.violatedItemSnapshotObj.validityEndTime).format('yyyy-MM-DD'),
              isScrapped: true,
              organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId
            }
            this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
              let body = {
                id: item.id,
                handleRecord: '报废成功！'
              }
              this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
                resolve(data)
                this.message.create('success', '报废成功！');
                item.handleTime = new Date()
                return true
              })
            })
          })

        } else {
          if (instance.validateForm.valid) {
            await new Promise(resolve => {
              let body = {
                id: item.violatedItemSnapshotObj.id,
                name: instance.validateForm.value.name,
                storageLocation: instance.validateForm.value.storageLocation,
                productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'),
                maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'),
                validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'),
                organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId
              }
              this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
                let body = {
                  id: item.id,
                  handleRecord: '维保成功！'
                }
                this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
                  resolve(data)
                  this.message.create('success', '维保成功！');
                  item.handleTime = new Date()
                  return true
                })
              })
            })
          } else {
            this.message.create('warning', '请填写完整！');
            return false
          }
        }
      }
    });
    const instance = modal.getContentComponent();
  }


  goOilList() {
    if (this.router.url.indexOf('petrolStation') != -1) {
      this.router.navigate(['/records/petrolStation/oliunloadinglist'])
    } else {
      this.router.navigate(['/records/oliunloadinglist'])
    }

  }
  gorecordList() {
    if (this.router.url.indexOf('petrolStation') != -1) {
      this.router.navigate(['/records/petrolStation'])
    } else {
      this.router.navigate(['/records'])
    }
  }
  goMisinformationList() {
    if (this.router.url.indexOf('petrolStation') != -1) {
      this.router.navigate(['records/petrolStation/misinformationList'])
    } else {
      this.router.navigate(['records/misinformationList'])
    }
  }
}