[完善]完善ui框架

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",

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
     }

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 token = this.cookieService.get("token")
-      var refreshToken = this.cookieService.get("refreshToken");
+    //   var refreshToken = this.cookieService.get("refreshToken");
-      if(token && refreshToken) {
+    //   if(token && refreshToken) {
-        this.http.post('/api/CompanyAccount/RefreshToken',{token: token,refreshToken: refreshToken}).subscribe((data: Data) => {
+    //     this.http.post('/api/CompanyAccount/RefreshToken',{token: token,refreshToken: refreshToken}).subscribe((data: Data) => {
-          sessionStorage.setItem("token",data.token);
+    //       sessionStorage.setItem("token",data.token);
-          this.cookieService.set("token",data.token,null,'/');
+    //       this.cookieService.set("token",data.token,null,'/');
-          this.cookieService.set("refreshToken",data.refreshToken,null,'/');
+    //       this.cookieService.set("refreshToken",data.refreshToken,null,'/');
-          this.token.startUp()
+    //       this.token.startUp()
-      })
+    //   })
-    }
+    // }
   }
 
 

src/app/auth.guard.ts

@@ -14,8 +14,11 @@ export class AuthGuard implements CanActivate {
 
     // 路由守卫
     canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
-
+        console.log('路由守卫',next.data)
-        return this.checkLogin();
+        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;
     }
 }

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>

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);
+}

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', {
+    this.http.post('/api/TokenAuth/Authenticate', {
-      name: this.validateForm.value.userName,
+      userNameOrEmailAddress: this.validateForm.value.userName,
       password: this.validateForm.value.password
     }).subscribe(
-      (data: Data) => {
+      (data: any) => {
-        sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);
+        console.log('登陆成功',data)
-        sessionStorage.setItem("token", data.token);
+        // sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);
-        this.cookieService.set("token", data.token, null, '/');
+        sessionStorage.setItem("token", data.result.accessToken);
-        this.cookieService.set("refreshToken", data.refreshToken, null, '/');
+
+        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 }
     )
   }
 

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 }
 ];

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 { }

src/app/pages/plan/plan.component.html

@@ -1 +1 @@
-<p>plan works!</p>
+<p>三级预案!</p>

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;
+}

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>

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;
+        }
+    }
+}

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 {
-
+  validateForm!: FormGroup;
-  constructor() { }
+  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)
+  }
 }

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>

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;
+    }
 }

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(
+      this.token.delete()
-        data => {
+      sessionStorage.clear()
-          this.token.delete()
+      window.localStorage.clear()
-          sessionStorage.clear()
+      this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
-          window.localStorage.clear()
+      this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
-          this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
+      this.router.navigate(['/login'])
-          this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
-          this.router.navigate(['/login'])
-        }
-      )
     }
   }
 

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';

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%;

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;
+}