From 564d6f817cd229571ad633af2105cb2d4f78c66e Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Tue, 20 Mar 2018 17:06:24 +0800
Subject: [PATCH] 数据查看功能
---
src/app/routes/analysis/query/query.component.ts | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 105 insertions(+), 10 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 3a2eb57..0ca1a58 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -14,10 +14,12 @@
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { NzMessageService } from 'ng-zorro-antd';
import * as $ from 'jquery';
+import { DateService } from '@business/services/util/date.service';
@Component({
selector: 'app-query',
- templateUrl: './query.component.html'
+ templateUrl: './query.component.html',
+ styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
public expandForm: boolean; // ��������� ������������
@@ -42,6 +44,8 @@
public _areas: { label: any, value: any[] };
public grid: Grid<any> = new Grid();
public gridSensorNames: string[] = [];
+ // ������������������������������������������
+ public sensorNameScrollLeft = '0px';
@ViewChild(NzTreeComponent) private tree: NzTreeComponent;
private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode: 'month' | 'day', dateFormat: string } = {showTime: false, mode: 'day', dateFormat: 'YYYY-MM-DD'};
// ���key-value������,������������������
@@ -111,6 +115,16 @@
this.deviceOptions = [];
}
}
+ /**
+ * ������������
+ */
+ public chartLoading: boolean;
+ public chartOption;
+ public echartsIntance;
+ public chartSelectedIndex = 0;
+ public onChartInit(e): void {
+ this.echartsIntance = e;
+ }
constructor(
private http: _HttpClient,
private sensorsService: SensorsService,
@@ -118,16 +132,10 @@
private areacodeService: AreacodeService,
private monitorPointService: MonitorPointService,
private msg: NzMessageService,
+ private dateService: DateService,
) { }
ngOnInit() {
this.initPage();
- $('.ant-table-body').on(
- 'click',
- function() {
- alert();
- console.log( $('.ant-table-body').scrollLeft());
- }
- );
}
private initPage() {
this.sensorsService.getPagingList(null, null).subscribe(
@@ -368,6 +376,7 @@
return ;
}
this.grid.loading = true;
+ this.sensorNameScrollLeft = '0px';
this.grid.data = [];
this.gridSensorNames = [];
const start: Date = this.getPeriodDate(this.actualTime , 'start');
@@ -409,10 +418,11 @@
}
); break;
}
+ this.reloadChart();
this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
(res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
if (res.code === 1) {
- const series = [];
+ let series = [];
const data = res.data;
if (!!data) {
const sensorKeys = Object.keys(data);
@@ -433,9 +443,93 @@
);
}
this.grid.loading = false;
+ this.chartSelectedIndex = 0;
+ this.reloadChart();
+ setTimeout(() => {
+ // ������������������
+ series = [{type: 'line', data: this.grid.data[0]}];
+ this.echartsIntance.setOption({
+ series: series
+ });
+ this.chartLoading = false;
+ }, 10);
}
}
- );
+ );
+ $('.ant-table-body').scroll(
+ () => {
+ this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft() + 'px';
+ }
+ );
+ }
+ private reloadChart(): void {
+ const timeList = this.grid.columns.map(item => item.text);
+ const title = this.gridSensorNames[this.chartSelectedIndex];
+ // if (!!this.echartsIntance) {
+ // this.chartOption = null;
+ // this.echartsIntance.clear();
+ // }
+ this.initOpton({title: title, xData: timeList});
+ this.chartLoading = true;
+ }
+ private initOpton(opt: {title: string, xData: string[]}) {
+ this.chartOption = {
+ title: {
+ text: opt.title
+ },
+ tooltip : {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: []
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis : [
+ {
+ type : 'category',
+ boundaryGap : false,
+ data : opt.xData
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value'
+ }
+ ],
+ series : [
+ ]
+ };
+ }
+ public switchSensor(index: number): void {
+ this.chartSelectedIndex = index;
+ this.chartLoading = true;
+ const title = this.gridSensorNames[this.chartSelectedIndex];
+ setTimeout(() => {
+ const series = [{type: 'line', data: this.grid.data[index]}];
+ this.echartsIntance.setOption({
+ title: {
+ text: title
+ },
+ series: series
+ });
+ this.chartLoading = false;
+ }, 600);
}
private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
let month = 0;
@@ -467,6 +561,7 @@
}
return mo.toDate();
}
+
}
--
Gitblit v1.8.0