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.less | 3 +
src/app/routes/analysis/query/query.component.ts | 108 +++++++++++++++++++++++++++++++++++-
src/app/routes/analysis/query/query.component.html | 20 ++++--
3 files changed, 122 insertions(+), 9 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index 7f0441c..fd684dd 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/src/app/routes/analysis/query/query.component.html
@@ -17,7 +17,7 @@
</ng-template>
</nz-input>
<ng-template #nzTemplate>
- <div [ngStyle]="{'width': '200px', 'height': '300px', 'overflow-y' :'auto'}">
+ <div [ngStyle]="{'width': '200px', 'height': '240px', 'overflow-y' :'auto'}">
<nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
</div>
</ng-template>
@@ -122,13 +122,20 @@
</form>
</nz-card>
<div nz-row [nzGutter]="16">
+ <div nz-col [nzMd]="24">
+ <nz-card>
+ <div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
+ </nz-card>
+ </div>
+</div>
+<div nz-row [nzGutter]="16">
<div nz-col [nzMd]="24">
<nz-card>
- <nz-table #nzTable [nzScroll]="{ x:5000,y:400 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
+ <nz-table #nzTable [nzScroll]="{ x:5100,y:360 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
- <th nz-th [nzWidth]="'80px'" >
+ <th nz-th [nzWidth]="'120px'" [ngStyle]="{'position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
<span>������������</span>
</th>
<th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
@@ -138,9 +145,10 @@
</thead>
</ng-template>
<tbody nz-tbody>
- <tr nz-tbody-tr *ngFor="let row of nzTable.data,index as i">
- <td nz-td>
- <span>{{ gridSensorNames[i] }}</span>
+ <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i"
+ (click) = "switchSensor(i)">
+ <td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF','position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
+ <span><span>{{ gridSensorNames[i] }}</span> <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i></span>
</td>
<td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
<span [ngSwitch]="col.type">
diff --git a/src/app/routes/analysis/query/query.component.less b/src/app/routes/analysis/query/query.component.less
new file mode 100644
index 0000000..8f3c723
--- /dev/null
+++ b/src/app/routes/analysis/query/query.component.less
@@ -0,0 +1,3 @@
+.line-chart {
+ height: 100%;
+}
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 8d4e3de..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,6 +132,7 @@
private areacodeService: AreacodeService,
private monitorPointService: MonitorPointService,
private msg: NzMessageService,
+ private dateService: DateService,
) { }
ngOnInit() {
this.initPage();
@@ -361,6 +376,7 @@
return ;
}
this.grid.loading = true;
+ this.sensorNameScrollLeft = '0px';
this.grid.data = [];
this.gridSensorNames = [];
const start: Date = this.getPeriodDate(this.actualTime , 'start');
@@ -402,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);
@@ -426,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;
@@ -460,6 +561,7 @@
}
return mo.toDate();
}
+
}
--
Gitblit v1.8.0