[新增]视频流监测页面

src/app/system-management/navigation/navigation.component.html

@@ -21,6 +21,8 @@
             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>
         <!-- <li [routerLink]="['/system/kafka']" routerLinkActive="router-link-active"><img
             src="../../../assets/images/icon/push.png" alt="">kafka检查</li> -->
       </ul>

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({

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,

src/app/system-management/video-streaming/video-streaming.component.html

@@ -0,0 +1,98 @@
+<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>报告时间</td>
+                <td>详情</td>
+                <td>处置</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>

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;
+  }
+}

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<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();
+  }
+
+}