Sinopec-Anxin/src/app/pages/criminal-records/criminal-records.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as echarts from 'echarts';
@Component({
  selector: 'app-criminal-records',
  templateUrl: './criminal-records.component.html',
  styleUrls: ['./criminal-records.component.scss']
})
export class CriminalRecordsComponent implements OnInit {
  validateForm!: FormGroup;
  constructor(private http: HttpClient, private fb: FormBuilder) { }

  myChart: any //左侧饼图
  option = {
    color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: [85, 112],//内半径外，外半径
        left: '-30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 26, name: '工作人员倚靠加油机或者立柱1' },
          { value: 86, name: '工作人员倚靠加油机或者立柱2' },
          { value: 34, name: '工作人员倚靠加油机或者立柱3' },
          { value: 55, name: '工作人员倚靠加油机或者立柱4' },
          { value: 60, name: '工作人员倚靠加油机或者立柱5' },
          { value: 26, name: '工作人员倚靠加油机或者立柱6' },
          { value: 86, name: '工作人员倚靠加油机或者立柱7' },
          { value: 34, name: '工作人员倚靠加油机或者立柱8' },
          { value: 55, name: '工作人员倚靠加油机或者立柱9' },
          { value: 60, name: '工作人员倚靠加油机或者立柱10' },
          { value: 26, name: '工作人员倚靠加油机或者立柱11' },
          { value: 86, name: '工作人员倚靠加油机或者立柱12' },
          { value: 34, name: '工作人员倚靠加油机或者立柱13' },
          { value: 55, name: '工作人员倚靠加油机或者立柱14' },
          { value: 60, name: '工作人员倚靠加油机或者立柱15' },
          { value: 26, name: '工作人员倚靠加油机或者立柱16' },
          { value: 86, name: '工作人员倚靠加油机或者立柱17' },
          { value: 34, name: '工作人员倚靠加油机或者立柱18' },
          { value: 55, name: '工作人员倚靠加油机或者立柱19' },
          { value: 60, name: '工作人员倚靠加油机或者立柱20' }
        ],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };


  mybarChart: any //柱状图
  baroption = {
    xAxis: {
      type: 'category',
      data: this.getThirtyDays(),
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF'
        }
      },
      axisTick: {//刻度线
        show: false
      }
    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#C4E2FC'
      },
      splitLine: {//分割线
        lineStyle: {
          color: ['#0f4374'],
          width: 2
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLine: {//轴线
        show: false,
        lineStyle: {
          color: '#C4E2FC'
        }
      }
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101],
        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%'
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        label: {
          show: true
        },
        itemStyle: {
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 10
        },
        lineStyle: {
          color: '#FFCC8A',
          width: 1
        }
      }
    ],
    grid: {
      left: '36px',
      right: '30px',
      bottom: '50px',
      top: '45px'
    }
  };
  baroption2 = {
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      type: 'category',
      data: ['预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名'],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF',
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLabel: {
        formatter: function (value, index) {
          // 格式化成月/日，只在第一个刻度显示年份
          return '{s|·}' + `{a|${value}}`;
        },
        rich: {
          a: {
            color: '#C4E2FC',
            padding: [0, 0, 0, 8],
          },
          s: {
            color: '#fff',
            borderWidth: 1,
            borderColor: '#23D9FF',
            backgroundColor: '#fff',
            width: 4,
            height: 4,
            shadowBlur: 3,
            shadowColor: "#fff"
          }
        }
      }

    },
    series:
    {
      label: {
        // 柱图头部显示值
        show: true,
        position: "right",
        color: "#fff",
        fontSize: 12,
        formatter: '{c}',
        offset: [6, 0]
      },
      data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(),
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#063d72' // 0% 处的颜色
          }, {
            offset: 1, color: '#FF9963' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      barWidth: '36%',

    }
    ,
    grid: {
      left: '100px',
      right: '60px',
      bottom: '3px',
      top: '20px'
    }
  }
  getThirtyDays() {
    //获取当前日期
    let myDate = new Date();
    var nowY = myDate.getFullYear();
    var nowM = myDate.getMonth() + 1;
    var nowD = myDate.getDate();
    var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
    var enddate = new Date(enddateStr);


    //获取三十天前日期
    var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
    var lastY = lw.getFullYear();
    var lastM = lw.getMonth() + 1;
    var lastD = lw.getDate();
    var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
    var startDate = new Date(startdateStr);

    const dateList = []
    while (true) {
      startDate.setDate(startDate.getDate() + 1)
      if (startDate.getTime() <= enddate.getTime()) {
        if (startDate.getDate() < 10) {
          // startDate.getFullYear() 获取年，此处没加上年份
          dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate())
        } else {
          dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate())
        }
      } else {
        break
      }
    }
    return dateList;
  }
  ngOnInit(): void {
    this.validateForm = this.fb.group({
      level: [null],
      type: [null],
      site: [null],
      datePicker: [null]
    });
    // 饼图
    this.myChart = echarts.init(document.getElementById('piechart'));
    this.myChart.setOption(this.option);
    //柱状折线图
    this.mybarChart = echarts.init(document.getElementById('barchart'));
    this.mybarChart.setOption(this.baroption);

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

    console.log(this.validateForm)
  }
  resetForm(e: MouseEvent): void {
    e.preventDefault();
    this.validateForm.reset();
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
  }


  //预警类型接口
  warningTypes: any //预警接口数据
  warningTypesDetails: any
  warningType() {
    this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
      this.warningTypesDetails = data.result
      this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType });
    })
  }


  list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

  selectedType = '分布'
  selectedRankingType = '站点排名'
  echartClick(type) {
    this.selectedType = type
    this.mybarChart.dispose()
    this.mybarChart = echarts.init(document.getElementById('barchart'));
    if (type == '排名') {
      this.mybarChart.setOption(this.baroption2);
    } else {
      this.mybarChart.setOption(this.baroption);
    }

  }
  // echartClick2(type) {
  //   this.selectedRankingType = type
  // }
}