From 9ed97927108df3ba9041441e89370fe4c2b6460a Mon Sep 17 00:00:00 2001 From: zhangab Date: Fri, 18 Jan 2019 18:27:54 +0800 Subject: Fix VNF Alarm Query Bugs Change-Id: I8df1f00de182e6c9f039e2e65237d3e8628c5717 Issue-ID: USECASEUI-165 Signed-off-by: zhangab --- .../src/app/alarm/alarm.component.html | 214 +++++----- .../src/app/alarm/alarm.component.less | 75 +++- usecaseui-portal/src/app/alarm/alarm.component.ts | 207 +++++---- usecaseui-portal/src/app/app.component.html | 2 +- usecaseui-portal/src/app/home/home.component.html | 2 +- .../onboard-vnf-vm/onboard-vnf-vm.component.html | 469 ++++++++++++++------- .../onboard-vnf-vm/onboard-vnf-vm.component.less | 53 ++- usecaseui-portal/src/styles.less | 69 ++- 8 files changed, 715 insertions(+), 376 deletions(-) (limited to 'usecaseui-portal/src') diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html index 894cdf5b..6e345a4e 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -13,105 +13,121 @@ See the License for the specific language governing permissions and limitations under the License. --> -

Alarm > - Details

-
-
-
- Source Name: - - - - -    - Priority: - - - - -    - Status: - - - - -

- Report Time: - +

Alarm > + Details

+
+
+
+
+
Active
+
13,980
+
+
There are 13980 faults waiting to be solved
+
+
+
Closed
+
23,980
+
+
23,980 faults have been fixed
+
+
+
+ Daily Total + +
+
+
+
+ Source Name: + + + + +    + Priority: + + + + +    + Status: + + + + +    + Report Time: + - -
-
-
-
-
    -
  • -
    All
    -

    {{alarmList.all }}

    -
    • -
  • -
    Closed
    -

    {{alarmList.closed }}

    -
    • -
  • -
    Active
    -

    {{alarmList.activeNum }}

    -
    • -
-
-
-

Alarm Chart

- - - - -
- + +
+
+
+ + +
+ + + + NO + Source Name + Priority + SpecificProblem + Report Time + Clear Time + Status + Action + + + + + {{i+1}} + {{item.sourceName}} + {{item.priority}} + {{item.specificProblem}} + {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} + {{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}} + {{item.status}} + + + + +
+
+
+
- -
-
- - - - NO - Source Name - Priority - SpecificProblem - Report Time - Clear Time - Status - Action - - - - - {{i+1}} - {{item.sourceName}} - {{item.priority}} - {{item.specificProblem}} - {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} - {{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}} - {{item.status}} - - - - -
-
-
-
\ 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 index 649815c5..936f73c8 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.less +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -25,7 +25,7 @@ hr { margin-bottom: 20px; } .select { - margin-bottom: 20px; + margin-bottom: 15px; span { display: inline-block; font: 700 14px "Arial"; @@ -68,6 +68,54 @@ hr { } } +.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%; + float: left; + height: 100%; + } +} .content { .title { border-radius: 5px 5px 0 0; @@ -148,8 +196,8 @@ hr { } } .tablelist { - background-color: #fff; - padding: 24px 10px 0px; + // background-color: #fff; + // padding: 24px 10px 0px; border-radius: 0 0 5px 5px; .action{ padding: 10px 0 0 20px; @@ -165,3 +213,24 @@ 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 be8aae01..ae9c0681 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -16,7 +16,7 @@ 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" +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-alarm', templateUrl: './alarm.component.html', @@ -45,7 +45,7 @@ export class AlarmComponent implements OnInit { ngOnInit() { this.getAlarmFormData(); this.getSourceNames(); - this.getstatuscount(); + // this.getstatuscount(); } // Filter box @@ -106,14 +106,14 @@ export class AlarmComponent implements OnInit { 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); + // 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; @@ -122,10 +122,10 @@ export class AlarmComponent implements OnInit { } getAlarmChartData(event) { let paramsObj = { - sourceName: this.sourceName, - startTime: this.startTime, - endTime: this.endTime, - format: 'day' + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: 'day' } this.myhttp.getHomeAlarmChartData(paramsObj) .subscribe((data) => { @@ -136,7 +136,6 @@ export class AlarmComponent implements OnInit { series: [ { data: data.allList }, { data: data.ActiveList }, - { data: data.closedList } ] } }, (err) => { @@ -144,61 +143,61 @@ export class AlarmComponent implements OnInit { }) } // 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); - }) - } + // 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: 380, + height: 240, option: { legend: { bottom: '0px', - data: ['All', 'Active', 'Closed'] + data: ['Active', 'Fixed'] }, tooltip: { trigger: 'axis', @@ -217,59 +216,55 @@ export class AlarmComponent implements OnInit { }, series: [ { - name: 'All', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_one + name: 'Active', + type: 'bar', data: [], + barWidth: 10, + barGap: 1, itemStyle: { - color: "#526b75" - }, - lineStyle: { - width: 1, - opacity: 0.5 + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB7788' // 0% 处的颜色 + }, { + offset: 1, color: '#FB93C2' // 100% 处的颜色 + }], + }, + opacity: 1, + } } }, { - name: 'Active', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two + name: 'Fixed', + type: 'bar', data: [], + barWidth: 10, + barGap: 1, itemStyle: { - color: "#fb6e6e" - }, - lineStyle: { - width: 1, - opacity: 0.5 + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7A8BAE' // 0% 处的颜色 + }, { + offset: 1, color: '#A6BFE4' // 100% 处的颜色 + }], + }, + opacity: 1, + } } }, - { - name: 'Closed', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125], - itemStyle: { - color: "#3fa8eb" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } - } ] } }; diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index df0890e6..1990d708 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -69,7 +69,7 @@ - + diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html index 191c67ac..577a6356 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -16,7 +16,7 @@ -
+

{{"SERVICES" | translate}}

- - -
-

Onboard {{tabTitle}}

+ + +
+ +

-

Click or drag file to this area to upload

+

Click or drag CSAR File here

 - -
- - - - NO - Name - Version - Onboarding State - Operational State - Usage State - Operation button - - - - - {{item.id}} - {{item.uuid}} - - {{item.nsdName}} -   - {{item.name}} -   - {{item.nsdVersion}} -   - {{item.version}} -   - - {{item.nsdOnboardingState}} -   - {{status}} - - - - {{item.nsdOperationalState}} - {{item.nsdUsageState}} - - - - - - - - - - - - - - - -
- -
-

Onboard {{tabTitle}}

+
+
+
+
Uploaded files
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+ +
+ +
+ + + + NO + Name + Version + Onboarding State + Operational State + Usage State + Operation button + + + + + {{item.id}} + {{item.uuid}} + + {{item.nsdName}} +   + {{item.name}} +   + {{item.nsdVersion}} +   + {{item.version}} +   + + {{item.nsdOnboardingState}} +   + {{status}} + + + + {{item.nsdOperationalState}} + {{item.nsdUsageState}} + + + + + + + + + + + + + + + + + + +
+ +
+ +

-

Click or drag file to this area to upload

+

Click or drag CSAR File here

 - -
- - - - NO - Name - Version - Onboarding State - Operational State - Usage State - Operation button - - - - - {{item.id}} - {{item.uuid}} - {{item.vnfProductName}} -   - {{item.name}} - {{item.vnfdVersion}} -   - {{item.version}} - {{item.onboardingState}} - {{item.usageState}} - {{item.operationalState}} - - - - - - - - - - - - - - -
- -
-

Onboard {{tabTitle}}

+
+
+
+
Uploaded files
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
+ +
+ + + + NO + Name + Version + Onboarding State + Operational State + Usage State + Operation button + + + + + {{item.id}} + {{item.uuid}} + {{item.vnfProductName}} +   + {{item.name}} + {{item.vnfdVersion}} +   + {{item.version}} + {{item.onboardingState}} + {{item.usageState}} + {{item.operationalState}} + + + + + + + + + + + + + + + + + + + +
+ +
+ +

-

Click or drag file to this area to upload

+

Click or drag CSAR File here

 - -
- - - - NO - Name - Version - Onboarding State - Usage State - Operation button - - - - - {{item.id}} - {{item.pnfdName}} - {{item.pnfdVersion}} - {{item.pnfdOnboardingState}} - {{item.pnfdUsageState}} - - - - - - - - - - - - - -
- +
+
+
+
Uploaded files
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
+ +
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
111
+
pnf-test.csar
+
File upload completed
+
456
+
+
+
+ +
+ + + + NO + Name + Version + Onboarding State + Usage State + Operation button + + + + + {{item.id}} + {{item.pnfdName}} + {{item.pnfdVersion}} + {{item.pnfdOnboardingState}} + {{item.pnfdUsageState}} + + + + + + + + + + + + + + +
+ diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index aca14585..b4d92fde 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -42,9 +42,58 @@ hr { } .list { - background-color: #fff; + // background-color: #fff; border-radius: 5px; - padding: 10px; + // padding: 10px; + .listupload { + width: 22%; + float: left; + margin-left: 13%; + } + .listlin { + float: left; + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + float: left; + width: 44%; + margin-left: 10%; + .listfilebgc { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .listfilebgc { + background-color: #fff; + height: 30px; + border-radius: 2px; + line-height: 2; + color: #42548F; + border-bottom: 4px solid #F7F8FC; + >div { + float: left; + } + :first-child { + width: 6%; + } + :nth-child(2){ + width:20%; + } + :nth-child(3){ + width: 60%; + text-align: center; + } + :nth-child(4){ + padding-left: 4%; + } + .color { + color:rgba(66,84,143,0.5); + } + } + } nz-table { tbody { td { diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 5429a9c1..23b954c8 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -8,7 +8,13 @@ // 表格每页条数选项单位置 nz-table { .ant-table-thead>tr>th { - color: #3fa8eb; //标题字体颜色 + color:rgba(60,79,140,0.5); //标题字体颜色 + background-color: #F7F8FC; + border-bottom: 0px solid #e8e8e8; + } + .ant-table-tbody>tr>td{ + background-color:#fff; + border-bottom: 8px solid #F7F8FC; } .ant-spin-container { nz-pagination { @@ -114,4 +120,63 @@ body { input { width: 165px; } -} \ No newline at end of file +} + +// D版本更改背景颜色修改 +nz-layout { + .ant-layout { + background:#F7F8FC; + } + .list[_ngcontent-c3]{ + background-color: #F7F8FC; + padding: 0px !important; + } +} +// onboard-vnf-vm页面调整 +// 頭部導航 +.ant-tabs-bar { + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + border-bottom:none !important; + background-color: #fff; +} +.ant-tabs-nav { + padding-left: 15px !important; + padding-top: 14px !important; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { + background-color: #fff !important; + border: 1px solid #fff !important; + border-radius: 2px !important; + margin-right: 0px !important; + padding: 0 35px !important; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { + background: #fff !important; + border-color: #7BC7F3 !important; + color: #7BC7F3 !important; +} +.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content { + padding: 20px; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container { + height: 55px !important; +} +.ant-upload.ant-upload-drag { + border: 2px dashed #d9d9d9 !important; +} +.ant-upload.ant-upload-drag p.ant-upload-text { + color:#42548F !important; + font-family:"ArialMT" !important; + font-size: 13px !important; +} +// 時間框 +.ant-calendar-picker .ant-input { + background-color: #fff; + border-color: #EEEEEE; +} +.ant-calendar-picker:hover { + border-color: #58B7F9; +} +.ant-calendar-picker { + width: 234px !important; +} -- cgit 1.2.3-korg