diff options
Diffstat (limited to 'usecaseui-portal')
7 files changed, 217 insertions, 151 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: { 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 @@ <!-- - 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,11 +14,10 @@ limitations under the License. --> <h3 class="title"> - <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span> - <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> - <span *ngIf="detailshow">> Details </span> + <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow" >Performance VNF</span> + <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span> + <span *ngIf="detailshow">/ Details </span> </h3> -<hr> <div class="select" [@showHideAnimate]="state"> <span>Source Name: </span> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> @@ -29,15 +28,22 @@ </li> </ul> </nz-dropdown> - <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> + <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button> + <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> --> </div> <div class="content" [@showHideAnimate]="state"> <div class="vnfs"> <div class="vnf" *ngFor="let item of totalRecords"> - <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)"> - <h3>{{item}}</h3> + <img src="../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)"> + <!-- <h3>{{item.name}}</h3> --> <div class="intro"> - {{item}} + {{item.name}} + </div> + </div> + <div class="vnf" *ngFor="let item of totalpnfs"> + <img src="../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)"> + <div class="intro"> + {{item.name}} </div> </div> <div class="empty" *ngFor="let empty of emptys"></div> 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 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 9574b8e0..b75db1fd 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -242,16 +242,23 @@ nz-layout { 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; +// Time box change +nz-range-picker { + nz-picker { + .ant-calendar-picker .ant-input { + width: 260px !important; + height: 30px; + background-color: #fff !important; + border-color: #EEEEEE !important; + color: rgba(60, 79, 140, 0.5); + } + .ant-input:hover { + border-color: #58B7F9 !important; + } + .ant-calendar-picker-clear:hover { + color: #58B7F9 !important; + } + } } //2019.01.21 add services-list.component.html |