[修改]视频流监控的详情

proxy.config.json

@@ -1,11 +1,11 @@
 {
   "/api": {
-    "target": "http://121.36.37.70:8080",
+    "target": "http://10.156.134.54:8080",
     "secure": false,
     "changeOrigin": true
   },
   "/signalr": {
-    "target": "http://121.36.37.70:8080",
+    "target": "http://10.156.134.54:8080",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

src/app/system-management/system-management.module.ts

@@ -44,8 +44,9 @@ import { StatusMonitoringComponent } from './status-monitoring/status-monitoring
 import { FileComponent } from './condition-monitoring/file/file.component';
 import { ScriptComponent } from './status-monitoring/script/script.component';
 import { VideoStreamingComponent } from './video-streaming/video-streaming.component';
+import { DetailsComponent } from './video-streaming/details/details.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, VideoStreamingComponent],
+  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, DetailsComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,
@@ -70,7 +71,7 @@ import { VideoStreamingComponent } from './video-streaming/video-streaming.compo
     NzTabsModule,
     NzPopconfirmModule
   ],
-  entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent, FileComponent,ScriptComponent]
+  entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent, FileComponent, ScriptComponent, DetailsComponent]
 
 })
 export class SystemManagementModule { }

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

@@ -0,0 +1 @@
+<p>{{data.detail}}</p>

src/app/system-management/video-streaming/details/details.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.scss']
+})
+export class DetailsComponent implements OnInit {
+  @Input() data?: any;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -93,13 +93,7 @@
                     </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>
+                    <span class="blue" (click)="showModal(data)">详情</span>
                 </td>
                 <td>
                     <span class="blue" (click)="dispose(data)">处置</span>

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

@@ -4,6 +4,7 @@ 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 { DetailsComponent } from './details/details.component';
 
 @Component({
   selector: 'app-video-streaming',
@@ -134,21 +135,19 @@ export class VideoStreamingComponent implements OnInit {
   }
 
 
-
-  isVisible = false;
-  showModal(): void {
-    this.isVisible = true;
-  }
-
-  handleOk(): void {
-    console.log('Button ok clicked!');
-    this.isVisible = false;
+  showModal(data): void {
+    const modal = this.modal.create({
+      nzTitle: '详情',
+      nzContent: DetailsComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 388,
+      nzFooter: null,
+      nzComponentParams: {
+        data: data,
+      }
+    });
   }
 
-  handleCancel(): void {
-    console.log('Button cancel clicked!');
-    this.isVisible = false;
-  }
   dispose(data) {
     let body = {
       isHandled: true