diff options
author | cyuamber <xuranyjy@chinamobile.com> | 2019-08-22 16:55:57 +0800 |
---|---|---|
committer | cyuamber <xuranyjy@chinamobile.com> | 2019-08-22 16:56:09 +0800 |
commit | d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch) | |
tree | b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/alarm | |
parent | 56923755c761897cc86ca2457667fcc3e6a0e43f (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.css | 164 | ||||
-rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.html | 138 | ||||
-rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.less | 244 | ||||
-rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.spec.ts | 66 | ||||
-rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 301 |
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; - } -} |