summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/shared/components/customer
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/shared/components/customer
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/customer')
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.html144
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.less254
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.ts552
4 files changed, 975 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
new file mode 100644
index 00000000..08a23935
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -0,0 +1,144 @@
+<!--
+ 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/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
new file mode 100644
index 00000000..7d329230
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
@@ -0,0 +1,254 @@
+/*
+ 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/shared/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts
new file mode 100644
index 00000000..f185e7a7
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/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/shared/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
new file mode 100644
index 00000000..a0cf8338
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
@@ -0,0 +1,552 @@
+/*
+ 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 '../../../core/services/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")
+ }
+ })
+ }
+
+
+}