Fix VNF Performance Query Bugs

Change-Id: I54894af1b0082c4e107a80531179801eddc6a547
Issue-ID: USECASEUI-230
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

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>
-            &nbsp;&nbsp;
-            <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>
-            &nbsp;&nbsp;
-            <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>
-            &nbsp;&nbsp;
-            <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