diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/graphiclist')
5 files changed, 386 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css new file mode 100644 index 00000000..9830c9e8 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css @@ -0,0 +1,91 @@ +/* + 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 .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; +} +.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 .chart { + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 70px; +} +.content .chart .select { + padding: 20px 20px 20px 0px; + width: 70%; + float: left; +} +.content .chart .select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.content .chart .select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.content .chart .select .search span { + color: #fff; + font-weight: 400; +} +.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/shared/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html new file mode 100644 index 00000000..317d48b0 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html @@ -0,0 +1,55 @@ +<!-- + 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"> + <!-- <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="chart"> + <div class="select"> + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> + + <button class="search" nz-button [nzType]="'primary'" (click) = "getPerformanceFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> + </div> + <div class="tablelist"> + <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger [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="20%">Event Name</th> + <th nzWidth="20%">ReportingEntityName</th> + <th nzWidth="15%">Report Time</th> + <th nzWidth="5%">Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sourceName}}</td> + <td>{{item.eventName}}</td> + <td>{{item.reportingEntityName}}</td> + <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td> + <td><a class="action" (click)="detailShow(item)"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less new file mode 100644 index 00000000..e302c7fd --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less @@ -0,0 +1,137 @@ +/* + 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 { + .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + 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; + } + } + } + .chart { + // background-color: #fff; + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 70px; + .select { + padding: 20px 20px 20px 0px; + width: 70%; + float: left; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + // nz-dropdown { + // margin-right: 20px; + // a { + // font: 700 12px "Arial"; + // color: #3d4d65; + // &:hover { + // color: #3fa8eb; + // } + // } + // } + } + // .AlarmChart { + // // height: 0px; + // // border-bottom: 1px solid #f5f5f5; + // // transition: all 0.3s linear; + // width: 25%; + // padding-top: 7px; + // float: left; + // } + // .alarmChart-active { + // height: 386px; + // } + // .open-close { + // width: 50px; + // height: 25px; + // position: absolute; + // left: 50%; + // bottom: 0px; + // transform: translate(-25px,0); + // border: none; + // outline: none; + // cursor: pointer; + // background-color: #fff; + // background: url(../../../assets/images/open-close.png) no-repeat center -27px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -79px; + // } + // } + // .open-close-active { + // background: url(../../../assets/images/open-close.png) center -1px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -53px; + // } + // } + } + .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; + } + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts new file mode 100644 index 00000000..013db38a --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphiclistComponent } from './graphiclist.component'; + +describe('GraphiclistComponent', () => { + let component: GraphiclistComponent; + let fixture: ComponentFixture<GraphiclistComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GraphiclistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphiclistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts new file mode 100644 index 00000000..c05d3b7c --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts @@ -0,0 +1,78 @@ +/* + 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, Output, EventEmitter, HostBinding } from '@angular/core'; +import { HomesService } from '../../../core/services/homes.service'; +import * as addDays from 'date-fns/add_days'; +import { DatePipe } from "@angular/common" + +@Component({ + selector: 'app-graphiclist', + templateUrl: './graphiclist.component.html', + styleUrls: ['./graphiclist.component.less'], + providers: [DatePipe] +}) +export class GraphiclistComponent implements OnInit { + public startTime: string =''; + public endTime: string = ''; + public currentPage: number = 1; + public pageSize: number = 10; + list: any; + constructor( private datePipe: DatePipe, + private myhttp: HomesService) { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + // console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + + ngOnInit() { + } + ngOnChanges(changes){ + this.getPerformanceFormData(); + } + getPerformanceFormData() { + this.myhttp.getPerformanceFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => { + this.list = data.performances; + }) + } + // Date screening + dateRange = [ addDays(new Date(), -30), new Date() ]; + + onChange(result: Date): void { + 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){ + } + @Input () vnfname; + @Output() detailData = new EventEmitter(); + detailShow(id){ + let prems = { + id:id, + detailShow: true + } + this.detailData.emit(prems); + + } + +} |