Browse Source

[完善] 登录页面完善

master
陈鹏飞 5 years ago
parent
commit
726a09f4bb
  1. 123
      package-lock.json
  2. 27
      src/app/pages/login/login.component.html
  3. 76
      src/app/pages/login/login.component.scss
  4. 47
      src/app/pages/login/login.component.ts
  5. 3
      src/app/ui/home/home.component.html
  6. 7
      src/app/ui/home/home.component.scss
  7. 25
      src/app/ui/home/home.component.spec.ts
  8. 15
      src/app/ui/home/home.component.ts
  9. 2
      src/app/ui/ui-routing.module.ts
  10. 3
      src/app/ui/ui.module.ts
  11. BIN
      src/assets/images/pic.png
  12. 2
      src/index.html

123
package-lock.json generated

@ -10524,8 +10524,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -10546,14 +10545,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -10568,20 +10565,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -10698,8 +10692,7 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -10711,7 +10704,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -10726,7 +10718,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -10734,14 +10725,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -10760,7 +10749,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -10850,8 +10838,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -10863,7 +10850,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -10949,8 +10935,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -10986,7 +10971,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -11006,7 +10990,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -11050,14 +11033,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@ -16680,8 +16661,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -16702,14 +16682,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -16724,20 +16702,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -16854,8 +16829,7 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -16867,7 +16841,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -16882,7 +16855,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -16890,14 +16862,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -16916,7 +16886,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -17006,8 +16975,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -17019,7 +16987,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -17105,8 +17072,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -17142,7 +17108,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -17162,7 +17127,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -17206,14 +17170,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@ -17595,8 +17557,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -17617,14 +17578,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -17639,20 +17598,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -17769,8 +17725,7 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -17782,7 +17737,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -17797,7 +17751,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -17805,14 +17758,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -17831,7 +17782,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -17921,8 +17871,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -17934,7 +17883,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -18020,8 +17968,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -18057,7 +18004,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -18077,7 +18023,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -18121,14 +18066,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},

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

@ -1,24 +1,9 @@
<div class="login">
<div class="intro">
<div style="display: flex; margin-top: 20%;margin-left: 10%">
<div class="logo">
<img src="../../../assets/images/filelogo.png" alt="">
</div>
<div class="text">
<span style="font-size: 36px;color: white; display: block;margin-bottom: 35px;">数字化预案编制管理平台</span>
<span style="font-size: 16px;color: white;opacity: 0.5;">
数字化预案编制管理应用平台集重点单位的数字化预案资源的管理、分析及调用为一体,可实现辖区内预案使用的高效化、集约化、统一化、标准化管理。同时,可将消防现有的三维预案、图片式预案、卡片式预案、二维预案、视频预案等接入至系统中进行更加全面、真实、直观、生动的展示各项单位预案数据,方便进行预案资源调用,更好的服务实战指挥。
</span>
</div>
</div>
</div>
<div class="intro"></div>
<div class="card">
<div class="loginImg">
<img src="../../../assets/images/loginlogo.png">
<p class="cardheader">登录</p>
</div>
<div class="loginImg">六熟悉演练记录系统</div>
<mat-card>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<mat-icon class="icon">account_box</mat-icon>
@ -38,16 +23,8 @@
{{errmsg}}
</div>
<mat-checkbox style="margin-top: 10px;" name="notlogin" ngModel #notlogin="ngModel">
7天免登录
<a href="javascript:void(0);" (click)='open()'>
忘记密码?
</a>
</mat-checkbox>
<button type="submit" [disabled]="!form.form.valid" class="loginbtn"mat-button>登录</button>
</form>
<div class="website"><p>北京安信科创有限公司提供技术支持和维护</p></div>
</mat-card>
</div>

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

@ -3,22 +3,18 @@
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
.intro {
flex: 85%;
height: 100%;
background: url('../../../assets/images/background.jpg');
background-repeat:no-repeat;
flex: 1;
background: url('../../../assets/images/pic.png');
background-size:100% 100%;
-moz-background-size:100% 100%;
.text {
padding-top: 3%;
margin-left: 8%;
width: 53%;
}
}
.card{
flex: 15%;
width: 3.90625rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
}
}
@ -29,59 +25,51 @@
width: 100%;
}
.loginbtn {
margin-top: 25px;
height: 35px;
background-color:#039be5;
border-radius: 15px;
color: #fff;;
}
.website {
font-size: 14px;
text-align: center;
margin-top: 60px;
margin-top: 0.488281rem;
height: 0.341797rem;
background: linear-gradient(303deg, #FC7045 0%, #FF4923 100%);
border-radius: 0.292969rem;
color: #fff;
}
.alert-danger {
font-size: 14px;
font-size: 0.136719rem;
color: red;
}
.cardheader{
font-size: 26px;
font-weight: 500;
margin-top: 20px;
}
.mat-card {
box-shadow: 0px 0px 0px;
margin-top: 10px;
padding-left: 20px;
margin-top: 0.097656rem;
padding-left: 0.195313rem;
}
.mat-form-field {
padding-left: 20px;;
padding-left: 0.195313rem;
font-size: 0.15625rem;
input { font-size: 0.15625rem; }
}
.loginImg {
margin-top: 90px;
text-align: center;
margin-bottom: 0.488281rem;
background-image:-webkit-linear-gradient(right,#f18d6f,#FF4923);
font-weight: 800;
font-family: KaiTi;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.mat-input-element {
position: relative;
}
.mat-card .example-container .icon {
width: 24px;
width: 0.234375rem;
color: #666;
font-size: 24px;
font-size: 0.234375rem;
position: absolute;
top:36px;
left: 15px;
top: 0.351563rem;
left: 0.146484rem;
}
.mat-card .example-container .icon2 {
width: 24px;
width: 0.234375rem;
color: #666;
font-size: 24px;
font-size: 0.234375rem;
position: absolute;
top:100px;
left: 15px;
}
a {
font-size: 14px;
color: #0066FF;
margin-left: 250px;
top: 0.976563rem;
left: 0.146484rem
}

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

@ -18,7 +18,7 @@ export class LoginComponent implements OnInit {
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public snackBar: MatSnackBar) { }
ngOnInit() {
this.automaticLogin()
}
errmsg :string = ''
@ -30,52 +30,11 @@ export class LoginComponent implements OnInit {
sessionStorage.setItem("level",data.level);
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
// this.router.navigate([`/home`])
this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{
let isHave = data.find(item=>{ return item.url == "/home"})
if (isHave) {
this.router.navigate([`/home`])
} else {
data.forEach(item => {
if(item.url){
this.router.navigate([`/keyUnit`])
return
}
});
}
})
if(e.notlogin){ //7天免登录时
localStorage.setItem("isnologin","true")
localStorage.setItem("token",data.token)
localStorage.setItem("refreshToken",data.refreshToken) }
this.router.navigate([`/ui/home`])
//调用服务中的function刷新token
this.token.startUp()
},
(err) => {this.errmsg = err}
)
}
//7天免登录自动登录
automaticLogin () {
let isNoLogin = localStorage.getItem("isnologin")
if (isNoLogin) { //7天免登录时
let token = localStorage.getItem("token");
let refreshToken = localStorage.getItem("refreshToken");
this.http.post('/api/Account/RefreshToken', {
token: token,
refreshToken: refreshToken}).subscribe((data:any)=>{
sessionStorage.setItem("level",data.level);
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
this.token.startUp()
this.router.navigate(['/ui/userdata'])
this.snackBar.open('已自动登录', '确定', {duration: 3000});
})
} //if
(err) => {this.errmsg = err})
}
//打开弹窗

3
src/app/ui/home/home.component.html

@ -0,0 +1,3 @@
<div class="content">
首页
</div>

7
src/app/ui/home/home.component.scss

@ -0,0 +1,7 @@
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0.009766rem;
overflow: hidden;
}

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

@ -0,0 +1,25 @@
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();
});
});

15
src/app/ui/home/home.component.ts

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

2
src/app/ui/ui-routing.module.ts

@ -26,6 +26,7 @@ import {UnitInformationComponent} from './unit-information/unit-information.comp
import { EnterpriseuserComponent } from './enterpriseuser/enterpriseuser.component';
import { FireFightingFacilitiesFormworkComponent } from './fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component'
import { CollectionToolsComponent } from './collection-tools/collection-tools.component';
import { HomeComponent } from './home/home.component';
@ -56,6 +57,7 @@ const routes: Routes = [
{ path: 'enterpriseuser', component:EnterpriseuserComponent },
{ path: 'fireFightingFacilitiesFormwork', component:FireFightingFacilitiesFormworkComponent },
{ path: 'collectionTools', component:CollectionToolsComponent },
{ path: 'home', component:HomeComponent }
];
@NgModule({

3
src/app/ui/ui.module.ts

@ -95,8 +95,9 @@ import { CollectionToolsComponent, CreateBuilding, EditBuilding, ViewDetails } f
import { WorkingAreaComponent } from '../working-area/working-area.component';
import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent],
declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, HomeComponent],
imports: [
CommonModule,

BIN
src/assets/images/pic.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 746 KiB

2
src/index.html

@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>数字化预案编制管理平台</title>
<title>六熟悉演练记录系统</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

Loading…
Cancel
Save