diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/home')
5 files changed, 1098 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/home/home.component.css b/usecaseui-portal/src/app/views/home/home.component.css new file mode 100644 index 00000000..41b3f5fe --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.css @@ -0,0 +1,158 @@ +/* + Copyright (C) 2019 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; + margin-left: 2%; + 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/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html new file mode 100644 index 00000000..4126f241 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.html @@ -0,0 +1,102 @@ +<!-- + Copyright (C) 2019 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="left-content"> + <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" *ngIf="serviceChart"></app-pie> + <div *ngIf="!serviceChart" + style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div> + + <div> + <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} + <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} + <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5> + </div> + <p class="tip"> + <span style="color:#3C4F8C" (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span> + </p> + </div> + <div class="PACKAGE"> + <h4>{{"i18nTextDefine_PACKAGE" | translate}}</h4> + <div class="details"> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span></span> NS</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar> + </div> + <div>{{NSdata}}</div> + </div> + </li> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span style="background-color:#BCECB8;"></span> VNF</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar> + </div> + <div>{{Vnfdata}}</div> + </div> + </li> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span style="background-color:#ACCAF4;"></span> PNF</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar> + </div> + <div>{{PnfData}}</div> + </div> + </li> + </div> + <p class="tip"> + <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span> + </p> + </div> + </div> + <div class="rightcontent" style="height: 96vh"> + <div class="rt-content"> + <div class="alarm"> + <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"> + <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>{{"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> + <li nz-menu-item (click)="sourceNameSelect(item)" *ngFor="let item of sourceNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line> + </div> + </div> +</div> diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less new file mode 100644 index 00000000..9e768cf7 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -0,0 +1,265 @@ +/* + Copyright (C) 2019 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 { + padding: 20px 20px; + overflow: hidden; + .left-content{ + float: left; + width:30%; + // height:96vh; + .services,.PACKAGE{ + width: 100%; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + padding: 28px 22px; + h4{ + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + .tip { + float: right; + width: 110px; + line-height: 35px; + border-radius: 5px; + background-color: #eceff4; + font-size: 16px; + color: #3C4F8C; + margin-top: 20px; + margin-bottom: 0!important; + } + } + .services{ + height:466px; + h4{ + margin-bottom: 20px; + } + h5 { + font: 500 18px/18px "ArialMT"; + color:#0DA9E2; + margin: -2em 0 1em 0 ; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + span { + font-size: 14px; + font-family: "Arial"; + color:#3C4F8C; + } + span:first-child { + font-size: 18px; + padding: 0 4PX 0 4px; + } + span:last-child { + padding-left: 4px; + } + + } + } + .PACKAGE{ + height:422px; + margin-top: 20px; + h4{ + margin-bottom: 50px; + } + .details { + .detailstoplinContent{ + border-bottom:0.5px solid rgba(237,237,237,1); + border-radius:4px; + line-height: 45px; + font-size: 14px; + color: #3C4F8C; + font-family:"ArialMT"; + .detailstoplin { + width: 100%; + height: 50px; + border-top: 0.5px solid #ededed; + border-radius: 4px; + div:first-child{ + width: 20%; + float: left; + } + div:nth-child(2){ + width: 65%; + float: left; + } + div:last-child { + width: 13%; + float: right; + font-size:12px; + font-weight: 500; + color:rgba(60,79,140,0.5); + } + } + } + } + + } + } + .services,.PACKAGE{ + 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; + } + } + .rightcontent { + float: left; + padding-left: 15px; + width: 70%; + .rt-content { + height: 40%; + margin-bottom: 18px; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; + .pfVmPm { + h3 { + color:#BD57E5; + } + } + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + margin-bottom: 34px; + } + + div { + height: 57px; + position: relative; + margin-bottom: 10px; + h3 { + font: 600 25px/25px "Arial"; + color: #2F6AEF; + margin-bottom: 10px; + padding-left: 50%; + } + p { + font: 400 12px/12px "Arial"; + color:rgba(60,79,140,0.5); + padding-left: 50%; + + } + img { + position: absolute; + top: 0; + left: 0; + } + } + } + .alarm { + float: left; + 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: #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 { + position: relative; + height: 58%; + background-color: #fff; + padding: 24px 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + border-radius:6px; + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + 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/views/home/home.component.spec.ts b/usecaseui-portal/src/app/views/home/home.component.spec.ts new file mode 100644 index 00000000..5456a323 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.spec.ts @@ -0,0 +1,42 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { HomeComponent } from './home.component'; +import { PieComponent } from '../../shared/components/charts/pie/pie.component'; +import { BarComponent } from '../../shared/components/charts/bar/bar.component'; +import { LineComponent } from '../../shared/components/charts/line/line.component'; +import { HomesService } from '../../core/services/homes.service'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture<HomeComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent, PieComponent, BarComponent, LineComponent ], + imports: [TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), + NgZorroAntdModule, + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule, + RouterTestingModule], + providers: [HomesService, TranslateService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts new file mode 100644 index 00000000..11a0f1a8 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.ts @@ -0,0 +1,531 @@ +/* + Copyright (C) 2019 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. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { HomesService } from '../../core/services/homes.service'; +import { slideToRight } from '../../animates'; +import { TranslateService } from "@ngx-translate/core"; +import { Router } from '@angular/router'; + +@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: HomesService, private router: Router) { } + + ngOnInit() { + this.getListSortMasters(); + this.getSourceNames(); + this.getHomeServiceData(); + this.getHomeAlarmData(); + this.getHomeAlarmChartData(); + this.getHomeServiceBarNsData(); + this.getHomeServiceBarVnfData(); + this.getHomeServiceBarPnfData(); + } + + + // services + serviceNumber: number = 0; + serviceChartData: Object; + serviceChartInit: Object = { + backgroundColor: '#fff', + height: 200, + option: { + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active', 'Closed'] + }, + color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], + series: [ + { + name: "服务信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + avoidLabelOverlap: false, + label: { + normal: { + show: false, + position: 'center' + }, + emphasis: { + show: true, + formatter: '{b}\n{c}', + textStyle: { + fontSize: '18', + fontWeight: 'bold' + } + } + }, + labelLine: { + normal: { + show: false + } + }, + itemStyle: { + normal: { + borderWidth: 4, + borderColor: "#fff" + }, + emphasis: { + borderWidth: 0 + } + }, + } + ] + } + }; + // gethomeServiceData + serviceChart = true; + getHomeServiceData() { + this.myhttp.getHomeServiceData() + .subscribe( + (data) => { + this.serviceNumber = data.serviceTotalNum; + if (this.serviceNumber > 0) { + this.serviceChart = true; + } else { + this.serviceChart = false; + } + this.serviceChartData = { + series: [{ data: data.customerServiceList }] + }; + }, + (err) => { + console.error(err); + } + ) + } + + // VM alarm + VMAlarmChartData: Object; + VMAlarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% color + }, { + offset: 1, color: '#7A8BAE' // 100% color + }], + globalCoord: 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; + alarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#3C4F8C" + }, + data: ['Active', 'Fixed'] + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% + }, { + offset: 1, color: '#7A8BAE' // 100% + }], + globalCoord: false + }], + series: [{ + name: "告警信息", + radius: '55%', + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } + }; + + getHomeAlarmData() { + this.myhttp.getHomeAlarmData() + .subscribe((data) => { + this.alarmChartData = { + series: [{ + 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 line + alarmLineChartData: Object; + alarmLineChartInit: Object = { + height: 320, + option: { + legend: { + bottom: '0px', + data: ['CPU', 'Memory', 'Disk'] + }, + xAxis: { + data: [] + }, + series: [ + { + name: 'CPU', + type: 'line', + itemStyle: { + color: "#70ACEC" + }, + data: [] + }, + { + name: 'Memory', + type: 'line', + itemStyle: { + color: "#3BCD79" + }, + data: [] + }, + { + name: 'Disk', + type: 'line', + itemStyle: { + color: "#FDC288" + }, + data: [] + } + ] + } + }; + + // services + servicesBarChartData: Object; + servicesBarChartData1: Object; + servicesBarChartData2: Object; + serviceBarChartInit: Object = { + height: 40, + width: 160, + option: { + tooltip: { + + }, + grid: { + + }, + xAxis: { + type: 'value', + show: false, + min: 0, + max: 100, + axisTick: { + show: false + }, + }, + yAxis: { + type: 'category', + show: false, + axisTick: { + show: false + } + }, + series: [{ + type: 'bar', + name: 'a', + silent: true, + animation: false, + data: [], + stack: 'income', + barWidth: 12, + itemStyle: { + normal: {} + }, + }, { + type: 'bar', + name: '', + animation: false, + silent: true, + data: [100], + tooltip: { + show: false + }, + stack: 'income', + barWidth: 12, + itemStyle: { + normal: { + color: '#fff', + barBorderRadius: [10, 10, 10, 10] + } + }, + label: { + normal: { + show: false, + } + }, + } + ] + } + } + + + NSdata: number; + Vnfdata: number; + PnfData: number; + getHomeServiceBarNsData() { + this.myhttp.getHomeServiceBarNsData() + .subscribe((data) => { + this.NSdata = data.length; + this.servicesBarChartData = { + series: [ + { + data: [this.NSdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FDAC63' + }, { + offset: 1, + color: '#FECE72' + }], + globalCoord: false, + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarVnfData() { + this.myhttp.getHomeServiceBarVnfData() + .subscribe((data) => { + this.Vnfdata = data.length; + this.servicesBarChartData1 = { + series: [ + { + data: [this.Vnfdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#9AD09F' + }, { + offset: 1, + color: '#BCECB8' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarPnfData() { + this.myhttp.getHomeServiceBarPnfData() + .subscribe((data) => { + this.PnfData = data.length; + this.servicesBarChartData2 = { + series: [ + { + data: [this.PnfData], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#71ADEF' + }, { + offset: 1, + color: '#ACCAF4' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + // sourceName + sourceNameList = ['performanceNameOne']; + sourceNameSelected = null; + + + listSortMasters = null; + + getListSortMasters() { + if (sessionStorage.getItem("DefaultLang") == undefined) { + sessionStorage.setItem("DefaultLang", "en"); + } + this.myhttp.getListSortMasters() + .subscribe((data) => { + this.listSortMasters = JSON.stringify(data); + sessionStorage.setItem('listSortMasters', this.listSortMasters) + }) + } + + getSourceNames() { + this.myhttp.getSourceNames() + .subscribe((data) => { + this.sourceNameList = data; + }) + } + sourceNameSelect(item) { + if (this.sourceNameSelected != item) { + this.sourceNameSelected = item; + this.getHomeAlarmChartData() + } + } + getHomeAlarmChartData() { + let nowTime = this.myhttp.dateformater(Date.now()); + let startTime = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); + let obj = { + sourceName: this.sourceNameSelected, + startTime: startTime, + endTime: nowTime, + format: "day" + } + + this.myhttp.getHomeAlarmChartData(obj) + .subscribe((data) => { + this.alarmLineChartData = { + xAxis: { + data: data.dataList + }, + series: [ + { data: data.allList }, + { data: data.ActiveList }, + { data: data.closedList } + ] + } + }, (err) => { + console.error(err); + }) + } + + goback_services() { + this.router.navigateByUrl('/services/services-list'); + } + goback_onboard() { + this.router.navigateByUrl('/services/onboard-vnf-vm'); + } + +} |