From ab64396f29860ead5a153e6fa063e957fab1a84f Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 23 Mar 2018 15:09:49 +0800
Subject: [PATCH] 报表 优化
---
src/app/routes/report/report.component.html | 9 +++-
src/app/routes/report/report.component.css | 19 ++++++---
src/app/routes/report/report.component.ts | 22 ++++------
src/app/routes/reports/demo/demo.component.ts | 54 ++++++++++++++------------
src/app/routes/report/images/text_t_left.png | 0
src/app/routes/report/images/text_t_right.png | 0
src/app/routes/reports/demo/demo.component.html | 9 ++--
src/app/routes/report/images/text_t_bg.png | 0
8 files changed, 61 insertions(+), 52 deletions(-)
diff --git a/src/app/routes/report/images/text_t_bg.png b/src/app/routes/report/images/text_t_bg.png
new file mode 100644
index 0000000..d8b159b
--- /dev/null
+++ b/src/app/routes/report/images/text_t_bg.png
Binary files differ
diff --git a/src/app/routes/report/images/text_t_left.png b/src/app/routes/report/images/text_t_left.png
new file mode 100644
index 0000000..c0c2698
--- /dev/null
+++ b/src/app/routes/report/images/text_t_left.png
Binary files differ
diff --git a/src/app/routes/report/images/text_t_right.png b/src/app/routes/report/images/text_t_right.png
new file mode 100644
index 0000000..f186672
--- /dev/null
+++ b/src/app/routes/report/images/text_t_right.png
Binary files differ
diff --git a/src/app/routes/report/report.component.css b/src/app/routes/report/report.component.css
index ee4dc07..1bf9b73 100644
--- a/src/app/routes/report/report.component.css
+++ b/src/app/routes/report/report.component.css
@@ -9,11 +9,11 @@
.clear_fix:after{content:"";display: block;height:0;clear:both;visibility: hidden}
.bg{ margin: 0 0; width: 1000px;}
- .t_bg{height: 485.3px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }
+ .t_bg{height: 485.35px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }
.t_bg img{text-align: center; width:200px; display: block; margin: 0 auto; padding-top: 30px;}
- .t_bg h1{padding-top: 5px; text-align: center; font-size: 60px; font-weight: bold;}
+ .t_bg h1{padding-top: 5px; text-align: center; font-size: 54px; font-weight: bold;}
.container{padding-top:30px;text-align:center;}
.title{display:inline-block;}
@@ -23,17 +23,22 @@
.content{ text-align: center; margin: 10px; margin-left: 70px; margin-right: 70px;}
.content .left{ width: 48%; float: left; padding-right: 5px;}
- .content h2,.content .text1,.content .text2{ color: rgb(255, 254, 254);text-shadow: 4.243px 4.243px 5.64px rgba(0, 97, 207, 0.75); font-weight: 500;}
- .content h2{ font-size:20px;line-height: 40px; background:url(./images/bg_yuanjiao.png) no-repeat center center; background-size:80% 90%;}
- .content .text1{ font-size:18px;line-height: 30px;}
- .content .text2{ font-size:15px;line-height: 25px;}
+ .content .text_t,.content .text1,.content .text2{ color: rgb(255, 254, 254);text-shadow: 4.243px 4.243px 5.64px rgba(0, 97, 207, 0.75); font-weight: 500;}
+
+ .content .text_t{display:inline-block;}
+ .content .text_t_left{ width: 14px;height: 28px; float: left; background: url(./images/text_t_left.png) no-repeat;}
+ .content .text_t_bg{ background: url(./images/text_t_bg.png) repeat;height: 28px; float: left;font-size: 18px; line-height: 28px;}
+ .content .text_t_right{ width: 14px;height: 28px; float: left; background: url(./images/text_t_right.png) no-repeat;}
+
+ .content .text1{ font-size:16px;line-height: 30px;}
+ .content .text2{ font-size:14px;line-height: 25px;}
.content .text2 .text_l{ float: left;}
.content .text2 .text_r{ float: right;}
.content .right{ float: right; width: 48%;}
/*bottom*/
- .t_bg_b{width: 100%;height: 485.3px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}
+ .t_bg_b{width: 100%;height: 485.35px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}
.t_bg_b h1{padding-top: 25px; text-align: center; font-size: 16px; line-height: 34px; font-weight: 600;}
diff --git a/src/app/routes/report/report.component.html b/src/app/routes/report/report.component.html
index 8e61a48..5e0387f 100644
--- a/src/app/routes/report/report.component.html
+++ b/src/app/routes/report/report.component.html
@@ -23,7 +23,12 @@
<div class="content">
<div *ngFor="let item of items;let i = index">
<div class="{{i % 2 == 0 ? 'left' : 'right'}}">
- <h2>{{item.monitorPointName}}</h2>
+ <div class="text_t">
+ <div class="text_t_left"></div>
+ <div class="text_t_bg">{{item.monitorPointName}}</div>
+ <div class="text_t_right"></div>
+ <div class="clear_fix"></div>
+ </div>
<p class="text1">���������������{{item.monitorPointAddress}}</p>
<p class="text1">���������������������{{item.deviceCount}}���</p>
<div class="clear_fix"></div>
@@ -37,7 +42,7 @@
<div id="content" style="display: none;">
<div *ngFor="let i of sensorArr">
- <div id="mydiv{{i}}" style="height: 485.3px; width: 1000px"></div>
+ <div id="mydiv{{i}}" style="height: 485.35px; width: 1000px"></div>
</div>
</div>
diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index 32699da..4f85b42 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -81,17 +81,16 @@
this.activeRoute.queryParams.subscribe(params => {
const items = this.items = JSON.parse(params.items);
- const timeType = this.timeType = JSON.parse(params.timeType);
+ const timeType = this.timeType = JSON.parse(params.timeTypes);
this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => {
if (res.code === 0) {
this.msgSrv.error(res.message);
} else {
const option = this.echartOption;
- const datas = res.data.datas;
- const times = res.data.times;
const sensors = res.data.sensors;
- option.xAxis.data = times;
- option.xAxis.name = timeType.xAxisName;
+ const timeArr = this.timeArr;
+ option.xAxis.data = res.data.times;
+ option.xAxis.name = timeArr[timeArr.indexOf(timeType.label) + 1];
for (let index = 0; index < sensors.length; index++) {
const sensorKey = sensors[index];
const split = sensorKey.split('-');
@@ -108,12 +107,11 @@
this.title = items[i].formatTime;
const legendName = items[i].formatTime + timeType.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
option.legend.data[i] = legendName;
- const seriesData = datas[i]['data' + i][0][sensorKey];
option.series.push({
- data: seriesData,
- smooth: true,
- type: params.reportType,
name: legendName,
+ data: res.data.datas[i]['data' + i][0][sensorKey],
+ type: params.reportType,
+ smooth: true,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 10, 10]
@@ -132,12 +130,10 @@
});
$('#content').attr({style: "display: inline;"});
this.spinning = false;
- const title = this.title.replace(' ', '-').split('-');
+ const title: any[] = this.title.replace(' ', '-').split('-');
this.title = '';
for (let i = 0; i < title.length; i++) {
- if (i < 3) {
- this.title = this.title + title[i] + this.timeArr[i];
- }
+ this.title += title[i] + timeArr[i];
}
}
});
diff --git a/src/app/routes/reports/demo/demo.component.html b/src/app/routes/reports/demo/demo.component.html
index 77ce44b..3ff5aff 100644
--- a/src/app/routes/reports/demo/demo.component.html
+++ b/src/app/routes/reports/demo/demo.component.html
@@ -20,8 +20,8 @@
<label nz-form-item-required>������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-select [(ngModel)]="query.type" name="type" [nzSize]="'large'" [nzPlaceHolder]="'���������'" (ngModelChange)="typeChange($event)">
- <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
+ <nz-select [(ngModel)]="query.timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'���������'" (ngModelChange)="typeChange($event)">
+ <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
</nz-select>
</div>
</div>
@@ -33,8 +33,6 @@
</div>
<div nz-form-control class="flex-1">
<nz-select [(ngModel)]="query.reportType" name="reportType" [nzSize]="'large'" [nzPlaceHolder]="'���������'">
- <!-- <nz-option [nzLabel]="'���������'" [nzValue]="'bar'" selected></nz-option>
- <nz-option [nzLabel]="'���������'" [nzValue]="'line'" ></nz-option> -->
<nz-option *ngFor="let option of reportOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
</nz-select>
</div>
@@ -82,7 +80,8 @@
<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" [nzMode]="query.type=='hour'||query.type=='day'?'day':'month'" [nzSize]="'large'" [nzShowTime]="query.type=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
+ <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>
</div>
</div>
</div>
diff --git a/src/app/routes/reports/demo/demo.component.ts b/src/app/routes/reports/demo/demo.component.ts
index 6d17800..990a166 100644
--- a/src/app/routes/reports/demo/demo.component.ts
+++ b/src/app/routes/reports/demo/demo.component.ts
@@ -18,19 +18,18 @@
public router: Router,
public msgSrv: NzMessageService
) {
- const timeType = this.timeType = this.typeOptions[1];
- this.query.type = timeType.value;
- this.time.format = timeType.format.toUpperCase();
+ 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 = [];
public typeOptions = [
- {value: 'year', label: '���', xAxisName: '���', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
- {value: 'month', label: '���', xAxisName: '���', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
- {value: 'day', label: '���', xAxisName: '���', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
- {value: 'hour', label: '���', xAxisName: '���', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
+ {value: 'year', label: '���', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
+ {value: 'month', label: '���', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
+ {value: 'day', label: '���', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
+ {value: 'hour', label: '���', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
];
public reportOptions = [
{value: 'bar', label: '���������'},
@@ -38,17 +37,14 @@
];
public monitorPointOptions = [];
public time: any = {};
- public timeType: any = {};
public items = [{
id: 0,
monitorPoint: null,
- mac: '',
- time: null,
- formatTime: null,
monitorPointName: '',
- deviceName: '',
monitorPointAddress: '',
- deviceCount: '',
+ mac: '',
+ deviceName: '',
+ time: null,
deviceOptions: []
}];
@@ -64,8 +60,7 @@
typeChange(searchText) {
this.typeOptions.forEach(types => {
- if (types.value === searchText) {
- this.timeType = types;
+ if (types === searchText) {
this.time.format = types.format.toUpperCase();
}
});
@@ -76,13 +71,11 @@
const index = this.items.push({
id: id,
monitorPoint: null,
- mac: '',
- time: null,
- formatTime: null,
monitorPointName: '',
- deviceName: '',
monitorPointAddress: '',
- deviceCount: '',
+ mac: '',
+ deviceName: '',
+ time: null,
deviceOptions: []
});
}
@@ -116,7 +109,6 @@
this.msgSrv.error(res.message);
} else {
this.items[i].deviceOptions = res.data;
- this.items[i].deviceCount = res.data.length;
this.items[i].mac = null;
}
});
@@ -124,6 +116,7 @@
this.items[i].monitorPoint = null;
this.items[i].mac = null;
this.items[i].monitorPointName = '';
+ this.items[i].monitorPointAddress = '';
}
}
@@ -146,16 +139,27 @@
reportQuery() {
const query = this.query;
let validate = true;
+ const queryItems = [];
for (let i = 0; i < this.items.length; i++) {
let item = this.items[i];
+ let queryItem: any = {};
if (item.monitorPoint && item.time) {
- item.formatTime = this.dateSrv.date_format(item.time, this.time.format);
+ queryItem.formatTime = this.dateSrv.date_format(item.time, this.time.format);
+ for (var key in item) {
+ if (item[key]) {
+ queryItem[key] = item[key];
+ }
+ }
+ queryItem.deviceCount = queryItem.deviceOptions.length;
+ delete queryItem.deviceOptions;
+ delete queryItem.time;
+ queryItems.push(queryItem);
} else {
validate = false;
break;
}
}
- if (validate && query.type && query.reportType) {
+ if (validate && query.timeType && query.reportType) {
query.sensors = null;
if (query.sensorKey && query.sensorKey.length > 0) {
const sensors = [];
@@ -164,8 +168,8 @@
});
query.sensors = JSON.stringify(sensors);
}
- query.timeType = JSON.stringify(this.timeType);
- query.items = JSON.stringify(this.items);
+ query.items = JSON.stringify(queryItems);
+ query.timeTypes = JSON.stringify(query.timeType);
this.router.navigate(['report'], {queryParams: query});
} else {
this.msgSrv.error('���������������������������������������');
--
Gitblit v1.8.0