Browse Source

[新增]搭网盘基础框架

master
邵佳豪 5 years ago
parent
commit
86390feff9
  1. 13
      .editorconfig
  2. 46
      .gitignore
  3. 132
      angular.json
  4. 12
      browserslist
  5. 32
      e2e/protractor.conf.js
  6. 23
      e2e/src/app.e2e-spec.ts
  7. 11
      e2e/src/app.po.ts
  8. 13
      e2e/tsconfig.json
  9. 32
      karma.conf.js
  10. 17754
      package-lock.json
  11. 60
      package.json
  12. 7
      proxy.config.json
  13. 27
      reset.css
  14. 5098
      src/app/_theming.scss
  15. 34
      src/app/app-routing.module.ts
  16. 1
      src/app/app.component.html
  17. 0
      src/app/app.component.scss
  18. 35
      src/app/app.component.spec.ts
  19. 63
      src/app/app.component.ts
  20. 40
      src/app/app.module.ts
  21. 31
      src/app/auth.guard.ts
  22. 71
      src/app/http-interceptors/base-interceptor.ts
  23. 116
      src/app/http-interceptors/cache-token.service.ts
  24. 9
      src/app/http-interceptors/index.ts
  25. 38
      src/app/http-interceptors/tree.service.ts
  26. 14
      src/app/interface.ts
  27. 24
      src/app/navigation/navigation.component.html
  28. 144
      src/app/navigation/navigation.component.scss
  29. 25
      src/app/navigation/navigation.component.spec.ts
  30. 33
      src/app/navigation/navigation.component.ts
  31. 114
      src/app/navigation/navigation.module.ts
  32. 28
      src/app/pages/lockscreen/lockscreen.component.html
  33. 111
      src/app/pages/lockscreen/lockscreen.component.scss
  34. 25
      src/app/pages/lockscreen/lockscreen.component.spec.ts
  35. 21
      src/app/pages/lockscreen/lockscreen.component.ts
  36. 52
      src/app/pages/login/login.component.html
  37. 115
      src/app/pages/login/login.component.scss
  38. 25
      src/app/pages/login/login.component.spec.ts
  39. 66
      src/app/pages/login/login.component.ts
  40. 17
      src/app/pages/pages-routing.module.ts
  41. 1
      src/app/pages/pages.component.html
  42. 0
      src/app/pages/pages.component.scss
  43. 25
      src/app/pages/pages.component.spec.ts
  44. 15
      src/app/pages/pages.component.ts
  45. 112
      src/app/pages/pages.module.ts
  46. 280
      src/app/pages/personaldata/personaldata.component.html
  47. 110
      src/app/pages/personaldata/personaldata.component.scss
  48. 25
      src/app/pages/personaldata/personaldata.component.spec.ts
  49. 15
      src/app/pages/personaldata/personaldata.component.ts
  50. 81
      src/app/pages/register/register.component.html
  51. 88
      src/app/pages/register/register.component.scss
  52. 25
      src/app/pages/register/register.component.spec.ts
  53. 19
      src/app/pages/register/register.component.ts
  54. 13
      src/app/pipes/boolean.pipe.ts
  55. 9
      src/app/pipes/time.pipe.ts
  56. 63
      src/app/tabbar/tabbar.component.html
  57. 41
      src/app/tabbar/tabbar.component.scss
  58. 25
      src/app/tabbar/tabbar.component.spec.ts
  59. 105
      src/app/tabbar/tabbar.component.ts
  60. 18
      src/app/theme.scss
  61. 1
      src/app/ui/all-file/all-file.component.html
  62. 0
      src/app/ui/all-file/all-file.component.scss
  63. 25
      src/app/ui/all-file/all-file.component.spec.ts
  64. 15
      src/app/ui/all-file/all-file.component.ts
  65. 48
      src/app/ui/changepassword/changepassword.component.html
  66. 15
      src/app/ui/changepassword/changepassword.component.scss
  67. 38
      src/app/ui/changepassword/changepassword.component.ts
  68. 31
      src/app/ui/changepassword/equal-validator.directive.ts
  69. 12
      src/app/ui/ui-routing.module.ts
  70. 111
      src/app/ui/ui.module.ts
  71. 0
      src/assets/.gitkeep
  72. BIN
      src/assets/images/bg_login.jpg
  73. BIN
      src/assets/images/login.gif
  74. BIN
      src/assets/images/logo.png
  75. 3
      src/environments/environment.prod.ts
  76. 16
      src/environments/environment.ts
  77. BIN
      src/favicon.ico
  78. 16
      src/index.html
  79. 13
      src/main.ts
  80. 63
      src/polyfills.ts
  81. 61
      src/styles.scss
  82. 20
      src/test.ts
  83. 18
      tsconfig.app.json
  84. 26
      tsconfig.json
  85. 18
      tsconfig.spec.json
  86. 91
      tslint.json
  87. 7996
      yarn.lock

13
.editorconfig

@ -0,0 +1,13 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

46
.gitignore vendored

@ -0,0 +1,46 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out
# dependencies
/node_modules
# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db

132
angular.json

@ -0,0 +1,132 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"anxin119": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"spec": false
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/anxin119",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"node_modules/echarts/dist/echarts.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "anxin119:build",
"proxyConfig": "proxy.config.json"
},
"configurations": {
"production": {
"browserTarget": "anxin119:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "anxin119:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "anxin119:serve"
},
"configurations": {
"production": {
"devServerTarget": "anxin119:serve:production"
}
}
}
}
}},
"defaultProject": "anxin119"
}

12
browserslist

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

32
e2e/protractor.conf.js

@ -0,0 +1,32 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

23
e2e/src/app.e2e-spec.ts

@ -0,0 +1,23 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('anxin119 app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

11
e2e/src/app.po.ts

@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get(browser.baseUrl) as Promise<any>;
}
getTitleText() {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}

13
e2e/tsconfig.json

@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

32
karma.conf.js

@ -0,0 +1,32 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/anxin119'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

17754
package-lock.json generated

File diff suppressed because it is too large Load Diff

60
package.json

@ -0,0 +1,60 @@
{
"name": "anxin119",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --open --port 4000 ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^9.0.0",
"@angular/cdk": "^9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/fire": "^5.3.0",
"@angular/forms": "~9.0.0",
"@angular/material": "^9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"@types/cesium": "^1.59.5",
"angular-calendar": "^0.28.2",
"cesium": "^1.64.0",
"date-fns": "^2.9.0",
"e-ngx-cesium": "^6.3.2",
"echarts": "^4.6.0",
"firebase": "^7.6.2",
"ng2-file-upload": "^1.4.0",
"ngx-echarts": "^4.2.2",
"ngx-perfect-scrollbar": "^8.0.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.1",
"@angular/cli": "~9.0.1",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}

7
proxy.config.json

@ -0,0 +1,7 @@
{
"/api": {
"target": "http://39.106.78.171:8008",
"secure": false,
"changeOrigin": true
}
}

27
reset.css

@ -0,0 +1,27 @@
@charset "utf-8";
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
margin:0;
padding:0;
font-size:16px;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
font-weight:500;
font-style:normal;
}
img{
border:none;
}
a{
text-decoration: none;
color:#000;
ul,ol,li{
list-style:none;
}
.clearfn:after{
content:"";
clear:both;
display: block;
overflow:hidden;
height:0;
visibility: hidden;
}

5098
src/app/_theming.scss

File diff suppressed because it is too large Load Diff

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

@ -0,0 +1,34 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { RegisterComponent } from './pages/register/register.component';
import { NavigationComponent } from './navigation/navigation.component';
import { LockscreenComponent } from './pages/lockscreen/lockscreen.component';
//路由守卫
import {AuthGuard} from './auth.guard'
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,}, //注册页
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

1
src/app/app.component.html

@ -0,0 +1 @@
<router-outlet></router-outlet>

0
src/app/app.component.scss

35
src/app/app.component.spec.ts

@ -0,0 +1,35 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'anxin119'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('anxin119');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('anxin119 app is running!');
});
});

63
src/app/app.component.ts

@ -0,0 +1,63 @@
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Data } from './interface'
import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from './http-interceptors/cache-token.service'//引入服务
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = '数字化预案编制管理平台';
constructor(private http:HttpClient,private router:Router,public token:CacheTokenService) { }
ngOnInit(): void {
var isnologin = localStorage.getItem("isnologin")
//七天免登录
if(isnologin){
var token = localStorage.getItem("token");
var refreshToken = localStorage.getItem("refreshToken");
this.http.post(
'/api/Account/RefreshToken',
{
token: token,
refreshToken: refreshToken
}
).subscribe(
(data: Data) => {
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
this.token.getmenus()
this.token.startUp()
this.router.navigate(['/ui/person'])
console.log('已自动登录')
}
)
}else{
var token = sessionStorage.getItem("token");
var refreshToken = sessionStorage.getItem("refreshToken");
if(token && refreshToken) {
this.http.post(
'/api/Account/RefreshToken',
{
token: token,
refreshToken: refreshToken
}
).subscribe(
(data: Data) => {
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
this.token.getmenus()
this.token.startUp()
console.log('已重启定时器')
}
)
}
}
}
}

40
src/app/app.module.ts

@ -0,0 +1,40 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { NavigationModule } from './navigation/navigation.module';
import { TabbarComponent } from './tabbar/tabbar.component';
import { PagesModule } from './pages/pages.module';
import { FormsModule } from '@angular/forms';
import { UiModule } from './ui/ui.module';
import { HttpClientModule } from '@angular/common/http';
import { httpInterceptorProviders } from './http-interceptors/index'
import {CacheTokenService} from './http-interceptors/cache-token.service'
import { TreeService } from'./http-interceptors/tree.service'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatSidenavModule,
NavigationModule,
MatIconModule,
PagesModule,
FormsModule,
HttpClientModule
],
providers: [httpInterceptorProviders, CacheTokenService,TreeService],
bootstrap: [AppComponent]
})
export class AppModule { }

31
src/app/auth.guard.ts

@ -0,0 +1,31 @@
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {
}
// 路由守卫
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.checkLogin();
}
checkLogin(): boolean {
// 判断本地有没有token
const token = sessionStorage.getItem('token');
// 如果有token,允许访问
if (token) { return true; }
//如果没有token,跳转登录页
this.router.navigate(['/login']);
return false;
}
}

71
src/app/http-interceptors/base-interceptor.ts

@ -0,0 +1,71 @@
import { Injectable } from '@angular/core';
import {
HttpClient, HttpEvent, 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 {CacheTokenService} from './cache-token.service'
//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) {}
intercept(req, next: HttpHandler) {
let newReq = req.clone({
url: req.hadBaseurl ? `${req.url}` : `${req.url}`,
});
if(!req.cancelToken) {
/*获取token*/
let token = sessionStorage.getItem("token")
/*此处设置额外请求头,token令牌*/
newReq.headers =
newReq.headers.set('Authorization', `Bearer ${token}`)
}
// 携带请求头发送下一次请求
return next.handle(newReq)
.pipe(
//箭头函数,注意this指向
catchError((err) => this.handleError(err))
)
}
// 捕获错误
//401 token过期 403没权限!!! 400参数错误 404未找到 614刷新令牌过期!!!
private handleError(error: HttpErrorResponse) {
// 用户认证失败返回登录页
if (error.status === 401||error.status === 614) {
this.token.delete()
sessionStorage.clear()
window.localStorage.clear()
alert('用户认证信息过期,请重新登录')
this.router.navigate(['/login'])
}
if (error.status === 403) {
alert('对不起,您无此权限')
}
if (error.error instanceof ErrorEvent) {
// 发生客户端或网络错误。相应处理。
console.error('An error occurred:', error.error.message);
} else {
// 服务端返回http状态码
// 服务端返回错误信息
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// 返回带有面向用户的错误信息
return throwError(
error.error);
};
}

116
src/app/http-interceptors/cache-token.service.ts

@ -0,0 +1,116 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class CacheTokenService {
constructor(private http:HttpClient) { }
public timer;
public settime = null;
//刷新token令牌定时器
startUp = ():void=>{
// this.getmenus();
this.timer = window.setInterval(
()=>{
window.clearInterval(this.settime)
var token = sessionStorage.getItem("token");
var refreshToken = sessionStorage.getItem("refreshToken");
this.http.post(
'/api/Account/RefreshToken',
{
token: token,
refreshToken: refreshToken
}
).subscribe(
(data:any) => {
console.log(data)
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
}
)
}
,18*60*1000)
}
organization = false;//组织机构管理
un = false;//单位类型管理
unit = false;//单位类型
unitmessage = false;//单位基本信息模板
fireelement = false;//消防要素管理
power = false;//权限管理
datapower = false;//数据权限管理
menuspower = false;//导航菜单管理
role = false;//角色管理
user = false;//用户管理
matlibrary = false//素材库管理
getmenus = ():void=>{
this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{
data.forEach(item => {
if(item.id == "5e4cd3c4146bea9014968113"){//组织机构管理
this.organization = true
}
if(item.id == "5e4cd85b146bea9014968119"){//单位类型管理
this.un = true
this.unit = true
this.unitmessage = true;//单位基本信息模板
this.fireelement = true;//消防要素管理
}
if(item.id == "5e4cd877146bea901496811a"){//权限管理
this.power = true;//权限管理
this.datapower = true;//数据权限管理
this.menuspower = true;//导航菜单管理
}
if(item.id == "5e4cd96e146bea901496811d"){//单位类型
this.un = true
this.unit = true
}
if(item.id == "5e4cd994146bea901496811e"){//单位基本信息模板
this.un = true
this.unitmessage = true
}
if(item.id == "5e4cd9a8146bea901496811f"){//消防要素管理
this.un = true
this.fireelement = true
}
if(item.id == "5e4cd9d8146bea9014968120"){//数据权限管理
this.power = true
this.datapower = true
}
if(item.id == "5e4cd9ec146bea9014968121"){//导航菜单管理
this.power = true
this.menuspower = true
}
if(item.id == "5e4cd883146bea901496811b"){//角色管理
this.role = true
}
if(item.id == "5e4cd88d146bea901496811c"){//用户管理
this.user = true
}
if(item.id == "5e5cb11948374f5264e46e84"){//素材库管理
this.matlibrary = true
}
});
// console.log(777,this.user,this.organization,this.power)
})
}
//删除定时器
delete = ():void=> {
window.clearInterval(this.timer)
}
createTime = (time:string)=>{
var newtime = time.substr(0,4) + '年' + time.substr(5,2) + '月' + time.substr(8,2) + '日' + time.substr(11,8)
}
}

9
src/app/http-interceptors/index.ts

@ -0,0 +1,9 @@
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BaseInterceptor } from './base-interceptor';
/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
];

38
src/app/http-interceptors/tree.service.ts

@ -0,0 +1,38 @@
import { Injectable } from '@angular/core';
@Injectable()
export class TreeService {
toTree(olddata){
let newdata = []
function getparentNode(parentId){
return olddata.find((item)=>{
return item.id == parentId
})
}
olddata.forEach(item => {
var parentNode = getparentNode(item.parentId);
if(parentNode){
if(!parentNode.children){
parentNode.children = []
}
if (parentNode.children.length == 0) {
item.isTop = true;
} else {
item.isTop = false;
parentNode.children[parentNode.children.length -1].isBottom = false;
}
item.isBottom = true;
parentNode.children.push(item)
}else{
if(!item.parentId){//如果parentId为null
newdata.push(item)
}
}
});
return newdata;
}
}

14
src/app/interface.ts

@ -0,0 +1,14 @@
export interface Data {
token:string,
refreshToken:string,
expires: number,
realName:string
}
export interface windows {
token:string
}
export enum isno {
"是",
"否"
}

24
src/app/navigation/navigation.component.html

@ -0,0 +1,24 @@
<app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
<mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme">
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;">
<div class="biglogobox">
<img src="../../assets/images/logo.png" alt="">
</div>
<div class="navbox">
<ul>
<li [routerLink]="['/datacollection']" routerLinkActive="router-link-active">全部文件</li>
</ul>
</div>
</mat-sidenav>
<button type="button" mat-button (click)="drawer.toggle()" class="shownav">
<mat-icon>menu</mat-icon>
</button>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>

144
src/app/navigation/navigation.component.scss

@ -0,0 +1,144 @@
.example-container {
width: 100%;
height:100%;
border: 1px solid rgba(0, 0, 0, 0.5);
}
mat-accordion{
height: 100%;
}
mat-sidenav{
box-shadow: 2px 0px 5px #888888;
color: white;
background-color: #3c4252;
width: 240px;
overflow-x: hidden;
p{
height: 48px;
cursor: pointer;
font-size: 16px;
line-height: 48px;
}
ul{
width: 100%;
li{
list-style: none;
height: 48px;
line-height: 48px;
cursor: pointer;
background: white;
padding-left: 55px;
background-color: #3c4252;
color: white;
}
.superli{
padding-left: 66px;
}
}
}
.logobox{
border-radius: 50%;
width: 64px;
height: 64px;
background:url("https://img5.tianyancha.com/logo/lll/cce72488294fb8f4bc670a5bb7f0cc4d.png@!f_200x200") no-repeat;
background-size: 100%;
margin: 0px auto;
img{
width: 100%;
height: 100%;
}
}
.shownav{
position: absolute;
top: 13px;
z-index: 200;
}
.mat-accordion .mat-expansion-panel:first-of-type {
border-top-right-radius:0px;
border-top-left-radius:0px;
}
.mat-accordion .mat-expansion-panel:last-of-type {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.mat-expansion-panel{
border-radius: 0px;
}
.mat-expansion-panel-spacing {
margin: 0px;
}
.superdiv{
padding-left: 31px;
}
mat-icon{
color: white;
}
.navbox{
position: absolute;
left: 0px;
top: 153px;
right: -18px;
bottom: 0px;
overflow-y: scroll;
}
mat-sidenav-container.myapp-dark-theme{
background-color: #fafafa;
color: black;
mat-panel-title{
color: black;
}
ul li{
background-color: white;
color: black;
}
.biglogobox{
background-color: #d50000;
}
color: black;
}
.biglogobox{
width: 250px;
background-color: #42a5f5;
padding-top: 15px;
display: block;
text-align: center;
line-height:40px;
position: relative;
color: #FFF;
font-size: 2em;
margin: 0 auto;
margin-bottom: 100px;
img{
margin-right: 11px;
}
}
mat-panel-title mat-icon{
color: #afb2bb;
font-size: 16px;
line-height: 24px;
margin-right: 6px;
}
mat-expansion-panel{
background-color: #3c4252;
mat-panel-title{
color: white;
}
}
.mat-expansion-indicator::after {
color: white;
}
.example-container .navbox .router-link-active {
background-color: rgba(225,225,225,.5);
border:0
}

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

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

33
src/app/navigation/navigation.component.ts

@ -0,0 +1,33 @@
import { Component, OnInit } from '@angular/core';
import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
constructor(public navmenus:CacheTokenService) { }
ngOnInit() {
}
ngOnDestroy(){
}
darktheme = false;
switchTheme(dark) {
this.darktheme = dark;
// alert(this.darkTheme);
}
defaulttheme(){
console.log(111)
this.darktheme = false
}
redtheme(){
console.log(222)
this.darktheme = true
}
}

114
src/app/navigation/navigation.module.ts

@ -0,0 +1,114 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavigationComponent } from './navigation.component';
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';
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} 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 {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 {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';
@NgModule({
declarations: [
NavigationComponent,
TabbarComponent
],
imports: [
CommonModule,
MatSidenavModule,
RouterModule,
MatIconModule,
FormsModule,
UiModule,
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,
],
exports: [
NavigationComponent
]
})
export class NavigationModule { }

28
src/app/pages/lockscreen/lockscreen.component.html

@ -0,0 +1,28 @@
<div class="pages-lockscreen layout-full">
<div class="page h-100-p text-center vertical-align">
<div class="page-content auth-box vertical-align-middle">
<!-- <div class="avatar s-50 mb-20">
<img src="../../../../../assets/images/avatars/tianhun.jpg">
</div> -->
<p class="mt-0 mb-20">锁屏</p>
<div class="mt-20 mb-20" fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field color-white color="accent" appearance="outline" class="w-100-p">
<mat-label>输入密码</mat-label>
<input matInput type="password" [(ngModel)]="password">
<mat-icon matSuffix>lock</mat-icon>
</mat-form-field>
</div>
<p class="mt-0">
输入密码以进入
</p>
<button mat-button color="warn" (click)="open()">进入</button>
<!-- <p class="mt-0">
<a routerLink="/general/pages/login">输入您或登录作为一个不同的用户密码检索您的会话</a>
</p> -->
<div class="copyright">
<p>WEBSITE BY Anxin</p>
<p>© 2020. All RIGHT RESERVED.</p>
</div>
</div>
</div>
</div>

111
src/app/pages/lockscreen/lockscreen.component.scss

@ -0,0 +1,111 @@
.pages-lockscreen {
.page-content {
display: inline-block;
width: 400px;
max-width: 100%;
padding: 30px;
}
.avatar {
width: 50px;
height: 50px;
margin: 0 auto;
img {
border-radius: 50%;
}
}
}
.layout-full {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
color: #fff;
font-family: Roboto, sans-serif;
background: url('../../../assets/images/bg_login.jpg');
&::before {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: "";
background-position: center top;
background-size: cover;
}
&::after {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: "";
background-color: rgba(33, 33, 33, .6);
}
.page {
position: relative;
height: 100%;
padding: 0;
margin: 0;
background: transparent;
}
}
.auth-box {
.copyright {
margin-top: 60px;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
p {
margin: 0 0 14px;
}
}
.social {
mat-icon {
color: #fff;
}
}
}
.vertical-align {
&::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content: "";
}
.vertical-align-middle {
display: inline-block;
vertical-align: middle;
}
}
.pages-login {
.page-content {
display: inline-block;
width: 400px;
max-width: 100%;
padding: 30px;
}
}
.page-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}

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

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

21
src/app/pages/lockscreen/lockscreen.component.ts

@ -0,0 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务
@Component({
selector: 'app-lockscreen',
templateUrl: './lockscreen.component.html',
styleUrls: ['./lockscreen.component.scss']
})
export class LockscreenComponent implements OnInit {
constructor(private router:Router,private route:ActivatedRoute,private getMenus:CacheTokenService) { }
password = ''
ngOnInit() {
}
open(){
if(this.password == "12345678"){
this.getMenus.getmenus()
this.router.navigate(['/ui/organization'])
}
}
}

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

@ -0,0 +1,52 @@
<div class="login">
<div class="loginbox">
<div class="intro">
<p>数据采集管理平台</p>
<!-- <span>
数字化预案编制管理应用平台集重点单位的数字化预案资源的管理、分析及调用为一体,可实现辖区内预案使用的高效化、集约化、统一化、标准化管理。同时,可将消防现有的三维预案、图片式预案、卡片式预案、二维预案、视频预案等接入至系统中进行更加全面、真实、直观、生动的展示各项单位预案数据,方便进行预案资源调用,更好的服务实战指挥。
</span> -->
</div>
<div class="card">
<div class="loginImg">
<img src="../../../assets/images/login.gif">
<p class="cardheader">登录</p>
</div>
<mat-card>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<mat-icon class="icon">account_box</mat-icon>
<mat-icon class="icon2">lock</mat-icon>
<mat-form-field>
<input matInput id="name" name="name"
required
ngModel #name="ngModel" placeholder="请输入账号">
</mat-form-field>
<mat-form-field>
<input matInput id="password" name="password" type='password'
required minlength="8"
ngModel #password="ngModel" placeholder="请输入密码">
</mat-form-field>
<div *ngIf="errmsg" class="alert-danger">
{{errmsg}}
</div>
<a href="javascript:void(0);" (click)='open()'>
忘记密码?
</a>
<button type="submit" [disabled]="!form.form.valid" class="loginbtn"mat-button>登录</button>
</form>
<div class="website">
<p>北京安信科创有限公司提供技术支持和维护</p>
</div>
</mat-card>
</div>
</div>
</div>

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

@ -0,0 +1,115 @@
.login {
width: 100%;
height: 100%;
background: url('../../../assets/images/bg_login.jpg');
.loginbox {
width: 100%;
height: 100%;
background-color: #000;
background: rgba(0,0,0,0.5);/*盒子背景透明*/
position: relative;
}
.intro {
width: 35%;
position: fixed;
top:35%;
left: 15%;
p {
font-size: 36px;
color:white;
margin-bottom: 35px;
}
span {
font-size: 16px;
color:white;
opacity: 0.5;
}
}
.card{
width: 460px;
height: 100%;
background-color: #fff;
position: absolute;
right: 0;
}
}
.example-container {
display: flex;
flex-direction: column;
width: 100%;
}
.loginbtn {
margin-top: 25px;
height: 35px;
background-color:#039be5;
border-radius: 15px;
color: #fff;;
}
.mat-card {
box-shadow: 0 0 0;
margin-top: 140px;
}
.applyfor {
font-size: 16px;
a {
color: #039be5;
}
}
.website {
font-size: 14px;
text-align: center;
margin-top: 60px;
}
.alert-danger {
font-size: 14px;
color: red;
}
.cardheader{
font-size: 26px;
font-weight: 500;
margin-top: 20px;
}
.mat-card {
margin-top: 10px;
padding-left: 20px;
}
.mat-form-field {
padding-left: 20px;;
}
.loginImg {
margin-top: 90px;
text-align: center;
}
.mat-input-element {
position: relative;
}
.mat-card .example-container .icon {
width: 24px;
color: #666;
font-size: 24px;
position: absolute;
top:36px;
left: 15px;
}
.mat-card .example-container .icon2 {
width: 24px;
color: #666;
font-size: 24px;
position: absolute;
top:100px;
left: 15px;
}
a {
font-size: 14px;
color: #0066FF;
margin-left: 250px;
}

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

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

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

@ -0,0 +1,66 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Data } from '../../interface'
import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public snackBar: MatSnackBar) { }
ngOnInit() {
}
errmsg :string = ''
onSubmit(e){
this.http.post(
'/api/Account/SignIn',
{
name: e.name,
password: e.password
}
).subscribe(
(data: Data) =>
{
sessionStorage.setItem("token",data.token);
sessionStorage.setItem("refreshToken",data.refreshToken);
this.router.navigate(['/datacollection'])
if(e.notlogin){
console.log("true")
localStorage.setItem("isnologin","true")
localStorage.setItem("token",data.token)
localStorage.setItem("refreshToken",data.refreshToken)
}else{
console.log("false")
}
//调用服务中的function刷新token
this.token.startUp()
//调用服务中的function获取菜单
this.token.getmenus()
},
(err) =>
{this.errmsg = err}
)
}
//打开弹窗
open () {
this.snackBar.open('请联系管理员', '确定', {
duration: 3000
});
}
}

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

@ -0,0 +1,17 @@
// import { Routes, RouterModule } from '@angular/router';
// import { NgModule } from '@angular/core';
// import { PagesComponent } from './pages.component';
// import { PersonaldataComponent } from './personaldata/personaldata.component';
// const routes: Routes = [
// { path: '', component: PagesComponent},
// { path: 'personaldata ', component: PersonaldataComponent},
// ];
// @NgModule({
// imports: [RouterModule.forChild(routes)],
// exports: [RouterModule]
// })
// export class PagesRoutingModule {}

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

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

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

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

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

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

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

112
src/app/pages/pages.module.ts

@ -0,0 +1,112 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
// import { PagesRoutingModule } from './pages-routing.module'
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 { PersonaldataComponent } from './personaldata/personaldata.component';
import { RouterModule } from '@angular/router';
import { LockscreenComponent } from './lockscreen/lockscreen.component';
// import { PagesRoutingModule } from './pages-routing.module';
@NgModule({
declarations: [PagesComponent, LoginComponent, RegisterComponent, LockscreenComponent],
imports: [
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,
FormsModule,
ReactiveFormsModule,
RouterModule
// PagesRoutingModule,
]
})
export class PagesModule { }

280
src/app/pages/personaldata/personaldata.component.html

@ -0,0 +1,280 @@
<div class="pages-profile">
<div fxLayout.gt-sm="row nowrap" fxLayout.lt-md="column nowrap" fxLayoutAlign.gt-sm="space-between start"
fxLayoutGap="30px" id="xxx">
<mat-card fxFlex="30" class="profile-card">
<mat-card-content>
<img mat-card-avatar src="">
<mat-card-title class="profile-user">安信科创</mat-card-title>
<mat-card-subtitle class="profile-job">嘻嘻嘻嘻</mat-card-subtitle>
<p class="profile-introduction">
不要做程序员,要做问题解决者
</p>
<div class="profile-social">
<mat-icon size="1" class="secondary-text s-24"></mat-icon>
<mat-icon size="1" class="secondary-text s-24"></mat-icon>
<mat-icon size="1" class="secondary-text s-24"></mat-icon>
<mat-icon size="1" class="secondary-text s-24"></mat-icon>
</div>
<button mat-flat-button color="accent">关注</button>
</mat-card-content>
<mat-card-actions class="profile-card-footer" fxLayout="row nowrap">
<div fxFlex="32">
<strong class="profile-stat-count">260</strong>
<span>粉丝</span>
</div>
<div fxFlex="32">
<strong class="profile-stat-count">180</strong>
<span>关注</span>
</div>
<div fxFlex="32">
<strong class="profile-stat-count">2000</strong>
<span>博客</span>
</div>
</mat-card-actions>
</mat-card>
<mat-card fxFlex="70" class="profile-board">
<mat-tab-group>
<mat-tab label="活动">
<mat-list>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
</mat-list>
<div class="pt-40 pb-40">
<button mat-flat-button class="show-more-btn">更多</button>
</div>
</mat-tab>
<mat-tab label="评论">
<mat-list>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</mat-list-item>
</mat-list>
</mat-tab>
<mat-tab label="消息">
<mat-list>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
<mat-list-item>
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
<img matListAvatar src="">
<div>
<div>我是假数据
<span class="secondary-text font-size-12">我是假数据</span>
</div>
<span class="secondary-text font-size-12">我是假数据</span>
</div>
</div>
<div matLine class="profile-item-content">
我是假数据
</div>
</mat-list-item>
</mat-list>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>

110
src/app/pages/personaldata/personaldata.component.scss

@ -0,0 +1,110 @@
#xxx{
display: flex;
justify-content: space-around;
}
.pages-profile {
padding: 30px;
.profile-card {
padding: 9px;
text-align: center;
font-family: Roboto, sans-serif;
width: 500px;
height: 600px;
mat-card-content {
padding: 40px 15px;
margin: 0;
}
.mat-card-avatar {
width: 130px;
height: 130px;
margin-bottom: 10px;
}
.profile-user {
margin: 10px 0;
font-weight: normal;
}
.profile-job {
margin-bottom: 20px;
color: #9e9e9e;
font-weight: 500;
}
.profile-introduction {
margin: 0 0 1rem;
color: #757575;
}
.profile-social {
margin: 25px 0;
mat-icon {
margin: 0 10px;
color: rgba(66, 66, 66, .4);
}
}
mat-card-actions {
padding: 10px;
background: #f6f9fd;
}
.profile-card-footer {
display: flex;
justify-content: space-around;
.profile-stat-count {
display: block;
margin-bottom: 3px;
font-size: 20px;
font-weight: bold;
color: #616161;
+span {
color: #9e9e9e;
}
}
}
}
.profile-board {
padding: 30px;
width: 500px;
mat-list {
padding-bottom: 20px;
}
mat-list-item {
height: auto;
padding: 25px 0;
margin-left: -16px;
border-bottom: 1px solid #dfe0df;
.profile-item-content {
padding: 20px 0 0 56px;
line-height: 1.571429;
color: #757575;
white-space: normal;
display: flex;
flex-wrap: wrap;
img {
width: 100%;
max-width: 220px;
max-height: 150px;
padding: 0 20px 20px 0;
}
}
}
}
.show-more-btn {
width: 100%;
background-color: #eee;
color: #3949ab;
}
}

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

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

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

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

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

@ -0,0 +1,81 @@
<div class="login">
<div class="loginbox">
<div class="intro">
<p>北京安信科创有限公司</p>
<span>北京安信科创软件有限公司作为中国应急服务领跑者,于2006年进入消防救援领域,是一家专注于应急领域仿真培训演练与应急数据预判领域的软件服务供应商。安信主要利用大数据与虚拟现实技术实现对消防、公安、机场相关安防人员与企业安全监管人员的仿真培训与考核,致力于为我国应急产业的发展构建更美好的未来。目前,安信的业务遍布全国20多个省份和地区,服务全国将近四分之一以上的人口
</span>
</div>
<div class="card">
<mat-card>
<p class="cardheader">注册</p>
<p>Please register first</p>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<mat-form-field>
<input matInput id="name" name="name"
required
ngModel #name="ngModel" placeholder="请输入账号">
</mat-form-field>
<!-- <div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert-danger">
<div *ngIf="name.errors.required">
账号不能为空
</div>
</div> -->
<mat-form-field>
<input matInput id="email" name="email"
required pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$"
ngModel #email="ngModel" placeholder="请输入邮箱">
</mat-form-field>
<!--
<div *ngIf="email.invalid && (email.dirty || email.touched)"
class="alert-danger">
<div *ngIf="email.errors.required">
邮箱不能为空
</div>
<div *ngIf="email.errors.pattern">
邮箱格式不正确
</div>
</div> -->
<mat-form-field>
<input matInput id="password" name="password" type='password'
required minlength="8"
ngModel #password="ngModel" placeholder="请输入密码">
</mat-form-field>
<!-- <div *ngIf="password.invalid && (password.dirty || password.touched)"
class="alert-danger">
<div *ngIf="password.errors.required">
密码不能为空
</div>
<div *ngIf="password.errors.minlength">
密码最少8位
</div>
</div> -->
<mat-checkbox style="margin-top: 25px;">请同意不扩散核武器条约条约</mat-checkbox>
<button type="submit" [disabled]="!form.form.valid" class="loginbtn"mat-button>注册</button>
</form>
<div class="applyfor">
<p>已有账号?去<a href="/login">登录</a></p>
</div>
<div class="website">
<p>WEBSITE BY AnXin</p>
<p>© 2020. All RIGHT RESERVED.</p>
</div>
</mat-card>
</div>
</div>
</div>

88
src/app/pages/register/register.component.scss

@ -0,0 +1,88 @@
.login {
width: 100%;
height: 100%;
background: url('../../../assets/images/bg_login.jpg');
.loginbox {
width: 100%;
height: 100%;
background-color: #000;
background: rgba(0,0,0,0.5);/*盒子背景透明*/
// opacity: 0.5;
position: relative;
}
.intro {
width: 650px;
// height: 350px;
position: fixed;
top:35%;
left: 15%;
p {
font-size: 36px;
color:white;
margin-bottom: 35px;
}
span {
font-size: 16px;
color:white;
opacity: 0.5;
}
}
.card{
width: 460px;
height: 100%;
padding-left: 20px;
background-color: #fff;
position: absolute;
right: 0;
p {
width: 100%;
margin: 18px 0;
}
.cardheader{
font-size: 26px;
font-weight: 500;
}
}
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.loginbtn {
margin-top: 18px;
height: 35px;
background-color:#039be5;
border-radius: 15px;
color: #fff;;
}
.mat-card {
box-shadow: 0 0 0;
margin-top: 70px;
}
.applyfor {
font-size: 16px;
a {
color: #039be5;
}
}
.website {
font-size: 14px;
text-align: center;
margin-top: 50px;
}
.alert-danger {
font-size: 14px;
color: red;
}

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

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

19
src/app/pages/register/register.component.ts

@ -0,0 +1,19 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
onSubmit(e){
console.log(e)
}
}

13
src/app/pipes/boolean.pipe.ts

@ -0,0 +1,13 @@
import { Pipe, PipeTransform } from '@angular/core';
import { isno } from '../interface'
@Pipe({name: 'isno'})
export class IsnoPipe implements PipeTransform {
transform(value: boolean): string {
if(value){
var x = 0
}else{
x=1
}
return isno[x]
}
}

9
src/app/pipes/time.pipe.ts

@ -0,0 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'time'})
export class TimePipe implements PipeTransform {
transform(value: string): string {
var newtime = value.substr(0,4) + '-' + value.substr(5,2) + '-' + value.substr(8,2)
return newtime
}
}

63
src/app/tabbar/tabbar.component.html

@ -0,0 +1,63 @@
<mat-toolbar [color]="theme?'primary':'accent'">
<!-- <mat-toolbar> -->
<h1>用户信息采集平台</h1>
<!-- 全屏 -->
<button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen">
<ng-container *ngIf="!isfullscreen; else elseTemplate">
<mat-icon *ngIf="!isfullscreen">fullscreen</mat-icon>
</ng-container>
<ng-template #elseTemplate>
<mat-icon else>fullscreen_exit</mat-icon>
</ng-template>
</button>
<!-- 黑夜模式开关 -->
<mat-slide-toggle (change)='onChange($event.checked)' class="darktheme"></mat-slide-toggle>
<!-- 锁屏按钮 -->
<button mat-button class="lockscreen" [routerLink]="['/lockscreen']" routerLinkActive="router-link-active" >
<mat-icon>screen_lock_landscape</mat-icon>
</button>
<!-- 登录信息按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appMenu" class="login">
<mat-icon>account_circle</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
<button mat-menu-item [routerLink]="['/ui/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>
<!-- 设置按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appSet" class="setting">
<mat-icon>settings</mat-icon>
</button>
<mat-menu #appSet="matMenu" yPosition="below" xPosition="after">
<button mat-menu-item (click)="defaulttheme.next()">
<mat-icon>palette</mat-icon>
<span>默认主题</span>
</button>
<button mat-menu-item (click)="redtheme.next()">
<mat-icon>whatshot</mat-icon>
<span>亮色主题</span>
</button>
<button mat-menu-item (click)="standard()">
<mat-icon>settings_overscan</mat-icon>
<span>标准模式</span>
</button>
<button mat-menu-item (click)="boxed('boxed')">
<mat-icon>laptop</mat-icon>
<span>盒子模式</span>
</button>
</mat-menu>
</mat-toolbar>

41
src/app/tabbar/tabbar.component.scss

@ -0,0 +1,41 @@
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;
}
.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

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

105
src/app/tabbar/tabbar.component.ts

@ -0,0 +1,105 @@
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
import { MatDialog } from '@angular/material/dialog';
import {ChangepasswordComponent} from '../ui/changepassword/changepassword.component'
@Component({
selector: 'app-tabbar',
templateUrl: './tabbar.component.html',
styleUrls: ['./tabbar.component.scss']
})
export class TabbarComponent implements OnInit {
theme: boolean = true;
@Output()
toggle = new EventEmitter<void>();
@Output()
toggleDarkTheme = new EventEmitter<boolean>();
@Output()
defaulttheme = new EventEmitter<boolean>();
@Output()
redtheme = new EventEmitter<boolean>();
// @Output()
// boxed = new EventEmitter<boolean>();
onChange(eventValue: boolean){
this.toggleDarkTheme.emit(eventValue);
}
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public dialog: MatDialog) { }
ngOnInit() {
}
boxed(css){
const Element = document.body;
Element.style.width = '1200px'
}
standard(){
const Element = document.body;
Element.style.width = '100%'
}
isfullscreen:boolean = false;
fullscreenToggle(){
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
}
this.isfullscreen = true;
}
closefullscreen(){
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
};
if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
docWithBrowsersExitFunctions.msExitFullscreen();
}
this.isfullscreen = false;
}
//退出系统
signOut = () => {
let out = confirm("您确定要退出吗")
if(out) {
this.http.post('/api/Account/SignOut',{}).subscribe(
data=> {
this.token.delete()
sessionStorage.clear()
window.localStorage.clear()
alert('成功退出')
this.router.navigate(['/login'])
}
)
}
}
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{width:'348px'});
dialogRef.afterClosed().subscribe();
}
}

18
src/app/theme.scss

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

1
src/app/ui/all-file/all-file.component.html

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

0
src/app/ui/all-file/all-file.component.scss

25
src/app/ui/all-file/all-file.component.spec.ts

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

15
src/app/ui/all-file/all-file.component.ts

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

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

@ -0,0 +1,48 @@
<div mat-dialog-title>
修改密码
</div>
<div class="passwordCard" mat-dialog-content>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<span class="cardLeft">原密码</span>
<mat-form-field>
<input matInput id="password" name="password"
required type="password"
ngModel #password="ngModel" placeholder="请输入原密码">
</mat-form-field>
<span class="cardLeft">新密码</span>
<mat-form-field>
<input matInput id="newPassword" name="newPassword" type="password"
required pattern="^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,20}$"
ngModel #newPassword="ngModel" placeholder="请输入新密码">
</mat-form-field>
<div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched)">
<div class="group-error-content">密码格式8-20位,字母+数字</div>
</div>
<span class="cardLeft">确认新密码</span>
<mat-form-field>
<input matInput id="newsPassword" name="newsPassword" type="password"
required
ngModel #newsPassword="ngModel" placeholder="请确认新密码"
[appConfirmpsw] = "newPassword.value">
</mat-form-field>
<div *ngIf="newsPassword.touched&&newsPassword.invalid">
<div class="group-error-content">密码输入不一致!</div>
</div>
<div *ngIf="errmsg" class="group-error-content">
{{errmsg}}
</div>
<div mat-dialog-actions class="btnbox">
<button mat-raised-button color="primary" type="submit"
[disabled]="!form.form.valid">
确定
</button>
<button mat-raised-button color="primary" mat-dialog-close>取消</button>
</div>
</form>
</div>

15
src/app/ui/changepassword/changepassword.component.scss

@ -0,0 +1,15 @@
.passwordCard {
width: 300px;
height: 100%;
}
.mat-form-field {
display: block;
width: 300px;
}
.group-error-content {
font-size: 8px;
color: red;
}
.mat-dialog-content {
overflow: visible
}

38
src/app/ui/changepassword/changepassword.component.ts

@ -0,0 +1,38 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-changepassword',
templateUrl: './changepassword.component.html',
styleUrls: ['./changepassword.component.scss']
})
export class ChangepasswordComponent implements OnInit {
constructor(private http:HttpClient,
public dialogRef: MatDialogRef<ChangepasswordComponent>) { }
ngOnInit() {
}
errmsg :string = ''
onSubmit(e){
this.http.put(
'/api/Account/Password',
{
newPassword: e.newPassword,
password: e.password
}
).subscribe(data=> {
alert('密码修改成功')
this.dialogRef.close(data);
},(err) =>
{this.errmsg = err}
)
}
}

31
src/app/ui/changepassword/equal-validator.directive.ts

@ -0,0 +1,31 @@
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidatorFn} from '@angular/forms';
@Directive({
selector: '[appConfirmpsw]',
providers: [{
provide : NG_VALIDATORS,
useExisting : ConfirmpswDirective,
multi: true
}]
})
export class ConfirmpswDirective implements Validator {
@Input('appConfirmpsw') confirmpsw: string;
constructor() {
}
validate(control: AbstractControl): {[key: string]: any} {
console.log(this.confirmpsw);
return this.confirmpsw ? comfirmPswValidator(this.confirmpsw)(control) : null;
}
}
export function comfirmPswValidator(_confirmpsw: string): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
if ( !control.value ) {
return { 'required' : true };
}
return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
};
}

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

@ -0,0 +1,12 @@
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AllFileComponent } from './all-file/all-file.component';
const routes: Routes = [
{ path: '', component:AllFileComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UiRoutingModule {}

111
src/app/ui/ui.module.ts

@ -0,0 +1,111 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UiRoutingModule } from './ui-routing.module';
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} 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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
import { ChangepasswordComponent } from './changepassword/changepassword.component';
import { IsnoPipe } from '../pipes/boolean.pipe';
import {ConfirmpswDirective} from './changepassword/equal-validator.directive'
import { TimePipe } from '../pipes/time.pipe';
import { FileUploadModule } from 'ng2-file-upload'
import { AllFileComponent } from './all-file/all-file.component';
@NgModule({
declarations: [PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, AllFileComponent],
imports: [
CommonModule,
UiRoutingModule,
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,
ReactiveFormsModule,
FormsModule,
FileUploadModule
]
})
export class UiModule { }

0
src/assets/.gitkeep

BIN
src/assets/images/bg_login.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

BIN
src/assets/images/login.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/images/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

3
src/environments/environment.prod.ts

@ -0,0 +1,3 @@
export const environment = {
production: true
};

16
src/environments/environment.ts

@ -0,0 +1,16 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.

BIN
src/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 B

16
src/index.html

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>数字化预案编制管理平台</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=04743eb4bbbdf60376851bb776c3dcdc"></script>
</html>

13
src/main.ts

@ -0,0 +1,13 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
// window['CESIUM_BASE_URL'] = 'src/assets/cesium';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

63
src/polyfills.ts

@ -0,0 +1,63 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

61
src/styles.scss

@ -0,0 +1,61 @@
// @import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import './app/theme.scss';
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
height:100%;
margin:0;
padding:0;
}
body{
margin: 0 auto;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
font-weight:500;
font-style:normal;
}
img{
border:none;
}
a{
text-decoration: none;
color:#000;
ul,ol,li{
list-style:none;
overflow-x: hidden;
}
.clearfn:after{
content:"";
clear:both;
display: block;
overflow:hidden;
height:0;
visibility: hidden;
}
}
.mat-expansion-panel-body {
padding: 0px !important;
}
app-root{
height: 100%;
}
h1{
font-size: 16px;
}
.mat-expansion-indicator::after {
color: white;
}
.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;
}
//x轴滚动条隐藏
.example-sidenav-content {
overflow-x: hidden; overflow-y: auto;
}

20
src/test.ts

@ -0,0 +1,20 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

18
tsconfig.app.json

@ -0,0 +1,18 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}

26
tsconfig.json

@ -0,0 +1,26 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

18
tsconfig.spec.json

@ -0,0 +1,18 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

91
tslint.json

@ -0,0 +1,91 @@
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}

7996
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save