summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/alarm
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2019-02-15 14:24:18 +0800
committerzhangab <zhanganbing@chinamobile.com>2019-02-15 14:32:10 +0800
commit8f1facfc42a7ab98cf39f624034dbd6e82b83386 (patch)
tree7cd4381e0ce92b13cd2e2e0129631d8f1d0e8106 /usecaseui-portal/src/app/alarm
parenteedea1498658f6c6a07cbad256bca1ab8218ea06 (diff)
Fix VNF Performance Query Bugs
Change-Id: I54894af1b0082c4e107a80531179801eddc6a547 Issue-ID: USECASEUI-230 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.html81
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.less120
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.ts26
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>
- &nbsp;&nbsp;
- <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>
- &nbsp;&nbsp;
- <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>
- &nbsp;&nbsp;
- <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: {