[新增]新增和编辑摄像头

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

@@ -1,25 +0,0 @@
-<div class="box">
-    <form nz-form [formGroup]="validateForm">
-        <nz-form-item>
-            <nz-form-control>
-                <nz-input-group>
-                    <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
-                </nz-input-group>
-            </nz-form-control>
-        </nz-form-item>
-        <nz-form-item>
-            <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-control>
-                <nz-input-group>
-                    <input nz-input type="text" formControlName="code" placeholder="请输入编号" />
-                </nz-input-group>
-            </nz-form-control>
-        </nz-form-item>
-    </form>
-</div>

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

@@ -6,9 +6,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { AddhostComponent } from './addhost/addhost.component';
-import { AddcameraComponent } from './addcamera/addcamera.component';
 import { EdithostComponent } from './edithost/edithost.component';
-import { EditcameraComponent } from './editcamera/editcamera.component';
 import { Router } from '@angular/router';
 @Component({
   selector: 'app-analysis-of-the-host',
@@ -168,8 +166,7 @@ export class AnalysisOfTheHostComponent implements OnInit {
   }
 
   config(data) {
-    console.log(data)
-    this.router.navigate([`/system/host/${data.id}`])
+    this.router.navigate([`/system/host/camera`], { queryParams: { 'hostId': data.id, 'orId': this.selectedOilStation.id } })
   }
 
 }

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

@@ -1,25 +0,0 @@
-<div class="box">
-    <form nz-form [formGroup]="validateForm">
-        <nz-form-item>
-            <nz-form-control>
-                <nz-input-group>
-                    <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
-                </nz-input-group>
-            </nz-form-control>
-        </nz-form-item>
-        <nz-form-item>
-            <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-control>
-                <nz-input-group>
-                    <input nz-input type="text" formControlName="code" placeholder="请输入编号" />
-                </nz-input-group>
-            </nz-form-control>
-        </nz-form-item>
-    </form>
-</div>

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

@@ -0,0 +1,51 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="user">用户名</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="user" placeholder="请输入用户名" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="password" placeholder="请输入密码" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="url">地址</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="url" placeholder="请输入地址" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">类型</nz-form-label>
+            <nz-form-control>
+                <nz-select formControlName="type" nzPlaceHolder="请选择类型">
+                    <nz-option [nzValue]="0" nzLabel="收银区"></nz-option>
+                    <nz-option [nzValue]="1" nzLabel="进口"></nz-option>
+                    <nz-option [nzValue]="2" nzLabel="出口"></nz-option>
+                    <nz-option [nzValue]="3" nzLabel="卸油区"></nz-option>
+                    <nz-option [nzValue]="4" nzLabel="加油区1"></nz-option>
+                    <nz-option [nzValue]="5" nzLabel="加油区2"></nz-option>
+                    <nz-option [nzValue]="6" nzLabel="加油区3"></nz-option>
+                    <nz-option [nzValue]="7" nzLabel="加油区4"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

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

@@ -15,9 +15,12 @@ export class AddcameraComponent implements OnInit {
   ngOnInit(): void {
     this.validateForm = this.fb.group({
       name: [null, [Validators.required]],
-      ip: [null, [Validators.required]],
-      code: [null, [Validators.required]]
+      user: [null, [Validators.required]],
+      password: [null, [Validators.required]],
+      url: [null, [Validators.required]],
+      type: [null, [Validators.required]]
     });
   }
 
+
 }

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

@@ -0,0 +1,51 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="user">用户名</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="user" placeholder="请输入用户名" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="password" placeholder="请输入密码" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="url">地址</nz-form-label>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="url" placeholder="请输入地址" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">类型</nz-form-label>
+            <nz-form-control>
+                <nz-select formControlName="type" nzPlaceHolder="请选择类型">
+                    <nz-option [nzValue]="0" nzLabel="收银区"></nz-option>
+                    <nz-option [nzValue]="1" nzLabel="进口"></nz-option>
+                    <nz-option [nzValue]="2" nzLabel="出口"></nz-option>
+                    <nz-option [nzValue]="3" nzLabel="卸油区"></nz-option>
+                    <nz-option [nzValue]="4" nzLabel="加油区1"></nz-option>
+                    <nz-option [nzValue]="5" nzLabel="加油区2"></nz-option>
+                    <nz-option [nzValue]="6" nzLabel="加油区3"></nz-option>
+                    <nz-option [nzValue]="7" nzLabel="加油区4"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

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

@@ -9,16 +9,20 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./editcamera.component.scss']
 })
 export class EditcameraComponent implements OnInit {
+
   @Input() data: any
   validateForm!: FormGroup;
   constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
 
   ngOnInit(): void {
     let datacopy = JSON.parse(JSON.stringify(this.data))
+    console.log('编辑数据', datacopy)
     this.validateForm = this.fb.group({
       name: [datacopy.name, [Validators.required]],
-      ip: [datacopy.ipAdress, [Validators.required]],
-      code: [datacopy.code, [Validators.required]]
+      user: [datacopy.user, [Validators.required]],
+      password: [datacopy.password, [Validators.required]],
+      url: [datacopy.url, [Validators.required]],
+      type: [datacopy.type, [Validators.required]]
     });
   }
 

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

@@ -18,21 +18,25 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let data of basicTable.data">
-                        <td>{{ data.name }}</td>
-                        <td>{{ data.user }}</td>
-                        <td>{{ data.password }}</td>
-                        <td>{{ data.uri }}</td>
-                        <td>{{ data.type }}</td>
+                    <tr *ngFor="let item of basicTable.data">
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.user }}</td>
+                        <td>{{ item.password }}</td>
+                        <td>{{ item.url }}</td>
+                        <td>{{ item.type }}</td>
                         <td>
-                            <span class="blue">编辑</span>
+                            <span class="blue" style="margin-right: 12px;" (click)="editCamera(item)">编辑</span>
+                            <span class="red" (click)="deleteCamera(item)">删除</span>
                         </td>
                     </tr>
                 </tbody>
             </nz-table>
+            <div class="footer">
+                <button nz-button nzType="primary">连接</button>
+            </div>
         </div>
     </div>
     <div class="rightbox">
-
+      
     </div>
 </div>

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

@@ -14,16 +14,24 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .cameraList{
+
+  .cameraList {
     flex: 1;
     padding: 0 20px;
-    .title{
+
+    .title {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 12px;
     }
+    .footer{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin: 12px 0;
+    }
   }
 }
 
@@ -32,7 +40,4 @@
   box-sizing: border-box;
   padding: 20px;
 }
-.blue{
-  cursor: pointer;
-  color: #1890ff;
-}
+

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

@@ -1,12 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, Route, Router } from '@angular/router';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NzFormTooltipIcon } from 'ng-zorro-antd/form';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { AddcameraComponent } from './addcamera/addcamera.component';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { EditcameraComponent } from './editcamera/editcamera.component';
 interface Camera {
   name: string;
   user: string;
   password: string;
-  uri: string;
+  url: string;
   type: number
 }
 
@@ -19,27 +24,115 @@ interface Camera {
 export class HostConfigComponent implements OnInit {
 
 
-  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder) { }
-
-  data
+  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef, private http: HttpClient) { }
 
+  hostId//主机id
+  orId//加油站id
   ngOnInit(): void {
-    console.log(this.route.snapshot.params.id)
-    this.data = this.route.snapshot.params.id
+    this.hostId = this.route.snapshot.queryParams.hostId
+    this.orId = this.route.snapshot.queryParams.orId
   }
   listOfData: Camera[] = [
     {
       name: '1',
       user: 'John Brown',
       password: '32',
-      uri: 'New York No. 1 Lake Park',
+      url: 'New York No. 1 Lake Park',
       type: 0
     }
   ];
   goback() {
     history.go(-1)
   }
-  addCamera(){
-    
+  //摄像头
+  getCamera() {
+
+  }
+  addCamera() {
+    const modal = this.modal.create({
+      nzTitle: '新增加油站摄像头',
+      nzContent: AddcameraComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 388,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            // let body = {
+            //   organizationUnitId: '111',
+            //   ipAdress: instance.validateForm.value.ip,
+            //   code: instance.validateForm.value.code,
+            //   name: instance.validateForm.value.name,
+            // }
+            // this.http.post('/api/services/app/Camera/Create', body).subscribe(data => {
+            //   resolve(data)
+            //   this.message.create('success', '创建成功！');
+            //   this.getCamera()
+            //   return true
+            // }, err => {
+            //   return false
+            // })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+  }
+  editCamera(data) {
+    console.log(data)
+    const modal = this.modal.create({
+      nzTitle: '编辑加油站摄像头',
+      nzContent: EditcameraComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 388,
+      nzComponentParams: {
+        data: data
+      },
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            // data.name = instance.validateForm.value.name
+            // data.code = instance.validateForm.value.code
+            // data.ipAdress = instance.validateForm.value.ip
+            // this.http.put('/api/services/app/Camera/Update', data).subscribe(data => {
+            //   resolve(data)
+            //   this.message.create('success', '编辑成功！');
+            //   this.getCamera()
+            //   return true
+            // }, err => {
+            //   return false
+            // })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+  }
+  deleteCamera(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.name}这个摄像头吗?`,
+      nzOkText: '确定',
+      nzOkType: 'default',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Camera/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getCamera()
+        })
+      },
+      nzCancelText: '取消'
+    });
   }
 }

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

@@ -8,7 +8,7 @@ import { HostConfigComponent } from './host-config/host-config.component';
 const routes: Routes = [
     { path: 'organization', component: OrganizationComponent },
     { path: 'host', component: AnalysisOfTheHostComponent },
-    { path: 'host/:id', component: HostConfigComponent },
+    { path: 'host/camera', component: HostConfigComponent },
 ];
 
 @NgModule({

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

@@ -24,8 +24,8 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component';
 import { AddhostComponent } from './analysis-of-the-host/addhost/addhost.component';
 import { EdithostComponent } from './analysis-of-the-host/edithost/edithost.component';
-import { AddcameraComponent } from './analysis-of-the-host/addcamera/addcamera.component';
-import { EditcameraComponent } from './analysis-of-the-host/editcamera/editcamera.component';
+import { AddcameraComponent } from './host-config/addcamera/addcamera.component';
+import { EditcameraComponent } from './host-config/editcamera/editcamera.component';
 import { HostConfigComponent } from './host-config/host-config.component';
 import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 @NgModule({

src/styles.scss

@@ -18,4 +18,7 @@ textarea { resize: none; }
 ::-webkit-scrollbar { width: 5px; background-color: white; }
 ::-webkit-scrollbar-thumb { background-color: #999; }
 
-app-root { height: 100%; }
+app-root { height: 100%; }
+.blue {cursor: pointer;color: #1890ff;}
+.red {cursor: pointer;color: #ff4d4f;}
+