log

src/main/webapp/app/alarm/alarm-set/alarm-set.component.html

-<p>
-  alarm-set works!
-</p>
+<div nz-row class="breadcrumbs">
+  <div nz-col nzSpan="16">
+    <nz-breadcrumb class="padding-8-0">
+      <nz-breadcrumb-item>
+        首页
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        <a>告警管理</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        告警推送设置
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+  </div>
+  <div nz-col nzSpan="8" class="text-right">
+    <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
+  </div>
+</div>
+
+<div nz-row class="search-form">
+  <div nz-col nzSpan="12">
+    <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择告警组" [(ngModel)]="alertGroupId" (ngModelChange)="getList()">
+      <ng-container *ngFor="let item of groupList">
+        <nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
+      </ng-container>
+    </nz-select>
+  </div>
+  <div nz-col nzSpan="12" class="text-right">
+    <button nz-button nzType="default" (click)="showGroupModal()"><i class="anticon anticon-plus"></i>添加
+    </button>
+    <button nz-button nzType="default"><i class="anticon anticon-pause-circle-o"></i>编辑</button>
+    <button nz-button nzType="default"><i class="anticon anticon-play-circle-o"></i>删除</button>
+    <button nz-button nzType="default"><i class="anticon anticon-close-circle"></i>暂停</button>
+  </div>
+</div>
+<div nz-row class="search-form">
+  <div nz-col nzSpan="16">
+    <button (click)="selectJ()" nz-button nzType="default"><i class="anticon anticon-search"></i>新增告警推送</button>
+  </div>
+</div>
+<nz-table #nzTable [nzData]="setList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
+  <thead>
+  <tr>
+    <th nzShowSort>名称</th>
+    <th>状态</th>
+    <th>发送方式</th>
+    <th nzWidth="15%">发送对象</th>
+    <th nzWidth="15%">生成事件</th>
+    <th style="text-align: center">操作</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of setList">
+    <td class="round-tag">
+      <nz-tag [nzColor]="'#fc0d1b'"></nz-tag>
+      {{data.name}}
+    </td>
+    <td>{{data.status}}</td>
+    <td>发送方式</td>
+    <td>发送对象</td>
+    <td>生成事件</td>
+    <td class="handle text-center">
+      <span (click)="editSend()">编辑</span>
+      <span (click)="deleteSend(data)">删除</span>
+      <span>启用</span>
+      <span>暂停</span>
+    </td>
+  </tr>
+  </tbody>
+</nz-table>
+
+<!--告警组-->
+<smart-alarm-group #smartAlarmGroup></smart-alarm-group>
\ No newline at end of file

src/main/webapp/app/alarm/alarm-set/alarm-set.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {AlarmService} from '../alarm.service';
+import {pageSize} from '../../app.constants';
+import {AlarmGroupComponent} from '../modal/alarm-group/alarm-group.component';
 
 @Component({
     selector: 'smart-alarm-set',
@@ -6,10 +9,53 @@ import { Component, OnInit } from '@angular/core';
     styles: []
 })
 export class AlarmSetComponent implements OnInit {
+    @ViewChild('smartAlarmGroup') smartAlarmGroup: AlarmGroupComponent;
+    setList = [];
+    alertGroupId;
+    groupList = [];
 
-  constructor() { }
+    pageNum;
+    pageCount = pageSize;
+    totalNum;
+
+    constructor(private alarmSer: AlarmService) {
+    }
 
     ngOnInit() {
+        this.getList();
+        this.getGroupAlarm();
+    }
+
+    //获取推送设置列表
+    getList() {
+        const data = {
+            eventPage: this.pageNum,
+            pageRecords: this.pageCount,
+            alertGroupId: this.alertGroupId
+        };
+        this.alarmSer.actionFind(data).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.setList = res.data.data;
+                    this.totalNum = res.data.totalNum;
+                }
+            }
+        );
     }
 
+    //获取告警组
+    getGroupAlarm() {
+        this.alarmSer.alertGroupFind().subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.groupList = res.data;
+                }
+            }
+        );
+    }
+
+    //添加告警组
+    showGroupModal() {
+        this.smartAlarmGroup.addModal();
+    }
 }

src/main/webapp/app/alarm/alarm.service.ts

@@ -50,8 +50,13 @@ export class AlarmService {
     }
 
     //查询所有告警组
-    alertGroupFind(data): Observable<any>{
-        return this.http.post(SERVER_API_URL + '/alertGroup/findAll',data);
+    alertGroupFind(): Observable<any>{
+        return this.http.get(SERVER_API_URL + '/alertGroup/findAll');
+    }
+
+    //创建告警组
+    alertGroupCreate(data): Observable<any>{
+        return this.http.post(SERVER_API_URL + '/alertGroup/create',data);
     }
 
     //发送方式列表

src/main/webapp/app/alarm/modal/alarm-group/alarm-group.component.html

-<p>
-  alarm-group works!
-</p>
+<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">告警组名称</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input type="text" nz-input formControlName="name" placeholder="告警组名称" >
+        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入告警组名称</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" >组描述</nz-form-label>
+      <nz-form-control [nzSpan]="12" >
+        <textarea formControlName="description" nz-input rows="2" placeholder="分组描述"></textarea>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>

src/main/webapp/app/alarm/modal/alarm-group/alarm-group.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {AlarmService} from '../../alarm.service';
+import {
+    FormBuilder,
+    FormControl,
+    FormGroup,
+    ValidationErrors,
+    Validators
+} from '@angular/forms';
+import {NzMessageService} from 'ng-zorro-antd';
 
 @Component({
     selector: 'smart-alarm-group',
@@ -7,9 +16,65 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AlarmGroupComponent implements OnInit {
 
-  constructor() { }
+    title;
+    isVisible = false;
+
+    validateForm: FormGroup;
+    name;
+    description;
+
+    constructor(private alarmSer:AlarmService,private fb:FormBuilder,
+                private message:NzMessageService) {
+    }
 
     ngOnInit() {
+        this.initForm();
+    }
+
+    //新增告警组
+    addModal() {
+        this.title = '新增告警组';
+        this.isVisible = true;
+    }
+
+    //编辑告警组
+    editModal() {
+        this.title = '编辑告警组';
+        this.isVisible = true;
+    }
+
+    //取消
+    handleCancel() {
+        this.isVisible = false;
+    }
+
+    //确定
+    handleOk() {
+        // console.log(this.validateForm.valid);
+        for(const i in this.validateForm.controls) {
+            this.validateForm.controls[ i ].markAsDirty();
+            this.validateForm.controls[ i ].updateValueAndValidity();
+        }
+        if(this.validateForm.invalid){
+            return false;
+        }
+
+        this.alarmSer.alertGroupCreate(this.validateForm.value).subscribe(
+            (res)=>{
+                if(res.errCode == 10000){
+                    this.isVisible = false;
+                }
+                this.message.info(res.errMsg);
+            }
+        )
+    }
+
+    //初始化
+    initForm(){
+        this.validateForm = this.fb.group({
+            name:[null,[Validators.required]],
+            description:[null]
+        })
     }
 
 }