Skip to content
threshold.component.html 5.96 KiB
Newer Older
wangqinghua's avatar
wangqinghua committed
<section>
    <nz-modal [nzWidth]="880" [(nzVisible)]="isVisiable" [nzTitle]="title"
              (nzOnCancel)="handleCheckCancel()"
              (nzOnOk)="saveTrigger()">
        <nz-form-item nzFlex>
            <nz-form-control [nzOffset]="4" [nzSpan]="14">
                <nz-radio-group [(ngModel)]="conditionType">
                    <label nz-radio-button nzValue="commonly"><span>常规</span></label>
                    <label nz-radio-button nzValue="high"><span>高级</span></label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <ng-container *ngIf="conditionType == 'commonly'">
            <nz-form-item class="form-select">
                <nz-form-control class="form-select">
                    <div nz-row [nzGutter]="12">
                        <nz-form-control nz-col [nzPush]="3" [nzSpan]="6">
                            <button nz-button nzType="primary" nzSize="small" (click)="addcondition()">添加条件</button>
                            <span>危险阈值</span>
                        </nz-form-control>
                    </div>
                    <div nz-row [nzGutter]="12" *ngFor="let fault of conditionList;let i = index;">
                        <nz-form-control nz-col [nzSpan]="3"></nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.and"
                                       *ngIf="i>0">
                                <nz-option nzValue=" and " nzLabel="并且"></nz-option>
                                <nz-option nzValue=" or " nzLabel="或"></nz-option>
                            </nz-select>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="4">
                            <button class="tag-button" nz-button nzType="default">返回值</button>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                <nz-option nzValue="=" nzLabel="="></nz-option>
                                <nz-option nzValue=">" nzLabel=">"></nz-option>
                                <nz-option nzValue="<" nzLabel="<"></nz-option>
                            </nz-select>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <input type="text" placeholder="值" nz-input name="value" [(ngModel)]="fault.value">
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="2">
                            <button nz-button nzType="primary" (click)="deleteCondition(i)"><i style="color: #fff"
                                    class="anticon anticon-close-circle-o"></i></button>
                        </nz-form-control>
                    </div>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item class="form-select">
                <nz-form-control class="form-select">
                    <div nz-row [nzGutter]="12">
                        <nz-form-control nz-col [nzPush]="3" [nzSpan]="6">
                            <button nz-button nzType="primary" nzSize="small" (click)="addFault()">添加条件</button>
                            <span>故障阈值</span>
                        </nz-form-control>
                    </div>
                    <div nz-row [nzGutter]="12" *ngFor="let fault of faultConditionList;let i = index;">
                        <nz-form-control nz-col [nzSpan]="3"></nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <nz-select name="interfaces_main" [(ngModel)]="fault.and" *ngIf="i>0">
                                <nz-option nzValue=" and " nzLabel="并且"></nz-option>
                                <nz-option nzValue=" or " nzLabel="或"></nz-option>
                            </nz-select>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="4">
                            <button class="tag-button" nz-button nzType="default">返回值</button>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                <nz-option nzValue="=" nzLabel="="></nz-option>
                                <nz-option nzValue=">" nzLabel=">"></nz-option>
                                <nz-option nzValue="<" nzLabel="<"></nz-option>
                            </nz-select>
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="5">
                            <input type="text" placeholder="值" nz-input name="value" [(ngModel)]="fault.value">
                        </nz-form-control>
                        <nz-form-control nz-col [nzSpan]="2">
                            <button nz-button nzType="primary" (click)="deleteFault(i)"><i style="color: #fff"
                                    class="anticon anticon-close-circle-o"></i></button>
                        </nz-form-control>
                    </div>
                </nz-form-control>
            </nz-form-item>
        </ng-container>
        <ng-container *ngIf="conditionType == 'high'">
            <nz-form-item nzFlex>
                <nz-form-control [nzOffset]="4" [nzSpan]="14">
                    <p>危险阈值</p>
                    <textarea rows="4" nz-input [(ngModel)]="triggerObj.condition"></textarea>
                    <p>故障阈值</p>
                    <textarea rows="4" nz-input [(ngModel)]="triggerObj.faultCondition"></textarea>
                </nz-form-control>
            </nz-form-item>
        </ng-container>
    </nz-modal>
</section>