diff options
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.css | 138 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.html | 113 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.less | 132 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.spec.ts | 25 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 380 |
5 files changed, 788 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css new file mode 100644 index 00000000..757a55b6 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.css @@ -0,0 +1,138 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select .query_criteria span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select .query_criteria nz-dropdown { + vertical-align: middle; +} +.select .query_criteria nz-dropdown :hover { + border-color: #147dc2; +} +.select .query_criteria nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select .query_criteria nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select .query_criteria nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .query_criteria .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.select .query_criteria .search span { + color: #fff; + font-weight: 400; +} +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +::ng-deep .vertical-center-modal .ant-modal { + top: 0; +} +.content { + clear: both; + padding-top: 20px; +} +.content .title { + border-radius: 5px 5px 5px 5px; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; + clear: both; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + width: 70%; + float: left; +} +.content .title ul li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; +} +.content .title ul li h5 { + font: 500 14px "Arial"; + color: #3d4d65; +} +.content .title ul li p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; +} +.content .title ul li:nth-child(1) { + border: none; +} +.content .title .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; +} +.content .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; +} +.content .tablelist .action { + padding: 10px 0 0 20px; +} +.content .tablelist .action .details { + display: inline-block; + width: 16px; + height: 16px; + background: url(../../assets/images/icon.png) center -113px; +} +.content .tablelist .action .details:hover { + background: url(../../assets/images/icon.png) no-repeat center -128px; +} diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html new file mode 100644 index 00000000..8f95de37 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -0,0 +1,113 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">> + Details</span> </h3> +<hr> +<div class="select" [@showHideAnimate]="state"> + <div class="query_criteria"> + <span>Source Name: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> + <a>{{item.name}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Priority: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Status: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <br> <br> + <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> + </div> +</div> +<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" + (nzOnOk)="handleOkMiddle()"> + <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line> +</nz-modal> +<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>Action</h5> + <p>{{alarmList.Action }}</p> + </li> + </ul> + <div class="thumbnail" (click)="showModalMiddle()"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> + <div class="tablelist"> + <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]" + nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="20%">Source Name</th> + <th nzWidth="10%">Priority</th> + <th nzWidth="20%">SpecificProblem</th> + <th nzWidth="20%">Report Time</th> + <th nzWidth="15%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of list; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.name}}</td> + <td>{{item.age}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> +</div> +<div [@showHideAnimate]="state2"> + <app-details></app-details> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less new file mode 100644 index 00000000..2d05c703 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -0,0 +1,132 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + .query_criteria { + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + } + +} +// model style + +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +::ng-deep .vertical-center-modal .ant-modal { + top: 0; +} + +.content { + clear: both; + padding-top: 20px; + .title { + border-radius: 5px 5px 5px 5px; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; + clear: both; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + width: 70%; + float: left; + li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; + h5 { + font: 500 14px "Arial"; + color: #3d4d65; + } + p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; + } + } + li:nth-child(1){ + border: none; + } + } + .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; + } + } + .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; + .action{ + padding: 10px 0 0 20px; + .details{ + display: inline-block; + width: 16px; + height: 16px; + background: url(../../assets/images/icon.png) center -113px; + &:hover { + background: url(../../assets/images/icon.png) no-repeat center -128px; + } + } + } + } +} diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts new file mode 100644 index 00000000..c7f5a738 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlarmComponent } from './alarm.component'; + +describe('AlarmComponent', () => { + let component: AlarmComponent; + let fixture: ComponentFixture<AlarmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlarmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlarmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts new file mode 100644 index 00000000..72dd5181 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -0,0 +1,380 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as addDays from 'date-fns/add_days'; +import { showHideAnimate, slideToRight } from '../animates'; + +@Component({ + selector: 'app-alarm', + templateUrl: './alarm.component.html', + styleUrls: ['./alarm.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class AlarmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //路由动画 + public pageNumber:number=1; + public pageSize:number=5; + public name:string=''; + public Priority:string =''; + public Status:string =''; + public Report:string =''; + list: any; + + + constructor( + private myhttp:MyhttpService) { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + ngOnInit() { + this.getAlarmFormData(); + } + + // 筛选框（下拉框） + // sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameList=[ + {key:null,name:'请选择'}, + {key:1,name:'aaaa'}, + {key:2,name:'bbbb'}, + {key:3,name:'cccc'}, + {key:4,name:'dddddDDDDDDDDDDDDDDD'} + ] + sourceNameSelected = this.sourceNameList[0].name; + priorityList = ['aaaa','bbbb','cccc','ddddd']; + prioritySelected = this.priorityList[0]; + statusList = ['aaaa','bbbb','cccc','ddddd']; + statusSelected = this.statusList[0]; + choseSourceName(item){ + console.log(item,'item1'); + this.sourceNameSelected = item; + } + chosePriority(item){ + console.log(item); + this.prioritySelected = item; + } + choseStatus(item){ + console.log(item); + this.statusSelected = item; + } + + // 日期筛选 + dateRange = [ addDays(new Date(), -30), new Date() ]; + + onChange(result: Date): void { + console.log('onChange: ', result); + } + // search(){ + // this.myhttp.getAlarmFormData().subscribe + + // } + sort(e){ + + } + // 数量统计 + alarmList = { + all:22439, + closed:37923, + Action: 12342 + } + + //折线图縮略圖 + alarmChartData:Object; + alarmChartInit:Object = { + height:100, + width:290, + option:{ + tooltip : { + show : false, + trigger: 'axis', + }, + legend: { + show :false, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + 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], + 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], + 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], + 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); + }) + } + //折线图放大圖 + alarmChartDataBig:Object; + alarmChartInitBig:Object = { + height:240, + width:500, + option:{ + tooltip : { + show : true, + trigger: 'axis', + }, + legend: { + show :true, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + 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], + 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], + 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], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + } + ] + } + }; + //表格数据 + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + //详情页标题显示 + detailshow = false; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + detailShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.detailshow = true; + } + detailHide() { + this.state = 'show'; + this.state2 = 'hide'; + this.detailshow = false; + } + getSelects:Object = { + countAll:0, + countClose:0, + countActive:0, + eventNameList:[], + sourceIdList:[], + reportingEntityNameList:[], + sourceNameList:[], +}; + getAlarmFormData(){ + this.myhttp.getAlarmFormData(this.pageNumber,this.pageSize,this.name,this.Priority,this.Status,this.Report).subscribe((data)=>{ + if(data.retCode ==200){ + this.list = data.list; + } + console.log(data,'data'); + }) + } +} |