[完善]完善边缘盒子监控页面

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

@@ -47,7 +47,7 @@
       </div>
     </div>
     <div class="tablebox">
-      <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'>
+      <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16' [nzLoading]="isLoading">
         <thead>
           <tr>
             <th>ip</th>

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

@@ -27,8 +27,8 @@ export class AnalysisOfTheHostComponent implements OnInit {
   totalCount: string
 
   getAllOrganization() {
-    let OrganizationUnitId = ''
     let params = {
+      ContainsChildren: true,
       PageSize: 9999
     }
     this.http.get('/api/Organizations', {
@@ -68,14 +68,18 @@ export class AnalysisOfTheHostComponent implements OnInit {
 
   //获得加油站的主机
   listOfData: any[] = [];
+  isLoading = false
   getHost() {
+    this.isLoading = true
     this.http.get('/api/EdgeDevices', {
       params: {
+        ContainsChildren: true,
         OrganizationId: this.selectedOilStation.id,
         PageSize: 999
       }
     }).subscribe((data: any) => {
       console.log('主机列表', data.items)
+      this.isLoading = false
       this.listOfData = data.items
     })
   }

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

@@ -1,24 +1,75 @@
 <div class="box">
-    <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='10'>
+  <div class="topbox">
-        <thead>
+    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
-            <tr>
+      <nz-form-item class="searchParams">
-                <th>ip地址</th>
+        <nz-form-control>
-                <th>所属油站</th>
+          <nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
-                <th>设备状态</th>
+            formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构" [(ngModel)]="defaultOrId"
-            </tr>
+            [nzExpandedIcon]="multiExpandedIconTpl">
-        </thead>
+          </nz-tree-select>
-        <tbody>
+          <ng-template #multiExpandedIconTpl let-node let-origin="origin">
-            <tr *ngFor="let data of basicTable.data">
+            <ng-container *ngIf="node.children.length == 0; else elseTemplate">
-                <td>{{ data.hostIPAddress }}</td>
+
-                <td>{{ data.gasStationName }}</td>
+            </ng-container>
-                <td>{{ data.state == 'Disconnected' ? '未连接' : '已连接' }}</td>
+            <ng-template #elseTemplate>
-            </tr>
+              <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
-        </tbody>
+                class="ant-tree-switcher-line-icon"></i>
-    </nz-table>
+            </ng-template>
-    <div class="pagination">
+          </ng-template>
-        <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="num" [nzPageSize]="10"
+        </nz-form-control>
-            [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+      </nz-form-item>
-        </nz-pagination>
+
-        <ng-template #totalTemplate let-total> 16条/页,共{{num}}条 </ng-template>
+
-    </div>
+      <nz-form-item class="btn">
-</div>
+        <nz-form-control>
+          <button nz-button 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" [disabled]="setOfCheckedId.size === 0" [nzLoading]="loading"
+      (click)="sendRequest()">
+      更新
+    </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>
+      </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>{{ data.hubConnectionState == 'Disconnected' ? '未连接' : '已连接' }}</td>
+        <td>
+          <span *ngIf="data.linuxServiceState == 'Dead'">未启动</span>
+          <span *ngIf="data.linuxServiceState == 'Waiting'">启动中</span>
+          <span *ngIf="data.linuxServiceState == 'Running'">运行中</span>
+          <span *ngIf="data.linuxServiceState == 'Failed'">失败</span>
+        </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> 16条/页,共{{num}}条 </ng-template>
+  </div>
+</div>

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

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

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

@@ -1,6 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { TreeService } from 'src/app/service/tree.service';
 @Component({
   selector: 'app-condition-monitoring',
   templateUrl: './condition-monitoring.component.html',
@@ -8,24 +10,77 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ConditionMonitoringComponent implements OnInit {
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private message: NzMessageService) { }
-
+  validateForm!: FormGroup;
   ngOnInit(): void {
-    this.getConditionMonitoring()
+    this.validateForm = this.fb.group({
+      organization: [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
     }
+    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 => {
@@ -37,4 +92,68 @@ export class ConditionMonitoringComponent implements OnInit {
     this.PageNumber = $event
     this.getConditionMonitoring()
   }
+
+
+  checked = false;
+  loading = false;
+  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();
+  }
+
+  sendRequest(): void {
+    this.loading = true;
+    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;
+      }
+    })
+    // setTimeout(() => {
+
+    // }, 1000);
+  }
 }

src/app/system-management/host-config/host-config.component.html

@@ -6,7 +6,7 @@
         <span>摄像头列表</span>
         <button nz-button nzType="primary" (click)="addCamera()">新增摄像头</button>
       </div>
-      <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false">
+      <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false" [nzLoading]="isLoading">
         <thead>
           <tr>
             <th>序号</th>

src/app/system-management/host-config/host-config.component.ts

@@ -67,15 +67,19 @@ export class HostConfigComponent implements OnInit {
     history.go(-1)
   }
   //摄像头
+  isLoading = false
   getCamera() {
     let params = {
+      ContainsChildren: true,
       EdgeDeviceId: this.hostId
     }
+    this.isLoading = true
     this.http.get('/api/Cameras',{ params: params }).subscribe((data: any) => {
       data.items.forEach(element => {
         element.dimensionedPointsObj = JSON.parse(element.dimensionedPoints)
       });
       this.listOfData = data.items
+      this.isLoading = false
       console.log('摄像头列表', data.items)
     })
   }

src/app/system-management/organization/organization.component.ts

@@ -51,6 +51,7 @@ export class OrganizationComponent implements OnInit {
     let params = {
       // OrganizationUnitId: OrganizationUnitId,
       // IsContainsChildren: "true"
+      ContainsChildren: true,
       pageSize: 9999
     }
     this.http.get('/api/Organizations', {

src/styles.scss

@@ -131,4 +131,8 @@ app-root {
 .forbid{
   color: gray;
   pointer-events:none
+}
+
+.maxHeightTreeSelect {
+  max-height: 280px;
 }