[完善]编辑摄像头增加设备类型选项

src/app/system-management/analysis-of-the-host/addhost/addhost.component.html

@@ -1,11 +1,22 @@
 <div class="box">
     <form nz-form [formGroup]="validateForm">
         <nz-form-item>
+            <nz-form-label [nzSpan]="5">ip</nz-form-label>
             <nz-form-control>
                 <nz-input-group>
                     <input nz-input type="text" formControlName="ip" placeholder="请输入ip" />
                 </nz-input-group>
             </nz-form-control>
         </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSpan]="5">类型</nz-form-label>
+            <nz-form-control>
+                <nz-select formControlName="type" name="select-validate" nzPlaceHolder="设备类型">
+                    <nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
+                    <nz-option [nzValue]="1" nzLabel="警旗2"></nz-option>
+                    <nz-option [nzValue]="2" nzLabel="警旗3"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
     </form>
 </div>

src/app/system-management/analysis-of-the-host/addhost/addhost.component.scss

@@ -1,3 +1,3 @@
-.ant-form-item{
+.ant-form-item {
-    margin-bottom: 0;
+  margin-bottom: 12px;
 }

src/app/system-management/analysis-of-the-host/addhost/addhost.component.ts

@@ -6,16 +6,20 @@ import { HttpClient } from '@angular/common/http';
 @Component({
   selector: 'app-addhost',
   templateUrl: './addhost.component.html',
-  styleUrls: ['./addhost.component.scss']
+  styleUrls: ['./addhost.component.scss'],
 })
 export class AddhostComponent implements OnInit {
-
   validateForm!: FormGroup;
-  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+  constructor(
+    private modal: NzModalRef,
+    private fb: FormBuilder,
+    private http: HttpClient
+  ) {}
 
   ngOnInit(): void {
     this.validateForm = this.fb.group({
-      ip: [null, [Validators.required]]
+      ip: [null, [Validators.required]],
+      type: [null, [Validators.required]],
     });
   }
 }

src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.html

@@ -29,10 +29,10 @@
         </span>
 
       </div>
-      <!-- <div class="righttop" *ngIf="selectedOilStation">
+      <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>
     <div class="tablebox">
       <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16' [nzLoading]="isLoading">
@@ -40,6 +40,7 @@
           <tr>
             <th>ip</th>
             <th>配置状态</th>
+            <th>设备类型</th>
             <th>操作</th>
           </tr>
         </thead>
@@ -47,8 +48,9 @@
           <tr *ngFor="let data of basicTable.data">
             <td>{{data.hostIPAddress}}</td>
             <td>!配置状态!</td>
+            <td>{{data.deviceProvider === 0 ? '警旗1' : data.deviceProvider === 1 ? '警旗2' :'警旗3'}}</td>
             <td class="operation">
-              <!-- <a (click)="edit(data)" style="margin-right: 12px;">编辑</a> -->
+              <a (click)="edit(data)" style="margin-right: 12px;">编辑</a>
               <a (click)="config(data)" style="margin-right: 12px;">配置</a>
               <nz-modal [(nzVisible)]="isVisible" [nzWidth]="350" nzTitle="请选择要配置的边缘主机" (nzOnCancel)="handleCancel()"
                 (nzOnOk)="handleOk()">
@@ -61,7 +63,7 @@
                 </ng-container>
               </nz-modal>
               <a (click)="download(data)" style="margin-right: 12px;">下载设备编号</a>
-              <!-- <a class="red" (click)="delete(data)">删除</a> -->
+              <a class="red" (click)="delete(data)">删除</a>
             </td>
           </tr>
         </tbody>

src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts

@@ -147,6 +147,7 @@ export class AnalysisOfTheHostComponent implements OnInit {
             console.log('表单信息', instance.validateForm);
             let body = {
               hostIPAddress: instance.validateForm.value.ip,
+              deviceProvider: instance.validateForm.value.type,
               OrganizationId: this.selectedOilStation.id,
             };
             this.http.post('/api/EdgeDevices', body).subscribe((data) => {
@@ -174,20 +175,22 @@ export class AnalysisOfTheHostComponent implements OnInit {
       nzWidth: 288,
       nzComponentParams: {
         ip: data.hostIPAddress,
+        type: data.deviceProvider,
       },
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
+          console.log('表单信息', instance.validateForm.value);
           await new Promise((resolve) => {
-            console.log('表单信息', instance.validateForm);
             (data.hostIPAddress = instance.validateForm.value.ip),
-              this.http
+              (data.deviceProvider = instance.validateForm.value.type);
-                .put(`/api/EdgeDevices/${data.id}`, data)
+            this.http
-                .subscribe((data) => {
+              .put(`/api/EdgeDevices/${data.id}`, data)
-                  resolve(data);
+              .subscribe((data) => {
-                  this.message.create('success', '修改成功！');
+                resolve(data);
-                  this.getHost();
+                this.message.create('success', '修改成功！');
-                  return true;
+                this.getHost();
-                });
+                return true;
+              });
           });
         } else {
           this.message.create('warning', '请填写完整！');
@@ -217,9 +220,29 @@ export class AnalysisOfTheHostComponent implements OnInit {
   isVisible = false;
   radioValue = '警旗1';
   configdata;
-  config(data) {
+  config(data: any) {
-    this.isVisible = true;
+    // this.isVisible = true;
     this.configdata = data;
+    console.log(this.configdata);
+    let body = {
+      deviceProvider: this.configdata.deviceProvider,
+    };
+    this.http.put(`/api/EdgeDevices/${this.configdata.id}`, body).subscribe({
+      next: (data) => {
+        setTimeout(() => {
+          this.router.navigate([`/system/host/camera`], {
+            queryParams: {
+              hostId: this.configdata.id,
+              orId: this.selectedOilStation.id,
+              type: DeviceProvider[this.configdata.deviceProvider],
+            },
+          });
+        }, 0);
+      },
+      error: (err) => {
+        this.message.create('error', '更新边缘设备失败');
+      },
+    });
   }
 
   handleOk(): void {

src/app/system-management/analysis-of-the-host/edithost/edithost.component.html

@@ -1,11 +1,22 @@
 <div class="box">
     <form nz-form [formGroup]="validateForm">
         <nz-form-item>
+            <nz-form-label [nzSpan]="5">ip</nz-form-label>
             <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>
+        <nz-form-item>
+            <nz-form-label [nzSpan]="5">类型</nz-form-label>
+            <nz-form-control>
+                <nz-select formControlName="type" name="select-validate" [(ngModel)]="type" nzPlaceHolder="设备类型">
+                    <nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
+                    <nz-option [nzValue]="1" nzLabel="警旗2"></nz-option>
+                    <nz-option [nzValue]="2" nzLabel="警旗3"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
     </form>
 </div>

src/app/system-management/analysis-of-the-host/edithost/edithost.component.ts

@@ -6,18 +6,23 @@ import { HttpClient } from '@angular/common/http';
 @Component({
   selector: 'app-edithost',
   templateUrl: './edithost.component.html',
-  styleUrls: ['./edithost.component.scss']
+  styleUrls: ['./edithost.component.scss'],
 })
 export class EdithostComponent implements OnInit {
-
+  @Input() ip: any;
-  @Input() ip: any
+  @Input() type: any;
-
   validateForm!: FormGroup;
-  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+  constructor(
+    private modal: NzModalRef,
+    private fb: FormBuilder,
+    private http: HttpClient
+  ) {}
 
   ngOnInit(): void {
+    console.log('设备类型',this.type);
     this.validateForm = this.fb.group({
-      ip: [null, [Validators.required]]
+      ip: [null, [Validators.required]],
+      type: [null, [Validators.required]],
     });
   }
 }