summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/home
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/home')
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.html42
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.less139
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.ts20
3 files changed, 120 insertions, 81 deletions
diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html
index faa5dcd4..13307927 100644
--- a/usecaseui-portal/src/app/views/home/home.component.html
+++ b/usecaseui-portal/src/app/views/home/home.component.html
@@ -26,7 +26,7 @@
<span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
</div>
<p class="tip">
- <span (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+ <span (click)="goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
<div class="PACKAGE">
@@ -42,26 +42,26 @@
</div>
</li>
<li class="detailstoplinContent">
- <div class="detailstoplin">
- <div>VNF</div>
- <div>
- <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
- </div>
- <div>{{Vnfdata}}</div>
+ <div class="detailstoplin">
+ <div>VNF</div>
+ <div>
+ <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
</div>
- </li>
- <li class="detailstoplinContent">
- <div class="detailstoplin">
- <div>PNF</div>
- <div>
- <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
- </div>
- <div>{{PnfData}}</div>
- </div>
- </li>
+ <div>{{Vnfdata}}</div>
+ </div>
+ </li>
+ <li class="detailstoplinContent">
+ <div class="detailstoplin">
+ <div>PNF</div>
+ <div>
+ <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
+ </div>
+ <div>{{PnfData}}</div>
+ </div>
+ </li>
</div>
<p class="tip">
- <span (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+ <span (click)="goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
</div>
@@ -76,9 +76,9 @@
<div class="poerformance">
<app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie>
<p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p>
- <p class="tip">
+ <!-- <p class="tip">
<a href="#">{{"i18nTextDefine_ViewDetails" | translate}}</a>
- </p>
+ </p> -->
</div>
</div>
<div class="rb-content">
@@ -94,4 +94,4 @@
<app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
</div>
</div>
-</div>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
index cb0d877e..68c1367e 100644
--- a/usecaseui-portal/src/app/views/home/home.component.less
+++ b/usecaseui-portal/src/app/views/home/home.component.less
@@ -18,26 +18,32 @@
padding: 20px;
min-height: 937px;
height: 100vh;
- .left-content{
+
+ .left-content {
height: 100%;
float: left;
- width:30%;
- .services,.PACKAGE{
- display:flex;
+ width: 40%;
+
+ .services,
+ .PACKAGE {
+ display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
- background:rgba(255,255,255,1);
- box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ background: rgba(255, 255, 255, 1);
+ box-shadow: 0px 10px 10px 2px rgba(222, 222, 222, 0.5);
+ border-radius: 6px;
padding: 28px 22px;
- h4{
+
+ h4 {
font: 600 16px/16px "Arial Bold";
- color: #0DA9E2;
+ color: #0DA9E2;
}
+
p {
font: 400 14px/14px "Arial";
}
+
.tip {
align-self: flex-end;
width: 110px;
@@ -48,92 +54,108 @@
color: #3C4F8C;
text-align: center;
cursor: pointer;
- span{
+
+ span {
color: #3C4F8C;
}
}
}
- .services{
- min-height:467px;
+
+ .services {
+ min-height: 467px;
height: 49vh;
flex-wrap: wrap;
+
h5 {
position: relative;
z-index: 3;
font: 500 18px/18px "ArialMT";
- color:#0DA9E2;
- margin: -2em 0 1em 0 ;
+ color: #0DA9E2;
+ margin: -2em 0 1em 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
+
span {
font-size: 14px;
font-family: "Arial";
- color:#3C4F8C;
+ color: #3C4F8C;
}
+
span:first-child {
font-size: 18px;
- padding: 0 4PX 0 4px;
+ padding: 0 4PX 0 4px;
}
+
span:last-child {
padding-left: 4px;
}
-
+
}
}
- .PACKAGE{
- min-height:410px;
+
+ .PACKAGE {
+ min-height: 410px;
height: 43vh;
margin-top: 20px;
+
.details {
- .detailstoplinContent{
- border-bottom:0.5px solid rgba(237,237,237,1);
- border-radius:4px;
+ .detailstoplinContent {
+ border-bottom: 0.5px solid rgba(237, 237, 237, 1);
+ border-radius: 4px;
line-height: 58px;
font-size: 14px;
color: #3C4F8C;
- font-family:"ArialMT";
+ font-family: "ArialMT";
+
.detailstoplin {
width: 100%;
height: 58px;
border-radius: 4px;
- div:first-child{
+
+ div:first-child {
width: 20%;
float: left;
}
- div:nth-child(2){
+
+ div:nth-child(2) {
width: 65%;
float: left;
}
+
div:last-child {
width: 13%;
float: right;
- font-size:12px;
+ font-size: 12px;
font-weight: 500;
- color:rgba(60,79,140,0.5);
+ color: rgba(60, 79, 140, 0.5);
}
}
- &:first-child{
- border-top: 0.5px solid rgba(237,237,237,1);
- }
+
+ &:first-child {
+ border-top: 0.5px solid rgba(237, 237, 237, 1);
+ }
}
}
-
- }
+
+ }
}
+
.right-content {
height: 100%;
float: left;
- width: 70%;
+ width: 60%;
padding-left: 15px;
+
.rt-content {
min-height: 327px;
height: 34vh;
margin-bottom: 18px;
- background:rgba(255,255,255,1);
- box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ background: rgba(255, 255, 255, 1);
+ box-shadow: 0px 10px 10px 2px rgba(222, 222, 222, 0.5);
+ border-radius: 6px;
+
.alarm {
float: left;
background-color: #fff;
@@ -142,12 +164,14 @@
border-radius: 5px;
position: relative;
padding: 28px 26px;
+
h4 {
position: absolute;
font: 600 16px/16px "Arial Bold";
color: #0DA9E2;
}
}
+
.poerformance {
float: left;
background-color: #fff;
@@ -155,78 +179,90 @@
width: 50%;
border-radius: 5px;
padding: 28px 26px;
+
.pfVmPm {
h3 {
- color:#BD57E5;
+ color: #BD57E5;
}
- }
+ }
+
div {
height: 57px;
position: relative;
margin-bottom: 10px;
+
h3 {
font: 600 25px/25px "Arial";
color: #2F6AEF;
margin-bottom: 10px;
padding-left: 50%;
}
+
p {
- font: 400 12px/12px "Arial";
- color:rgba(60,79,140,0.5);
+ font: 400 12px/12px "Arial";
+ color: rgba(60, 79, 140, 0.5);
padding-left: 50%;
-
+
}
+
img {
position: absolute;
top: 0;
left: 0;
}
}
- .tip{
+
+ .tip {
width: 110px;
background-color: #eceff4;
color: #3C4F8C;
font-size: 16px;
float: right;
margin-top: 20px;
- margin-bottom: 0!important;
+ margin-bottom: 0 !important;
line-height: 35px;
border-radius: 5px;
text-align: center;
- a{
- color:#3C4F8C;
+
+ a {
+ color: #3C4F8C;
}
}
}
-
- .alarm-name{
+
+ .alarm-name {
text-align: center;
margin-top: 15px;
}
-
+
}
+
.rb-content {
position: relative;
min-height: 550px;
height: 58vh;
background-color: #fff;
padding: 24px 30px;
- box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);
+ border-radius: 6px;
+
h4 {
font: 600 16px/16px "Arial Bold";
color: #0DA9E2;
}
+
nz-dropdown {
position: absolute;
top: 24px;
right: 30px;
+
button {
width: 170px;
height: 35px;
background-color: #eceff4;
text-align: left;
border-color: #cad3df;
+
span {
display: inline-block;
width: 120px;
@@ -234,14 +270,17 @@
text-overflow: ellipsis;
font-size: 14px;
}
+
i {
position: absolute;
top: 12px;
right: 12px;
}
}
+
//The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body.
}
+
#pfVmChartLine {
width: 100%;
height: 318px;
diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts
index a7f312e6..75ebb183 100644
--- a/usecaseui-portal/src/app/views/home/home.component.ts
+++ b/usecaseui-portal/src/app/views/home/home.component.ts
@@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component, OnInit, HostBinding, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, HostBinding, ViewChild, ElementRef } from '@angular/core';
import { HomesService } from '../../core/services/homes.service';
import { slideToRight } from '../../shared/utils/animates';
import { Util } from '../../shared/utils/utils';
@@ -31,13 +31,13 @@ export class HomeComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
@ViewChild('seriverChart') seriverChart;
@ViewChild('services') services: ElementRef;
- resizeMark
+ resizeMark
constructor(
private myhttp: HomesService,
private router: Router,
private Util: Util
- ) {
+ ) {
}
ngOnInit() {
@@ -49,17 +49,17 @@ export class HomeComponent implements OnInit {
this.getHomeServiceBarNsData();
this.getHomeServiceBarVnfData();
this.getHomeServiceBarPnfData();
- this.resizeMark = Observable.fromEvent(window,'resize')
+ this.resizeMark = Observable.fromEvent(window, 'resize')
.subscribe((event) => {
- this.seriverChart.resize(this.services.nativeElement.offsetHeight,250)
+ this.seriverChart.resize(this.services.nativeElement.offsetHeight, 250)
})
}
-
- ngAfterViewInit(){
- this.seriverChart.resize(this.services.nativeElement.offsetHeight,250)
+
+ ngAfterViewInit() {
+ this.seriverChart.resize(this.services.nativeElement.offsetHeight, 250)
}
- ngOnDestroy(){
+ ngOnDestroy() {
this.resizeMark.unsubscribe()
}
@@ -540,7 +540,7 @@ export class HomeComponent implements OnInit {
this.router.navigateByUrl('/services/services-list');
}
goback_onboard() {
- this.router.navigateByUrl('/services/onboard-vnf-vm');
+ this.router.navigateByUrl('/onboard-vnf-vm');
}
}