<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">
</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>
<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">
<app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
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;
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;
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;
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;
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;
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';
@HostBinding('@routerAnimate') routerAnimateState;
@ViewChild('seriverChart') seriverChart;
@ViewChild('services') services: ElementRef;
- resizeMark
+ resizeMark
constructor(
private myhttp: HomesService,
private router: Router,
private Util: Util
- ) {
+ ) {
}
ngOnInit() {
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()
}
this.router.navigateByUrl('/services/services-list');
}
goback_onboard() {
- this.router.navigateByUrl('/services/onboard-vnf-vm');
+ this.router.navigateByUrl('/onboard-vnf-vm');
}
}
</div>
</nz-list-item>
</ng-template>
- </nz-list>
+ </nz-list>
<div>
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="12">
切片实例 ID：
- <nz-select nzShowSearch
- [(ngModel)]="selectedServiceId"
- (ngModelChange)="slicingInstanceChange()"
- (nzOpenChange)="getSlicingData($event)"
- >
- <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
+ <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="slicingInstanceChange()"
+ (nzOpenChange)="getSlicingData($event)">
+ <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
</div>
<div nz-col nzSpan="4">
<button nz-button nzType="primary" (click)="resetSlicingInstance()">
- <i nz-icon class="anticon anticon-plus"></i>
+ <i nz-icon class="anticon anticon-delete"></i>
</button>
</div>
</nz-list-item>
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
切片子网实例 ID：
- <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
- <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
+ <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)"
+ (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
+ <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
切片子网实例名称：{{item.slicingName}}
</div>
<div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled' [attr.disabled] ='isDisabled?true:undefined'>
- <i nz-icon class="anticon anticon-plus"></i>
+ <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled'
+ [attr.disabled]='isDisabled?true:undefined'>
+ <i nz-icon class="anticon anticon-delete"></i>
</button>
- <button nz-button nzType="primary" (click)="showParamsModel(item)">
+ <button nz-button nzType="primary" (click)="showParamsModel(item)">
<i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
</button>
</div>
</nz-list-item>
</nz-list>
</div>
- <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event"></app-subnet-params-model>
+ <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle"
+ (cancel)="isShowParams=$event"></app-subnet-params-model>
</nz-modal>
\ No newline at end of file
Code Review / usecase-ui.git / commitdiff