沈斌
2018-02-28 f722a5bff25a5b365b33052f3a59322a7021168d
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import {environment} from '../../../environments/environment';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {Component, OnInit, Injector} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ActivatedRoute} from '@angular/router';
import * as echarts from 'echarts';
 
@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styles: []
})
export class ReportComponent implements OnInit {
 
  public data: any;
 
  public isShow = true;
 
  constructor(
    injector: Injector,
    public http: HttpClient,
    public activeRoute: ActivatedRoute,
    public msgSrv: NzMessageService
  ) { }
 
  public echartOption = {
    title: {
      text: '',
      subtext: '12月份',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [],
      left: 'left'
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: {readOnly: false},
        magicType: {type: ['line', 'bar']},
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: [],
      name: ''
    },
    yAxis: {
      type: 'value',
      name: ''
 
    },
    series: [
      {
        smooth: false,
        type: 'line',
        data: [],
        name: ''
      },
      {
        smooth: true,
        type: 'line',
        data: [],
        name: '',
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10]
          }
        }
      }
    ]
  };
 
  ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      const query = params;
      this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          const option = this.echartOption;
          const data = res.data;
          if (data['time']) {
            option.xAxis.data = data['time'];
            option.title.text = query.sensorName + query.label + '历走势图';
            option.series[0].data = [];
            option.legend.data[0] = '';
            option.series[0].name = '';
            option.series[1].data = [];
            option.legend.data[1] = '';
            option.series[1].name = '';
            if (data.dataA) {
              const legendNamea = (query.deviceaName ? query.deviceaName : query.monitorPointaName) + query.time + query.label;
              option.series[0].data = data.dataA;
              option.legend.data[0] = legendNamea;
              option.series[0].name = legendNamea;
            }
            if (data.dataB) {
              const legendNameb = (query.devicebName ? query.devicebName : params.monitorPointbName) + query.timeb + query.label;
              option.series[1].data = data['dataB'];
              option.legend.data[1] = legendNameb;
              option.series[1].name = legendNameb;
            }
            option.yAxis.name = query.sensorUnit;
            option.xAxis.name = query.xAxisName;
            const myChart = echarts.init(document.getElementById('mydiv'));
            myChart.setOption(option, true);
            window.onresize = myChart.resize;
          }
          this.isShow = true;
        }
 
      });
    });
 
  }
 
  doPrint() {
    this.isShow = false;
    window.print();
  }
  printBtnBoolean = true;
  printComplete() {
    this.printBtnBoolean = true;
  }
  beforePrint() {
    this.printBtnBoolean = false;
  }
}