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

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;
  url: string;
  type: number
}

@Component({
  selector: 'app-host-config',
  templateUrl: './host-config.component.html',
  styleUrls: ['./host-config.component.scss']
})

export class HostConfigComponent implements OnInit {


  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 {
    this.hostId = this.route.snapshot.queryParams.hostId
    this.orId = this.route.snapshot.queryParams.orId
  }
  listOfData: Camera[] = [
    {
      name: '1',
      user: 'John Brown',
      password: '32',
      url: 'New York No. 1 Lake Park',
      type: 0
    }
  ];
  goback() {
    history.go(-1)
  }
  //摄像头
  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: '取消'
    });
  }
}