From 8f1facfc42a7ab98cf39f624034dbd6e82b83386 Mon Sep 17 00:00:00 2001 From: zhangab Date: Fri, 15 Feb 2019 14:24:18 +0800 Subject: Fix VNF Performance Query Bugs Change-Id: I54894af1b0082c4e107a80531179801eddc6a547 Issue-ID: USECASEUI-230 Signed-off-by: zhangab --- .../src/app/alarm/alarm.component.html | 81 +++++++------- .../src/app/alarm/alarm.component.less | 120 +++++++++++---------- usecaseui-portal/src/app/alarm/alarm.component.ts | 26 +++-- 3 files changed, 125 insertions(+), 102 deletions(-) (limited to 'usecaseui-portal/src/app/alarm') 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 @@ -

Alarm > - Details

+

Alarm Device Alarm Details

Active
13,980
-
+
There are 13980 faults waiting to be solved
Closed
23,980
-
+
23,980 faults have been fixed
@@ -38,39 +37,45 @@
- Source Name: - - - - -    - Priority: - - - - -    - Status: - - - - -    - Report Time: - - +
+ Source Name: + + + + +
+
+ Priority: + + + + +
+
+ Status: + + + + +
+
+ Report Time: + + +
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: { -- cgit 1.2.3-korg