From 39c571066ce77c0064834290bd5263daaf3cf2dc Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Mon, 1 Nov 2021 16:50:28 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=96=B0=E5=A2=9E=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 20 ++- src/app/app.component.scss | 5 + src/app/app.component.ts | 13 +- src/app/app.module.ts | 7 +- src/app/http-interceptors/base-interceptor.ts | 26 ++-- .../criminal-records.component.html | 76 +++++++++-- .../criminal-records.component.scss | 101 +++++++++----- .../criminal-records.component.ts | 22 +++ src/app/pages/login/login.component.html | 60 ++++---- src/app/pages/login/login.component.scss | 129 ++++++------------ src/app/pages/login/login.component.ts | 39 ++++-- src/app/pages/pages.module.ts | 9 +- src/app/pages/register/register.component.ts | 11 +- .../today-warning.component.html | 22 ++- .../today-warning.component.scss | 14 +- .../changepassword.component.ts | 27 ++-- src/app/ui/tabbar/tabbar.component.ts | 31 ++--- src/app/ui/title/title.component.html | 2 +- src/app/ui/title/title.component.ts | 4 +- src/app/ui/ui.module.ts | 4 +- src/assets/images/bgImg.jpg | Bin 0 -> 848586 bytes src/styles.scss | 2 + src/theme.less | 123 ++++++++++++++++- 23 files changed, 495 insertions(+), 252 deletions(-) create mode 100644 src/assets/images/bgImg.jpg diff --git a/src/app/app.component.html b/src/app/app.component.html index 90c6b64..d838fa8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,19 @@ - \ No newline at end of file + + + + + +
+
+ +
+
+ 您有一条新的违规事件! + 这是详细描述这是详细描述这是详细描述... +
+
+
+ + +
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..cde852e 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,5 @@ +.btn{ + position: fixed; + left: 0; + top: 0; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6d583f7..6104104 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, TemplateRef, ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Data } from './interface' import { Router, ActivatedRoute } from '@angular/router' import { CacheTokenService } from './service/cache-token.service'//引入服务 import { CookieService } from 'ngx-cookie-service'; import "reflect-metadata"; - +import { NzNotificationService } from 'ng-zorro-antd/notification'; @Component({ @@ -15,7 +15,9 @@ import "reflect-metadata"; }) export class AppComponent { - constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService) { } + @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>; + + constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService,private notificationService: NzNotificationService) { } ngOnInit(): void { // var token = this.cookieService.get("token") @@ -28,8 +30,11 @@ export class AppComponent { // this.token.startUp() // }) // } - } + } + receiptOfNotification() { + this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification',nzDuration: 0 }); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3bd559e..2b0b097 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,8 @@ import { CacheTokenService } from './service/cache-token.service' import { TreeService } from './service/tree.service' import { CookieService } from 'ngx-cookie-service';//cookie插件 import { CountdownModule } from 'ngx-countdown'; //倒计时插件 - +import { NzNotificationModule } from 'ng-zorro-antd/notification'; +import { NzMessageModule } from 'ng-zorro-antd/message'; @NgModule({ declarations: [ AppComponent, @@ -33,7 +34,9 @@ import { CountdownModule } from 'ngx-countdown'; //倒计时插件 PagesModule, FormsModule, HttpClientModule, - CountdownModule + CountdownModule, + NzNotificationModule, + NzMessageModule ], providers: [httpInterceptorProviders, CacheTokenService, TreeService, CookieService], bootstrap: [AppComponent] diff --git a/src/app/http-interceptors/base-interceptor.ts b/src/app/http-interceptors/base-interceptor.ts index ef8c4a1..778beae 100644 --- a/src/app/http-interceptors/base-interceptor.ts +++ b/src/app/http-interceptors/base-interceptor.ts @@ -1,23 +1,21 @@ import { Injectable } from '@angular/core'; import { - HttpClient, HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, + HttpClient, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { throwError } from 'rxjs' -import { catchError, retry } from 'rxjs/operators'; -import { Router, ActivatedRoute } from '@angular/router' +import { catchError } from 'rxjs/operators'; +import { Router } from '@angular/router' import { CacheTokenService } from '../service/cache-token.service' -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { CookieService } from 'ngx-cookie-service'; - +import { NzMessageService } from 'ng-zorro-antd/message'; //baseurl // const baseurl = 'http://39.106.78.171:8008'; @Injectable() export class BaseInterceptor implements HttpInterceptor { - constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, - public snackBar: MatSnackBar, private cookieService: CookieService) { } + constructor(private router: Router, public token: CacheTokenService, private cookieService: CookieService, private message: NzMessageService) { } intercept(req, next: HttpHandler) { @@ -44,6 +42,7 @@ export class BaseInterceptor implements HttpInterceptor { //401 token过期 403没权限!!! 400参数错误 404未找到 614刷新令牌过期!!! private handleError(error: HttpErrorResponse) { + console.log('http错误', error) // 用户认证失败返回登录页 if (error.status === 401 || error.status === 614) { this.token.delete() @@ -51,21 +50,14 @@ export class BaseInterceptor implements HttpInterceptor { window.localStorage.clear() this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/') this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/') - this.snackBar.open('用户认证信息过期,请重新登录', '确定', { - duration: 3000 - }); + this.message.create('error', `用户认证信息过期,请重新登录!`); this.router.navigate(['/login']) } if (error.status === 403) { - this.snackBar.open('对不起,您无此权限!', '确定', { - duration: 3000 - }); + this.message.create('error', `对不起,您无此权限!`); } if (error.status === 400) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请核对您的输入格式是否正确', '确定', config); + this.message.create('error', `请核对您的输入信息或格式是否正确!`); } if (error.error instanceof ErrorEvent) { diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html index 9af66e9..95a2328 100644 --- a/src/app/pages/criminal-records/criminal-records.component.html +++ b/src/app/pages/criminal-records/criminal-records.component.html @@ -32,8 +32,9 @@ - - + + +
@@ -53,7 +54,7 @@
- +
@@ -62,16 +63,75 @@
- +
-
- -
-
+
+
+ 事件编号 +
+
+ 事件级别 +
+
+ 事件类型 +
+
+ 区域 +
+
+
+
+ 加油站 +
+
+ 地点 +
+
+ 违规时间 +
+
+ 操作 +
+
+
+
+ {{item.id}} +
+
+ {{item.level}} +
+
+ {{item.type}} +
+
+ 山东淄博 +
+
+ 自营 +
+
+ {{item.name}} +
+
+ {{item.site}} +
+
+ {{item.time}} +
+
+ 查看 +
+
+
+
+
diff --git a/src/app/pages/criminal-records/criminal-records.component.scss b/src/app/pages/criminal-records/criminal-records.component.scss index 82fffbd..b0ac76e 100644 --- a/src/app/pages/criminal-records/criminal-records.component.scss +++ b/src/app/pages/criminal-records/criminal-records.component.scss @@ -5,29 +5,6 @@ flex-direction: column; } -.content { - flex: 1; - // background-image: radial-gradient(circle,#004078, #012b57, #00142f); - - .title { - margin-bottom: 15px; - width: 100%; - height: 64px; - box-sizing: border-box; - padding: 0 28px; - } - .chartsbox{ - width: 100%; - display: flex; - justify-content: center; - .charts{ - width: 98%; - height: 300px; - border: 1px solid white; - } - } -} - .search { box-sizing: border-box; padding: 0 36px; @@ -52,24 +29,78 @@ nz-select { color: #fff; } - - nz-date-picker { - + nz-range-picker { background-color: #002552; - width: 145%; + width: 97%; } } - .submit { - background-color: #013064; - border: 1px solid #4c8ac8; - color: #86bff3; + +} + +.content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + .title { + margin-bottom: 15px; + width: 100%; + height: 64px; + box-sizing: border-box; + padding: 0 28px; + } + + .chartsbox { + width: 100%; + display: flex; + justify-content: center; + + .charts { + width: 98%; + height: 300px; + border: 1px solid white; + } } - .reset { - background-color: #010d26; - border: 1px solid #4c8ac8; - color: #86bff3; + .tablebox { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + overflow:hidden; + .table{ + color: white; + flex: 1; + width: 96%; + display: flex; + flex-direction: column; + overflow: hidden; + .th{ + height: 38px; + line-height: 38px; + background: #054783; + } + .tbody{ + flex: 1; + overflow-y: auto; + .tr{ + height: 38px; + line-height: 38px; + border-bottom: 1px solid #0d3761; + } + } + } + .pagination{ + margin: 15px 0; + display: flex; + align-items: center; + justify-content: center; + } + ::-webkit-scrollbar { + width: 0px; + } + } } diff --git a/src/app/pages/criminal-records/criminal-records.component.ts b/src/app/pages/criminal-records/criminal-records.component.ts index ac3370d..efddd57 100644 --- a/src/app/pages/criminal-records/criminal-records.component.ts +++ b/src/app/pages/criminal-records/criminal-records.component.ts @@ -34,4 +34,26 @@ export class CriminalRecordsComponent implements OnInit { } } + + list: any = [ + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}, + {id:'SDFFDCDC484C8DCCCDGG',level:'Ⅰ级',type:'工作人员倚靠加油机或立柱',name:'中化山东省淄博市第6加油站',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'} + ] } diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html index 9368a9a..ede3a45 100644 --- a/src/app/pages/login/login.component.html +++ b/src/app/pages/login/login.component.html @@ -1,28 +1,38 @@ -