diff options
Diffstat (limited to 'usecaseui-portal/src/app/home/home.component.html')
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 55 |
1 files changed, 30 insertions, 25 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> |