Dashboard interface front-end development

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

3 files changed, 21 insertions, 4 deletions

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 61bed45e..b5142410 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -47,7 +47,7 @@ export class PieComponent implements OnInit {
               legendHoverLink: false,
               hoverOffset: 3,
               avoidLabelOverlap: false,
-              minAngle:1,
+              // minAngle:1,
               label: this.initData.option.series[0].label,
               data:[],
               itemStyle: this.initData.option.series[0].itemStyle
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
index 5a38944c..82ef2818 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -17,8 +17,9 @@
     <div class="chearts">
         <div class="Cu">
           <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
-          <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
-          <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span>
+          <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
+          <div *ngIf="!serviceChart"  style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
+          <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
         </div>
         <div class="type">
           <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index 51486dbf..b609de57 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -94,7 +94,7 @@ export class CustomerComponent implements OnInit {
                     normal: {
                         position: 'center',
                         show: false,
-                        formatter: '   {b|{b}：{c}%}  ',
+                        formatter: '   {b|{b}：{c}}  ',
                         backgroundColor: 'rgba(51,51,51,0.9)',
                         borderColor: 'rgba(51,51,51,0.9)',
                         borderWidth: 1,
@@ -112,6 +112,11 @@ export class CustomerComponent implements OnInit {
 
                     }
                 },
+                labelLine: {
+                    normal: {
+                      show: false
+                    }
+                },
                 itemStyle: {
                     normal: {
                         borderWidth: 3,
@@ -131,6 +136,7 @@ export class CustomerComponent implements OnInit {
                             }],
                             global: false
                         },
+                        borderWidth: 0,
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 10, 5, 0)'
@@ -141,8 +147,18 @@ export class CustomerComponent implements OnInit {
     };
 
     // get customers chart pie
+    Pie_name = [];
+    Pie_value = [];
+    serviceChart=true;
+    serviceNumber;
     getCustomersPie() {
         this.managemencs.getCustomersPie().subscribe((data) => {
+            this.serviceNumber = data.serviceTotalNum;
+          if (this.serviceNumber>0) {
+              this.serviceChart = true;
+          } else {
+            this.serviceChart = false;
+          }
             this.CUChartData = {
                 series: [{
                     data:data.customerServiceList