Merge branch 'develop' of http://blit.7drlb.com:8888/r/screen-frontend into develop
 
	
	
	
	
	
	
		
		12 files added
	
		
		5 files modified
	
	
 
	
	
	
	
	
	
	
	
 |  |  | 
 |  |  |     "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", | 
 
| New file | 
 |  |  | 
 |  |  | @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;}
 | 
 |  |  | 
 | 
 |  |  | 
 | 
 |  |  | 
 | 
 
 |  |  | 
 |  |  | <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>
 | 
 
 |  |  | 
 |  |  | @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; | 
 |  |  | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   public echartOption = { | 
 |  |  |     backgroundColor: '', | 
 |  |  |     title: { | 
 |  |  |       text: '', | 
 |  |  |       // subtext: '12月份', | 
 |  |  | 
 |  |  |       orient: 'vertical', | 
 |  |  |       right: 40, | 
 |  |  |       top: 5, | 
 |  |  |       bottom: 20 | 
 |  |  |       bottom: 20, | 
 |  |  |       type: 'scroll' | 
 |  |  |     }, | 
 |  |  |     toolbox: { | 
 |  |  |       show: false, | 
 |  |  | 
 |  |  |   }; | 
 |  |  |  | 
 |  |  |   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 { | 
 |  |  | 
 |  |  |           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({ | 
 |  |  | 
 |  |  |               $('#mydiv' + i).remove(); | 
 |  |  |             } | 
 |  |  |           }); | 
 |  |  |           $('#content').attr({style:"display: inline;"}); | 
 |  |  |           $('#content').attr({style: "display: inline;"}); | 
 |  |  |         } | 
 |  |  |         this.spinning = false; | 
 |  |  |       }); | 
 
 |  |  | 
 |  |  |                     </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> | 
 |  |  | 
 |  |  |                     </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> | 
 
 |  |  | 
 |  |  |     time: null, | 
 |  |  |     formatTime: null, | 
 |  |  |     monitorPointName: '', | 
 |  |  |     deviceName: '' | 
 |  |  |     deviceName: '', | 
 |  |  |     monitorPointAddress: '', | 
 |  |  |     deviceCount: '' | 
 |  |  |  | 
 |  |  |   }]; | 
 |  |  |  | 
 |  |  |   public sensorOptions = []; | 
 |  |  | 
 |  |  |   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: '' | 
 |  |  |     }); | 
 |  |  |   } | 
 |  |  |  | 
 |  |  | 
 |  |  |       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.msgSrv.error(res.message); | 
 |  |  |         } else { | 
 |  |  |           this.deviceOptions = res.data; | 
 |  |  |           this.items[i].deviceCount = res.data.length; | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |     } else { | 
 |  |  | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |     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('请完善搜索项或删除查询条目'); |