22 changed files with 649 additions and 58 deletions
@ -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]] |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
@ -1 +1,70 @@ |
|||||||
<p>analysis-of-the-host works!</p> |
<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; |
||||||
|
} |
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { AnalysisOfTheHostComponent } from './analysis-of-the-host.component'; |
|
||||||
|
|
||||||
describe('AnalysisOfTheHostComponent', () => { |
|
||||||
let component: AnalysisOfTheHostComponent; |
|
||||||
let fixture: ComponentFixture<AnalysisOfTheHostComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ AnalysisOfTheHostComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(AnalysisOfTheHostComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -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: 359 B |
Loading…
Reference in new issue