[完善]完善设备监控页面

src/app/system-management/condition-monitoring/condition-monitoring.component.html

@@ -22,7 +22,7 @@
 
       <nz-form-item class="btn">
         <nz-form-control>
-          <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+          <button nz-button nzType="primary" type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
         </nz-form-control>
       </nz-form-item>
 
@@ -32,12 +32,24 @@
               [nzType]="'sync'"></i>重置</button>
         </nz-form-control>
       </nz-form-item>
-      <button nz-button nzType="primary" [disabled]="setOfCheckedId.size === 0" [nzLoading]="loading"
-      (click)="sendRequest()">
-      更新
-    </button>
+      <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>
     </form>
-   
+
   </div>
   <nz-table #basicTable nzShowSizeChanger [nzData]="listOfData" [nzLoading]="isLoading"
     (nzCurrentPageDataChange)="onCurrentPageDataChange($event)" [nzShowPagination]='false' [nzPageSize]='10'>
@@ -48,6 +60,9 @@
         <th>所属油站</th>
         <th>设备状态</th>
         <th>识别程序服务状态</th>
+        <th>识别程序状态</th>
+        <th>镜像状态</th>
+        <!-- <th>模型状态</th> -->
       </tr>
     </thead>
     <tbody>
@@ -63,6 +78,21 @@
           <span *ngIf="data.linuxServiceState == 'Running'">运行中</span>
           <span *ngIf="data.linuxServiceState == 'Failed'">失败</span>
         </td>
+        <td>
+          <span *ngIf="data.appUpdatingState == 'Never'">未更新</span>
+          <span *ngIf="data.appUpdatingState == 'Updating'">更新中</span>
+          <span *ngIf="data.appUpdatingState == 'Updated'">已更新</span>
+        </td>
+        <td>
+          <span *ngIf="data.imageUpdatingState == 'Never'">未更新</span>
+          <span *ngIf="data.imageUpdatingState == 'Updating'">更新中</span>
+          <span *ngIf="data.imageUpdatingState == 'Updated'">已更新</span>
+        </td>
+        <!-- <td>
+          <span *ngIf="data.appUpdatingState == 'Never'">未更新</span>
+          <span *ngIf="data.appUpdatingState == 'Updating'">更新中</span>
+          <span *ngIf="data.appUpdatingState == 'Updated'">已更新</span>
+        </td> -->
       </tr>
     </tbody>
   </nz-table>
@@ -72,4 +102,4 @@
     </nz-pagination>
     <ng-template #totalTemplate let-total> 16条/页,共{{num}}条 </ng-template>
   </div>
-</div>
+</div>

src/app/system-management/condition-monitoring/condition-monitoring.component.scss

@@ -1,11 +1,17 @@
-.topbox{
-    form{
-        display: flex;
-        nz-form-item{
-            margin-right: 6px;
-        }
+.topbox {
+  form {
+    display: flex;
+
+    nz-form-item {
+      margin-right: 6px;
     }
-    .searchParams{
-        width: 250px;
+
+    button {
+      margin-right: 6px;
     }
-}
+  }
+
+  .searchParams {
+    width: 250px;
+  }
+}

src/app/system-management/condition-monitoring/condition-monitoring.component.ts

@@ -1,8 +1,10 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+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 { ModelComponent } from './model/model.component';
 @Component({
   selector: 'app-condition-monitoring',
   templateUrl: './condition-monitoring.component.html',
@@ -10,7 +12,7 @@ import { TreeService } from 'src/app/service/tree.service';
 })
 export class ConditionMonitoringComponent implements OnInit {
 
-  constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private message: NzMessageService) { }
+  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({
@@ -95,7 +97,7 @@ export class ConditionMonitoringComponent implements OnInit {
 
 
   checked = false;
-  loading = false;
+  loading
   indeterminate = false;
   listOfCurrentPageData: readonly any[] = [];
   setOfCheckedId = new Set<number>();
@@ -130,30 +132,86 @@ export class ConditionMonitoringComponent implements OnInit {
     this.refreshCheckedStatus();
   }
 
-  sendRequest(): void {
-    this.loading = true;
+  sendRequest(type): void {
+
     const requestData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
-    console.log(requestData);
+
     let strArr = []
     requestData.forEach(element => {
       strArr.push(element.id)
     });
-    let params = {
-      edgeDeviceIds: strArr
-    }
-    this.http.put('/api/EdgeDevices/Commands/UpdateStates', '', { params: params }).subscribe({
-      next: (data) => {
-        this.message.create('success', '通知边缘盒子成功，请过一段时间手动刷新尝试！');
-        this.setOfCheckedId.clear();
-        this.refreshCheckedStatus();
-        this.loading = false;
-      },
-      error: (err) => {
-        this.loading = false;
+    let body
+    if (type != 'UpdateModels') {
+      this.loading = type;
+      body = {
+        edgeDeviceIds: strArr
       }
-    })
-    // setTimeout(() => {
+      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();
+
+    }
 
-    // }, 1000);
   }
 }

src/app/system-management/condition-monitoring/model/model.component.html

@@ -0,0 +1,18 @@
+<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>

src/app/system-management/condition-monitoring/model/model.component.ts

@@ -0,0 +1,24 @@
+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' });
+  }
+
+}

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

@@ -37,8 +37,9 @@ 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';
 @NgModule({
-  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent],
+  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,
@@ -62,7 +63,7 @@ import { SendFileComponent } from './host-config/send-file/send-file.component';
     NzPageHeaderModule,
     NzTabsModule
   ],
-  entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent]
+  entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent]
 
 })
 export class SystemManagementModule { }