diff options
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.html | 28 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 331 |
2 files changed, 208 insertions, 151 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html index 378cebc2..7fbbc039 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -51,24 +51,32 @@ <span>Report Time: </span> <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> - <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> --> - <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button> + <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> </div> </div> <div class="content" [@showHideAnimate]="state"> <div class="title"> <ul> - <li><h5>All</h5> <p>{{alarmList.all }}</p></li> - <li><h5>Closed</h5> <p>{{alarmList.closed }}</p></li> - <li><h5>Active</h5> <p>{{alarmList.activeNum }}</p></li> + <li> + <h5>All</h5> + <p>{{alarmList.all }}</p> + </li> + <li> + <h5>Closed</h5> + <p>{{alarmList.closed }}</p> + </li> + <li> + <h5>Active</h5> + <p>{{alarmList.activeNum }}</p> + </li> </ul> </div> <div class="chart"> <h3>Alarm Chart</h3> <nz-radio-group [(ngModel)]="size"> - <label nz-radio-button nzValue="day"> day </label> - <label nz-radio-button nzValue="month">month</label> - </nz-radio-group> + <label nz-radio-button nzValue="day" (click)="day()"> day </label> + <label nz-radio-button nzValue="month" (click)="month()">month</label> + </nz-radio-group> <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}"> <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> </div> @@ -96,12 +104,12 @@ <td>{{item.specificProblem}}</td> <td>{{item.sequence}}</td> <td>{{item.status}}</td> - <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td> + <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td> </tr> </tbody> </nz-table> </div> </div> <div [@showHideAnimate]="state2"> -<app-details></app-details> +<app-details [detailId]="detailId"></app-details> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts index d4372113..3f563b6e 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -13,108 +13,188 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; import { MyhttpService } from '../myhttp.service'; -import * as addDays from 'date-fns/add_days'; import { showHideAnimate, slideToRight } from '../animates'; - +import { DatePipe } from "@angular/common" @Component({ selector: 'app-alarm', templateUrl: './alarm.component.html', styleUrls: ['./alarm.component.less'], animations: [ showHideAnimate, slideToRight - ] + ], + providers: [DatePipe] }) export class AlarmComponent implements OnInit { size = 'day'; @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - public currentPage:number=1; - public pageSize:number=5; - public sourceName:string=''; - public priority:string =''; - public startTime:string =''; - public endTime:string =''; - public vfStatus:string =''; + public currentPage: number = 1; + public pageSize: number = 5; + public sourceName: string = ''; + public priority: string = ''; + public startTime: string = ''; + public endTime: string = ''; + public vfStatus: string = ''; + public sourceNameList:Array<any> =['---auto---']; list: any; - sourcenames:any; + sourcenames: any; constructor( - private myhttp:MyhttpService) { } - ngOnInit() { - // this.getAlarmFormData(); - // this. getSourceNames(); - // this.getstatuscount(); - } + private datePipe: DatePipe, + private myhttp: MyhttpService) { } + ngOnInit() { + this.getAlarmFormData(); + this.getSourceNames(); + // this.getstatuscount(); + } // Filter box - sourceNameList = []; - sourceNameSelected = this.sourceNameList; + sourceNameSelected = this.sourceNameList[0]; - priorityList = ['---auto---','Critical','Major','Minor','Warning']; + priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning']; prioritySelected = this.priorityList[0]; - - statusList = ['---auto---','active','Close']; + + statusList = ['---auto---', 'active', 'Close']; statusSelected = this.statusList[0]; - - choseSourceName(item){ - console.log(item,'item1'); + + choseSourceName(item) { + if(item == "---auto---"){ + this.sourceName = ''; + }else{ + this.sourceName = item; + } this.sourceNameSelected = item; - return this.sourceName = item; + } - chosePriority(item){ - console.log(item); + chosePriority(item) { this.prioritySelected = item; - return this.priority = item; + if(item == "---auto---"){ + this.priority = ''; + }else{ + this.priority = item; + } } - choseStatus(item){ - console.log(item); + choseStatus(item) { this.statusSelected = item; - return this.vfStatus = item; + if(item == "---auto---"){ + this.vfStatus = ''; + }else{ + this.vfStatus = item; + } + } + getSourceNames() { + this.myhttp.getSourceNames().subscribe((data) => { + for(let i=0;i<data.length;i++){ + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) } - // getSourceNames(){ - // this.myhttp.getSourceNames().subscribe((data)=>{ - // this.sourceNameList=data; - // console.log(data,'datass'); - // }) - // } // Date screening - dateRange = [ addDays(new Date(), -30), new Date() ]; + dateRange = [(new Date(), -30), new Date()]; onChange(result: Date): void { - console.log('onChange: ', result); + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd-HH:mm:ss'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd-HH:mm:ss'); } - sort(e){ + + sort(e) { } // total alarmList = { - all:200, - closed:0, - activeNum:0 + all: 200, + closed: 0, + activeNum: 0 } // total data - // getstatuscount(){ - // this.myhttp.getstatuscount().subscribe((data)=>{ - // this.alarmList.activeNum = data[0]; - // this.alarmList.closed = data[1]; - - // }) - // } + getstatuscount(){ + this.myhttp.getstatuscount().subscribe((data)=>{ + this.alarmList.activeNum = data[0]; + this.alarmList.closed = data[1]; + }) + } + getAlarmFormData() { + + this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { + this.list = data.alarms; + }) + this.getAlarmChartData(event); + } + getAlarmChartData(event) { + let paramsObj = { + alarmSourceName: this.sourceName, + startTime: this.startTime, + endTime: this.endTime + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } + // day alarmchartdata + day() { + let paramsObj = { + alarmSourceName: this.sourceName, + day:"day" + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } + month() { + let paramsObj = { + alarmSourceName: this.sourceName, + day:"month" + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } //Line chart alarmShow = false; - alarmChartData:Object; - alarmChartInit:Object = { - height:380, - option:{ + alarmChartData: Object; + alarmChartInit: Object = { + height: 380, + option: { legend: { bottom: '0px', data: ['All', 'Active', 'Closed'] }, + tooltip: { + trigger: 'axis', + }, dataZoom: [ { type: 'slider', @@ -124,91 +204,78 @@ export class AlarmComponent implements OnInit { height: 10, end: 40 } - ], + ], series: [ { - name: 'All', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_one - data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65,38, 52, 64, 58, 69, 87, 76, 33, 64, 87,40, 45, 38, 52, 64, 58, 69, 87, 76,40, 45, 38, 52, 64, 58, 69, 87, 76], - itemStyle: { - color: "#526b75" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'All', + type: 'line', + smooth: true, + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 40, 45, 38, 52, 64, 58, 69, 87, 76, 40, 45, 38, 52, 64, 58, 69, 87, 76], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } }, { - name: 'Active', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22], - itemStyle: { - color: "#fb6e6e" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } }, { - name: 'Closed', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 125], - itemStyle: { - color: "#3fa8eb" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'Closed', + type: 'line', + smooth: true,// + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } } ] } }; - getAlarmChartData(){ - let paramsObj = { - alarmSourceName:this.sourceNameSelected - } - this.myhttp.getHomePerformanceChartData(paramsObj) - .subscribe((data)=>{ - this.alarmChartData = { - series:[ - {data:data.CPU}, - {data:data.CPU}, - {data:data.Memory} - ] - } - },(err)=>{ - console.log(err); - }) - } + //Detail page title display detailshow = false; // Show hidden animation state = "show"; state2 = "hide"; - detailShow() { + detailId: number; + detailShow(item) { this.state = 'hide'; this.state2 = 'show'; this.detailshow = true; + // console.log(item); + this.detailId = item.eventId; } detailHide() { this.state = 'show'; @@ -216,22 +283,4 @@ export class AlarmComponent implements OnInit { this.detailshow = false; } - - - getSelects:Object = { - countAll:0, - countClose:0, - countActive:0, - eventNameList:[], - sourceIdList:[], - reportingEntityNameList:[], - sourceNameList:[], -}; - // getAlarmFormData(){ - // this.myhttp.getAlarmFormData(this.currentPage,this.pageSize,this.sourceName,this.priority,this.startTime,this.endTime,this.vfStatus).subscribe((data)=>{ - // this.list = data.alarms; - // // console.log(data,'data'); - // }) - // } - } |