diff options
Diffstat (limited to 'usecaseui-portal/src/app/performance/performance-vnf')
3 files changed, 75 insertions, 39 deletions
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 2899b6a6..f151ef33 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,5 +1,5 @@ <!-- - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. @@ -14,11 +14,10 @@ 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> + <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow" >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'"> @@ -29,15 +28,22 @@ </li> </ul> </nz-dropdown> - <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> + <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</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 totalRecords"> - <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)"> - <h3>{{item}}</h3> + <img src="../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)"> + <!-- <h3>{{item.name}}</h3> --> <div class="intro"> - {{item}} + {{item.name}} + </div> + </div> + <div class="vnf" *ngFor="let item of totalpnfs"> + <img src="../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)"> + <div class="intro"> + {{item.name}} </div> </div> <div class="empty" *ngFor="let empty of emptys"></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 index 6cc5b0fc..ed562d2d 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 @@ -1,20 +1,19 @@ .title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; + font: 500 14px/18px "ArialMT"; + color: #3C4F8C; + padding: 20px 0 0 20px; } .select { - margin-bottom: 20px; + height: 70px; + background-color: #fff; + margin-top: -30px; + padding-left: 20px; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + line-height: 5; span { display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; + font: 400 14px "ArialMT"; + color: #3C4F8C; } nz-dropdown { vertical-align: middle; @@ -24,9 +23,9 @@ hr { button { width: 165px; height: 30px; - background-color: #eceff4; + background-color: #fff; text-align: left; - border-color: #9fa9ab; + border-color: #E5E8F2; span { font-weight: 400; display: inline-block; @@ -41,10 +40,14 @@ hr { right: 10px; } } + :hover { + border-color: #48C6EF; + } //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 } .search { margin-left: 20px; + margin-top: -6px; vertical-align: middle; height: 30px; padding: 0 10px; @@ -56,7 +59,7 @@ hr { } .content { - background-color: #fff; + // background-color: #fff; border-radius: 5px; padding: 12px; .vnfs { @@ -65,6 +68,7 @@ hr { justify-content: space-around; .vnf { // width: 180px; + background-color: #fff; width: 18%; height: 200px; margin: 5px; @@ -74,8 +78,9 @@ hr { cursor: pointer; transition: all 0.3s linear; &:hover { - background-color: #f5f5f5; - transform: scale(1.02); + background-color: #fff; + transform: scale(1.02); + color: #3F9CFF; } h3 { font-size: 14px; @@ -89,6 +94,7 @@ hr { text-align: left; font-size: 12px; overflow: hidden; + padding-top: 25px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 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 e52e19d2..05719155 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,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. @@ -39,7 +39,29 @@ export class PerformanceVnfComponent implements OnInit { ngOnInit() { this.getqueryAllSourceNames(); - this.getperformanceSsourceNames(); + // this.getperformanceSsourceNames(); + let _this = this; + setTimeout(function(){ + _this.totalRecords = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} + ]; + _this.totalpnfs = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} + ] + _this.emptys = new Array(12-_this.totalRecords.length); + },300) } @@ -62,21 +84,23 @@ export class PerformanceVnfComponent implements OnInit { } // vnfs data totalRecords = []; + totalpnfs = []; //Fill the box emptys = []; - getperformanceSsourceNames() { - this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { - this.totalRecords = data.totalRecords; - this.vnfsdataTotal = data.names; - if (Number.isInteger(this.totalRecords.length / 5)) { - this.emptys = new Array(0); - } else { - this.emptys = new Array(5 - this.totalRecords.length % 5); - } - }) - } + // getperformanceSsourceNames() { + // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { + // this.totalRecords = data.totalRecords; + // this.vnfsdataTotal = data.names; + // if (Number.isInteger(this.totalRecords.length / 5)) { + // this.emptys = new Array(0); + // } else { + // this.emptys = new Array(5 - this.totalRecords.length % 5); + // } + // }) + // } //Detail page title display + isHidden = true; graphicshow = false; detailshow = false; // Show hidden animation |