| | |
| | | import {ActivatedRoute} from '@angular/router'; |
| | | import * as echarts from 'echarts'; |
| | | import * as $ from 'jquery'; |
| | | |
| | | @Component({ |
| | | selector: 'app-report', |
| | | templateUrl: './report.component.html', |
| | |
| | | |
| | | }, |
| | | series: [ |
| | | { |
| | | smooth: true, |
| | | type: 'line', |
| | | data: [], |
| | | name: '' |
| | | }, |
| | | { |
| | | smooth: true, |
| | | type: 'line', |
| | | data: [], |
| | | name: '', |
| | | itemStyle: { |
| | | normal: { |
| | | barBorderRadius: [10, 10, 10, 10] |
| | | } |
| | | } |
| | | } |
| | | // { |
| | | // smooth: true, |
| | | // type: 'line', |
| | | // data: [], |
| | | // name: '', |
| | | // itemStyle: { |
| | | // normal: { |
| | | // barBorderRadius: [10, 10, 10, 10] |
| | | // } |
| | | // } |
| | | // } |
| | | ] |
| | | }; |
| | | |
| | |
| | | |
| | | ngOnInit() { |
| | | this.activeRoute.queryParams.subscribe(params => { |
| | | const items = JSON.parse(params.items); |
| | | const query = params; |
| | | console.info(query.label); |
| | | query.items = JSON.parse(query.items); |
| | | this.http.post(environment.SERVER_BASH_URL + 'report/compare', query).subscribe((res: any) => { |
| | | 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.series[0].data = []; |
| | | option.legend.data[0] = ''; |
| | | option.series[0].name = ''; |
| | | option.series[1].data = []; |
| | | option.legend.data[1] = ''; |
| | | option.series[1].name = ''; |
| | | option.xAxis.name = query.xAxisName; |
| | | if (data.dataA) { |
| | | const legendNamea = (query.deviceaName ? query.deviceaName : query.monitorPointaName) + query.time + query.label; |
| | | option.legend.data[0] = legendNamea; |
| | | option.series[0].name = legendNamea; |
| | | let index = 0; |
| | | for (const key in data.dataA[0]) { |
| | | this.arr.push(index); |
| | | let split = key.split('-'); |
| | | option.title.text = split[1] + query.label + '历走势图'; |
| | | option.series[0].data = data.dataA[0][key]; |
| | | option.yAxis.name = split[2]; |
| | | const myChart = echarts.init(document.getElementById('mydiv' + index)); |
| | | myChart.setOption(option, true); |
| | | window.onresize = myChart.resize; |
| | | index++; |
| | | } |
| | | this.sensorArr.forEach(i => { |
| | | if (this.arr.indexOf(i) == -1) { |
| | | $('#mydiv' + i).remove(); |
| | | } |
| | | const data = res.data.data; |
| | | const time = res.data.time |
| | | let index = 0; |
| | | option.xAxis.data = time; |
| | | option.xAxis.name = query.xAxisName; |
| | | |
| | | for (const key in data[0].data0[0]) { |
| | | this.arr.push(index); |
| | | let split = key.split('-'); |
| | | option.title.text = split[1] + query.label + '历走势图'; |
| | | option.yAxis.name = split[2]; |
| | | option.series = []; |
| | | option.legend.data = []; |
| | | |
| | | for (let i = 0; i < items.length; i++) { |
| | | const legendName = (items[i].mac ? items[i].mac : items[i].monitorPoint) + items[i].formatTime + query.label; |
| | | option.legend.data[i] = legendName; |
| | | const seriesData = data[i]['data' + i][0][key]; |
| | | option.series.push({ |
| | | data: seriesData, |
| | | smooth: true, |
| | | type: 'line', |
| | | name: legendName |
| | | }); |
| | | } |
| | | 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; |
| | | } |
| | | const myChart = echarts.init(document.getElementById('mydiv' + index)); |
| | | myChart.setOption(option, true); |
| | | window.onresize = myChart.resize; |
| | | index++; |
| | | } |
| | | |
| | | this.sensorArr.forEach(i => { |
| | | if (this.arr.indexOf(i) == -1) { |
| | | $('#mydiv' + i).remove(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | } |