Added monitor and user management logic

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

3 files changed, 117 insertions, 59 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
index 9bf6c5ab..6693354b 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -14,6 +14,17 @@
     limitations under the License.
 -->
 <div class="content">
+    <div class="chearts">
+        <div class="Cu">
+          <p>Instance Count of Customer</p>
+          <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
+          <div class="legend"></div><span>users</span>
+        </div>
+        <div class="type">
+          <p>Instance Count of Service Type</p>
+          <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+        </div>
+      </div>
   <div class="customer">
     <div class="customer_title">
       <div class="customers">
@@ -28,22 +39,8 @@
       </div>
       <div class="customer_list">
         <ul>
-          <li class="active"><img src="./assets/images/customer05.png" alt=""><span>name</span><i
+          <li *ngFor ="let item of AllCustomersdata,let i = index"  [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"><img src="./assets/images/customer05.png" alt=""><span>{{item.name}}</span><i
               class="anticon anticon-delete" nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
-          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
-              nzType="info"></i></li>
         </ul>
       </div>
     </div>
@@ -61,25 +58,14 @@
         <button nz-button nzType="primary" class="services_addbut">Add</button>
       </div>
       <div class="services_list">
+        <div class="border_size"></div>
         <div style="padding:0 20px;">
-          <ul>
-            <li><span>Type1</span><i class="anticon anticon-delete" nzType="info"></i></li>
-            <li><span>Type2</span><i class="anticon anticon-delete" nzType="info"></i></li>
-            <li><span>Type3</span><i class="anticon anticon-delete" nzType="info"></i></li>
-          </ul>
+            <ul>
+              <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li>
+            </ul>
         </div>
       </div>
     </div>
   </div>
-  <div class="chearts">
-    <div class="Cu">
-      <p>Instance Count of Customer</p>
-      <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
-      <div class="legend"></div><span>users</span>
-    </div>
-    <div class="type">
-      <p>Instance Count of Service Type</p>
-      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
-    </div>
-  </div>
+ 
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
index f591cc4b..abfcb5c0 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/components/customer/customer.component.less
@@ -34,9 +34,10 @@
     }
     .customer {
         height: 580px;
-        margin-right: 2.5%;
+        overflow: hidden;
+        width: 32%;
+        margin-right: 1.5%;
         border-radius: 5px;
-        width: 31%;
         background-color: #fff;
         box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
         display: inline-block;
@@ -107,10 +108,10 @@
         
     }
     .services_type {
+        overflow: hidden;
         height: 580px;
-        margin-right: 2.5%;
         border-radius: 5px;
-        width: 31%;
+        width: 32%;
         background-color: #fff;
         box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
         display: inline-block;
@@ -129,6 +130,7 @@
                 img {
                     width: 50px;
                     float: right;
+                    margin-right: -10px;
                     margin-top: 5px;
                 }
             }
@@ -158,28 +160,38 @@
                     background-color: #0DA9E2;
                 }
             }
+
             .services_list {
                 background:linear-gradient(to right, #E5F6FF, #CFEEFA);
                 height: 530px;
-                li {
-                    height: 50px;
-                    line-height: 3.5;
-                    width: 100%;
-                    border-bottom: 2px #FFFFFF dashed;
-                    i {
-                        float: right;
-                        clear: both;
-                        padding-top: 17px;
+                .border_size{
+                    position: absolute;
+                    margin-left: -8px;
+                    width: 0;
+                    height: 0;
+                    border-top: 24px solid transparent;
+                    border-bottom: 24px solid transparent;
+                    border-right: 10px solid #E5F6FF;
+                }
+                    li {
+                        height: 50px;
+                        line-height: 3.5;
+                        width: 100%;
+                        border-bottom: 2px #FFFFFF dashed;
+                        i {
+                            float: right;
+                            clear: both;
+                            padding-top: 17px;
+                        }
                     }
                 }
-
-            }
             
         }
     }
     .chearts {
         display: inline-block;
-        width: 31%;
+        width: 32%;
+        margin-right: 1.5%;  
         vertical-align: top;
         >div{
             padding: 20px 20px;
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index 3008ae02..dff15f81 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -14,6 +14,7 @@
     limitations under the License.
 */
 import { Component, OnInit } from '@angular/core';
+import { ManagemencsService } from '../../managemencs.service';
 
 @Component({
   selector: 'app-customer',
@@ -21,10 +22,39 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./customer.component.less']
 })
 export class CustomerComponent implements OnInit {
-
-  constructor() { }
+  public chose = '';
+ 
+  constructor(private managemencs: ManagemencsService) { }
 
   ngOnInit() {
+    this.getAllCustomers();
+    this.getCustomersPie();
+  }
+  AllCustomersdata = [];
+  AllServiceTypes = [];
+  customerber = [];
+  // Get all customers
+  active;
+  getAllCustomers() {
+    this.managemencs.getAllCustomers().subscribe((data) => {
+      this.AllCustomersdata = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}});
+      this.active = this.AllCustomersdata[0].id
+      this.getServiceTypes(this.active);
+      this.getCustomersColumn(this.active);
+    })
+  
+  }
+  // Get all servicetype
+  getServiceTypes(item){
+    this.managemencs.getServiceTypes(item).subscribe((data) => {
+      this.AllServiceTypes = data.map((item) => {return {type:item["service-type"],id:item["global-customer-id"]}});
+    })
+  }
+  // Switch user data
+  choseCustomer(index,item){
+    this.chose = index;
+    this.getServiceTypes(item);
+    this.getCustomersColumn(item);
   }
   customeradd = false;
   servicesadd = false;
@@ -100,20 +130,25 @@ export class CustomerComponent implements OnInit {
       }]
     }
   };
-  // getHomeAlarmData() {
-  //   this.myhttp.getHomeAlarmData()
-  //     .subscribe((data) => {
-  //       this.alarmChartData = {
-  //         series: [{
-  //           data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
-  //         }]
-  //       };
-  //     })
-  // }
+  // get customers chart pie
+  getCustomersPie(){
+    this.managemencs.getCustomersPie().subscribe((data)=>{
+      this.CUChartData = {
+        series: [{
+          data: data
+        }]
+      }
+      console.log(this.CUChartData)
+    }, (err) => {
+      console.log(err);
+    });
+  }
 
   // service bar
   serviceData: Object;
   serviceInit: Object = {
+    height: 200,
+    width:280,
     option: {
       tooltip: {
         show: true,
@@ -274,4 +309,29 @@ export class CustomerComponent implements OnInit {
       ]
     }
   }
+  name_s = [];
+  value_s = [];
+  getCustomersColumn(item){
+    this.name_s = [];
+    this.value_s = [];
+    this.managemencs.getCustomersColumn(item).subscribe((data)=>{
+      data.forEach((item)=>{
+        this.name_s.push(item.name);
+        this.value_s.push(item.value);
+      })
+      this.serviceData = {
+        yAxis:[{
+          data:this.name_s
+        }],
+        series :[{
+          data:this.value_s
+        }]
+      }
+      console.log(this.serviceData)
+    })
+  }
+
+ 
+
+  
 }