diff options
Diffstat (limited to 'usecaseui-portal/src/app/components/customer')
4 files changed, 565 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html new file mode 100644 index 00000000..d2449096 --- /dev/null +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -0,0 +1,70 @@ +<div class="content"> + <div class="customer"> + <div class="customer_title"> + <div class="customers"> + <span>Customer</span> + <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd"> + </div> + </div> + <div class="customer_detail"> + <div class="customer_add" *ngIf="customeradd"> + <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default"> + <button nz-button nzType="primary" class="customer_addbut">Add</button> + </div> + <div class="customer_list"> + <ul> + <li class="active"><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> + <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" + nzType="info"></i></li> + </ul> + </div> + </div> + </div> + <div class="services_type"> + <div class="services_type_title"> + <div class="servicess"> + <span>Services Type</span> + <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd "> + </div> + </div> + <div class="services_type_detail"> + <div class="services_add" *ngIf="servicesadd"> + <input nz-input placeholder="Input services type" class="services_name" nzSize="default"> + <button nz-button nzType="primary" class="services_addbut">Add</button> + </div> + <div class="services_list"> + <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> + </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 new file mode 100644 index 00000000..b7b4bc24 --- /dev/null +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -0,0 +1,208 @@ +.content { + width: 100%; + height: 100vh; + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + li.active{ + &:hover{ + cursor: pointer; + color: #3C4F8C; + // background:linear-gradient(to right, #E5F6FF, #CFEEFA) + background-color: #e6f7ff; + } + } + .customer { + height: 580px; + margin-right: 2.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; + vertical-align: top; + .customer_title { + line-height: 3.5; + height: 50px; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .customers { + padding: 0 20px; + span { + color: #3F9CFF; + font-family:"ArialMT"; + } + img { + width: 30px; + float: right; + margin-top: 7px; + } + } + } + .customer_detail { + height: 535px; + width: 100%; + 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); + } + li { + padding: 0 20px; + height: 50px; + line-height: 3.5; + width: 100%; + img { + width: 10%; + } + span { + width: 80%; + padding-left: 10%; + display: inline-block; + color: rgba(60,79,140,0.5); + } + } + } + } + + } + .services_type { + height: 580px; + margin-right: 2.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; + vertical-align: top; + .services_type_title { + line-height: 3.5; + height: 50px; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .servicess { + padding: 0 20px; + span { + color: #3F9CFF; + font-family:"ArialMT"; + } + img { + width: 50px; + float: right; + margin-top: 5px; + } + } + } + .services_type_detail { + height: 535px; + width: 100%; + 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: 530px; + 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%; + vertical-align: top; + >div{ + padding: 20px 20px; + } + .Cu { + height: 280px; + width: 100%; + margin-bottom: 20px; + 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 :#3F9CFF; + font-family:"ArialMT"; + } + .legend { + height: 10px; + width: 20px; + display: inline-block; + background: linear-gradient(to right,#7DCEFB, #0DA9E2); + border-radius: 1px; + margin: 15px 4px 0 43%; + } + } + .type { + height: 280px; + width: 100%; + margin-bottom: 20px; + 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 :#3F9CFF; + font-family:"ArialMT"; + + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts new file mode 100644 index 00000000..f185e7a7 --- /dev/null +++ b/usecaseui-portal/src/app/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/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts new file mode 100644 index 00000000..bd27d36c --- /dev/null +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -0,0 +1,262 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-customer', + templateUrl: './customer.component.html', + styleUrls: ['./customer.component.less'] +}) +export class CustomerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + 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, + + }, { + 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: 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)' + } + } + }] + } + }; + // getHomeAlarmData() { + // this.myhttp.getHomeAlarmData() + // .subscribe((data) => { + // this.alarmChartData = { + // series: [{ + // data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] + // }] + // }; + // }) + // } + + // service bar + serviceData: Object; + serviceInit: Object = { + 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', + 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', + stack: '', + data: 1700 + }, + { + name: 'Type2', + type: 'bar', + stack: '', + data: 1500 + }, + { + name: 'Type3', + type: 'bar', + stack: '', + data: 1300 + }, + { + name: 'Other', + type: 'bar', + stack: '', + data: 1000, + + } + ] + } + } +} |