diff options
Diffstat (limited to 'usecaseui-portal/src/app')
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 55 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.less | 52 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.ts | 80 |
3 files changed, 132 insertions, 55 deletions
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html index 72fe7f3d..6c79ce7b 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -17,41 +17,46 @@ <!--<h3 class="title"> {{"Overall trend" | translate}}</h3> <hr> --> <div class="content" style="padding: 20px 20px;"> - <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> - <div> - <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5> + <div style="float: left;width:30%;height:96vh"> + <div class="services"> + <h4>{{"i18nTextDefine_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> + <div> + <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} <span>{{"i18nTextDefine_service_intance" | translate}}</span></h5> + </div> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> - <div class="details"> - <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li> + <div class="PACKAGE" style="height: 37%;margin-top: 3%"> + <h4 style="margin-bottom: 50px">{{"i18nTextDefine_PACKAGE" | translate}}</h4> + <div class="details"> + <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li> + </div> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> - <p class="tip">View Details</p> </div> - <div class="rightcontent"> - <div class="rt-content"> + <div class="rightcontent" style="height: 96vh"> + <div class="rt-content" > <div class="alarm"> - <h4>{{"ALARM" | translate}}</h4> + <h4>{{"i18nTextDefine_ALARM" | translate}}</h4> <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VNF_Alarm" | translate}} </p> </div> <div class="poerformance"> - <h4>{{"DEVICES" | translate}}</h4> - <div class="pfVnf"> - <h3 class="pfVnfNum">{{performanceVnfNum}}</h3> - <p>Performance VNF</p> - <img src="./assets/images/VNF.png" alt="VNF"> - </div> - <div class="pfVmPm"> - <h3 class="pfVmPmNum">{{performanceVmNum}}</h3> - <p>Performance VM/PM</p> - <img src="./assets/images/VM.png" alt="VM/PM"> - </div> + <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> </div> <div class="rb-content"> - <h4>{{"VM PERFORMANCE" | translate}}</h4> + <h4>{{"i18nTextDefine_VM_Performance" | translate}}</h4> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> <ul nz-menu> diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less index 9684fec7..6d57fbf2 100644 --- a/usecaseui-portal/src/app/home/home.component.less +++ b/usecaseui-portal/src/app/home/home.component.less @@ -25,16 +25,16 @@ // margin-bottom: 20px; // } .content { - .services { - float: left; + .services,.PACKAGE{ background-color: #fff; - width: 30%; - height: 628px; + width: 100%; + height: 60%; border-radius: 5px; padding: 28px 22px; + clear: both; h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; margin-bottom: 20px; } h3 { @@ -46,15 +46,16 @@ } } h5 { - font: 500 16px/16px "ArialMT"; - color:#3F9CFF; + font: 500 18px/18px "ArialMT"; + color:#0DA9E2; margin: -2em 0 1em 0 ; span { - font-size: 12px; + font-size: 14px; font-family: "Arial"; - color:rgba(60,79,140,1); + color:#3C4F8C; } span:first-child { + font-size: 18px; padding: 0 4PX 0 4px; } span:last-child { @@ -105,7 +106,8 @@ color: #3C4F8C; font-size: 16px; float: right; - margin-top: 53px; + margin-top: 20px; + margin-bottom: 0!important; line-height: 35px; border-radius: 5px; } @@ -115,11 +117,10 @@ padding-left: 15px; width: 70%; .rt-content { - height: 220px; + height: 40%; margin-bottom: 18px; .poerformance { - float: left; - margin-left: 2%; + float: left; background-color: #fff; height: 100%; width: 50%; @@ -132,7 +133,7 @@ } h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; margin-bottom: 34px; } @@ -164,26 +165,41 @@ background-color: #fff; height: 100%; width: 48%; - border-radius: 5px; position: relative; padding: 28px 26px; h4 { position: absolute; font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; } } + .alarm-name{ + text-align: center; + margin-top: 15px; + } + .tip{ + width: 110px; + background-color: #eceff4; + color: #3C4F8C; + font-size: 16px; + float: right; + margin-top: 20px; + margin-bottom: 0!important; + line-height: 35px; + border-radius: 5px; + text-align: center; + } } .rb-content { - height: 390px; + height: 58%; background-color: #fff; border-radius: 5px; padding: 24px 30px; position: relative; h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; } nz-dropdown { position: absolute; diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index 65bbc606..d0e6ef0b 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -16,6 +16,7 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; import { HomesService } from '../homes.service'; import { slideToRight } from '../animates'; +import {TranslateService} from "@ngx-translate/core"; @Component({ selector: 'app-home', @@ -32,7 +33,7 @@ export class HomeComponent implements OnInit { this.getListSortMasters(); this.getSourceNames(); this.getHomeServiceData(); - this.getHomePerformanceData(); + // this.getHomePerformanceData(); this.getHomeAlarmData(); this.getHomeAlarmChartData(); this.getHomeServiceBarData(); @@ -109,15 +110,64 @@ export class HomeComponent implements OnInit { ) } - // performance - performanceVnfNum = 0; - performanceVmNum = 0; - getHomePerformanceData(){ - this.myhttp.getHomePerformanceData() - .subscribe((data)=>{ - this.performanceVnfNum = data.length; - }) - } + // performance + // performanceVnfNum = 0; + // performanceVmNum = 0; + // getHomePerformanceData() { + // this.myhttp.getHomePerformanceData() + // .subscribe((data) => { + // this.performanceVnfNum = data.length; + // }) + // } + + // VM alarm + VMAlarmChartData: Object; + VMAlarmChartInit: Object = { + height: 180, + option: { + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' + }, { + offset: 1, color: '#FB7788' + }], + globalCoord: false // + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' + }, { + offset: 1, color: '#7A8BAE' + }], + globalCoord: false // 缺省为 false + }], + series: [{ + name: "告警信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } + }; // alarm bar alarmChartData:Object; @@ -186,8 +236,13 @@ export class HomeComponent implements OnInit { data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] }] }; - }) - } + this.VMAlarmChartData = { + series: [{ + data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}] + }] + }; + }) + } // alarm lin alarmLineChartData:Object; @@ -329,6 +384,7 @@ export class HomeComponent implements OnInit { { data: [Val1 - Val2] }, ] } + console.log(this.servicesBarChartData) }, (err) => { console.log(err); }) |