diff options
Diffstat (limited to 'usecaseui-portal/src/app/components')
4 files changed, 119 insertions, 61 deletions
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. --> <div class="content"> + <div class="chearts"> + <div class="Cu"> + <p>Instance Count of Customer</p> + <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> + <div class="legend"></div><span>users</span> + </div> + <div class="type"> + <p>Instance Count of Service Type</p> + <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> + </div> + </div> <div class="customer"> <div class="customer_title"> <div class="customers"> @@ -28,22 +39,8 @@ </div> <div class="customer_list"> <ul> - <li class="active"><img src="./assets/images/customer05.png" alt=""><span>name</span><i + <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"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> </ul> </div> </div> @@ -61,25 +58,14 @@ <button nz-button nzType="primary" class="services_addbut">Add</button> </div> <div class="services_list"> + <div class="border_size"></div> <div style="padding:0 20px;"> - <ul> - <li><span>Type1</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type2</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type3</span><i class="anticon anticon-delete" nzType="info"></i></li> - </ul> + <ul> + <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li> + </ul> </div> </div> </div> </div> - <div class="chearts"> - <div class="Cu"> - <p>Instance Count of Customer</p> - <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> - <div class="legend"></div><span>users</span> - </div> - <div class="type"> - <p>Instance Count of Service Type</p> - <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> - </div> - </div> + </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less 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) + }) + } + + + + } |