summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/alarm
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/alarm
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.css164
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.html138
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.less244
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.spec.ts66
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.ts301
5 files changed, 0 insertions, 913 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css
deleted file mode 100644
index 37c2d936..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.css
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- 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/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
deleted file mode 100644
index 312ec236..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ /dev/null
@@ -1,138 +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"> <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/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
deleted file mode 100644
index 434470fc..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ /dev/null
@@ -1,244 +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: 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/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
deleted file mode 100644
index f64bcb83..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-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 '../components/details/details.component';
-import { LineComponent } from '../components/charts/line/line.component';
-import { HomesService } from '../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/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
deleted file mode 100644
index 5d479020..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ /dev/null
@@ -1,301 +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, Pipe, PipeTransform } from '@angular/core';
-import { HomesService } from '../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;
- }
-}