70 changed files with 1713 additions and 208 deletions
@ -0,0 +1,128 @@ |
|||||||
|
<!-- <p>站点预案!</p> --> |
||||||
|
<div class="stationPlanBox" id="stationPlanBox"> |
||||||
|
<div class="orbox"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'组织机构'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="or"> |
||||||
|
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent |
||||||
|
[nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" |
||||||
|
[nzTreeTemplate]="nzTreeTemplate"[nzMultiple]="false"></nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate"> |
||||||
|
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt=""> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<img src="../../../assets/images/point.png" alt=""> |
||||||
|
</ng-template> |
||||||
|
<span>{{ node.title }}</span> |
||||||
|
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 " |
||||||
|
src="../../../assets/images/expand.png" alt=""> |
||||||
|
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0" |
||||||
|
src="../../../assets/images/unexpand.png" alt=""> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="stationList"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'站点管理'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="search"> |
||||||
|
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="linkman" placeholder="请输入联系人" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="phone" placeholder="请输入电话" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="btn"> |
||||||
|
<nz-form-control> |
||||||
|
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="btn"> |
||||||
|
<nz-form-control> |
||||||
|
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||||
|
[nzType]="'sync'"></i>重置</button> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="tablebox"> |
||||||
|
<div class="table"> |
||||||
|
<div nz-row class="th"> |
||||||
|
<div nz-col nzSpan="2" style="text-align: right;box-sizing: border-box;padding-right: 20px;"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="6"> |
||||||
|
加油站名称 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
区域 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
所属公司 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
联系人 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
联系电话 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
操作 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tbody"> |
||||||
|
<div nz-row class="tr" *ngFor="let item of list"> |
||||||
|
<div nz-col nzSpan="2" style="text-align: right;box-sizing: border-box;padding-right: 20px;"> |
||||||
|
<span class="ziying">自营</span> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="6"> |
||||||
|
中化山东省淄博市第6加油站 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
山东-淄博 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
中化某某公司 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
张三三 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
0566-5897888 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
<span class="look" (click)="look()">查看</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" |
||||||
|
nzShowQuickJumper></nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,137 @@ |
|||||||
|
.stationPlanBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px 24px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.orbox { |
||||||
|
height: 100%; |
||||||
|
width: 360px; |
||||||
|
margin-right: 40px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.or { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.3); |
||||||
|
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); |
||||||
|
margin-top: 12px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px 12px; |
||||||
|
|
||||||
|
nz-tree { |
||||||
|
background: none; |
||||||
|
color: #C4E2FC; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.stationList { |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.search { |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 22px; |
||||||
|
padding-right: 33px; |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
margin-top: 14px; |
||||||
|
margin-bottom: 22px; |
||||||
|
|
||||||
|
form { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
input { |
||||||
|
background: none; |
||||||
|
border: 1px solid #91CCFF; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.searchParams { |
||||||
|
width: 28%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 5%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.table { |
||||||
|
color: white; |
||||||
|
flex: 1; |
||||||
|
width: 96%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.th { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
background: rgba(35, 153, 255, 0.2); |
||||||
|
border: 1px solid rgba(35, 217, 255, 0.4); |
||||||
|
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset; |
||||||
|
color: #23D9FF; |
||||||
|
} |
||||||
|
|
||||||
|
.tbody { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.tr { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
border-bottom: 1px solid #0d3761; |
||||||
|
|
||||||
|
div { |
||||||
|
color: #91CCFF; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
|
||||||
|
.look { |
||||||
|
color: #36A2FF; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin-top: 26px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import { Component, OnInit, ViewChild } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { TreeService } from 'src/app/service/tree.service'; |
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||||
|
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
||||||
|
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
@Component({ |
||||||
|
selector: 'app-plan-admin', |
||||||
|
templateUrl: './plan-admin.component.html', |
||||||
|
styleUrls: ['./plan-admin.component.scss'] |
||||||
|
}) |
||||||
|
export class PlanAdminComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||||
|
constructor(private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
||||||
|
list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] |
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
name: [null], |
||||||
|
linkman: [null], |
||||||
|
phone: [null] |
||||||
|
}); |
||||||
|
this.getAllOrganization() |
||||||
|
} |
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
} |
||||||
|
resetForm(e: MouseEvent): void { |
||||||
|
e.preventDefault(); |
||||||
|
this.validateForm.reset(); |
||||||
|
for (const key in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[key].markAsPristine(); |
||||||
|
this.validateForm.controls[key].updateValueAndValidity(); |
||||||
|
} |
||||||
|
} |
||||||
|
//获取所有组织机构
|
||||||
|
nodes: any = [] |
||||||
|
nzExpandAll = false |
||||||
|
getAllOrganization() { |
||||||
|
this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { |
||||||
|
data.result.items.forEach(element => { |
||||||
|
element.key = element.id |
||||||
|
element.title = element.displayName |
||||||
|
}); |
||||||
|
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||||
|
this.nzExpandAll = true |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
look() { |
||||||
|
this.router.navigate(['/plan/petrolStation']) |
||||||
|
} |
||||||
|
nzExpandedKeys: any = [] |
||||||
|
activatedNode?: NzTreeNode; |
||||||
|
//点击tree节点
|
||||||
|
activeNode(data: NzFormatEmitEvent): void { |
||||||
|
this.activatedNode = data.node!; |
||||||
|
// console.log(data)
|
||||||
|
} |
||||||
|
|
||||||
|
expand(e, node) { |
||||||
|
e.stopPropagation() |
||||||
|
node.isExpanded = !node.isExpanded |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<!-- <p>get-out-of-line-details works!</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="titlebox"> |
||||||
|
<div class="title"> |
||||||
|
<div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}"> |
||||||
|
违规截图 |
||||||
|
<div class="border"></div> |
||||||
|
</div> |
||||||
|
<div (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}"> |
||||||
|
违规视频 |
||||||
|
<div class="border"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div *ngIf="selectedType == 'img'"> |
||||||
|
违规截图 |
||||||
|
</div> |
||||||
|
<div *ngIf="selectedType == 'video'"> |
||||||
|
违规视频 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
.box { |
||||||
|
width: 100%; |
||||||
|
height: 700px; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.titlebox { |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
background: #041d3c; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
div { |
||||||
|
width: 120px; |
||||||
|
height: 32px; |
||||||
|
text-align: center; |
||||||
|
line-height: 32px; |
||||||
|
font-family: sybold; |
||||||
|
font-size: 16px; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
margin: 0 18px; |
||||||
|
.border { |
||||||
|
position: absolute; |
||||||
|
bottom: -7px; |
||||||
|
left: -18px; |
||||||
|
width: 120px; |
||||||
|
height: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.selected { |
||||||
|
background: linear-gradient(90deg, #1662a9 0%, #25b7d4 50%, #1662a9 100%); |
||||||
|
|
||||||
|
.border { |
||||||
|
background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ant-modal-close { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px; |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-get-out-of-line-details', |
||||||
|
templateUrl: './get-out-of-line-details.component.html', |
||||||
|
styleUrls: ['./get-out-of-line-details.component.scss'] |
||||||
|
}) |
||||||
|
export class GetOutOfLineDetailsComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
selectedType:string = 'img' |
||||||
|
contentType(type){ |
||||||
|
this.selectedType = type |
||||||
|
} |
||||||
|
} |
||||||
@ -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,70 @@ |
|||||||
|
<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>加油站分析主机列表 |
||||||
|
<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.ip}}</td> |
||||||
|
<td class="operation"> |
||||||
|
<a (click)="edit(data)">编辑</a> |
||||||
|
<a (click)="delete(data)">删除</a> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,92 @@ |
|||||||
|
.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; |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
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'; |
||||||
|
@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() { |
||||||
|
this.http.get('/api/services/app/Organization/GetAll').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() |
||||||
|
}else{ |
||||||
|
this.message.info('只有加油站才可以增加主机'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//获得加油站的主机
|
||||||
|
getHost(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//新增分析主机
|
||||||
|
addHost() { |
||||||
|
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 = { |
||||||
|
// name: instance.validateForm.value.name,
|
||||||
|
// DisplayName: instance.validateForm.value.name,
|
||||||
|
// grantedPermissions: arr
|
||||||
|
} |
||||||
|
this.http.post('/api/services/app/Role/Create', body).subscribe(data => { |
||||||
|
resolve(data) |
||||||
|
this.message.create('success', '创建成功！'); |
||||||
|
// this.getAllRoles()
|
||||||
|
return true |
||||||
|
}) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.message.create('warning', '请填写完整！'); |
||||||
|
return false |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
const instance = modal.getContentComponent(); |
||||||
|
} |
||||||
|
edit(data) { |
||||||
|
|
||||||
|
} |
||||||
|
delete(data) { |
||||||
|
|
||||||
|
} |
||||||
|
listOfData: any[] = []; |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<p>edithost works!</p> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-edithost', |
||||||
|
templateUrl: './edithost.component.html', |
||||||
|
styleUrls: ['./edithost.component.scss'] |
||||||
|
}) |
||||||
|
export class EdithostComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1009 B |
|
After Width: | Height: | Size: 359 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1021 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in new issue