feat: change the project structure and add mock data function

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

4 files changed, 0 insertions, 962 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
deleted file mode 100644
index 04975e41..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!--
-    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">
-          <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
-          <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
-          <div *ngIf="!serviceChart"  style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
-          <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
-        </div>
-        <div class="type">
-          <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
-          <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
-          <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
-            <img src="./assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;">
-            {{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" style="cursor: pointer">
-      </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" nzType="info" (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 " style="cursor: pointer">
-      </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">
-        <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" (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/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
deleted file mode 100644
index 7d329230..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ /dev/null
@@ -1,254 +0,0 @@
-/*
-    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%;
-    height: 100%;
-    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;
-        }
-    }
-    .customer {
-        height: 100%;
-        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;
-            //height: 5%;
-            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;
-                }
-            }
-        }
-        .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: inline-block;
-                    }
-                }
-            }
-        }
-        
-    }
-    .services_type {
-        overflow: hidden;
-        height: 100%;
-        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;
-                }
-            }
-        }
-        .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 {
-                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;
-                }
-                    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;
-                        }
-                    }
-                }
-            
-        }
-    }
-    .chearts {
-        display: inline-block;
-        width: 32%;
-        margin-right: 1.5%;  
-        vertical-align: top;
-        height: 100%;
-        >div{
-            padding: 20px 20px;
-        }
-        .Cu {
-            height: 48%;
-            width: 100%;
-            margin-bottom: 7%;
-            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";
-            }
-            .legend {
-                height: 10px;
-                width: 10px;
-                display: inline-block;
-                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
-                border-radius: 50%;
-                margin: 15px 4px 0 43%;
-            }
-        }
-        .type {
-            height: 48%;
-            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";
-                
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
deleted file mode 100644
index f185e7a7..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
deleted file mode 100644
index d4d843ff..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ /dev/null
@@ -1,552 +0,0 @@
-/*
-    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, TemplateRef} from '@angular/core';
-import { ManagemencsService } from '../../managemencs.service';
-import { NzNotificationService } from 'ng-zorro-antd';
-@Component({
-  selector: 'app-customer',
-  templateUrl: './customer.component.html',
-  styleUrls: ['./customer.component.less']
-})
-export class CustomerComponent implements OnInit {
-  public chose = '';
- 
-    constructor(
-        private managemencs: ManagemencsService,
-        private notification: NzNotificationService
-    ) {
-    }
-
-    ngOnInit() {
-        this.getAllCustomers();
-    }
-
-    AllCustomersdata = [];
-    AllServiceTypes = [];
-    customerber = [];
-    // Get all customers
-    active;
-    selectCustomer = {
-        name:null,
-        id:null
-    };
-    addNewCustomer = null;
-    addNewServiceType = null;
-    deleteCustomerModelVisible = false;
-    deleteServiceTypeModelVisible = false;
-    //2019.08.14 add
-    notificationAttributes = {
-        "title":"Customer",
-        "imgPath":"../../../../assets/images/execute-inproess.png",
-        "action":"Create",
-        "status":"InProgress",
-        "name":""
-    };
-    notificationModelShow(template: TemplateRef<{}>): void {
-        console.log(this.notificationAttributes,"notificationModelShow show");
-        this.notification.template(template);
-    }
-    notificationSuccess(notificationModel){
-        this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png";
-        this.notificationAttributes.status = "Success";
-        this.notificationModelShow(notificationModel);
-    }
-    notificationFailed(notificationModel){
-        this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png";
-        this.notificationAttributes.status = "Failed";
-        this.notificationModelShow(notificationModel);
-    }
-    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);
-        })
-
-    }
-
-    // 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;
-    serviceNumber;
-    getCustomersPie() {
-        this.managemencs.getCustomersPie().subscribe((data) => {
-            this.serviceNumber = data.serviceTotalNum;
-          if (this.serviceNumber>0) {
-              this.serviceChart = true;
-          } else {
-            this.serviceChart = false;
-          }
-            this.CUChartData = {
-                series: [{
-                    data:data.customerServiceList
-                }]
-            }
-            console.log(this.CUChartData)
-        }, (err) => {
-            console.log(err);
-        });
-    }
-
-    // service bar
-    serviceData: Object;
-    serviceInit: Object = {
-        customer: '',
-        width: 280,
-        height: 190,
-        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: [],
-                },
-
-            ],
-            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
-                }]
-            }
-            console.log(this.serviceData)
-        })
-    }
-
-    createNewCustomer(notificationModel) {
-        let createParams = {
-            customerId: this.addNewCustomer,
-            'global-customer-id':this.addNewCustomer,
-            'subscriber-name':this.addNewCustomer,
-            'subscriber-type':'INFRA'
-        };
- 	this.notificationAttributes = {
-            "title":"Customer",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"Create",
-            "status":"InProgress",
-            "name":this.addNewCustomer
-        };
-        this.notificationModelShow(notificationModel);
-        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-               this.notificationSuccess(notificationModel);
-                this.getAllCustomers();
-                console.log(data, "Interface returned success")
-            } else {
-                this.notificationFailed(notificationModel);
-                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(notificationModel) {
-        this.deleteCustomerModelVisible = false;
-        this.getCustomerVersion(this.thisdeleteCustomer,notificationModel);
-        this.notificationAttributes = {
-            "title":"Customer",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"delete",
-            "status":"InProgress",
-            "name":this.thisdeleteCustomer.name
-        };
-        this.notificationModelShow(notificationModel);
-    }
-    getCustomerVersion(thisdeleteCustomer,notificationModel){
-        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                let params = {
-                    customerId:thisdeleteCustomer.id,
-                    version:data["result"]["resource-version"]
-                };
-                this.deleteCustomer(params,notificationModel);
-                console.log(data, "Interface returned success")
-            } else {
-                console.log(data, "Interface returned error")
-            }
-        })
-    }
-    deleteCustomer(params,notificationModel){
-        this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel);
-                this.getAllCustomers();
-                console.log(data, "Interface returned success")
-            } else {
-                this.notificationFailed(notificationModel);
-                console.log(data, "Interface returned error")
-            }
-        })
-    }
-
-    createNewServiceType(notificationModel) {
-        let createParams = {
-            customer: this.selectCustomer,
-            ServiceType: this.addNewServiceType,
-            "service-type":this.addNewServiceType,
-            "temp-ub-sub-account-id":"sotnaccount"
-        };
-	this.notificationAttributes = {
-            "title":"ServiceType",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"Create",
-            "status":"InProgress",
-            "name":this.addNewServiceType
-        };
-	this.notificationModelShow(notificationModel);
-        this.managemencs.createServiceType(createParams).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel);
-                this.getCustomersColumn(this.selectCustomer);
-                this.getAllCustomers();
-                console.log(data, "Interface returned success")
-            } else {
-                this.notificationFailed(notificationModel);
-                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(notificationModel) {
-        this.deleteServiceTypeModelVisible = false;
-        this.getServiceTypeVersion(notificationModel);
-    }
-    getServiceTypeVersion(notificationModel) {
-        let paramss = {
-            customerId: this.selectCustomer,
-            ServiceType: this.thisdeleteServiceType["type"]
-        };
-	this.notificationAttributes = {
-            "title":"ServiceType",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"delete",
-            "status":"InProgress",
-            "name":this.thisdeleteServiceType["type"]
-        };
-        this.notificationModelShow(notificationModel);
-        this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
-            console.log(data)
-            if (data["status"] == 'SUCCESS') {
-                let params = {
-                    customerId:this.selectCustomer,
-                    ServiceType:this.thisdeleteServiceType["type"],
-                    version:data["result"]["resource-version"]
-                };
-                this.deleteServiceType(params,notificationModel);
-                console.log(data, "Interface returned success")
-            } else {
-                console.log(data, "Interface returned error")
-            }
-        })
-    }
-    deleteServiceType(params,notificationModel){
-        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-  		this.notificationSuccess(notificationModel);
-                this.getServiceTypes(params.customerId);
-                this.getCustomersColumn(params.customerId);
-                this.getAllCustomers();
-                console.log(data, "Interface returned success")
-            } else {
-		this.notificationFailed(notificationModel);	
-                console.log(data, "Interface returned error")
-            }
-        })
-    }
-
-
-}