diff options
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; |