65 changed files with 120 additions and 3903 deletions
@ -1,25 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { UnitEditComponent } from './unit-edit.component'; |
||||
|
||||
describe('UnitEditComponent', () => { |
||||
let component: UnitEditComponent; |
||||
let fixture: ComponentFixture<UnitEditComponent>; |
||||
|
||||
beforeEach(async () => { |
||||
await TestBed.configureTestingModule({ |
||||
declarations: [ UnitEditComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(UnitEditComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
@ -1,78 +1,71 @@
|
||||
.orbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
font-size: 15px; |
||||
} |
||||
.lefttop { |
||||
text-align: left; |
||||
margin-bottom: 10px; |
||||
border-bottom: 1px solid #eee; |
||||
span { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
|
||||
|
||||
.righttop { |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-form-item { |
||||
margin: 0 5px; |
||||
height: 32px; |
||||
} |
||||
} |
||||
.lefttop { |
||||
text-align: left; |
||||
border-bottom: 1px solid #eee; |
||||
box-sizing: border-box; |
||||
padding-bottom: 15px; |
||||
|
||||
span { |
||||
color: #000D21; |
||||
font-size: 16px; |
||||
} |
||||
.translate{ |
||||
text-align: left; |
||||
// padding: 0 10px; |
||||
margin: 20px 0; |
||||
button{ |
||||
margin: 0 10px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
margin-top: 20px; |
||||
|
||||
input, |
||||
nz-select { |
||||
width: 220px; |
||||
margin-right: 10px; |
||||
text-align: left; |
||||
} |
||||
.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; |
||||
|
||||
button { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.nodebox { |
||||
font-size: 15px; |
||||
|
||||
} |
||||
|
||||
.translate { |
||||
text-align: left; |
||||
margin: 20px 0; |
||||
|
||||
button { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.caozuo { |
||||
span{ |
||||
margin: 0 5px; |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
a { |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
} |
||||
|
@ -1,11 +0,0 @@
|
||||
<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> |
@ -1,3 +0,0 @@
|
||||
.ant-form-item{ |
||||
margin-bottom: 0; |
||||
} |
@ -1,21 +0,0 @@
|
||||
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,73 +0,0 @@
|
||||
<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' [nzLoading]="isLoading"> |
||||
<thead> |
||||
<tr> |
||||
<th>ip</th> |
||||
<th>配置状态</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td>{{data.hostIPAddress}}</td> |
||||
<td>!配置状态!</td> |
||||
<td class="operation"> |
||||
<a (click)="edit(data)" style="margin-right: 12px;">编辑</a> |
||||
<a (click)="config(data)" style="margin-right: 12px;">配置</a> |
||||
<a (click)="download(data)" style="margin-right: 12px;">下载设备编号</a> |
||||
<a class="red" (click)="delete(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</div> |
||||
</div> |
@ -1,100 +0,0 @@
|
||||
.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; |
||||
} |
||||
|
||||
.red:hover{ |
||||
color: red; |
||||
} |
@ -1,204 +0,0 @@
|
||||
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 { EdithostComponent } from './edithost/edithost.component'; |
||||
import { Router } from '@angular/router'; |
||||
@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 router: Router, 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 params = { |
||||
ContainsChildren: true, |
||||
PageSize: 9999 |
||||
} |
||||
this.http.get('/api/Organizations', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.totalCount |
||||
data.items.forEach(element => { |
||||
element.key = element.id |
||||
element.title = element.name |
||||
element.selectable = false |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.items)] |
||||
this.defaultExpandedKeys = [this.nodes[0].id] |
||||
this.defaultExpandedKeys = [...this.defaultExpandedKeys] |
||||
}) |
||||
} |
||||
|
||||
|
||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||
|
||||
defaultExpandedKeys = []; |
||||
|
||||
nodes: any[] = [] |
||||
nzSelectedKeys: any[] = [] |
||||
selectedOilStation: any |
||||
nzClick(event: NzFormatEmitEvent): void { |
||||
if (event.node.origin['isGasStation']) {//如果点击的是加油站才生效
|
||||
this.nzSelectedKeys[0] = event.node.origin.id |
||||
this.nzSelectedKeys = [...this.nzSelectedKeys] |
||||
this.selectedOilStation = event.node.origin |
||||
console.log(this.selectedOilStation) |
||||
this.getHost() |
||||
} else { |
||||
this.message.info('只有加油站才可以增加主机'); |
||||
} |
||||
} |
||||
|
||||
//获得加油站的主机
|
||||
listOfData: any[] = []; |
||||
isLoading = false |
||||
getHost() { |
||||
this.isLoading = true |
||||
this.http.get('/api/EdgeDevices', { |
||||
params: { |
||||
ContainsChildren: true, |
||||
OrganizationId: this.selectedOilStation.id, |
||||
PageSize: 999 |
||||
} |
||||
}).subscribe((data: any) => { |
||||
console.log('主机列表', data.items) |
||||
this.isLoading = false |
||||
this.listOfData = data.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, |
||||
OrganizationId: this.selectedOilStation.id |
||||
} |
||||
this.http.post('/api/EdgeDevices', 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/EdgeDevices/${data.id}`, 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/EdgeDevices/${item.id}`).subscribe(data => { |
||||
this.message.create('success', '删除成功!'); |
||||
this.getHost() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消' |
||||
}); |
||||
} |
||||
|
||||
config(data) { |
||||
this.router.navigate([`/system/host/camera`], { queryParams: { 'hostId': data.id, 'orId': this.selectedOilStation.id } }) |
||||
} |
||||
|
||||
|
||||
download(data) { |
||||
console.log(data) |
||||
let params = { |
||||
edgeDeviceId: data.id |
||||
} |
||||
const httpOptions = { |
||||
responseType: 'blob' as 'json', |
||||
params: params |
||||
}; |
||||
this.http.get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions).subscribe({ |
||||
next: (data: any) => { |
||||
console.log('文件',data) |
||||
// 文件名中有中文 则对文件名进行转码
|
||||
const link = document.createElement('a'); |
||||
const blob = new Blob([data], { type: 'application/octet-stream' }); |
||||
link.setAttribute('href', window.URL.createObjectURL(blob)); |
||||
link.setAttribute('download', `.deviceid`); |
||||
link.style.visibility = 'hidden'; |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
document.body.removeChild(link); |
||||
}, |
||||
error: (err) => { |
||||
console.log(err) |
||||
} |
||||
}) |
||||
} |
||||
} |
@ -1,11 +0,0 @@
|
||||
<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> |
@ -1,23 +0,0 @@
|
||||
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]] |
||||
}); |
||||
} |
||||
} |
@ -1,182 +0,0 @@
|
||||
<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 == 'UpdateStates'" (click)="sendRequest('UpdateStates')"> |
||||
更新识别程序服务状态 |
||||
</button> --> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'UpdateApps'" (click)="sendRequest('UpdateApps')"> |
||||
更新识别程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateImages')"> |
||||
更新镜像 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateModels')"> |
||||
更新模型 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateMonitors')"> |
||||
更新监控程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'file'" (click)="file()"> |
||||
更新监控程序配置文件 |
||||
</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> |
||||
<th>识别程序更新状态</th> |
||||
<!-- <th>识别程序更新状态开始时间</th> |
||||
<th>识别程序更新状态结束时间</th> --> |
||||
<th>镜像更新状态</th> |
||||
<!-- <th>镜像更新状态开始时间</th> |
||||
<th>镜像更新状态结束时间</th> --> |
||||
|
||||
<th>模型更新状态</th> |
||||
|
||||
<th>监控程序更新状态</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> |
||||
<!-- 识别程序 --> |
||||
<td> |
||||
<p> |
||||
<span *ngIf="data.appUpdatingState == 'Never'">未更新</span> |
||||
<span *ngIf="data.appUpdatingState == 'Updating'">更新中</span> |
||||
<span *ngIf="data.appUpdatingState == 'Updated'">已更新</span> |
||||
</p> |
||||
<p> |
||||
开始时间:{{data.appUpdatingStartedTime ? (data.appUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") :'/'}} |
||||
|
||||
</p> |
||||
<p> |
||||
结束时间:{{data.appUpdatingFinishedTime ? (data.appUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") :'/'}} |
||||
</p> |
||||
</td> |
||||
<!-- 镜像 --> |
||||
<td> |
||||
<p> |
||||
<span *ngIf="data.imageUpdatingState == 'Never'">未更新</span> |
||||
<span *ngIf="data.imageUpdatingState == 'Updating'">更新中</span> |
||||
<span *ngIf="data.imageUpdatingState == 'Updated'">已更新</span> |
||||
</p> |
||||
<p> |
||||
{{data.imageUpdatingStartedTime ? (data.imageUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
<p> |
||||
{{data.imageUpdatingFinishedTime ? (data.imageUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
</td> |
||||
<!-- 模型 --> |
||||
<td> |
||||
<p> |
||||
<span *ngIf="data.modelsUpdatingState == 'Never'">未更新</span> |
||||
<span *ngIf="data.modelsUpdatingState == 'Updating'">更新中</span> |
||||
<span *ngIf="data.modelsUpdatingState == 'Updated'">已更新</span> |
||||
</p> |
||||
<p> |
||||
{{data.modelsUpdatingStartedTime ? (data.modelsUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
<p> |
||||
{{data.modelsUpdatingFinishedTime ? (data.modelsUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
</td> |
||||
<!-- 监控程序 --> |
||||
<td> |
||||
<p> |
||||
<span *ngIf="data.monitorUpdatingState == 'Never'">未更新</span> |
||||
<span *ngIf="data.monitorUpdatingState == 'Updating'">更新中</span> |
||||
<span *ngIf="data.monitorUpdatingState == 'Updated'">已更新</span> |
||||
<span *ngIf="data.monitorUpdatingState == 'UpdatingTimeout'">更新超时</span> |
||||
</p> |
||||
<p> |
||||
{{data.monitorUpdatingStartedTime ? (data.monitorUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
<p> |
||||
{{data.monitorUpdatingFinishedTime ? (data.monitorUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") : |
||||
'/'}} |
||||
</p> |
||||
</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> |
@ -1,17 +0,0 @@
|
||||
.topbox { |
||||
form { |
||||
display: flex; |
||||
|
||||
nz-form-item { |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
button { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 250px; |
||||
} |
||||
} |
@ -1,270 +0,0 @@
|
||||
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'; |
||||
import { FileComponent } from './file/file.component'; |
||||
import { ModelComponent } from './model/model.component'; |
||||
@Component({ |
||||
selector: 'app-condition-monitoring', |
||||
templateUrl: './condition-monitoring.component.html', |
||||
styleUrls: ['./condition-monitoring.component.scss'] |
||||
}) |
||||
export class ConditionMonitoringComponent 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 |
||||
if (type != 'UpdateModels') { |
||||
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; |
||||
} |
||||
}) |
||||
} else { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '选择更新模型类型', |
||||
nzContent: ModelComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
// console.log(instance.validateForm.value.type)
|
||||
if (instance.validateForm.valid) { |
||||
body = { |
||||
edgeDeviceIds: strArr, |
||||
modelNames: instance.validateForm.value.type |
||||
} |
||||
await new Promise(resolve => { |
||||
this.http.patch('/api/EdgeDevices/Commands', body, { params: { command: type } }).subscribe({ |
||||
next: (data: any) => { |
||||
resolve(data) |
||||
this.message.create('success', '通知边缘盒子成功,请过一段时间手动刷新尝试!'); |
||||
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() |
||||
return true |
||||
}, |
||||
error: (err) => { |
||||
resolve(err) |
||||
this.loading = null; |
||||
return false |
||||
} |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
|
||||
} |
||||
|
||||
file() { |
||||
const requestData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id)); |
||||
let strArr = [] |
||||
requestData.forEach(element => { |
||||
strArr.push(element.id) |
||||
}); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '配置文件', |
||||
nzContent: FileComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 500, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
let body = { |
||||
edgeDeviceIds: strArr, |
||||
scheme: instance.validateForm.value.scheme, |
||||
host: instance.validateForm.value.host, |
||||
port: instance.validateForm.value.port, |
||||
maxRetries: instance.validateForm.value.maxRetries |
||||
} |
||||
await new Promise(resolve => { |
||||
this.loading = 'file' |
||||
this.http.patch('/api/EdgeDevices/Commands/PushMonitorSettingsJson', body).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.getConditionMonitoring() |
||||
this.loading = null; |
||||
}, |
||||
error: (err) => { |
||||
this.loading = null; |
||||
} |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
|
||||
} |
||||
} |
@ -1,36 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm" class="formbox"> |
||||
<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" /> |
||||
</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" /> |
||||
</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" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="maxRetries">最大重试次数</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input type="number" nz-input formControlName="maxRetries" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -1,27 +0,0 @@
|
||||
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]], |
||||
maxRetries: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
} |
@ -1,18 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select nzMode="multiple" formControlName="type" nzPlaceHolder="请选择类型"> |
||||
<nz-option [nzValue]="'peoplenet'" nzLabel="peoplenet"></nz-option> |
||||
<nz-option [nzValue]="'trafficcam'" nzLabel="trafficcam"></nz-option> |
||||
<nz-option [nzValue]="'actionnet'" nzLabel="actionnet"></nz-option> |
||||
<nz-option [nzValue]="'idnet'" nzLabel="idnet"></nz-option> |
||||
<nz-option [nzValue]="'oilnet'" nzLabel="oilnet"></nz-option> |
||||
<nz-option [nzValue]="'smoking_calling_net'" nzLabel="smoking_calling_net"></nz-option> |
||||
<nz-option [nzValue]="'connet'" nzLabel="connet"></nz-option> |
||||
<nz-option [nzValue]="'fire_smoke_net'" nzLabel="fire_smoke_net"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -1,24 +0,0 @@
|
||||
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-model', |
||||
templateUrl: './model.component.html', |
||||
styleUrls: ['./model.component.scss'] |
||||
}) |
||||
export class ModelComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
type: [null, [Validators.required]], |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
} |
@ -1,15 +0,0 @@
|
||||
<div class="box"> |
||||
<nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> |
||||
<div class="content"> |
||||
<nz-tabset> |
||||
<nz-tab nzTitle="config_nvdsanalytics.txt"><textarea name="config1" id="config1" [(ngModel)]="config1"></textarea> |
||||
</nz-tab> |
||||
<nz-tab nzTitle="config.yaml"> <textarea name="config2" id="config2" [(ngModel)]="config2"></textarea></nz-tab> |
||||
<nz-tab nzTitle="producer.yaml"> <textarea name="config3" id="config3" [(ngModel)]="config3"></textarea></nz-tab> |
||||
<!-- <nz-tab nzTitle="source.yaml"> <textarea name="config4" id="config4" [(ngModel)]="config4"></textarea></nz-tab> --> |
||||
</nz-tabset> |
||||
</div> |
||||
<div class="btnbox"> |
||||
<button nz-button nzType="primary" (click)="putConfig()">下发算法配置</button> |
||||
</div> |
||||
</div> |
@ -1,29 +0,0 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #fff; |
||||
font-size: 15px; |
||||
color: black; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow-y: auto; |
||||
} |
||||
.content{ |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
padding: 0 12px; |
||||
nz-tabset{ |
||||
height: 100%; |
||||
} |
||||
textarea{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 52px; |
||||
} |
@ -1,76 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { ActivatedRoute } from '@angular/router'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { ConfigFormDataService } from 'src/app/service/configFormData.service'; |
||||
|
||||
@Component({ |
||||
selector: 'app-config-form', |
||||
templateUrl: './config-form.component.html', |
||||
styleUrls: ['./config-form.component.scss'] |
||||
}) |
||||
export class ConfigFormComponent implements OnInit { |
||||
|
||||
constructor(public configFormData: ConfigFormDataService, private http: HttpClient, private route: ActivatedRoute, private message: NzMessageService) { } |
||||
config1: string |
||||
config2: string |
||||
config3: string |
||||
// config4: string
|
||||
hostId//主机id
|
||||
orId//加油站id
|
||||
ngOnInit(): void { |
||||
this.hostId = this.route.snapshot.queryParams.hostId |
||||
this.orId = this.route.snapshot.queryParams.orId |
||||
this.config1 = sessionStorage.getItem('config1') |
||||
this.config2 = sessionStorage.getItem('config2') |
||||
this.config3 = sessionStorage.getItem('config3') |
||||
// this.config4 = sessionStorage.getItem('config4')
|
||||
} |
||||
goback() { |
||||
history.go(-1) |
||||
} |
||||
putConfig() { |
||||
let body = { |
||||
configFiles: [ |
||||
{ name: 'config_nvdsanalytics.txt', content: this.config1 }, |
||||
{ name: 'config.yaml', content: this.config2 }, |
||||
{ name: 'producer.yaml', content: this.config3 }, |
||||
// { name: 'source.yaml', content: this.config4 }
|
||||
] |
||||
} |
||||
this.http.put(`/api/EdgeDevices/${this.hostId}`, body).subscribe({ |
||||
next: (data) => { |
||||
this.message.create('success', `文件保存成功`); |
||||
let promiseArr = [] |
||||
body.configFiles.forEach(element => { |
||||
let params = { |
||||
edgeDeviceId: this.hostId, |
||||
fileName: element.name |
||||
} |
||||
promiseArr.push( |
||||
new Promise((resolve, reject) => { |
||||
this.http.put('/api/EdgeDevices/Commands/PushFile', '', { params: params }).subscribe({ |
||||
next: (data) => { |
||||
resolve('成功了') |
||||
}, |
||||
error: err => { |
||||
reject('失败了') |
||||
} |
||||
}) |
||||
}) |
||||
) |
||||
}); |
||||
Promise.all(promiseArr).then((result) => { |
||||
this.message.create('success', `发送文件名成功`); |
||||
}).catch((error) => { |
||||
// this.message.create('error', `发送文件名失败`);
|
||||
console.log('发送文件名失败', error) |
||||
}) |
||||
}, |
||||
error: (err) => { |
||||
this.message.create('error', `文件保存失败`); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
} |
@ -1,75 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label> |
||||
<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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="user">用户名</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="user" placeholder="请输入用户名" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="password" placeholder="请输入密码" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="uri">地址</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="uri" placeholder="请输入地址" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">类型</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-select formControlName="type" nzPlaceHolder="请选择类型"> |
||||
<nz-option [nzValue]="0" nzLabel="进出口"></nz-option> |
||||
<nz-option [nzValue]="1" nzLabel="加油区"></nz-option> |
||||
<nz-option [nzValue]="2" nzLabel="卸油区"></nz-option> |
||||
<nz-option [nzValue]="3" nzLabel="便利店"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<!-- <nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">序号</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-select formControlName="order" nzPlaceHolder="请选择序号"> |
||||
<nz-option [nzValue]="0" nzLabel="0"></nz-option> |
||||
<nz-option [nzValue]="1" nzLabel="1"></nz-option> |
||||
<nz-option [nzValue]="2" nzLabel="2"></nz-option> |
||||
<nz-option [nzValue]="3" nzLabel="3"></nz-option> |
||||
<nz-option [nzValue]="4" nzLabel="4"></nz-option> |
||||
<nz-option [nzValue]="5" nzLabel="5"></nz-option> |
||||
<nz-option [nzValue]="6" nzLabel="6"></nz-option> |
||||
<nz-option [nzValue]="7" nzLabel="7"></nz-option> |
||||
<nz-option [nzValue]="8" nzLabel="8"></nz-option> |
||||
<nz-option [nzValue]="9" nzLabel="9"></nz-option> |
||||
<nz-option [nzValue]="10" nzLabel="10"></nz-option> |
||||
<nz-option [nzValue]="11" nzLabel="11"></nz-option> |
||||
<nz-option [nzValue]="12" nzLabel="12"></nz-option> |
||||
<nz-option [nzValue]="13" nzLabel="13"></nz-option> |
||||
<nz-option [nzValue]="14" nzLabel="14"></nz-option> |
||||
<nz-option [nzValue]="15" nzLabel="15"></nz-option> |
||||
<nz-option [nzValue]="16" nzLabel="16"></nz-option> |
||||
<nz-option [nzValue]="17" nzLabel="17"></nz-option> |
||||
<nz-option [nzValue]="18" nzLabel="18"></nz-option> |
||||
<nz-option [nzValue]="19" nzLabel="19"></nz-option> |
||||
<nz-option [nzValue]="20" nzLabel="20"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
</form> |
||||
</div> |
@ -1,50 +0,0 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { NzSafeAny } from 'ng-zorro-antd/core/types'; |
||||
@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 { |
||||
const { namevalidate } = MyValidators; |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required, namevalidate]], |
||||
user: [null, [Validators.required]], |
||||
password: [null, [Validators.required]], |
||||
uri: [null, [Validators.required]], |
||||
type: [null, [Validators.required]], |
||||
// order: [null, [Validators.required]],
|
||||
}); |
||||
} |
||||
|
||||
|
||||
} |
||||
export type MyErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>; |
||||
export type MyValidationErrors = Record<string, MyErrorsOptions>; |
||||
export class MyValidators extends Validators { |
||||
static namevalidate(control: AbstractControl): MyValidationErrors | null { |
||||
const value = control.value; |
||||
|
||||
if (isEmptyInputValue(value)) { |
||||
return null; |
||||
} |
||||
|
||||
return isPassword(value) ? null : { mobile: { 'zh-cn': `名称只能是汉字、大小写英文、数字,不能使用特殊字符`, en: `not valid` } }; |
||||
} |
||||
|
||||
} |
||||
|
||||
function isEmptyInputValue(value: NzSafeAny): boolean { |
||||
return value == null || value.length === 0; |
||||
} |
||||
function isPassword(value: string): boolean { |
||||
return typeof value === 'string' && /^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(value); |
||||
} |
@ -1,75 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label> |
||||
<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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="user">用户名</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="user" placeholder="请输入用户名" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="password" placeholder="请输入密码" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="uri">地址</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="uri" placeholder="请输入地址" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">类型</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-select formControlName="type" nzPlaceHolder="请选择类型"> |
||||
<nz-option [nzValue]="0" nzLabel="进出口"></nz-option> |
||||
<nz-option [nzValue]="1" nzLabel="加油区"></nz-option> |
||||
<nz-option [nzValue]="2" nzLabel="卸油区"></nz-option> |
||||
<nz-option [nzValue]="3" nzLabel="便利店"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">序号</nz-form-label> |
||||
<nz-form-control> |
||||
<nz-select formControlName="order" nzPlaceHolder="请选择序号"> |
||||
<nz-option [nzValue]="0" nzLabel="0"></nz-option> |
||||
<nz-option [nzValue]="1" nzLabel="1"></nz-option> |
||||
<nz-option [nzValue]="2" nzLabel="2"></nz-option> |
||||
<nz-option [nzValue]="3" nzLabel="3"></nz-option> |
||||
<nz-option [nzValue]="4" nzLabel="4"></nz-option> |
||||
<nz-option [nzValue]="5" nzLabel="5"></nz-option> |
||||
<nz-option [nzValue]="6" nzLabel="6"></nz-option> |
||||
<nz-option [nzValue]="7" nzLabel="7"></nz-option> |
||||
<nz-option [nzValue]="8" nzLabel="8"></nz-option> |
||||
<nz-option [nzValue]="9" nzLabel="9"></nz-option> |
||||
<nz-option [nzValue]="10" nzLabel="10"></nz-option> |
||||
<nz-option [nzValue]="11" nzLabel="11"></nz-option> |
||||
<nz-option [nzValue]="12" nzLabel="12"></nz-option> |
||||
<nz-option [nzValue]="13" nzLabel="13"></nz-option> |
||||
<nz-option [nzValue]="14" nzLabel="14"></nz-option> |
||||
<nz-option [nzValue]="15" nzLabel="15"></nz-option> |
||||
<nz-option [nzValue]="16" nzLabel="16"></nz-option> |
||||
<nz-option [nzValue]="17" nzLabel="17"></nz-option> |
||||
<nz-option [nzValue]="18" nzLabel="18"></nz-option> |
||||
<nz-option [nzValue]="19" nzLabel="19"></nz-option> |
||||
<nz-option [nzValue]="20" nzLabel="20"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -1,32 +0,0 @@
|
||||
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'; |
||||
import { MyValidators } from '../addcamera/addcamera.component'; |
||||
|
||||
@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 { |
||||
const { namevalidate } = MyValidators; |
||||
let datacopy = JSON.parse(JSON.stringify(this.data)) |
||||
console.log('编辑数据', datacopy) |
||||
this.validateForm = this.fb.group({ |
||||
name: [datacopy.name, [Validators.required,namevalidate]], |
||||
user: [datacopy.user, [Validators.required]], |
||||
password: [datacopy.password, [Validators.required]], |
||||
uri: [datacopy.uri, [Validators.required]], |
||||
type: [datacopy.type, [Validators.required]], |
||||
order: [datacopy.order, [Validators.required]] |
||||
}); |
||||
} |
||||
|
||||
} |
@ -1,66 +0,0 @@
|
||||
<div class="box"> |
||||
<div class="leftbox"> |
||||
<nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> |
||||
<div class="cameraList"> |
||||
<div class="title"> |
||||
<span>摄像头列表</span> |
||||
<button nz-button nzType="primary" (click)="addCamera()">新增摄像头</button> |
||||
</div> |
||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false" [nzLoading]="isLoading"> |
||||
<thead> |
||||
<tr> |
||||
<th>序号</th> |
||||
<th>名称</th> |
||||
<th>用户名</th> |
||||
<th>密码</th> |
||||
<th>地址</th> |
||||
<th>类型</th> |
||||
<th>标注情况</th> |
||||
<th>状态</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let item of basicTable.data"> |
||||
<td>{{ item.order }}</td> |
||||
<td>{{ item.name }}</td> |
||||
<td>{{ item.user }}</td> |
||||
<td>{{ item.password }}</td> |
||||
<td>{{ item.uri }}</td> |
||||
<td>{{ item.type | cameraType}}</td> |
||||
<td> |
||||
<ng-container *ngIf="item.type == 1; else elseTemplate"> |
||||
不需要标注 |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
{{item.dimensionedPoints ? '已标注' : '未标注'}} |
||||
</ng-template> |
||||
</td> |
||||
<td>{{ item.isEnabled ? '已启用' : '已禁用'}}</td> |
||||
<td> |
||||
<span class="blue" style="margin-right: 12px;" (click)="editCamera(item)">编辑</span> |
||||
<span class="blue" style="margin-right: 12px;" [ngClass]="{'forbid': item.type == 1}" |
||||
(click)="label(item)">标注</span> |
||||
<ng-container *ngIf="item.isEnabled; else elseTemplate2"> |
||||
<span class="red" style="margin-right: 12px;" (click)="forbidden(item)">禁用</span> |
||||
</ng-container> |
||||
<ng-template #elseTemplate2> |
||||
<span class="blue" style="margin-right: 12px;color: rgb(26, 173, 26);" (click)="forbidden(item)">启用</span> |
||||
</ng-template> |
||||
<span class="red" (click)="deleteCamera(item)">删除</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
<div class="footer"> |
||||
<button nz-button nzType="primary" (click)="sourceYaml()">下发source.yaml配置</button> |
||||
</div> |
||||
<div class="footer"> |
||||
<button [disabled]="isSourceYaml === false" nz-button nzType="primary" (click)="connect()">下发算法配置</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="rightbox"> |
||||
|
||||
</div> |
||||
</div> |
@ -1,43 +0,0 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
background: #fff; |
||||
font-size: 15px; |
||||
color: black; |
||||
} |
||||
|
||||
.leftbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-right: 1px solid #F2F2F2; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.cameraList { |
||||
flex: 1; |
||||
padding: 0 20px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 12px; |
||||
} |
||||
.footer{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin: 12px 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rightbox { |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
} |
||||
|
@ -1,567 +0,0 @@
|
||||
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
||||
import { ActivatedRoute, Route, Router } from '@angular/router'; |
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzFormTooltipIcon } from 'ng-zorro-antd/form'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { AddcameraComponent } from './addcamera/addcamera.component'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http'; |
||||
import { EditcameraComponent } from './editcamera/editcamera.component'; |
||||
import { catchError, tap } from 'rxjs/operators'; |
||||
import { ConfigFormDataService } from 'src/app/service/configFormData.service'; |
||||
import { SendFileComponent } from './send-file/send-file.component'; |
||||
interface Camera { |
||||
name: string; |
||||
user: string; |
||||
password: string; |
||||
uri: string; |
||||
type: number; |
||||
order: number; |
||||
dimensionedPoints: string, |
||||
isEnabled: boolean |
||||
} |
||||
|
||||
@Component({ |
||||
selector: 'app-host-config', |
||||
templateUrl: './host-config.component.html', |
||||
styleUrls: ['./host-config.component.scss'] |
||||
}) |
||||
|
||||
export class HostConfigComponent implements OnInit { |
||||
|
||||
|
||||
constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef, private http: HttpClient, public configFormData: ConfigFormDataService,) { } |
||||
|
||||
hostId//主机id
|
||||
orId//加油站id
|
||||
ngOnInit(): void { |
||||
this.hostId = this.route.snapshot.queryParams.hostId |
||||
this.orId = this.route.snapshot.queryParams.orId |
||||
this.getCamera() |
||||
|
||||
this.http.get(`/api/EdgeDevices/${this.hostId}`).subscribe( |
||||
{ |
||||
next: ((data: any) => { |
||||
console.log(data) |
||||
// let isExist = data.configFiles.find((item, index, arr) => {
|
||||
// if (item.name == 'source.yaml') {
|
||||
// console.log("存在", index)
|
||||
// return item
|
||||
// }
|
||||
// })
|
||||
if (data.configFiles && data.configFiles.length != 0) { |
||||
this.isSourceYaml = true |
||||
} else { |
||||
this.isSourceYaml = false |
||||
} |
||||
}), |
||||
error: (err) => { |
||||
// this.message.create('error', '请先下发source.yaml配置');
|
||||
} |
||||
} |
||||
|
||||
|
||||
) |
||||
} |
||||
listOfData: Camera[] = []; |
||||
goback() { |
||||
history.go(-1) |
||||
} |
||||
//摄像头
|
||||
isLoading = false |
||||
getCamera() { |
||||
let params = { |
||||
ContainsChildren: true, |
||||
EdgeDeviceId: this.hostId |
||||
} |
||||
this.isLoading = true |
||||
this.http.get('/api/Cameras', { params: params }).subscribe((data: any) => { |
||||
data.items.forEach(element => { |
||||
element.dimensionedPointsObj = JSON.parse(element.dimensionedPoints) |
||||
}); |
||||
this.listOfData = data.items |
||||
this.isLoading = false |
||||
console.log('摄像头列表', data.items) |
||||
}) |
||||
} |
||||
addCamera() { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增加油站摄像头', |
||||
nzContent: AddcameraComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 388, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise((resolve, rejects) => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
name: instance.validateForm.value.name, |
||||
user: instance.validateForm.value.user, |
||||
password: instance.validateForm.value.password, |
||||
uri: instance.validateForm.value.uri, |
||||
type: instance.validateForm.value.type, |
||||
organizationId: this.orId, |
||||
edgeDeviceId: this.hostId, |
||||
// order: instance.validateForm.value.order,
|
||||
} |
||||
this.http.post('/api/Cameras', body).subscribe({ |
||||
next: data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功!'); |
||||
this.getCamera() |
||||
this.isSourceYaml = false |
||||
return true |
||||
}, |
||||
error: (err) => { |
||||
rejects(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: 388, |
||||
nzComponentParams: { |
||||
data: data |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
name: instance.validateForm.value.name, |
||||
user: instance.validateForm.value.user, |
||||
password: instance.validateForm.value.password, |
||||
uri: instance.validateForm.value.uri, |
||||
type: instance.validateForm.value.type, |
||||
organizationId: this.orId, |
||||
edgeDeviceId: this.hostId, |
||||
order: instance.validateForm.value.order, |
||||
} |
||||
this.http.put(`/api/Cameras/${data.id}`, body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '编辑成功!'); |
||||
this.getCamera() |
||||
this.isSourceYaml = false |
||||
return true |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
deleteCamera(item) { |
||||
console.log(item) |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.name}这个摄像头吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'default', |
||||
nzOnOk: () => { |
||||
this.http.delete(`/api/Cameras/${item.id}`).subscribe(data => { |
||||
this.message.create('success', '删除成功!'); |
||||
this.getCamera() |
||||
this.isSourceYaml = false |
||||
}) |
||||
}, |
||||
nzCancelText: '取消' |
||||
}); |
||||
} |
||||
|
||||
|
||||
isSourceYaml: boolean |
||||
|
||||
label(item) { |
||||
|
||||
this.http.get(`/api/EdgeDevices/${this.hostId}`).subscribe( |
||||
{ |
||||
next: ((data: any) => { |
||||
if (data.configFiles) { |
||||
this.isSourceYaml = true |
||||
const element = document.documentElement |
||||
if (element.requestFullscreen) { //进入全屏
|
||||
element.requestFullscreen(); |
||||
} |
||||
} else { |
||||
this.isSourceYaml = false |
||||
this.message.create('error', '请先下发source.yaml配置'); |
||||
} |
||||
}), |
||||
error: (err) => { |
||||
// this.message.create('error', '请先下发source.yaml配置');
|
||||
} |
||||
} |
||||
|
||||
|
||||
) |
||||
|
||||
|
||||
} |
||||
|
||||
connect() { |
||||
|
||||
// let isAllLabel = this.listOfData.find((item: any) => {
|
||||
// if (item.type != 1 && !item.dimensionedPoints) {
|
||||
// console.log('存在摄像头未标注的情况')
|
||||
// return item
|
||||
// }
|
||||
// })
|
||||
// if (isAllLabel) {
|
||||
// this.message.create('error', '存在摄像头未标注的情况');
|
||||
// return
|
||||
// }
|
||||
// let ids = []
|
||||
// this.listOfData.forEach((item: any) => {
|
||||
// ids.push(item.id)
|
||||
// })
|
||||
// this.http.get('/api/Cameras/Statuses', {
|
||||
// params: { ids: ids }
|
||||
// }).subscribe({
|
||||
// next: (data) => {
|
||||
// console.log('连接状态', data)
|
||||
|
||||
// },
|
||||
// error: (err) => {
|
||||
// console.log('连接失败', err)
|
||||
// }
|
||||
// })
|
||||
this.disposalData() |
||||
this.router.navigate(['/system/host/camera/configForm'], { queryParams: { 'hostId': this.hostId, 'orId': this.orId } }) |
||||
} |
||||
|
||||
forbidden(item) { |
||||
console.log(item) |
||||
let body = { |
||||
isEnabled: !item.isEnabled, |
||||
} |
||||
this.http.put(`/api/Cameras/${item.id}`, body).subscribe(data => { |
||||
this.message.create('success', '修改成功!'); |
||||
this.getCamera() |
||||
}) |
||||
} |
||||
sourceYaml() { |
||||
let copyListOfData = JSON.parse(JSON.stringify(this.listOfData)) |
||||
copyListOfData = copyListOfData.filter((item, i) => { |
||||
return item.isEnabled; |
||||
}) |
||||
let config4 = `video_rate: 5
|
||||
inference_buffer_second: 6 |
||||
sources:` |
||||
copyListOfData.forEach((item: any, index) => { |
||||
config4 += ` |
||||
- name: '${item.name}' |
||||
user: '${item.user}' |
||||
password: '${item.password}' |
||||
uri: '${item.uri}' |
||||
type: ${item.type} |
||||
` |
||||
}) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '下发source.yaml配置', |
||||
nzContent: SendFileComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 1000, |
||||
nzBodyStyle: { |
||||
'border-radius': '0px', |
||||
'padding': '7px', |
||||
}, |
||||
nzComponentParams: { |
||||
data: config4 |
||||
}, |
||||
nzOnOk: async () => { |
||||
|
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
configFiles: [ |
||||
{ name: 'source.yaml', content: instance.datacopy } |
||||
] |
||||
} |
||||
this.http.put(`/api/EdgeDevices/${this.hostId}`, body).subscribe({ |
||||
next: (data) => { |
||||
this.message.create('success', `文件保存成功`); |
||||
resolve('成功了') |
||||
this.isSourceYaml = true |
||||
let params = { |
||||
edgeDeviceId: this.hostId, |
||||
fileName: 'source.yaml' |
||||
} |
||||
this.http.put('/api/EdgeDevices/Commands/PushFile', '', { params: params }).subscribe({ |
||||
next: (data) => { |
||||
this.message.create('success', `发送文件名成功`); |
||||
}, |
||||
error: err => { |
||||
// this.message.create('error', `发送文件名失败`);
|
||||
// reject('失败了')
|
||||
} |
||||
}) |
||||
}, |
||||
error: (err) => { |
||||
// this.message.create('error', `文件保存失败`);
|
||||
} |
||||
}) |
||||
|
||||
}) |
||||
|
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
//整理配置文件数据
|
||||
disposalData() { |
||||
|
||||
let copyListOfData = JSON.parse(JSON.stringify(this.listOfData)) |
||||
copyListOfData = copyListOfData.filter((item, i) => { |
||||
return item.isEnabled; |
||||
}) |
||||
|
||||
console.log(copyListOfData) |
||||
|
||||
let config1 = `[property]
|
||||
enable=1 |
||||
#Width height used for configuration to which below configs are configured |
||||
config-width=1980 |
||||
config-height=1080 |
||||
#osd-mode 0: Dont display any lines, rois and text |
||||
# 1: Display only lines, rois and static text i.e. labels |
||||
# 2: Display all info from 1 plus information about counts |
||||
osd-mode=2 |
||||
#Set OSD font size that has to be displayed |
||||
display-font-size=12 |
||||
` |
||||
let config2 = '' |
||||
let config3 = `test_action: true
|
||||
logging_interval : 600 |
||||
` |
||||
let xieyouqu = [] |
||||
let order |
||||
copyListOfData.forEach((item: any, index) => { |
||||
if (item.type == 2) { |
||||
xieyouqu.push(item) |
||||
order = item.order |
||||
} |
||||
|
||||
if (item.type == 0 && item.dimensionedPointsObj && item.dimensionedPointsObj.polygon.length != 0) { |
||||
let str = '' |
||||
item.dimensionedPointsObj ? item.dimensionedPointsObj.polygon.forEach(element => { |
||||
str += element.x + ';' |
||||
str += element.y + ';' |
||||
}) : 0; |
||||
str = str.substring(0, str.lastIndexOf(';')) |
||||
console.log('进出口多边形', str) |
||||
config1 += ` |
||||
## Per stream configuration |
||||
[roi-filtering-stream-${item.order}] |
||||
#shoushiyuan-out202 |
||||
#enable or disable following feature |
||||
enable=1 |
||||
#ROI to filter select objects, and remove from meta data |
||||
roi-RF=${str} |
||||
#remove objects in the ROI |
||||
inverse-roi=0 |
||||
class-id=-1 |
||||
` |
||||
} |
||||
if ((item.type == 2 || item.type == 3) && item.dimensionedPointsObj && item.dimensionedPointsObj.arrow.length != 0) { |
||||
let arrowArr = item.dimensionedPointsObj.arrow |
||||
let str = arrowArr[1].startX + ';' + arrowArr[1].startY + ';' + arrowArr[1].endX + ';' + arrowArr[1].endY + ';' + arrowArr[0].startX + ';' + arrowArr[0].startY + ';' + arrowArr[0].endX + ';' + arrowArr[0].endY |
||||
config1 += ` |
||||
[line-crossing-stream-${item.order}] |
||||
enable=1 |
||||
#Label;direction;lc |
||||
line-crossing-Entry=${str} |
||||
# line-crossing-Exit=789;672;1084;900;851;773;1203;732 |
||||
class-id=0 |
||||
#extended when 0- only counts crossing on the configured Line |
||||
# 1- assumes extended Line crossing counts all the crossing |
||||
extended=0 |
||||
#LC modes supported: |
||||
#loose : counts all crossing without strong adherence to direction |
||||
#balanced: Strict direction adherence expected compared to mode=loose |
||||
#strict : Strict direction adherence expected compared to mode=balanced |
||||
mode=strict |
||||
` |
||||
} |
||||
}) |
||||
//新增东南西北参数
|
||||
copyListOfData.forEach(element => { |
||||
if (element.type == 2 || element.type == 3) {//卸油区
|
||||
let obj = element.dimensionedPointsObj |
||||
let str1 = '' |
||||
if (obj && obj.arrow && obj.arrow.length == 2) { |
||||
str1 = `${obj.arrow[1].startX};${obj.arrow[1].startY};${obj.arrow[1].endX};${obj.arrow[1].endY}` |
||||
} |
||||
let str2 = '' |
||||
if (obj && obj.arrowOfWest && obj.arrowOfWest.length == 2) { |
||||
str2 = `${obj.arrowOfWest[1].startX};${obj.arrowOfWest[1].startY};${obj.arrowOfWest[1].endX};${obj.arrowOfWest[1].endY}` |
||||
} |
||||
if (str1 || str2) { |
||||
let arr = [ |
||||
{ name: 'South', value: str1 }, |
||||
{ name: 'West', value: str2 } |
||||
] |
||||
let newstr = '' |
||||
arr.forEach(item => { |
||||
if (item.value) { |
||||
newstr += `direction-${item.name}=${item.value} |
||||
` |
||||
} |
||||
}); |
||||
config1 += ` |
||||
[direction-detection-stream-${element.order}] |
||||
enable=1 |
||||
#Label;direction; |
||||
${newstr}class-id=0 |
||||
` |
||||
} |
||||
} |
||||
|
||||
}); |
||||
let xieyouguan = ''; |
||||
let jingdian = ''; |
||||
if (xieyouqu.length != 0 && xieyouqu[0].dimensionedPointsObj && xieyouqu[0].dimensionedPointsObj.rectangle.length != 0) { |
||||
xieyouqu[0].dimensionedPointsObj.rectangle.forEach(element => { |
||||
if (element.oilUnloadingArea) { |
||||
xieyouguan = element.x + ',' + element.y + ',' + element.width + ',' + element.height |
||||
} else { |
||||
jingdian = element.x + ',' + element.y + ',' + element.width + ',' + element.height |
||||
} |
||||
}) |
||||
} else { |
||||
xieyouguan = '0,0,0,0' |
||||
jingdian = '0,0,0,0' |
||||
} |
||||
|
||||
(order != undefined) ? null : order = copyListOfData[copyListOfData.length - 1].order + 1 |
||||
console.log('泄油管区域', xieyouguan) |
||||
console.log('静电接地', jingdian) |
||||
config2 = `# The all in one config file.
|
||||
# RTSP sources |
||||
# type |
||||
# 0 ViolateArea.ENTRANCE, |
||||
# 1 ViolateArea.GAS_AREA, |
||||
# 2 ViolateArea.FUEL_AREA, |
||||
# 3 ViolateArea.MART, |
||||
# don't change the key name. |
||||
|
||||
debug: false #when the debug is on, osd. |
||||
video_record: 3 #time to record into the .ts video |
||||
|
||||
sources: |
||||
config: 'config/source.yaml' |
||||
|
||||
tracker: |
||||
config: 'config/dstest_tracker_config.txt' |
||||
|
||||
analytics: |
||||
config: 'config/config_nvdsanalytics.txt' |
||||
|
||||
peoplenet: |
||||
enable: true |
||||
apply_on: -1 |
||||
interval: 1 |
||||
batch_size: 16 |
||||
topk: 5 |
||||
roi-top-offset: 0 |
||||
roi-bottom-offset: 0 |
||||
detected-min-w: 20
|
||||
detected-min-h: 200 |
||||
|
||||
trafficcam: |
||||
enable: true |
||||
apply_on: 0 |
||||
interval: 1 |
||||
batch_size: 16 |
||||
topk: 5 |
||||
roi-top-offset: 0 |
||||
roi-bottom-offset: 0 |
||||
detected-min-w: 100
|
||||
detected-min-h: 100 |
||||
|
||||
actionnet: |
||||
enable: false |
||||
apply_on: 1 |
||||
# roi: |
||||
# - 'fuel_island-4': |
||||
# - [200, 0, 450, 500] |
||||
# - 'fuel_island-5': |
||||
# - [930, 93, 940, 987] |
||||
# - 'fuel_island-6': |
||||
# - [1174, 151, 746, 929] |
||||
# - 'fuel_island-7': |
||||
# - [1450, 300, 460, 650] |
||||
interval: 1 |
||||
batch_size: 32 |
||||
|
||||
idnet: |
||||
enable: true |
||||
apply_on: -1 |
||||
interval: 1 |
||||
batch_size: 32 |
||||
|
||||
oilnet: |
||||
enable: true |
||||
apply_on: 2 |
||||
interval: 1 |
||||
batch_size: 16
|
||||
roi-top-offset: 0 |
||||
roi-bottom-offset: 0 |
||||
detected-min-w: 20
|
||||
detected-min-h: 20 |
||||
|
||||
fire_smoke_net: |
||||
enable: true |
||||
apply_on: -1 |
||||
interval: 1 |
||||
batch_size: 16 |
||||
|
||||
smoking_calling_net: |
||||
enable: true |
||||
apply_on: -1 |
||||
interval: 1 |
||||
batch_size: 32 |
||||
|
||||
connet: |
||||
enable: true |
||||
apply_on: 2 |
||||
roi: |
||||
- 'oil_tube-${order}': |
||||
- [${xieyouguan}] |
||||
- 'grounder-${order}': |
||||
- [${jingdian}] |
||||
interval: 1 |
||||
batch_size: 2 |
||||
|
||||
#new field for rule threshold |
||||
rule_threshold: |
||||
object_occurence_interval_second: 3 |
||||
object_disappear_interval_second: 10 |
||||
on_car_parking_interval_second: 1800 |
||||
on_fire_smoke_interval_second: 5 |
||||
threshold_relying_sitting: 0.4 #rolling mean confidence |
||||
threshold_smoking_calling: 0.3 #rolling mean confidence |
||||
threshold_connecting: 0.667 #rolling mean confidence |
||||
threshold_identity: 0.5 #only to filter out people net error |
||||
` |
||||
|
||||
sessionStorage.setItem('config1', config1) |
||||
sessionStorage.setItem('config2', config2) |
||||
sessionStorage.setItem('config3', config3) |
||||
} |
||||
} |
@ -1,5 +0,0 @@
|
||||
<div class="box"> |
||||
<div class="content"> |
||||
<textarea name="config" id="config" [(ngModel)]="datacopy"></textarea> |
||||
</div> |
||||
</div> |
@ -1,20 +0,0 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #fff; |
||||
font-size: 15px; |
||||
color: black; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
textarea { |
||||
width: 100%; |
||||
height: 400px; |
||||
} |
||||
} |
@ -1,23 +0,0 @@
|
||||
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-send-file', |
||||
templateUrl: './send-file.component.html', |
||||
styleUrls: ['./send-file.component.scss'] |
||||
}) |
||||
export class SendFileComponent implements OnInit { |
||||
|
||||
@Input() data: any |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
datacopy |
||||
ngOnInit(): void { |
||||
this.datacopy = JSON.parse(JSON.stringify(this.data)) |
||||
console.log(this.datacopy) |
||||
} |
||||
putConfig() { |
||||
|
||||
} |
||||
} |
@ -1,45 +0,0 @@
|
||||
<!-- <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> |
||||
<li [routerLink]="['/system/conditionMonitoring']" routerLinkActive="router-link-active"><img |
||||
src="../../../assets/images/icon/push.png" alt="">边缘设备更新</li> |
||||
<li [routerLink]="['/system/statusMonitoring']" routerLinkActive="router-link-active"><img |
||||
src="../../../assets/images/icon/push.png" alt="">边缘设备监控</li> |
||||
<li [routerLink]="['/system/videoStreaming']" routerLinkActive="router-link-active"><img |
||||
src="../../../assets/images/icon/push.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> --> |
@ -1,79 +0,0 @@
|
||||
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; |
||||
} |
@ -1,20 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router } from '@angular/router'; |
||||
import { CacheTokenService } from 'src/app/service/cache-token.service'; |
||||
|
||||
@Component({ |
||||
selector: 'app-navigation', |
||||
templateUrl: './navigation.component.html', |
||||
styleUrls: ['./navigation.component.scss'] |
||||
}) |
||||
export class NavigationComponent implements OnInit { |
||||
|
||||
constructor(private router: Router, public token: CacheTokenService) { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
signOut() { |
||||
this.token.delete() |
||||
this.router.navigate(['/login']) |
||||
} |
||||
} |
@ -1,23 +0,0 @@
|
||||
<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> |
@ -1,26 +0,0 @@
|
||||
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' }); |
||||
} |
||||
|
||||
} |
@ -1,23 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="datacopy.name" 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> |
@ -1,30 +0,0 @@
|
||||
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' }); |
||||
} |
||||
|
||||
|
||||
} |
@ -1,42 +0,0 @@
|
||||
<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"> |
||||
<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> |
@ -1,78 +0,0 @@
|
||||
.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: 100%; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
color: #000D21; |
||||
box-sizing: border-box; |
||||
padding-left: 30px; |
||||
padding-right: 140px; |
||||
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); |
||||
} |
||||
} |
@ -1,314 +0,0 @@
|
||||
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'; |
||||
import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy'; |
||||
@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() |
||||
|
||||
this.deleteRouteSnapshot(); |
||||
} |
||||
deleteRouteSnapshot() { |
||||
CustomReuseStrategy.deleteRouteSnapshot('/system/host'); |
||||
} |
||||
//搜索框提交
|
||||
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"
|
||||
ContainsChildren: true, |
||||
pageSize: 9999 |
||||
} |
||||
this.http.get('/api/Organizations', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
console.log('组织机构列表', data) |
||||
this.totalCount = data.totalCount |
||||
data.items.forEach(element => { |
||||
element.key = element.id |
||||
element.title = element.name |
||||
element.selectable = false |
||||
}); |
||||
this.allOrList = data.items |
||||
this.nodes = [...this.toTree.toTree(data.items)] |
||||
this.defaultExpandedKeys = [this.nodes[0].id] |
||||
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 () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
name: instance.validateForm.value.name, |
||||
parentId: node ? Number(node.key) : null, |
||||
isGasStation: instance.validateForm.value.isGasStation |
||||
} |
||||
this.http.post('/api/Organizations', 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 () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
name: instance.validateForm.value.name, |
||||
isGasStation: instance.validateForm.value.isGasStation, |
||||
parentId: node.origin.parentId |
||||
} |
||||
this.http.put(`/api/Organizations/${node.origin.id}`, 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/Organizations/${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 = { |
||||
parentId: parentId, |
||||
name: event.dragNode.origin.name, |
||||
isGasStation: event.dragNode.origin.isGasStation |
||||
} |
||||
this.http.put(`/api/Organizations/${event.dragNode.origin.id}`, 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) |
||||
} |
||||
} |
||||
} |
@ -1,3 +0,0 @@
|
||||
<div class="content"> |
||||
<div class="center" id="center"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas></div> |
||||
</div> |
@ -1,7 +0,0 @@
|
||||
.content{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.center{ width: 100%; height: 100%; } |
@ -1,171 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-plotting-image', |
||||
templateUrl: './plotting-image.component.html', |
||||
styleUrls: ['./plotting-image.component.scss'] |
||||
}) |
||||
export class PlottingImageComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
canvasWidth: number = 0; |
||||
canvasHeight: number = 0; |
||||
|
||||
ngOnInit(): void { |
||||
window.onload = () => { |
||||
this.initBackgroundImg() |
||||
} |
||||
} |
||||
|
||||
//初始化背景图
|
||||
initBackgroundImg() { |
||||
let canvas = document.getElementById('canvas') as any; |
||||
canvas.oncontextmenu = () =>{ return false; }; |
||||
let ctx |
||||
// 检测canvas支持性
|
||||
if (canvas.getContext) { |
||||
ctx = canvas.getContext('2d'); // 返回一个对象,该对象提供了用在画布上绘图的方法和属性
|
||||
} else { |
||||
document.write("你的浏览器不支持canvas,请升级你的浏览器!"); |
||||
return; |
||||
} |
||||
|
||||
// 读取可视区域 宽高
|
||||
let center = (document.getElementById('center') as any).getBoundingClientRect(); |
||||
|
||||
// 图片加载完后,将其显示在canvas中
|
||||
var img = new Image(); |
||||
img.src = "../../../assets/images/bgImg.png"; |
||||
img.onload = () => { |
||||
// 等比例缩放图片
|
||||
var scale = 1; |
||||
if (img.width > center.width || img.height > center.height) { |
||||
if (img.width > img.height) { |
||||
scale = center.width / img.width; |
||||
}else { |
||||
scale = center.height / img.height; |
||||
} |
||||
} |
||||
this.canvasWidth = img.width * scale; |
||||
this.canvasHeight = img.height * scale; // 计算等比缩小后图片
|
||||
window.setTimeout(()=>{ // 加载图片
|
||||
ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight); |
||||
this.initCanvasEvent(canvas) |
||||
}, 0) |
||||
} |
||||
} |
||||
|
||||
//线段的点的集合
|
||||
points = []; |
||||
//可拖动圆圈的点的集合
|
||||
circles = []; |
||||
//整体移动点位
|
||||
allpoints = [] |
||||
isDragging = false |
||||
//是否在绘制区域内
|
||||
isInOut = false |
||||
//记录鼠标点击位置
|
||||
downx = 0 |
||||
downy = 0 |
||||
|
||||
//初始化 canvas画布 点击事件
|
||||
initCanvasEvent(canvas) { |
||||
let context = canvas.getContext('2d'); |
||||
canvas.onmousedown = (e)=>{ |
||||
console.log(e.pageX,e.pageY) |
||||
var clickX = e.pageX - canvas.offsetLeft; |
||||
var clickY = e.pageY - canvas.offsetTop; |
||||
this.downx = clickX |
||||
this.downy = clickY |
||||
if (this.isInt(clickX, clickY)) { |
||||
this.isInOut = true |
||||
return |
||||
} else { |
||||
this.isInOut = false |
||||
} |
||||
|
||||
let index |
||||
//判断当前点击点是否在已经绘制的圆圈上,如果是执行相关操作,并return,不进入画线的代码
|
||||
for (var i = 0; i < this.circles.length; i++) { |
||||
let circle = this.circles[i]; |
||||
//使用勾股定理计算这个点与圆心之间的距离
|
||||
var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)); |
||||
|
||||
// 如果是其他的点,则设置可以拖动
|
||||
if (distanceFromCenter <= circle.radius) { |
||||
// 清除之前选择的圆圈
|
||||
index = i; |
||||
this.isDragging = true; |
||||
//停止搜索
|
||||
return; |
||||
} |
||||
} |
||||
//如果点击新的位置,则进入下面的代码,绘制点
|
||||
//context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
//遍历数组画圆
|
||||
var circle = { |
||||
x: clickX, |
||||
y: clickY, |
||||
radius: 10, |
||||
color: "blue", |
||||
isSelected: false, //拖拽点的标记
|
||||
}; |
||||
this.circles.push(circle); |
||||
this.allpoints = JSON.parse(JSON.stringify(this.circles)) |
||||
this.circles[0].color = "green"; |
||||
for (var i = 0; i < this.circles.length; i++) { |
||||
let circle = this.circles[i]; |
||||
// 绘制圆圈
|
||||
context.globalAlpha = 0.85; |
||||
context.beginPath(); |
||||
context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); |
||||
context.fillStyle = circle.color; |
||||
context.strokeStyle = "black"; |
||||
context.fill(); |
||||
context.stroke(); |
||||
} |
||||
// 画线
|
||||
var point = { |
||||
x: clickX, |
||||
y: clickY, |
||||
}; |
||||
this.points.push(point); |
||||
context.beginPath(); |
||||
context.lineWidth = 3; |
||||
//从起始点开始绘制
|
||||
context.moveTo(this.points[0].x, this.points[0].y); |
||||
for (var i = 0; i < this.points.length; i++) { |
||||
context.lineTo(this.points[i].x, this.points[i].y); |
||||
} |
||||
context.closePath() |
||||
context.fillStyle = "rgb(2,100,30)"; |
||||
context.fill(); |
||||
context.strokeStyle = "#9d4dca"; |
||||
context.stroke(); |
||||
} |
||||
} |
||||
|
||||
//判断点位是否在图形区域内
|
||||
isInt(x, y) { |
||||
if (!this.points[2]) { |
||||
return |
||||
} |
||||
var pt = { |
||||
x: x, |
||||
y: y |
||||
} |
||||
var poly = this.points |
||||
return this.PointInPoly(pt, poly) |
||||
} |
||||
|
||||
//射线法判断点位
|
||||
PointInPoly(pt, poly) { |
||||
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) |
||||
((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) |
||||
&& (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) |
||||
&& (c = !c); |
||||
return c; |
||||
} |
||||
|
||||
} |
@ -1,12 +0,0 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select nzMode="multiple" formControlName="script" nzPlaceHolder="请选择脚本"> |
||||
<nz-option [nzValue]="'restartContainer'" nzLabel="restartContainer"></nz-option> |
||||
<nz-option [nzValue]="'restartMonitor'" nzLabel="restartMonitor"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -1,25 +0,0 @@
|
||||
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-script', |
||||
templateUrl: './script.component.html', |
||||
styleUrls: ['./script.component.scss'] |
||||
}) |
||||
export class ScriptComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
script: [null, [Validators.required]], |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
} |
@ -1,96 +0,0 @@
|
||||
<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 == 'RestartApps'" (click)="sendRequest('RestartApps')"> |
||||
重启识别程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'RestartMonitors'" (click)="sendRequest('RestartMonitors')"> |
||||
重启监控程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'RestartMonitors'" (click)="executeTheScript()"> |
||||
执行脚本 |
||||
</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> |
@ -1,17 +0,0 @@
|
||||
.topbox { |
||||
form { |
||||
display: flex; |
||||
|
||||
nz-form-item { |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
button { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 250px; |
||||
} |
||||
} |
@ -1,221 +0,0 @@
|
||||
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'; |
||||
import { ScriptComponent } from './script/script.component'; |
||||
|
||||
@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; |
||||
} |
||||
}) |
||||
|
||||
|
||||
} |
||||
|
||||
executeTheScript() { |
||||
const requestData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id)); |
||||
let strArr = [] |
||||
requestData.forEach(element => { |
||||
strArr.push(element.id) |
||||
}); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '选择执行脚本', |
||||
nzContent: ScriptComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
let body = { |
||||
edgeDeviceIds: strArr |
||||
} |
||||
await new Promise(resolve => { |
||||
this.http.patch('/api/EdgeDevices/Commands/ExecuteScript', body, { params: { name: instance.validateForm.value.script } }).subscribe({ |
||||
next: (data: any) => { |
||||
resolve(data) |
||||
this.message.create('success', '通知边缘盒子成功,请过一段时间手动刷新尝试!'); |
||||
// if (data.failedItems && data.failedItems.length != 0) {
|
||||
// data.failedItems.forEach(element => {
|
||||
// this.message.create('info', element.detail);
|
||||
// });
|
||||
// }
|
||||
this.setOfCheckedId.clear(); |
||||
this.refreshCheckedStatus(); |
||||
this.loading = null; |
||||
this.getConditionMonitoring() |
||||
return true |
||||
}, |
||||
error: (err) => { |
||||
resolve(err) |
||||
this.loading = null; |
||||
return false |
||||
} |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
} |
@ -1,29 +0,0 @@
|
||||
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'; |
||||
import { HostConfigComponent } from './host-config/host-config.component'; |
||||
import { PlottingImageComponent } from './plotting-image/plotting-image.component'; |
||||
import { ConfigFormComponent } from './config-form/config-form.component'; |
||||
import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component'; |
||||
import { StatusMonitoringComponent } from './status-monitoring/status-monitoring.component'; |
||||
import { VideoStreamingComponent } from './video-streaming/video-streaming.component'; |
||||
|
||||
|
||||
const routes: Routes = [ |
||||
{ path: '', component: OrganizationComponent }, |
||||
{ path: 'organization', component: OrganizationComponent }, |
||||
{ path: 'host', component: AnalysisOfTheHostComponent }, |
||||
{ path: 'host/camera', component: HostConfigComponent }, |
||||
{ path: 'host/camera/configForm', component: ConfigFormComponent }, |
||||
{ path: 'plottingImage', component: PlottingImageComponent }, |
||||
{ path: 'conditionMonitoring', component: ConditionMonitoringComponent }, |
||||
{ path: 'statusMonitoring', component: StatusMonitoringComponent }, |
||||
{ path: 'videoStreaming', component: VideoStreamingComponent } |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class SystemRoutingModule { } |
@ -1,72 +0,0 @@
|
||||
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 { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; |
||||
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 './host-config/addcamera/addcamera.component'; |
||||
import { EditcameraComponent } from './host-config/editcamera/editcamera.component'; |
||||
import { HostConfigComponent } from './host-config/host-config.component'; |
||||
import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; |
||||
import { PlottingImageComponent } from './plotting-image/plotting-image.component'; |
||||
import { cameraType } from '../pipe/cameraTypePipe'; |
||||
import { ConfigFormComponent } from './config-form/config-form.component'; |
||||
import { NzTabsModule } from 'ng-zorro-antd/tabs'; |
||||
import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component'; |
||||
import { SendFileComponent } from './host-config/send-file/send-file.component'; |
||||
import { ModelComponent } from './condition-monitoring/model/model.component'; |
||||
import { StatusMonitoringComponent } from './status-monitoring/status-monitoring.component'; |
||||
import { FileComponent } from './condition-monitoring/file/file.component'; |
||||
import { ScriptComponent } from './status-monitoring/script/script.component'; |
||||
import { VideoStreamingComponent } from './video-streaming/video-streaming.component'; |
||||
@NgModule({ |
||||
declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, PlottingImageComponent, cameraType, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent, StatusMonitoringComponent, FileComponent, ScriptComponent, VideoStreamingComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
SystemRoutingModule, |
||||
NzLayoutModule, |
||||
NzIconModule, |
||||
NzTableModule, |
||||
NzDropDownModule, |
||||
NzPaginationModule, |
||||
NzInputModule, |
||||
NzButtonModule, |
||||
NzFormModule, |
||||
FormsModule, |
||||
ReactiveFormsModule, |
||||
NzModalModule, |
||||
NzSelectModule, |
||||
NzMessageModule, |
||||
NzTreeModule, |
||||
NzSpinModule, |
||||
NzTreeSelectModule, |
||||
NzCheckboxModule, |
||||
NzPageHeaderModule, |
||||
NzTabsModule, |
||||
NzPopconfirmModule |
||||
], |
||||
entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent, FileComponent, ScriptComponent] |
||||
|
||||
}) |
||||
export class SystemManagementModule { } |
@ -1,116 +0,0 @@
|
||||
<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 == 'RestartApps'" (click)="sendRequest('RestartApps')"> |
||||
重启识别程序 |
||||
</button> |
||||
<button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0" |
||||
[nzLoading]="loading == 'RestartMonitors'" (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> |
||||
<th>报告时间</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> |
||||
<td> |
||||
<p> |
||||
开始时间:{{data.beginTime ? (data.beginTime | date:"yyyy-MM-dd HH:mm:ss") |
||||
:'/'}} |
||||
</p> |
||||
<p> |
||||
结束时间:{{data.endTime ? (data.endTime | date:"yyyy-MM-dd HH:mm:ss") :'/'}} |
||||
</p> |
||||
</td> |
||||
<td> |
||||
<span class="blue" (click)="showModal()">详情</span> |
||||
<nz-modal [(nzVisible)]="isVisible" nzTitle="详情" (nzOnCancel)="handleCancel()" |
||||
(nzOnOk)="handleOk()"> |
||||
<ng-container *nzModalContent> |
||||
{{data.detail}} |
||||
</ng-container> |
||||
</nz-modal> |
||||
</td> |
||||
<td> |
||||
<span class="blue" (click)="dispose(data)">处置</span> |
||||
</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> |
@ -1,17 +0,0 @@
|
||||
.topbox { |
||||
form { |
||||
display: flex; |
||||
|
||||
nz-form-item { |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
button { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 250px; |
||||
} |
||||
} |
@ -1,170 +0,0 @@
|
||||
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-video-streaming', |
||||
templateUrl: './video-streaming.component.html', |
||||
styleUrls: ['./video-streaming.component.scss'] |
||||
}) |
||||
export class VideoStreamingComponent 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 |
||||
} |
||||
this.isLoading = true |
||||
this.http.get('/api/ErrorReports', { 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(); |
||||
} |
||||
|
||||
|
||||
|
||||
isVisible = false; |
||||
showModal(): void { |
||||
this.isVisible = true; |
||||
} |
||||
|
||||
handleOk(): void { |
||||
console.log('Button ok clicked!'); |
||||
this.isVisible = false; |
||||
} |
||||
|
||||
handleCancel(): void { |
||||
console.log('Button cancel clicked!'); |
||||
this.isVisible = false; |
||||
} |
||||
dispose(data) { |
||||
let body = { |
||||
isHandled: true |
||||
} |
||||
this.http.put(`/api/ErrorReports/${data.id}`, body).subscribe( |
||||
{ |
||||
next: (data: any) => { |
||||
this.message.create('success', '处置成功'); |
||||
this.getConditionMonitoring() |
||||
}, |
||||
error: err => { |
||||
this.message.create('error', '处置失败'); |
||||
this.getConditionMonitoring() |
||||
} |
||||
} |
||||
|
||||
) |
||||
} |
||||
} |
Loading…
Reference in new issue