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';
|
import * as $ from 'jquery';
|
|
@Component({
|
selector: 'app-report',
|
templateUrl: './report.component.html',
|
styleUrls: ['./report.component.css']
|
|
})
|
export class ReportComponent implements OnInit {
|
constructor(
|
public injector: Injector,
|
public http: HttpClient,
|
public activeRoute: ActivatedRoute,
|
public msgSrv: NzMessageService
|
) {
|
for (let index = 0; index < 30; index++) {
|
this.sensorArr.push(index);
|
}
|
}
|
|
[x: string]: any;
|
|
public spinning: boolean = true;
|
|
public echartOption = {
|
backgroundColor: '',
|
title: {
|
text: '',
|
// subtext: '12月份',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: [],
|
orient: 'vertical',
|
right: 40,
|
top: 5,
|
bottom: 20,
|
type: 'scroll'
|
},
|
toolbox: {
|
show: false,
|
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: []
|
};
|
|
sensorArr: any = [];
|
items: any = [];
|
timeType: any = {};
|
title: string;
|
timeArr = ['年', '月', '日', '时', '分'];
|
ngOnInit() {
|
|
this.activeRoute.queryParams.subscribe(params => {
|
const items = this.items = JSON.parse(params.items);
|
const timeType = this.timeType = JSON.parse(params.timeTypes);
|
this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => {
|
if (res.code === 0) {
|
this.msgSrv.error(res.message);
|
} else {
|
const option = this.echartOption;
|
const sensors = res.data.sensors;
|
const timeArr = this.timeArr;
|
option.xAxis.data = res.data.times;
|
option.xAxis.name = timeArr[timeArr.indexOf(timeType.label) + 1];
|
for (let index = 0; index < sensors.length; index++) {
|
const sensorKey = sensors[index];
|
const split = sensorKey.split('-');
|
option.title.text = split[1] + timeType.label + '历走势图';
|
option.yAxis.name = split[2] && split[2] !== 'null' ? '单位:' + split[2] : '';
|
option.series = [];
|
option.legend.data = [];
|
if (index % 2 == 0) {
|
option.backgroundColor = 'rgba(0,0,0,0)';
|
} else {
|
option.backgroundColor = 'rgba(23,133,23,0.06)';
|
}
|
for (let i = 0; i < items.length; i++) {
|
this.title = items[i].formatTime;
|
const legendName = items[i].formatTime + timeType.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
|
option.legend.data[i] = legendName;
|
option.series.push({
|
name: legendName,
|
data: res.data.datas[i]['data' + i][0][sensorKey],
|
type: params.reportType,
|
smooth: true,
|
itemStyle: {
|
normal: {
|
barBorderRadius: [10, 10, 10, 10]
|
}
|
}
|
});
|
}
|
const myChart = echarts.init(document.getElementById('mydiv' + index));
|
myChart.setOption(option, true);
|
window.onresize = myChart.resize;
|
}
|
this.sensorArr.forEach(i => {
|
if (i >= sensors.length) {
|
$('#mydiv' + i).remove();
|
}
|
});
|
$('#content').attr({style: "display: inline;"});
|
this.spinning = false;
|
const title: any[] = this.title.replace(' ', '-').split('-');
|
this.title = '';
|
for (let i = 0; i < title.length; i++) {
|
this.title += title[i] + timeArr[i];
|
}
|
}
|
});
|
});
|
}
|
}
|
