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';
@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) { }

  equipmentechart//设备饼图
  equipmentechartOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '8%',
      left: 'center',
      orient: 'vertical',
      itemGap: 20,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        let data = this.equipmentechartdata
        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: 70
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: [],
        tooltip: {//鼠标移入提示
          position: 'left',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };

  warningechartpie//预警饼图
  warningechartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '80%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        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
          }
        }
      }
    ]
  };


  oilchartpie//卸油饼图
  oilchartpieData = [
    { name: '事前准备', value: '100' },
    { name: '事中操作', value: '100' },
    { name: '全程监测', value: '100' }
  ]
  oilchartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '8%',
      left: 'center',
      orient: 'vertical',
      itemGap: 10,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        let data = this.oilchartpieData
        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
          },
          b: {
            // align: 'right',
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '80%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: this.oilchartpieData,
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };

  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'
        }
      }
    },
    // 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: '36px',
      right: '30px',
      bottom: '38px',
      top: '50px'
    }
  };

  oilchartbar//卸油折线图
  oilchartbarOption = {
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      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'
        }
      }
    },
    // 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: '#36A2FF',
    //       width: 1
    //     },
    //     areaStyle: {
    //       opacity: 0.8,
    //       color: {
    //         type: 'linear',
    //         x: 0,
    //         y: 0,
    //         x2: 0,
    //         y2: 1,
    //         colorStops: [
    //           {
    //             offset: 0, color: '#36A2FF' // 0% 处的颜色
    //           },
    //           {
    //             offset: 0.3, color: '#36A2FF' // 0% 处的颜色
    //           },
    //           {
    //             offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
    //           }],
    //         global: false // 缺省为 false
    //       }
    //     },
    //   }
    // ],
    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: '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: [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',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          show: true
        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    grid: {
      left: '36px',
      right: '30px',
      bottom: '38px',
      top: '50px'
    }
  };


  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.oilchartpie.setOption(this.oilchartpieOption);
    // 卸油线图
    this.oilchartbar = echarts.init(document.getElementById('oilechartline'));
    this.oilchartbar.setOption(this.oilchartbarOption);


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

    };

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

  //获得所有未读消息
  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: []
    }
  }
  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) {


    // this.warningechartpieOption.series[0].data = this.equipmentechartdata;
    // this.equipmentechart.setOption(this.equipmentechartOption);

    // var num = 0
    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.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);
  }



  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) {
    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)
  }
}