diff options
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.html | 81 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.less | 120 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 26 |
3 files changed, 125 insertions, 102 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html index 6e345a4e..312ec236 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. @@ -13,21 +13,20 @@ See the License for the specific language governing permissions and limitations under the License. --> -<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">> - Details</span> </h3> +<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]="90" [nzShowInfo]="false"></nz-progress></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]="30" [nzShowInfo]="false"></nz-progress></div> + <div><nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress></div> <div>23,980 faults have been fixed</div> </div> </div> @@ -38,39 +37,45 @@ </div> <div class="select" [@showHideAnimate]="state"> <div class="query_criteria"> - <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> - - <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> - - <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> - - <span>Report Time: </span> - <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> - + <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> diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less index 936f73c8..434470fc 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.less +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. @@ -14,9 +14,9 @@ limitations under the License. */ .title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; + font: 500 16px/16px "ArialMT"; + color: #3C4F8C; + margin: 20px; } hr { border: none; @@ -26,47 +26,64 @@ hr { } .select { margin-bottom: 15px; - span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; - } - nz-dropdown { - vertical-align: middle; - :hover{ - border-color: #147dc2; - } - button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; + width: 100%; + .query_criteria { + width: 100%; + .query_item { + width: 20%; + display: inline-block; span { - font-weight: 400; display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; + font: 500 13px "ArialMT"; + color: #3C4F8C; } - i { - position: absolute; - top: 10px; - right: 10px; + 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; + } + } } } - } - .search { - margin-left: 20px; - height: 30px; - padding: 0 10px; - span { - color: #fff; - font-weight: 400; + + .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%; @@ -112,8 +129,15 @@ hr { .chartsright { background-color: #fff; width: 68%; + padding: 20px; float: left; height: 100%; + .picker { + float: right; margin-right: 3%; + } + .datapicker { + padding-left: 700px; + } } } .content { @@ -213,24 +237,8 @@ hr { } } } -// select 框更改 -.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] button[_ngcontent-c3] { - width: 120px; - height: 30px; - background-color: #fff; - text-align: left; - border-color: #EEEEEE; - border-radius: 2px; -} -.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] [_ngcontent-c3]:hover { - border-color: #58B7F9; -} -.ant-progress-inner{ - background:rgba(229,238,252,0.8) !important; -} -.ant-progress-bg { - background-color: linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%) !important; -} + + diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts index ae9c0681..b8b9d4f3 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. @@ -45,6 +45,7 @@ export class AlarmComponent implements OnInit { ngOnInit() { this.getAlarmFormData(); this.getSourceNames(); + // this.getstatuscount(); } @@ -95,8 +96,13 @@ export class AlarmComponent implements OnInit { // Date screening dateRange = [(new Date(), -30), new Date()]; onChange(result: Date): void { - this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd HH:mm:ss'); - this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd HH:mm:ss'); + 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 @@ -118,9 +124,9 @@ export class AlarmComponent implements OnInit { 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); + // this.getAlarmChartData(event); } - getAlarmChartData(event) { + getAlarmChartData() { let paramsObj = { // sourceName: this.sourceName, // startTime: this.startTime, @@ -193,10 +199,13 @@ export class AlarmComponent implements OnInit { alarmShow = false; alarmChartData: Object; alarmChartInit: Object = { - height: 240, + height: 200, option: { legend: { - bottom: '0px', + icon: "circle", + itemWidth:10, + itemHeight:10, + bottom: '-5px', data: ['Active', 'Fixed'] }, tooltip: { @@ -208,7 +217,8 @@ export class AlarmComponent implements OnInit { show: true, start: 1, height: 10, - end: 40 + end: 60, + bottom:'9%' } ], xAxis: { |