Browse Source

[完善]完善框架ui组件

dev
邵佳豪 3 years ago
parent
commit
3aa7c947a7
  1. 3
      angular.json
  2. 38
      package-lock.json
  3. 1
      package.json
  4. 5098
      src/app/_theming.scss
  5. 13
      src/app/app-routing.module.ts
  6. 4
      src/app/navigation/navigation.module.ts
  7. 1
      src/app/pages/criminal-records/criminal-records.component.html
  8. 0
      src/app/pages/criminal-records/criminal-records.component.scss
  9. 15
      src/app/pages/criminal-records/criminal-records.component.ts
  10. 20
      src/app/pages/home/home.component.html
  11. 11
      src/app/pages/home/home.component.scss
  12. 25
      src/app/pages/home/home.component.spec.ts
  13. 25
      src/app/pages/login/login.component.html
  14. 16
      src/app/pages/login/login.component.scss
  15. 25
      src/app/pages/login/login.component.spec.ts
  16. 73
      src/app/pages/login/login.component.ts
  17. 18
      src/app/pages/pages-routing.module.ts
  18. 179
      src/app/pages/pages.module.ts
  19. 1
      src/app/pages/plan/plan.component.html
  20. 0
      src/app/pages/plan/plan.component.scss
  21. 15
      src/app/pages/plan/plan.component.ts
  22. 10
      src/app/pages/register/register.component.html
  23. 25
      src/app/pages/register/register.component.spec.ts
  24. 1
      src/app/pages/today-warning/today-warning.component.html
  25. 0
      src/app/pages/today-warning/today-warning.component.scss
  26. 15
      src/app/pages/today-warning/today-warning.component.ts
  27. 25
      src/app/tabbar/tabbar.component.html
  28. 45
      src/app/tabbar/tabbar.component.scss
  29. 25
      src/app/tabbar/tabbar.component.spec.ts
  30. 66
      src/app/tabbar/tabbar.component.ts
  31. 18
      src/app/theme.scss
  32. 4
      src/app/ui/changepassword/changepassword.component.html
  33. 19
      src/app/ui/tabbar/tabbar.component.html
  34. 9
      src/app/ui/tabbar/tabbar.component.scss
  35. 81
      src/app/ui/tabbar/tabbar.component.ts
  36. 81
      src/app/ui/ui.module.ts
  37. 4
      src/app/ui/userdata/edituserdata.component.html
  38. 4
      src/app/ui/userdata/userdata.component.html
  39. 37
      src/styles.scss

3
angular.json

@ -31,7 +31,8 @@
"styles": [
"src/styles.scss",
"./node_modules/swiper/css/swiper.min.css",
"./node_modules/viewerjs/dist/viewer.css"
"./node_modules/viewerjs/dist/viewer.css",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
"scripts": [
"node_modules/echarts/dist/echarts.js",

38
package-lock.json generated

@ -463,6 +463,22 @@
"resolved": "https://registry.npm.taobao.org/@angular/router/download/@angular/router-9.0.0.tgz",
"integrity": "sha1-EXhPyM6cszFMfsEIP/m+fGERgcI="
},
"@ant-design/colors": {
"version": "3.2.2",
"resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.2.2.tgz",
"integrity": "sha1-WtQ9YZ6RHzSI66wwPWBuZqhCOQM=",
"requires": {
"tinycolor2": "^1.4.1"
}
},
"@ant-design/icons-angular": {
"version": "9.0.1",
"resolved": "https://registry.nlark.com/@ant-design/icons-angular/download/@ant-design/icons-angular-9.0.1.tgz",
"integrity": "sha1-Wsi+xbw00jEgggyT+FEbWaoRe8U=",
"requires": {
"@ant-design/colors": "^3.1.0"
}
},
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz",
@ -6541,6 +6557,11 @@
"assert-plus": "^1.0.0"
}
},
"date-fns": {
"version": "2.25.0",
"resolved": "https://registry.npmmirror.com/date-fns/download/date-fns-2.25.0.tgz?cache=0&sync_timestamp=1633421799894&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fdate-fns%2Fdownload%2Fdate-fns-2.25.0.tgz",
"integrity": "sha1-jFyPHZWL44CamgP0t0LrqJT8VoA="
},
"date-format": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/date-format/download/date-format-2.1.0.tgz?cache=0&sync_timestamp=1572559173297&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdate-format%2Fdownload%2Fdate-format-2.1.0.tgz",
@ -11408,6 +11429,18 @@
"integrity": "sha1-rCetpmFn+ohJpq3dg39rGJrSCBw=",
"dev": true
},
"ng-zorro-antd": {
"version": "9.3.0",
"resolved": "https://registry.nlark.com/ng-zorro-antd/download/ng-zorro-antd-9.3.0.tgz",
"integrity": "sha1-+A2+JxXleMR1codzRJRC8AmfFSw=",
"requires": {
"@angular/cdk": "^9.0.0",
"@ant-design/icons-angular": "^9.0.0",
"date-fns": "^2.10.0",
"resize-observer-polyfill": "^1.5.1",
"tslib": "^1.10.0"
}
},
"ngx-cookie-service": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/ngx-cookie-service/download/ngx-cookie-service-3.0.2.tgz",
@ -15252,6 +15285,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz",
"integrity": "sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM="
},
"tinyqueue": {
"version": "1.2.3",
"resolved": "https://registry.npm.taobao.org/tinyqueue/download/tinyqueue-1.2.3.tgz",

1
package.json

@ -30,6 +30,7 @@
"e-ngx-cesium": "^6.3.2",
"echarts": "^4.6.0",
"firebase": "^7.6.2",
"ng-zorro-antd": "^9.3.0",
"ngx-cookie-service": "^3.0.2",
"ngx-countdown": "^11.0.0",
"ngx-echarts": "^4.2.2",

5098
src/app/_theming.scss

File diff suppressed because it is too large Load Diff

13
src/app/app-routing.module.ts

@ -12,16 +12,13 @@ import { HomeComponent } from './pages/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: '', component: NavigationComponent, canActivate: [AuthGuard],//守卫验证
children: [
{ path: 'datacollection', loadChildren: () => import('./ui/ui.module').then(m => m.UiModule) }
]
},
{ path: 'login', component: LoginComponent }, //登录页
{ path: 'register', component: RegisterComponent }, //注册页
{ path: 'home', component: HomeComponent } //首页
{
path: '', component: HomeComponent, children: [
{ path: 'home', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }
]
} //首页
];
@NgModule({

4
src/app/navigation/navigation.module.ts

@ -5,7 +5,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { TabbarComponent } from '../tabbar/tabbar.component';
import { UiModule } from '../ui/ui.module';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
@ -49,8 +48,7 @@ import {MatTreeModule} from '@angular/material/tree';
@NgModule({
declarations: [
NavigationComponent,
TabbarComponent
NavigationComponent
],
imports: [
CommonModule,

1
src/app/pages/criminal-records/criminal-records.component.html

@ -0,0 +1 @@
<p>违规记录</p>

0
src/app/pages/criminal-records/criminal-records.component.scss

15
src/app/pages/criminal-records/criminal-records.component.ts

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-criminal-records',
templateUrl: './criminal-records.component.html',
styleUrls: ['./criminal-records.component.scss']
})
export class CriminalRecordsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

20
src/app/pages/home/home.component.html

@ -1 +1,19 @@
<p>我是首页</p>
<div class="box">
<div>
<app-tabbar></app-tabbar>
</div>
<div class="menu">
<li [routerLink]="['/home/plan']">
三维预案
</li>
<li [routerLink]="['/home/warning']">
今日预警
</li>
<li [routerLink]="['/home/records']">
违规记录
</li>
</div>
<div>
<router-outlet></router-outlet>
</div>
</div>

11
src/app/pages/home/home.component.scss

@ -0,0 +1,11 @@
.box{
width: 100%;
height: 100%;
overflow: hidden;
}
.menu{
height: 64px;
width: 100%;
display: flex;
justify-content: center;
}

25
src/app/pages/home/home.component.spec.ts

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

25
src/app/pages/login/login.component.html

@ -1,11 +1,9 @@
<div class="login">
<div class="loginBox">
<div>
<div class="card">
<span class="cardheader">XXXXXXXXXX</span>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<!-- <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<div class="input">
<label class="position"><mat-icon>account_box</mat-icon></label>
@ -40,10 +38,27 @@
</div>
<button type="submit" [disabled]="!form.form.valid" class="loginbtn" mat-button>登录</button>
</form>
</form> -->
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="请输入用户名!">
<nz-input-group >
<input required type="text" nz-input formControlName="userName" placeholder="用户名" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="请输入密码!">
<nz-input-group>
<input required type="password" nz-input formControlName="password" placeholder="密码" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button>
</form>
</div>
</div>
</div>
</div>

16
src/app/pages/login/login.component.scss

@ -86,4 +86,20 @@
img {
width: 150px;
height: 150px;}
}
.login-form {
max-width: 300px;
}
.login-form-margin {
margin-bottom: 16px;
}
.login-form-forgot {
float: right;
}
.login-form-button {
width: 100%;
}

25
src/app/pages/login/login.component.spec.ts

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

73
src/app/pages/login/login.component.ts

@ -1,13 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, AfterViewInit, 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 { Router, ActivatedRoute } from '@angular/router'
import { CacheTokenService } from '../../service/cache-token.service'//引入服务
import { CookieService } from 'ngx-cookie-service';//cookie插件
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
@ -16,39 +15,49 @@ import { MatSnackBar } from '@angular/material/snack-bar';
})
export class LoginComponent implements OnInit {
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,
public snackBar: MatSnackBar,private cookieService: CookieService) { }
ngOnInit() {}
errmsg :string = ''; //错误信息
//提交登录表单
onSubmit(e){
this.http.post('/api/CompanyAccount/SignIn',{
name: e.name,
password: e.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,'/');
this.router.navigate(['/home'])
//调用服务中的function刷新token
this.token.startUp()
},
(err) =>
{this.errmsg = err}
)
validateForm!: FormGroup;
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService,
public snackBar: MatSnackBar, private cookieService: CookieService,private fb: FormBuilder) { }
ngOnInit() {
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
}
errmsg: string = ''; //错误信息
//跳转注册页面
toRegister () {
toRegister() {
this.router.navigate(['/register'])
}
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
// console.log(this.validateForm)
this.http.post('/api/CompanyAccount/SignIn', {
name: 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, '/');
this.router.navigate(['/home/plan'])
//调用服务中的function刷新token
this.token.startUp()
},
(err) => { this.errmsg = err }
)
}
}

18
src/app/pages/pages-routing.module.ts

@ -0,0 +1,18 @@
import { Routes, RouterModule } from '@angular/router';
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';
const routes: Routes = [
{ path: 'plan', component: PlanComponent },
{ path: 'warning', component: TodayWarningComponent },
{ path: 'records', component: CriminalRecordsComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PagesRoutingModule { }

179
src/app/pages/pages.module.ts

@ -1,101 +1,116 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { A11yModule } from '@angular/cdk/a11y';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule, MatCardTitle} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';
import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { UiModule } from '../ui/ui.module';
import { NzButtonModule } from 'ng-zorro-antd/button';
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';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent,],
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,],
imports: [
PagesRoutingModule,
CommonModule,
A11yModule,
CdkStepperModule,
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,
// 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,
ReactiveFormsModule,
RouterModule
RouterModule,
NzFormModule,
NzInputModule,
UiModule,
NzButtonModule
]
})
export class PagesModule { }

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

@ -0,0 +1 @@
<p>plan works!</p>

0
src/app/pages/plan/plan.component.scss

15
src/app/pages/plan/plan.component.ts

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-plan',
templateUrl: './plan.component.html',
styleUrls: ['./plan.component.scss']
})
export class PlanComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

10
src/app/pages/register/register.component.html

@ -1,4 +1,4 @@
<div class="login">
<!-- <div class="login">
<div class="loginBox">
<div>
@ -40,11 +40,7 @@
placeholder="请输入联系电话">
</mat-form-field>
</div>
<!-- <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert-danger">
<div *ngIf="tel.errors.pattern">
电话号码格式为11位数字
</div>
</div> -->
<div class="input">
<label class="position">
@ -99,4 +95,4 @@
</div>
</div>
</div>
</div> -->

25
src/app/pages/register/register.component.spec.ts

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterComponent } from './register.component';
describe('RegisterComponent', () => {
let component: RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RegisterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RegisterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

1
src/app/pages/today-warning/today-warning.component.html

@ -0,0 +1 @@
<p>今日预警</p>

0
src/app/pages/today-warning/today-warning.component.scss

15
src/app/pages/today-warning/today-warning.component.ts

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-today-warning',
templateUrl: './today-warning.component.html',
styleUrls: ['./today-warning.component.scss']
})
export class TodayWarningComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

25
src/app/tabbar/tabbar.component.html

@ -1,25 +0,0 @@
<mat-toolbar [color]="'primary'">
<!-- <mat-toolbar> -->
<h1 *ngIf="companyName">{{companyName}}</h1>
<!-- 登录信息按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appMenu" class="login">
<mat-icon>account_circle</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
<button mat-menu-item [routerLink]="['/datacollection/userdata']" >
<mat-icon>perm_identity</mat-icon>
<span>个人资料</span>
</button>
<button mat-menu-item (click)='changpsw()'>
<mat-icon>verified_user</mat-icon>
<span>修改密码</span>
</button>
<button mat-menu-item (click)='signOut()'>
<mat-icon>power_settings_new</mat-icon>
<span>退出系统</span>
</button>
</mat-menu>
</mat-toolbar>

45
src/app/tabbar/tabbar.component.scss

@ -1,45 +0,0 @@
mat-toolbar{
position: relative;
padding-left: 65px;
}
.logo{
height: 64px;
widows: 64px;
}
h1{
line-height: 64px;
color: white;
}
mat-icon{
color: white;
}
.login{
position: absolute;
right:30px;
}
.fullscreen{
position: absolute;
right:60px;
}
.help {
position: absolute;
right:90px;
}
.setting{
position: absolute;
right:120px;
}
.lockscreen{
position: absolute;
right:160px;
}
.darktheme{
position: absolute;
right:140px;
display: none;
}
.boxed{
width: 1200px;
}

25
src/app/tabbar/tabbar.component.spec.ts

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TabbarComponent } from './tabbar.component';
describe('TabbarComponent', () => {
let component: TabbarComponent;
let fixture: ComponentFixture<TabbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TabbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TabbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

66
src/app/tabbar/tabbar.component.ts

@ -1,66 +0,0 @@
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from '../service/cache-token.service' //引入服务
import { MatDialog } from '@angular/material/dialog';
import {ChangepasswordComponent} from '../ui/changepassword/changepassword.component'
import { MatSnackBar } from '@angular/material/snack-bar';
import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-tabbar',
templateUrl: './tabbar.component.html',
styleUrls: ['./tabbar.component.scss']
})
export class TabbarComponent implements OnInit {
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public dialog: MatDialog,public snackBar: MatSnackBar,
private cookieService: CookieService) { }
ngOnInit() {
this.getUserInfo()
}
companyName:any; //企业name
//获取用户信息
getUserInfo () {
this.http.get('/api/CompanyAccount/Profiles').subscribe((data:any)=>{
sessionStorage.setItem('companyId',data.companyId)
this.companyName = data.companyName
})
}
//退出系统
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.snackBar.open('成功退出', '确定', {
duration: 3000
});
this.router.navigate(['/login'])
}
)
}
}
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{width:'348px'});
dialogRef.afterClosed().subscribe();
}
}

18
src/app/theme.scss

@ -1,18 +0,0 @@
@import "./theming";
@include mat-core();
$my-app-primary:mat-palette($mat-blue,500);
$my-app-accent :mat-palette($mat-pink,A200,A100,A400);
$my-app-warn :mat-palette($mat-red);
$my-app-theme :mat-light-theme($my-app-primary,$my-app-accent,$my-app-warn);
@include angular-material-theme($my-app-theme);
$my-dark-primary:mat-palette($mat-red,A700);
$my-dark-accent :mat-palette($mat-amber,A200,A100,A400);
$my-dark-warn :mat-palette($mat-deep-orange);
$my-dark-theme :mat-dark-theme($my-dark-primary,$my-dark-accent,$my-dark-warn);
.myapp-dark-theme{
@include angular-material-theme($my-dark-theme);
}

4
src/app/ui/changepassword/changepassword.component.html

@ -1,4 +1,4 @@
<div mat-dialog-title>
<!-- <div mat-dialog-title>
修改密码
</div>
<div class="passwordCard" mat-dialog-content>
@ -45,4 +45,4 @@
</div>
</form>
</div>
</div> -->

19
src/app/ui/tabbar/tabbar.component.html

@ -0,0 +1,19 @@
<div class="box">
<div class="boxleft">
中国石化
</div>
<!-- 登录信息按钮 -->
<div class="boxright">
<span>
{{time}}
</span>
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'>
用户头像
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item (click)="signOut()">退出系统</li>
</ul>
</nz-dropdown-menu>
</div>
</div>

9
src/app/ui/tabbar/tabbar.component.scss

@ -0,0 +1,9 @@
.box{
width: 100%;
height: 62px;
background-image: linear-gradient(#001530, #051C3C ,#162f50, #243c55);
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
}

81
src/app/ui/tabbar/tabbar.component.ts

@ -0,0 +1,81 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router, ActivatedRoute } from '@angular/router'
import { CacheTokenService } from '../../service/cache-token.service' //引入服务
import { MatDialog } from '@angular/material/dialog';
import { ChangepasswordComponent } from '../changepassword/changepassword.component'
import { MatSnackBar } from '@angular/material/snack-bar';
import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-tabbar',
templateUrl: './tabbar.component.html',
styleUrls: ['./tabbar.component.scss']
})
export class TabbarComponent implements OnInit {
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public dialog: MatDialog, public snackBar: MatSnackBar,
private cookieService: CookieService) { }
ngOnInit() {
setInterval(()=>{
this.getTime()
},1000);
}
//获得时间
time:string
getTime() {
let myDate = new Date();
let y = myDate.getFullYear();
let M = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let d = myDate.getDate(); //获取当前日(1-31)
let h = myDate.getHours(); //获取当前小时数(0-23)
let m = myDate.getMinutes(); //获取当前分钟数(0-59)
let s = myDate.getSeconds(); //获取当前秒数(0-59)
//检查是否小于10
M = check(M);
d = check(d);
h = check(h);
m = check(m);
s = check(s);
let timestr = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
this.time = timestr;
//时间数字小于10,则在之前加个“0”补位。
function check(i) {
let num = (i < 10) ? ("0" + i) : i;
return num;
}
}
//退出系统
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'])
}
)
}
}
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{ width: '348px' });
dialogRef.afterClosed().subscribe();
}
}

81
src/app/ui/ui.module.ts

@ -8,40 +8,6 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule, MatOption } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { UserdataComponent, EditUser } from './userdata/userdata.component';
import { ChangepasswordComponent } from './changepassword/changepassword.component';
@ -49,8 +15,11 @@ import { IsnoPipe } from '../pipes/boolean.pipe';
import { ConfirmpswDirective } from './changepassword/equal-validator.directive';
import { TimePipe } from '../pipes/time.pipe';
import { PaginatorModule } from './paginator/paginator.module';
import { TabbarComponent } from './tabbar/tabbar.component';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
@NgModule({
declarations: [UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser],
declarations: [TabbarComponent,UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser],
imports: [
CommonModule,
@ -60,47 +29,15 @@ import { PaginatorModule } from './paginator/paginator.module';
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,
ReactiveFormsModule,
FormsModule,
PaginatorModule
]
PaginatorModule,
NzDropDownModule
],
exports:[TabbarComponent]
})
export class UiModule { }

4
src/app/ui/userdata/edituserdata.component.html

@ -1,4 +1,4 @@
<h1 mat-dialog-title>修改资料</h1>
<!-- <h1 mat-dialog-title>修改资料</h1>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
@ -39,4 +39,4 @@
</button>
<button mat-raised-button mat-dialog-close>取消</button>
</div>
</form>
</form> -->

4
src/app/ui/userdata/userdata.component.html

@ -1,4 +1,4 @@
<mat-card>
<!-- <mat-card>
<mat-list role="list" class="userList">
<mat-list-item role="listitem">
<label>登录账号:</label> {{userInfo.name}}
@ -24,4 +24,4 @@
<button mat-raised-button color="primary" (click)='edit()'>修改资料</button>
</mat-list-item>
</mat-list>
</mat-card>
</mat-card> -->

37
src/styles.scss

@ -1,4 +1,4 @@
@import "./app/theme.scss";
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
html,
body {
width: 100%;
@ -74,44 +74,9 @@ li {
app-root {
height: 100%;
}
h1 {
font-size: 16px;
}
.mat-expansion-panel-body {
padding: 0px !important;
}
.mat-expansion-indicator::after {
color: black;
}
.example-sidenav .mat-drawer-inner-container {
overflow: hidden;
}
table th.mat-header-cell:last-of-type,
table td.mat-cell:last-of-type,
table td.mat-footer-cell:last-of-type {
padding-right: 0px;
}
.mat-tab-body {
height: 100%;
overflow-y: auto;
}
.mat-drawer-backdrop.mat-drawer-shown {
background-color: #fff;
}
.mat-content {
//可展开面板垂直居中
align-items: center;
}
//x轴滚动条隐藏
.example-sidenav-content {
overflow-x: hidden;
overflow-y: auto;
}
.mat-tab-body-wrapper {
overflow: auto !important;
}
//滚动条样式
::-webkit-scrollbar {
width: 5px;

Loading…
Cancel
Save