summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/alarm
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/alarm')
-rw-r--r--usecaseui-portal/src/app/views/alarm/alarm.component.css164
-rw-r--r--usecaseui-portal/src/app/views/alarm/alarm.component.html138
-rw-r--r--usecaseui-portal/src/app/views/alarm/alarm.component.less244
-rw-r--r--usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts66
-rw-r--r--usecaseui-portal/src/app/views/alarm/alarm.component.ts301
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;
+ }
+}