feat: adjust the file structure of the customer component

Change-Id: I1290380f894e8c38b90f9e6829aaac5e96d67194
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

4 files changed, 960 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.html b/usecaseui-portal/src/app/views/management/customer/customer.component.html
new file mode 100644
index 00000000..4f532f8f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.html
@@ -0,0 +1,138 @@
+<!--
+    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.
+-->
+<div class="content">
+  <div class="chearts">
+    <div class="Cu" #chart>
+      <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart" #pie></app-pie>
+      <div *ngIf="!serviceChart">No Service Instances </div>
+    </div>
+    <div class="type">
+      <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
+      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+      <div class="footname">
+        <img src="assets/images/customerBarUser.png" alt="customerName">
+        {{this.serviceInit["customer"]}}     
+      </div>
+    </div>
+  </div>
+  <div class="customer">
+    <div class="customer_title">
+      <div class="customers">
+        <span> {{"i18nTextDefine_Customer" | translate}} </span>
+        <img  src="assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd">
+      </div>
+    </div>
+    <div class="customer_detail">
+      <div class="customer_add" *ngIf="customeradd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name"
+          nzSize="default" [(ngModel)]="addNewCustomer">
+        <button nz-button nzType="primary" class="customer_addbut"
+          (click)="createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</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" (click)="deleteCustomerModel(item)"></i>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="services_type">
+    <div class="services_type_title">
+      <div class="servicess">
+        <span> {{"i18nTextDefine_ServiceType" | translate}} </span>
+        <img src="assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd ">
+      </div>
+    </div>
+    <div class="services_type_detail">
+      <div class="services_add" *ngIf="servicesadd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name"
+          nzSize="default" [(ngModel)]="addNewServiceType">
+        <button nz-button nzType="primary" class="services_addbut"
+          (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+      </div>
+      <div class="services_list_content">
+        <div class="border_size"></div>
+        <div class="services_list">
+          <ul>
+            <li *ngFor="let item of AllServiceTypes">
+              <span>{{item.type}}</span>
+              <i class="anticon anticon-delete" (click)="deleteServiceTypeModel(item)"></i>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk(notificationModel)" nzClassName="deleteModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
+    </div>
+  </nz-modal>
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible"
+    nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
+    (nzOnOk)="deleteServiceTypeOk(notificationModel)" nzClassName="deleteModel deleteServiceTypeModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.name}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.id}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_ServiceType" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
+    </div>
+  </nz-modal>
+  <!--2019.08.14 add notification-->
+  <ng-template #notificationModel>
+    <div class="ant-notification-notice-content">
+      <div class="ant-notification-notice-with-icon">
+        <span class="ant-notification-notice-icon">
+          <img src="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+        </span>
+        <div class="ant-notification-notice-message" *ngIf="notificationAttributes.title == 'Customer'">
+          {{"i18nTextDefine_"+notificationAttributes.title | translate}}&nbsp;
+          {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+        </div>
+        <div class="ant-notification-notice-description">
+          <div class="notificationlist">
+            <p>{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+            <span>{{ notificationAttributes.name }}</span>
+          </div>
+        </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
+      </div>
+    </div>
+  </ng-template>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.less b/usecaseui-portal/src/app/views/management/customer/customer.component.less
new file mode 100644
index 00000000..93e14455
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.less
@@ -0,0 +1,292 @@
+/*
+    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.
+*/
+.content {
+    display: flex;   
+    width: 100%;
+    min-height: 917px;
+    i.anticon {
+        cursor: pointer;
+        font-size: 18px;
+        padding: 2px;
+        &:hover{
+            color: #0DA9E2;
+        }
+    }
+    li.active{
+        &:hover{
+            cursor: pointer;
+            color: #3C4F8C;
+            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
+            background-color: #e6f7ff;
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 32%;
+        margin-right: 1.5%;  
+        vertical-align: top;
+        height: 100%;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu,.type{
+            min-height: 438px;
+            height: 46.5vh;
+            width: 100%;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            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);
+            p{
+                color: #0DA9E2;
+                font-family:"ArialMT";
+            }
+        }
+        .Cu {
+            margin-bottom: 20px;
+            p{
+                margin-bottom: 60px;
+            }
+            div:last-child{
+                color: #ddd; 
+                font-weight: 700;
+                font-size: 19px;
+                height: 200px;
+                text-align: center;
+                line-height: 8;
+            }
+        }
+        .type {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            app-bar{
+                position: relative;
+                left: 0px;
+                top: -6%;
+                width: 100%;
+            }
+            .footname{
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #3C4F8C;
+                margin-bottom: 20px;
+                
+                img{
+                    margin-right: 5px;
+                    margin-bottom: 3px;
+                }
+            }
+            // &::after{
+            //     display: block;
+            //     content: '';
+            //     height: 1px;
+            // }
+
+        }
+    }
+    .customer {
+        min-height: 897px;
+        height: 95.7vh;
+        overflow: hidden;
+        width: 32%;
+        margin-right: 1.5%;
+        border-radius: 5px;
+        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;
+        vertical-align: top;
+        .customer_title {
+            line-height: 3.5em;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .customers {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 30px;
+                    height: 30px;
+                    float: right;
+                    margin-top: 7px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .customer_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            border-top: 1px #07A9E1 solid;
+            .customer_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .customer_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .customer_addbut {
+                    float: right;
+                    margin-top: 9px;
+                    width: 28%;
+                    background-color: #0DA9E2;
+                }
+            }
+            .customer_list {
+                .active {
+                    background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                    color: #3C4F8C;
+                }
+                li {
+                    display:flex; 
+                    align-items: center;                 
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    cursor: pointer;
+                    color: rgba(60,79,140,0.5);
+                    img {
+                        width: 30px;
+                        height: 30px;
+                    }
+                    span {
+                        width: 70%;
+                        padding-left: 10%;
+                        display: block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        min-height: 897px;
+        height: 95.7vh;
+        overflow: hidden;
+        border-radius: 5px;
+        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;
+        vertical-align: top;
+        .services_type_title {
+            line-height: 3.5em;
+            //height: 5%;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .servicess {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 40px;
+                    height:40px;
+                    float: right;
+                    margin-right: -10px;
+                    margin-top: 5px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .services_type_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            border-top: 1px #07A9E1 solid;
+            .services_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .services_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .services_addbut {
+                    float: right;
+                    margin-top: 5px;
+                    width: 28%;
+                    clear: both;
+                    background-color: #0DA9E2;
+                }
+            }
+
+            .services_list_content {
+                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                height: 100%;
+                .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;
+                }
+                .services_list{ 
+                    padding:0 20px;
+                    li {
+                        height: 50px;
+                        line-height: 50px;
+                        width: 100%;
+                        vertical-align: middle;
+                        border-bottom: 2px #FFFFFF dashed;
+                        position: relative;
+                        color: #3C4F8C;
+                        i {
+                            display: inline-block;
+                            vertical-align: middle;
+                            position: absolute;
+                            width: 48px;
+                            height: 48px;
+                            top: 0;
+                            right: -16px;
+                            line-height: 46px;
+                        }
+                    }
+                }
+                    
+            }
+            
+        }
+    }
+
+    
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.spec.ts b/usecaseui-portal/src/app/views/management/customer/customer.component.spec.ts
new file mode 100644
index 00000000..f185e7a7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerComponent } from './customer.component';
+
+describe('CustomerComponent', () => {
+  let component: CustomerComponent;
+  let fixture: ComponentFixture<CustomerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.ts b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
new file mode 100644
index 00000000..39c42a0d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
@@ -0,0 +1,505 @@
+/*
+    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, ViewChild } from '@angular/core';
+import { ManagemencsService } from '../../../core/services/managemencs.service';
+import { NzNotificationService } from 'ng-zorro-antd';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'app-customer',
+    templateUrl: './customer.component.html',
+    styleUrls: ['./customer.component.less']
+})
+export class CustomerComponent implements OnInit {
+    @ViewChild('chart') chart;
+    @ViewChild('pie') pie;
+    public chose = '';
+
+    resizeMark;
+    constructor(
+        private managemencs: ManagemencsService,
+        private notification: NzNotificationService
+    ) {
+    }
+
+    ngOnInit() {
+        this.getAllCustomers();
+        this.resizeMark = Observable.fromEvent(window,'resize')
+            .subscribe((event) => {
+                this.pie.resize(this.chart.nativeElement.offsetHeight,210)
+            })
+    }
+
+    ngAfterViewInit(){
+        this.pie.resize(this.chart.nativeElement.offsetHeight,210)
+    }
+
+    ngOnDestroy(){
+        this.resizeMark.unsubscribe()
+      }
+
+    AllCustomersdata = [];
+    AllServiceTypes = [];
+    customerber = [];
+    // Get all customers
+    selectCustomer = {
+        name: null,
+        id: null
+    };
+    addNewCustomer = null;
+    addNewServiceType = null;
+    deleteCustomerModelVisible = false;
+    deleteServiceTypeModelVisible = false;
+    //2019.08.14 add
+    notificationAttributes = null;
+    setNotification({ title, imgPath, action, status, name }):void{
+        this.notificationAttributes = { title, imgPath, action, status, name }
+    }
+    notificationSuccess(notificationModel,title,action,name) {
+        this.notification.remove()
+        this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name })
+        this.notification.template(notificationModel);
+    }
+    notificationFailed(notificationModel,title,action,name) {
+        this.notification.remove()
+        this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name })
+        this.notification.template(notificationModel)
+    }
+    getAllCustomers() {
+        this.managemencs.getAllCustomers().subscribe((data) => {
+            this.AllCustomersdata = data.map((item) => {
+                return { name: item["subscriber-name"], id: item["global-customer-id"] }
+            });
+            this.selectCustomer = this.AllCustomersdata[0];
+            this.serviceInit["customer"] = this.AllCustomersdata[0].name;
+            this.getCustomersPie();
+            this.getServiceTypes(this.selectCustomer);
+            this.getCustomersColumn(this.selectCustomer);
+        })
+
+    }
+
+    // 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.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: [],
+                label: {
+                    normal: {
+                        position: 'center',
+                        show: false,
+                        formatter: '   {b|{b}：{c}}  ',
+                        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,
+
+                    }
+                },
+                labelLine: {
+                    normal: {
+                        show: false
+                    }
+                },
+                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
+                        },
+                        borderWidth: 0,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 10, 5, 0)'
+                    }
+                }
+            }]
+        }
+    };
+
+    // get customers chart pie
+    Pie_name = [];
+    Pie_value = [];
+    serviceChart = true;
+    getCustomersPie() {
+        this.managemencs.getCustomersPie().subscribe((data) => {
+            this.serviceChart =data.serviceTotalNum > 0 ? true : false
+            this.CUChartData = {
+                series: [{
+                    data: data.customerServiceList
+                }]
+            }
+        }, (err) => {
+            console.log(err);
+        });
+    }
+
+    // service bar
+    serviceData: Object;
+    serviceInit: Object = {
+        customer: '',
+        height: 190,
+        option: {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: "{b}:\n{c}"
+            },
+            grid: {
+                top: '5%',
+                left: '0%',
+                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: [],
+                },
+
+            ],
+            series: [
+                {
+                    name: '',
+                    barWidth: '40%',
+                    type: 'bar',
+                    data: [],
+                    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: '',
+
+                },
+                {
+                    name: 'Type1',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type2',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type3',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Other',
+                    type: 'bar',
+                    stack: '',
+                    data: '',
+
+                }
+            ]
+        }
+    };
+    name_s = [];
+    value_s = [];
+    getCustomersColumn(item) {
+        this.name_s = [];
+        this.value_s = [];
+        this.managemencs.getCustomersColumn(item).subscribe((data) => {
+            data.list.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
+                }]
+            }
+        })
+    }
+
+    createNewCustomer(notificationModel) {
+        let createParams = {
+            customerId: this.addNewCustomer,
+            'global-customer-id': this.addNewCustomer,
+            'subscriber-name': this.addNewCustomer,
+            'subscriber-type': 'INFRA'
+        };
+        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel,'Customer','Create',this.addNewCustomer);
+                this.getAllCustomers();
+            } else {
+                this.notificationFailed(notificationModel,'Customer','Create',this.addNewCustomer);
+            }
+        })
+    }
+
+    // Customer delete model
+    thisdeleteCustomer = {
+        name: null,
+        id: null
+    };
+    deleteCustomerModel(itemCustomer) {
+        this.thisdeleteCustomer = itemCustomer;
+        this.deleteCustomerModelVisible = true;
+    }
+    deleteCustomerCancel() {
+        this.deleteCustomerModelVisible = false;
+    }
+    deleteCustomerOk(notificationModel) {
+        this.deleteCustomerModelVisible = false;
+        this.getCustomerVersion(this.thisdeleteCustomer, notificationModel);
+    }
+    getCustomerVersion(thisdeleteCustomer, notificationModel) {
+        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: thisdeleteCustomer.id,
+                    resourceVersion: data["result"]["resource-version"]
+                };
+                this.deleteCustomer(params, notificationModel)
+            } else {
+                console.error(data, "Interface returned error")
+            }
+        })
+    }
+    deleteCustomer(paramsObj, notificationModel) {
+        this.managemencs.deleteSelectCustomer(paramsObj).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel,'Customer','delete',this.thisdeleteCustomer.name);
+                this.getAllCustomers();
+            } else {
+                this.notificationFailed(notificationModel,'Customer','delete',this.thisdeleteCustomer.name);
+            }
+        })
+    }
+
+    createNewServiceType(notificationModel) {
+        let createParams = {
+            customer: this.selectCustomer,
+            ServiceType: this.addNewServiceType,
+            "service-type": this.addNewServiceType,
+            "temp-ub-sub-account-id": "sotnaccount"
+        };
+        this.managemencs.createServiceType(createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel,'ServiceType','Create',this.addNewServiceType);
+                this.getAllCustomers();
+            } else {
+                this.notificationFailed(notificationModel,'ServiceType','Create',this.addNewServiceType);
+            }
+        })
+    }
+
+    // ServiceType delete model
+    thisdeleteServiceType = {
+        type: null
+    };
+    deleteServiceTypeModel(itemServiceType) {
+        this.thisdeleteServiceType = itemServiceType;
+        this.deleteServiceTypeModelVisible = true;
+    }
+    deleteServiceTypeCancel() {
+        this.deleteServiceTypeModelVisible = false;
+    }
+    deleteServiceTypeOk(notificationModel) {
+        this.deleteServiceTypeModelVisible = false;
+        this.getServiceTypeVersion(notificationModel);
+    }
+    getServiceTypeVersion(notificationModel) {
+        let paramss = {
+            customerId: this.selectCustomer,
+            ServiceType: this.thisdeleteServiceType["type"]
+        };
+        this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: this.selectCustomer,
+                    ServiceType: this.thisdeleteServiceType["type"],
+                    version: data["result"]["resource-version"]
+                };
+                this.deleteServiceType(params, notificationModel);
+            } else {
+                console.error(data, "Interface returned error")
+            }
+        })
+    }
+    deleteServiceType(params, notificationModel) {
+        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel,'ServiceType','delete',this.thisdeleteServiceType["type"]);
+                this.getAllCustomers();
+            } else {
+                this.notificationFailed(notificationModel,'ServiceType','delete',this.thisdeleteServiceType["type"]);
+            }
+        })
+    }
+
+
+}