User and service type management interface

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

1 files changed, 422 insertions, 287 deletions

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)
-    })
-  }
 
- 
 
-  
 }