diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/details')
5 files changed, 364 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.css b/usecaseui-portal/src/app/shared/components/details/details.component.css new file mode 100644 index 00000000..ec6bd37f --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.css @@ -0,0 +1,104 @@ +/* + Copyright (C) 2019 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. +*/ +.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/shared/components/details/details.component.html b/usecaseui-portal/src/app/shared/components/details/details.component.html new file mode 100644 index 00000000..62770b60 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.html @@ -0,0 +1,68 @@ +<!-- + Copyright (C) 2019 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. +--> +<div class="content"> + <div class="header"> + <h2>HEADER INFORMATION</h2> + <hr> <span class="tildeimg"></span> + <div class="headerlist"> + <div class="leftlist"> + <p> <span>Version :</span>{{datailheaderdata.version}}</p> + <p> <span>Domain :</span>{{datailheaderdata.domain}}</p> + <p> <span>Event Name :</span>{{datailheaderdata.eventName}}</p> + <p> <span>Event Id :</span>{{datailheaderdata.eventId}}</p> + <p> <span>EventType :</span>{{datailheaderdata.eventType}}</p> + <p> <span>NfcNamingCode :</span>{{datailheaderdata.nfcNamingCode}}</p> + <p> <span>NfNamingCode :</span>{{datailheaderdata.nfNamingCode}}</p> + <p> <span>SourceName :</span>{{datailheaderdata.sourceName}}</p> + <p> <span>SourceId :</span>{{datailheaderdata.sourceId}}</p> + <p> <span>ReportingEntityName :</span>{{datailheaderdata.reportingEntityName}}</p> + <p> <span>ReportingEntityId :</span>{{datailheaderdata.reportingEntityId}}</p> + </div> + <div class="rightlist"> + <p> <span>Priority :</span>{{datailheaderdata.priority}}</p> + <p> <span>ReportTime :</span>{{datailheaderdata.reportTime}}</p> + <p> <span>ClearTime :</span>{{datailheaderdata.clearTime}}</p> + <p> <span>FaultFieldsVersion :</span>{{datailheaderdata.faultFieldsVersion}}</p> + <p> <span>Event Servrity :</span>{{datailheaderdata.eventServrity}}</p> + <p> <span>EventSourceType :</span>{{datailheaderdata.eventSourceType}}</p> + <p> <span>EventCategory :</span>{{datailheaderdata.eventCategory}}</p> + <p> <span>AlarmCondition :</span>{{datailheaderdata.alarmCondition}}</p> + <p> <span>SpecificProblem :</span>{{datailheaderdata.specificProblem}}</p> + <p> <span>Status :</span> {{datailheaderdata.status}}</p> + <p> <span>AlarmInterfaceA :</span>{{datailheaderdata.alarmInterfaceA}}</p> + </div> + </div> + </div> + <hr> + <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button> + <h2 class="detailtitle">DETAIL INFORMATION</h2> + <div class="detailInformatioin" [@slideUpDown]='state'> + <nz-table #detailTable [nzData]="dataillistdata" [nzShowPagination]="false" nzSize="small" [nzBordered]="true"> + <thead> + <tr> + <th nzWidth="18%">Item Name</th> + <th >Item Value</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let data of dataillistdata"> + <td>{{data.name}}</td> + <td>{{data.value}}</td> + </tr> + </tbody> + </nz-table> + </div> +</div> diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.less b/usecaseui-portal/src/app/shared/components/details/details.component.less new file mode 100644 index 00000000..c27bfd01 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.less @@ -0,0 +1,108 @@ + +/* + Copyright (C) 2019 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. +*/ +.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; + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts new file mode 100644 index 00000000..1d5cbeb8 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture<DetailsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.ts b/usecaseui-portal/src/app/shared/components/details/details.component.ts new file mode 100644 index 00000000..dea6caaa --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.ts @@ -0,0 +1,59 @@ +/* + Copyright (C) 2019 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. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { slideUpDown } from '../../../animates'; +import { HomesService } from '../../../core/services/homes.service'; + +@Component({ + selector: 'app-details', + templateUrl: './details.component.html', + styleUrls: ['./details.component.less'], + animations: [ slideUpDown ] +}) +export class DetailsComponent implements OnInit { + + constructor(private myhttp:HomesService) { } + + ngOnInit() { + } + + ngOnChanges(changes){ + this.getAlarmDetailData(this.detailId); + } + + datailheaderdata: any = { + + }; + dataillistdata: any = []; + getAlarmDetailData(id){ + if(id){ + this.myhttp.getAlarmDetailData(id).subscribe((data)=>{ + this.datailheaderdata = data.alarmsHeader; + this.dataillistdata = data.list; + }) + } + + } + // detail Show + moredetailShow = false; + @Input() detailId; + + state = 'up' + slideUpDown(){ + this.moredetailShow = !this.moredetailShow; + this.state = this.state === 'up' ? 'down' : 'up'; + } +} |