feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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');
+  }
+
+}