diff options
7 files changed, 186 insertions, 215 deletions
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html index 8a1e64da..3789c598 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -14,44 +14,42 @@ limitations under the License. --> <div class="content"> - <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()"> + <!-- <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'"><i class="anticon anticon-search"></i><span>Search</span></button> - </div> + <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]="dataSet" [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="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 nzTable.data; 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><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> + <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="20%">Report Time</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 nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sourceName}}</td> + <td>{{item.eventName}}</td> + <td>{{item.reportingEntityName}}</td> + <!-- <td>{{item.sequence}}</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 +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts index 6eaf19f4..c3153c8e 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -1,147 +1,75 @@ +/* + 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. +*/ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../../myhttp.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'] + 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: MyhttpService) { } + isVisibleMiddle = false; - constructor() { } - // isVisibleMiddle = false; - - // showModalMiddle(): void { - // this.isVisibleMiddle = true; - // } - // handleOkMiddle(): void { - // console.log('click ok'); - // this.isVisibleMiddle = false; - // } - // handleCancelMiddle(): void { - // this.isVisibleMiddle = false; - // } + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + // console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } ngOnInit() { + this.getPerformanceFormData(); } - - // 筛选框（下拉框） - MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD']; - MeasurementSelected = "Measurement"; - ReportTimeList = ['aaaa','bbbb','cccc','ddddd']; - ReportTimeSelected = "ReportTime"; - choseMeasurement(item){ - console.log(item); - this.MeasurementSelected = item; + ngOnchanges(changes){ + this.getPerformanceFormData(); + console.log(this.vnfname) + } - choseReportTime(item){ - console.log(item); - this.ReportTimeSelected = item; + getPerformanceFormData() { + this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => { + console.log(data) + this.list = data.alarms; + }) } // Date screening dateRange = [ addDays(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){ } - //表格数据 - 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.' - } - ]; - + @Input () vnfname; @Output() detailData = new EventEmitter(); detailShow(id){ let prems = { 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 index 9f70824b..2e174474 100644 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts +++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts @@ -14,11 +14,11 @@ export class PerformanceDetailsComponent implements OnInit { constructor(private myhttp:MyhttpService) { } ngOnInit() { - this.getAlarmDetailData(7); + this.getAlarmDetailData(this.detailId); } ngOnChanges(changes){ - console.log(changes); + // console.log(changes); } datailheaderdata: any = {}; dataillistdata: any = []; diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css index cbb5bfdd..414beebf 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css @@ -43,13 +43,13 @@ hr { top: 10px; right: 10px; } -.select .submit { +.select .search { margin-left: 20px; vertical-align: middle; height: 30px; padding: 0 10px; } -.select .submit span { +.select .search span { color: #fff; font-weight: 400; } diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html index 824599e7..d308d808 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html @@ -1,3 +1,18 @@ +<!-- + 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)="performanceShow()" style="cursor:pointer;">Performance VNF</span> <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> @@ -14,25 +29,25 @@ </li> </ul> </nz-dropdown> - <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button> + <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> </div> <div class="content" [@showHideAnimate]="state"> <div class="vnfs"> - <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()"> - <img src="../../../assets/images/VNF3.png" alt="VNF3"> - <h3>Mfvs_MMEManaxxdeafsfdf</h3> - <div class="intro"> - Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag + <div class="vnf" *ngFor="let item of vnfsData"> + <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)"> + <h3>{{item.name}}</h3> + <div class="intro"> + {{item.text}} </div> </div> <div class="empty" *ngFor="let empty of emptys"></div> </div> <div class="pages"> - <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination> + <nz-pagination [(nzPageIndex)]="namecurrentPage" [nzTotal]="vnfsdataTotal" [nzSize]="'small'" [(nzPageSize)]="namepageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination> </div> </div> <div [@showHideAnimate]="state2"> - <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist> + <app-graphiclist (detailData)="detailShow($event)" [vnfname] = "vnfname"></app-graphiclist> </div> <div [@showHideAnimate]="state3"> <app-performance-details [detailId]="detailId"></app-performance-details> diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less index 977ef5c0..6cc5b0fc 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less @@ -43,7 +43,7 @@ hr { } //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 } - .submit { + .search { margin-left: 20px; vertical-align: middle; height: 30px; diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts index d2e8d991..3e08c2d4 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts @@ -1,64 +1,85 @@ +/* + 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. +*/ import { Component, OnInit, HostBinding } from '@angular/core'; import { slideToRight, showHideAnimate } from '../../animates'; +import { MyhttpService } from '../../myhttp.service'; @Component({ selector: 'app-performance-vnf', templateUrl: './performance-vnf.component.html', styleUrls: ['./performance-vnf.component.less'], - animations: [ slideToRight, showHideAnimate ] + animations: [slideToRight, showHideAnimate], }) export class PerformanceVnfComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; - constructor() { } + public sourceNameList: Array<any> = ['---auto---']; + public namecurrentPage: number = 1; + public namepageSize: number = 10; + public sourceName: string = ''; + public vnfsdataTotal: number; + + constructor( + private myhttp: MyhttpService) { } ngOnInit() { - let _this = this; - setTimeout(function(){ - // 在路由切换时加载图片造成动画卡顿，先完成动画再加载图片 - _this.vnfsData = [ - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"}, - {name:"aaa",text:"oahgieango"} - ]; - _this.emptys = new Array(15-_this.vnfsData.length); - },300) + this.getqueryAllSourceNames(); + this.getperformanceSsourceNames() } - // 筛选框（下拉框） - sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameSelected = this.sourceNameList[0]; - ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd']; - ReportingEntityNameSelected = this.ReportingEntityNameList[0]; - choseSourceName(item){ - console.log(item); - this.sourceNameSelected = item; + getqueryAllSourceNames() { + this.myhttp.getqueryAllSourceNames().subscribe((data) => { + // console.log(data) + for (let i = 0; i < data.length; i++) { + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) } - choseReportingEntityName(item){ + choseSourceName(item) { console.log(item); - this.ReportingEntityNameSelected = item; + this.sourceNameSelected = item; + if (item == "---auto---") { + this.sourceName = ''; + } else { + this.sourceName = item; + } } - submit(){ - + getperformanceSsourceNames() { + this.myhttp.getperformanceSsourceNames(this.namecurrentPage, this.namepageSize, this.sourceName).subscribe((data) => { + this.vnfsData = data.vnfdata; + this.vnfsdataTotal = data.total; + if (Number.isInteger(this.vnfsData.length / 5)) { + this.emptys = new Array(0); + } else { + this.emptys = new Array(5 - this.vnfsData.length % 5); + } + // console.log(this.emptys); + }) } - // vnfs数据 + // vnfs data vnfsData = []; - emptys = []; //补空盒子用 - // 分页 - current = 1; //当前页码 + emptys = []; //Fill the box - //详情页标题显示 + //Detail page title display graphicshow = false; detailshow = false; - // 显示隐藏动画 + // Show hidden animation state = "show"; state2 = "hide"; state3 = "hide"; @@ -69,24 +90,33 @@ export class PerformanceVnfComponent implements OnInit { this.graphicshow = false; this.detailshow = false; } - graphicShow() { + // Selected name + + graphicShow(item) { this.state = 'hide'; this.state2 = 'show'; this.state3 = 'hide'; this.graphicshow = true; this.detailshow = false; } - // 选中id - detailId:number; - detailShow(prems) { + vnfname: number; + graphicShow2(item){ + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + this.vnfname = item.name; + } + // Selected id + detailId: number; + detailShow(item) { this.state = 'hide'; this.state2 = 'hide'; this.state3 = 'show'; this.graphicshow = true; this.detailshow = true; - console.log(prems); - this.detailId = prems.id; + this.detailId = item.id; } - } |