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 +++-- .../performance-vnf/performance-vnf.component.html | 24 +++-- .../performance-vnf/performance-vnf.component.less | 40 ++++--- .../performance-vnf/performance-vnf.component.ts | 50 ++++++--- 6 files changed, 200 insertions(+), 141 deletions(-) (limited to 'usecaseui-portal/src/app') 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: { diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html index 2899b6a6..f151ef33 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html @@ -1,5 +1,5 @@

- Performance VNF - > Graphic list - > Details + Performance VNF + / Graphic list + / Details

-
Source Name: @@ -29,15 +28,22 @@ - + +
- -

{{item}}

+ +
- {{item}} + {{item.name}} +
+
+
+ PNF +
+ {{item.name}}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less index 6cc5b0fc..ed562d2d 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less @@ -1,20 +1,19 @@ .title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; + font: 500 14px/18px "ArialMT"; + color: #3C4F8C; + padding: 20px 0 0 20px; } .select { - margin-bottom: 20px; + height: 70px; + background-color: #fff; + margin-top: -30px; + padding-left: 20px; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + line-height: 5; span { display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; + font: 400 14px "ArialMT"; + color: #3C4F8C; } nz-dropdown { vertical-align: middle; @@ -24,9 +23,9 @@ hr { button { width: 165px; height: 30px; - background-color: #eceff4; + background-color: #fff; text-align: left; - border-color: #9fa9ab; + border-color: #E5E8F2; span { font-weight: 400; display: inline-block; @@ -41,10 +40,14 @@ hr { right: 10px; } } + :hover { + border-color: #48C6EF; + } //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 } .search { margin-left: 20px; + margin-top: -6px; vertical-align: middle; height: 30px; padding: 0 10px; @@ -56,7 +59,7 @@ hr { } .content { - background-color: #fff; + // background-color: #fff; border-radius: 5px; padding: 12px; .vnfs { @@ -65,6 +68,7 @@ hr { justify-content: space-around; .vnf { // width: 180px; + background-color: #fff; width: 18%; height: 200px; margin: 5px; @@ -74,8 +78,9 @@ hr { cursor: pointer; transition: all 0.3s linear; &:hover { - background-color: #f5f5f5; - transform: scale(1.02); + background-color: #fff; + transform: scale(1.02); + color: #3F9CFF; } h3 { font-size: 14px; @@ -89,6 +94,7 @@ hr { text-align: left; font-size: 12px; overflow: hidden; + padding-top: 25px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts index e52e19d2..05719155 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.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. @@ -39,7 +39,29 @@ export class PerformanceVnfComponent implements OnInit { ngOnInit() { this.getqueryAllSourceNames(); - this.getperformanceSsourceNames(); + // this.getperformanceSsourceNames(); + let _this = this; + setTimeout(function(){ + _this.totalRecords = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} + ]; + _this.totalpnfs = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} + ] + _this.emptys = new Array(12-_this.totalRecords.length); + },300) } @@ -62,21 +84,23 @@ export class PerformanceVnfComponent implements OnInit { } // vnfs data totalRecords = []; + totalpnfs = []; //Fill the box emptys = []; - getperformanceSsourceNames() { - this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { - this.totalRecords = data.totalRecords; - this.vnfsdataTotal = data.names; - if (Number.isInteger(this.totalRecords.length / 5)) { - this.emptys = new Array(0); - } else { - this.emptys = new Array(5 - this.totalRecords.length % 5); - } - }) - } + // getperformanceSsourceNames() { + // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { + // this.totalRecords = data.totalRecords; + // this.vnfsdataTotal = data.names; + // if (Number.isInteger(this.totalRecords.length / 5)) { + // this.emptys = new Array(0); + // } else { + // this.emptys = new Array(5 - this.totalRecords.length % 5); + // } + // }) + // } //Detail page title display + isHidden = true; graphicshow = false; detailshow = false; // Show hidden animation -- cgit 1.2.3-korg