From ba15aacf079d1a3fd13e4594f5a94cf25dacb036 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Mon, 26 Mar 2018 14:25:26 +0800
Subject: [PATCH] 报表 优化
---
src/app/routes/report/report.component.html | 16 ++--
src/app/routes/report/report.component.ts | 39 ++++++------
src/app/routes/reports/demo/demo.component.ts | 82 ++++++++------------------
src/app/routes/routes-routing.module.ts | 2
src/app/routes/reports/excel/excel.component.html | 4
src/app/routes/reports/excel/excel.component.ts | 2
src/assets/app-data.json | 4
src/app/routes/reports/demo/demo.component.html | 16 ++--
8 files changed, 67 insertions(+), 98 deletions(-)
diff --git a/src/app/routes/report/report.component.html b/src/app/routes/report/report.component.html
index 5e0387f..42bf6e2 100644
--- a/src/app/routes/report/report.component.html
+++ b/src/app/routes/report/report.component.html
@@ -1,9 +1,14 @@
+<!DOCTYPE HTML>
<html>
+<head>
+ <meta charset="utf-8">
+ <title>������������</title>
+</head>
<body>
<nz-spin [nzTip]="'������������������...'" [nzSize]="'large'"[nzSpinning]="spinning"> </nz-spin>
<div>
- <div class="bg" *ngIf="! spinning">
+ <div class="bg" *ngIf="!spinning">
<div class="t_bg">
<img src="./assets/img/logo.png">
@@ -39,18 +44,13 @@
</div>
</div>
-
- <div id="content" style="display: none;">
+ <div [ngStyle]="{'display':spinning ? 'none' : 'block' }">
<div *ngFor="let i of sensorArr">
<div id="mydiv{{i}}" style="height: 485.35px; width: 1000px"></div>
</div>
</div>
- <!-- <div id="foot" style="height: 486px; width: 1000px">
- <h1>������������������</h1>
- </div> -->
-
- <div class="bg" *ngIf="! spinning">
+ <div class="bg" *ngIf="!spinning">
<div class="t_bg_b">
<h1>{{title}}������������������������</h1>
</div>
diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index 4f85b42..31d5571 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -13,22 +13,11 @@
})
export class ReportComponent implements OnInit {
- constructor(
- public injector: Injector,
- public http: HttpClient,
- public activeRoute: ActivatedRoute,
- public msgSrv: NzMessageService
- ) {
- for (let index = 0; index < 30; index++) {
- this.sensorArr.push(index);
- }
- }
-
[x: string]: any;
public spinning: boolean = true;
- public echartOption = {
+ private echartOption = {
backgroundColor: '',
title: {
text: '',
@@ -72,16 +61,27 @@
series: []
};
- sensorArr: any = [];
- items: any = [];
- timeType: any = {};
- title: string;
- timeArr = ['���', '���', '���', '���', '���'];
- ngOnInit() {
+ public sensorArr: any = [];
+ public items: any = [];
+ private timeType: any = {};
+ public title: string;
+ private timeArr = ['���', '���', '���', '���', '���'];
+ constructor(
+ public injector: Injector,
+ public http: HttpClient,
+ public activeRoute: ActivatedRoute,
+ public msgSrv: NzMessageService
+ ) {
+ for (let index = 0; index < 30; index++) {
+ this.sensorArr.push(index);
+ }
+ }
+
+ ngOnInit() {
this.activeRoute.queryParams.subscribe(params => {
const items = this.items = JSON.parse(params.items);
- const timeType = this.timeType = JSON.parse(params.timeTypes);
+ const timeType = this.timeType = JSON.parse(params.timeType);
this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => {
if (res.code === 0) {
this.msgSrv.error(res.message);
@@ -128,7 +128,6 @@
$('#mydiv' + i).remove();
}
});
- $('#content').attr({style: "display: inline;"});
this.spinning = false;
const title: any[] = this.title.replace(' ', '-').split('-');
this.title = '';
diff --git a/src/app/routes/reports/demo/demo.component.html b/src/app/routes/reports/demo/demo.component.html
index 3ff5aff..2b7f51f 100644
--- a/src/app/routes/reports/demo/demo.component.html
+++ b/src/app/routes/reports/demo/demo.component.html
@@ -1,4 +1,4 @@
-<pro-header [title]="'������������'"></pro-header>
+<pro-header [title]="'������������'"></pro-header>
<nz-card [nzBordered]="false">
<form nz-form (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
<div nz-row [nzGutter]="24">
@@ -20,7 +20,7 @@
<label nz-form-item-required>������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-select [(ngModel)]="query.timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'���������'" (ngModelChange)="typeChange($event)">
+ <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'���������'">
<nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
</nz-select>
</div>
@@ -57,7 +57,7 @@
<div nz-form-control class="flex-1">
<nz-select [(ngModel)]="item.monitorPoint" name="monitorPoint{{item.id}}" nzAllowClear [nzPlaceHolder]="'���������'" [nzFilter]="false" [nzSize]="'large'"
(nzSearchChange)="searchChange($event,i)" [nzNotFoundContent]="'������������'" (ngModelChange)="monitorPointChange($event,i)" nzShowSearch>
- <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option>
+ <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option"> </nz-option>
</nz-select>
</div>
</div>
@@ -68,8 +68,8 @@
<label> ������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-select [(ngModel)]="item.mac" name="mac{{item.id}}" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'���������'" (ngModelChange)="deviceChange($event,i)">
- <nz-option *ngFor="let option of item.deviceOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option>
+ <nz-select [(ngModel)]="item.device" name="mac{{item.id}}" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'���������'">
+ <nz-option *ngFor="let option of item.deviceOptions" [nzLabel]="option.name" [nzValue]="option" ></nz-option>
</nz-select>
</div>
</div>
@@ -80,13 +80,13 @@
<label nz-form-item-required>������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'���������'" [nzFormat]="time.format" [nzDisabledDate]="_disabledDate"
- [nzMode]="query.timeType.value=='hour'||query.timeType.value=='day'?'day':'month'" [nzShowTime]="query.timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>
+ <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'���������'" [nzFormat]="timeType.format.toUpperCase()" [nzSize]="'large'"
+ [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
</div>
</div>
</div>
<div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length > 1">
- <button nz-button type="button" [nzType]="'danger'" [nzSize]="'large'" (click)="items.splice(i, 1)" nzGhost>
+ <button nz-button type="button" [nzType]="'danger'" [nzSize]="'large'" (click)="items.splice(i, 1)">
<i class="anticon anticon-minus-circle-o dynamic-delete-button"></i>
<span>������������������</span>
</button>
diff --git a/src/app/routes/reports/demo/demo.component.ts b/src/app/routes/reports/demo/demo.component.ts
index 990a166..c64baca 100644
--- a/src/app/routes/reports/demo/demo.component.ts
+++ b/src/app/routes/reports/demo/demo.component.ts
@@ -12,16 +12,6 @@
})
export class DemoComponent implements OnInit {
- constructor(
- public http: HttpClient,
- public dateSrv: DateService,
- public router: Router,
- public msgSrv: NzMessageService
- ) {
- this.query.timeType = this.typeOptions[1];
- this.time.format = this.query.timeType.format.toUpperCase();
- this.query.reportType = this.reportOptions[1].value;
- }
[x: string]: any;
public query: any = {};
public sensorOptions = [];
@@ -36,17 +26,23 @@
{value: 'line', label: '���������'}
];
public monitorPointOptions = [];
- public time: any = {};
public items = [{
id: 0,
monitorPoint: null,
- monitorPointName: '',
- monitorPointAddress: '',
- mac: '',
- deviceName: '',
+ device: null,
time: null,
deviceOptions: []
}];
+
+ constructor(
+ public http: HttpClient,
+ public dateSrv: DateService,
+ public router: Router,
+ public msgSrv: NzMessageService
+ ) {
+ this.timeType = this.typeOptions[1];
+ this.query.reportType = this.reportOptions[1].value;
+ }
ngOnInit() {
this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
@@ -58,23 +54,12 @@
});
}
- typeChange(searchText) {
- this.typeOptions.forEach(types => {
- if (types === searchText) {
- this.time.format = types.format.toUpperCase();
- }
- });
- }
-
addItem() {
const id = (this.items.length > 0) ? this.items[this.items.length - 1].id + 1 : 0;
const index = this.items.push({
id: id,
monitorPoint: null,
- monitorPointName: '',
- monitorPointAddress: '',
- mac: '',
- deviceName: '',
+ device: null,
time: null,
deviceOptions: []
});
@@ -97,38 +82,15 @@
monitorPointChange(value, i) {
this.items[i].deviceOptions = [];
+ this.items[i].device = null;
if (value) {
- this.monitorPointOptions.forEach(monitorPoint => {
- if (monitorPoint.id === value) {
- this.items[i].monitorPointName = monitorPoint.name;
- this.items[i].monitorPointAddress = monitorPoint.address;
- }
- });
- this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value}}).subscribe((res: any) => {
+ this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value.id}}).subscribe((res: any) => {
if (res.code === 0) {
this.msgSrv.error(res.message);
} else {
this.items[i].deviceOptions = res.data;
- this.items[i].mac = null;
}
});
- } else {
- this.items[i].monitorPoint = null;
- this.items[i].mac = null;
- this.items[i].monitorPointName = '';
- this.items[i].monitorPointAddress = '';
- }
- }
-
- deviceChange(value, i) {
- if (value) {
- this.items[i].deviceOptions.forEach(device => {
- if (device.mac === value) {
- this.items[i].deviceName = device.name;
- }
- });
- } else {
- this.items[i].deviceName = '';
}
}
@@ -144,14 +106,23 @@
let item = this.items[i];
let queryItem: any = {};
if (item.monitorPoint && item.time) {
- queryItem.formatTime = this.dateSrv.date_format(item.time, this.time.format);
for (var key in item) {
if (item[key]) {
queryItem[key] = item[key];
}
}
+ queryItem.monitorPointId = queryItem.monitorPoint.id;
+ queryItem.monitorPointName = queryItem.monitorPoint.name;
+ queryItem.monitorPointAddress = queryItem.monitorPoint.address;
+ delete queryItem.monitorPoint;
+ if (queryItem.device) {
+ queryItem.mac = queryItem.device.mac;
+ queryItem.deviceName = queryItem.device.name;
+ delete queryItem.device;
+ }
queryItem.deviceCount = queryItem.deviceOptions.length;
delete queryItem.deviceOptions;
+ queryItem.formatTime = this.dateSrv.date_format(queryItem.time, this.timeType.format.toUpperCase());
delete queryItem.time;
queryItems.push(queryItem);
} else {
@@ -159,7 +130,7 @@
break;
}
}
- if (validate && query.timeType && query.reportType) {
+ if (validate && this.timeType && query.reportType) {
query.sensors = null;
if (query.sensorKey && query.sensorKey.length > 0) {
const sensors = [];
@@ -169,11 +140,10 @@
query.sensors = JSON.stringify(sensors);
}
query.items = JSON.stringify(queryItems);
- query.timeTypes = JSON.stringify(query.timeType);
+ query.timeType = JSON.stringify(this.timeType);
this.router.navigate(['report'], {queryParams: query});
} else {
this.msgSrv.error('���������������������������������������');
}
-
}
}
diff --git a/src/app/routes/reports/excel/excel.component.html b/src/app/routes/reports/excel/excel.component.html
index b4d7023..4ecbfe3 100644
--- a/src/app/routes/reports/excel/excel.component.html
+++ b/src/app/routes/reports/excel/excel.component.html
@@ -1,4 +1,4 @@
-<pro-header [title]="'Excel������'"></pro-header>
+<pro-header [title]="'������������'"></pro-header>
<nz-card [nzBordered]="false">
<form nz-form (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
<div nz-row [nzGutter]="24">
@@ -20,7 +20,7 @@
<label nz-form-item-required>���������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-select [(ngModel)]="query.monitorPoint" name="monitorPoint" nzAllowClear [nzPlaceHolder]="'���������'" [nzFilter]="false" [nzSize]="'large'"
+ <nz-select [(ngModel)]="query.monitorPointId" name="monitorPoint" nzAllowClear [nzPlaceHolder]="'���������'" [nzFilter]="false" [nzSize]="'large'"
(nzSearchChange)="searchChange($event)" [nzNotFoundContent]="'������������'" (ngModelChange)="monitorPointChange($event)" nzShowSearch>
<nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option>
</nz-select>
diff --git a/src/app/routes/reports/excel/excel.component.ts b/src/app/routes/reports/excel/excel.component.ts
index 24d869b..519b820 100644
--- a/src/app/routes/reports/excel/excel.component.ts
+++ b/src/app/routes/reports/excel/excel.component.ts
@@ -104,7 +104,7 @@
reportQuery() {
const query = this.query;
- if (query.type && query.monitorPoint && query.time) {
+ if (query.type && query.monitorPointId && query.time) {
if (query.time) {
query.time = this.dateSrv.date_format(query.time, this.time.format);
}
diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts
index f026255..f4719f0 100644
--- a/src/app/routes/routes-routing.module.ts
+++ b/src/app/routes/routes-routing.module.ts
@@ -42,7 +42,7 @@
{
path: 'report',
component: ReportComponent,
- data: {title: '������������'}
+ data: {title: '������������'}
},
{ path: '**', redirectTo: 'passport/login' }
];
diff --git a/src/assets/app-data.json b/src/assets/app-data.json
index 30c85ad..9877414 100644
--- a/src/assets/app-data.json
+++ b/src/assets/app-data.json
@@ -60,11 +60,11 @@
"link": "/reports/query"
},
{
- "text": "���������������",
+ "text": "������������",
"link": "/reports/demo"
},
{
- "text": "Excel������",
+ "text": "������������",
"link": "/reports/excel"
}
]
--
Gitblit v1.8.0