From ff6a0a2907a83c8057610195f0860f6ef4e6aa1c Mon Sep 17 00:00:00 2001 From: cyuamber Date: Mon, 30 Sep 2019 13:06:54 +0800 Subject: feat: adjust the file structure of the customer component Change-Id: I1290380f894e8c38b90f9e6829aaac5e96d67194 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- usecaseui-portal/src/app/app.module.ts | 2 +- .../components/customer/customer.component.html | 138 ------ .../components/customer/customer.component.less | 292 ------------ .../components/customer/customer.component.spec.ts | 25 - .../components/customer/customer.component.ts | 505 --------------------- .../management/customer/customer.component.html | 138 ++++++ .../management/customer/customer.component.less | 292 ++++++++++++ .../management/customer/customer.component.spec.ts | 25 + .../management/customer/customer.component.ts | 505 +++++++++++++++++++++ 9 files changed, 961 insertions(+), 961 deletions(-) delete mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.html delete mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.less delete mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts delete mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.ts create mode 100644 usecaseui-portal/src/app/views/management/customer/customer.component.html create mode 100644 usecaseui-portal/src/app/views/management/customer/customer.component.less create mode 100644 usecaseui-portal/src/app/views/management/customer/customer.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/management/customer/customer.component.ts diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index b87aaf76..f591be4b 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -68,7 +68,7 @@ import { onboardService } from './core/services/onboard.service'; import { networkHttpservice } from './core/services/networkHttpservice.service'; import { PerformanceDetailsComponent } from './shared/components/performance-details/performance-details.component'; import { E2eDetailComponent } from './views/services/services-list/e2e-detail/e2e-detail.component'; -import { CustomerComponent } from './shared/components/customer/customer.component'; +import { CustomerComponent } from './views/management/customer/customer.component'; import { ManagemencsService } from './core/services/managemencs.service'; import { FcapsComponent } from './views/fcaps/fcaps.component'; import { TestComponent } from './test/test.component'; diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html deleted file mode 100644 index 4f532f8f..00000000 --- a/usecaseui-portal/src/app/shared/components/customer/customer.component.html +++ /dev/null @@ -1,138 +0,0 @@ - -
-
-
-

{{"i18nTextDefine_Instance_Count_of_Customer" | translate}}

- -
No Service Instances
-
-
-

{{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}}

- -
- customerName - {{this.serviceInit["customer"]}} -
-
-
-
-
-
- {{"i18nTextDefine_Customer" | translate}} - -
-
-
-
- - -
-
-
    -
  • - - {{item.name}} - -
    • -
-
-
-
-
-
-
- {{"i18nTextDefine_ServiceType" | translate}} - -
-
-
-
- - -
-
-
-
-
    -
  • - {{item.type}} - -
    • -
-
-
-
-
- - -

*  {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}}

-
-

{{"i18nTextDefine_CustomerName" | translate}} :

-
{{thisdeleteCustomer["name"]}}
-
-
-

{{"i18nTextDefine_CustomerID" | translate}} :

-
{{thisdeleteCustomer["id"]}}
-
- - -

*  {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}}

-
-

{{"i18nTextDefine_CustomerName" | translate}} :

-
{{selectCustomer.name}}
-
-
-

{{"i18nTextDefine_CustomerID" | translate}} :

-
{{selectCustomer.id}}
-
-
-

{{"i18nTextDefine_ServiceType" | translate}} :

-
{{thisdeleteServiceType["type"]}}
-
- - - -
-
- - {{notificationAttributes.status}} - -
- {{"i18nTextDefine_"+notificationAttributes.title | translate}}  - {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} -
-
-
-

{{"i18nTextDefine_"+notificationAttributes.title | translate}}:

- {{ notificationAttributes.name }} -
-
-
{{"i18nTextDefine_Close" | translate}}
-
-
- -
\ 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 deleted file mode 100644 index 93e14455..00000000 --- a/usecaseui-portal/src/app/shared/components/customer/customer.component.less +++ /dev/null @@ -1,292 +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%; - 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/shared/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts deleted file mode 100644 index f185e7a7..00000000 --- a/usecaseui-portal/src/app/shared/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; - - 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 deleted file mode 100644 index 39c42a0d..00000000 --- a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts +++ /dev/null @@ -1,505 +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, 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"]); - } - }) - } - - -} 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 @@ + +
+
+
+

{{"i18nTextDefine_Instance_Count_of_Customer" | translate}}

+ +
No Service Instances
+
+
+

{{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}}

+ +
+ customerName + {{this.serviceInit["customer"]}} +
+
+
+
+
+
+ {{"i18nTextDefine_Customer" | translate}} + +
+
+
+
+ + +
+
+
    +
  • + + {{item.name}} + +
    • +
+
+
+
+
+
+
+ {{"i18nTextDefine_ServiceType" | translate}} + +
+
+
+
+ + +
+
+
+
+
    +
  • + {{item.type}} + +
    • +
+
+
+
+
+ + +

*  {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}}

+
+

{{"i18nTextDefine_CustomerName" | translate}} :

+
{{thisdeleteCustomer["name"]}}
+
+
+

{{"i18nTextDefine_CustomerID" | translate}} :

+
{{thisdeleteCustomer["id"]}}
+
+ + +

*  {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}}

+
+

{{"i18nTextDefine_CustomerName" | translate}} :

+
{{selectCustomer.name}}
+
+
+

{{"i18nTextDefine_CustomerID" | translate}} :

+
{{selectCustomer.id}}
+
+
+

{{"i18nTextDefine_ServiceType" | translate}} :

+
{{thisdeleteServiceType["type"]}}
+
+ + + +
+
+ + {{notificationAttributes.status}} + +
+ {{"i18nTextDefine_"+notificationAttributes.title | translate}}  + {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} +
+
+
+

{{"i18nTextDefine_"+notificationAttributes.title | translate}}:

+ {{ notificationAttributes.name }} +
+
+
{{"i18nTextDefine_Close" | translate}}
+
+
+ +
\ 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; + + 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"]); + } + }) + } + + +} -- cgit 1.2.3-korg