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

diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.css b/usecaseui-portal/src/app/views/alarm/alarm.component.css
new file mode 100644
index 00000000..25bf187e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.css
@@ -0,0 +1,164 @@
+/*
+    Copyright (C) 2018 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;
+}
+.select {
+  margin-bottom: 20px;
+}
+.select span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.select nz-dropdown {
+  vertical-align: middle;
+}
+.select nz-dropdown :hover {
+  border-color: #147dc2;
+}
+.select nz-dropdown button {
+  width: 165px;
+  height: 30px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+  font-weight: 400;
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+}
+.select nz-dropdown button i {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.select .search {
+  margin-left: 20px;
+  height: 30px;
+  padding: 0 10px;
+}
+.select .search span {
+  color: #fff;
+  font-weight: 400;
+}
+.content .title {
+  border-radius: 5px 5px 0 0;
+  background-color: #fff;
+  height: 106px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 0;
+}
+.content .title ul {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+.content .title ul li {
+  list-style: none;
+  padding-left: 32px;
+  width: 100%;
+  border-left: 1px solid #eceff4;
+}
+.content .title ul li h5 {
+  font: 500 14px "Arial";
+  color: #3d4d65;
+}
+.content .title ul li p {
+  font: 500 24px "Arial";
+  color: #3fa8eb;
+  margin-bottom: 0;
+}
+.content .title ul li:nth-child(1) {
+  border: none;
+}
+.content .chart {
+  background-color: #fff;
+  position: relative;
+  padding-bottom: 24px;
+}
+.content .chart h3 {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  padding: 20px 15px;
+  margin: 0;
+  width: 12%;
+  display: inline-block;
+}
+.content .chart .AlarmChart {
+  height: 0px;
+  overflow: hidden;
+  border-bottom: 1px solid #f5f5f5;
+  transition: all 0.3s linear;
+}
+.content .chart .alarmChart-active {
+  height: 386px;
+}
+.content .chart .open-close {
+  width: 50px;
+  height: 25px;
+  position: absolute;
+  left: 50%;
+  bottom: 0px;
+  transform: translate(-25px, 0);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #fff;
+  background: url(../../../assets/images/open-close.png) no-repeat center -27px;
+}
+.content .chart .open-close:hover {
+  background: url(../../../assets/images/open-close.png) no-repeat center -79px;
+}
+.content .chart .open-close-active {
+  background: url(../../../assets/images/open-close.png) center -1px;
+}
+.content .chart .open-close-active:hover {
+  background: url(../../../assets/images/open-close.png) no-repeat center -53px;
+}
+.content .tablelist {
+  background-color: #fff;
+  padding: 24px 10px 0px;
+  border-radius: 0 0 5px 5px;
+}
+.content .tablelist .action {
+  padding: 10px 0 0 20px;
+}
+.content .tablelist .action .details {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(../../../assets/images/icon.png) center -113px;
+}
+.content .tablelist .action .details:hover {
+  background: url(../../../assets/images/icon.png) no-repeat center -128px;
+}
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.html b/usecaseui-portal/src/app/views/alarm/alarm.component.html
new file mode 100644
index 00000000..312ec236
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.html
@@ -0,0 +1,138 @@
+<!--
+    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"> <span (click)="detailHide()" style="cursor:pointer; float:right;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">Device Alarm Details</span> </h3>
+<div style="padding:0px 20px 20px 20px;">
+    <div class="charts" [@showHideAnimate]="state">
+        <div class="chartsleft">
+            <div class="active sctive_closed">
+                <div>Active</div>
+                <div>13,980</div>
+                <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div>
+                <div>There are 13980 faults waiting to be solved</div>
+            </div>
+            <div class="closed sctive_closed">
+                <div>Closed</div>
+                <div>23,980</div>
+                <div><nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress></div>
+                <div>23,980 faults have been fixed</div>
+            </div>
+        </div>
+        <div class="chartsright">
+            <span>Daily Total</span>
+            <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+        </div>
+    </div>
+    <div class="select" [@showHideAnimate]="state">
+        <div class="query_criteria">
+            <div class="query_item">
+                <span>Source Name: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_item" style="margin-left: 1.5%;">
+                <span>Priority: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_item" style="margin-left:-2%;">
+                <span>Status: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_time" style="margin-left: -3%;">
+                <span>Report Time: </span>
+                <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" 
+               ></nz-range-picker>
+                <!-- <nz-range-picker [nzFormat]="dateFormat"></nz-range-picker> -->
+            </div>
+            <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+        </div>
+    </div>
+    <div class="content" [@showHideAnimate]="state">
+        <!-- <div class="title">
+                    <ul>
+                        <li>
+                            <h5>All</h5>
+                            <p>{{alarmList.all }}</p>
+                        </li>
+                        <li>
+                            <h5>Closed</h5>
+                            <p>{{alarmList.closed }}</p>
+                        </li>
+                        <li>
+                            <h5>Active</h5>
+                            <p>{{alarmList.activeNum }}</p>
+                        </li>
+                    </ul>
+                </div> -->
+        <!-- <div class="chart">
+            <h3>Alarm Chart</h3>
+            <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
+                <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+            </div>
+        </div> -->
+        <div class="tablelist">
+            <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper
+                [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%" style="padding-left:20px;">NO</th>
+                        <th nzWidth="12%">Source Name</th>
+                        <th nzWidth="7%">Priority</th>
+                        <th nzWidth="18%">SpecificProblem</th>
+                        <th nzWidth="15%">Report Time</th>
+                        <th nzWidth="15%">Clear Time</th>
+                        <th nzWidth="8%">Status</th>
+                        <th nzWidth="10%">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of nzTable.data; let i = index;">
+                        <td style="padding-left: 20px;">{{i+1}}</td>
+                        <td>{{item.sourceName}}</td>
+                        <td>{{item.priority}}</td>
+                        <td>{{item.specificProblem}}</td>
+                        <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                        <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                        <td>{{item.status}}</td>
+                        <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </div>
+    </div>
+    <div [@showHideAnimate]="state2">
+        <app-details [detailId]="detailId"></app-details>
+    </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.less b/usecaseui-portal/src/app/views/alarm/alarm.component.less
new file mode 100644
index 00000000..92c9b7a4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.less
@@ -0,0 +1,244 @@
+/*
+    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: 500 16px/16px "ArialMT";
+    color: #3C4F8C;
+    margin: 20px;
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.select {
+    margin-bottom: 15px;
+    width: 100%;
+    .query_criteria {
+        width: 100%;
+        .query_item {
+            width: 20%;
+            display: inline-block;
+            span {
+                display: inline-block;
+                font: 500 13px "ArialMT";
+                color: #3C4F8C;
+            }
+            nz-dropdown {
+                vertical-align: middle;
+                width: 55%;
+                :hover{
+                    border-color: #48C6EF;
+                }
+                button {
+                    width: 100%;
+                    height: 30px;
+                    background-color: #fff;
+                    text-align: left;
+                    border-color: #EEEEEE ;
+                    border-radius: 2px;
+                    span {
+                        font-weight: 400;
+                        color:rgba(60,79,140,0.5);
+                        display: inline-block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        padding-top: 2px;
+                    }
+                    i {
+                        position: absolute;
+                        top: 10px;
+                        right: 10px;
+                    }
+                }
+            }
+        }
+       
+        .query_time{
+            display: inline-block;
+            span {
+                font: 500 13px "ArialMT";
+                color: #3C4F8C;
+            }
+        }
+        .search {
+            margin-left: 0.8%;
+            height: 30px;
+            padding: 0 10px;
+            span {
+                color: #fff;
+                font-weight: 400;
+            }
+        }
+    }
+}
+.charts{
+    width: 100%;
+    height: 250px;
+    margin-bottom: 25px;
+    .chartsleft {
+        width: 30%;
+        height: 100%;
+        float: left;
+        margin-right: 2%;
+        color: #fff;
+        font-family:"ArialMT";
+        .sctive_closed {
+            height: 48.75%;
+            padding: 12px;
+            width: 100%;                  
+            :first-child{
+                font-size: 14px;
+            }
+            :nth-child(2) {
+                font-size: 18px;
+            }
+            :nth-child(3) {
+                font-size: 12px;
+            }
+        }
+        .active {
+            margin-bottom: 5px;
+            background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */
+            background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */
+            background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */
+            background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */
+        }
+        .closed {
+            margin-top: 2px;
+            background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */
+            background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */
+            background: -moz-linear-gradient(right,  #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */
+            background: linear-gradient(to right,  #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */
+        }
+        
+    }
+    .chartsright {
+        background-color: #fff;
+        width: 68%;
+        padding: 20px;
+        float: left;
+        height: 100%;
+        .picker {
+            float: right; margin-right: 3%;
+        }
+        .datapicker {
+            padding-left: 700px;
+        }
+    }
+}
+.content {
+    .title {
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        height: 106px;
+        border-bottom: 1px solid #f0f0f0;
+        margin-bottom: 0;
+        ul {
+            display: flex;
+            display: -webkit-flex; 
+            justify-content: space-around;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            li {
+                list-style: none;
+                padding-left: 32px;
+                width: 100%;
+                border-left: 1px solid #eceff4;
+                h5 {
+                    font: 500 14px "Arial";
+                    color: #3d4d65;
+                }
+                p {
+                    font: 500 24px "Arial";
+                    color: #3fa8eb;
+                    margin-bottom: 0;
+                }
+            }
+            li:nth-child(1){
+                border: none;
+            }
+        }
+    }
+    .chart {
+        background-color: #fff;
+        position: relative;
+        padding-bottom: 24px;
+        h3 {
+            font: 700 18px/18px "思源黑体";
+            color: #4c5e70;
+            padding: 20px 15px;
+            margin: 0;
+            width: 12%;
+            display: inline-block;
+        }
+        .AlarmChart {
+            height: 0px;
+            overflow: hidden;
+            border-bottom: 1px solid #f5f5f5;
+            transition: all 0.3s linear;
+        }
+        .alarmChart-active {
+            height: 386px;
+        }
+        .open-close {
+            width: 50px;
+            height: 25px;
+            position: absolute;
+            left: 50%;
+            bottom: 0px;
+            transform: translate(-25px,0);
+            border: none;
+            outline: none;
+            cursor: pointer;
+            background-color: #fff;
+            background: url(../../../assets/images/open-close.png) no-repeat center -27px;
+            &:hover {
+                background: url(../../../assets/images/open-close.png) no-repeat center -79px;
+            }
+        }
+        .open-close-active {
+            background: url(../../../assets/images/open-close.png) center -1px;
+            &:hover {
+                background: url(../../../assets/images/open-close.png) no-repeat center -53px;
+            }
+        }
+    }
+    .tablelist {
+        // background-color: #fff;
+        // padding: 24px 10px 0px;
+        border-radius: 0 0 5px 5px;
+        .action{
+            padding: 10px 0 0 20px;
+            .details{
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background: url(../../../assets/images/icon.png) center -113px;
+                &:hover {
+                    background: url(../../../assets/images/icon.png) no-repeat center -128px;
+                }
+            }
+        }
+    }
+}
+
+
+
+
+
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts
new file mode 100644
index 00000000..9f01597e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts
@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+
+import { AlarmComponent } from './alarm.component';
+import { DetailsComponent } from '../../shared/components/details/details.component';
+import { LineComponent } from '../../shared/components/charts/line/line.component';
+import { HomesService } from '../../core/services/homes.service';
+
+fdescribe('AlarmComponent', () => {
+  let component: AlarmComponent;
+  let fixture: ComponentFixture<AlarmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlarmComponent, DetailsComponent, LineComponent],
+      imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }),
+      NgZorroAntdModule.forRoot(),
+        NgxEchartsModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        HttpClientTestingModule],
+      providers: [TranslateService, HomesService,
+        { provide: NZ_I18N, useValue: en_US }],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA,
+        NO_ERRORS_SCHEMA
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlarmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', inject([HttpTestingController, HomesService],
+    (httpMock: HttpTestingController, service: HomesService) => {
+      expect(component).toBeTruthy();
+    }));
+
+  it('expects service to fetch data with proper sorting',
+    inject([HttpTestingController, HomesService],
+      (httpMock: HttpTestingController, service: HomesService) => {
+        // We call the service
+        service.getqueryAllSourceNames().subscribe(data => {
+          expect(data.pageInfo.totalRecordCount).toBe(21);
+          expect(data.pageInfo.pageNumber).toBe(0);
+          expect(data.data.length).toBe(7);
+        });
+        // We set the expectations for the HttpClient mock
+        const req = httpMock.expectOne('http://.../data/contacts');
+        expect(req.request.method).toEqual('GET');
+        // Then we set the fake data to be returned by the mock
+        req.flush({ data: ...});
+      })
+  );
+});
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.ts
new file mode 100644
index 00000000..32e3456f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.ts
@@ -0,0 +1,301 @@
+/*
+    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, Pipe, PipeTransform } from '@angular/core';
+import { HomesService } from '../../core/services/homes.service';
+import { showHideAnimate, slideToRight } from '../../animates';
+import { DatePipe } from '@angular/common';
+@Component({
+  selector: 'app-alarm',
+  templateUrl: './alarm.component.html',
+  styleUrls: ['./alarm.component.less'],
+  animations: [
+    showHideAnimate, slideToRight
+  ],
+  providers: [DatePipe]
+})
+export class AlarmComponent implements OnInit {
+  size = 'day';
+  @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
+  public currentPage: number = 1;
+  public pageSize: number = 10;
+  public sourceName: string = '';
+  public priority: string = '';
+  public startTime: string = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000);
+  public endTime: string = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss');
+  public vfStatus: string = '';
+  public sourceNameList: Array<any> = ['---auto---'];
+  list: any;
+  sourcenames: any;
+  constructor(
+    private datePipe: DatePipe,
+    private myhttp: HomesService) { }
+  ngOnInit() {
+    this.getAlarmFormData();
+    this.getSourceNames();
+
+    // this.getstatuscount();
+  }
+
+  // Filter box
+  sourceNameSelected = this.sourceNameList[0];
+
+  priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning'];
+  prioritySelected = this.priorityList[0];
+
+
+  statusList = ['---auto---', 'active', 'Close'];
+  statusSelected = this.statusList[0];
+
+  choseSourceName(item) {
+    if (item == "---auto---") {
+      this.sourceName = '';
+    } else {
+      this.sourceName = item;
+    }
+    this.sourceNameSelected = item;
+
+  }
+  chosePriority(item) {
+    this.prioritySelected = item;
+    if (item == "---auto---") {
+      this.priority = '';
+    } else {
+      this.priority = item;
+    }
+  }
+  choseStatus(item) {
+    this.statusSelected = item;
+    if (item == "---auto---") {
+      this.vfStatus = '';
+    } else {
+      this.vfStatus = item;
+    }
+  }
+  getSourceNames() {
+    this.myhttp.getSourceNames().subscribe((data) => {
+      for (let i = 0; i < data.length; i++) {
+        this.sourceNameList.push(data[i]);
+      }
+      this.sourceNameSelected = this.sourceNameList[0];
+    })
+  }
+
+  // Date screening
+  dateRange = [(new Date(), -30), new Date()];
+  onChange(result: Date): void {
+    this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd');
+    this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd');
+  }
+  dateRange2 = [(new Date(), -30), new Date()];
+  onChange2(result: Date): void {
+    this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd');
+    this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd');
+  }
+
+  // total
+  alarmList = {
+    all: 0,
+    closed: 0,
+    activeNum: 0
+  }
+  // total data
+  // getstatuscount() {
+  //   this.myhttp.getstatuscount().subscribe((data) => {
+  //     this.alarmList.activeNum = data[0];
+  //     this.alarmList.closed = data[1];
+  //     this.alarmList.all = (data[0] - 0) + (data[1] - 0);
+
+  //   })
+  // }
+  getAlarmFormData() {
+    this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => {
+      this.list = data.alarms;
+    })
+    // this.getAlarmChartData(event);
+  }
+  getAlarmChartData() {
+    let paramsObj = {
+      // sourceName: this.sourceName,
+      // startTime: this.startTime,
+      // endTime: this.endTime,
+      // format: 'day'
+    }
+    this.myhttp.getHomeAlarmChartData(paramsObj)
+      .subscribe((data) => {
+        this.alarmChartData = {
+          xAxis: {
+            data: data.dateList
+          },
+          series: [
+            { data: data.allList },
+            { data: data.ActiveList },
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
+  // day alarmchartdata
+  // day() {
+  //   let paramsObj = {
+  //     sourceName: this.sourceName,
+  //     startTime: this.startTime,
+  //     endTime: this.endTime,
+  //     format: "day"
+  //   }
+  //   this.myhttp.getHomeAlarmChartData(paramsObj)
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         xAxis: {
+  //           data: data.dateList
+  //         },
+  //         series: [
+  //           { data: data.allList },
+  //           { data: data.ActiveList },
+  //           { data: data.closedList }
+  //         ]
+  //       }
+  //     }, (err) => {
+  //       console.log(err);
+  //     })
+  // }
+  // month() {
+  //   let paramsObj = {
+  //     sourceName: this.sourceName,
+  //     startTime: this.startTime,
+  //     endTime: this.endTime,
+  //     format: "month"
+  //   }
+  //   this.myhttp.getHomeAlarmChartData(paramsObj)
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         xAxis: {
+  //           data: data.dateList
+  //         },
+  //         series: [
+  //           { data: data.allList },
+  //           { data: data.ActiveList },
+  //           { data: data.closedList }
+  //         ]
+  //       }
+  //     }, (err) => {
+  //       console.log(err);
+  //     })
+  // }
+  //Line chart
+  alarmShow = false;
+  alarmChartData: Object;
+  alarmChartInit: Object = {
+    height: 200,
+    option: {
+      legend: {
+        icon: "circle",
+        itemWidth: 10,
+        itemHeight: 10,
+        bottom: '-5px',
+        data: ['Active', 'Fixed']
+      },
+      tooltip: {
+        trigger: 'axis',
+      },
+      dataZoom: [
+        {
+          type: 'slider',
+          show: true,
+          start: 1,
+          height: 10,
+          end: 60,
+          bottom: '9%'
+        }
+      ],
+      xAxis: {
+        data: []
+      },
+      series: [
+        {
+          name: 'Active',
+          type: 'bar',
+          data: [],
+          barWidth: 10,
+          barGap: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [5],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#FB7788'
+                }, {
+                  offset: 1, color: '#FB93C2'
+                }],
+              },
+              opacity: 1,
+            }
+          }
+        },
+        {
+          name: 'Fixed',
+          type: 'bar',
+          data: [],
+          barWidth: 10,
+          barGap: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [5],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#7A8BAE'
+                }, {
+                  offset: 1, color: '#A6BFE4'
+                }],
+              },
+              opacity: 1,
+            }
+          }
+        },
+      ]
+    }
+  };
+  sort(e) {
+
+  }
+  //Detail page title display
+  detailshow = false;
+  // Show hidden animation
+  state = "show";
+  state2 = "hide";
+  detailId: string;
+  detailShow(item) {
+    this.state = 'hide';
+    this.state2 = 'show';
+    this.detailshow = true;
+    this.detailId = item.id;
+  }
+  detailHide() {
+    this.state = 'show';
+    this.state2 = 'hide';
+    this.detailshow = false;
+  }
+}