feat:Optimize the date picker of slicing monitor page

Change-Id: Id8409d95521dd724bf88647f7fe453999af03aa2
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 17 insertions, 4 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
index 3f51dbc9..ea68cd92 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -5,11 +5,13 @@
             <nz-date-picker
                     nzShowTime
                     [nzShowToday]="false"
+                    [nzDisabledDate]="disabledDate"
                     nzFormat="yyyy-MM-dd HH:mm:ss"
                     nzPlaceHolder="Select Time"
-                    ngModel
+                    [(ngModel)]="dateValue"
                     (ngModelChange)="onDateChange($event)"
                     (nzOnOk)="onDateOk($event)"
+                    (nzOnOpenChange)="onOpenChange($event)"
             ></nz-date-picker>
         </div>
     </div>
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index f7771d13..39c684af 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
 import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
 import *as moment from 'moment';
+import * as differenceInDays from 'date-fns/difference_in_days';
 @Component({
     selector: 'app-monitor-5g',
     templateUrl: './monitor-5g.component.html',
@@ -13,6 +14,8 @@ export class Monitor5gComponent implements OnInit {
         private myhttp: SlicingTaskServices
     ) {
     }
+    today = new Date();
+    dateValue = null;
     listOfData: any[] = [];
     pageIndex: number = 1;
     pageSize: number = 10;
@@ -59,11 +62,14 @@ export class Monitor5gComponent implements OnInit {
             }
         })
     }
+    disabledDate = (current: Date): boolean => {
+        // Can not select days before today and today
+        return differenceInDays(current, this.today) > 0;
+    };
     searchData(reset: boolean = false) {
         this.getBusinessList();
     }
-    onDateChange(result: Date): void {
-        console.log('Selected Time: ', result);
+    onDateChange(result): void {
         if (result === null) {
             this.selectDate = 0;
             this.getChartsData()
@@ -71,10 +77,15 @@ export class Monitor5gComponent implements OnInit {
     }
 
     onDateOk(result: Date): void {
-        console.log('onOk', result);
         this.selectDate = result.valueOf();
         this.getChartsData();
     }
+    onOpenChange(result): void {
+        if(this.selectDate ===0 && !result){
+            this.dateValue = null;
+            this.getChartsData();
+        }
+    }
     getChartsData = (time = new Date().getTime()) => {
         if (!this.listOfData.length) {
             return false;