[完善]完善配置文件接口

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

@@ -0,0 +1,24 @@
+<div class="box">
+    <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='10'>
+        <thead>
+            <tr>
+                <th>ip地址</th>
+                <th>所属油站</th>
+                <th>设备状态</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let data of basicTable.data">
+                <td>{{ data.hostIPAddress }}</td>
+                <td>{{ data.gasStationName }}</td>
+                <td>{{ data.state == 'Disconnected' ? '未连接' : '已连接' }}</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.ts

@@ -0,0 +1,40 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-condition-monitoring',
+  templateUrl: './condition-monitoring.component.html',
+  styleUrls: ['./condition-monitoring.component.scss']
+})
+export class ConditionMonitoringComponent implements OnInit {
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getConditionMonitoring()
+  }
+
+  listOfData: any
+  num: string
+  PageNumber: number = 1
+  //获取盒子状态
+  getConditionMonitoring() {
+    let params = {
+      PageNumber: this.PageNumber,
+      PageSize: 10
+    }
+    this.http.get('/api/EdgeDevices/Statuses', { params: params }).subscribe(
+      (data: any) => {
+        console.log(data)
+        this.listOfData = data.items
+        this.num = data.totalCount
+      }, err => {
+
+      }
+    )
+  }
+  pageChange($event) {
+    this.PageNumber = $event
+    this.getConditionMonitoring()
+  }
+}

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

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NzMessageService } from 'ng-zorro-antd/message';
 import { ConfigFormDataService } from 'src/app/service/configFormData.service';
 
 @Component({
@@ -10,7 +11,7 @@ import { ConfigFormDataService } from 'src/app/service/configFormData.service';
 })
 export class ConfigFormComponent implements OnInit {
 
-  constructor(public configFormData: ConfigFormDataService, private http: HttpClient, private route: ActivatedRoute) { }
+  constructor(public configFormData: ConfigFormDataService, private http: HttpClient, private route: ActivatedRoute, private message: NzMessageService) { }
   config1: string
   config2: string
   config3: string
@@ -30,14 +31,44 @@ export class ConfigFormComponent implements OnInit {
   }
   putConfig() {
     let body = {
-      configFiles: "string"
+      configFiles: [
+        { name: 'config_nvdsanalytics.txt', content: this.config1 },
+        { name: 'config.yaml', content: this.config2 },
+        { name: 'producer.yaml', content: this.config3 },
+        { name: 'source.yaml', content: this.config4 }
+      ]
     }
-    this.http.put(`/api​/EdgeDevices​/${this.hostId}`, body).subscribe({
+    this.http.put(`/api/EdgeDevices/${this.hostId}`, body).subscribe({
       next: (data) => {
-
+        this.message.create('success', `文件保存成功`);
+        let promiseArr = []
+        body.configFiles.forEach(element => {
+          let params = {
+            edgeDeviceId: this.hostId,
+            fileName: element.name
+          }
+          promiseArr.push(
+            new Promise((resolve, reject) => {
+              this.http.put('/api/EdgeDevices/Commands/PushFile', '', { params: params }).subscribe({
+                next: (data) => {
+                  resolve('成功了')
+                },
+                error: err => {
+                  reject('失败了')
+                }
+              })
+            })
+          )
+        });
+        Promise.all(promiseArr).then((result) => {
+          this.message.create('success', `发送文件名成功`);
+        }).catch((error) => {
+          this.message.create('error', `发送文件名失败`);
+          console.log('发送文件名失败', error)
+        })
       },
       error: (err) => {
-        console.log('连接失败', err)
+        this.message.create('error', `文件保存失败`);
       }
     })
   }

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

@@ -15,7 +15,7 @@
       <ul>
         <li [routerLink]="['/system/organization']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/organization.png" alt="">组织机构管理</li>
         <li [routerLink]="['/system/host']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/host.png" alt="">边缘盒子管理</li>
-        <li><img src="../../../assets/images/icon/push.png" alt="">边缘盒子监控</li>
+        <li [routerLink]="['/system/conditionMonitoring']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/push.png" alt="">边缘盒子监控</li>
       </ul>
     </div>
   </nz-sider>

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

@@ -7,6 +7,7 @@ import { ImageListComponent } from './image-list/image-list.component';
 import { PlottingImageComponent } from './plotting-image/plotting-image.component';
 import { ImageLabel2Component } from './image-label2/image-label2.component';
 import { ConfigFormComponent } from './config-form/config-form.component';
+import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component';
 
 
 const routes: Routes = [
@@ -17,6 +18,7 @@ const routes: Routes = [
     { path: 'host/camera/imageLabel', component: ImageLabel2Component },
     { path: 'host/camera/configForm', component: ConfigFormComponent },
     { path: 'plottingImage', component: PlottingImageComponent },
+    { path: 'conditionMonitoring', component: ConditionMonitoringComponent },
 ];
 
 @NgModule({

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

@@ -35,8 +35,9 @@ import { ImageLabelComponent } from './image-label/image-label.component';
 import { ImageLabel2Component } from './image-label2/image-label2.component';
 import { ConfigFormComponent } from './config-form/config-form.component';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component';
 @NgModule({
-  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent],
+  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,

src/styles.scss

@@ -1,27 +1,129 @@
 @import "~ng-zorro-antd/ng-zorro-antd.min.css";
 
-@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
-@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
+@import "~ng-zorro-antd/style/index.min.css";
+/* 引入基本样式 */
+@import "~ng-zorro-antd/button/style/index.min.css";
+/* 引入组件样式 */
 
 
 
 /* css初始化 */
-html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
-body { font-family: Roboto, "Helvetica Neue", sans-serif; }
-ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas { margin: 0; padding: 0; }
-b,strong,i,em,h1,h2,h3,h4,h5,h6 { font-weight: 500; font-style: normal; }
-img { border: none; outline: none; }
-a { text-decoration: none; color:#000; }
-ul,ol,li { list-style: none; overflow-x: hidden; }
-textarea { resize: none; }
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+ul,
+ol,
+dl,
+li,
+dt,
+dd,
+p,
+form,
+input,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+section,
+article,
+aside,
+header,
+footer,
+nav,
+figure,
+time,
+mark,
+main,
+canvas {
+  margin: 0;
+  padding: 0;
+}
+
+b,
+strong,
+i,
+em,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+  font-style: normal;
+}
+
+img {
+  border: none;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+}
+
+ul,
+ol,
+li {
+  list-style: none;
+  overflow-x: hidden;
+}
+
+textarea {
+  resize: none;
+}
+
 /* 滚动条样式 */
 // ::-webkit-scrollbar:horizontal  { width: 5px; background-color: white; }
-::-webkit-scrollbar-thumb { background-color: #999; }
+::-webkit-scrollbar-thumb {
+  background-color: #999;
+}
+
+app-root {
+  height: 100%;
+}
+
+.blue {
+  cursor: pointer;
+  color: #1890ff;
+}
+
+.red {
+  cursor: pointer;
+  color: #ff4d4f;
+}
 
-app-root { height: 100%; }
-.blue {cursor: pointer;color: #1890ff;}
-.red {cursor: pointer;color: #ff4d4f;}
-  
 .ant-tabs-content {
-    height: 100%;
-  }
+  height: 100%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 20px;
+}
+.ant-pagination-next, .ant-pagination-prev{
+  overflow: hidden;
+}
+.pagination {
+  margin: 15px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}