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