| src/app/routes/report/report.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/report/report.component.ts | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/demo/demo.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/demo/demo.component.ts | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/excel/excel.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/excel/excel.component.ts | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/routes-routing.module.ts | ●●●●● patch | view | raw | blame | history | |
| src/assets/app-data.json | ●●●●● patch | view | raw | blame | history |
src/app/routes/report/report.component.html
@@ -1,4 +1,9 @@ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>报表展示</title> </head> <body> <nz-spin [nzTip]="'正在读取数据...'" [nzSize]="'large'"[nzSpinning]="spinning"> </nz-spin> @@ -39,16 +44,11 @@ </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="t_bg_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 = ''; 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> 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('请完善搜索项或删除查询条目'); } } } 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> 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); } src/app/routes/routes-routing.module.ts
@@ -42,7 +42,7 @@ { path: 'report', component: ReportComponent, data: {title: '对比报表'} data: {title: '报表展示'} }, { path: '**', redirectTo: 'passport/login' } ]; src/assets/app-data.json
@@ -60,11 +60,11 @@ "link": "/reports/query" }, { "text": "柱状图比较", "text": "报表展示", "link": "/reports/demo" }, { "text": "Excel导出", "text": "数据导出", "link": "/reports/excel" } ]
