56 changed files with 1848 additions and 82 deletions
@ -0,0 +1,13 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://39.106.78.171:8906", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
}, |
||||
"/signalr": { |
||||
"target": "http://39.106.78.171:8906", |
||||
"secure": false, |
||||
"ws": true, |
||||
"logLevel": "debug" |
||||
} |
||||
} |
||||
@ -0,0 +1,37 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { Injectable } from '@angular/core'; |
||||
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; |
||||
import { CookieService } from 'ngx-cookie-service'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class AuthGuard implements CanActivate { |
||||
|
||||
constructor(private router: Router,private cookieService: CookieService) { |
||||
|
||||
} |
||||
|
||||
// 路由守卫
|
||||
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { |
||||
// console.log('路由守卫',next.data)
|
||||
// if(next.data.permission == 'xxxx'){
|
||||
// return true;
|
||||
// }
|
||||
return this.checkLogin(); |
||||
} |
||||
|
||||
checkLogin(): boolean { |
||||
console.log('xxxxxxxxxxxx') |
||||
// 判断本地有没有token
|
||||
const token = this.cookieService.get("token") || sessionStorage.getItem('token'); |
||||
|
||||
// 如果有token,允许访问
|
||||
if (token) { return true; } |
||||
|
||||
//如果没有token,跳转登录页
|
||||
this.router.navigate(['/login']); |
||||
|
||||
return false; |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@
|
||||
import { Injectable } from '@angular/core'; |
||||
import { |
||||
HttpClient, HttpInterceptor, HttpHandler, HttpRequest, |
||||
HttpErrorResponse |
||||
} from '@angular/common/http'; |
||||
import { throwError } from 'rxjs' |
||||
import { catchError } from 'rxjs/operators'; |
||||
import { Router } from '@angular/router' |
||||
import { CacheTokenService } from '../service/cache-token.service' |
||||
import { CookieService } from 'ngx-cookie-service'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
//baseurl
|
||||
// const baseurl = 'http://39.106.78.171:8008';
|
||||
|
||||
@Injectable() |
||||
export class BaseInterceptor implements HttpInterceptor { |
||||
|
||||
constructor(private router: Router, public token: CacheTokenService, private cookieService: CookieService, private message: NzMessageService) { } |
||||
|
||||
intercept(req: any, next: HttpHandler) { |
||||
|
||||
let params = req.params; |
||||
for (const key of req.params.keys()) { |
||||
if (params.get(key) === undefined || params.get(key) === null) { |
||||
params = params.delete(key, undefined); |
||||
} |
||||
} |
||||
req = req.clone({ params }); |
||||
// debugger
|
||||
// console.log('xxxxxx',req)
|
||||
let newReq = req.clone({ |
||||
url: req.hadBaseurl ? `${req.url}` : `${req.url}`, |
||||
}); |
||||
if (!req.cancelToken) { |
||||
/*获取token*/ |
||||
let token = this.cookieService.get("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) { |
||||
console.log('http错误', error) |
||||
// 用户认证失败返回登录页
|
||||
if (error.status === 401 || error.status === 614) { |
||||
this.token.delete() |
||||
sessionStorage.clear() |
||||
// window.localStorage.clear()
|
||||
localStorage.removeItem("isautologin") |
||||
this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/') |
||||
this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/') |
||||
this.message.create('error', `用户认证信息过期,请重新登录!`); |
||||
this.router.navigate(['/login']) |
||||
} |
||||
if (error.status === 403) { |
||||
this.message.create('error', `对不起,您无此权限!`); |
||||
} |
||||
if (error.status === 400) { |
||||
this.message.create('error', `请核对您的输入信息或格式是否正确!`); |
||||
} |
||||
|
||||
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); |
||||
}; |
||||
} |
||||
@ -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 }, |
||||
|
||||
]; |
||||
@ -1,33 +1,46 @@
|
||||
<div class="login" id="login"> |
||||
<div class="card"> |
||||
<h1 class="cardheader">欢迎登录</h1> |
||||
<h1 class="cardheader">加油站智能安全管理系统</h1> |
||||
|
||||
<!-- <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<h1 class="cardheader">加油站边缘主机管理系统</h1> |
||||
|
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入账号!"> |
||||
<nz-input-group nzPrefixIcon="user"> |
||||
<input required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" /> |
||||
<input required nz-input type="text" formControlName="userName" placeholder="请输入账号"/> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入密码!"> |
||||
<nz-input-group nzPrefixIcon="lock"> |
||||
<input required nz-input type="password" formControlName="password" placeholder="请输入密码" |
||||
[nzSize]="'small'" /> |
||||
<input required nz-input type="password" formControlName="password" placeholder="请输入密码"/> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button> |
||||
</form> --> |
||||
<p class="company">中化石油销售有限公司 北京安信科创软件有限公司 版权所有</p> |
||||
<div class="hint"> |
||||
<nz-form-item style="margin-bottom: 0;"> |
||||
<nz-form-control> |
||||
<label nz-checkbox formControlName="remember" [(ngModel)]="remember">记住密码</label> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<span class="forget" (click)="forget()">忘记密码?</span> |
||||
</div> |
||||
<nz-form-item style="margin-bottom: 0;"> |
||||
<nz-form-control> |
||||
<label class="autologin" formControlName="autologin" nz-checkbox [(ngModel)]="autologin">自动登录</label> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<button [nzLoading]="isLoading" nz-button class="login-form-button login-form-margin" |
||||
[nzType]="'primary'">登录</button> |
||||
</form> |
||||
<p class="company">北京安信科创软件有限公司 版权所有</p> |
||||
</div> |
||||
|
||||
|
||||
<div class="name"> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -1,26 +1,122 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { Router, ActivatedRoute } from '@angular/router' |
||||
import { CacheTokenService } from '../../service/cache-token.service'//引入服务
|
||||
import { CookieService } from 'ngx-cookie-service';//cookie插件
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { Base64 } from 'js-base64'; |
||||
import { NzNotificationService } from 'ng-zorro-antd/notification'; |
||||
|
||||
@Component({ |
||||
selector: 'app-login', |
||||
templateUrl: './login.component.html', |
||||
styleUrls: ['./login.component.scss'] |
||||
styleUrls: ['./login.component.scss'], |
||||
|
||||
}) |
||||
export class LoginComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
validateForm!: FormGroup; |
||||
constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService, private fb: FormBuilder, private message: NzMessageService) { } |
||||
|
||||
ngOnInit() { |
||||
this.validateForm = this.fb.group({ |
||||
userName: [null, [Validators.required]], |
||||
password: [null, [Validators.required]], |
||||
remember: [null], |
||||
autologin: [null], |
||||
}); |
||||
//如果本地储存了账号密码信息，那就回显在输入框
|
||||
let account = localStorage.getItem('account') |
||||
let password = localStorage.getItem('password') |
||||
if (account && password) { |
||||
this.validateForm.patchValue({ |
||||
userName: Base64.decode(localStorage.getItem('account')), |
||||
password: Base64.decode(localStorage.getItem('password')) |
||||
}); |
||||
this.remember = true //这一步是回显后让勾选框为选中状态
|
||||
} |
||||
//自动登录
|
||||
if (localStorage.getItem('isautologin') == 'true') { |
||||
this.submitForm() |
||||
this.autologin = true //这一步是回显后让勾选框为选中状态
|
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
// this.validateForm = this.fb.group({
|
||||
// userName: [null, [Validators.required]],
|
||||
// password: [null, [Validators.required]],
|
||||
// remember: [null],
|
||||
// autologin: [null],
|
||||
// });
|
||||
} |
||||
|
||||
validateForm!: FormGroup; |
||||
submitForm() { |
||||
errmsg: string = ''; //错误信息
|
||||
|
||||
|
||||
|
||||
//跳转注册页面
|
||||
toRegister() { |
||||
this.router.navigate(['/register']) |
||||
} |
||||
|
||||
|
||||
//记住密码
|
||||
rememberInfo() { |
||||
// 判断用户是否勾选记住密码，如果勾选，在本地储存中储存登录信息
|
||||
if (this.remember) { |
||||
localStorage.setItem("account", Base64.encode(this.validateForm.value.userName)) |
||||
localStorage.setItem("password", Base64.encode(this.validateForm.value.password)) |
||||
} |
||||
} |
||||
//自动登录
|
||||
autoLogin() { |
||||
if (this.autologin) { |
||||
localStorage.setItem("isautologin", 'true') |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
remember: any//记住密码
|
||||
autologin: any//自动登录
|
||||
isLoading = false; |
||||
messages: any |
||||
encryptedAccessToken: any |
||||
submitForm(): void { |
||||
|
||||
if (!this.remember) { |
||||
localStorage.removeItem("account") |
||||
localStorage.removeItem("password") |
||||
} |
||||
if (!this.autologin) { |
||||
localStorage.removeItem("isautologin") |
||||
} |
||||
|
||||
|
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
if (!this.validateForm.valid) { |
||||
this.message.create('error', `请输入账号密码`); |
||||
return |
||||
} |
||||
this.isLoading = true; |
||||
this.http.post('/api/TokenAuth/Authenticate', { |
||||
userNameOrEmailAddress: this.validateForm.value.userName, |
||||
password: this.validateForm.value.password |
||||
}).subscribe( |
||||
(data: any) => { |
||||
sessionStorage.setItem("token", data.result.accessToken); |
||||
sessionStorage.setItem("encryptedAccessToken", data.result.encryptedAccessToken); |
||||
this.cookieService.set("token", data.result.accessToken, null, '/'); |
||||
this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/'); |
||||
this.router.navigate(['/system/organization']) |
||||
this.message.create('success', `登录成功`); |
||||
}, |
||||
(err) => { |
||||
this.isLoading = false; |
||||
this.message.create('error', err.error.error.details); |
||||
} |
||||
) |
||||
} |
||||
|
||||
forget() { |
||||
this.message.create('warning', `请联系管理员`); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import { Injectable } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { CookieService } from 'ngx-cookie-service'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class CacheTokenService { |
||||
|
||||
constructor(private http: HttpClient, private cookieService: CookieService) { } |
||||
|
||||
public timer: number | undefined; |
||||
|
||||
//刷新token令牌定时器
|
||||
startUp = (): void => { |
||||
window.clearInterval(this.timer) |
||||
this.timer = window.setInterval(() => { |
||||
var token = this.cookieService.get("token"); |
||||
var refreshToken = this.cookieService.get("refreshToken"); |
||||
this.http.post('/api/CompanyAccount/RefreshToken', { |
||||
token: token, |
||||
refreshToken: refreshToken |
||||
}).subscribe((data: any) => { |
||||
sessionStorage.setItem("token", data.token); |
||||
this.cookieService.set("token", data.token, undefined, '/'); |
||||
this.cookieService.set("refreshToken", data.refreshToken, undefined, '/'); |
||||
}) |
||||
}, 18 * 60 * 1000) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//删除定时器
|
||||
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,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,25 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="ip" placeholder="请输入ip" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="code" placeholder="请输入编号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,23 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-addcamera', |
||||
templateUrl: './addcamera.component.html', |
||||
styleUrls: ['./addcamera.component.scss'] |
||||
}) |
||||
export class AddcameraComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
ip: [null, [Validators.required]], |
||||
code: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="ip" placeholder="请输入ip" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,3 @@
|
||||
.ant-form-item{ |
||||
margin-bottom: 0; |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
|
||||
@Component({ |
||||
selector: 'app-addhost', |
||||
templateUrl: './addhost.component.html', |
||||
styleUrls: ['./addhost.component.scss'] |
||||
}) |
||||
export class AddhostComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
ip: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,103 @@
|
||||
<div class="bigbox" id="hostbox"> |
||||
<div class="orbox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>组织机构列表</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||
</nz-input-group> |
||||
</div> |
||||
</div> |
||||
<div class="treeTitle"> |
||||
<span>组织机构</span> |
||||
</div> |
||||
<div class="treebox"> |
||||
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll" |
||||
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" |
||||
[nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
</div> |
||||
</ng-template> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||
class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="hostListbox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 分析主机列表 |
||||
<span class="yellowspan">（请从左侧选择加油站）</span> |
||||
</span> |
||||
</div> |
||||
<div class="righttop" *ngIf="selectedOilStation"> |
||||
<button nz-button nzType="primary" (click)="addHost()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增分析主机</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th>ip</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td>{{data.hostIPAddress}}</td> |
||||
<td class="operation"> |
||||
<a (click)="edit(data)" style="margin-right: 12px;">编辑</a> |
||||
<a (click)="delete(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
<!-- <div class="topbox" style="margin-top: 20px;"> |
||||
<div class="lefttop"> |
||||
<span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 摄像头列表 |
||||
</span> |
||||
</div> |
||||
<div class="righttop" *ngIf="selectedOilStation"> |
||||
<button nz-button nzType="primary" (click)="addCamera()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增摄像头</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<nz-table #basicTable2 [nzData]="listOfDataCamera" [nzShowPagination]='false' [nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th>名称</th> |
||||
<th>ip</th> |
||||
<th>编号</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable2.data"> |
||||
<td>{{data.name}}</td> |
||||
<td>{{data.ipAdress}}</td> |
||||
<td>{{data.code}}</td> |
||||
<td class="operation"> |
||||
<a (click)="editCamera(data)" style="margin-right: 12px;">编辑</a> |
||||
<a (click)="deleteCamera(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,93 @@
|
||||
.bigbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
|
||||
.orbox { |
||||
width: 375px; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.lefttop { |
||||
span { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
.yellowspan { |
||||
color: rgb(240, 176, 37); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.treeTitle { |
||||
width: 100%; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
color: #000D21; |
||||
box-sizing: border-box; |
||||
padding-left: 30px; |
||||
padding-right: 180px; |
||||
background: rgba(145, 204, 255, 0.2); |
||||
border: 1px solid rgba(145, 204, 255, 0.2); |
||||
} |
||||
|
||||
.treebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
border: 1px solid rgba(145, 204, 255, 0.2); |
||||
border-top: 0px; |
||||
box-sizing: border-box; |
||||
padding: 10px 6px; |
||||
tr{ |
||||
th,td{ |
||||
text-align: center!important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.nodebox { |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.hostListbox { |
||||
flex: 1; |
||||
margin-left: 26px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.tablebox { |
||||
margin-top: 16px; |
||||
} |
||||
@ -0,0 +1,280 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { AddhostComponent } from './addhost/addhost.component'; |
||||
import { AddcameraComponent } from './addcamera/addcamera.component'; |
||||
import { EdithostComponent } from './edithost/edithost.component'; |
||||
import { EditcameraComponent } from './editcamera/editcamera.component'; |
||||
@Component({ |
||||
selector: 'app-analysis-of-the-host', |
||||
templateUrl: './analysis-of-the-host.component.html', |
||||
styleUrls: ['./analysis-of-the-host.component.scss'] |
||||
}) |
||||
export class AnalysisOfTheHostComponent implements OnInit { |
||||
|
||||
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } |
||||
ngOnInit(): void { |
||||
this.getAllOrganization() |
||||
} |
||||
|
||||
|
||||
//获取所有组织机构
|
||||
searchValue = ''; |
||||
nzExpandAll = false; |
||||
totalCount: string |
||||
getAllOrganization() { |
||||
let OrganizationUnitId = '' |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true" |
||||
} |
||||
this.http.get('/api/services/app/Organization/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
data.result.items.forEach(element => { |
||||
element.key = element.id |
||||
element.title = element.displayName |
||||
element.selectable = false |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||
this.defaultExpandedKeys = [...this.defaultExpandedKeys] |
||||
}) |
||||
} |
||||
|
||||
|
||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||
|
||||
defaultExpandedKeys = []; |
||||
|
||||
nodes: any[] = [] |
||||
nzSelectedKeys: any[] = [] |
||||
selectedOilStation: any |
||||
nzClick(event: NzFormatEmitEvent): void { |
||||
console.log(event.node.origin); |
||||
if (event.node.origin['isGasStation']) {//如果点击的是加油站才生效
|
||||
this.nzSelectedKeys[0] = event.node.origin.id |
||||
this.nzSelectedKeys = [...this.nzSelectedKeys] |
||||
this.selectedOilStation = event.node.origin |
||||
this.getHost() |
||||
// this.getCamera()
|
||||
} else { |
||||
this.message.info('只有加油站才可以增加主机'); |
||||
} |
||||
} |
||||
|
||||
//获得加油站的主机
|
||||
listOfData: any[] = []; |
||||
getHost() { |
||||
this.http.get('/api/services/app/EdgeDevice/GetAll', { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: '0', |
||||
MaxResultCount: '100', |
||||
} |
||||
}).subscribe((data: any) => { |
||||
console.log('主机列表', data.result.items) |
||||
this.listOfData = data.result.items |
||||
}) |
||||
} |
||||
|
||||
|
||||
//获得加油站摄像头
|
||||
listOfDataCamera: any[] = []; |
||||
getCamera() { |
||||
this.http.get('/api/services/app/Camera/GetAll', { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: '0', |
||||
MaxResultCount: '100', |
||||
} |
||||
}).subscribe((data: any) => { |
||||
// console.log('摄像头列表', data)
|
||||
this.listOfDataCamera = data.result.items |
||||
}) |
||||
} |
||||
|
||||
|
||||
ngAfterViewInit(): void { |
||||
|
||||
} |
||||
|
||||
//新增分析主机
|
||||
addHost() { |
||||
console.log(this.selectedOilStation) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增加油站主机', |
||||
nzContent: AddhostComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
hostIPAddress: instance.validateForm.value.ip, |
||||
organizationUnitId: this.selectedOilStation.id |
||||
} |
||||
this.http.post('/api/services/app/EdgeDevice/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
this.getHost() |
||||
return true |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
edit(data) { |
||||
console.log(data) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑加油站主机', |
||||
nzContent: EdithostComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
ip: data.hostIPAddress |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
data.hostIPAddress = instance.validateForm.value.ip, |
||||
this.http.put('/api/services/app/EdgeDevice/Update', data).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '修改成功！'); |
||||
this.getHost() |
||||
return true |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
delete(item) { |
||||
console.log(item) |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.name}这个主机吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/EdgeDevice/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功！'); |
||||
this.getHost() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消' |
||||
}); |
||||
} |
||||
|
||||
|
||||
//摄像头
|
||||
addCamera() { |
||||
console.log(this.selectedOilStation) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增加油站摄像头', |
||||
nzContent: AddcameraComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
ipAdress: instance.validateForm.value.ip, |
||||
code: instance.validateForm.value.code, |
||||
name: instance.validateForm.value.name, |
||||
// description: "",
|
||||
} |
||||
this.http.post('/api/services/app/Camera/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
this.getCamera() |
||||
return true |
||||
}, err => { |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
editCamera(data) { |
||||
|
||||
console.log(data) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑加油站摄像头', |
||||
nzContent: EditcameraComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
data: data |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
data.name = instance.validateForm.value.name |
||||
data.code = instance.validateForm.value.code |
||||
data.ipAdress = instance.validateForm.value.ip |
||||
this.http.put('/api/services/app/Camera/Update', data).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '编辑成功！'); |
||||
this.getCamera() |
||||
return true |
||||
}, err => { |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
deleteCamera(item) { |
||||
console.log(item) |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.name}这个摄像头吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Camera/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功！'); |
||||
this.getCamera() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消' |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="ip" placeholder="请输入ip" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="code" placeholder="请输入编号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,25 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
|
||||
@Component({ |
||||
selector: 'app-editcamera', |
||||
templateUrl: './editcamera.component.html', |
||||
styleUrls: ['./editcamera.component.scss'] |
||||
}) |
||||
export class EditcameraComponent implements OnInit { |
||||
@Input() data: any |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
let datacopy = JSON.parse(JSON.stringify(this.data)) |
||||
this.validateForm = this.fb.group({ |
||||
name: [datacopy.name, [Validators.required]], |
||||
ip: [datacopy.ipAdress, [Validators.required]], |
||||
code: [datacopy.code, [Validators.required]] |
||||
}); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="ip" nz-input type="text" formControlName="ip" placeholder="请输入ip" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,23 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
|
||||
@Component({ |
||||
selector: 'app-edithost', |
||||
templateUrl: './edithost.component.html', |
||||
styleUrls: ['./edithost.component.scss'] |
||||
}) |
||||
export class EdithostComponent implements OnInit { |
||||
|
||||
@Input() ip: any |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
ip: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,37 @@
|
||||
<!-- <p>系统管理页面</p> --> |
||||
<nz-layout> |
||||
<nz-sider [nzWidth]='300'> |
||||
<div class="logo"> |
||||
<img style="width: 154px;" src="../../../assets/images/logo2.png" alt=""> |
||||
</div> |
||||
<div class="headPortrait"> |
||||
<div class="photograph"> |
||||
<img src="../../../assets/images/userbig.png" alt=""> |
||||
</div> |
||||
<span>Administrator</span> |
||||
<span><img src="../../../assets/images/icon/admin.png" alt=""> 管理员</span> |
||||
</div> |
||||
<div class="nav"> |
||||
<ul> |
||||
<li [routerLink]="['/system/organization']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/organization.png" alt="">组织机构管理</li> |
||||
<li [routerLink]="['/system/host']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/host.png" alt="">分析主机管理</li> |
||||
</ul> |
||||
</div> |
||||
</nz-sider> |
||||
<nz-layout> |
||||
<nz-header> |
||||
<span>Hey，欢迎登录加油站智能安全管理系统</span> |
||||
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'> |
||||
<i nz-icon nzType="setting"></i> |
||||
</a> |
||||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
<ul nz-menu nzSelectable> |
||||
<li nz-menu-item (click)="signOut()">退出</li> |
||||
</ul> |
||||
</nz-dropdown-menu> |
||||
</nz-header> |
||||
<nz-content> |
||||
<router-outlet></router-outlet> |
||||
</nz-content> |
||||
</nz-layout> |
||||
</nz-layout> |
||||
@ -0,0 +1,79 @@
|
||||
nz-layout { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #fff; |
||||
font-size: 16px !important; |
||||
} |
||||
|
||||
nz-sider { |
||||
background: #001B3B; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow-y: auto; |
||||
|
||||
.logo { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.headPortrait { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin-top: 46px; |
||||
margin-bottom: 46px; |
||||
.photograph { |
||||
// width: 140px; |
||||
// height: 140px; |
||||
// border: 4px solid #FFFFFF; |
||||
// opacity: 1; |
||||
// border-radius: 32px; |
||||
} |
||||
|
||||
span { |
||||
margin-top: 18px; |
||||
} |
||||
} |
||||
|
||||
.nav { |
||||
ul { |
||||
li { |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: left; |
||||
margin-bottom: 16px; |
||||
box-sizing: border-box; |
||||
padding-left: 26%; |
||||
|
||||
img { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
|
||||
.router-link-active { |
||||
background: linear-gradient(90deg, rgba(0, 13, 33, 0) 0%, #2399FF 52%, rgba(0, 13, 33, 0) 100%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
nz-header { |
||||
height: 56px; |
||||
background: #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 16px; |
||||
} |
||||
|
||||
nz-content { |
||||
background: #F2F2F2; |
||||
box-sizing: border-box; |
||||
padding: 16px; |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router } from '@angular/router'; |
||||
|
||||
@Component({ |
||||
selector: 'app-navigation', |
||||
templateUrl: './navigation.component.html', |
||||
styleUrls: ['./navigation.component.scss'] |
||||
}) |
||||
export class NavigationComponent implements OnInit { |
||||
|
||||
constructor(private router: Router) { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
signOut() { |
||||
this.router.navigate(['/login']) |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<!-- <nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="code" placeholder="请输入编码" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<label nz-checkbox formControlName="isGasStation">是否为加油站</label> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-addor', |
||||
templateUrl: './addor.component.html', |
||||
styleUrls: ['./addor.component.scss'] |
||||
}) |
||||
export class AddorComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
// code: [null, [Validators.required]],
|
||||
isGasStation: [false] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="datacopy.displayName" nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<!-- <nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="datacopy.code" nz-input type="text" formControlName="code" placeholder="请输入编码" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<label [(ngModel)]="datacopy.isGasStation" nz-checkbox formControlName="isGasStation">是否为加油站</label> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,30 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-editor', |
||||
templateUrl: './editor.component.html', |
||||
styleUrls: ['./editor.component.scss'] |
||||
}) |
||||
export class EditorComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
datacopy:any |
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
// code: [null, [Validators.required]],
|
||||
isGasStation: [] |
||||
}); |
||||
this.datacopy = JSON.parse(JSON.stringify(this.data))
|
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,52 @@
|
||||
<div class="orbox" id="orbox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>组织机构列表</span> |
||||
<span><img style="vertical-align: top;" src="../../../assets/images/icon/orgrey.png" alt=""> |
||||
{{totalCount}}个单位</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> --> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入单位" [(ngModel)]="searchValue" /> |
||||
</nz-input-group> |
||||
<button nz-button nzType="primary" (click)="addOr()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="treeTitle"> |
||||
<span>组织机构</span> |
||||
<span>操作</span> |
||||
</div> |
||||
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" |
||||
[nzExpandAll]="nzExpandAll" [nzExpandedKeys]="defaultExpandedKeys" [nzTreeTemplate]="nzTreeTemplate" nzDraggable |
||||
nzBlockNode (nzOnDrop)="nzEvent($event)" [nzBeforeDrop]="beforeDrop" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
<span class="operation"> |
||||
<span (click)="addOr(node)" *ngIf="!node.origin.isGasStation">新增</span> |
||||
<span (click)="editOr(node)">编辑</span> |
||||
<span (click)="deleteOr(node)">删除</span> |
||||
</span> |
||||
</div> |
||||
</ng-template> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</div> |
||||
@ -0,0 +1,78 @@
|
||||
.orbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 700px; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.treeTitle { |
||||
width: 700px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
color: #000D21; |
||||
box-sizing: border-box; |
||||
padding-left: 30px; |
||||
padding-right: 180px; |
||||
background: rgba(145, 204, 255, 0.2); |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.nodebox { |
||||
font-size: 15px; |
||||
|
||||
} |
||||
|
||||
.operation { |
||||
position: absolute; |
||||
right: 0; |
||||
|
||||
span { |
||||
margin-left: 40px; |
||||
} |
||||
|
||||
span:nth-child(1), |
||||
span:nth-child(2) { |
||||
color: #2399FF; |
||||
} |
||||
|
||||
span:nth-child(3) { |
||||
color: rgba(0, 13, 33, 0.48); |
||||
} |
||||
} |
||||
@ -0,0 +1,315 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { AddorComponent } from './addor/addor.component'; |
||||
import { EditorComponent } from './editor/editor.component'; |
||||
|
||||
import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree'; |
||||
import { Observable, of } from 'rxjs'; |
||||
import { delay } from 'rxjs/operators'; |
||||
@Component({ |
||||
selector: 'app-organization', |
||||
templateUrl: './organization.component.html', |
||||
styleUrls: ['./organization.component.scss'] |
||||
}) |
||||
export class OrganizationComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null] |
||||
}); |
||||
this.getAllOrganization() |
||||
} |
||||
//搜索框提交
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
} |
||||
|
||||
//获取所有组织机构
|
||||
searchValue = ''; |
||||
nzExpandAll = false; |
||||
totalCount: string |
||||
|
||||
allOrList: any |
||||
getAllOrganization() { |
||||
let OrganizationUnitId = '' |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true" |
||||
} |
||||
this.http.get('/api/services/app/Organization/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
data.result.items.forEach(element => { |
||||
element.key = element.id |
||||
element.title = element.displayName |
||||
element.selectable = false |
||||
}); |
||||
this.allOrList = data.result.items |
||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||
this.defaultExpandedKeys = [...this.defaultExpandedKeys] |
||||
}) |
||||
} |
||||
|
||||
|
||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||
|
||||
defaultExpandedKeys = []; |
||||
|
||||
nodes: any[] = [] |
||||
|
||||
|
||||
addOr(node?: any) { |
||||
console.log(node) |
||||
const modal = this.modal.create({ |
||||
nzTitle: node ? '新增组织机构' : '新增一级组织机构', |
||||
nzContent: AddorComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
parentId: node ? Number(node.key) : null, |
||||
// code: instance.validateForm.value.code,
|
||||
displayName: instance.validateForm.value.name, |
||||
isGasStation: instance.validateForm.value.isGasStation |
||||
} |
||||
this.http.post('/api/services/app/Organization/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
this.nzTreeComponent.getExpandedNodeList().forEach((item) => { |
||||
this.defaultExpandedKeys.push(item.key) |
||||
}) |
||||
this.getAllOrganization() |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '创建失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
|
||||
} |
||||
editOr(node) { |
||||
// console.log(node)
|
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑组织机构', |
||||
nzContent: EditorComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
data: node.origin, |
||||
}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
id: node.origin.id, |
||||
parentId: node.origin.parentId, |
||||
// code: instance.validateForm.value.code,
|
||||
displayName: instance.validateForm.value.name, |
||||
isGasStation: instance.validateForm.value.isGasStation |
||||
} |
||||
this.http.put('/api/services/app/Organization/Update', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '编辑成功！'); |
||||
this.nzTreeComponent.getExpandedNodeList().forEach((item) => { |
||||
this.defaultExpandedKeys.push(item.key) |
||||
}) |
||||
this.getAllOrganization() |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '编辑失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
deleteOr(item) { |
||||
console.log(item) |
||||
if (item.origin.children && item.origin.children.length != 0) { |
||||
this.message.create('warning', '请先删除所有子节点'); |
||||
} else { |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.title}这个机构吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Organization/Delete', { |
||||
params: { |
||||
Id: item.origin.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.nzTreeComponent.getExpandedNodeList().forEach((item) => { |
||||
this.defaultExpandedKeys.push(item.key) |
||||
}) |
||||
this.getAllOrganization() |
||||
this.message.create('success', '删除成功！'); |
||||
}) |
||||
}, |
||||
nzCancelText: '取消', |
||||
nzOnCancel: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
nzEvent(event: NzFormatEmitEvent): void { |
||||
console.log('event', event) |
||||
if (this.isDrag) { |
||||
let parentId |
||||
if (this.pos == 0) {//目标节点内部
|
||||
parentId = event.node.key |
||||
} else { |
||||
if (event.node.level == 0) { |
||||
parentId = null |
||||
} else { |
||||
parentId = event.node.origin.parentId |
||||
} |
||||
} |
||||
|
||||
let body = { |
||||
id: event.dragNode.key, |
||||
parentId: parentId, |
||||
// code: instance.validateForm.value.code,
|
||||
displayName: event.dragNode.origin.displayName, |
||||
isGasStation: event.dragNode.origin.isGasStation |
||||
} |
||||
this.http.put('/api/services/app/Organization/Update', body).subscribe(data => { |
||||
this.message.create('success', '拖拽成功！'); |
||||
this.nzTreeComponent.getExpandedNodeList().forEach((item) => { |
||||
this.defaultExpandedKeys.push(item.key) |
||||
}) |
||||
this.getAllOrganization() |
||||
return true |
||||
}, err => { |
||||
this.message.create('warning', '拖拽失败'); |
||||
return false |
||||
}) |
||||
|
||||
|
||||
// console.log('this.allOrList', this.allOrList)
|
||||
// let orders = {}
|
||||
// let originalData = JSON.parse(JSON.stringify(this.allOrList || [])) //tree原始数据
|
||||
// let targetNodeData = []//拖动移入节点的数据，用于遍历求出放在该数组的第几位
|
||||
//找到需要重新排序的数组
|
||||
// if (this.pos == 0) {
|
||||
// originalData.forEach(item => {
|
||||
// if (item.parentId == event.node.key) {
|
||||
// targetNodeData.push(item)
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// if (event.node.origin.parentId) {//如果拖动目标为非一级节点
|
||||
// originalData.forEach(item => {
|
||||
// if (item.parentId == event.node.origin.parentId) {
|
||||
// targetNodeData.push(item)
|
||||
// }
|
||||
// })
|
||||
// } else {//如果拖动目标为一级节点
|
||||
// originalData.forEach(item => {
|
||||
// if (!item.parentId) {
|
||||
// targetNodeData.push(item)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// let idArr = []
|
||||
// targetNodeData.forEach(i => {
|
||||
// idArr.push(i.id)
|
||||
// })
|
||||
// if (this.pos == 0 && event.node.origin.children.length == 1) {
|
||||
// // console.log("移入,没有兄弟")
|
||||
// let key = event.dragNode.key
|
||||
// orders[key] = 0
|
||||
// parentId = event.node.key
|
||||
// } else {
|
||||
|
||||
// let array = []
|
||||
// targetNodeData.forEach(item => {
|
||||
// if (item.id != event.dragNode.key) { //将拖动项先移除掉
|
||||
// array.push(item)
|
||||
// }
|
||||
// })
|
||||
// if (event.dragNode.isEnd[event.dragNode.isEnd.length - 1]) { //如果移入到最后一个
|
||||
// // console.log("最后")
|
||||
// array.push(event.dragNode.origin)
|
||||
// } else if (event.dragNode.isStart[event.dragNode.isStart.length - 1]) {//如果移入到第一个
|
||||
// // console.log("第一")
|
||||
// array.unshift(event.dragNode.origin)
|
||||
// } else {//如果移入中间位置
|
||||
// // console.log("中间")
|
||||
// array.splice(event.node.origin.order, 0, event.dragNode.origin)
|
||||
// }
|
||||
// array.forEach((item, key) => {
|
||||
// orders[item.id] = key
|
||||
// })
|
||||
// console.log("移入,多个兄弟",orders)
|
||||
// }
|
||||
|
||||
// let obj = {
|
||||
// id: event.dragNode.origin.id,
|
||||
// parentId: parentId,
|
||||
// orders: orders
|
||||
// }
|
||||
|
||||
// this.http.put("/api/DisposalNodes/Sort", obj).subscribe(data => {
|
||||
// const config = new MatSnackBarConfig();
|
||||
// config.verticalPosition = 'top';
|
||||
// config.duration = 3000
|
||||
// this.snackBar.open('排序成功', '确定', config)
|
||||
// this.refurbishTreeData()
|
||||
// })
|
||||
|
||||
|
||||
|
||||
} |
||||
} |
||||
isDrag //是否可以拖动
|
||||
pos//放置位置
|
||||
beforeDrop = (arg: NzFormatBeforeDropEvent) => { |
||||
console.log('arg', arg) |
||||
if (arg.node.level === 0) {//如果为数据节点则不允许拖到一级节点
|
||||
this.message.create('warning', '不允许拖拽到一级节点'); |
||||
this.isDrag = false |
||||
return of(false); |
||||
} else { |
||||
this.isDrag = true |
||||
this.pos = arg.pos |
||||
return of(true) |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { NgModule } from '@angular/core'; |
||||
import { OrganizationComponent } from './organization/organization.component'; |
||||
import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component'; |
||||
|
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'organization', component: OrganizationComponent }, |
||||
{ path: 'host', component: AnalysisOfTheHostComponent }, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class SystemRoutingModule { } |
||||
@ -0,0 +1,55 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { SystemRoutingModule } from './system-management-routing.module'; |
||||
import { OrganizationComponent } from './organization/organization.component'; |
||||
import { NavigationComponent } from './navigation/navigation.component'; |
||||
import { NzLayoutModule } from 'ng-zorro-antd/layout'; |
||||
import { NzIconModule } from 'ng-zorro-antd/icon'; |
||||
import { NzTableModule } from 'ng-zorro-antd/table'; |
||||
import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; |
||||
import { NzPaginationModule } from 'ng-zorro-antd/pagination'; |
||||
import { NzInputModule } from 'ng-zorro-antd/input'; |
||||
import { NzButtonModule } from 'ng-zorro-antd/button'; |
||||
import { NzFormModule } from 'ng-zorro-antd/form'; |
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
||||
import { NzModalModule } from 'ng-zorro-antd/modal'; |
||||
import { NzSelectModule } from 'ng-zorro-antd/select'; |
||||
import { NzMessageModule } from 'ng-zorro-antd/message'; |
||||
import { NzTreeModule } from 'ng-zorro-antd/tree'; |
||||
import { NzSpinModule } from 'ng-zorro-antd/spin'; |
||||
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; |
||||
import { AddorComponent } from './organization/addor/addor.component'; |
||||
import { EditorComponent } from './organization/editor/editor.component'; |
||||
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; |
||||
import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component'; |
||||
import { AddhostComponent } from './analysis-of-the-host/addhost/addhost.component'; |
||||
import { EdithostComponent } from './analysis-of-the-host/edithost/edithost.component'; |
||||
import { AddcameraComponent } from './analysis-of-the-host/addcamera/addcamera.component'; |
||||
import { EditcameraComponent } from './analysis-of-the-host/editcamera/editcamera.component'; |
||||
@NgModule({ |
||||
declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
SystemRoutingModule, |
||||
NzLayoutModule, |
||||
NzIconModule, |
||||
NzTableModule, |
||||
NzDropDownModule, |
||||
NzPaginationModule, |
||||
NzInputModule, |
||||
NzButtonModule, |
||||
NzFormModule, |
||||
FormsModule, |
||||
ReactiveFormsModule, |
||||
NzModalModule, |
||||
NzSelectModule, |
||||
NzMessageModule, |
||||
NzTreeModule, |
||||
NzSpinModule, |
||||
NzTreeSelectModule, |
||||
NzCheckboxModule |
||||
], |
||||
entryComponents :[AddorComponent,EditorComponent,AddhostComponent,EdithostComponent,AddcameraComponent,EditcameraComponent] |
||||
|
||||
}) |
||||
export class SystemManagementModule { } |
||||
|
After Width: | Height: | Size: 1007 KiB |
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 359 B |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 387 B |
|
After Width: | Height: | Size: 484 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 404 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
Loading…
Reference in new issue