瀏覽代碼

年月日组件封装

seimin 3 月之前
父節點
當前提交
3ee0636a9e

+ 69 - 0
src/app/services/date.service.ts

@@ -10,6 +10,8 @@ import {
10
   addYears,
10
   addYears,
11
   endOfYear,
11
   endOfYear,
12
   endOfWeek,
12
   endOfWeek,
13
+  endOfDay,
14
+  format,
13
 } from "date-fns";
15
 } from "date-fns";
14
 
16
 
15
 @Injectable({
17
 @Injectable({
@@ -17,10 +19,66 @@ import {
17
 })
19
 })
18
 export class DateService {
20
 export class DateService {
19
   constructor() {}
21
   constructor() {}
22
+  // 获取日期快捷类型
23
+  getDateType(dateRange){
24
+    console.log('dateRange:', dateRange)
25
+    let [startDate, endDate] = dateRange;
26
+    if(startDate == format(this.date().yesterdayStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().yesterdayEndDate, 'yyyy-MM-dd HH:mm:ss')){
27
+      return 1;
28
+    }else if(startDate == format(this.date().thisWeekStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().thisWeekEndDate, 'yyyy-MM-dd HH:mm:ss')){
29
+      return 2;
30
+    }else if(startDate == format(this.date().thisMonthStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().thisMonthEndDate, 'yyyy-MM-dd HH:mm:ss')){
31
+      return 3;
32
+    }else if(startDate == format(this.date().thisYearStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().thisYearEndDate, 'yyyy-MM-dd HH:mm:ss')){
33
+      return 4;
34
+    }else if(startDate == format(this.date().lastWeekStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().lastWeekEndDate, 'yyyy-MM-dd HH:mm:ss')){
35
+      return 5;
36
+    }else if(startDate == format(this.date().lastMonthStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().lastMonthEndDate, 'yyyy-MM-dd HH:mm:ss')){
37
+      return 6;
38
+    }else if(startDate == format(this.date().lastYearStartDate, 'yyyy-MM-dd HH:mm:ss') && endDate == format(this.date().lastYearEndDate, 'yyyy-MM-dd HH:mm:ss')){
39
+      return 7;
40
+    }
41
+  }
20
   /**
42
   /**
21
    * 日期操作
43
    * 日期操作
22
    */
44
    */
23
   date() {
45
   date() {
46
+    //获得昨日的开始日期(昨日 00:00:00)
47
+    function getYesterdayStartDate() {
48
+      return addDays(startOfDay(new Date()), -1);
49
+    }
50
+    //获得昨日的结束日期(昨日 23:59:59)
51
+    function getYesterdayEndDate() {
52
+      return addDays(endOfDay(new Date()), -1);
53
+    }
54
+
55
+    //获得本周的开始日期(本周一 00:00:00)
56
+    function getThisWeekStartDate() {
57
+      return startOfWeek(new Date());
58
+    }
59
+    //获得本周的结束日期(本周日 23:59:59)
60
+    function getThisWeekEndDate() {
61
+      return endOfWeek(new Date());
62
+    }
63
+
64
+    //获得本月开始时间(本月1号 00:00:00)
65
+    function getThisMonthStartDate() {
66
+      return startOfMonth(new Date());
67
+    }
68
+    //获得本月结束时间(本月底 23:59:59)
69
+    function getThisMonthEndDate() {
70
+      return endOfMonth(new Date());
71
+    }
72
+
73
+    //获得本年的开始日期(本年1月1日 00:00:00)
74
+    function getThisYearStartDate() {
75
+      return startOfYear(new Date());
76
+    }
77
+    //获得本年的结束日期(本年12月31日 23:59:59)
78
+    function getThisYearEndDate() {
79
+      return endOfYear(new Date());
80
+    }
81
+
24
     //获得上周的开始日期(上周一 00:00:00)
82
     //获得上周的开始日期(上周一 00:00:00)
25
     function getLastWeekStartDate() {
83
     function getLastWeekStartDate() {
26
       return addDays(startOfWeek(new Date()), -6);
84
       return addDays(startOfWeek(new Date()), -6);
@@ -29,6 +87,7 @@ export class DateService {
29
     function getLastWeekEndDate() {
87
     function getLastWeekEndDate() {
30
       return addDays(endOfWeek(new Date()), -6);
88
       return addDays(endOfWeek(new Date()), -6);
31
     }
89
     }
90
+
32
     //获得上月开始时间(上月1号 00:00:00)
91
     //获得上月开始时间(上月1号 00:00:00)
33
     function getLastMonthStartDate() {
92
     function getLastMonthStartDate() {
34
       return startOfMonth(addMonths(new Date(), -1));
93
       return startOfMonth(addMonths(new Date(), -1));
@@ -37,6 +96,7 @@ export class DateService {
37
     function getLastMonthEndDate() {
96
     function getLastMonthEndDate() {
38
       return endOfMonth(addMonths(new Date(), -1));
97
       return endOfMonth(addMonths(new Date(), -1));
39
     }
98
     }
99
+
40
     //获得上年的开始日期(去年1月1日 00:00:00)
100
     //获得上年的开始日期(去年1月1日 00:00:00)
41
     function getLastYearStartDate() {
101
     function getLastYearStartDate() {
42
       return startOfYear(addYears(new Date(), -1));
102
       return startOfYear(addYears(new Date(), -1));
@@ -45,7 +105,16 @@ export class DateService {
45
     function getLastYearEndDate() {
105
     function getLastYearEndDate() {
46
       return endOfYear(addYears(new Date(), -1));
106
       return endOfYear(addYears(new Date(), -1));
47
     }
107
     }
108
+
48
     return {
109
     return {
110
+      yesterdayStartDate: getYesterdayStartDate(),
111
+      yesterdayEndDate: getYesterdayEndDate(),
112
+      thisWeekStartDate: getThisWeekStartDate(),
113
+      thisWeekEndDate: getThisWeekEndDate(),
114
+      thisMonthStartDate: getThisMonthStartDate(),
115
+      thisMonthEndDate: getThisMonthEndDate(),
116
+      thisYearStartDate: getThisYearStartDate(),
117
+      thisYearEndDate: getThisYearEndDate(),
49
       lastWeekStartDate: getLastWeekStartDate(),
118
       lastWeekStartDate: getLastWeekStartDate(),
50
       lastWeekEndDate: getLastWeekEndDate(),
119
       lastWeekEndDate: getLastWeekEndDate(),
51
       lastMonthStartDate: getLastMonthStartDate(),
120
       lastMonthStartDate: getLastMonthStartDate(),

+ 8 - 8
src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.html

@@ -1,33 +1,33 @@
1
 <div class="customChangeDate">
1
 <div class="customChangeDate">
2
-  <div class="searchDataItem">
2
+  <div class="searchDataItem" *ngIf="isShowType">
3
     <nz-radio-group [(ngModel)]="dateType" (ngModelChange)="changeDateType($event)">
3
     <nz-radio-group [(ngModel)]="dateType" (ngModelChange)="changeDateType($event)">
4
       <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
4
       <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
5
     </nz-radio-group>
5
     </nz-radio-group>
6
   </div>
6
   </div>
7
   <div class="searchDataItem">
7
   <div class="searchDataItem">
8
     <span class="label">建单时间</span>:
8
     <span class="label">建单时间</span>:
9
-    <nz-range-picker *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
9
+    <nz-range-picker [ngStyle]="{width: '260px'}" [nzAllowClear]="false" *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
10
       [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
10
       [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
11
     </nz-range-picker>
11
     </nz-range-picker>
12
-    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeStart" [nzDisabledDate]="disabledMonthStart"
12
+    <nz-month-picker [ngStyle]="{width: '121px'}" [nzAllowClear]="false" *ngIf="dateType=='month'" [(ngModel)]="monthRangeStart" [nzDisabledDate]="disabledMonthStart"
13
       (ngModelChange)="changeMonthStart($event)" nzPlaceHolder="请选择开始月份">
13
       (ngModelChange)="changeMonthStart($event)" nzPlaceHolder="请选择开始月份">
14
     </nz-month-picker>
14
     </nz-month-picker>
15
     <span *ngIf="dateType=='month'"> ~ </span>
15
     <span *ngIf="dateType=='month'"> ~ </span>
16
-    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeEnd" [nzDisabledDate]="disabledMonthEnd"
16
+    <nz-month-picker [ngStyle]="{width: '121px'}" [nzAllowClear]="false" *ngIf="dateType=='month'" [(ngModel)]="monthRangeEnd" [nzDisabledDate]="disabledMonthEnd"
17
       (ngModelChange)="changeMonthEnd($event)" nzPlaceHolder="请选择截止月份">
17
       (ngModelChange)="changeMonthEnd($event)" nzPlaceHolder="请选择截止月份">
18
     </nz-month-picker>
18
     </nz-month-picker>
19
-    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeStart" [nzDisabledDate]="disabledYearStart"
19
+    <nz-year-picker [ngStyle]="{width: '121px'}" [nzAllowClear]="false" *ngIf="dateType=='year'" [(ngModel)]="yearRangeStart" [nzDisabledDate]="disabledYearStart"
20
       (ngModelChange)="changeYearStart($event)" nzPlaceHolder="请选择开始年份">
20
       (ngModelChange)="changeYearStart($event)" nzPlaceHolder="请选择开始年份">
21
     </nz-year-picker>
21
     </nz-year-picker>
22
     <span *ngIf="dateType=='year'"> ~ </span>
22
     <span *ngIf="dateType=='year'"> ~ </span>
23
-    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeEnd" (ngModelChange)="changeYearEnd($event)"
23
+    <nz-year-picker [ngStyle]="{width: '121px'}" [nzAllowClear]="false" *ngIf="dateType=='year'" [(ngModel)]="yearRangeEnd" (ngModelChange)="changeYearEnd($event)"
24
       [nzDisabledDate]="disabledYearEnd" nzPlaceHolder="请选择截止年份">
24
       [nzDisabledDate]="disabledYearEnd" nzPlaceHolder="请选择截止年份">
25
     </nz-year-picker>
25
     </nz-year-picker>
26
   </div>
26
   </div>
27
   <div class="searchDataItem ml8">
27
   <div class="searchDataItem ml8">
28
     <nz-select class="formItem" [ngStyle]="{width: '92px'}" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
28
     <nz-select class="formItem" [ngStyle]="{width: '92px'}" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
29
-      nzPlaceHolder="请选择时间" [(ngModel)]="defRange" (ngModelChange)="changeDateRange($event)">
30
-      <nz-option nzLabel="{{data.label}}" nzValue="{{data.id}}" *ngFor="let data of defRanges"></nz-option>
29
+      nzPlaceHolder="请选择" [(ngModel)]="defRange" (ngModelChange)="changeDateRange($event)">
30
+      <nz-option [nzLabel]="data.label" [nzValue]="data.id" *ngFor="let data of defRanges"></nz-option>
31
     </nz-select>
31
     </nz-select>
32
   </div>
32
   </div>
33
 </div>
33
 </div>

+ 1 - 1
src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.less

@@ -4,7 +4,7 @@
4
   margin-right: 24px;
4
   margin-right: 24px;
5
   .searchDataItem{
5
   .searchDataItem{
6
     margin-left: 16px;
6
     margin-left: 16px;
7
-    &:last-of-type{
7
+    &:first-of-type{
8
       margin-left: 0;
8
       margin-left: 0;
9
     }
9
     }
10
     .label{
10
     .label{

+ 125 - 52
src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.ts

@@ -9,8 +9,8 @@ import { DateService } from 'src/app/services/date.service';
9
   styleUrls: ['./custom-change-date.component.less']
9
   styleUrls: ['./custom-change-date.component.less']
10
 })
10
 })
11
 export class CustomChangeDateComponent implements OnInit {
11
 export class CustomChangeDateComponent implements OnInit {
12
-  @Output() customChangeDateEmit = new EventEmitter();
13
-  @Input() queryType: number;
12
+  // @Output() customChangeDateEmit = new EventEmitter();
13
+  @Input() isShowType: boolean = true;
14
   constructor(
14
   constructor(
15
     private dateService: DateService,
15
     private dateService: DateService,
16
   ) { }
16
   ) { }
@@ -30,20 +30,36 @@ export class CustomChangeDateComponent implements OnInit {
30
       value: "year",
30
       value: "year",
31
     },
31
     },
32
   ]; //时间维度
32
   ]; //时间维度
33
-  defRange = "1"; //默认上周
33
+  defRange = 6; //默认上月
34
   defRanges = [
34
   defRanges = [
35
     {
35
     {
36
-      label: "上周",
36
+      label: "昨日",
37
       id: 1,
37
       id: 1,
38
     },
38
     },
39
     {
39
     {
40
-      label: "上月",
40
+      label: "本周",
41
       id: 2,
41
       id: 2,
42
     },
42
     },
43
     {
43
     {
44
-      label: "上年",
44
+      label: "本月",
45
       id: 3,
45
       id: 3,
46
     },
46
     },
47
+    {
48
+      label: "本年",
49
+      id: 4,
50
+    },
51
+    {
52
+      label: "上周",
53
+      id: 5,
54
+    },
55
+    {
56
+      label: "上月",
57
+      id: 6,
58
+    },
59
+    {
60
+      label: "上年",
61
+      id: 7,
62
+    },
47
   ]; //时间默认区间
63
   ]; //时间默认区间
48
 
64
 
49
   dateRange: any = []; //发起时间区间 天
65
   dateRange: any = []; //发起时间区间 天
@@ -52,9 +68,27 @@ export class CustomChangeDateComponent implements OnInit {
52
   yearRangeStart: any; //发起时间 年 起
68
   yearRangeStart: any; //发起时间 年 起
53
   yearRangeEnd: any; //发起时间 年 止
69
   yearRangeEnd: any; //发起时间 年 止
54
 
70
 
55
-  ngOnInit() {}
71
+  ngOnInit() {
72
+    this.dateType = 'day';
73
+    this.defRange = 6;
74
+    this.changeDateRange(this.defRange);
75
+  }
56
 
76
 
57
-  // this.customChangeDateEmit.emit({queryType, hospital, duty, parent});
77
+  // 根据时间区间重置
78
+  reset(dateRange:any[]){
79
+    this.dateType = 'day';
80
+    if(
81
+      this.dateService.getDateType(dateRange) == 1 ||
82
+      this.dateService.getDateType(dateRange) == 2 ||
83
+      this.dateService.getDateType(dateRange) == 3 ||
84
+      this.dateService.getDateType(dateRange) == 5 ||
85
+      this.dateService.getDateType(dateRange) == 6 ||
86
+      this.dateService.getDateType(dateRange) == 7
87
+    ){
88
+      this.defRange = this.dateService.getDateType(dateRange);
89
+    }
90
+    this.changeDateRange(this.defRange);
91
+  }
58
 
92
 
59
   // 修改时间展示维度
93
   // 修改时间展示维度
60
   changeDateType(res) {
94
   changeDateType(res) {
@@ -64,44 +98,64 @@ export class CustomChangeDateComponent implements OnInit {
64
       case "day":
98
       case "day":
65
         this.defRanges = [
99
         this.defRanges = [
66
           {
100
           {
67
-            label: "上周",
101
+            label: "昨日",
68
             id: 1,
102
             id: 1,
69
           },
103
           },
70
           {
104
           {
71
-            label: "上月",
105
+            label: "本周",
72
             id: 2,
106
             id: 2,
73
           },
107
           },
74
           {
108
           {
75
-            label: "上年",
109
+            label: "本月",
76
             id: 3,
110
             id: 3,
77
           },
111
           },
112
+          {
113
+            label: "上周",
114
+            id: 5,
115
+          },
116
+          {
117
+            label: "上月",
118
+            id: 6,
119
+          },
120
+          {
121
+            label: "上年",
122
+            id: 7,
123
+          },
78
         ]; //时间默认区间
124
         ]; //时间默认区间
79
-        this.defRange = "1"; //默认上周
80
-        this.changeDateRange("1");
125
+        this.defRange = this.defRanges[0].id;
126
+        this.changeDateRange(this.defRanges[0].id);
81
         break;
127
         break;
82
       case "month":
128
       case "month":
83
         this.defRanges = [
129
         this.defRanges = [
84
           {
130
           {
131
+            label: "本月",
132
+            id: 3,
133
+          },
134
+          {
85
             label: "上月",
135
             label: "上月",
86
-            id: 2,
136
+            id: 6,
87
           },
137
           },
88
           {
138
           {
89
             label: "上年",
139
             label: "上年",
90
-            id: 3,
140
+            id: 7,
91
           },
141
           },
92
         ]; //时间默认区间
142
         ]; //时间默认区间
93
-        this.defRange = "2"; //上月
94
-        this.changeDateRange("2");
143
+        this.defRange = this.defRanges[0].id;
144
+        this.changeDateRange(this.defRanges[0].id);
95
         break;
145
         break;
96
       case "year":
146
       case "year":
97
         this.defRanges = [
147
         this.defRanges = [
98
           {
148
           {
149
+            label: "本年",
150
+            id: 4,
151
+          },
152
+          {
99
             label: "上年",
153
             label: "上年",
100
-            id: 3,
154
+            id: 7,
101
           },
155
           },
102
         ]; //时间默认区间
156
         ]; //时间默认区间
103
-        this.defRange = "3"; //默认上周
104
-        this.changeDateRange("3");
157
+        this.defRange = this.defRanges[0].id;
158
+        this.changeDateRange(this.defRanges[0].id);
105
         break;
159
         break;
106
     }
160
     }
107
   }
161
   }
@@ -109,7 +163,7 @@ export class CustomChangeDateComponent implements OnInit {
109
   // 禁选日期
163
   // 禁选日期
110
   disabledDate = (current: Date): boolean => {
164
   disabledDate = (current: Date): boolean => {
111
     // Can not select days before today and today
165
     // Can not select days before today and today
112
-    return differenceInCalendarDays(current, this.today) > 0;
166
+    return false;
113
   };
167
   };
114
 
168
 
115
   // 禁选月份开始
169
   // 禁选月份开始
@@ -122,9 +176,8 @@ export class CustomChangeDateComponent implements OnInit {
122
   // 禁选月份结束
176
   // 禁选月份结束
123
   disabledMonthEnd = (current: Date): boolean => {
177
   disabledMonthEnd = (current: Date): boolean => {
124
     // Can not select days before today and today
178
     // Can not select days before today and today
125
-    let cur = differenceInCalendarDays(current, endOfMonth(this.today)) > 0;
126
     let staEnd = differenceInCalendarDays(this.monthRangeStart, current) > 0;
179
     let staEnd = differenceInCalendarDays(this.monthRangeStart, current) > 0;
127
-    return cur || staEnd;
180
+    return staEnd;
128
   };
181
   };
129
 
182
 
130
   // 禁选年份开始
183
   // 禁选年份开始
@@ -138,17 +191,14 @@ export class CustomChangeDateComponent implements OnInit {
138
   // 禁选年份结束
191
   // 禁选年份结束
139
   disabledYearEnd = (current: Date): boolean => {
192
   disabledYearEnd = (current: Date): boolean => {
140
     // Can not select days before today and today
193
     // Can not select days before today and today
141
-    let cur = differenceInCalendarDays(current, endOfYear(this.today)) > 0;
142
     let staEnd = differenceInCalendarDays(this.yearRangeStart, current) > 0;
194
     let staEnd = differenceInCalendarDays(this.yearRangeStart, current) > 0;
143
-    return cur || staEnd;
195
+    return staEnd;
144
   };
196
   };
145
 
197
 
146
   // 日期选择 日
198
   // 日期选择 日
147
   startDate: string; //发起时间开始
199
   startDate: string; //发起时间开始
148
   endDate: string; //发起时间结束
200
   endDate: string; //发起时间结束
149
-  changeDate(result?): void {
150
-    console.log(this.dateRange);
151
-    console.log(result);
201
+  changeDate(result): void {
152
     this.dateRange = result;
202
     this.dateRange = result;
153
     if (!this.quick) {
203
     if (!this.quick) {
154
       // 不是快捷选择
204
       // 不是快捷选择
@@ -158,22 +208,12 @@ export class CustomChangeDateComponent implements OnInit {
158
       this.startDate = this.endDate = "";
208
       this.startDate = this.endDate = "";
159
       return;
209
       return;
160
     }
210
     }
161
-    this.startDate =
162
-      result[0].getFullYear() +
163
-      "-" +
164
-      (result[0].getMonth() + 1) +
165
-      "-" +
166
-      result[0].getDate();
167
-    this.endDate =
168
-      result[1].getFullYear() +
169
-      "-" +
170
-      (result[1].getMonth() + 1) +
171
-      "-" +
172
-      result[1].getDate();
211
+    this.startDate = format(startOfDay(result[0]), "yyyy-MM-dd HH:mm:ss");
212
+    this.endDate = format(endOfDay(result[1]), "yyyy-MM-dd HH:mm:ss");
173
   }
213
   }
174
 
214
 
175
   // 月份选择
215
   // 月份选择
176
-  changeMonthStart(result?) {
216
+  changeMonthStart(result) {
177
     console.log(result);
217
     console.log(result);
178
     this.monthRangeStart = result;
218
     this.monthRangeStart = result;
179
     if (!this.quick) {
219
     if (!this.quick) {
@@ -184,9 +224,9 @@ export class CustomChangeDateComponent implements OnInit {
184
       this.startDate = this.endDate = "";
224
       this.startDate = this.endDate = "";
185
       return;
225
       return;
186
     }
226
     }
187
-    this.startDate = format(startOfMonth(result), 'yyyy-MM-dd');
227
+    this.startDate = format(startOfMonth(result), 'yyyy-MM-dd HH:mm:ss');
188
   }
228
   }
189
-  changeMonthEnd(result?) {
229
+  changeMonthEnd(result) {
190
     console.log(result);
230
     console.log(result);
191
     this.monthRangeEnd = result;
231
     this.monthRangeEnd = result;
192
     if (!this.quick) {
232
     if (!this.quick) {
@@ -197,10 +237,10 @@ export class CustomChangeDateComponent implements OnInit {
197
       this.startDate = this.endDate = "";
237
       this.startDate = this.endDate = "";
198
       return;
238
       return;
199
     }
239
     }
200
-    this.endDate = format(endOfMonth(result), 'yyyy-MM-dd');
240
+    this.endDate = format(endOfMonth(result), 'yyyy-MM-dd HH:mm:ss');
201
   }
241
   }
202
   // 年份选择
242
   // 年份选择
203
-  changeYearStart(result?) {
243
+  changeYearStart(result) {
204
     console.log(result);
244
     console.log(result);
205
     this.yearRangeStart = result;
245
     this.yearRangeStart = result;
206
     if (!this.quick) {
246
     if (!this.quick) {
@@ -211,10 +251,9 @@ export class CustomChangeDateComponent implements OnInit {
211
       this.startDate = this.endDate = "";
251
       this.startDate = this.endDate = "";
212
       return;
252
       return;
213
     }
253
     }
214
-    this.startDate = format(startOfYear(result), 'yyyy-MM-dd');
215
-    // this.endDate = result.getFullYear() + '-01-01';
254
+    this.startDate = format(startOfYear(result), 'yyyy-MM-dd HH:mm:ss');
216
   }
255
   }
217
-  changeYearEnd(result?) {
256
+  changeYearEnd(result) {
218
     console.log(result);
257
     console.log(result);
219
     this.yearRangeEnd = result;
258
     this.yearRangeEnd = result;
220
     if (!this.quick) {
259
     if (!this.quick) {
@@ -225,7 +264,7 @@ export class CustomChangeDateComponent implements OnInit {
225
       this.startDate = this.endDate = "";
264
       this.startDate = this.endDate = "";
226
       return;
265
       return;
227
     }
266
     }
228
-    this.endDate = format(endOfYear(result), 'yyyy-MM-dd');
267
+    this.endDate = format(endOfYear(result), 'yyyy-MM-dd HH:mm:ss');
229
   }
268
   }
230
 
269
 
231
   // 日期选择 快速修改时间区间
270
   // 日期选择 快速修改时间区间
@@ -235,14 +274,48 @@ export class CustomChangeDateComponent implements OnInit {
235
     console.log(res);
274
     console.log(res);
236
     this.quick = true;
275
     this.quick = true;
237
     switch (res) {
276
     switch (res) {
238
-      case "1":
277
+      case 1:
278
+        // 昨日
279
+        let yesterdaystartdate = this.dateService.date().yesterdayStartDate;
280
+        let yesterdayenddate = this.dateService.date().yesterdayEndDate;
281
+        console.log(yesterdaystartdate, yesterdayenddate);
282
+        this.changeDate([yesterdaystartdate, yesterdayenddate]);
283
+        break;
284
+      case 2:
285
+        // 本周
286
+        let thisweekstartdate = this.dateService.date().thisWeekStartDate;
287
+        let thisweekenddate = this.dateService.date().thisWeekEndDate;
288
+        console.log(thisweekstartdate, thisweekenddate);
289
+        this.changeDate([thisweekstartdate, thisweekenddate]);
290
+        break;
291
+      case 3:
292
+        // 本月
293
+        let thismonthstartdate = this.dateService.date().thisMonthStartDate;
294
+        let thismonthenddate = this.dateService.date().thisMonthEndDate;
295
+        console.log(thismonthstartdate, thismonthenddate);
296
+        this.changeDate([thismonthstartdate, thismonthenddate]);
297
+        this.changeMonthStart(thismonthstartdate);
298
+        this.changeMonthEnd(thismonthenddate);
299
+        break;
300
+      case 4:
301
+        // 本年
302
+        let thisyearstartdate = this.dateService.date().thisYearStartDate;
303
+        let thisyearenddate = this.dateService.date().thisYearEndDate;
304
+        console.log(thisyearstartdate, thisyearenddate);
305
+        this.changeDate([thisyearstartdate, thisyearenddate]);
306
+        this.changeMonthStart(thisyearstartdate);
307
+        this.changeMonthEnd(thisyearenddate);
308
+        this.changeYearStart(thisyearstartdate);
309
+        this.changeYearEnd(thisyearenddate);
310
+        break;
311
+      case 5:
239
         // 上周
312
         // 上周
240
         let lastweekstartdate = this.dateService.date().lastWeekStartDate;
313
         let lastweekstartdate = this.dateService.date().lastWeekStartDate;
241
         let lastweekenddate = this.dateService.date().lastWeekEndDate;
314
         let lastweekenddate = this.dateService.date().lastWeekEndDate;
242
         console.log(lastweekstartdate, lastweekenddate);
315
         console.log(lastweekstartdate, lastweekenddate);
243
         this.changeDate([lastweekstartdate, lastweekenddate]);
316
         this.changeDate([lastweekstartdate, lastweekenddate]);
244
         break;
317
         break;
245
-      case "2":
318
+      case 6:
246
         // 上月
319
         // 上月
247
         let lastmonthstartdate = this.dateService.date().lastMonthStartDate;
320
         let lastmonthstartdate = this.dateService.date().lastMonthStartDate;
248
         let lastmonthenddate = this.dateService.date().lastMonthEndDate;
321
         let lastmonthenddate = this.dateService.date().lastMonthEndDate;
@@ -251,7 +324,7 @@ export class CustomChangeDateComponent implements OnInit {
251
         this.changeMonthStart(lastmonthstartdate);
324
         this.changeMonthStart(lastmonthstartdate);
252
         this.changeMonthEnd(lastmonthenddate);
325
         this.changeMonthEnd(lastmonthenddate);
253
         break;
326
         break;
254
-      case "3":
327
+      case 7:
255
         // 上年
328
         // 上年
256
         let lastyearstartdate = this.dateService.date().lastYearStartDate;
329
         let lastyearstartdate = this.dateService.date().lastYearStartDate;
257
         let lastyearenddate = this.dateService.date().lastYearEndDate;
330
         let lastyearenddate = this.dateService.date().lastYearEndDate;

+ 1 - 6
src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.component.html

@@ -1,11 +1,6 @@
1
 <div class="searchDataWrap">
1
 <div class="searchDataWrap">
2
   <div class="searchData">
2
   <div class="searchData">
3
-    <app-custom-change-date (customChangeDateEmit)="customChangeDateEmit($event)"></app-custom-change-date>
4
-    <!-- <div class="searchDataItem">
5
-      <span class="label">建单时间</span>:
6
-      <nz-range-picker [(ngModel)]="dateRange" [nzAllowClear]="false" (ngModelChange)="changeDate($event)" (nzOnCalendarChange)="onCalendarChangeDate($event)">
7
-      </nz-range-picker>
8
-    </div> -->
3
+    <app-custom-change-date #customChangeDate [isShowType]="true"></app-custom-change-date>
9
     <div class="searchDataItem">
4
     <div class="searchDataItem">
10
       <span class="label">统计分类</span>:
5
       <span class="label">统计分类</span>:
11
       <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzAllowClear nzPlaceHolder="请选择统计分类" [(ngModel)]="statisticsTypeId" (nzOpenChange)="openChangeStatisticsType($event)">
6
       <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzAllowClear nzPlaceHolder="请选择统计分类" [(ngModel)]="statisticsTypeId" (nzOpenChange)="openChangeStatisticsType($event)">

+ 13 - 22
src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.component.ts

@@ -1,15 +1,17 @@
1
 import { TabService } from './../../services/tab.service';
1
 import { TabService } from './../../services/tab.service';
2
 import { NzMessageService } from 'ng-zorro-antd/message';
2
 import { NzMessageService } from 'ng-zorro-antd/message';
3
 import { format, addMonths, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns';
3
 import { format, addMonths, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns';
4
-import { Component, OnInit, HostListener, AfterViewInit } from "@angular/core";
4
+import { Component, OnInit, HostListener, AfterViewInit, ViewChild } from "@angular/core";
5
 import { MainService } from 'src/app/services/main.service';
5
 import { MainService } from 'src/app/services/main.service';
6
 import { ActivatedRoute } from '@angular/router';
6
 import { ActivatedRoute } from '@angular/router';
7
+import { CustomChangeDateComponent } from '../../components/custom-change-date/custom-change-date.component';
7
 @Component({
8
 @Component({
8
   selector: "app-date-phone-statistics",
9
   selector: "app-date-phone-statistics",
9
   templateUrl: "./date-phone-statistics.component.html",
10
   templateUrl: "./date-phone-statistics.component.html",
10
   styleUrls: ["./date-phone-statistics.component.less"],
11
   styleUrls: ["./date-phone-statistics.component.less"],
11
 })
12
 })
12
 export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
13
 export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
14
+  @ViewChild('customChangeDate', { static: false }) customChangeDateComponent!: CustomChangeDateComponent;
13
   constructor(
15
   constructor(
14
     private mainService: MainService,
16
     private mainService: MainService,
15
     private message: NzMessageService,
17
     private message: NzMessageService,
@@ -25,13 +27,14 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
25
 
27
 
26
   statisticsTypeId;//统计分类id
28
   statisticsTypeId;//统计分类id
27
 
29
 
28
-  ngOnInit() {
29
-    this.initSessionData();
30
-    this.getQueryParams();
31
-    this.search();
32
-  }
30
+  ngOnInit() {}
33
 
31
 
34
   ngAfterViewInit(){
32
   ngAfterViewInit(){
33
+    this.initSessionData();
34
+    this.getQueryParams();
35
+    setTimeout(() => {
36
+      this.search();
37
+    }, 0)
35
     this.onResize();
38
     this.onResize();
36
   }
39
   }
37
 
40
 
@@ -44,13 +47,12 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
44
     }, 0)
47
     }, 0)
45
   }
48
   }
46
 
49
 
47
-  customChangeDateEmit(){}
48
-
49
   getQueryParams(){
50
   getQueryParams(){
50
     let queryParams = this.tabService.getQueryParams();
51
     let queryParams = this.tabService.getQueryParams();
51
     this.tabService.clearQueryParams();
52
     this.tabService.clearQueryParams();
52
     if(queryParams.dateRange){
53
     if(queryParams.dateRange){
53
       this.dateRange = queryParams.dateRange;
54
       this.dateRange = queryParams.dateRange;
55
+      this.customChangeDateComponent.reset(this.dateRange);
54
     }
56
     }
55
   }
57
   }
56
 
58
 
@@ -107,8 +109,8 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
107
     let postData:any = {
109
     let postData:any = {
108
       idx: this.pageIndex - 1,
110
       idx: this.pageIndex - 1,
109
       sum: this.pageSize,
111
       sum: this.pageSize,
110
-      startDate: this.dateRange[0] || undefined,
111
-      endDate: this.dateRange[1] || undefined,
112
+      startDate: this.customChangeDateComponent.startDate || undefined,
113
+      endDate: this.customChangeDateComponent.endDate || undefined,
112
       hosId: this.getHosId,
114
       hosId: this.getHosId,
113
       statisticsTypeId: this.statisticsTypeId || undefined,
115
       statisticsTypeId: this.statisticsTypeId || undefined,
114
       groupId: this.fieldConfig.fields.userId ? undefined : (this.fieldConfig.fields.groupId || undefined),
116
       groupId: this.fieldConfig.fields.userId ? undefined : (this.fieldConfig.fields.groupId || undefined),
@@ -149,18 +151,6 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
149
 
151
 
150
   // 日期选择
152
   // 日期选择
151
   dateRange: any = [format(startOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss'), format(endOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss')];
153
   dateRange: any = [format(startOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss'), format(endOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss')];
152
-  changeDate(result?): void {
153
-    result[0] = format(startOfDay(result[0]), 'yyyy-MM-dd HH:mm:ss');
154
-    result[1] = format(endOfDay(result[1]), 'yyyy-MM-dd HH:mm:ss');
155
-    this.dateRange = result;
156
-  }
157
-
158
-  onCalendarChangeDate(dateArr){
159
-    console.log(dateArr)
160
-    if(dateArr.length == 2){
161
-      this.dateRange = [format(startOfDay(dateArr[0]), 'yyyy-MM-dd HH:mm:ss'), format(endOfDay(dateArr[1]), 'yyyy-MM-dd HH:mm:ss')];
162
-    }
163
-  }
164
 
154
 
165
   // 导出
155
   // 导出
166
   excelExportLoading:any = false;
156
   excelExportLoading:any = false;
@@ -213,6 +203,7 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
213
     this.dateRange = [format(startOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss'), format(endOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss')]
203
     this.dateRange = [format(startOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss'), format(endOfMonth(addMonths(new Date(), -1)), 'yyyy-MM-dd HH:mm:ss')]
214
     this.statisticsTypeId = undefined;
204
     this.statisticsTypeId = undefined;
215
     this.fieldConfig.fields = {groupId: undefined, userId: undefined, taskTypeId: undefined, buildingId: undefined, deptId: undefined};
205
     this.fieldConfig.fields = {groupId: undefined, userId: undefined, taskTypeId: undefined, buildingId: undefined, deptId: undefined};
206
+    this.customChangeDateComponent.reset(this.dateRange);
216
     this.search();
207
     this.search();
217
   }
208
   }
218
 
209