diff options
Diffstat (limited to 'usecaseui-portal/src/app/home')
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.css | 157 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 63 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.less | 145 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.spec.ts | 25 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.ts | 166 |
5 files changed, 556 insertions, 0 deletions
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 @@ +<!-- + 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. +--> +<h3 class="title"> {{"Overall trend" | translate}}</h3> +<hr> +<div class="content"> + <div class="services"> + <h4>{{"SERVICES" | translate}}</h4> + <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> + <p>{{serviceNumber}} {{"services has been created" | translate}}</p> + <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie> + <p class="tip">View the details</p> + </div> + + <div class="rightcontent"> + <div class="rt-content"> + <div class="poerformance"> + <h4>{{"PERFORMANCE" | translate}}</h4> + <div class="pfVnf"> + <h3 class="pfVnfNum">126</h3> + <p>Performance VNF</p> + <img src="../../assets/images/VNF.png" alt="VNF"> + </div> + <div class="pfVmPm"> + <h3 class="pfVmPmNum">286</h3> + <p>Performance VM/PM</p> + <img src="../../assets/images/VM.png" alt="VM/PM"> + </div> + </div> + <div class="alarm"> + <h4>{{"Alarm" | translate}}</h4> + <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie> + </div> + </div> + + <div class="rb-content"> + <h4>{{"VM Performance" | translate}}</h4> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> + <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line> + </div> + </div> + +</div> + 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<HomeComponent>; + + 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); + } + ) + } + +} |