Dashboard Interface Function Modification

Change-Id: Ia3ebdfaa0dd3acde1e626ed500341e0d4ae72142
Issue-ID: USECASEUI-214
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

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;