15 changed files with 430 additions and 12 deletions
@ -0,0 +1,28 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="scheme">协议</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="scheme" placeholder="请输入协议" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="host">主机/ip</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="host" placeholder="请输入主机/ip" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="port">端口</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input type="number" nz-input formControlName="port" placeholder="请输入端口" /> |
||||
</nz-input-group> |
||||
</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-file', |
||||
templateUrl: './file.component.html', |
||||
styleUrls: ['./file.component.scss'] |
||||
}) |
||||
export class FileComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
scheme: [null, [Validators.required]], |
||||
host: [null, [Validators.required]], |
||||
port: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>kafka works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-kafka', |
||||
templateUrl: './kafka.component.html', |
||||
styleUrls: ['./kafka.component.scss'] |
||||
}) |
||||
export class KafkaComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,92 @@
|
||||
<div class="box"> |
||||
<div class="topbox"> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch |
||||
formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构" |
||||
[(ngModel)]="defaultOrId" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree-select> |
||||
<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> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item> |
||||
<!-- <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="state">设备状态</nz-form-label> --> |
||||
<nz-form-control> |
||||
<nz-select formControlName="state" nzPlaceHolder="请选择设备状态"> |
||||
<nz-option [nzValue]="0" nzLabel="离线"></nz-option> |
||||
<nz-option [nzValue]="1" nzLabel="在线"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
|
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button nzType="primary" 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> |
||||
|
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'primary'" (click)="sendRequest('RestartApps')"> |
||||
重启识别程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'primary'" (click)="sendRequest('RestartMonitors')"> |
||||
重启监控程序 |
||||
</button> |
||||
</form> |
||||
|
||||
</div> |
||||
<nz-table #basicTable nzShowSizeChanger [nzData]="listOfData" [nzLoading]="isLoading" |
||||
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)" [nzShowPagination]='false' [nzPageSize]='10'> |
||||
<thead> |
||||
<tr> |
||||
<th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"> |
||||
</th> |
||||
<th>ip地址</th> |
||||
<th>所属油站</th> |
||||
<th>设备状态</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td [nzChecked]="setOfCheckedId.has(data.id)" [nzDisabled]="data.disabled" |
||||
(nzCheckedChange)="onItemChecked(data.id, $event)"></td> |
||||
<td>{{ data.hostIPAddress }}</td> |
||||
<td>{{ data.gasStationName }}</td> |
||||
<td> |
||||
<ng-container *ngIf="data.hubConnectionState == 'Disconnected'; else elseTemplate"> |
||||
<span style="color: red;">离线</span> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<span style="color: rgb(52, 204, 52);">在线</span> |
||||
</ng-template> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
<div class="pagination"> |
||||
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="num" [nzPageSize]="10" |
||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||
</nz-pagination> |
||||
<ng-template #totalTemplate let-total> 10条/页,共{{num}}条 </ng-template> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,17 @@
|
||||
.topbox { |
||||
form { |
||||
display: flex; |
||||
|
||||
nz-form-item { |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
button { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 250px; |
||||
} |
||||
} |
||||
@ -0,0 +1,171 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
|
||||
@Component({ |
||||
selector: 'app-status-monitoring', |
||||
templateUrl: './status-monitoring.component.html', |
||||
styleUrls: ['./status-monitoring.component.scss'] |
||||
}) |
||||
export class StatusMonitoringComponent implements OnInit { |
||||
|
||||
constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private message: NzMessageService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } |
||||
validateForm!: FormGroup; |
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
organization: [null], |
||||
state: [null] |
||||
}); |
||||
this.getAllOrganization() |
||||
|
||||
} |
||||
//获取所有组织机构
|
||||
nodes: any = [] |
||||
defaultOrId: string |
||||
defaultExpandedKeys = []; |
||||
getAllOrganization() { |
||||
let params = { |
||||
ContainsChildren: true, |
||||
pageSize: 9999 |
||||
} |
||||
this.http.get('/api/Organizations', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
console.log('组织机构列表', data) |
||||
data.items.forEach(element => { |
||||
element.key = element.id |
||||
element.title = element.name |
||||
// element.selectable = false
|
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.items)] |
||||
this.defaultOrId = this.nodes[0].id |
||||
this.validateForm.value.organization = this.defaultOrId |
||||
this.getConditionMonitoring() |
||||
}) |
||||
} |
||||
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.getConditionMonitoring() |
||||
} |
||||
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(); |
||||
} |
||||
this.validateForm.patchValue({ |
||||
organization: this.nodes[0].id, |
||||
}); |
||||
this.PageNumber = 1 |
||||
this.getConditionMonitoring() |
||||
} |
||||
listOfData: any |
||||
num: string |
||||
PageNumber: number = 1 |
||||
isLoading = false |
||||
//获取盒子状态
|
||||
getConditionMonitoring() { |
||||
let params = { |
||||
ContainsChildren: true, |
||||
OrganizationId: this.defaultOrId, |
||||
PageNumber: this.PageNumber, |
||||
PageSize: 10, |
||||
HubConnectionState: this.validateForm.value.state |
||||
} |
||||
this.isLoading = true |
||||
this.http.get('/api/EdgeDevices/Statuses', { params: params }).subscribe( |
||||
(data: any) => { |
||||
console.log(data) |
||||
this.isLoading = false |
||||
this.listOfData = data.items |
||||
this.num = data.totalCount |
||||
}, err => { |
||||
|
||||
} |
||||
) |
||||
} |
||||
pageChange($event) { |
||||
this.PageNumber = $event |
||||
this.getConditionMonitoring() |
||||
} |
||||
|
||||
|
||||
checked = false; |
||||
loading |
||||
indeterminate = false; |
||||
listOfCurrentPageData: readonly any[] = []; |
||||
setOfCheckedId = new Set<number>(); |
||||
updateCheckedSet(id: number, checked: boolean): void { |
||||
if (checked) { |
||||
this.setOfCheckedId.add(id); |
||||
} else { |
||||
this.setOfCheckedId.delete(id); |
||||
} |
||||
} |
||||
|
||||
onCurrentPageDataChange(listOfCurrentPageData: readonly any[]): void { |
||||
this.listOfCurrentPageData = listOfCurrentPageData; |
||||
this.refreshCheckedStatus(); |
||||
} |
||||
|
||||
refreshCheckedStatus(): void { |
||||
const listOfEnabledData = this.listOfCurrentPageData.filter(({ disabled }) => !disabled); |
||||
this.checked = listOfEnabledData.every(({ id }) => this.setOfCheckedId.has(id)); |
||||
this.indeterminate = listOfEnabledData.some(({ id }) => this.setOfCheckedId.has(id)) && !this.checked; |
||||
} |
||||
|
||||
onItemChecked(id: number, checked: boolean): void { |
||||
this.updateCheckedSet(id, checked); |
||||
this.refreshCheckedStatus(); |
||||
} |
||||
|
||||
onAllChecked(checked: boolean): void { |
||||
this.listOfCurrentPageData |
||||
.filter(({ disabled }) => !disabled) |
||||
.forEach(({ id }) => this.updateCheckedSet(id, checked)); |
||||
this.refreshCheckedStatus(); |
||||
} |
||||
|
||||
sendRequest(type): void { |
||||
|
||||
const requestData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id)); |
||||
|
||||
let strArr = [] |
||||
requestData.forEach(element => { |
||||
strArr.push(element.id) |
||||
}); |
||||
let body |
||||
this.loading = type; |
||||
body = { |
||||
edgeDeviceIds: strArr |
||||
} |
||||
this.http.patch('/api/EdgeDevices/Commands', body, { params: { command: type } }).subscribe({ |
||||
next: (data: any) => { |
||||
this.message.create('success', '通知边缘盒子成功，请过一段时间手动刷新尝试！'); |
||||
console.log(data) |
||||
if (data.failedItems.length != 0) { |
||||
data.failedItems.forEach(element => { |
||||
this.message.create('info', element.detail); |
||||
}); |
||||
} |
||||
this.setOfCheckedId.clear(); |
||||
this.refreshCheckedStatus(); |
||||
this.loading = null; |
||||
this.getConditionMonitoring() |
||||
}, |
||||
error: (err) => { |
||||
this.loading = null; |
||||
} |
||||
}) |
||||
|
||||
|
||||
} |
||||
} |
||||
Loading…
Reference in new issue