directive

src/main/webapp/app/app.main.module.ts

@@ -105,6 +105,8 @@ import {BTopologyComponent} from './business/b-topology/b-topology.component';
 import {EffectAnalysisComponent} from './business/effect-analysis/effect-analysis.component';
 import {LogAnalysisComponent} from './business/log-analysis/log-analysis.component';
 import {BConfigComponent} from './business/b-config/b-config.component';
+import {BusinessService} from './business/business.service';
+import {BusinessComponent} from './business/modal/business/business.component';
 
 @NgModule({
     imports: [
@@ -213,6 +215,7 @@ import {BConfigComponent} from './business/b-config/b-config.component';
         EffectAnalysisComponent,
         LogAnalysisComponent,
         BConfigComponent,
+        BusinessComponent,
     ],
     providers:[
         OverAllService,
@@ -221,6 +224,7 @@ import {BConfigComponent} from './business/b-config/b-config.component';
         TopologyService,
         AnalysisService,
         WorkService,
+        BusinessService,
         { provide: NZ_I18N, useValue: zh_CN },
     ],
     exports:[

src/main/webapp/app/business/b-config/b-config.component.html

-<p>
-  b-config works!
-</p>
+<div nz-row class="breadcrumbs">
+  <div nz-col nzSpan="12">
+    <nz-breadcrumb class="padding-8-0">
+      <nz-breadcrumb-item>
+        首页
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        业务监管
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        业务配置
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+  </div>
+  <div nz-col nzSpan="2" class="text-right">
+    <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+    <smart-full-screen></smart-full-screen>
+  </div>
+</div>
+
+<div nz-row class="search-form tag-form">
+  <div nz-col nzSpan="12">
+    <nz-select style="width: 200px;" nzPlaceHolder="选择业务" [(ngModel)]="selectedValue"
+               (ngModelChange)="select()">
+      <nz-option nzLabel="按设备类型展开" nzValue="type"></nz-option>
+      <nz-option nzLabel="按资源分组展开" nzValue="group"></nz-option>
+    </nz-select>
+  </div>
+  <div nz-col nzSpan="12" class="text-right">
+    <button nz-button nzType="default" (click)="showAddModal()"><i class="anticon anticon-plus-circle-o"></i>添加</button>
+    <button (click)="openBatchHost(1,'停止')" nz-button nzType="default"><i class="anticon anticon-pause-circle-o"></i>编辑</button>
+    <button (click)="batchDeleteConfirm()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>删除资源</button>
+  </div>
+</div>
+
+
+<!--业务-->
+<smart-business #smartBusiness></smart-business>
\ No newline at end of file

src/main/webapp/app/business/b-config/b-config.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, Output, ViewChild} from '@angular/core';
+import {BusinessComponent} from '../modal/business/business.component';
 
 @Component({
     selector: 'smart-b-config',
@@ -6,10 +7,17 @@ import { Component, OnInit } from '@angular/core';
     styles: []
 })
 export class BConfigComponent implements OnInit {
+    @ViewChild('smartBusiness') smartBusiness: BusinessComponent;
 
-  constructor() { }
+    constructor() {
+    }
 
     ngOnInit() {
     }
 
+    //添加业务
+    showAddModal() {
+        this.smartBusiness.showModal('添加业务');
+    }
+
 }

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

 import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {SERVER_API_URL} from '../app.constants';
+import {Observable} from 'rxjs/Rx';
+import {CommonService} from '../shared/common/common.service';
 
 @Injectable()
 export class BusinessService {
 
-  constructor() { }
+    constructor(private http: HttpClient,private commonSer:CommonService) {
+    }
+
+    //添加分组
+    createService(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/itservice/create', data);
+    }
+
+    //编辑分组
+    updateService(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/itservice/update', data);
+    }
+
+    //删除服务
+    deleteService(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/itservice/delete', data);
+    }
+
+   //查询业务树
+    findChild(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/itservice/findChild', data);
+    }
+
+    //关联网站监测
+    relatedHttptest(paramsServiceId,paramshttpestId): Observable<any> {
+        return this.http.get(SERVER_API_URL + '/itservice/relatedHttptest/'+paramsServiceId+"/"+paramshttpestId);
+    }
+
+    //查询告警时间
+    selectAlarmsClock(params): Observable<any> {
+        return this.http.get(SERVER_API_URL + '/itservice/selectAlarmsClock/'+params);
+    }
 }

src/main/webapp/app/business/modal/business/business.component.html

+<!--业务modal-->
+<nz-modal [(nzVisible)]="isVisiable" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
+  <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" nzRequired nzFor="algorithm">状态计算算法</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <nz-select nzAllowClear id="algorithm"  formControlName="algorithm" nzPlaceHolder="状态计算算法">
+          <nz-option nzValue="1" nzLabel="问题,至少有一个问题"></nz-option>
+          <nz-option nzValue="2" nzLabel="问题,都有问题"></nz-option>
+          <nz-option nzValue="0" nzLabel="不计算"></nz-option>
+        </nz-select>
+        <nz-form-explain *ngIf="validateForm.get('algorithm').dirty && validateForm.get('algorithm').errors">请选择用于计算服务状态的算法!</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" nzFor="showsla">计算SLA</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <label nz-checkbox [(ngModel)]="checked" [ngModelOptions]="{standalone: true}" (ngModelChange)="changeModal()"></label>
+        <input style="width: 100px;" nz-input type="text" formControlName="showsla">
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="sortorder">排序(0->999)</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input type="text" nz-input formControlName="sortorder" placeholder="组名称">
+        <nz-form-explain *ngIf="validateForm.get('sortorder').dirty && validateForm.get('sortorder').errors">请输入分组名称</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
+

src/main/webapp/app/business/modal/business/business.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {EmitService} from '../../../shared/event/eventEmitter';
+import {OverAllService} from '../../../overAll/overAll.service';
+import {NzMessageService} from 'ng-zorro-antd';
+import {BusinessService} from '../../business.service';
+
+@Component({
+  selector: 'smart-business',
+  templateUrl: './business.component.html',
+  styles: []
+})
+export class BusinessComponent implements OnInit {
+    @Output() add = new EventEmitter<any>();
+
+    title;
+    isVisiable = false;
+    isOkLoading = false;
+    validateForm: FormGroup;
+
+    checked = false;  //选择SLA
+
+    groupid;
+
+    constructor(private fb: FormBuilder, private busineSer: BusinessService,
+                private message: NzMessageService, private emitService: EmitService) {
+    }
+
+    ngOnInit() {
+        this.initForm();
+    }
+
+    changeModal(){
+        if(this.checked){
+            this.validateForm.get('showsla').enable();
+        }else{
+            this.validateForm.get('showsla').disable();
+        }
+
+    }
+
+    //初始化
+    initForm(){
+        this.checked = false;
+        this.validateForm = this.fb.group({
+            name: ['', [Validators.required]],
+            algorithm: [''],
+            showsla: ['99.9000'],
+            sortorder: ['1'],
+        });
+        this.validateForm.get('showsla').disable();
+    }
+
+    showModal(title): void {
+        this.title = title;
+        this.isVisiable = true;
+    }
+
+    showEditModal(title,item){
+        this.title = title;
+        this.isVisiable = true;
+        this.groupid = item.groupid;
+        this.validateForm.patchValue(item);
+    }
+
+    handleOk() {
+        for (let i in this.validateForm.controls) {
+            this.validateForm.controls[i].markAsDirty();
+            this.validateForm.controls[i].updateValueAndValidity();
+        }
+        if(this.validateForm.invalid){
+            return false;
+        }
+        this.isOkLoading = true;
+
+        if(this.title == '添加业务'){
+            this.create();
+        }else{
+            this.update();
+        }
+    }
+
+    create() {
+        this.busineSer.createService(this.validateForm.value).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.message.info('添加成功');
+                    this.isVisiable = false;
+                    this.add.emit();
+                    this.initForm();
+                } else {
+                    this.message.info(res.errMsg);
+                }
+                this.isOkLoading = false;
+            }
+        );
+    }
+
+    update() {
+        const data = {
+            groupid:this.groupid,
+            groupDescribe:this.validateForm.value.groupDescribe,
+            name:this.validateForm.value.name
+        }
+        this.busineSer.updateService(data).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.message.info('修改成功');
+                    this.isVisiable = false;
+                    this.add.emit();
+                    this.initForm();
+                } else {
+                    this.message.info(res.errMsg);
+                }
+                this.isOkLoading = false;
+            }
+        );
+    }
+
+    handleCancel(): void {
+        this.isVisiable = false;
+        this.initForm();
+    }
+
+}

src/main/webapp/app/modal/new-type/new-type.component.ts

-import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import {Component, OnInit, EventEmitter, Output} from '@angular/core';
 
 @Component({
     selector: 'smart-new-type',
     templateUrl: './new-type.component.html',
     styles: [
-      `.ant-form-item{
+            `.ant-form-item {
             margin: 24px 0;
         }`
     ]
@@ -17,9 +17,11 @@ export class NewTypeComponent implements OnInit {
     name;  //名称
     modalMsg = false;  //message
 
-  constructor() { }
+    constructor() {
+    }
 
-  ngOnInit() {}
+    ngOnInit() {
+    }
 
     showModal(title): void {
         this.isNew = true;
@@ -28,10 +30,10 @@ export class NewTypeComponent implements OnInit {
     }
 
     handleOk() {
-        if(!this.name){
+        if (!this.name) {
             this.modalMsg = true;
             return false;
-        }else{
+        } else {
             this.modalMsg = false;
             this.isNew = false;
             this.data.emit(this.name);

src/main/webapp/app/modal/select-trigger/select-trigger.component.html

+<!--选择阈值-->
+<p>
+  select-trigger works!
+</p>

src/main/webapp/app/modal/select-trigger/select-trigger.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'smart-select-trigger',
+  templateUrl: './select-trigger.component.html',
+  styles: []
+})
+export class SelectTriggerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/main/webapp/app/overAll/basic/basic.component.html

@@ -67,6 +67,7 @@
         </button>
     </div>
 </div>
+
 <nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading" [nzShowPagination]="frontPagination">
     <thead>
     <tr>

src/main/webapp/app/shared/common/disable-control.directive.ts

+import {Directive, Input} from '@angular/core';
+import {NgControl} from '@angular/forms';
+
+@Directive({
+  selector: '[smartDisableControl]'
+})
+export class DisableControlDirective {
+
+    @Input() set disableControl( condition : boolean ) {
+      console.log(condition);
+        const action = condition ? 'disable' : 'enable';
+        this.ngControl.control[action]();
+    }
+
+    constructor( private ngControl : NgControl ) {
+    }
+
+}

src/main/webapp/app/shared/shared.module.ts

@@ -19,6 +19,7 @@ import {
 import {ReactiveFormsModule} from '@angular/forms';
 import {CommonService} from './common/common.service';
 import {UtilService} from './common/util.service';
+import {DisableControlDirective} from './common/disable-control.directive';
 
 @NgModule({
     imports: [
@@ -44,13 +45,14 @@ import {UtilService} from './common/util.service';
         NgbActiveModal,
         CommonService,
         UtilService,
+        DisableControlDirective,
     ],
     entryComponents: [JhiLoginModalComponent],
     exports: [
         BootappSharedCommonModule,
         JhiLoginModalComponent,
         HasAnyAuthorityDirective,
-        DatePipe
+        DatePipe,
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]