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';
@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: '20%',
      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: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: [
        ],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '',
            rich: {
              total: {
                fontSize: 35,
                textShadowColor: '#8df',
                textShadowBlur: 3,
                color: '#fff',

              },
              active: {
                fontSize: 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: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
    //     type: 'line',
    //     smooth: true,
    //     showSymbol: false,
    //     label: {
    //       show: true,
    //       position: 'top'
    //     },
    //     lineStyle: {
    //       color: '#46DFFF',
    //       width: 1
    //     },
    //     areaStyle: {
    //       opacity: 0.8,
    //       color: {
    //         type: 'linear',
    //         x: 0,
    //         y: 0,
    //         x2: 0,
    //         y2: 1,
    //         colorStops: [
    //           {
    //             offset: 0, color: '#46DFFF' // 0% 处的颜色
    //           },
    //           {
    //             offset: 0.3, color: '#46DFFF' // 0% 处的颜色
    //           },
    //           {
    //             offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
    //           }],
    //         global: false // 缺省为 false
    //       }
    //     },
    //   }
    // ],
    series: [
      {
        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: '35%'
      },
      {
        data: [],
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          show: true
        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    grid: {
      left: '18px',
      right: '30px',
      bottom: '38px',
      top: '30px'
    }
  };


  oilchartpie//卸油饼图
  oilchartbar//卸油折线图

  ngOnInit(): void {
    // 饼图
    // 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()


    
  }

  //获得所有未读消息
  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: []
    },
    dev: {
      stationCount: '',
      violationCount: '',
      cameraCount: ''
    }
  }
  totalCount
  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.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.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
  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);


    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
    this.warningechartbar.setOption(this.warningechartbarOption);
  }
  //一级饼图
  oilchartpieOption = {
    color: ['#FF4B65', '#36A2FF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '12%',
      left: 'center',
      itemGap: 10,
      itemWidth: 8,
      itemHeight: 8,
      orient: 'vertical',
      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: '20%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '',
            rich: {
              total: {
                fontSize: 35,
                textShadowColor: '#8df',
                textShadowBlur: 3,
                color: '#fff'
              },
              active: {
                fontSize: 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
          }
        }
      }
    ]
  };
  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: {
    //   data: ['卸油事件'],
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   right: 28,
    //   top: 18,
    //   itemWidth: 8,
    //   itemHeight: 8,
    // },
    grid: {
      left: '36px',
      right: '30px',
      bottom: '38px',
      top: '66px'
    }
  };
  oilDischargeNum: any
  refreshEchartsData1(data) {
    this.oilDischargeNum = data.totalCount
    //饼图
    this.oilchartpieOptionPieData1 = [
      { name: '预警事件', value: data.notCorrectCount },
      { name: '正常操作', value: data.correctCount },
    ]
    this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.totalCount + '}' + '\n\r' + '{active|总数}'
    this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1
    this.oilchartpie.setOption(this.oilchartpieOption);

    //柱状图
    let monthArr = []
    let valuedata = []
    data.list.forEach(element => {
      monthArr.push(moment(element.key).format('MM.DD'))
      valuedata.push(element.totalCount)
    });
    this.oilchartbarOption.xAxis.data = monthArr
    this.oilchartbarOption.series[0].data = valuedata
    this.oilchartbarOption.series[1].data = valuedata
    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()
    }

  }


  areaList: any = [
    { name: '加油区', num: 92 },
    { name: '油罐区', num: 81 },
    { name: '出入口', num: 66 },
    { name: '便利店', num: 34 },
    { name: '办公区', num: 20 },
    { name: '其他区域', num: 17 }
  ]
  eventList: any = [
    { name: '员工服务', num: 92 },
    { name: '监控设备监测', num: 81 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 },
    { name: '员工服务', num: 92 },
    { name: '监控设备监测', num: 81 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 }
  ]
  stationList: any = [
    { name: '北京市第十九加油站', num: 92 },
    { name: '北京市第十九加油站', num: 81 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 },
    { name: '北京市第十九加油站', num: 92 },
    { name: '北京市第十九加油站', num: 81 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 }
  ]
  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)
    if (item.notification.data.eventSystemName == '灭火器维护' || item.notification.data.eventSystemName == '证照预警') {
      this.message.create('warning', `证照或者器材即将临期，请联系加油站处理！`);
    } else {
      this.isOpenModel = true
      let data = {
        violateImage: item.notification.data.violateImage,
        violateVideo: item.notification.data.violateVideo
      }
      const modal = this.modal.create({
        nzContent: GetOutOfLineDetailsComponent,
        nzViewContainerRef: this.viewContainerRef,
        nzWidth: 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)
  }
}