import { Component, OnInit, ViewContainerRef } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { NzModalService } from 'ng-zorro-antd/modal'; import { GetOutOfLineDetailsComponent } from './get-out-of-line-details/get-out-of-line-details.component'; import { TreeService } from 'src/app/service/tree.service'; @Component({ selector: 'app-today-warning', templateUrl: './today-warning.component.html', styleUrls: ['./today-warning.component.scss'] }) export class TodayWarningComponent implements OnInit { validateForm!: FormGroup; constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } ngOnInit(): void { this.validateForm = this.fb.group({ level: [null], type: [null], site: [null], datePicker: [null] }); this.yujingType() //this.getAllOrganization() } //预警类型接口 yujingTypes: any //预警接口数据 yujingType() { this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => { this.yujingTypes = data.result } ) } submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } console.log(this.validateForm) } 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(); } } list: any = [ { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 2, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 3, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' } ] showModal(): void { const modal = this.modal.create({ nzContent: GetOutOfLineDetailsComponent, nzViewContainerRef: this.viewContainerRef, nzWidth: 1200, nzBodyStyle: { 'border': '1px solid #6d9cc7', 'border-radius': '0px', 'padding': '0px', 'box-shadow': '0 0 8px 0 #fff', 'background': '#000D21', }, nzComponentParams: { data: { type: 1 } }, nzFooter: null, nzOnOk: async () => { } }); const instance = modal.getContentComponent(); } }