diff options
Diffstat (limited to 'usecaseui-portal')
12 files changed, 720 insertions, 6 deletions
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 7fe7361c..2d2277c3 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; +import { ManagementComponent } from './management/management.component'; import { ServicesComponent } from './services/services.component'; import { ServicesListComponent } from './services/services-list/services-list.component'; import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; @@ -23,6 +24,7 @@ const ServicesChildRoutes: Routes = [ const routes: Routes = [ { path: 'home', component: HomeComponent}, + { path: 'management', component: ManagementComponent}, // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //暂时不是子路由结构 { path: 'services/services-list', component: ServicesListComponent}, { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent}, diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 76fe5d4a..77a102f9 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -16,14 +16,15 @@ export function HttpLoaderFactory(httpClient: HttpClient) { import { AppRoutingModule } from './app-routing.module'; -//注册语言包 +//Registered language pack import { registerLocaleData } from '@angular/common'; import en from '@angular/common/locales/en'; registerLocaleData(en); -//自定义组件 +//Custom component import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; +import { ManagementComponent } from './management/management.component'; import { ServicesComponent } from './services/services.component'; import { ServicesListComponent } from './services/services-list/services-list.component'; import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; @@ -44,13 +45,15 @@ import { LineComponent } from './components/charts/line/line.component'; import { PieComponent } from './components/charts/pie/pie.component'; import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common'; -// 自定义服务 +// Custom service import { MyhttpService } from './myhttp.service'; import { HomesService } from './homes.service'; import { onboardService } from './onboard.service'; import { networkHttpservice } from './networkHttpservice.service'; import { PerformanceDetailsComponent } from './components/performance-details/performance-details.component'; import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component'; +import { CustomerComponent } from './components/customer/customer.component'; +import { ManagemencsService } from './managemencs.service'; @NgModule({ providers : [ @@ -59,12 +62,13 @@ import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component MyhttpService, HomesService, onboardService, - networkHttpservice + networkHttpservice, + ManagemencsService ], declarations: [ AppComponent, HomeComponent, - + ManagementComponent, ServicesComponent, ServicesListComponent, OnboardVnfVmComponent, @@ -85,6 +89,7 @@ import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component CcvpnDetailComponent, CcvpnCreationComponent, E2eDetailComponent, + CustomerComponent , PerformanceDetailsComponent, ], imports: [ diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts index 03894ba9..3bf4aa70 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -253,7 +253,6 @@ export class CcvpnNetworkComponent implements OnInit { var _this = this.tpoption, width = null, height = _this.height; - console.log("查询svg高度"); console.log(height); if (_this.width > 800) { width = _this.width; 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, + + } + ] + } + } +} diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts new file mode 100644 index 00000000..2bf06233 --- /dev/null +++ b/usecaseui-portal/src/app/managemencs.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class ManagemencsService { + + constructor() { } + +} diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html new file mode 100644 index 00000000..a695b003 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.html @@ -0,0 +1,19 @@ +<div class="content" style="padding: 20px 20px;"> + <div class="management" [@showHideAnimate]="show" > + <div class="title"> + <p>Create initial customer</p> + <span>Customer has not been created in ONAP </span> + <span>please create customer and its service type</span> + <img src="../../assets/images/customer01.png" alt=""> + <input nz-input placeholder="input customer name" nzSize="large"> + <button nz-button nzType="primary" class="cancel">Cancel</button> + <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button> + </div> + <div class="image"> + <img src="../../assets/images/customer02.png" alt=""> + </div> + </div> + <div [@showHideAnimate]="hide"> + <app-customer></app-customer> + </div> +</div> diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less new file mode 100644 index 00000000..cc50e3c2 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.less @@ -0,0 +1,57 @@ +.content { + .management { + width: 100%; + .title { + width: 50%; + vertical-align:top; + display: inline-block; + font-family: "Arial"; + p { + font-size: 33px; + color: #3C4F8C; + margin-bottom: 0.5em; + } + span { + font-size: 18px; + color: rgba(60,79,140,0.5); + display: block; + } + img { + padding-top: 8%; + width: 55%; + margin-left: 18%; + margin-bottom: 5%; + } + input { + width: 50%; + margin-left: 20%; + margin-bottom: 5%; + display: block; + } + .cancel{ + background-color: #eee; + border-color: #eee; + color: #9DA7C5; + width: 80px; + margin-left: 25%; + margin-right: 2%; + } + .add { + color: #fff; + width: 80px; + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + border-color: #1890ff; + } + } + .image { + width: 49%; + vertical-align:top; + display: inline-block; + img { + width: 85%; + margin-top: 41%; + } + } + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/management/management.component.spec.ts new file mode 100644 index 00000000..f6152432 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture<ManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts new file mode 100644 index 00000000..7345e7a3 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit , HostBinding} from '@angular/core'; +import { showHideAnimate, slideToRight } from '../animates'; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class ManagementComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + + constructor() { } + + ngOnInit() { + } + + show = "show"; + hide = "hide"; + custerhide = false; + customershow(){ + this.show = "show"; + this.hide = "hide"; + this.custerhide = true; + } + customerhide(){ + this.show = "hide"; + this.hide = "show"; + this.custerhide = false; + } + +} |