From c597ff5895ae803ce5584f3e8463d8f9224b0fa4 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 27 Apr 2018 09:03:59 +0800
Subject: [PATCH] 优化 饼图功能
---
src/app/routes/reports/query/query.component.ts | 101 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 83 insertions(+), 18 deletions(-)
diff --git a/src/app/routes/reports/query/query.component.ts b/src/app/routes/reports/query/query.component.ts
index b113d75..109f749 100644
--- a/src/app/routes/reports/query/query.component.ts
+++ b/src/app/routes/reports/query/query.component.ts
@@ -16,6 +16,7 @@
import * as $ from 'jquery';
import { DateService } from '@business/services/util/date.service';
import { zip } from 'rxjs/observable/zip';
+import { Subject } from 'rxjs/Subject';
@Component({
selector: 'app-query',
@@ -48,10 +49,10 @@
* @memberof QueryComponent
*/
public timeUnitOptions = [
- {label: '������', value: TimeUnits.MONTH},
- {label: '������', value: TimeUnits.DAY},
- {label: '������', value: TimeUnits.HOUR},
- {label: '������', value: TimeUnits.MINUTE},
+ {label: '���', value: TimeUnits.MONTH},
+ {label: '���', value: TimeUnits.DAY},
+ {label: '���', value: TimeUnits.HOUR},
+ {label: '���', value: TimeUnits.MINUTE},
];
public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
// ���������������������������������������
@@ -130,7 +131,7 @@
if (!!text) {
example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id })
.andLike({name: 'text', value: text});
- }else {
+ } else {
example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id });
}
this.deviceService.getPageByExample(null, example).subscribe(
@@ -165,6 +166,46 @@
) { }
ngOnInit() {
this.initPage();
+ // ������������ tree click ������
+ this.treeClickStream.debounceTime(1).subscribe( event => {
+ const data = event.node.data;
+ // console.log(data);
+ if (data.id === -1) {
+ const children = data.children;
+ // ������������
+ if (!data.halfChecked && data.checked) {
+ // ���������������
+ data['checked'] = false;
+ data['halfChecked'] = false;
+ children.forEach(element => {
+ element['checked'] = false;
+ });
+ this._sensors = {};
+ // ������ ������ ������������
+ } else {
+ // ������������
+ children.forEach(element => {
+ element['checked'] = true;
+ this._sensors [element.id] = element.sensorKey;
+ });
+ data['checked'] = true;
+ data['halfChecked'] = false;
+ }
+ } else {
+ const parentData = event.node.parent.data;
+ data['checked'] = !data['checked'];
+ if (data['checked']) {
+ this._sensors [data.id] = data.sensorKey;
+ } else {
+ delete this._sensors [data.id];
+ }
+ const length = Object.keys(this._sensors).length;
+ parentData['halfChecked'] = length > 0
+ && this.sensorOptions[0].children.length > length;
+ parentData['checked'] = !parentData['halfChecked'] && length !== 0;
+ }
+ this.reloadSensorNames();
+ });
}
private initPage() {
this.sensorsService.getPagingList(null, null).subscribe(
@@ -292,6 +333,10 @@
* @type {string}
* @memberof QueryComponent
*/
+ private treeClickStream: Subject<any> = new Subject<any>();
+ public onTreeClickSelect(event): void {
+ this.treeClickStream.next(event);
+ }
public onSensorSelect(event): void {
const data = event.node.data;
if (data.id === -1 && data.halfChecked === false) {
@@ -304,24 +349,29 @@
} else {
this._sensors = {};
}
- }else {
+ } else {
if (!!data.checked) {
this._sensors [data.id] = data.sensorKey;
- }else {
+ } else {
delete this._sensors[data.id];
}
}
- this._sensorNames = '';
- this.sensorOptions[0].children.forEach(
- sensor => {
- const hasSensor = Object.keys(this._sensors).some(
- id => Number(id) === Number(sensor.id)
- );
- if (hasSensor) {
- this._sensorNames += sensor.name + ',';
+ this.reloadSensorNames();
+ }
+ private reloadSensorNames(): void {
+ // ������������������������
+ setTimeout(() => {
+ this._sensorNames = '';
+ const sensorNameList = Object.keys(this._sensors).map(
+ id => {
+ const sensor = this.sensorOptions[0].children.find(item => {
+ return Number(id) === Number(item.id) ;
+ });
+ return sensor.name;
}
- }
- );
+ );
+ this._sensorNames = sensorNameList.join(', ');
+ }, 1);
}
public setTimeUnit(val: {label: string, value: TimeUnits} ) {
switch (val.value) {
@@ -453,6 +503,7 @@
this.reloadChartTitle();
// ������������
this.grid.data = [];
+ console.log(lineChartCriteria);
this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
(res: ResultBean<{[key: string]: Array<Array<number>>}>) => {
if (res.code === 1) {
@@ -476,7 +527,7 @@
weight = !!value ? weight : weight + 1;
}
// ���������������������2���
- return !!value ? String(Math.round(value * 100) / 100) : '-';
+ return value != null ? String(Math.round(value * 100) / 100) : '-';
}
);
this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
@@ -642,9 +693,23 @@
public sensorTableFocus(index) {
this.sensorTableFocusIndex = index;
}
+
public sensorTableBlur(index) {
this.sensorTableFocusIndex = -1;
}
+ public sensorSelectVisible = false;
+ public treeMouseOverOccur = false;
+ public onTreeMouseOver(event) {
+ this.treeMouseOverOccur = true;
+ }
+ public onTreeMouseOut(event) {
+ this.treeMouseOverOccur = false;
+ setTimeout(() => {
+ if (!this.treeMouseOverOccur) {
+ this.sensorSelectVisible = false;
+ }
+ }, 900);
+ }
}
--
Gitblit v1.8.0