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: '取消' }); } }