From a5a05aa4c736c58d606234aa47a266cce054cd2d Mon Sep 17 00:00:00 2001 From: zhangab Date: Wed, 31 Oct 2018 16:36:06 +0800 Subject: Fix VNF Performance Query Bugs Change-Id: I65637d6f058905d0918e5dc1740594572fa4c931 Issue-ID: USECASEUI-166 Signed-off-by: zhangab --- usecaseui-portal/src/app/app.module.ts | 2 + .../performance-details.component.css | 89 ++++++++++++++++++++ .../performance-details.component.html | 47 +++++++++++ .../performance-details.component.less | 96 ++++++++++++++++++++++ .../performance-details.component.spec.ts | 25 ++++++ .../performance-details.component.ts | 39 +++++++++ 6 files changed, 298 insertions(+) create mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.css create mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.html create mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.less create mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.ts (limited to 'usecaseui-portal/src') diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 7c24f110..8582a6fc 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -46,6 +46,7 @@ import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@ang // 自定义服务 import { MyhttpService } from './myhttp.service'; import { networkHttpservice } from './networkHttpservice.service'; +import { PerformanceDetailsComponent } from './components/performance-details/performance-details.component'; @NgModule({ providers : [ @@ -76,6 +77,7 @@ import { networkHttpservice } from './networkHttpservice.service'; CcvpnNetworkComponent, CcvpnDetailComponent, CcvpnCreationComponent, + PerformanceDetailsComponent, ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/components/performance-details/performance-details.component.css new file mode 100644 index 00000000..d0bfd9f9 --- /dev/null +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.css @@ -0,0 +1,89 @@ +.content .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; +} +.content .header hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content .header h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; +} +.content .header span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px, 0); + background: url(../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; +} +.content .header .headerlist { + display: flex; +} +.content .header .headerlist div { + width: 100%; +} +.content .header .headerlist div p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; +} +.content .header .headerlist div p span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; +} +.content hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px, 0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../assets/images/open-close2.png) no-repeat center -22px; +} +.content button:hover { + background: url(../../../assets/images/open-close2.png) no-repeat center -66px; +} +.content .buttonActive { + transform: translate(-44px, -22px); + background: url(../../../assets/images/open-close2.png) no-repeat center 0px; +} +.content .buttonActive:hover { + background: url(../../../assets/images/open-close2.png) no-repeat center -44px; +} +.content h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; +} +.content .detailInformatioin { + overflow: hidden; +} diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/components/performance-details/performance-details.component.html new file mode 100644 index 00000000..8300973a --- /dev/null +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.html @@ -0,0 +1,47 @@ + +
+
+

HEADER INFORMATION

+
+
+
+

Version :{{datailheaderdata.version}}

+

Domain :{{datailheaderdata.domain}}

+

EventType :{{datailheaderdata.eventType}}

+

Event Name :{{datailheaderdata.eventName}}

+

Event Id :{{datailheaderdata.eventId}}

+

NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

+ + +
+
+

NfNamingCode :{{datailheaderdata.nfNamingCode}}

+

SourceName :{{datailheaderdata.sourceName}}

+

SourceId :{{datailheaderdata.sourceId}}

+

ReportingEntityName :{{datailheaderdata.reportingEntityName}}

+

ReportingEntityId :{{datailheaderdata.reportingEntityId}}

+

ReportTime :{{datailheaderdata.reportTime}}

+
+
+
+
+ +

DETAIL INFORMATION

+
+ + + + Item Name + Item Value + + + + + {{data.name}} + {{data.value}} + + + +
+
+ \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/components/performance-details/performance-details.component.less new file mode 100644 index 00000000..ad81d8a6 --- /dev/null +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.less @@ -0,0 +1,96 @@ + +.content { + .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; + } + span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px,0); + background: url(../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; + } + .headerlist { + display: flex; + div { + width: 100%; + p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; + span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; + } + } + } + } + } + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px,0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../assets/images/open-close2.png) no-repeat center -22px; + &:hover { + background: url(../../../assets/images/open-close2.png) no-repeat center -66px; + } + } + .buttonActive { + transform: translate(-44px,-22px); + background: url(../../../assets/images/open-close2.png) no-repeat center -0px; + &:hover { + background: url(../../../assets/images/open-close2.png) no-repeat center -44px; + } + } + h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; + } + .detailInformatioin { + // transition: all 0.3s linear; + overflow: hidden; + } + .detailshow { + + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts new file mode 100644 index 00000000..11f4abd2 --- /dev/null +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceDetailsComponent } from './performance-details.component'; + +describe('PerformanceDetailsComponent', () => { + let component: PerformanceDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts new file mode 100644 index 00000000..9f70824b --- /dev/null +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { slideUpDown } from '../../animates'; +import { MyhttpService } from '../../myhttp.service'; + +@Component({ + selector: 'app-performance-details', + templateUrl: './performance-details.component.html', + styleUrls: ['./performance-details.component.less'], + animations: [ slideUpDown ] +}) +export class PerformanceDetailsComponent implements OnInit { + + + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + this.getAlarmDetailData(7); + } + + ngOnChanges(changes){ + console.log(changes); + } + datailheaderdata: any = {}; + dataillistdata: any = []; + getAlarmDetailData(id){ + this.myhttp.getAlarmDetailData(id).subscribe((data)=>{ + console.log(data) + this.datailheaderdata = data.alarmsHeader; + this.dataillistdata = data.list; + }) + } + moredetailShow = false; + @Input() detailId; + state = 'up' + slideUpDown(){ + this.moredetailShow = !this.moredetailShow; + this.state = this.state === 'up' ? 'down' : 'up'; + } +} -- cgit 1.2.3-korg