From bf240f4fad6e8bf032bd1f190b238682a9fb721a Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Mon, 6 May 2019 17:39:20 +0800 Subject: User and service type management interface Change-Id: Ie4f66f28ea964cd8a773e7c1c52e5d589762b371 Issue-ID: USECASEUI-212 Signed-off-by: guochuyicmri --- .../components/customer/customer.component.html | 51 +- .../components/customer/customer.component.less | 44 +- .../app/components/customer/customer.component.ts | 709 ++++++++++++--------- 3 files changed, 491 insertions(+), 313 deletions(-) (limited to 'usecaseui-portal/src/app/components/customer') diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 6693354b..db5b67ef 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -29,18 +29,21 @@
Customer - +
- - + +
    -
  • {{item.name}}
    • +
  • + + {{item.name}} + +
@@ -49,23 +52,55 @@
Services Type - +
- +
    -
  • {{item.type}}
    • +
  • + {{item.type}} + +
+ + +

* Are you sure delete this Customer ?

+
+

Customer Name:

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

Customer ID:

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

* Are you sure delete this Service Type ?

+
+

Customer Name:

+
{{selectCustomer.name}}
+
+
+

Customer ID:

+
{{selectCustomer.id}}
+
+
+

Service Type:

+
{{thisdeleteServiceType["type"]}}
+
+ \ 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 index abfcb5c0..89f49cc0 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -15,7 +15,7 @@ */ .content { width: 100%; - height: 100vh; + height: 100%; i.anticon { cursor: pointer; font-size: 18px; @@ -33,7 +33,7 @@ } } .customer { - height: 580px; + height: 100%; overflow: hidden; width: 32%; margin-right: 1.5%; @@ -44,7 +44,7 @@ vertical-align: top; .customer_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .customers { @@ -61,7 +61,7 @@ } } .customer_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .customer_add { @@ -93,6 +93,7 @@ height: 50px; line-height: 3.5; width: 100%; + cursor: pointer; img { width: 10%; } @@ -109,7 +110,7 @@ } .services_type { overflow: hidden; - height: 580px; + height: 100%; border-radius: 5px; width: 32%; background-color: #fff; @@ -118,7 +119,7 @@ vertical-align: top; .services_type_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .servicess { @@ -136,7 +137,7 @@ } } .services_type_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .services_add { @@ -163,7 +164,7 @@ .services_list { background:linear-gradient(to right, #E5F6FF, #CFEEFA); - height: 530px; + height: 100%; .border_size{ position: absolute; margin-left: -8px; @@ -175,13 +176,20 @@ } li { height: 50px; - line-height: 3.5; + line-height: 50px; width: 100%; + vertical-align: middle; border-bottom: 2px #FFFFFF dashed; + position: relative; i { - float: right; - clear: both; - padding-top: 17px; + display: inline-block; + vertical-align: middle; + position: absolute; + width: 48px; + height: 48px; + top: 0; + right: -16px; + line-height: 46px; } } } @@ -193,13 +201,14 @@ width: 32%; margin-right: 1.5%; vertical-align: top; + height: 100%; >div{ padding: 20px 20px; } .Cu { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; + margin-bottom: 7%; margin-right: 2.5%; border-radius: 5px; background-color: #fff; @@ -210,17 +219,16 @@ } .legend { height: 10px; - width: 20px; + width: 10px; display: inline-block; background: linear-gradient(to right,#7DCEFB, #0DA9E2); - border-radius: 1px; + border-radius: 50%; margin: 15px 4px 0 43%; } } .type { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; margin-right: 2.5%; border-radius: 5px; background-color: #fff; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index dff15f81..f3d1af3e 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -26,312 +26,447 @@ export class CustomerComponent implements OnInit { constructor(private managemencs: ManagemencsService) { } - ngOnInit() { - this.getAllCustomers(); - this.getCustomersPie(); - } - AllCustomersdata = []; - AllServiceTypes = []; - customerber = []; - // Get all customers - active; - getAllCustomers() { - this.managemencs.getAllCustomers().subscribe((data) => { - this.AllCustomersdata = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}}); - this.active = this.AllCustomersdata[0].id - this.getServiceTypes(this.active); - this.getCustomersColumn(this.active); - }) - - } - // Get all servicetype - getServiceTypes(item){ - this.managemencs.getServiceTypes(item).subscribe((data) => { - this.AllServiceTypes = data.map((item) => {return {type:item["service-type"],id:item["global-customer-id"]}}); - }) - } - // Switch user data - choseCustomer(index,item){ - this.chose = index; - this.getServiceTypes(item); - this.getCustomersColumn(item); - } - customeradd = false; - servicesadd = false; - //Customer pie - CUChartData: Object; - CUChartInit: Object = { - height: 180, - option: { - color: ["#F2F6FD"], - series: [{ - type: 'pie', - name: "customer", - radius: '90%', - center: ['50%', '53%'], - data: [{ - value: 67, + ngOnInit() { + this.getAllCustomers(); + } - }, { - value: 10, + AllCustomersdata = []; + AllServiceTypes = []; + customerber = []; + // Get all customers + active; + selectCustomer = { + name:null, + id:null + }; + addNewCustomer = null; + addNewServiceType = null; + deleteCustomerModelVisible = false; + deleteServiceTypeModelVisible = false; - }, { - value: 17, + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + this.AllCustomersdata = data.map((item) => { + return {name: item["subscriber-name"], id: item["global-customer-id"]} + }); + this.active = this.selectCustomer = this.AllCustomersdata[0]; + this.serviceInit["customer"] = this.AllCustomersdata[0].name; + this.getCustomersPie(); + this.getServiceTypes(this.active); + this.getCustomersColumn(this.active); + }) - }, { - value: 33, - },], - label: { - normal: { - position: 'center', - show: false, - formatter: ' {b|{b}：{d}%} ', - backgroundColor: 'rgba(51,51,51,0.9)', - borderColor: 'rgba(51,51,51,0.9)', - borderWidth: 1, - borderRadius: 4, - rich: { - b: { - fontSize: 16, - color: '#fff', - lineHeight: 33 - } - } - }, - emphasis: { - show: true, + } - } - }, - itemStyle: { - normal: { - borderWidth: 2, - borderColor: '#ffffff', - }, - emphasis: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#7DCEFB' // 0% 处的颜色 - }, { - offset: 1, color: '#0DA9E2' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 10, 5, 0)' - } - } - }] + // Get all servicetype + getServiceTypes(item) { + this.managemencs.getServiceTypes(item).subscribe((data) => { + this.AllServiceTypes = data.map((item) => { + return {type: item["service-type"], id: item["global-customer-id"]} + }); + }) } - }; - // get customers chart pie - getCustomersPie(){ - this.managemencs.getCustomersPie().subscribe((data)=>{ - this.CUChartData = { - series: [{ - data: data - }] - } - console.log(this.CUChartData) - }, (err) => { - console.log(err); - }); - } - // service bar - serviceData: Object; - serviceInit: Object = { - height: 200, - width:280, - option: { - tooltip: { - show: true, - trigger: 'item', - formatter: "{c}" - }, - grid: { - top: '5%', - left: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" - } - }, - axisLabel: { - color: "#3C4F8C" - } + // Switch user data + choseCustomer(index, item) { + this.chose = index; + this.selectCustomer = item; + this.serviceInit["customer"] = this.selectCustomer.name; + this.getServiceTypes(item); + this.getCustomersColumn(item); + } + + customeradd = false; + servicesadd = false; + //Customer pie + CUChartData: Object; + CUChartInit: Object = { + height: 200, + option: { + color: ["#F2F6FD"], + series: [{ + type: 'pie', + name: "customer", + radius: '90%', + center: ['50%', '50%'], + data: [{ + value: 67, + }, { + value: 10, + }, { + value: 17, + }, { + value: 33, + },], + label: { + normal: { + position: 'center', + show: false, + formatter: ' {b|{b}：{d}%} ', + backgroundColor: 'rgba(51,51,51,0.9)', + borderColor: 'rgba(51,51,51,0.9)', + borderWidth: 1, + borderRadius: 4, + rich: { + b: { + fontSize: 16, + color: '#fff', + lineHeight: 33 + } + } + }, + emphasis: { + show: true, + + } + }, + itemStyle: { + normal: { + borderWidth: 3, + borderColor: '#ffffff', + }, + emphasis: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7DCEFB' + }, { + offset: 1, color: '#0DA9E2' + }], + global: false + }, + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 10, 5, 0)' + } + } + }] } + }; - ], - yAxis: [ - { - type: 'category', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" + // get customers chart pie + getCustomersPie() { + this.managemencs.getCustomersPie().subscribe((data) => { + this.CUChartData = { + series: [{ + data: data + }] } - }, - axisLabel: { - color: "#3C4F8C" - }, - data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], - }, + console.log(this.CUChartData) + }, (err) => { + console.log(err); + }); + } - ], - series: [ - { - name: '', - barWidth: '40%', - type: 'bar', - data: [2800, 1700, 1200, 1000, 900], - itemStyle: { - normal: { - color: function (params) { - // build a color map as your need. - var colorList = [ - { + // service bar + serviceData: Object; + serviceInit: Object = { + customer: '', + height: 230, + width: 410, + option: { + tooltip: { + show: true, + trigger: 'item', + formatter: "{c}" + }, + grid: { + top: '5%', + left: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'value', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + } + } + + ], + yAxis: [ + { + type: 'category', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + }, + data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], + }, + + ], + series: [ + { + name: '', + barWidth: '40%', type: 'bar', - colorStops: [{ - offset: 0, - color: '#FCCE2B' - }, { - offset: 1, - color: '#FEE956' - }], - globalCoord: false, - }, - { + data: [2800, 1700, 1200, 1000, 900], + itemStyle: { + normal: { + color: function (params) { + // build a color map as your need. + var colorList = [ + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FCCE2B' + }, { + offset: 1, + color: '#FEE956' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#F43A59' + }, { + offset: 1, + color: '#FA6C92' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#4F5B60' + }, { + offset: 1, + color: '#879499' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#31DAC3' + }, { + offset: 1, + color: '#5FEFE3' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#999999' + }, { + offset: 1, + color: '#C9C9C9' + }], + globalCoord: false, + } + ]; + return colorList[params.dataIndex] + }, + } + } + }, + { + name: 'Type4', + type: 'bar', + stack: '', + data: 2800, + + }, + { + name: 'Type1', type: 'bar', - colorStops: [{ - offset: 0, - color: '#F43A59' - }, { - offset: 1, - color: '#FA6C92' - }], - globalCoord: false, - }, - { + stack: '', + data: 1700 + }, + { + name: 'Type2', type: 'bar', - colorStops: [{ - offset: 0, - color: '#4F5B60' - }, { - offset: 1, - color: '#879499' - }], - globalCoord: false, - }, - { + stack: '', + data: 1500 + }, + { + name: 'Type3', type: 'bar', - colorStops: [{ - offset: 0, - color: '#31DAC3' - }, { - offset: 1, - color: '#5FEFE3' - }], - globalCoord: false, - }, - { + stack: '', + data: 1300 + }, + { + name: 'Other', type: 'bar', - colorStops: [{ - offset: 0, - color: '#999999' - }, { - offset: 1, - color: '#C9C9C9' - }], - globalCoord: false, - } - ]; - return colorList[params.dataIndex] - }, + stack: '', + data: 1000, + + } + ] + } + }; + name_s = []; + value_s = []; + + getCustomersColumn(item) { + this.name_s = []; + this.value_s = []; + this.managemencs.getCustomersColumn(item).subscribe((data) => { + data.forEach((item) => { + this.name_s.push(item.name); + this.value_s.push(item.value); + }) + this.serviceData = { + yAxis: [{ + data: this.name_s + }], + series: [{ + data: this.value_s + }] } - } - }, - { - name: 'Type4', - type: 'bar', - stack: '', - data: 2800, + console.log(this.serviceData) + }) + } - }, - { - name: 'Type1', - type: 'bar', - stack: '', - data: 1700 - }, - { - name: 'Type2', - type: 'bar', - stack: '', - data: 1500 - }, - { - name: 'Type3', - type: 'bar', - stack: '', - data: 1300 - }, - { - name: 'Other', - type: 'bar', - stack: '', - data: 1000, + createNewCustomer() { + let createParams = { + customerId: this.addNewCustomer + }; + this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } - } - ] + // Customer delete model + thisdeleteCustomer={ + name:null, + id:null + }; + deleteCustomerModel(itemCustomer) { + this.thisdeleteCustomer = itemCustomer; + this.deleteCustomerModelVisible = true; + } + deleteCustomerCancel() { + this.deleteCustomerModelVisible = false; + } + deleteCustomerOk() { + this.deleteCustomerModelVisible = false; + this.getCustomerVersion(this.thisdeleteCustomer); + } + getCustomerVersion(thisdeleteCustomer){ + this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:thisdeleteCustomer.id, + version:data["result"]["resource-version"] + }; + this.deleteCustomer(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteCustomer(params){ + this.managemencs.deleteSelectCustomer(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + createNewServiceType() { + let createParams = { + customer: this.selectCustomer, + ServiceType:this.addNewServiceType + }; + this.managemencs.createServiceType(createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersColumn(this.selectCustomer); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + // ServiceType delete model + thisdeleteServiceType={ + type:null + }; + deleteServiceTypeModel(itemServiceType) { + this.thisdeleteServiceType = itemServiceType; + this.deleteServiceTypeModelVisible = true; + } + deleteServiceTypeCancel() { + this.deleteServiceTypeModelVisible = false; + } + deleteServiceTypeOk() { + this.deleteServiceTypeModelVisible = false; + this.getServiceTypeVersion(); + } + getServiceTypeVersion(){ + let params={ + customerId:this.selectCustomer.id, + ServiceType:this.thisdeleteServiceType["type"] + }; + this.managemencs.getdeleteServiceTypeVersion(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:this.selectCustomer, + ServiceType:this.thisdeleteServiceType["type"], + version:data["result"]["resource-version"] + }; + this.deleteServiceType(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteServiceType(params){ + this.managemencs.deleteSelectServiceType(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersPie(); + this.getServiceTypes(params.customerId); + this.getCustomersColumn(params.customerId); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) } - } - name_s = []; - value_s = []; - getCustomersColumn(item){ - this.name_s = []; - this.value_s = []; - this.managemencs.getCustomersColumn(item).subscribe((data)=>{ - data.forEach((item)=>{ - this.name_s.push(item.name); - this.value_s.push(item.value); - }) - this.serviceData = { - yAxis:[{ - data:this.name_s - }], - series :[{ - data:this.value_s - }] - } - console.log(this.serviceData) - }) - } - - } -- cgit 1.2.3-korg