User and service type management interface

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

5 files changed, 496 insertions, 313 deletions

diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
index 7c1eee6b..35bf3bce 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
@@ -20,3 +20,7 @@
 (chartInit)="chartInit($event)">
   Bar Chart
 </div>
+<div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;margin-top: 20px">
+  <img src="../../../../assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;">
+  {{this.initData["customer"]}}
+</div>
\ No newline at end of file
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 bc2beb63..217ee121 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -62,6 +62,7 @@ export class BarComponent implements OnInit {
   updateOption: any;
   chartDataChange() {
     this.updateOption = this.chartData;
+    console.log(this.initData.customer)
   }
   chartInit(chart) {
     this.chartIntance = chart;
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
index 6693354b..db5b67ef 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -29,18 +29,21 @@
     <div class="customer_title">
       <div class="customers">
         <span>Customer</span>
-        <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd">
+        <img  src="./assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd" style="cursor: pointer">
       </div>
     </div>
     <div class="customer_detail">
       <div class="customer_add" *ngIf="customeradd">
-        <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default">
-        <button nz-button nzType="primary" class="customer_addbut">Add</button>
+        <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default"  [(ngModel)]="addNewCustomer">
+        <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer()">Add</button>
       </div>
       <div class="customer_list">
         <ul>
-          <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 *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" (click)="deleteCustomerModel(item)"></i>
+          </li>
         </ul>
       </div>
     </div>
@@ -49,23 +52,55 @@
     <div class="services_type_title">
       <div class="servicess">
         <span>Services Type</span>
-        <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd ">
+        <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd " style="cursor: pointer">
       </div>
     </div>
     <div class="services_type_detail">
       <div class="services_add" *ngIf="servicesadd">
         <input nz-input placeholder="Input services type" class="services_name" nzSize="default">
-        <button nz-button nzType="primary" class="services_addbut">Add</button>
+        <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType()">Add</button>
       </div>
       <div class="services_list">
         <div class="border_size"></div>
         <div style="padding:0 20px;">
             <ul>
-              <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li>
+              <li *ngFor = "let item of AllServiceTypes" >
+                <span>{{item.type}}</span>
+                <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i>
+              </li>
             </ul>
         </div>
       </div>
     </div>
   </div>
+
+  <nz-modal nzWidth="428"  [(nzVisible)]="deleteCustomerModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCustomerCancel()"
+            (nzOnOk)="deleteCustomerOk()"  nzClassName="deleteModel">
+    <h3><span style="color: red">*&nbsp;</span>Are you sure delete this Customer ?</h3>
+    <div class="question">
+      <h4>Customer Name:</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div>
+    </div>
+    <div class="question">
+      <h4>Customer ID:</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
+    </div>
+  </nz-modal>
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle="Delete" (nzOnCancel)="deleteServiceTypeCancel()"
+            (nzOnOk)="deleteServiceTypeOk()"  nzClassName="deleteModel deleteServiceTypeModel">
+    <h3><span style="color: red">*&nbsp;</span>Are you sure delete this Service Type ?</h3>
+    <div class="question">
+      <h4>Customer Name:</h4>
+      <div class="deleteModelContent">{{selectCustomer.name}}</div>
+    </div>
+    <div class="question">
+      <h4>Customer ID:</h4>
+      <div class="deleteModelContent">{{selectCustomer.id}}</div>
+    </div>
+    <div class="question">
+      <h4>Service Type:</h4>
+      <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
+    </div>
+  </nz-modal>
  
 </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 abfcb5c0..89f49cc0 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/components/customer/customer.component.less
@@ -15,7 +15,7 @@
 */
 .content {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     i.anticon {
         cursor: pointer;
         font-size: 18px;
@@ -33,7 +33,7 @@
         }
     }
     .customer {
-        height: 580px;
+        height: 100%;
         overflow: hidden;
         width: 32%;
         margin-right: 1.5%;
@@ -44,7 +44,7 @@
         vertical-align: top;
         .customer_title {
             line-height: 3.5;
-            height: 50px;
+            height: 5%;
             width: 100%;
             border-bottom: 1px #07A9E1 solid;
             .customers {
@@ -61,7 +61,7 @@
             }
         }
         .customer_detail {
-            height: 535px;
+            height: 95%;
             width: 100%;
             border-top: 1px #07A9E1 solid;
             .customer_add {
@@ -93,6 +93,7 @@
                     height: 50px;
                     line-height: 3.5;
                     width: 100%;
+                    cursor: pointer;
                     img {
                         width: 10%;
                     }
@@ -109,7 +110,7 @@
     }
     .services_type {
         overflow: hidden;
-        height: 580px;
+        height: 100%;
         border-radius: 5px;
         width: 32%;
         background-color: #fff;
@@ -118,7 +119,7 @@
         vertical-align: top;
         .services_type_title {
             line-height: 3.5;
-            height: 50px;
+            height: 5%;
             width: 100%;
             border-bottom: 1px #07A9E1 solid;
             .servicess {
@@ -136,7 +137,7 @@
             }
         }
         .services_type_detail {
-            height: 535px;
+            height: 95%;
             width: 100%;
             border-top: 1px #07A9E1 solid;
             .services_add {
@@ -163,7 +164,7 @@
 
             .services_list {
                 background:linear-gradient(to right, #E5F6FF, #CFEEFA);
-                height: 530px;
+                height: 100%;
                 .border_size{
                     position: absolute;
                     margin-left: -8px;
@@ -175,13 +176,20 @@
                 }
                     li {
                         height: 50px;
-                        line-height: 3.5;
+                        line-height: 50px;
                         width: 100%;
+                        vertical-align: middle;
                         border-bottom: 2px #FFFFFF dashed;
+                        position: relative;
                         i {
-                            float: right;
-                            clear: both;
-                            padding-top: 17px;
+                            display: inline-block;
+                            vertical-align: middle;
+                            position: absolute;
+                            width: 48px;
+                            height: 48px;
+                            top: 0;
+                            right: -16px;
+                            line-height: 46px;
                         }
                     }
                 }
@@ -193,13 +201,14 @@
         width: 32%;
         margin-right: 1.5%;  
         vertical-align: top;
+        height: 100%;
         >div{
             padding: 20px 20px;
         }
         .Cu {
-            height: 280px;
+            height: 48%;
             width: 100%;
-            margin-bottom: 20px;
+            margin-bottom: 7%;
             margin-right: 2.5%;
             border-radius: 5px;
             background-color: #fff;
@@ -210,17 +219,16 @@
             }
             .legend {
                 height: 10px;
-                width: 20px;
+                width: 10px;
                 display: inline-block;
                 background: linear-gradient(to right,#7DCEFB, #0DA9E2);
-                border-radius: 1px;
+                border-radius: 50%;
                 margin: 15px 4px 0 43%;
             }
         }
         .type {
-            height: 280px;
+            height: 48%;
             width: 100%;
-            margin-bottom: 20px;
             margin-right: 2.5%;
             border-radius: 5px;
             background-color: #fff;
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index dff15f81..f3d1af3e 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -26,312 +26,447 @@ export class CustomerComponent implements OnInit {
  
   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;
-  //Customer pie
-  CUChartData: Object;
-  CUChartInit: Object = {
-    height: 180,
-    option: {
-      color: ["#F2F6FD"],
-      series: [{
-        type: 'pie',
-        name: "customer",
-        radius: '90%',
-        center: ['50%', '53%'],
-        data: [{
-          value: 67,
+    ngOnInit() {
+        this.getAllCustomers();
+    }
 
-        }, {
-          value: 10,
+    AllCustomersdata = [];
+    AllServiceTypes = [];
+    customerber = [];
+    // Get all customers
+    active;
+    selectCustomer = {
+        name:null,
+        id:null
+    };
+    addNewCustomer = null;
+    addNewServiceType = null;
+    deleteCustomerModelVisible = false;
+    deleteServiceTypeModelVisible = false;
 
-        }, {
-          value: 17,
+    getAllCustomers() {
+        this.managemencs.getAllCustomers().subscribe((data) => {
+            this.AllCustomersdata = data.map((item) => {
+                return {name: item["subscriber-name"], id: item["global-customer-id"]}
+            });
+            this.active = this.selectCustomer = this.AllCustomersdata[0];
+            this.serviceInit["customer"] = this.AllCustomersdata[0].name;
+            this.getCustomersPie();
+            this.getServiceTypes(this.active);
+            this.getCustomersColumn(this.active);
+        })
 
-        }, {
-          value: 33,
-        },],
-        label: {
-          normal: {
-            position: 'center',
-            show: false,
-            formatter: '   {b|{b}：{d}%}  ',
-            backgroundColor: 'rgba(51,51,51,0.9)',
-            borderColor: 'rgba(51,51,51,0.9)',
-            borderWidth: 1,
-            borderRadius: 4,
-            rich: {
-              b: {
-                fontSize: 16,
-                color: '#fff',
-                lineHeight: 33
-              }
-            }
-          },
-          emphasis: {
-            show: true,
+    }
 
-          }
-        },
-        itemStyle: {
-          normal: {
-            borderWidth: 2,
-            borderColor: '#ffffff',
-          },
-          emphasis: {
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [{
-                offset: 0, color: '#7DCEFB' // 0% 处的颜色
-              }, {
-                offset: 1, color: '#0DA9E2' // 100% 处的颜色
-              }],
-              global: false // 缺省为 false
-            },
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 10, 5, 0)'
-          }
-        }
-      }]
+    // 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"]}
+            });
+        })
     }
-  };
-  // 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,
-        trigger: 'item',
-        formatter: "{c}"
-      },
-      grid: {
-        top: '5%',
-        left: '5%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: [
-        {
-          type: 'value',
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#EDEDED"
-            }
-          },
-          axisLabel: {
-            color: "#3C4F8C"
-          }
+    // Switch user data
+    choseCustomer(index, item) {
+        this.chose = index;
+        this.selectCustomer = item;
+        this.serviceInit["customer"] = this.selectCustomer.name;
+        this.getServiceTypes(item);
+        this.getCustomersColumn(item);
+    }
+
+    customeradd = false;
+    servicesadd = false;
+    //Customer pie
+    CUChartData: Object;
+    CUChartInit: Object = {
+        height: 200,
+        option: {
+            color: ["#F2F6FD"],
+            series: [{
+                type: 'pie',
+                name: "customer",
+                radius: '90%',
+                center: ['50%', '50%'],
+                data: [{
+                    value: 67,
+                }, {
+                    value: 10,
+                }, {
+                    value: 17,
+                }, {
+                    value: 33,
+                },],
+                label: {
+                    normal: {
+                        position: 'center',
+                        show: false,
+                        formatter: '   {b|{b}：{d}%}  ',
+                        backgroundColor: 'rgba(51,51,51,0.9)',
+                        borderColor: 'rgba(51,51,51,0.9)',
+                        borderWidth: 1,
+                        borderRadius: 4,
+                        rich: {
+                            b: {
+                                fontSize: 16,
+                                color: '#fff',
+                                lineHeight: 33
+                            }
+                        }
+                    },
+                    emphasis: {
+                        show: true,
+
+                    }
+                },
+                itemStyle: {
+                    normal: {
+                        borderWidth: 3,
+                        borderColor: '#ffffff',
+                    },
+                    emphasis: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#7DCEFB'
+                            }, {
+                                offset: 1, color: '#0DA9E2'
+                            }],
+                            global: false
+                        },
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 10, 5, 0)'
+                    }
+                }
+            }]
         }
+    };
 
-      ],
-      yAxis: [
-        {
-          type: 'category',
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#EDEDED"
+    // get customers chart pie
+    getCustomersPie() {
+        this.managemencs.getCustomersPie().subscribe((data) => {
+            this.CUChartData = {
+                series: [{
+                    data: data
+                }]
             }
-          },
-          axisLabel: {
-            color: "#3C4F8C"
-          },
-          data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
-        },
+            console.log(this.CUChartData)
+        }, (err) => {
+            console.log(err);
+        });
+    }
 
-      ],
-      series: [
-        {
-          name: '',
-          barWidth: '40%',
-          type: 'bar',
-          data: [2800, 1700, 1200, 1000, 900],
-          itemStyle: {
-            normal: {
-              color: function (params) {
-                // build a color map as your need.
-                var colorList = [
-                  {
+    // service bar
+    serviceData: Object;
+    serviceInit: Object = {
+        customer: '',
+        height: 230,
+        width: 410,
+        option: {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: "{c}"
+            },
+            grid: {
+                top: '5%',
+                left: '5%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'value',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    }
+                }
+
+            ],
+            yAxis: [
+                {
+                    type: 'category',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    },
+                    data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
+                },
+
+            ],
+            series: [
+                {
+                    name: '',
+                    barWidth: '40%',
                     type: 'bar',
-                    colorStops: [{
-                      offset: 0,
-                      color: '#FCCE2B' 
-                    }, {
-                      offset: 1,
-                      color: '#FEE956' 
-                    }],
-                    globalCoord: false, 
-                  },
-                  {
+                    data: [2800, 1700, 1200, 1000, 900],
+                    itemStyle: {
+                        normal: {
+                            color: function (params) {
+                                // build a color map as your need.
+                                var colorList = [
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#FCCE2B'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FEE956'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#F43A59'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FA6C92'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#4F5B60'
+                                        }, {
+                                            offset: 1,
+                                            color: '#879499'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#31DAC3'
+                                        }, {
+                                            offset: 1,
+                                            color: '#5FEFE3'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#999999'
+                                        }, {
+                                            offset: 1,
+                                            color: '#C9C9C9'
+                                        }],
+                                        globalCoord: false,
+                                    }
+                                ];
+                                return colorList[params.dataIndex]
+                            },
+                        }
+                    }
+                },
+                {
+                    name: 'Type4',
+                    type: 'bar',
+                    stack: '',
+                    data: 2800,
+
+                },
+                {
+                    name: 'Type1',
                     type: 'bar',
-                    colorStops: [{
-                      offset: 0,
-                      color: '#F43A59' 
-                    }, {
-                      offset: 1,
-                      color: '#FA6C92' 
-                    }],
-                    globalCoord: false,
-                  },
-                  {
+                    stack: '',
+                    data: 1700
+                },
+                {
+                    name: 'Type2',
                     type: 'bar',
-                    colorStops: [{
-                      offset: 0,
-                      color: '#4F5B60' 
-                    }, {
-                      offset: 1,
-                      color: '#879499' 
-                    }],
-                    globalCoord: false, 
-                  },
-                  {
+                    stack: '',
+                    data: 1500
+                },
+                {
+                    name: 'Type3',
                     type: 'bar',
-                    colorStops: [{
-                      offset: 0,
-                      color: '#31DAC3' 
-                    }, {
-                      offset: 1,
-                      color: '#5FEFE3' 
-                    }],
-                    globalCoord: false, 
-                  },
-                  {
+                    stack: '',
+                    data: 1300
+                },
+                {
+                    name: 'Other',
                     type: 'bar',
-                    colorStops: [{
-                      offset: 0,
-                      color: '#999999' 
-                    }, {
-                      offset: 1,
-                      color: '#C9C9C9'
-                    }],
-                    globalCoord: false, 
-                  }
-                ];
-                return colorList[params.dataIndex]
-              },
+                    stack: '',
+                    data: 1000,
+
+                }
+            ]
+        }
+    };
+    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
+                }]
             }
-          }
-        },
-        {
-          name: 'Type4',
-          type: 'bar',
-          stack: '',
-          data: 2800,
+            console.log(this.serviceData)
+        })
+    }
 
-        },
-        {
-          name: 'Type1',
-          type: 'bar',
-          stack: '',
-          data: 1700
-        },
-        {
-          name: 'Type2',
-          type: 'bar',
-          stack: '',
-          data: 1500
-        },
-        {
-          name: 'Type3',
-          type: 'bar',
-          stack: '',
-          data: 1300
-        },
-        {
-          name: 'Other',
-          type: 'bar',
-          stack: '',
-          data: 1000,
+    createNewCustomer() {
+        let createParams = {
+            customerId: this.addNewCustomer
+        };
+        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
 
-        }
-      ]
+    // Customer delete model
+     thisdeleteCustomer={
+        name:null,
+         id:null
+     };
+    deleteCustomerModel(itemCustomer) {
+        this.thisdeleteCustomer = itemCustomer;
+        this.deleteCustomerModelVisible = true;
+    }
+    deleteCustomerCancel() {
+        this.deleteCustomerModelVisible = false;
+    }
+    deleteCustomerOk() {
+        this.deleteCustomerModelVisible = false;
+        this.getCustomerVersion(this.thisdeleteCustomer);
+    }
+    getCustomerVersion(thisdeleteCustomer){
+        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId:thisdeleteCustomer.id,
+                    version:data["result"]["resource-version"]
+                };
+                this.deleteCustomer(params);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteCustomer(params){
+        this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    createNewServiceType() {
+        let createParams = {
+            customer: this.selectCustomer,
+            ServiceType:this.addNewServiceType
+        };
+        this.managemencs.createServiceType(createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.getCustomersColumn(this.selectCustomer);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    // ServiceType delete model
+    thisdeleteServiceType={
+        type:null
+    };
+    deleteServiceTypeModel(itemServiceType) {
+        this.thisdeleteServiceType = itemServiceType;
+        this.deleteServiceTypeModelVisible = true;
+    }
+    deleteServiceTypeCancel() {
+        this.deleteServiceTypeModelVisible = false;
+    }
+    deleteServiceTypeOk() {
+        this.deleteServiceTypeModelVisible = false;
+        this.getServiceTypeVersion();
+    }
+    getServiceTypeVersion(){
+        let params={
+            customerId:this.selectCustomer.id,
+            ServiceType:this.thisdeleteServiceType["type"]
+        };
+        this.managemencs.getdeleteServiceTypeVersion(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId:this.selectCustomer,
+                    ServiceType:this.thisdeleteServiceType["type"],
+                    version:data["result"]["resource-version"]
+                };
+                this.deleteServiceType(params);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteServiceType(params){
+        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.getCustomersPie();
+                this.getServiceTypes(params.customerId);
+                this.getCustomersColumn(params.customerId);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
     }
-  }
-  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)
-    })
-  }
 
- 
 
-  
 }