diff options
Diffstat (limited to 'usecaseui-portal/src/app/performance/performance-vnf')
5 files changed, 422 insertions, 0 deletions
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 new file mode 100644 index 00000000..4ed015fe --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css @@ -0,0 +1,126 @@ +/* + 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 { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .submit span { + color: #fff; + font-weight: 400; +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} +.content .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.content .vnfs .vnf { + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; +} +.content .vnfs .vnf:hover { + background-color: #f5f5f5; + transform: scale(1.02); +} +.content .vnfs .vnf h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; +} +.content .vnfs .vnf .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap: break-word; + word-break: break-all; +} +.content .vnfs .empty { + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; +} +.content .pages { + height: 25px; + margin: 20px 10px; + position: relative; +} +.content .pages nz-pagination { + float: right; +} 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 new file mode 100644 index 00000000..0b398703 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html @@ -0,0 +1,64 @@ +<!-- + 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> + <span *ngIf="detailshow">> Details </span> +</h3> +<hr> +<div class="select" [@showHideAnimate]="state"> + <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}}</a> + </li> + </ul> + </nz-dropdown> + + <span>ReportingEntityName: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList"> + <a>{{item}}</a> + </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> +</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> + </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> + </div> +</div> +<div [@showHideAnimate]="state2"> + <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist> +</div> +<div [@showHideAnimate]="state3"> + <app-details [detailId]="detailId"></app-details> +</div> 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 new file mode 100644 index 00000000..977ef5c0 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less @@ -0,0 +1,115 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; + 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中额外临时生成的 + } + .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} + +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; + .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + .vnf { + // width: 180px; + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; + &:hover { + background-color: #f5f5f5; + transform: scale(1.02); + } + h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + } + .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap:break-word; + word-break:break-all; + } + } + .empty { + // width: 180px; + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; + } + } + .pages { + height: 25px; + margin: 20px 10px; + position: relative; + nz-pagination { + float: right; + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts new file mode 100644 index 00000000..c535b737 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceVnfComponent } from './performance-vnf.component'; + +describe('PerformanceVnfComponent', () => { + let component: PerformanceVnfComponent; + let fixture: ComponentFixture<PerformanceVnfComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVnfComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVnfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..d2e8d991 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts @@ -0,0 +1,92 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../animates'; + +@Component({ + selector: 'app-performance-vnf', + templateUrl: './performance-vnf.component.html', + styleUrls: ['./performance-vnf.component.less'], + animations: [ slideToRight, showHideAnimate ] +}) +export class PerformanceVnfComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor() { } + + 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) + } + + // 筛选框（下拉框） + 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; + } + choseReportingEntityName(item){ + console.log(item); + this.ReportingEntityNameSelected = item; + } + + submit(){ + + } + // vnfs数据 + vnfsData = []; + emptys = []; //补空盒子用 + // 分页 + current = 1; //当前页码 + + //详情页标题显示 + graphicshow = false; + detailshow = false; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + // 选中id + detailId:number; + detailShow(prems) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + console.log(prems); + this.detailId = prems.id; + } + + +} |