<!--
- 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.
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>
</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>
/*
- 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.
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;
}
.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%;
.chartsright {
background-color: #fff;
width: 68%;
+ padding: 20px;
float: left;
height: 100%;
+ .picker {
+ float: right; margin-right: 3%;
+ }
+ .datapicker {
+ padding-left: 700px;
+ }
}
}
.content {
}
}
}
-// 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;
-}
+
+
/*
- 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.
ngOnInit() {
this.getAlarmFormData();
this.getSourceNames();
+
// this.getstatuscount();
}
// 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
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,
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: {
show: true,
start: 1,
height: 10,
- end: 40
+ end: 60,
+ bottom:'9%'
}
],
xAxis: {
<!--
- 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.
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'">
</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>
.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;
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;
right: 10px;
}
}
+ :hover {
+ border-color: #48C6EF;
+ }
//下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
}
.search {
margin-left: 20px;
+ margin-top: -6px;
vertical-align: middle;
height: 30px;
padding: 0 10px;
}
.content {
- background-color: #fff;
+ // background-color: #fff;
border-radius: 5px;
padding: 12px;
.vnfs {
justify-content: space-around;
.vnf {
// width: 180px;
+ background-color: #fff;
width: 18%;
height: 200px;
margin: 5px;
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;
text-align: left;
font-size: 12px;
overflow: hidden;
+ padding-top: 25px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/*
- 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.
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)
}
}
// 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
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
Code Review / usecase-ui.git / commitdiff