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,26 +1,122 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
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 { 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({ |
@Component({ |
||||||
selector: 'app-login', |
selector: 'app-login', |
||||||
templateUrl: './login.component.html', |
templateUrl: './login.component.html', |
||||||
styleUrls: ['./login.component.scss'] |
styleUrls: ['./login.component.scss'], |
||||||
|
|
||||||
}) |
}) |
||||||
export class LoginComponent implements OnInit { |
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(): void { |
ngOnInit() { |
||||||
// this.validateForm = this.fb.group({
|
this.validateForm = this.fb.group({ |
||||||
// userName: [null, [Validators.required]],
|
userName: [null, [Validators.required]], |
||||||
// password: [null, [Validators.required]],
|
password: [null, [Validators.required]], |
||||||
// remember: [null],
|
remember: [null], |
||||||
// autologin: [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 //这一步是回显后让勾选框为选中状态
|
||||||
} |
} |
||||||
|
|
||||||
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