Sinopec-Anxin/src/app/pages/home-page/home-page.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import * as echarts from 'echarts';
import * as moment from 'moment';
import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
import { NzMessageService } from 'ng-zorro-antd/message';
import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequipment/disposeequipment.component';

declare var tools
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {

  constructor(private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { }

  warningechartpie//预警饼图
  warningechartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      top: '5%',
      left: '25.5%',
      itemGap: 8,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        return '{a|' + name + '}';
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 60
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'],
        bottom: '-5%',
        right: '77%',
        avoidLabelOverlap: false,//防止标签重叠策略
        emphasis: {//中间高亮区域
          show: true,
        },
        data: [
        ],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: "{b} : {c} ({d}%)",
          extraCssText: 'z-index:2'
        },
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '',
            rich: {
              total: {
                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
                textShadowColor: '#8df',
                textShadowBlur: 3,
                color: '#fff',

              },
              active: {
                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
                color: '#fff',
                fontFamily: 'Microsoft YaHei',
              },
            }
          },
          emphasis: {//中间文字显示
            show: true,
          }
        }
      }
    ]
  };

  warningechartbar//预警折线图
  warningechartbarOption = {
    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: [
      {
        data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,],
        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: '35%'
      },
      {
        data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,],
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          normal: {
            show: true,
            formatter: function (dataObj) {
              const { dataIndex, value } = dataObj;
              let labelText = value;

              labelText = '';
              if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个
                labelText = value;
              }

              return `${labelText}`
            }
          }

        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    grid: {
      left: '40px',
      right: '30px',
      bottom: '38px',
      top: '30px'
    }
  };
  //一级饼图
  oilchartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      top: '5%',
      left: '25%',
      itemGap: 8,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        // return name.length > 7 ? name.substr(0, 7) + "..." : name;
        return name;
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 80
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'],
        bottom: '8%',
        right: '77%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '',
            rich: {
              total: {
                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
                textShadowColor: '#8df',
                textShadowBlur: 3,
                color: '#fff'
              },
              active: {
                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
                color: '#fff',
                // fontFamily: 'Microsoft YaHei',
              },
            }
          },
          emphasis: {//中间文字显示
            show: true,
          }
        },
        data: [],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: "{b} : {c} ({d}%)",
          extraCssText: 'z-index:2'
        }
      }
    ]
  };
  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: {
          normal: {
            show: true,
            formatter: function (dataObj) {
              const { dataIndex, value } = dataObj;
              let labelText = value;

              labelText = '';
              if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个
                labelText = value;
              }

              return `${labelText}`
            }
          }
        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    // legend: {
    //   data: ['卸油事件'],
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   right: 28,
    //   top: 18,
    //   itemWidth: 8,
    //   itemHeight: 8,
    // },
    grid: {
      left: '40px',
      right: '30px',
      bottom: '38px',
      top: '36px'
    }
  };

  oilchartpie//卸油饼图
  oilchartbar//卸油折线图
  userdata
  ngOnInit(): void {

    this.userdata = JSON.parse(sessionStorage.getItem('userdata'))

    // 饼图
    // this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
    // 预警饼图
    this.warningechartpie = echarts.init(document.getElementById('eventechartpie'));
    // 预警线图
    this.warningechartbar = echarts.init(document.getElementById('eventechartline'));


    // 卸油饼图
    this.oilchartpie = echarts.init(document.getElementById('oilechartpie'));
    // 卸油线图
    this.oilchartbar = echarts.init(document.getElementById('oilechartline'));



    window.onresize = () => {
      setTimeout(() => {
        this.warningechartpie.resize();
        this.warningechartbar.resize();
        this.oilchartpie.resize();
        this.oilchartbar.resize();
      }, 200);

    };

    this.rollStart()
    this.getHomeAggregation()
    this.getUnreadNotification()

    // this.getAggregations()


    setTimeout(() => {
      this.getHomeAggregation()
    }, 10 * 6000);


    this.resolutionRatio()
  }

  resolutionRatio() {
    console.log(document.documentElement.clientWidth)
    console.log(document.documentElement.clientHeight)
  }

  //获得所有未读消息
  unreadMessageList: any
  getUnreadNotification() {
    this.http.get('/api/services/app/Notification/GetUnreadNotification').subscribe((data: any) => {
      console.log('获得所有未读消息', data)
      this.unreadMessageList = data.result
    })
  }



  //获得统计信息

  HomeAggregatioData: any = {
    areaAgg: [],
    violationType: {
      violationTypeAgg: []
    },
    ouViolationType: {
      ouCorrectCount: '',
      ouNotCorrectCount: '',
      ouTotalCount: ''
    },
    dev: {
      stationCount: '',
      violationCount: '',
      cameraCount: ''
    },
    deviceViolationCount: '',
    licenseViolationCount: ''
  }
  totalCount
  isSpin: boolean = false
  getHomeAggregation() {

    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 body = {
      organizationUnitId: organizationUnitId,
      isContainsChildren: true
    }
    this.isSpin = true
    this.http.post('/api/services/app/Home/HomeAggregation', body).subscribe((data: any) => {
      this.HomeAggregatioData = data.result
      this.totalCount = data.result.todayRecordCount
      this.equipmentechartdata = [
        { name: '接入油站数量', value: data.result.dev.stationCount },
        { name: '摄像头数量', value: data.result.dev.cameraCount },
        { name: '预警模型数量', value: data.result.dev.violationCount }
      ]
      console.log('图表信息', data.result)
      this.isSpin = false
      this.eventEcharts(data.result)
    })


    // let starttime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '00:00'
    // let endtime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '23:59'
    // let params = {
    //   organizationUnitId: organizationUnitId,
    //   ViolateTime: [starttime, endtime],
    //   IsContainsChildren: 'true',
    //   SkipCount: '0',
    //   MaxResultCount: '1'
    // }
    // this.http.get('/api/services/app/ViolateRecord/GetAll', {
    //   params: params
    // }).subscribe((data: any) => {
    //   this.totalCount = data.result.totalCount
    // })
  }
  //预警图表
  equipmentechartdata
  tools1
  tools2
  eventEcharts(data) {
    data.violationType.violationTypeAgg.forEach(element => {
      // num += element.count
      element.name = element.key
      element.value = element.count
    });
    this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg;
    this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|预警事件}'
    this.warningechartpie.setOption(this.warningechartpieOption);

    // 可调用clearLoop方法，清除定时器
    this.tools1 && this.tools1.clearLoop();
    this.tools1 = null;
    this.tools1 = tools.loopShowTooltip(this.warningechartpie, this.warningechartpieOption, {
      interval: 5000,
      loopSeries: true
    });

    let monthArr = []
    let valuedata = []
    data.violationType.days30ViolationCount.forEach(element => {
      monthArr.push(moment(element.key).format('MM.DD'))
      valuedata.push(element.count)
    });
    this.warningechartbarOption.xAxis.data = monthArr
    this.warningechartbarOption.series[0].data = valuedata
    this.warningechartbarOption.series[1].data = valuedata
    let xxx = valuedata.find(function (value, index, arr) {
      return value > 1000;
    })
    if (xxx) {
      // console.log('xxxxxxxxxx')
      this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) {
        const { dataIndex, value } = dataObj;
        let labelText = value;

        labelText = '';
        if (dataIndex % 2 === 0) { // 每隔三个x坐标显示一个
          labelText = value;
        }

        return `${labelText}`
      }
    }
    this.warningechartbar.setOption(this.warningechartbarOption);


    //卸油两个图
    this.refreshEchartsData1(data)
  }

  oilDischargeNum: any
  refreshEchartsData1(data) {
    this.oilDischargeNum = data.totalCount
    //饼图
    data.ouViolationType.ouViolationTypeAgg.forEach(element => {
      element.name = element.key
      element.value = element.count
    });
    this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg
    this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.ouRecordCount + '}' + '\n\r' + '{active|卸油预警}'
    this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1
    this.oilchartpie.setOption(this.oilchartpieOption);

    // 可调用clearLoop方法，清除定时器
    this.tools2 && this.tools2.clearLoop();
    this.tools2 = null;
    this.tools2 = tools.loopShowTooltip(this.oilchartpie, this.oilchartpieOption, {
      interval: 5000,
      loopSeries: true
    });
    //柱状图
    let monthArr = []
    let valuedata = []
    data.ouViolationType.ouDays30ViolationCount.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
    let xxx = valuedata.find(function (value, index, arr) {
      return value > 1000;
    })
    if (xxx) {
      // console.log('xxxxxxxxxx')
      this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) {
        const { dataIndex, value } = dataObj;
        let labelText = value;

        labelText = '';
        if (dataIndex % 2 === 0) { // 每隔三个x坐标显示一个
          labelText = value;
        }

        return `${labelText}`
      }
    }
    this.oilchartbar.setOption(this.oilchartbarOption);
  }
  //获取统计信息
  getAggregations() {
    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/OilUnloadingProcess/GetAllCountByDays', { params: params }).subscribe((data: any) => {
      console.log('统计信息', data)
      this.refreshEchartsData1(data.result)
    })
  }
  timer
  rollStart() {
    var ROLL_SPEED = 100
    var noticeList1 = document.getElementById('notice-list');
    var noticeList2 = document.getElementById('notice-list-2');
    var listWrapper = document.getElementById('list-wrapper');
    noticeList2.innerHTML = noticeList1.innerHTML;
    this.timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {
      if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
        listWrapper.style.top = '0px'
      } else {
        var top = listWrapper.style.top
        listWrapper.style.top = _subStr(top) - 1 + 'px'
      }
    }
    // 截取px前数值
    function _subStr(str) {
      var index = str.indexOf('px');
      if (index > -1) {
        return parseFloat(str.substr(0, index + 1))
      }
    }
  }
  mouseEnter() {
    // console.log('进入了')
    window.clearInterval(this.timer);
  }
  mouseleave() {
    // console.log('离开了')
    if (!this.isOpenModel) {
      this.rollStart()
    }

  }

  width(width: string, denominator: string) {
    let style: any = {}
    style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + '%';
    return style
  }


  isOpenModel: boolean = false

  look(item) {
    console.log('消息item', item)
    if (item.notification.data.eventSystemName == '灭火器维护') {
      this.isOpenModel = true
      let copydata = item.notification.data
      copydata.violatedItemSnapshotObj = JSON.parse(copydata.violatedItemSnapshot)
      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: copydata
        },
        nzFooter: null,
        nzClosable: false,
        nzOnOk: async () => {
          if (instance.isScrap) {
            await new Promise(resolve => {
              let body = {
                id: copydata.violatedItemSnapshotObj.id,
                isScrapped: true,
                organizationUnitId: copydata.violatedItemSnapshotObj.organizationUnitId,
                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')
              }
              this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
                let body = {
                  id: item.notification.entityId,
                  handleRecord: '报废成功！'
                }
                this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
                  resolve(data)
                  this.message.create('success', '报废成功！');
                  copydata.handleTime = new Date()
                  return true
                })
              })
            })

          } else {
            if (instance.validateForm.valid) {
              await new Promise(resolve => {
                let body = {
                  id: copydata.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: copydata.violatedItemSnapshotObj.organizationUnitId
                }
                this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
                  let body = {
                    id: item.notification.entityId,
                    handleRecord: '维保成功！'
                  }
                  this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
                    resolve(data)
                    this.message.create('success', '维保成功！');
                    copydata.handleTime = new Date()
                    return true
                  })
                })
              })
            } else {
              this.message.create('warning', '请填写完整！');
              return false
            }
          }
        }
      });
      const instance = modal.getContentComponent();


      modal.afterClose.subscribe(result => {
        this.isOpenModel = false
        this.rollStart()
      });
      this.readMess(item.notification.id)
    } else {
      this.isOpenModel = true
      item.notification.data.id = item.notification.entityId
      let data = item.notification.data
      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: data
        },
        nzFooter: null,
        nzOnOk: async () => {

        }
      });
      const instance = modal.getContentComponent();
      modal.afterClose.subscribe(result => {
        this.isOpenModel = false
        this.rollStart()
      });
      this.readMess(item.notification.id)
    }




  }

  //标记为已读
  readMess(id) {
    let body = {
      id: id
    }
    this.http.post('/api/services/app/Notification/Read', body).subscribe((data: any) => {
      console.log('标记已读成功')
    })
  }

  ignore(index) {
    this.unreadMessageList.splice(index, 1)
  }
}