diff --git a/src/app/system-management/navigation/navigation.component.html b/src/app/system-management/navigation/navigation.component.html index 6bcc771..ddcc228 100644 --- a/src/app/system-management/navigation/navigation.component.html +++ b/src/app/system-management/navigation/navigation.component.html @@ -21,6 +21,8 @@ src="../../../assets/images/icon/push.png" alt="">边缘盒子更新
  • 边缘盒子监控
  • +
  • 视频流监控
  • diff --git a/src/app/system-management/system-management-routing.module.ts b/src/app/system-management/system-management-routing.module.ts index 5aaf31a..8c21d2c 100644 --- a/src/app/system-management/system-management-routing.module.ts +++ b/src/app/system-management/system-management-routing.module.ts @@ -10,6 +10,7 @@ import { ConfigFormComponent } from './config-form/config-form.component'; import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component'; import { KafkaComponent } from './kafka/kafka.component'; import { StatusMonitoringComponent } from './status-monitoring/status-monitoring.component'; +import { VideoStreamingComponent } from './video-streaming/video-streaming.component'; const routes: Routes = [ @@ -22,7 +23,8 @@ const routes: Routes = [ { path: 'plottingImage', component: PlottingImageComponent }, { path: 'conditionMonitoring', component: ConditionMonitoringComponent }, { path: 'statusMonitoring', component: StatusMonitoringComponent }, - { path: 'kafka', component: KafkaComponent } + { path: 'kafka', component: KafkaComponent }, + { path: 'videoStreaming', component: VideoStreamingComponent } ]; @NgModule({ diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index a09039e..dbad3bc 100644 --- a/src/app/system-management/system-management.module.ts +++ b/src/app/system-management/system-management.module.ts @@ -43,8 +43,9 @@ import { KafkaComponent } from './kafka/kafka.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, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent, KafkaComponent, StatusMonitoringComponent, FileComponent, ScriptComponent], + declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent, KafkaComponent, StatusMonitoringComponent, FileComponent, ScriptComponent, VideoStreamingComponent], imports: [ CommonModule, SystemRoutingModule, diff --git a/src/app/system-management/video-streaming/video-streaming.component.html b/src/app/system-management/video-streaming/video-streaming.component.html new file mode 100644 index 0000000..5c642df --- /dev/null +++ b/src/app/system-management/video-streaming/video-streaming.component.html @@ -0,0 +1,98 @@ +
    +
    + + +
    + + + + + IP + 所属油站 + 设备状态 + 报告时间 + 报告内容 + 操作 + + + + + + {{ data.hostIPAddress }} + {{ data.gasStationName }} + + + 离线 + + + 在线 + + + 报告时间 + 详情 + 处置 + + + + +
    \ No newline at end of file diff --git a/src/app/system-management/video-streaming/video-streaming.component.scss b/src/app/system-management/video-streaming/video-streaming.component.scss new file mode 100644 index 0000000..727b74a --- /dev/null +++ b/src/app/system-management/video-streaming/video-streaming.component.scss @@ -0,0 +1,17 @@ +.topbox { + form { + display: flex; + + nz-form-item { + margin-right: 6px; + } + + button { + margin-right: 6px; + } + } + + .searchParams { + width: 250px; + } +} diff --git a/src/app/system-management/video-streaming/video-streaming.component.ts b/src/app/system-management/video-streaming/video-streaming.component.ts new file mode 100644 index 0000000..e58cb2a --- /dev/null +++ b/src/app/system-management/video-streaming/video-streaming.component.ts @@ -0,0 +1,137 @@ +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, + 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(); + 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(); + } + +}