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, 0 insertions, 1098 deletions

diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
deleted file mode 100644
index 41b3f5fe..00000000
--- a/usecaseui-portal/src/app/home/home.component.css
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
-    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/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
deleted file mode 100644
index 4126f241..00000000
--- a/usecaseui-portal/src/app/home/home.component.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!--
-    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/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
deleted file mode 100644
index 9e768cf7..00000000
--- a/usecaseui-portal/src/app/home/home.component.less
+++ /dev/null
@@ -1,265 +0,0 @@
-/*
-    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/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts
deleted file mode 100644
index 9e463e65..00000000
--- a/usecaseui-portal/src/app/home/home.component.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-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 '../components/charts/pie/pie.component'; 
-import { BarComponent } from '../components/charts/bar/bar.component'; 
-import { LineComponent } from '../components/charts/line/line.component';
-import { HomesService } from '../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/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
deleted file mode 100644
index 2b1f6765..00000000
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ /dev/null
@@ -1,531 +0,0 @@
-/*
-    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 '../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.log(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.log(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.log(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.log(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.log(err);
-      })
-  }
-
-  goback_services() {
-    this.router.navigateByUrl('/services/services-list');
-  }
-  goback_onboard() {
-    this.router.navigateByUrl('/services/onboard-vnf-vm');
-  }
-
-}