From 222293870db9c1611d5489a8cb65944f2f97a5d2 Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Thu, 28 Oct 2021 14:27:26 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=AE=8C=E5=96=84ui?=
=?UTF-8?q?=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
angular.json | 9 ++-
proxy.config.json | 2 +-
src/app/app.component.ts | 20 +++----
src/app/auth.guard.ts | 8 ++-
src/app/pages/home/home.component.html | 6 +-
src/app/pages/home/home.component.scss | 15 ++++-
src/app/pages/login/login.component.ts | 20 ++++---
src/app/pages/pages-routing.module.ts | 4 +-
src/app/pages/pages.module.ts | 44 +++-----------
src/app/pages/plan/plan.component.html | 2 +-
src/app/pages/plan/plan.component.scss | 16 +++++
.../today-warning.component.html | 59 ++++++++++++++++++-
.../today-warning.component.scss | 39 ++++++++++++
.../today-warning/today-warning.component.ts | 20 ++++++-
src/app/ui/tabbar/tabbar.component.html | 10 +++-
src/app/ui/tabbar/tabbar.component.scss | 16 ++++-
src/app/ui/tabbar/tabbar.component.ts | 16 ++---
src/main.ts | 5 +-
src/styles.scss | 2 +-
src/theme.less | 28 +++++++++
20 files changed, 254 insertions(+), 87 deletions(-)
create mode 100644 src/theme.less
diff --git a/angular.json b/angular.json
index 7874d72..6660740 100644
--- a/angular.json
+++ b/angular.json
@@ -26,13 +26,18 @@
"aot": true,
"assets": [
"src/favicon.ico",
- "src/assets"
+ "src/assets",
+ {
+ "glob": "**/*",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+ "output": "/assets/"
+ }
],
"styles": [
"src/styles.scss",
"./node_modules/swiper/css/swiper.min.css",
"./node_modules/viewerjs/dist/viewer.css",
- "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
+ "src/theme.less"
],
"scripts": [
"node_modules/echarts/dist/echarts.js",
diff --git a/proxy.config.json b/proxy.config.json
index 22db781..fc43b3f 100644
--- a/proxy.config.json
+++ b/proxy.config.json
@@ -1,6 +1,6 @@
{
"/api": {
- "target": "http://39.106.78.171:9008",
+ "target": "http://39.106.78.171:8906",
"secure": false,
"changeOrigin": true
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 299b619..89995bf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -17,16 +17,16 @@ export class AppComponent {
constructor(private http:HttpClient,private router:Router,public token:CacheTokenService,private cookieService: CookieService) { }
ngOnInit(): void {
- var token = this.cookieService.get("token")
- var refreshToken = this.cookieService.get("refreshToken");
- if(token && refreshToken) {
- this.http.post('/api/CompanyAccount/RefreshToken',{token: token,refreshToken: refreshToken}).subscribe((data: Data) => {
- sessionStorage.setItem("token",data.token);
- this.cookieService.set("token",data.token,null,'/');
- this.cookieService.set("refreshToken",data.refreshToken,null,'/');
- this.token.startUp()
- })
- }
+ // var token = this.cookieService.get("token")
+ // var refreshToken = this.cookieService.get("refreshToken");
+ // if(token && refreshToken) {
+ // this.http.post('/api/CompanyAccount/RefreshToken',{token: token,refreshToken: refreshToken}).subscribe((data: Data) => {
+ // sessionStorage.setItem("token",data.token);
+ // this.cookieService.set("token",data.token,null,'/');
+ // this.cookieService.set("refreshToken",data.refreshToken,null,'/');
+ // this.token.startUp()
+ // })
+ // }
}
diff --git a/src/app/auth.guard.ts b/src/app/auth.guard.ts
index f7ef4f8..ac887e4 100644
--- a/src/app/auth.guard.ts
+++ b/src/app/auth.guard.ts
@@ -14,8 +14,11 @@ export class AuthGuard implements CanActivate {
// 路由守卫
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
-
- return this.checkLogin();
+ console.log('路由守卫',next.data)
+ if(next.data.permission == 'xxxx'){
+ return true;
+ }
+ // return this.checkLogin();
}
checkLogin(): boolean {
@@ -28,6 +31,7 @@ export class AuthGuard implements CanActivate {
//如果没有token,跳转登录页
this.router.navigate(['/login']);
+
return false;
}
}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 3bba4b6..b85b4b2 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -3,13 +3,13 @@
<app-tabbar></app-tabbar>
</div>
<div class="menu">
- <li [routerLink]="['/home/plan']">
+ <li [routerLink]="['/home/plan']" routerLinkActive="router-link-active">
三维预案
</li>
- <li [routerLink]="['/home/warning']">
+ <li [routerLink]="['/home/warning']" routerLinkActive="router-link-active">
今日预警
</li>
- <li [routerLink]="['/home/records']">
+ <li [routerLink]="['/home/records']" routerLinkActive="router-link-active">
违规记录
</li>
</div>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index fb97e46..297370f 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -2,10 +2,23 @@
width: 100%;
height: 100%;
overflow: hidden;
+ background: #001f3e;
}
.menu{
- height: 64px;
+ height: 52px;
width: 100%;
display: flex;
justify-content: center;
+ align-items: center;
+ font-size: 17px;
+ li{
+ width: 10%;
+ height: 52px;
+ line-height: 52px;
+ text-align: center;
+ cursor: pointer;
+ }
}
+.router-link-active{
+ background-image: linear-gradient(to right, #052D5A , #0B416F,#136B93,#1F7C93,#136B93,#0B416F,#052D5A);
+}
\ No newline at end of file
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index f9fff1b..0c89426 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -43,20 +43,22 @@ export class LoginComponent implements OnInit {
this.validateForm.controls[i].updateValueAndValidity();
}
// console.log(this.validateForm)
- this.http.post('/api/CompanyAccount/SignIn', {
- name: this.validateForm.value.userName,
+ this.http.post('/api/TokenAuth/Authenticate', {
+ userNameOrEmailAddress: this.validateForm.value.userName,
password: this.validateForm.value.password
}).subscribe(
- (data: Data) => {
- sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);
- sessionStorage.setItem("token", data.token);
- this.cookieService.set("token", data.token, null, '/');
- this.cookieService.set("refreshToken", data.refreshToken, null, '/');
+ (data: any) => {
+ console.log('登陆成功',data)
+ // sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);
+ sessionStorage.setItem("token", data.result.accessToken);
+
+ this.cookieService.set("token", data.result.accessToken, null, '/');
+ this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/');
this.router.navigate(['/home/plan'])
//调用服务中的function刷新token
- this.token.startUp()
+ // this.token.startUp()
},
- (err) => { this.errmsg = err }
+ (err) => { this.errmsg = err.error.details }
)
}
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index f7637f8..3b93bd2 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
import { PlanComponent } from './plan/plan.component';
import { TodayWarningComponent } from './today-warning/today-warning.component';
import { CriminalRecordsComponent } from './criminal-records/criminal-records.component';
-
+import {AuthGuard} from '../auth.guard'
const routes: Routes = [
- { path: 'plan', component: PlanComponent },
+ { path: 'plan', component: PlanComponent , data: { permission: 'xxxx' },canActivate: [AuthGuard]},
{ path: 'warning', component: TodayWarningComponent },
{ path: 'records', component: CriminalRecordsComponent }
];
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 5125e58..506d526 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -57,6 +57,10 @@ import { PlanComponent } from './plan/plan.component';
import { PagesRoutingModule } from './pages-routing.module';
import { TodayWarningComponent } from './today-warning/today-warning.component';
import { CriminalRecordsComponent } from './criminal-records/criminal-records.component';
+
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzIconModule } from 'ng-zorro-antd/icon';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,],
imports: [
@@ -67,41 +71,6 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
CdkTableModule,
CdkTreeModule,
DragDropModule,
- // MatAutocompleteModule,
- // MatBadgeModule,
- // MatBottomSheetModule,
- // MatButtonModule,
- // MatButtonToggleModule,
- // MatCardModule,
- // MatCheckboxModule,
- // MatChipsModule,
- // MatStepperModule,
- // MatDatepickerModule,
- // MatDialogModule,
- // MatDividerModule,
- // MatExpansionModule,
- // MatGridListModule,
- // MatIconModule,
- // MatInputModule,
- // MatListModule,
- // MatMenuModule,
- // MatNativeDateModule,
- // MatPaginatorModule,
- // MatProgressBarModule,
- // MatProgressSpinnerModule,
- // MatRadioModule,
- // MatRippleModule,
- // MatSelectModule,
- // MatSidenavModule,
- // MatSliderModule,
- // MatSlideToggleModule,
- // MatSnackBarModule,
- // MatSortModule,
- // MatTableModule,
- // MatTabsModule,
- // MatToolbarModule,
- // MatTooltipModule,
- // MatTreeModule,
// PortalModule,
// ScrollingModule,
FormsModule,
@@ -110,7 +79,10 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
NzFormModule,
NzInputModule,
UiModule,
- NzButtonModule
+ NzButtonModule,
+ NzSelectModule,
+ NzDatePickerModule,
+ NzIconModule
]
})
export class PagesModule { }
diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html
index beaa79c..4471244 100644
--- a/src/app/pages/plan/plan.component.html
+++ b/src/app/pages/plan/plan.component.html
@@ -1 +1 @@
-<p>plan works!</p>
+<p>三级预案!</p>
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss
index e69de29..c85ac08 100644
--- a/src/app/pages/plan/plan.component.scss
+++ b/src/app/pages/plan/plan.component.scss
@@ -0,0 +1,16 @@
+nz-select {
+ margin: 0 8px 10px 0;
+ width: 120px;
+ // background-color: red;
+}
+
+.logo-self {
+ font-size: 50px;
+ text-shadow: 0px 0px 6px #8df;
+ color: white;
+ font-weight: 600;
+}
+.font{
+ font-size: 20px;
+ // font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+}
\ No newline at end of file
diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html
index be5524a..dde7e7e 100644
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/src/app/pages/today-warning/today-warning.component.html
@@ -1 +1,58 @@
-<p>今日预警</p>
+<div class="warningbox">
+ <div class="title">
+ 当日违规事件列表
+ </div>
+ <div class="search">
+ <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+ <nz-form-item class="searchParams">
+ <nz-form-control>
+ <nz-select id="level" formControlName="level" nzPlaceHolder="请选择级别">
+ <nz-option nzValue="1" nzLabel="一级"></nz-option>
+ <nz-option nzValue="2" nzLabel="二级"></nz-option>
+ <nz-option nzValue="3" nzLabel="三级"></nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item class="searchParams">
+ <nz-form-control>
+ <nz-select id="type" formControlName="type" nzPlaceHolder="请选择事件类型">
+ <nz-option nzValue="1" nzLabel="一级"></nz-option>
+ <nz-option nzValue="2" nzLabel="二级"></nz-option>
+ <nz-option nzValue="3" nzLabel="三级"></nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item class="searchParams">
+ <nz-form-control>
+ <nz-select id="site" formControlName="site" nzPlaceHolder="请选择地点">
+ <nz-option nzValue="1" nzLabel="一级"></nz-option>
+ <nz-option nzValue="2" nzLabel="二级"></nz-option>
+ <nz-option nzValue="3" nzLabel="三级"></nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item class="searchParams">
+ <nz-form-control [nzSm]="16" [nzXs]="24">
+ <nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-picker>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item class="btn">
+ <nz-form-control>
+ <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item style="margin-right: 0;" class="btn">
+ <nz-form-control>
+ <button nz-button type="button" class="reset"><i nz-icon [nzType]="'sync'"></i>重置</button>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+ </div>
+
+
+</div>
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index e69de29..39419f5 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/src/app/pages/today-warning/today-warning.component.scss
@@ -0,0 +1,39 @@
+.warningbox{
+ width: 100%;
+ height: 100%;
+ .title{
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ }
+ .search{
+ box-sizing: border-box;
+ padding: 0 36px;
+ width: 100%;
+ height: 32px;
+ form{
+ width: 100%;
+ height: 32px;
+ }
+ .searchParams{
+ width: 21.5%;
+ }
+ nz-date-picker{
+ width: 145%;
+ background-color: #002552;
+ color: #8aacce;
+ }
+ button{
+ width: 84px;
+ }
+ .submit{
+ background-color: #013064;
+ border: 1px solid #4c8ac8;
+ color: #86bff3;
+ }
+ .reset{
+ background-color: #010d26;
+ border: 1px solid #4c8ac8;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/pages/today-warning/today-warning.component.ts b/src/app/pages/today-warning/today-warning.component.ts
index 0d37a75..a6f9579 100644
--- a/src/app/pages/today-warning/today-warning.component.ts
+++ b/src/app/pages/today-warning/today-warning.component.ts
@@ -1,15 +1,29 @@
import { Component, OnInit } from '@angular/core';
-
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-today-warning',
templateUrl: './today-warning.component.html',
styleUrls: ['./today-warning.component.scss']
})
export class TodayWarningComponent implements OnInit {
-
- constructor() { }
+ validateForm!: FormGroup;
+ constructor(private fb: FormBuilder) { }
ngOnInit(): void {
+ this.validateForm = this.fb.group({
+ level: [null],
+ type: [null],
+ site: [null],
+ datePicker: [null]
+ });
}
+ submitForm(): void {
+ for (const i in this.validateForm.controls) {
+ this.validateForm.controls[i].markAsDirty();
+ this.validateForm.controls[i].updateValueAndValidity();
+ }
+
+ console.log(this.validateForm)
+ }
}
diff --git a/src/app/ui/tabbar/tabbar.component.html b/src/app/ui/tabbar/tabbar.component.html
index b27de28..02a2b57 100644
--- a/src/app/ui/tabbar/tabbar.component.html
+++ b/src/app/ui/tabbar/tabbar.component.html
@@ -1,14 +1,18 @@
<div class="box">
<div class="boxleft">
- 中国石化
+ 中化科学至上
</div>
<!-- 登录信息按钮 -->
<div class="boxright">
- <span>
+ <span class="time">
{{time}}
</span>
+
+ <span style="margin: 0 18px;">|</span>
+
+ <span> 用户名 </span>
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'>
- 用户头像
+ 头像
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
diff --git a/src/app/ui/tabbar/tabbar.component.scss b/src/app/ui/tabbar/tabbar.component.scss
index a9a1c9a..29e901a 100644
--- a/src/app/ui/tabbar/tabbar.component.scss
+++ b/src/app/ui/tabbar/tabbar.component.scss
@@ -1,9 +1,23 @@
.box{
width: 100%;
- height: 62px;
+ height: 52px;
background-image: linear-gradient(#001530, #051C3C ,#162f50, #243c55);
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
+ box-sizing: border-box;
+ padding: 0 20px;
+ color: #8aacce;
+}
+.boxleft{
+ font-size: 18px;
+ font-weight: 500;
+ // text-shadow: 0px 0px 2px #8df;
+ color: rgb(255, 255, 255);
+}
+.boxright{
+ span{
+ font-size: 15px;
+ }
}
diff --git a/src/app/ui/tabbar/tabbar.component.ts b/src/app/ui/tabbar/tabbar.component.ts
index 31654ac..2ef7b37 100644
--- a/src/app/ui/tabbar/tabbar.component.ts
+++ b/src/app/ui/tabbar/tabbar.component.ts
@@ -55,16 +55,12 @@ export class TabbarComponent implements OnInit {
signOut() {
let out = confirm("您确定要退出吗")
if (out) {
- this.http.post('/api/CompanyAccount/SignOut', {}).subscribe(
- data => {
- this.token.delete()
- sessionStorage.clear()
- window.localStorage.clear()
- this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
- this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
- this.router.navigate(['/login'])
- }
- )
+ this.token.delete()
+ sessionStorage.clear()
+ window.localStorage.clear()
+ this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
+ this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
+ this.router.navigate(['/login'])
}
}
diff --git a/src/main.ts b/src/main.ts
index 611c343..75e9ba9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,9 +3,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
-
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
if (environment.production) {
enableProdMode();
+
}
// window['CESIUM_BASE_URL'] = 'src/assets/cesium';
diff --git a/src/styles.scss b/src/styles.scss
index 007f456..c265462 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,4 @@
-@import "~ng-zorro-antd/ng-zorro-antd.min.css";
+// @import "~ng-zorro-antd/ng-zorro-antd.min.css";
html,
body {
width: 100%;
diff --git a/src/theme.less b/src/theme.less
new file mode 100644
index 0000000..9003308
--- /dev/null
+++ b/src/theme.less
@@ -0,0 +1,28 @@
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+
+// @component-background: #002552;
+
+@border-color-base: #8aacce;
+
+// @text-color: #8aacce;
+@text-color: #8aacce;
+// @select-item-selected-bg: red;
+
+
+
+@select-background:#002552;
+
+.ant-select-arrow {
+ color: #8aacce;
+}
+.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
+ border-radius: 0px;
+}
+.ant-picker{
+ border-radius: 0px;
+}
+
+@input-placeholder-color: #8aacce;
+.ant-picker-suffix{
+ color: #8aacce;
+}
\ No newline at end of file