summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/home
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/home')
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.css158
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.html102
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.less265
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.spec.ts42
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.ts531
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');
+ }
+
+}