From d0d32650fb14e4e556155475f21f00d6ab1d3ae0 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Sun, 5 May 2019 10:10:50 +0800 Subject: Added monitor and user management logic Change-Id: Iedca2ea71126529864baeec067b46050a1e0a67d Issue-ID: USECASEUI-228 Signed-off-by: guochuyicmri --- .../src/app/components/charts/bar/bar.component.ts | 4 +- .../components/customer/customer.component.html | 48 +++++-------- .../components/customer/customer.component.less | 44 +++++++----- .../app/components/customer/customer.component.ts | 84 ++++++++++++++++++---- 4 files changed, 119 insertions(+), 61 deletions(-) (limited to 'usecaseui-portal/src/app/components') diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts index ee76dfee..bc2beb63 100644 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -33,8 +33,8 @@ export class BarComponent implements OnInit { ngOnInit() { this.initOpts = { renderer: 'canvas', - height: 200, - width: 280, + height: this.initData.height, + width: this.initData.width, }; this.barOption = { diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 9bf6c5ab..6693354b 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -14,6 +14,17 @@ limitations under the License. -->
+
+
+

Instance Count of Customer

+ +
users +
+
+

Instance Count of Service Type

+ +
+
@@ -28,22 +39,8 @@
    -
  • name{{item.name}}
    • -
  • name
    • -
  • name
    • -
  • name
    • -
  • name
    • -
  • name
    • -
  • name
    • -
  • name
@@ -61,25 +58,14 @@
+
-
    -
  • Type1
    • -
  • Type2
    • -
  • Type3
    • -
+
    +
  • {{item.type}}
    • +
-
-
-

Instance Count of Customer

- -
users -
-
-

Instance Count of Service 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 f591cc4b..abfcb5c0 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -34,9 +34,10 @@ } .customer { height: 580px; - margin-right: 2.5%; + overflow: hidden; + width: 32%; + margin-right: 1.5%; border-radius: 5px; - width: 31%; 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; @@ -107,10 +108,10 @@ } .services_type { + overflow: hidden; height: 580px; - margin-right: 2.5%; border-radius: 5px; - width: 31%; + 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; @@ -129,6 +130,7 @@ img { width: 50px; float: right; + margin-right: -10px; margin-top: 5px; } } @@ -158,28 +160,38 @@ background-color: #0DA9E2; } } + .services_list { background:linear-gradient(to right, #E5F6FF, #CFEEFA); height: 530px; - li { - height: 50px; - line-height: 3.5; - width: 100%; - border-bottom: 2px #FFFFFF dashed; - i { - float: right; - clear: both; - padding-top: 17px; + .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: 3.5; + width: 100%; + border-bottom: 2px #FFFFFF dashed; + i { + float: right; + clear: both; + padding-top: 17px; + } } } - - } } } .chearts { display: inline-block; - width: 31%; + width: 32%; + margin-right: 1.5%; vertical-align: top; >div{ padding: 20px 20px; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index 3008ae02..dff15f81 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -14,6 +14,7 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import { ManagemencsService } from '../../managemencs.service'; @Component({ selector: 'app-customer', @@ -21,10 +22,39 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./customer.component.less'] }) export class CustomerComponent implements OnInit { - - constructor() { } + public chose = ''; + + 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; @@ -100,20 +130,25 @@ export class CustomerComponent implements OnInit { }] } }; - // getHomeAlarmData() { - // this.myhttp.getHomeAlarmData() - // .subscribe((data) => { - // this.alarmChartData = { - // series: [{ - // data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] - // }] - // }; - // }) - // } + // 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, @@ -274,4 +309,29 @@ export class CustomerComponent implements OnInit { ] } } + 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