From de9d2e95b43991fccee342ebed03b006f6fed844 Mon Sep 17 00:00:00 2001 From: zhangab Date: Tue, 23 Oct 2018 11:32:03 +0800 Subject: Build AngularJs component for usecase-ui Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab --- usecaseui-portal/src/app/home/home.component.css | 157 +++++++++++++++++++ usecaseui-portal/src/app/home/home.component.html | 63 ++++++++ usecaseui-portal/src/app/home/home.component.less | 145 ++++++++++++++++++ .../src/app/home/home.component.spec.ts | 25 ++++ usecaseui-portal/src/app/home/home.component.ts | 166 +++++++++++++++++++++ 5 files changed, 556 insertions(+) create mode 100644 usecaseui-portal/src/app/home/home.component.css create mode 100644 usecaseui-portal/src/app/home/home.component.html create mode 100644 usecaseui-portal/src/app/home/home.component.less create mode 100644 usecaseui-portal/src/app/home/home.component.spec.ts create mode 100644 usecaseui-portal/src/app/home/home.component.ts (limited to 'usecaseui-portal/src/app/home') diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css new file mode 100644 index 00000000..d2e51e40 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.css @@ -0,0 +1,157 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.content .services { + float: left; + background-color: #fff; + width: 30%; + height: 628px; + border-radius: 5px; + padding: 28px 22px; +} +.content .services h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 58px; +} +.content .services h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; +} +.content .services h3 span { + font-size: 14px; +} +.content .services p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; +} +.content .services .tip { + background-color: #eceff4; + color: #3d4d65; + font-size: 16px; + margin: 0 20px; + height: 35px; + line-height: 35px; + border-radius: 5px; +} +.content .rightcontent { + float: left; + padding-left: 15px; + width: 70%; +} +.content .rightcontent .rt-content { + height: 220px; + margin-bottom: 18px; +} +.content .rightcontent .rt-content .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; +} +.content .rightcontent .rt-content .poerformance h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 34px; +} +.content .rightcontent .rt-content .poerformance div { + height: 57px; + position: relative; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div h3 { + font: 600 25px/25px "Arial"; + color: #3d4d65; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div p { + font: 400 12px/12px "Arial"; + color: #54657e; +} +.content .rightcontent .rt-content .poerformance div img { + position: absolute; + top: 0; + right: 0; +} +.content .rightcontent .rt-content .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + margin-left: 2%; + border-radius: 5px; + position: relative; + padding: 28px 26px; +} +.content .rightcontent .rt-content .alarm h4 { + position: absolute; + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content { + height: 390px; + background-color: #fff; + border-radius: 5px; + padding: 24px 30px; + position: relative; +} +.content .rightcontent .rb-content h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content nz-dropdown { + position: absolute; + top: 24px; + right: 30px; +} +.content .rightcontent .rb-content nz-dropdown button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; +} +.content .rightcontent .rb-content nz-dropdown button span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; +} +.content .rightcontent .rb-content nz-dropdown button i { + position: absolute; + top: 12px; + right: 12px; +} +.content .rightcontent .rb-content #pfVmChartLine { + width: 100%; + height: 318px; +} diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html new file mode 100644 index 00000000..b2fa5eb4 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.html @@ -0,0 +1,63 @@ + +

{{"Overall trend" | translate}}

+
+
+
+

{{"SERVICES" | translate}}

+

{{serviceNumber}} {{"services" | translate}}

+

{{serviceNumber}} {{"services has been created" | translate}}

+ +

View the details

+
+ +
+
+
+

{{"PERFORMANCE" | translate}}

+
+

126

+

Performance VNF

+ VNF +
+
+

286

+

Performance VM/PM

+ VM/PM +
+
+
+

{{"Alarm" | translate}}

+ +
+
+ +
+

{{"VM Performance" | translate}}

+ + + + + +
+
+ +
+ diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less new file mode 100644 index 00000000..89abafa6 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.less @@ -0,0 +1,145 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.content { + .services { + float: left; + background-color: #fff; + width: 30%; + height: 628px; + border-radius: 5px; + padding: 28px 22px; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 58px; + } + h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; + span { + font-size: 14px; + } + } + p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; + } + .tip { + background-color: #eceff4; + color: #3d4d65; + font-size: 16px; + margin: 0 20px; + height: 35px; + line-height: 35px; + border-radius: 5px; + } + } + .rightcontent { + float: left; + padding-left: 15px; + width: 70%; + .rt-content { + height: 220px; + margin-bottom: 18px; + .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 34px; + } + div { + height: 57px; + position: relative; + margin-bottom: 10px; + h3 { + font: 600 25px/25px "Arial"; + color: #3d4d65; + margin-bottom: 10px; + } + p { + font: 400 12px/12px "Arial"; + color: #54657e + } + img { + position: absolute; + top: 0; + right: 0; + } + } + } + .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + margin-left: 2%; + border-radius: 5px; + position: relative; + padding: 28px 26px; + h4 { + position: absolute; + font: 600 16px/16px "Arial"; + color: #3d4d65; + } + } + } + .rb-content { + height: 390px; + background-color: #fff; + border-radius: 5px; + padding: 24px 30px; + position: relative; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + } + nz-dropdown { + position: absolute; + top: 24px; + right: 30px; + button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; + span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + } + i { + position: absolute; + top: 12px; + right: 12px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + #pfVmChartLine { + width: 100%; + height: 318px; + } + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts new file mode 100644 index 00000000..490e81bd --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts new file mode 100644 index 00000000..39fab25d --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -0,0 +1,166 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import { slideToRight } from '../animates'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.less'], + animations: [ slideToRight ] +}) +export class HomeComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.getHomeAllData(); + } + + // alarm饼图 + alarmChartData:Object; + alarmChartInit:Object = { + height: 164, + option:{ + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active','Closed'] + }, + color:["#fb6e6e","#526b75"], + series:[{ + name:"告警信息", + radius : '55%', + label:{ + normal:{ + show: false, + }, + emphasis: { + show: true, + formatter:'{b}\n{c},{d}%', + } + } + }] + } + }; + + // services饼图 + serviceNumber:number = 0; + serviceChartData:Object; + serviceChartInit:Object = { + height: 300, + option:{ + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active','Closed'] + }, + color:["#3fa8eb","#1abb9b","#a4ead7"], + series:[{ + name:"服务信息", + radius : ['45%','65%'], + avoidLabelOverlap: false, + label:{ + normal:{ + show: false, + position: 'center' + }, + emphasis: { + show: true, + formatter:'{b}\n{c}', + textStyle: { + fontSize: '20', + fontWeight: 'bold' + } + } + }, + labelLine: { + normal: { + show: false + } + }, + }] + } + }; + + // Performance线图 + performanceChartData:Object; + performanceChartInit:Object = { + height:320, + option:{ + legend: { + bottom: '0px', + data: ['CPU','Memory'] + }, + series : [ + { + name: 'CPU', + type: 'line', + data:[20,23,14,12,34,25,22,42,52,35,34,13,13] + }, + { + name: 'Memory', + type: 'line', + data:[10,23,24,22,14,15,32,12,12,32,14,23,23] + } + ] + } + }; + getPerformanceChartData(){ + let paramsObj = { + vmPerformanceName:this.vmPerformanceNameSelected + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data)=>{ + this.performanceChartData = { + series:[ + {data:data.CPU}, + {data:data.Memory} + ] + } + },(err)=>{ + console.log(err); + }) + } + + // vm筛选框 + vmPerformanceNames = ['performanceNameOne']; + vmPerformanceNameSelected = this.vmPerformanceNames[0]; + vmPerformanceNameSelect(item){ + if(this.vmPerformanceNameSelected != item){ + console.log(item); + this.vmPerformanceNameSelected = item; + this.getPerformanceChartData() + } + } + + // 获取数据 + getHomeAllData(){ + this.myhttp.getAllHomeData() + .subscribe( + (data)=>{ + console.log(data); + this.alarmChartData ={ + series:[{ + data:data.alarm.chartdata + }] + }; + this.serviceNumber = data.services.number; + this.serviceChartData ={ + series:[{ + data:data.services.chartdata + }] + }; + this.vmPerformanceNames = data.Vm_performance.names; + this.vmPerformanceNameSelected = this.vmPerformanceNames[0]; + this.getPerformanceChartData(); + }, + (err)=>{ + console.log(err); + } + ) + } + +} -- cgit 1.2.3-korg