summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-03-21 19:51:39 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-03-21 19:51:47 +0800
commit8ca667af29ce93f5b801ccfafbf6d14e55640300 (patch)
treec0eb59d8ffe4862a17b6fe641c21b0a4b05f3b25 /usecaseui-portal
parentc3e53185d6f653727cee2144804aa5404dea6f5a (diff)
Dashboard Interface Function Modification
Change-Id: Ia3ebdfaa0dd3acde1e626ed500341e0d4ae72142 Issue-ID: USECASEUI-214 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/app.component.html6
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.ts28
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.ts5
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.ts9
-rw-r--r--usecaseui-portal/src/app/home/home.component.html2
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts17
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html103
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less26
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts29
-rw-r--r--usecaseui-portal/src/index.html2
-rw-r--r--usecaseui-portal/src/styles.less52
11 files changed, 167 insertions, 112 deletions
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 1990d708..25d8f6d6 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.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.
@@ -42,13 +42,13 @@
</a>
</li>
<hr> -->
- <li nz-submenu>
+ <!-- <li nz-submenu>
<span title><i class="anticon anticon-setting"></i> {{"Monitor" | translate}} </span>
<ul>
<li nz-menu-item><a routerLink='alarm'> {{"Alarm" | translate}} </a></li>
<li nz-menu-item><a routerLink='performance/performance-vnf'> {{"Performance" | translate}}</a></li>
</ul>
- </li>
+ </li> -->
<hr>
<li nz-menu-item>
<a routerLink="network">
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
index a7947f4e..38a2fc0d 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -8,9 +8,9 @@ import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
})
export class BarComponent implements OnInit {
- // 图形数据
+ // 鍥惧舰鏁版嵁
@Input() chartData;
- // 初始化数据
+ // 鍒濆鍖栨暟鎹
@Input() initData;
constructor() { }
@@ -18,36 +18,32 @@ export class BarComponent implements OnInit {
ngOnInit() {
this.initOpts = {
renderer: 'canvas',
- height: 40,
- width: 160,
+ height: 200,
+ width: 280,
};
this.barOption = {
+ tooltip: this.initData.option.tooltip,
+ grid: this.initData.option.grid,
xAxis: this.initData.option.xAxis,
- yAxis: {
- type: 'category',
- show: false,
- axisTick: {
- show: false
- }
- },
+ yAxis:this.initData.option.yAxis,
series: this.initData.option.series
}
}
ngOnChanges(changes: SimpleChanges) {
- // 当有实例的时候再执行,相当于第一次不执行下面方法
+ // 褰撴湁瀹炰緥鐨勬椂鍊欏啀鎵ц锛岀浉褰撲簬绗竴娆′笉鎵ц涓嬮潰鏂规硶
if (this.chartIntance) {
this.chartDataChange()
}
}
- // 初始化图形高度
+ // 鍒濆鍖栧浘褰㈤珮搴
initOpts: any;
- // 折线图配置
+ // 鎶樼嚎鍥鹃厤缃
barOption: any;
- // 实例对象
+ // 瀹炰緥瀵硅薄
chartIntance: any;
- // 数据变化
+ // 鏁版嵁鍙樺寲
updateOption: any;
chartDataChange() {
this.updateOption = this.chartData;
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
index 6c4279cb..55b757ce 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -26,10 +26,10 @@ export class LineComponent implements OnInit {
legend: this.initData.option.legend,
dataZoom: this.initData.option.dataZoom,
grid: {
- left: '1%',
+ left: '0%',
right: '3%',
top: '10%',
- bottom: '10%',
+ bottom: '18%',
containLabel: true
},
xAxis: {
@@ -65,7 +65,6 @@ export class LineComponent implements OnInit {
}
ngOnChanges(changes:SimpleChanges){
-
// 褰撴湁瀹炰緥鐨勬椂鍊欏啀鎵ц锛岀浉褰撲簬绗竴娆′笉鎵ц涓嬮潰鏂规硶
if(this.chartIntance){
this.chartDataChange()
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
index 69d758e3..9302ddb5 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -28,13 +28,18 @@ export class PieComponent implements OnInit {
name: this.initData.option.series[0].name,
type: 'pie',
radius : this.initData.option.series[0].radius,
- center: ['50%', '45%'],
+ center:this.initData.option.series[0].center,
legendHoverLink: false,
hoverOffset: 3,
avoidLabelOverlap: false,
label: this.initData.option.series[0].label,
data:[
- {value:1, name:'11'}
+ {value:5, name:'11'},
+ {value:8, name:'22'},
+ {value:10, name:'33'},
+ {value:20, name:'44'},
+ {value:60, name:'55'},
+
],
itemStyle: this.initData.option.series[0].itemStyle
}
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index 577a6356..72fe7f3d 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.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.
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index 29211810..9d81684d 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -1,3 +1,18 @@
+/*
+ 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.
+ 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 { HomesService } from '../homes.service';
import { slideToRight } from '../animates';
@@ -42,6 +57,7 @@ export class HomeComponent implements OnInit {
{
name: "鏈嶅姟淇℃伅",
radius: ['50%', '70%'],
+ center:['50%', '45%'],
avoidLabelOverlap: false,
label: {
normal: {
@@ -148,6 +164,7 @@ export class HomeComponent implements OnInit {
series: [{
name: "鍛婅淇℃伅",
radius: '55%',
+ center:['50%', '45%'],
label: {
normal: {
show: false,
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 605c455f..b4812924 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.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.
@@ -18,59 +18,60 @@
<!-- nsList -->
<div class="list" *ngIf="tab === 'NS'">
<!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
- <div class="listupload">
- <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
- <p class="ant-upload-drag-icon">
- <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
- </p>
- <p class="ant-upload-text">Click or drag CSAR File here</p>
- <p class="ant-upload-hint"></p>
- </nz-upload>
- <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
- style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
- {{ nsuploading ? 'Uploading' : 'Start Upload' }}
- </button>
- </div>
- <div class="listlin"></div>
- <div class="listfile">
- <div>
- <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div>
- <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+ <div style="width:100%;">
+ <div class="listupload">
+ <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
+ <p class="ant-upload-drag-icon">
+ <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+ </p>
+ <p class="ant-upload-text">Click or drag CSAR File here</p>
+ <p class="ant-upload-hint"></p>
+ </nz-upload>
+ <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+ style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+ {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+ </button>
+ </div>
+ <div class="listlin"></div>
+ <div class="listfile">
+ <div>
+ <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div>
+ <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+ </div>
+ <div>456</div>
</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div class="color">
- <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div class="color">
+ <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+ </div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div>pnf-test.csar</div>
+ <div class="color">File upload completed</div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div>pnf-test.csar</div>
+ <div class="color">File upload completed</div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div>File upload completed</div>
+ <div>456</div>
</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div>pnf-test.csar</div>
- <div class="color">File upload completed</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div>pnf-test.csar</div>
- <div class="color">File upload completed</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div>File upload completed</div>
- <div>456</div>
</div>
</div>
-
</div>
<nz-spin [nzSpinning]="isSpinning">
<div class="mask" *ngIf="isSpinning"></div>
@@ -136,7 +137,7 @@
</nz-table>
</nz-spin>
<!-- <div style="margin-top:8px;">
- Loading state:
+ Loading state:
<nz-switch [(ngModel)]="isSpinning"></nz-switch>
</div> -->
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index b4d92fde..b973e575 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -1,3 +1,18 @@
+/*
+ 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.
+ 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;
@@ -47,11 +62,13 @@ hr {
// padding: 10px;
.listupload {
width: 22%;
- float: left;
+ vertical-align: top;
+ display: inline-block;
margin-left: 13%;
}
.listlin {
- float: left;
+ vertical-align: top;
+ display: inline-block;
width: 1%;
margin-left: 10%;
height: 177px;
@@ -59,8 +76,9 @@ hr {
border-right: 2px solid #EEEEEE;
}
.listfile {
- float: left;
- width: 44%;
+ width: 43%;
+ vertical-align: top;
+ display: inline-block;
margin-left: 10%;
.listfilebgc {
background-color: #fff;
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 95977823..a35de356 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -1,3 +1,18 @@
+/*
+ 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.
+ 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 { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { Component, OnInit, HostBinding } from '@angular/core';
// import { MyhttpService } from '../../myhttp.service';
@@ -37,13 +52,13 @@ export class OnboardVnfVmComponent implements OnInit {
//url
url = {
// line up
- //ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
- //vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
- //pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
- // 鏈湴
- ns: 'https://jsonplaceholder.typicode.com/posts/',
- vnf: 'https://jsonplaceholder.typicode.com/posts/',
- pnf: 'https://jsonplaceholder.typicode.com/posts/',
+ ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
+ vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
+ pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
+ // line local
+ //ns: 'https://jsonplaceholder.typicode.com/posts/',
+ //vnf: 'https://jsonplaceholder.typicode.com/posts/',
+ //pnf: 'https://jsonplaceholder.typicode.com/posts/',
};
constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { }
diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html
index c3ffb567..d2fc65f8 100644
--- a/usecaseui-portal/src/index.html
+++ b/usecaseui-portal/src/index.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.
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 22d9f976..23ab5b4c 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -70,32 +70,32 @@ nz-table {
// 璇︽儏椤佃糠浣犺〃鏍兼牱寮
.detailInformatioin {
- nz-table {
- .ant-table-small {
- border-color: #dfdfe0;
- border-right: 0;
- .ant-table-content {
- border-color: #dfdfe0;
- .ant-table-body > table {
- padding: 0;
- .ant-table-thead > tr > th {
- background-color: #f0f2f5;
- font-weight: 700;
- font-size: 18px;
- padding: 2px 15px;
- border-color: #dfdfe0;
- }
- .ant-table-tbody > tr > td {
- background-color: #f0f2f5;
- font-size: 14px;
- padding: 2px 15px;
- color: #323437;
+ nz-table {
+ .ant-table-small {
border-color: #dfdfe0;
- }
+ border-right: 0;
+ .ant-table-content {
+ border-color: #dfdfe0;
+ .ant-table-body > table {
+ padding: 0;
+ .ant-table-thead > tr > th {
+ background-color: #f0f2f5;
+ font-weight: 700;
+ font-size: 16px;
+ padding: 2px 15px;
+ border-color: #dfdfe0;
+ }
+ .ant-table-tbody > tr > td {
+ background-color: #f0f2f5;
+ font-size: 14px;
+ padding: 2px 15px;
+ color: #323437;
+ border-color: #dfdfe0;
+ }
+ }
+ }
}
- }
}
- }
}
// 鏃ユ湡閫夋嫨鎻掍欢鑳屾櫙棰滆壊
@@ -206,7 +206,7 @@ nz-layout {
}
}
// onboard-vnf-vm椤甸潰璋冩暣
-// 闋儴灏庤埅
+// 澶撮儴瀵艰埅
.ant-tabs-bar {
box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
border-bottom:none !important;
@@ -216,6 +216,10 @@ nz-layout {
padding-left: 15px !important;
padding-top: 14px !important;
}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+ height: 55px !important;
+}
+// 澶撮儴瀵艰埅鎸夐挳
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
background-color: #fff !important;
border: 1px solid #fff !important;