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';
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},
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';
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 : [
MyhttpService,
HomesService,
onboardService,
- networkHttpservice
+ networkHttpservice,
+ ManagemencsService
],
declarations: [
AppComponent,
HomeComponent,
-
+ ManagementComponent,
ServicesComponent,
ServicesListComponent,
OnboardVnfVmComponent,
CcvpnDetailComponent,
CcvpnCreationComponent,
E2eDetailComponent,
+ CustomerComponent ,
PerformanceDetailsComponent,
],
imports: [
var _this = this.tpoption,
width = null,
height = _this.height;
- console.log("查询svg高度");
console.log(height);
if (_this.width > 800) {
width = _this.width;
--- /dev/null
+<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
--- /dev/null
+.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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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,
+
+ }
+ ]
+ }
+ }
+}
--- /dev/null
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ManagemencsService {
+
+ constructor() { }
+
+}
--- /dev/null
+<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>
--- /dev/null
+.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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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;
+ }
+
+}
Code Review / usecase-ui.git / commitdiff