From 92381eb59bd9b182e5bc8f2f82833806a3496a31 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 16 Mar 2018 13:42:17 +0800
Subject: [PATCH] 报表优化
---
src/app/routes/report/report.component.css | 40 +++++++++++++
src/app/routes/report/images/t_right.png | 0
src/app/routes/report/report.component.ts | 35 +++++++----
src/app/routes/reports/demo/demo.component.ts | 20 ++++--
src/app/routes/reports/demo/demo.component.html | 4
src/app/routes/report/images/bg02.png | 0
src/assets/img/logo.png | 0
src/app/routes/report/report.component.html | 71 +++++++++++++++++------
src/app/routes/report/images/bg2.png | 0
src/app/routes/report/images/bg_yuanjiao.png | 0
src/app/routes/report/images/t_bg.png | 0
src/app/routes/report/images/logo.png | 0
package.json | 2
src/app/routes/report/images/bg.png | 0
src/app/routes/report/images/t_left.png | 0
src/app/routes/report/images/bg01.png | 0
src/app/routes/report/images/bg_yuanjiao01.png | 0
17 files changed, 130 insertions(+), 42 deletions(-)
diff --git a/package.json b/package.json
index ac749d3..97fcb96 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
"angular-tree-component": "^7.0.1",
"angular2-baidu-map": "^4.1.0",
"core-js": "^2.5.1",
- "echarts": "^3.8.5",
+ "echarts": "^4.0.4",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
diff --git a/src/app/routes/report/images/bg.png b/src/app/routes/report/images/bg.png
new file mode 100644
index 0000000..dd59418
--- /dev/null
+++ b/src/app/routes/report/images/bg.png
Binary files differ
diff --git a/src/app/routes/report/images/bg01.png b/src/app/routes/report/images/bg01.png
new file mode 100644
index 0000000..3222fee
--- /dev/null
+++ b/src/app/routes/report/images/bg01.png
Binary files differ
diff --git a/src/app/routes/report/images/bg02.png b/src/app/routes/report/images/bg02.png
new file mode 100644
index 0000000..3ac62c6
--- /dev/null
+++ b/src/app/routes/report/images/bg02.png
Binary files differ
diff --git a/src/app/routes/report/images/bg2.png b/src/app/routes/report/images/bg2.png
new file mode 100644
index 0000000..9d4d9c2
--- /dev/null
+++ b/src/app/routes/report/images/bg2.png
Binary files differ
diff --git a/src/app/routes/report/images/bg_yuanjiao.png b/src/app/routes/report/images/bg_yuanjiao.png
new file mode 100644
index 0000000..11f73f3
--- /dev/null
+++ b/src/app/routes/report/images/bg_yuanjiao.png
Binary files differ
diff --git a/src/app/routes/report/images/bg_yuanjiao01.png b/src/app/routes/report/images/bg_yuanjiao01.png
new file mode 100644
index 0000000..f163faf
--- /dev/null
+++ b/src/app/routes/report/images/bg_yuanjiao01.png
Binary files differ
diff --git a/src/app/routes/report/images/logo.png b/src/app/routes/report/images/logo.png
new file mode 100644
index 0000000..4c3a71f
--- /dev/null
+++ b/src/app/routes/report/images/logo.png
Binary files differ
diff --git a/src/app/routes/report/images/t_bg.png b/src/app/routes/report/images/t_bg.png
new file mode 100644
index 0000000..bbf9e10
--- /dev/null
+++ b/src/app/routes/report/images/t_bg.png
Binary files differ
diff --git a/src/app/routes/report/images/t_left.png b/src/app/routes/report/images/t_left.png
new file mode 100644
index 0000000..8d7a08c
--- /dev/null
+++ b/src/app/routes/report/images/t_left.png
Binary files differ
diff --git a/src/app/routes/report/images/t_right.png b/src/app/routes/report/images/t_right.png
new file mode 100644
index 0000000..947b579
--- /dev/null
+++ b/src/app/routes/report/images/t_right.png
Binary files differ
diff --git a/src/app/routes/report/report.component.css b/src/app/routes/report/report.component.css
new file mode 100644
index 0000000..036bf21
--- /dev/null
+++ b/src/app/routes/report/report.component.css
@@ -0,0 +1,40 @@
+@charset "utf-8";
+/* CSS Document */
+
+ body{margin:0;padding:0;background-color:#070707;color:#eee;font-size:14px;line-height:30px;font-family: "Microsoft Yahei", "����������������", Tahoma, Arial, Helvetica, STHeiti}
+ a{text-decoration:none;cursor: pointer}
+ a:link,a:visited{color:#eee}
+ a:hover{color:#4dfdff}
+ h1,h2,h3,h4,ul,li,p{padding:0;margin:0;list-style:none;font-weight:lighter;}
+ .clear_fix:after{content:"";display: block;height:0;clear:both;visibility: hidden}
+
+ .bg{ margin: 0 0; width: 1000px;height: 486px;}
+ .t_bg{height: 486px; 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;}
+
+ .container{padding-top:30px;text-align:center;}
+ .title{display:inline-block;}
+ .title .title_left{ width:15px; height: 30px; float: left;background: url(./images/t_left.png) no-repeat;}
+ .title .text{ background:url(./images/t_bg.png) repeat;height: 30px; color: #0d56d0; font-size: 20px; float: left; line-height: 30px;}
+ .title .title_right{width:15px; height: 30px; float: left; background: url(./images/t_right.png) no-repeat;}
+
+ .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 .text2 .text_l{ float: left;}
+ .content .text2 .text_r{ float: right;}
+ .content .right{ float: right; width: 48%;}
+
+/*bottom*/
+
+ .t_bg_b{width: 100%;height: 486px; 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 db89772..5644aae 100644
--- a/src/app/routes/report/report.component.html
+++ b/src/app/routes/report/report.component.html
@@ -1,26 +1,61 @@
<html>
- <body>
- <nz-spin [nzTip]="'������������������...'"[nzSize]="'large'" [nzSpinning]="spinning">
- </nz-spin>
-
- <div >
- <div id="head" style="height: 486px; width: 1000px" *ngIf="! spinning">
- <h1>
- ������������������������
- </h1>
- </div>
+<body>
+ <nz-spin [nzTip]="'������������������...'" [nzSize]="'large'"[nzSpinning]="spinning"> </nz-spin>
- <div id="content" style="display: none;">
- <div *ngFor="let i of sensorArr">
- <div id ="mydiv{{i}}" style="height: 487px; width: 1000px"></div>
+ <div>
+ <div class="bg" *ngIf="! spinning">
+ <div class="t_bg">
+ <img src="./assets/img/logo.png">
+
+ <h1>2018���01���������������������������</h1>
+ <div class="container">
+ <div class="title">
+ <div class="title_left"></div>
+ <div class="text">
+ <span *ngFor="let item of items;let i = index">
+ <span *ngIf="i > 0">���</span>
+ {{item.monitorPointName}}
+ </span>
+ <span >
+ ������������������
+ </span>
+ </div>
+ <div class="title_right"></div>
+ <div class="clear_fix"></div>
+ </div>
+ </div>
+
+ <div class="content">
+ <!-- <div *ngFor="let item of items;let i = index">
+ <div class="left">
+ <h2>{{item.monitorPointName}}</h2>
+ <p class="text1">���������������{{item.monitorPointAddress}}</p>
+ <p class="text1">���������������������{{item.deviceCount}}���</p>
+ <div class="clear_fix"></div>
+ </div>
+ </div> -->
+ <div class="clear_fix"></div>
</div>
</div>
+ </div>
- <div id="foot" style="height: 486px; width: 1000px" *ngIf="! spinning">
- <h1>
- ������������������
- </h1>
+
+ <div id="content" style="display: none;">
+ <div *ngFor="let i of sensorArr">
+ <div id="mydiv{{i}}" style="height: 487px; width: 1000px"></div>
</div>
</div>
- </body>
+
+ <!-- <div id="foot" style="height: 486px; width: 1000px">
+ <h1>������������������</h1>
+ </div> -->
+
+ <div class="bg" *ngIf="! spinning">
+ <div class="t_bg_b">
+ <h1>2018���01������������������������������</h1>
+ </div>
+ </div>
+
+ </div>
+</body>
</html>
diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index 8b4f516..8ef6a88 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -9,7 +9,9 @@
@Component({
selector: 'app-report',
templateUrl: './report.component.html',
- styles: []
+ // styles: ['./report.component.less'],
+ styleUrls: ['./report.component.css']
+
})
export class ReportComponent implements OnInit {
[x: string]: any;
@@ -27,6 +29,7 @@
}
public echartOption = {
+ backgroundColor: '',
title: {
text: '',
// subtext: '12������',
@@ -40,7 +43,8 @@
orient: 'vertical',
right: 40,
top: 5,
- bottom: 20
+ bottom: 20,
+ type: 'scroll'
},
toolbox: {
show: false,
@@ -81,13 +85,14 @@
};
sensorArr: any = [];
-
+ items: any = [];
+ timeType: any = {};
ngOnInit() {
-
+
this.activeRoute.queryParams.subscribe(params => {
- const items = JSON.parse(params.items);
- const query = params;
- this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => {
+ const items = this.items = JSON.parse(params.items);
+ 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);
} else {
@@ -96,17 +101,21 @@
const times = res.data.times;
const sensors = res.data.sensors;
option.xAxis.data = times;
- option.xAxis.name = query.xAxisName;
+ option.xAxis.name = timeType.xAxisName;
for (let index = 0; index < sensors.length; index++) {
const sensorKey = sensors[index];
const split = sensorKey.split('-');
- option.title.text = split[1] + query.label + '������������';
- option.yAxis.name = split[2] && split[2] !== 'null' ? split[2] : '';
+ option.title.text = split[1] + timeType.label + '������������';
+ option.yAxis.name = split[2] && split[2] !== 'null' ? '������:' + split[2] : '';
option.series = [];
option.legend.data = [];
-
+ if (index % 2 == 0) {
+ option.backgroundColor = 'rgba(0,0,0,0)';
+ } else {
+ option.backgroundColor = 'rgba(23,133,23,0.06)';
+ }
for (let i = 0; i < items.length; i++) {
- const legendName = items[i].formatTime + query.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
+ 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({
@@ -125,7 +134,7 @@
$('#mydiv' + i).remove();
}
});
- $('#content').attr({style:"display: inline;"});
+ $('#content').attr({style: "display: inline;"});
}
this.spinning = false;
});
diff --git a/src/app/routes/reports/demo/demo.component.html b/src/app/routes/reports/demo/demo.component.html
index dc25358..2650c22 100644
--- a/src/app/routes/reports/demo/demo.component.html
+++ b/src/app/routes/reports/demo/demo.component.html
@@ -26,7 +26,7 @@
</div>
</div>
</div>
- <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length!=5">
+ <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length < 2">
<button nz-button type="button" [nzType]="'primary'" [nzSize]="'large'" (click)="addItem()">
<!-- <i class="anticon anticon-plus"></i> -->
<i class="anticon anticon-plus-circle-o"></i>
@@ -72,7 +72,7 @@
</div>
</div>
</div>
- <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length!=1">
+ <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>
<i class="anticon anticon-minus-circle-o dynamic-delete-button"></i>
<span>������������������</span>
diff --git a/src/app/routes/reports/demo/demo.component.ts b/src/app/routes/reports/demo/demo.component.ts
index ad81b13..1189314 100644
--- a/src/app/routes/reports/demo/demo.component.ts
+++ b/src/app/routes/reports/demo/demo.component.ts
@@ -26,7 +26,10 @@
time: null,
formatTime: null,
monitorPointName: '',
- deviceName: ''
+ deviceName: '',
+ monitorPointAddress: '',
+ deviceCount: ''
+
}];
public sensorOptions = [];
@@ -54,13 +57,15 @@
addItem() {
const id = (this.items.length > 0) ? this.items[this.items.length - 1].id + 1 : 0;
const index = this.items.push({
- id,
+ id: id,
monitorPoint: null,
mac: '',
time: null,
formatTime: null,
monitorPointName: '',
- deviceName: ''
+ deviceName: '',
+ monitorPointAddress: '',
+ deviceCount: ''
});
}
@@ -86,6 +91,7 @@
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) => {
@@ -93,6 +99,7 @@
this.msgSrv.error(res.message);
} else {
this.deviceOptions = res.data;
+ this.items[i].deviceCount = res.data.length;
}
});
} else {
@@ -146,12 +153,9 @@
}
}
if (validate && query.type) {
- query.format = this.timeType.format;
- query.typeFormat = this.timeType.typeFormat;
- query.xAxisName = this.timeType.xAxisName;
- query.label = this.timeType.label;
- query.timeLength = this.timeType.timeLength;
+ query.timeType = JSON.stringify(this.timeType);
query.items = JSON.stringify(this.items);
+ console.info(this.items);
this.router.navigate(['report'], {queryParams: query});
} else {
this.msgSrv.error('���������������������������������������');
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
new file mode 100644
index 0000000..4c3a71f
--- /dev/null
+++ b/src/assets/img/logo.png
Binary files differ
--
Gitblit v1.8.0