From 234f914507b05a3b1a92435f5067df6ca4e5eee0 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Tue, 13 Mar 2018 14:22:16 +0800
Subject: [PATCH] 数据报表
---
src/app/routes/analysis/query/query.component.less | 2
src/app/business/entity/data.ts | 5 +
src/app/routes/analysis/query/query.component.ts | 118 ++++++++++++++++++++++++++---
src/app/routes/analysis/analysis.module.ts | 4
src/app/routes/analysis/query/query.component.html | 2
src/app/business/services/util/date.service.ts | 50 ++++++++++++
6 files changed, 164 insertions(+), 17 deletions(-)
diff --git a/src/app/business/entity/data.ts b/src/app/business/entity/data.ts
index 24f7cb5..c2458bb 100644
--- a/src/app/business/entity/data.ts
+++ b/src/app/business/entity/data.ts
@@ -153,3 +153,8 @@
areaRangeId?: number;
timeUnits?: TimeUnits;
}
+
+export interface PairData {
+ category: string;
+ value: number;
+}
diff --git a/src/app/business/services/util/date.service.ts b/src/app/business/services/util/date.service.ts
index 7b3f33c..8dbcf7d 100644
--- a/src/app/business/services/util/date.service.ts
+++ b/src/app/business/services/util/date.service.ts
@@ -1,6 +1,8 @@
import {Injectable} from '@angular/core';
import * as moment from 'moment';
+import { TimePeriod } from '@business/entity/data';
+import { TimeUnits } from '@business/enum/types.enum';
@Injectable()
export class DateService {
@@ -12,4 +14,52 @@
today(format: string) {
return moment().format(format);
}
+ /**
+ * ������������������,������������
+ */ countTimeRange(timePeriod: TimePeriod): number {
+ let timeUnit = 0;
+ switch (timePeriod.timeUnits) {
+ case TimeUnits.YEAR:
+ timeUnit = 1000 * 60 * 60 * 24 * 30 * 12; break;
+ case TimeUnits.MONTH:
+ timeUnit = 1000 * 60 * 60 * 24 * 30; break;
+ case TimeUnits.DAY:
+ timeUnit = 1000 * 60 * 60 * 24; break;
+ case TimeUnits.HOUR:
+ timeUnit = 1000 * 60 * 60; break;
+ case TimeUnits.MINUTE:
+ timeUnit = 1000 * 60; break;
+ }
+ return Math.floor((timePeriod.endTime.getTime() - timePeriod.startTime.getTime()) / timeUnit);
+ }
+ makeTimeList(timePeriod: TimePeriod): string [] {
+ const start = moment(timePeriod.startTime);
+ const end = moment(timePeriod.endTime);
+ const timeList: string[] = [];
+ let timeUnit: moment.DurationInputArg2 = 'day';
+ let formatStyle = '';
+ switch (timePeriod.timeUnits) {
+ case TimeUnits.YEAR:
+ formatStyle = 'YYYY';
+ timeUnit = 'year'; break;
+ case TimeUnits.MONTH:
+ formatStyle = 'YYYY-MM';
+ timeUnit = 'month'; break;
+ case TimeUnits.DAY:
+ formatStyle = 'YYYY-MM-DD';
+ timeUnit = 'day'; break;
+ case TimeUnits.HOUR:
+ formatStyle = 'YYYY-MM-DD HH';
+ timeUnit = 'hour'; break;
+ case TimeUnits.MINUTE:
+ formatStyle = 'YYYY-MM-DD HH:mm';
+ timeUnit = 'minute'; break;
+ }
+ do {
+ const outTime = start.format(formatStyle);
+ timeList.push(outTime);
+ start.add(1, timeUnit);
+ }while (start.valueOf() < end.valueOf());
+ return timeList;
+ }
}
diff --git a/src/app/routes/analysis/analysis.module.ts b/src/app/routes/analysis/analysis.module.ts
index b60cda5..efe9ed3 100644
--- a/src/app/routes/analysis/analysis.module.ts
+++ b/src/app/routes/analysis/analysis.module.ts
@@ -9,6 +9,8 @@
import { CommonModule } from '@angular/common';
import { DeviceService } from '@business/services/http/device.service';
import { NgxEchartsModule } from 'ngx-echarts';
+import { DateService } from '@business/services/util/date.service';
+import { NzMessageService } from 'ng-zorro-antd';
const routes: Routes = [
{
path: '',
@@ -28,6 +30,6 @@
RouterModule.forChild(routes)
],
declarations: [QueryComponent],
- providers: [SensorsService, AreacodeService, MonitorPointService, DeviceService]
+ providers: [SensorsService, NzMessageService, AreacodeService, MonitorPointService, DeviceService, DateService]
})
export class AnalysisModule { }
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index dc05932..065739c 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/src/app/routes/analysis/query/query.component.html
@@ -153,4 +153,4 @@
</div>
</nz-card>
</form>
-<div echarts [options]="chartOption" class="line-chart" (chartInit)="onChartInit($event)"></div>
+<div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
diff --git a/src/app/routes/analysis/query/query.component.less b/src/app/routes/analysis/query/query.component.less
index b2452d3..9300133 100644
--- a/src/app/routes/analysis/query/query.component.less
+++ b/src/app/routes/analysis/query/query.component.less
@@ -10,7 +10,7 @@
right: 0;
}
}
-.demo-chart {
+.line-chart {
height: 400px;
}
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 9d59510..4b327f8 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -1,7 +1,7 @@
import { ExampleService } from '@business/services/util/example.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { AreacodeService } from '@business/services/http/areacode.service';
-import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device } from '@business/entity/data';
+import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device, PairData } from '@business/entity/data';
import { PageBean, ResultBean } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
@@ -12,6 +12,8 @@
import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { environment } from '@env/environment';
import { DeviceService } from '@business/services/http/device.service';
+import { DateService } from '@business/services/util/date.service';
+import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-query',
templateUrl: './query.component.html',
@@ -89,6 +91,8 @@
private http: _HttpClient,
private monitorPointService: MonitorPointService,
private deviceService: DeviceService,
+ private dateService: DateService,
+ private msg: NzMessageService
) {
}
@@ -298,31 +302,32 @@
}
private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
- debugger;
- let month = 0 ;
- let day = 0;
+ let month = 0;
+ let day = 1;
let hour = 0;
let minute = 0;
let second = 0;
+ let millisecond = 0;
if ('end' === type) {
- month = 12;
+ month = 11;
day = 31;
hour = 23;
minute = 59;
second = 59;
+ millisecond = 999;
}
const mo = moment(value);
switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
case TimeUnits.YEAR:
- mo.month(month).day(day).hour(hour).minute(minute).second(second); break;
+ mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
case TimeUnits.MONTH:
- mo.day(day).hour(hour).minute(minute).second(second); break;
+ mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
case TimeUnits.DAY:
- mo.hour(hour).minute(minute).second(second); break;
+ mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
case TimeUnits.HOUR:
- mo.minute(minute).second(second); break;
+ mo.minute(minute).second(second).millisecond(millisecond); break;
case TimeUnits.MINUTE:
- mo.second(second); break;
+ mo.second(second).millisecond(millisecond); break;
}
return mo.toDate();
}
@@ -465,7 +470,8 @@
// ������������������������ actualTimeDisabled
get actualTimeDisabled() {
if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
- this._actualTime = null;
+ this.setActualTime(null);
+ // ������������������������������
this.actualTimes = null;
}
return !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0];
@@ -483,10 +489,94 @@
this.lineChartCriteria.timePeriod.endTime = this.getPeriodDate(endTime, 'end');
this.lineChartCriteria.dataConditions.pop();
this.lineChartCriteria.dataConditions.push(this.dataConditionTemp);
- this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
- res => console.log(res)
- );
+ this.reloadChart();
}
+ private reloadChart(): void {
+ const countTimeRange = this.dateService.countTimeRange(this.lineChartCriteria.timePeriod);
+ let timeList: string[];
+ const maxTimeRange = 5000;
+ if (countTimeRange < maxTimeRange ) {
+ timeList = this.dateService.makeTimeList(this.lineChartCriteria.timePeriod);
+ } else {
+ this.msg.error('������������������������' + maxTimeRange + '������������������������' + countTimeRange);
+ return ;
+ }
+
+ if (!!this.echartsIntance) {
+ this.chartOption = null;
+ this.echartsIntance.clear();
+ }
+ this.initOpton({data: timeList});
+ this.chartLoading = true;
+ this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
+ (res: ResultBean<Array<Array<PairData>>>) => {
+ if (res.code === 1) {
+ const series = [];
+ const dataList = res.data;
+ if (!!dataList && !!dataList.length) {
+ dataList.forEach(
+ data => {
+ const outData = data.map( item => {
+ return item.value;
+ });
+ series.push({type: 'line', data: outData});
+ }
+ );
+ this.echartsIntance.setOption({
+ series: series
+ });
+ this.chartLoading = false;
+ }
+ }
+ }
+ );
+ }
+ private initOpton(opt: {data: string[]}) {
+
+ this.chartOption = {
+ title: {
+ text: ''
+ },
+ 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.data
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value'
+ }
+ ],
+ series : [
+ ]
+ };
+ }
+ chartLoading: boolean;
chartOption;
echartsIntance;
onChartInit(ec) {
--
Gitblit v1.8.0