223 changed files with 42167 additions and 0 deletions
@ -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 |
||||
@ -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 |
||||
@ -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" |
||||
} |
||||
@ -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'. |
||||
@ -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 } })); |
||||
} |
||||
}; |
||||
@ -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)); |
||||
}); |
||||
}); |
||||
@ -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>; |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
{ |
||||
"extends": "../tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../out-tsc/e2e", |
||||
"module": "commonjs", |
||||
"target": "es5", |
||||
"types": [ |
||||
"jasmine", |
||||
"jasminewd2", |
||||
"node" |
||||
] |
||||
} |
||||
} |
||||
@ -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 |
||||
}); |
||||
}; |
||||
@ -0,0 +1,62 @@
|
||||
{ |
||||
"name": "anxin119", |
||||
"version": "0.0.0", |
||||
"scripts": { |
||||
"ng": "ng", |
||||
"start": "ng serve --proxy-config proxy.config.json --open ", |
||||
"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" |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,7 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://39.106.78.171:8008", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -0,0 +1,38 @@
|
||||
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, |
||||
canActivate: [AuthGuard],},//守卫验证
|
||||
|
||||
{path:'lockscreen', |
||||
component:LockscreenComponent, |
||||
canActivate: [AuthGuard],}//守卫验证
|
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forRoot(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class AppRoutingModule { } |
||||
@ -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!'); |
||||
}); |
||||
}); |
||||
@ -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('已重启定时器') |
||||
} |
||||
) |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
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 { HomeComponent } from './home/home.component'; |
||||
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, |
||||
HomeComponent |
||||
], |
||||
imports: [ |
||||
BrowserModule, |
||||
AppRoutingModule, |
||||
BrowserAnimationsModule, |
||||
MatButtonModule, |
||||
MatCheckboxModule, |
||||
MatSidenavModule, |
||||
NavigationModule, |
||||
MatIconModule, |
||||
PagesModule, |
||||
FormsModule, |
||||
HttpClientModule |
||||
], |
||||
providers: [httpInterceptorProviders, CacheTokenService,TreeService], |
||||
bootstrap: [AppComponent] |
||||
}) |
||||
export class AppModule { } |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<app-navigation></app-navigation> |
||||
@ -0,0 +1,4 @@
|
||||
|
||||
// .mat-drawer-inner-container{ |
||||
// overflow-x: hidden; |
||||
// } |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,18 @@
|
||||
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() { |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
@ -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); |
||||
}; |
||||
} |
||||
@ -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) |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -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 }, |
||||
|
||||
]; |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@
|
||||
export interface Data { |
||||
token:string, |
||||
refreshToken:string, |
||||
expires: number, |
||||
realName:string |
||||
} |
||||
|
||||
export interface windows { |
||||
token:string |
||||
} |
||||
export enum isno { |
||||
"是", |
||||
"否" |
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
<!-- <app-tabbar></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]="" routerLinkActive="router-link-active">基本信息</li> --> |
||||
<!-- basicinfo --> |
||||
<li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li> |
||||
<!-- plan --> |
||||
<li [routerLink]="['/datacollection/plan']" routerLinkActive="router-link-active">平面图</li> |
||||
<!-- allaround --> |
||||
<li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li> |
||||
<!-- fire-fighting-device --> |
||||
<li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active">消防设施</li> |
||||
<!-- key-site --> |
||||
<li [routerLink]="['/datacollection/key-site']" routerLinkActive="router-link-active">重点部位</li> |
||||
<!-- function-division --> |
||||
<li [routerLink]="['/datacollection/function-division']" routerLinkActive="router-link-active">功能分区</li> |
||||
<!-- realistic-picture --> |
||||
<li [routerLink]="['/datacollection/realistic-picture']" routerLinkActive="router-link-active">实景图</li> |
||||
<!-- uploading-cad --> |
||||
<li [routerLink]="['/datacollection/uploadingCAD']" routerLinkActive="router-link-active">上传CAD图</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"> |
||||
<app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar> |
||||
<router-outlet></router-outlet> |
||||
</div> |
||||
|
||||
</mat-sidenav-container> |
||||
@ -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 |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,44 @@
|
||||
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(){ |
||||
this.navmenus.organization = false; |
||||
this.navmenus.un = false;//单位类型管理
|
||||
this.navmenus.unit = false;//单位类型
|
||||
this.navmenus.unitmessage = false;//单位基本信息模板
|
||||
this.navmenus.fireelement = false;//消防要素管理
|
||||
this.navmenus.power = false;//权限管理
|
||||
this.navmenus.datapower = false;//数据权限管理
|
||||
this.navmenus.menuspower = false;//导航菜单管理
|
||||
this.navmenus.role = false;//角色管理
|
||||
this.navmenus.user = false;//用户管理
|
||||
this.navmenus.matlibrary = false;//素材库管理
|
||||
} |
||||
|
||||
|
||||
darktheme = false; |
||||
switchTheme(dark) { |
||||
this.darktheme = dark; |
||||
// alert(this.darkTheme);
|
||||
} |
||||
defaulttheme(){ |
||||
console.log(111) |
||||
this.darktheme = false |
||||
} |
||||
redtheme(){ |
||||
console.log(222) |
||||
this.darktheme = true |
||||
} |
||||
} |
||||
@ -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 { } |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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']) |
||||
} |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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/userdata']) |
||||
|
||||
|
||||
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 |
||||
}); |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -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 {}
|
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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() { |
||||
} |
||||
|
||||
} |
||||
@ -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 { } |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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() { |
||||
} |
||||
|
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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) |
||||
} |
||||
|
||||
} |
||||
@ -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] |
||||
} |
||||
} |
||||
@ -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 |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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();
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -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); |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>allaround works!</p> |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { AllaroundComponent } from './allaround.component'; |
||||
|
||||
describe('AllaroundComponent', () => { |
||||
let component: AllaroundComponent; |
||||
let fixture: ComponentFixture<AllaroundComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ AllaroundComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(AllaroundComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-allaround', |
||||
templateUrl: './allaround.component.html', |
||||
styleUrls: ['./allaround.component.scss'] |
||||
}) |
||||
export class AllaroundComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
@ -0,0 +1,30 @@
|
||||
table { |
||||
width: 100%; |
||||
th,td{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 12px; |
||||
} |
||||
} |
||||
mat-tree{ |
||||
width: 500px; |
||||
button{ |
||||
display: block; |
||||
float: right; |
||||
} |
||||
mat-tree-node{ |
||||
position: relative; |
||||
.deleted{ |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
.create{ |
||||
position: absolute; |
||||
right: 40px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,139 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
export interface authority { |
||||
id: string, |
||||
name: string, |
||||
value: string, |
||||
order: number, |
||||
parentId: string |
||||
} |
||||
@Component({ |
||||
selector: 'app-authority', |
||||
templateUrl: './authority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class AuthorityComponent implements OnInit { |
||||
|
||||
data:any =[] |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
constructor(private http: HttpClient,public dialog: MatDialog,private tree:TreeService) { } |
||||
|
||||
//重新拉去列表函数
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.newdata = this.tree.toTree(data) |
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
//初始化视图
|
||||
ngOnInit() { |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.dataSource.data = this.tree.toTree(data) |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//创建按钮
|
||||
createauthority(value){ |
||||
const dialogRef = this.dialog.open(CreateAuthority, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.newdata = [] |
||||
this.getlist() |
||||
}
|
||||
} |
||||
); |
||||
} |
||||
//删除按钮
|
||||
deleted(authority){ |
||||
var isdeleted = confirm("确定要删除此用户吗？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.newdata = [] |
||||
this.http.delete(`/api/Permissions/${authority.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
//创建组件
|
||||
@Component({ |
||||
selector: 'createauthority', |
||||
templateUrl: './createauthority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class CreateAuthority { |
||||
myControl = new FormControl(); |
||||
options: string[] = ['0', '1','2', '3','4', '5','6', '7','8']; |
||||
|
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateAuthority>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
if(value.parentId == "null"){ |
||||
value.parentId = null |
||||
} |
||||
//编写请求创建用户接口(value是参数)//并且刷新一下
|
||||
this.http.post( |
||||
'/api/Permissions',
|
||||
{ |
||||
id: '', |
||||
name: value.name, |
||||
value: value.value, |
||||
order: Number(value.order), |
||||
parentId: this.data.id |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(data);
|
||||
}, |
||||
err=>{ |
||||
alert("请填写正确格式") |
||||
} |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@
|
||||
<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> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="value" name="value" |
||||
required |
||||
ngModel #name="ngModel" placeholder="权限值"> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<mat-form-field class="example-full-width"> |
||||
<input type="text" placeholder="权限顺序" aria-label="Number" matInput [matAutocomplete]="auto1" name="order" ngModel #order="ngModel"> |
||||
<mat-autocomplete #auto1="matAutocomplete"> |
||||
<mat-option *ngFor="let option of options" [value]="option"> |
||||
{{option}} |
||||
</mat-option> |
||||
</mat-autocomplete> |
||||
</mat-form-field> |
||||
|
||||
<!-- <mat-form-field> |
||||
<input matInput id="parentId" name="parentId" type='text' |
||||
required minlength="3" |
||||
ngModel #organizationId="ngModel" placeholder="父级编号"> |
||||
</mat-form-field> |
||||
--> |
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -0,0 +1 @@
|
||||
<p>basicinfo works!</p> |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BasicinfoComponent } from './basicinfo.component'; |
||||
|
||||
describe('BasicinfoComponent', () => { |
||||
let component: BasicinfoComponent; |
||||
let fixture: ComponentFixture<BasicinfoComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BasicinfoComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BasicinfoComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-basicinfo', |
||||
templateUrl: './basicinfo.component.html', |
||||
styleUrls: ['./basicinfo.component.scss'] |
||||
}) |
||||
export class BasicinfoComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
<mat-card> |
||||
<mat-card-title>简单的卡片</mat-card-title> |
||||
<mat-card-subtitle>卡片的字幕</mat-card-subtitle> |
||||
<mat-card-content>原来爱情的世界很大,大得可以装下一百种委屈;原来爱情的世界很小,小得三个人就会窒息。</mat-card-content> |
||||
<img mat-card-image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579480490&di=f80c114e78ea7a439c19cc7f1622227f&src=http://pic1.win4000.com/wallpaper/2017-11-17/5a0e94afc140c.jpg"> |
||||
<mat-card-actions> |
||||
<button mat-raised-button color="primary">我是按钮</button> |
||||
</mat-card-actions> |
||||
<mat-card-footer> |
||||
我要被固定在卡片底部 |
||||
</mat-card-footer> |
||||
</mat-card> |
||||
@ -0,0 +1,10 @@
|
||||
|
||||
mat-card{ |
||||
width: 300px; |
||||
height: 600px; |
||||
img{ |
||||
width: 300px; |
||||
height: 300px; |
||||
padding: 16px; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CardComponent } from './card.component'; |
||||
|
||||
describe('CardComponent', () => { |
||||
let component: CardComponent; |
||||
let fixture: ComponentFixture<CardComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CardComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CardComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-card', |
||||
templateUrl: './card.component.html', |
||||
styleUrls: ['./card.component.scss'] |
||||
}) |
||||
export class CardComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -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> |
||||
@ -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 |
||||
} |
||||
@ -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} |
||||
) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
@ -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; |
||||
}; |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>fire-fighting-device works!</p> |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FireFightingDeviceComponent } from './fire-fighting-device.component'; |
||||
|
||||
describe('FireFightingDeviceComponent', () => { |
||||
let component: FireFightingDeviceComponent; |
||||
let fixture: ComponentFixture<FireFightingDeviceComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FireFightingDeviceComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FireFightingDeviceComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-fire-fighting-device', |
||||
templateUrl: './fire-fighting-device.component.html', |
||||
styleUrls: ['./fire-fighting-device.component.scss'] |
||||
}) |
||||
export class FireFightingDeviceComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,45 @@
|
||||
<div mat-dialog-title>编辑消防要素模板</div> |
||||
|
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素模板名称" [(ngModel)]="fireName" |
||||
name='name' required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- <mat-checkbox>全选</mat-checkbox> --> |
||||
<label>请选择消防要素</label> |
||||
</div> |
||||
|
||||
<div class="tree"> |
||||
<mat-tree [dataSource]="newDataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
<mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button type="button" |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,36 @@
|
||||
<div class="magin"> |
||||
消防要素模板 |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='establish()'> |
||||
创建模板 |
||||
</button> |
||||
</div> |
||||
<table mat-table [dataSource]="aLLFireFighting" class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>模板名称</th> |
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
||||
编辑 |
||||
</button> |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='enable(element)' |
||||
*ngIf="!element.enabled"> |
||||
启用 |
||||
</button> |
||||
<button mat-raised-button color="warn" class="marginLeft" (click)='prohibit(element)' |
||||
*ngIf="element.enabled"> |
||||
禁用 |
||||
</button> |
||||
<button mat-raised-button color="warn" class="marginLeft" (click)='delete(element.id)'> |
||||
删除 |
||||
</button> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
@ -0,0 +1,18 @@
|
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
.magin { |
||||
margin: 10px; |
||||
font-weight: 600; |
||||
} |
||||
.marginLeft { |
||||
margin-left: 5px; |
||||
} |
||||
.tree { |
||||
height: 450px; |
||||
overflow: auto; |
||||
} |
||||
@ -0,0 +1,300 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
|
||||
@Component({ |
||||
selector: 'app-fire-fighting-template', |
||||
templateUrl: './fire-fighting-template.component.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class FireFightingTemplateComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getAllFireFighting() |
||||
} |
||||
|
||||
displayedColumns: string[] = ['name','operation']; |
||||
aLLFireFighting:any; //所有消防要素模板
|
||||
|
||||
//获取所有消防要素模板
|
||||
getAllFireFighting () { |
||||
this.http.get('/api/FireCategories').subscribe(data=>{ |
||||
this.aLLFireFighting=data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防模块窗口
|
||||
establish () { |
||||
let dialogRef = this.dialog.open(NewFireFighting,
|
||||
{ |
||||
width:'600px', |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getAllFireFighting()} |
||||
});
|
||||
} |
||||
|
||||
//编辑消防模块窗口
|
||||
edit (e) { |
||||
let dialogRef = this.dialog.open(EditFireClassification,
|
||||
{ |
||||
width:'600px', |
||||
data:{e} |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getAllFireFighting()} |
||||
});
|
||||
} |
||||
|
||||
//启用
|
||||
enable (e) { |
||||
this.http.put(`/api/FireCategories/${e.id}`,{ |
||||
id:e.id, |
||||
name:e.name, |
||||
enabled:true, |
||||
fireElements:e.fireElements |
||||
}).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
|
||||
//禁用
|
||||
prohibit (e) { |
||||
this.http.put(`/api/FireCategories/${e.id}`,{ |
||||
id:e.id, |
||||
name:e.name, |
||||
enabled:false, |
||||
fireElements:e.fireElements |
||||
}).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
|
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm('您确定要删除吗') |
||||
if (isTrue) { |
||||
this.http.delete(`/api/FireCategories/${e}`).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防分类窗口
|
||||
@Component({ |
||||
selector: 'app-newFireFighting', |
||||
templateUrl: './newFireFighting.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class NewFireFighting { |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag, |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<NewFireFighting>) {} |
||||
|
||||
ngOnInit(): void {
|
||||
this.rendering() |
||||
} |
||||
|
||||
|
||||
|
||||
checkedAll:boolean=false; //全选
|
||||
checkedList:any=[]; //选中的消防要素
|
||||
|
||||
//渲染Tree
|
||||
rendering () { |
||||
this.http.get('/api/FireElements').subscribe((data:any)=>{ |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
this.treeControl.expandAll() |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//change时判断是否选中
|
||||
changed (e,id) { |
||||
if (e.checked) { |
||||
this.checkedList.push(id) |
||||
} else if (e.checked == false) { |
||||
this.checkedList.splice(this.checkedList.findIndex(item => item === id), 1) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//提交创建
|
||||
onSubmit (e) { |
||||
if(this.checkedList.length) { |
||||
this.http.post('/api/FireCategories',{ |
||||
name:e.name, |
||||
enabled:true, |
||||
fireElements:this.checkedList |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
}else { |
||||
alert('请选择消防要素') |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//编辑消防分类窗口
|
||||
@Component({ |
||||
selector: 'app-editingFire', |
||||
templateUrl: './editingFireControl.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class EditFireClassification { |
||||
newdata = []; |
||||
|
||||
private transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag, |
||||
checked:node.checked, |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this.transformer, node => node.level, node => node.expandable, node => node.children); |
||||
newDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<EditFireClassification>, |
||||
@Inject(MAT_DIALOG_DATA) public newdate) {} |
||||
|
||||
ngOnInit(): void {
|
||||
this.fireID=this.newdate.e.id |
||||
this.fireName=this.newdate.e.name |
||||
this.rendering() |
||||
} |
||||
|
||||
|
||||
|
||||
fireID:any; //模板id
|
||||
fireName:any; //模板name
|
||||
checkedAll:boolean=false; //全选
|
||||
checkedList:any=[]; //选中的消防要素
|
||||
|
||||
//渲染Tree
|
||||
rendering () { |
||||
this.http.get(`/api/FireCategories/${this.newdate.e.id}/FireElements`).subscribe((data:any)=>{ |
||||
data.forEach(item=>{ |
||||
if (item.checked === true) { |
||||
this.checkedList.push(item.id) |
||||
} |
||||
}) |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.newDataSource.data = this.newdata; |
||||
this.treeControl.expandAll() |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//change时判断是否选中
|
||||
changed (e,id) { |
||||
if (e.checked) { |
||||
this.checkedList.push(id) |
||||
} else if (e.checked == false) { |
||||
this.checkedList.splice(this.checkedList.findIndex(item => item === id), 1) |
||||
} |
||||
} |
||||
|
||||
//提交编辑修改
|
||||
onSubmit (e) { |
||||
if (this.checkedList.length) { |
||||
this.http.put(`/api/FireCategories/${this.fireID}`,{ |
||||
id:this.fireID, |
||||
name:e.name, |
||||
enabled:this.newdate.e.enabled, |
||||
fireElements:this.checkedList |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} else{ |
||||
alert('请选择消防要素') |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
<div mat-dialog-title>创建消防要素模板</div> |
||||
|
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素模板名称" ngModel name='name' required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- <mat-checkbox>全选</mat-checkbox> --> |
||||
<label>请选择消防要素</label> |
||||
</div> |
||||
|
||||
<div class="tree"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
<mat-checkbox (change)='changed($event,node.id)'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button type="button" |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<mat-checkbox (change)='changed($event,node.id)'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,41 @@
|
||||
<div mat-dialog-title>编辑消防要素</div> |
||||
<div> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素名称" [(ngModel)]="fireName" name='name' required> |
||||
</mat-form-field> |
||||
|
||||
<div class="maginTop"> |
||||
<label>是否统计:</label> |
||||
<mat-radio-group class="example-radio-group" [(ngModel)]="data.computed" name='radio' required> |
||||
<mat-radio-button class="example-radio-button" [value]="true"> |
||||
是 |
||||
</mat-radio-button> |
||||
<mat-radio-button class="example-radio-button" [value]="false"> |
||||
否 |
||||
</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select required [(ngModel)]="data.tag" name="tag" placeholder='消防要素录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,41 @@
|
||||
<div mat-dialog-title>创建消防要素</div> |
||||
<div> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素名称"ngModel name='name' required> |
||||
</mat-form-field> |
||||
|
||||
<div class="maginTop"> |
||||
<label>是否统计:</label> |
||||
<mat-radio-group class="example-radio-group" ngModel name='radio' required> |
||||
<mat-radio-button class="example-radio-button" [value]="true"> |
||||
是 |
||||
</mat-radio-button> |
||||
<mat-radio-button class="example-radio-button" [value]="false"> |
||||
否 |
||||
</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select required ngModel name="tag" placeholder='消防要素录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,52 @@
|
||||
<div class="Box"> |
||||
<div class="left"> |
||||
<div class="magin"> |
||||
消防要素 |
||||
</div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<div class="float"> |
||||
<button mat-icon-button class="create" (click)="establish(node)" title="创建"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)" title="编辑"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)" title="删除"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<div class="float"> |
||||
<button mat-icon-button class="create" (click)="establish(node)" title="创建"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)" title="编辑"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)" title="删除"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<app-fire-fighting-template></app-fire-fighting-template> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,34 @@
|
||||
|
||||
.magin { |
||||
margin: 18px 0 17px 10px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.Box { |
||||
width: 100%; |
||||
display: flex; |
||||
padding-left: 10px; |
||||
.right { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.mat-tree-node { |
||||
width: 400px; |
||||
position: relative; |
||||
.float { |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
} |
||||
.maginTop { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.example-radio-group { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.example-radio-button { |
||||
margin: 5px; |
||||
} |
||||
@ -0,0 +1,226 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
|
||||
@Component({ |
||||
selector: 'app-fire-protection-elements', |
||||
templateUrl: './fire-protection-elements.component.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class FireProtectionElementsComponent implements OnInit { |
||||
data:any =[] |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getAllfireControl() |
||||
} |
||||
|
||||
//获取所有消防要素
|
||||
getAllfireControl () { |
||||
this.http.get('/api/FireElements').subscribe( |
||||
(data:any)=>{ |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
} |
||||
|
||||
) |
||||
} |
||||
|
||||
//更新数据后重新渲染Tree
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/FireElements').subscribe( |
||||
(data:any)=>{ |
||||
this.newdata = [] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
|
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
} |
||||
) |
||||
} |
||||
|
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//打开创建窗口
|
||||
establish (e) { |
||||
let dialogRef = this.dialog.open(Establish,
|
||||
{ |
||||
data:e |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getlist()} |
||||
});
|
||||
} |
||||
|
||||
//打开编辑窗口
|
||||
edit (e) { |
||||
let dialogRef = this.dialog.open(EditingFireControl,
|
||||
{ |
||||
data:e |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getlist()} |
||||
});
|
||||
} |
||||
|
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm(`您确定要删除${e.name}吗`) |
||||
if (isTrue) { |
||||
this.http.delete(`/api/FireElements/${e.id}`).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//创建窗口组件
|
||||
@Component({ |
||||
selector: 'app-establish', |
||||
templateUrl: './establish.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class Establish { |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<Establish>, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
ngOnInit(): void {} |
||||
|
||||
order:any; //创建消防要素order排序值
|
||||
|
||||
//提交创建消防要素
|
||||
onSubmit (e) { |
||||
if(this.data.children == '') { |
||||
this.order=0 |
||||
} else if (this.data.children.length) { |
||||
this.order=this.data.children[this.data.children.length-1].order+1 |
||||
} |
||||
this.http.post('/api/FireElements',{ |
||||
name:e.name, |
||||
order:this.order, |
||||
computed:e.radio, |
||||
tag:e.tag, |
||||
parentId:this.data.id |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑窗口组件
|
||||
@Component({ |
||||
selector: 'app-editingFireControl', |
||||
templateUrl: './editingFireControl.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class EditingFireControl { |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<EditingFireControl>, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
ngOnInit(): void { |
||||
this.fireName=this.data.name |
||||
} |
||||
|
||||
fireName:any; //消防要素name
|
||||
|
||||
//编辑提交
|
||||
onSubmit (e) { |
||||
this.http.put(`/api/FireElements/${this.data.id}`,{ |
||||
id:this.data.id, |
||||
name:this.fireName, |
||||
order:this.data.order, |
||||
computed:this.data.computed, |
||||
tag:this.data.tag, |
||||
parentId:this.data.parentId |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>function-division works!</p> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue