统计

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

@@ -5,7 +5,7 @@
     </nz-radio-group>
   </div>
   <div class="searchDataItem">
-    <span class="label">建单时间</span>：
+    <span class="label">{{name}}</span>：
     <nz-range-picker [ngStyle]="{width: '260px'}" [nzAllowClear]="false" *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
       [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
     </nz-range-picker>

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

@@ -1,5 +1,4 @@
-import { Component, OnInit, Output, Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { differenceInCalendarDays, endOfMonth, endOfYear, startOfDay, format, endOfDay, startOfMonth, startOfYear } from "date-fns";
 import { DateService } from 'src/app/services/date.service';
 
@@ -9,8 +8,8 @@ import { DateService } from 'src/app/services/date.service';
   styleUrls: ['./custom-change-date.component.less']
 })
 export class CustomChangeDateComponent implements OnInit {
-  // @Output() customChangeDateEmit = new EventEmitter();
   @Input() isShowType: boolean = true;
+  @Input() name: string = '建单时间';
   constructor(
     private dateService: DateService,
   ) { }
@@ -69,29 +68,26 @@ export class CustomChangeDateComponent implements OnInit {
   yearRangeEnd: any; //发起时间 年 止
 
   ngOnInit() {
-    this.dateType = 'day';
-    this.defRange = 6;
-    this.changeDateRange(this.defRange);
+    this.resetByDate();
   }
 
   // 根据时间区间重置
-  reset(dateRange:any[]){
+  resetByDate(){
     this.dateType = 'day';
-    if(
-      this.dateService.getDateType(dateRange) == 1 ||
-      this.dateService.getDateType(dateRange) == 2 ||
-      this.dateService.getDateType(dateRange) == 3 ||
-      this.dateService.getDateType(dateRange) == 5 ||
-      this.dateService.getDateType(dateRange) == 6 ||
-      this.dateService.getDateType(dateRange) == 7
-    ){
-      this.defRange = this.dateService.getDateType(dateRange);
-    }
-    this.changeDateRange(this.defRange);
+    this.changeDateType(this.dateType, 6);
+  }
+
+  // 根据时间区间初始化
+  initByDate(dateRange:any[]){
+    setTimeout(() => {
+      this.dateType = 'day';
+      this.dateRange = dateRange;
+      this.changeDateType(this.dateType, null);
+    }, 0)
   }
 
   // 修改时间展示维度
-  changeDateType(res) {
+  changeDateType(res, defRange) {
     console.log(res, this.dateType);
     this.dateType = res;
     switch (res) {
@@ -122,8 +118,8 @@ export class CustomChangeDateComponent implements OnInit {
             id: 7,
           },
         ]; //时间默认区间
-        this.defRange = this.defRanges[0].id;
-        this.changeDateRange(this.defRanges[0].id);
+        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
+        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
         break;
       case "month":
         this.defRanges = [
@@ -140,8 +136,8 @@ export class CustomChangeDateComponent implements OnInit {
             id: 7,
           },
         ]; //时间默认区间
-        this.defRange = this.defRanges[0].id;
-        this.changeDateRange(this.defRanges[0].id);
+        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
+        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
         break;
       case "year":
         this.defRanges = [
@@ -154,8 +150,8 @@ export class CustomChangeDateComponent implements OnInit {
             id: 7,
           },
         ]; //时间默认区间
-        this.defRange = this.defRanges[0].id;
-        this.changeDateRange(this.defRanges[0].id);
+        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
+        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
         break;
     }
   }
@@ -335,6 +331,10 @@ export class CustomChangeDateComponent implements OnInit {
         this.changeYearStart(lastyearstartdate);
         this.changeYearEnd(lastyearenddate);
         break;
+      default:
+        // 回显initByDate
+        this.changeDate([new Date(this.dateRange[0]), new Date(this.dateRange[1])]);
+        break;
     }
     this.quick = false;
   }

src/app/views/new-statistics/distribution-inspection-statistics/distribution-synthesize-statistics/distribution-synthesize-statistics.component.html

@@ -1,170 +1,168 @@
-<div class="synthesize-box" *ngIf="!isLoading">
+<div class="synthesize-box">
 	<div class="searchDataWrap">
 		<div class="searchData">
-			<div class="searchDataItem">
-				<span class="label">选择日期</span>：
-				<nz-range-picker [(ngModel)]="dateRange" [nzAllowClear]="false" (ngModelChange)="changeDate($event)" (nzOnCalendarChange)="onCalendarChangeDate($event)">
-				</nz-range-picker>
-			</div>
+			<app-custom-change-date #customChangeDate [isShowType]="true" name="选择日期"></app-custom-change-date>
 		</div>
 		<div class="operation">
 			<button nz-button class="btn default" (click)="search()">搜索</button>
 			<button nz-button class="btn default ml8" (click)="reset()">重置</button>
 		</div>
 	</div>
-	<div class="top1-statistics">
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.totalCount || 0}}</div>
-				<div class="describe">工单总数</div>
-			</div>
-			<div class="special-box-right">
-				<div class="sign-describe">已完成: <span class="sign-num">{{workData.doneCount || 0}}</span></div>
-				<div class="sign-describe">待接单: <span class="sign-num">{{workData.waitCount || 0}}</span></div>
-				<div class="sign-describe">处理中: <span class="sign-num">{{workData.doingCount || 0}}</span></div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.workerCount || 0}}</div>
-				<div class="describe">总人数</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.totalGrade || 0}}</div>
-				<div class="describe">总积分</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.badCount || 0}}</div>
-				<div class="describe">差评单数</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.doneRate || 0}}%</div>
-				<div class="describe">按时完成率</div>
-			</div>
-		</div>
-	</div>
-<!--  <div class="top0-statistics">
-    <div>标本<span class="num">{{businessData.specimenCount || 0}}</span></div>
-    <div>病理<span class="num">{{businessData.pathologyCount || 0}}</span></div>
-    <div>陪检<span class="num">{{businessData.inspectCount || 0}}</span></div>
-    <div>药品<span class="num">{{businessData.drugsCount || 0}}</span></div>
-    <div>静配<span class="num">{{businessData.drugsJpCount || 0}}</span></div>
-    <div>中药<span class="num">{{businessData.drugsHerbalCount || 0}}</span></div>
-    <div>血制品<span class="num">{{businessData.bloodCount || 0}}</span></div>
-  </div> -->
-	<div class="top2-statistics">
-    <div class="statistics width-60 mar-right-8">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">业务分类top5</div>
-				<div class="more" *ngIf="showMore('businessClassifyStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/businessClassifyStatistics')">更多></div>
-			</div>
-			<div class="echarts-repairs">
-				<div echarts class="echarts" [options]='businessOptions'></div>
-			</div>
-		</div>
-		<div class="statistics width-40">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">申请来源</div>
-				<div class="more" *ngIf="showMore('sourceStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/sourceStatistics')">更多></div>
-			</div>
-			<div class="echarts-repairs">
-			  <div echarts class="echarts" [options]='applyOptions'></div>
-			</div>
-		</div>
-	</div>
-  <div class="top2-statistics">
-		<div class="statistics width-49 mar-right-8">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">科室Top5</div>
-				<div class="more" *ngIf="showMore('departmentQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/departmentQualityControlStatistics')">更多></div>
-			</div>
-			<div class="table">
-				<div class="td">
-					<div class="table-td-4">排名</div>
-					<div class="table-td-4">科室名称</div>
-					<div class="table-td-4">工单量</div>
-					<div class="table-td-4">好评率</div>
-				</div>
-				<div class="th" *ngFor="let item of deptTopData; let index = index;">
-          <div class="table-list-4">
-						<img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
-						<img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
-						<img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
-						<span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
-					</div>
-					<div class="table-list-4 ellipsis-oneline" title="{{item.dept}}">{{item.dept}}</div>
-					<div class="table-list-4">{{item.sum || 0}}</div>
-					<div class="table-list-4">{{item.goodRate || '0%'}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="statistics width-50">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">人员Top5</div>
-				<div class="more" *ngIf="showMore('userQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/userQualityControlStatistics')">更多></div>
-			</div>
-			<div class="table">
-				<div class="td">
-					<div class="table-td-4">排名</div>
-					<div class="table-td-4">人员名称</div>
-					<div class="table-td-4">工单量</div>
-					<div class="table-td-4">积分总数</div>
-				</div>
-				<div class="th" *ngFor="let item of userTopData; let index = index;">
-					<div class="table-list-4">
-						<img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
-						<img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
-						<img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
-						<span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
-					</div>
-					<div class="table-list-4 ellipsis-oneline" title="{{item.userName}}({{item.userAccount}})">{{item.userName}}<ng-container *ngIf="item.userAccount">({{item.userAccount}})</ng-container></div>
-					<div class="table-list-4">{{item.sum || 0}}</div>
-					<div class="table-list-4">{{item.totalGrade || 0}}</div>
-				</div>
-			</div>
-		</div>
-	</div>
-  <div class="top2-statistics">
-    <div class="statistics width-100">
-      <div class="statistics-box">
-        <div class="sign-green"></div>
-        <div class="statistics-title">日趋势图</div>
-        <div class="statistics-select">
-					<div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 'day'}" (click)="selectCheck('day')">日</div>
-					<div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 'hour'}" (click)="selectCheck('hour')">时</div>
-				</div>
-        <div class="searchDataItem ml8">
-          <span class="label">统计分类</span>：
-          <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzAllowClear nzPlaceHolder="请选择统计分类" [(ngModel)]="statisticsTypeId" (ngModelChange)="changeStatisticsType($event)">
-            <ng-container *ngFor="let option of statisticsTypeList">
-              <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
-            </ng-container>
-            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
-              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
-            </nz-option>
-          </nz-select>
-        </div>
-        <div class="more" *ngIf="showMore('dateQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/dateQualityControlStatistics')">更多></div>
+  <ng-container *ngIf="!isLoading">
+    <div class="top1-statistics">
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.totalCount || 0}}</div>
+          <div class="describe">工单总数</div>
+        </div>
+        <div class="special-box-right">
+          <div class="sign-describe">已完成: <span class="sign-num">{{workData.doneCount || 0}}</span></div>
+          <div class="sign-describe">待接单: <span class="sign-num">{{workData.waitCount || 0}}</span></div>
+          <div class="sign-describe">处理中: <span class="sign-num">{{workData.doingCount || 0}}</span></div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.workerCount || 0}}</div>
+          <div class="describe">总人数</div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.totalGrade || 0}}</div>
+          <div class="describe">总积分</div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.badCount || 0}}</div>
+          <div class="describe">差评单数</div>
+        </div>
+        <div class="border"></div>
       </div>
-      <div class="echarts-repairs">
-        <div echarts class="echarts" [options]='trendOptions'></div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.doneRate || 0}}%</div>
+          <div class="describe">按时完成率</div>
+        </div>
+      </div>
+    </div>
+    <!--  <div class="top0-statistics">
+      <div>标本<span class="num">{{businessData.specimenCount || 0}}</span></div>
+      <div>病理<span class="num">{{businessData.pathologyCount || 0}}</span></div>
+      <div>陪检<span class="num">{{businessData.inspectCount || 0}}</span></div>
+      <div>药品<span class="num">{{businessData.drugsCount || 0}}</span></div>
+      <div>静配<span class="num">{{businessData.drugsJpCount || 0}}</span></div>
+      <div>中药<span class="num">{{businessData.drugsHerbalCount || 0}}</span></div>
+      <div>血制品<span class="num">{{businessData.bloodCount || 0}}</span></div>
+    </div> -->
+    <div class="top2-statistics">
+      <div class="statistics width-60 mar-right-8">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">业务分类top5</div>
+          <div class="more" *ngIf="showMore('businessClassifyStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/businessClassifyStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='businessOptions'></div>
+        </div>
+      </div>
+      <div class="statistics width-40">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">申请来源</div>
+          <div class="more" *ngIf="showMore('sourceStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/sourceStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='applyOptions'></div>
+        </div>
+      </div>
+    </div>
+    <div class="top2-statistics">
+      <div class="statistics width-49 mar-right-8">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">科室Top5</div>
+          <div class="more" *ngIf="showMore('departmentQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/departmentQualityControlStatistics')">更多></div>
+        </div>
+        <div class="table">
+          <div class="td">
+            <div class="table-td-4">排名</div>
+            <div class="table-td-4">科室名称</div>
+            <div class="table-td-4">工单量</div>
+            <div class="table-td-4">好评率</div>
+          </div>
+          <div class="th" *ngFor="let item of deptTopData; let index = index;">
+            <div class="table-list-4">
+              <img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
+              <img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
+              <img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
+              <span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
+            </div>
+            <div class="table-list-4 ellipsis-oneline" title="{{item.dept}}">{{item.dept}}</div>
+            <div class="table-list-4">{{item.sum || 0}}</div>
+            <div class="table-list-4">{{item.goodRate || '0%'}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="statistics width-50">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">人员Top5</div>
+          <div class="more" *ngIf="showMore('userQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/userQualityControlStatistics')">更多></div>
+        </div>
+        <div class="table">
+          <div class="td">
+            <div class="table-td-4">排名</div>
+            <div class="table-td-4">人员名称</div>
+            <div class="table-td-4">工单量</div>
+            <div class="table-td-4">积分总数</div>
+          </div>
+          <div class="th" *ngFor="let item of userTopData; let index = index;">
+            <div class="table-list-4">
+              <img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
+              <img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
+              <img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
+              <span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
+            </div>
+            <div class="table-list-4 ellipsis-oneline" title="{{item.userName}}({{item.userAccount}})">{{item.userName}}<ng-container *ngIf="item.userAccount">({{item.userAccount}})</ng-container></div>
+            <div class="table-list-4">{{item.sum || 0}}</div>
+            <div class="table-list-4">{{item.totalGrade || 0}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="top2-statistics">
+      <div class="statistics width-100">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">日趋势图</div>
+          <div class="statistics-select">
+            <div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 'day'}" (click)="selectCheck('day')">日</div>
+            <div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 'hour'}" (click)="selectCheck('hour')">时</div>
+          </div>
+          <div class="searchDataItem ml8">
+            <span class="label">统计分类</span>：
+            <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzAllowClear nzPlaceHolder="请选择统计分类" [(ngModel)]="statisticsTypeId" (ngModelChange)="changeStatisticsType($event)">
+              <ng-container *ngFor="let option of statisticsTypeList">
+                <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
+              </ng-container>
+              <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
+                <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
+              </nz-option>
+            </nz-select>
+          </div>
+          <div class="more" *ngIf="showMore('dateQualityControlStatistics')" (click)="toPath('/newStatistics/distributionInspectionStatistics/dateQualityControlStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='trendOptions'></div>
+        </div>
       </div>
     </div>
-  </div>
+  </ng-container>
 </div>
 <div class="mask-style" *ngIf="isLoading">
 	<nz-spin nzSimple class="spin-style"></nz-spin>

src/app/views/new-statistics/distribution-inspection-statistics/distribution-synthesize-statistics/distribution-synthesize-statistics.component.less

@@ -23,6 +23,9 @@
 		      .label{
 		        font-size: 16px;
 		      }
+          .selectItem{
+            width: 160px;
+          }
 		    }
 		  }
 		}
@@ -144,7 +147,7 @@
 					}
           .searchDataItem{
             .selectItem{
-              width: 224px;
+              width: 160px;
             }
           }
 					.more{

src/app/views/new-statistics/distribution-inspection-statistics/distribution-synthesize-statistics/distribution-synthesize-statistics.component.ts

@@ -1,14 +1,15 @@
 import { Router } from '@angular/router';
-import { format, addMonths, startOfMonth, endOfMonth } from 'date-fns';
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core";
 import { MainService } from 'src/app/services/main.service';
 import { TabService } from '../../services/tab.service';
+import { CustomChangeDateComponent } from '../../components/custom-change-date/custom-change-date.component';
 @Component({
   selector: "app-distribution-synthesize-statistics",
   templateUrl: "./distribution-synthesize-statistics.component.html",
   styleUrls: ["./distribution-synthesize-statistics.component.less"],
 })
-export class DistributionSynthesizeStatisticsComponent implements OnInit {
+export class DistributionSynthesizeStatisticsComponent implements OnInit, AfterViewInit {
+  @ViewChild('customChangeDate', { static: false }) customChangeDateComponent!: CustomChangeDateComponent;
   constructor(
     private mainService: MainService,
     private tabService: TabService,
@@ -60,8 +61,12 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 			name:'王'
 		}
 	] //人员top5
-  ngOnInit() {
-    this.search();
+  ngOnInit() {}
+
+  ngAfterViewInit(){
+    setTimeout(() => {
+      this.search();
+    }, 0)
   }
 
 	// 维修处理类型切换
@@ -73,8 +78,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	// 申请来源
 	applyChart() {
 		let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'sourceCount',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -148,8 +153,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	// 日趋势图
 	trendChart(){
 		let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'dateTimeTrend',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -234,8 +239,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
   // 业务分类
 	businessChart(){
     let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'statisticsDateTypeTop5',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -316,8 +321,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	// 科室Top5
 	getDeptTopData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'deptTop5',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -332,8 +337,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	// 人员Top5
 	getUserTopData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'userTop5',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -350,7 +355,7 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	toPath(path){
     let flag = this.tabService.tabs.some(v => v.path === path);
     flag && this.tabService.deleteRouteSnapshot(path);
-    this.tabService.setQueryParams('dateRange', this.dateRange);
+    this.tabService.setQueryParams('dateRange', [this.customChangeDateComponent.startDate, this.customChangeDateComponent.endDate]);
     this.router.navigate([path], { replaceUrl: true });
 	}
 
@@ -418,8 +423,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
     let postData:any = {
       idx: this.pageIndex - 1,
       sum: this.pageSize,
-      startDate: this.dateRange[0],
-      endDate: this.dateRange[1],
+      startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
       hosId: this.hosId,
       dutyId: this.dutyId,
       parentDutyId: this.parentDutyId,
@@ -437,8 +442,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 	// 头部工单数据
 	getWorkData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'headerCount',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -453,8 +458,8 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
   // 头部业务数据
 	getBusinessData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'businessCount',
 	    hosId: this.getHosId,
 	    businessType: 'hsms',
@@ -468,8 +473,9 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
 
 	// 重置
 	reset(){
-		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')];
+		this.dateRange = [];
 		this.activeIndex = 'day';
+    this.customChangeDateComponent.resetByDate();
 		this.search();
 	}
 
@@ -479,25 +485,7 @@ export class DistributionSynthesizeStatisticsComponent implements OnInit {
   }
 
   // 日期选择 日
-  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')]; //发起时间区间 天
-  changeDate(result?): void {
-    result[0] = format(result[0], 'yyyy-MM-dd') + ' ' + '00:00:00';
-    result[1] = format(result[1], 'yyyy-MM-dd') + ' ' + '23:59:59';
-    this.dateRange = result;
-    // this.search();
-		console.log(this.dateRange);
-  }
-
-  onCalendarChangeDate(dateArr){
-    // console.log(dateArr)
-    // if(dateArr.length == 2){
-    //   let dateStart = new Date(dateArr[0]);
-    //   let dateEnd = new Date(dateArr[1]);
-    //   dateStart.setHours(0,0,0);
-    //   dateEnd.setHours(23,59,59);
-    //   this.dateRange = [dateStart,dateEnd];
-    // }
-  }
+  dateRange: any = []; //发起时间区间 天
 
   // 获取统计分类列表
   statisticsTypeList:any[] = [];

src/app/views/new-statistics/distribution-inspection-statistics/distribution-synthesize-statistics/distribution-synthesize-statistics.module.ts

@@ -6,6 +6,7 @@ import { DistributionSynthesizeStatisticsRoutingModule } from './distribution-sy
 import { ShareModule } from 'src/app/share/share.module';
 import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { NgxEchartsModule } from 'ngx-echarts';
+import { CustomChangeDateModule } from '../../components/custom-change-date/custom-change-date.module';
 
 
 @NgModule({
@@ -17,7 +18,8 @@ import { NgxEchartsModule } from 'ngx-echarts';
     DistributionSynthesizeStatisticsRoutingModule,
     ShareModule,
     VirtualScrollerModule,
-		NgxEchartsModule
+		NgxEchartsModule,
+    CustomChangeDateModule,
   ]
 })
 export class DistributionSynthesizeStatisticsModule { }

src/app/views/new-statistics/maintenance-statistics/synthesize-statistics/synthesize-statistics.component.html

@@ -1,172 +1,170 @@
-<div class="synthesize-box" *ngIf="!isLoading">
+<div class="synthesize-box">
 	<div class="searchDataWrap">
 		<div class="searchData">
-			<div class="searchDataItem">
-				<span class="label">选择日期</span>：
-				<nz-range-picker [(ngModel)]="dateRange" [nzAllowClear]="false" (ngModelChange)="changeDate($event)" (nzOnCalendarChange)="onCalendarChangeDate($event)">
-				</nz-range-picker>
-			</div>
+      <app-custom-change-date #customChangeDate [isShowType]="true" name="选择日期"></app-custom-change-date>
 		</div>
 		<div class="operation">
 			<button nz-button class="btn default" (click)="search()">搜索</button>
 			<button nz-button class="btn default ml8" (click)="reset()">重置</button>
 		</div>
 	</div>
-	<div class="top1-statistics">
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.gd_total || 0}}</div>
-				<div class="describe">工单总数</div>
-			</div>
-			<div class="special-box-right">
-				<div class="sign-describe">已完成: <span class="sign-num">{{workData.gd_close || 0}}</span></div>
-				<div class="sign-describe">待接单: <span class="sign-num">{{workData.gd_todo || 0}}</span></div>
-				<div class="sign-describe">处理中: <span class="sign-num">{{workData.gd_doing || 0}}</span></div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.sum_price || 0}}</div>
-				<div class="describe">总费用 (元)</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.gd_postpone || 0}}</div>
-				<div class="describe">挂起单数</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.gd_overtime || 0}}</div>
-				<div class="describe">超时单数</div>
-			</div>
-			<div class="border"></div>
-		</div>
-		<div class="top-list">
-			<div class="special-box">
-				<div class="num">{{workData.gd_degree}}</div>
-				<div class="describe">差评单数</div>
-			</div>
-		</div>
-	</div>
-	<div class="top2-statistics">
-		<div class="statistics width-60 mar-right-8">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">维修处理Top5</div>
-				<div class="statistics-select">
-					<div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 0}" (click)="selectCheck(0)">维修人员</div>
-					<div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 1}" (click)="selectCheck(1)">维修组</div>
-				</div>
-				<div class="more" *ngIf="showMore(activeIndex == 0 ? 'userStatistics' : 'groupStatistics')" (click)="toPath(activeIndex == 0 ? '/newStatistics/maintenanceStatistics/userStatistics' : '/newStatistics/maintenanceStatistics/groupStatistics')">更多></div>
-			</div>
-			<div class="table">
-				<div class="td">
-					<div class="table-td">排名</div>
-					<div class="table-td" *ngIf="activeIndex==0">人员姓名</div>
-					<div class="table-td" *ngIf="activeIndex==1">维修组</div>
-					<div class="table-td">工单量</div>
-					<div class="table-td">平均接单时长</div>
-					<div class="table-td">平均解决时长</div>
-					<div class="table-td">超时单</div>
-				</div>
-				<div class="th" *ngFor="let item of maintainData; let index = index;">
-					<div class="table-list">
-						<img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
-						<img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
-						<img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
-						<span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
-					</div>
-					<div class="table-list">{{item.name}}</div>
-					<div class="table-list">{{item.count || 0}}</div>
-					<div class="table-list">{{item.avg_response}}分</div>
-					<div class="table-list">{{item.avg_handle }}分</div>
-					<div class="table-list">{{item.overtime || 0}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="statistics width-40">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">故障来源</div>
-				<div class="more" *ngIf="showMore('categorySourceStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/categorySourceStatistics')">更多></div>
-			</div>
-			<div class="echarts-repairs">
-			  <div echarts class="echarts" [options]='repairsOptions'></div>
-			</div>
-		</div>
-	</div>
-	<div class="top2-statistics">
-		<div class="statistics width-49 mar-right-8">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">一级故障现象Top5</div>
-				<div class="more" *ngIf="showMore('categoryOneStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/categoryOneStatistics')">更多></div>
-			</div>
-			<div class="echarts-repairs">
-				<div echarts class="echarts" [options]='malfunctionOptions'></div>
-			</div>
-		</div>
-		<div class="statistics width-50">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">楼栋报修Top5</div>
-				<div class="more" *ngIf="showMore('buildingStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/buildingStatistics')">更多></div>
-			</div>
-			<div class="echarts-repairs">
-				<div echarts class="echarts" [options]='buildingOptions'></div>
-			</div>
-		</div>
-	</div>
-	<div class="top2-statistics">
-		<div class="statistics width-49 mar-right-8">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">科室费用Top5</div>
-				<div class="more" *ngIf="showMore('departmentIncidentStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/departmentIncidentStatistics')">更多></div>
-			</div>
-			<div class="table">
-				<div class="td">
-					<div class="table-td-4">排名</div>
-					<div class="table-td-4">科室名称</div>
-					<div class="table-td-4">工单量</div>
-					<div class="table-td-4">总费用(元)</div>
-				</div>
-				<div class="th" *ngFor="let item of deptCostData; let index = index;">
-					<div class="table-list-4">{{index+1}}</div>
-					<div class="table-list-4 ellipsis-oneline" title="{{item.dept}}">{{item.dept}}</div>
-					<div class="table-list-4">{{item.sum || 0}}</div>
-					<div class="table-list-4">{{item.sum_price || 0}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="statistics width-50">
-			<div class="statistics-box">
-				<div class="sign-green"></div>
-				<div class="statistics-title">耗材Top5</div>
-				<div class="more" *ngIf="showMore('consumableStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/consumableStatistics')">更多></div>
-			</div>
-			<div class="table">
-				<div class="td">
-					<div class="table-td-4">排名</div>
-					<div class="table-td-4">耗材名称(耗材编号)</div>
-					<div class="table-td-4">使用数量</div>
-					<div class="table-td-4">总费用(元)</div>
-				</div>
-				<div class="th" *ngFor="let item of consumableData; let index = index;">
-					<div class="table-list-4">{{index+1}}</div>
-					<div class="table-list-4 ellipsis-oneline" title="{{item.name}}({{item.spd_code}})">{{item.name}}<ng-container *ngIf="item.spd_code">({{item.spd_code}})</ng-container></div>
-					<div class="table-list-4">{{item.sum || 0}}</div>
-					<div class="table-list-4">{{item.sum_price || 0}}</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <ng-container *ngIf="!isLoading">
+    <div class="top1-statistics">
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.gd_total || 0}}</div>
+          <div class="describe">工单总数</div>
+        </div>
+        <div class="special-box-right">
+          <div class="sign-describe">已完成: <span class="sign-num">{{workData.gd_close || 0}}</span></div>
+          <div class="sign-describe">待接单: <span class="sign-num">{{workData.gd_todo || 0}}</span></div>
+          <div class="sign-describe">处理中: <span class="sign-num">{{workData.gd_doing || 0}}</span></div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.sum_price || 0}}</div>
+          <div class="describe">总费用 (元)</div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.gd_postpone || 0}}</div>
+          <div class="describe">挂起单数</div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.gd_overtime || 0}}</div>
+          <div class="describe">超时单数</div>
+        </div>
+        <div class="border"></div>
+      </div>
+      <div class="top-list">
+        <div class="special-box">
+          <div class="num">{{workData.gd_degree}}</div>
+          <div class="describe">差评单数</div>
+        </div>
+      </div>
+    </div>
+    <div class="top2-statistics">
+      <div class="statistics width-60 mar-right-8">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">维修处理Top5</div>
+          <div class="statistics-select">
+            <div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 0}" (click)="selectCheck(0)">维修人员</div>
+            <div class="statistics-select-list" [ngClass]="{'activeClass': activeIndex == 1}" (click)="selectCheck(1)">维修组</div>
+          </div>
+          <div class="more" *ngIf="showMore(activeIndex == 0 ? 'userStatistics' : 'groupStatistics')" (click)="toPath(activeIndex == 0 ? '/newStatistics/maintenanceStatistics/userStatistics' : '/newStatistics/maintenanceStatistics/groupStatistics')">更多></div>
+        </div>
+        <div class="table">
+          <div class="td">
+            <div class="table-td">排名</div>
+            <div class="table-td" *ngIf="activeIndex==0">人员姓名</div>
+            <div class="table-td" *ngIf="activeIndex==1">维修组</div>
+            <div class="table-td">工单量</div>
+            <div class="table-td">平均接单时长</div>
+            <div class="table-td">平均解决时长</div>
+            <div class="table-td">超时单</div>
+          </div>
+          <div class="th" *ngFor="let item of maintainData; let index = index;">
+            <div class="table-list">
+              <img src="../../assets/images/top1.png" alt="" class="img" *ngIf="index==0">
+              <img src="../../assets/images/top2.png" alt="" class="img" *ngIf="index==1">
+              <img src="../../assets/images/top3.png" alt="" class="img" *ngIf="index==2">
+              <span *ngIf="index !=0 && index !=1 && index !=2">{{index+1}}</span>
+            </div>
+            <div class="table-list">{{item.name}}</div>
+            <div class="table-list">{{item.count || 0}}</div>
+            <div class="table-list">{{item.avg_response}}分</div>
+            <div class="table-list">{{item.avg_handle }}分</div>
+            <div class="table-list">{{item.overtime || 0}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="statistics width-40">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">故障来源</div>
+          <div class="more" *ngIf="showMore('categorySourceStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/categorySourceStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='repairsOptions'></div>
+        </div>
+      </div>
+    </div>
+    <div class="top2-statistics">
+      <div class="statistics width-49 mar-right-8">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">一级故障现象Top5</div>
+          <div class="more" *ngIf="showMore('categoryOneStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/categoryOneStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='malfunctionOptions'></div>
+        </div>
+      </div>
+      <div class="statistics width-50">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">楼栋报修Top5</div>
+          <div class="more" *ngIf="showMore('buildingStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/buildingStatistics')">更多></div>
+        </div>
+        <div class="echarts-repairs">
+          <div echarts class="echarts" [options]='buildingOptions'></div>
+        </div>
+      </div>
+    </div>
+    <div class="top2-statistics">
+      <div class="statistics width-49 mar-right-8">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">科室费用Top5</div>
+          <div class="more" *ngIf="showMore('departmentIncidentStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/departmentIncidentStatistics')">更多></div>
+        </div>
+        <div class="table">
+          <div class="td">
+            <div class="table-td-4">排名</div>
+            <div class="table-td-4">科室名称</div>
+            <div class="table-td-4">工单量</div>
+            <div class="table-td-4">总费用(元)</div>
+          </div>
+          <div class="th" *ngFor="let item of deptCostData; let index = index;">
+            <div class="table-list-4">{{index+1}}</div>
+            <div class="table-list-4 ellipsis-oneline" title="{{item.dept}}">{{item.dept}}</div>
+            <div class="table-list-4">{{item.sum || 0}}</div>
+            <div class="table-list-4">{{item.sum_price || 0}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="statistics width-50">
+        <div class="statistics-box">
+          <div class="sign-green"></div>
+          <div class="statistics-title">耗材Top5</div>
+          <div class="more" *ngIf="showMore('consumableStatistics')" (click)="toPath('/newStatistics/maintenanceStatistics/consumableStatistics')">更多></div>
+        </div>
+        <div class="table">
+          <div class="td">
+            <div class="table-td-4">排名</div>
+            <div class="table-td-4">耗材名称(耗材编号)</div>
+            <div class="table-td-4">使用数量</div>
+            <div class="table-td-4">总费用(元)</div>
+          </div>
+          <div class="th" *ngFor="let item of consumableData; let index = index;">
+            <div class="table-list-4">{{index+1}}</div>
+            <div class="table-list-4 ellipsis-oneline" title="{{item.name}}({{item.spd_code}})">{{item.name}}<ng-container *ngIf="item.spd_code">({{item.spd_code}})</ng-container></div>
+            <div class="table-list-4">{{item.sum || 0}}</div>
+            <div class="table-list-4">{{item.sum_price || 0}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
 </div>
 <div class="mask-style" *ngIf="isLoading">
 	<nz-spin nzSimple class="spin-style"></nz-spin>
-</div>
+</div>

src/app/views/new-statistics/maintenance-statistics/synthesize-statistics/synthesize-statistics.component.less

@@ -23,6 +23,9 @@
 		      .label{
 		        font-size: 16px;
 		      }
+          .selectItem{
+            width: 160px;
+          }
 		    }
 		  }
 		}
@@ -224,4 +227,4 @@
 }
 .spin-style{
 	z-index:9999;
-}
+}

src/app/views/new-statistics/maintenance-statistics/synthesize-statistics/synthesize-statistics.component.ts

@@ -1,14 +1,15 @@
 import { Router } from '@angular/router';
-import { format, addMonths, startOfMonth, endOfMonth } from 'date-fns';
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core";
 import { MainService } from 'src/app/services/main.service';
 import { TabService } from '../../services/tab.service';
+import { CustomChangeDateComponent } from '../../components/custom-change-date/custom-change-date.component';
 @Component({
   selector: "app-synthesize-statistics",
   templateUrl: "./synthesize-statistics.component.html",
   styleUrls: ["./synthesize-statistics.component.less"],
 })
-export class SynthesizeStatisticsComponent implements OnInit {
+export class SynthesizeStatisticsComponent implements OnInit, AfterViewInit {
+  @ViewChild('customChangeDate', { static: false }) customChangeDateComponent!: CustomChangeDateComponent;
   constructor(
     private mainService: MainService,
     private tabService: TabService,
@@ -60,8 +61,13 @@ export class SynthesizeStatisticsComponent implements OnInit {
 			name:'王'
 		}
 	] //报修耗材
-  ngOnInit() {
-    this.search();
+
+  ngOnInit() {}
+
+  ngAfterViewInit(){
+    setTimeout(() => {
+      this.search();
+    }, 0)
   }
 
 	// 维修处理类型切换
@@ -73,8 +79,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 故障来源
 	repairsChart() {
 		let postData:any = {
-		  startDate: this.dateRange[0],
-		  endDate: this.dateRange[1],
+		  startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'sourceTop5',
 		  hosId: this.hosId,
 		  dutyId: this.dutyId,
@@ -149,8 +155,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 一级故障
 	malfunctionChart(){
 		let postData:any = {
-		  startDate: this.dateRange[0],
-		  endDate: this.dateRange[1],
+		  startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'firstCategoryTop5',
 		  hosId: this.hosId,
 		  dutyId: this.dutyId,
@@ -227,8 +233,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 楼栋报修
 	buildingChart(){
 		let postData:any = {
-		  startDate: this.dateRange[0],
-		  endDate: this.dateRange[1],
+		  startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'buildingTop5',
 		  hosId: this.hosId,
 		  dutyId: this.dutyId,
@@ -305,8 +311,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 科室费用
 	getDeptCostData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'deptTop5',
 	    hosId: this.hosId,
 	    dutyId: this.dutyId,
@@ -322,8 +328,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 耗材
 	getConsumableData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'consumableTop5',
 	    hosId: this.hosId,
 	    dutyId: this.dutyId,
@@ -341,7 +347,7 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	toPath(path){
     let flag = this.tabService.tabs.some(v => v.path === path);
     flag && this.tabService.deleteRouteSnapshot(path);
-    this.tabService.setQueryParams('dateRange', this.dateRange);
+    this.tabService.setQueryParams('dateRange', [this.customChangeDateComponent.startDate, this.customChangeDateComponent.endDate]);
     this.router.navigate([path], { replaceUrl: true });
 	}
 
@@ -404,8 +410,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
     let postData:any = {
       idx: this.pageIndex - 1,
       sum: this.pageSize,
-      startDate: this.dateRange[0],
-      endDate: this.dateRange[1],
+      startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
       hosId: this.hosId,
       dutyId: this.dutyId,
       parentDutyId: this.parentDutyId,
@@ -423,8 +429,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 头部工单数据
 	getWorkData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'headerCount',
 	    hosId: this.hosId,
 	    dutyId: this.dutyId,
@@ -440,8 +446,8 @@ export class SynthesizeStatisticsComponent implements OnInit {
 	// 维修处理
 	getMaintainData() {
 	  let postData:any = {
-	    startDate: this.dateRange[0],
-	    endDate: this.dateRange[1],
+	    startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
 			type: 'userHandleTop5',
 			groupType: this.activeIndex==0?'user':'group',
 	    hosId: this.hosId,
@@ -457,8 +463,9 @@ export class SynthesizeStatisticsComponent implements OnInit {
 
 	// 重置
 	reset(){
-		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')];
+		this.dateRange = [];
 		this.activeIndex = 0;
+    this.customChangeDateComponent.resetByDate();
 		this.search();
 	}
 
@@ -468,23 +475,5 @@ export class SynthesizeStatisticsComponent implements OnInit {
   }
 
   // 日期选择 日
-  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')]; //发起时间区间 天
-  changeDate(result?): void {
-    result[0] = format(result[0], 'yyyy-MM-dd') + ' ' + '00:00:00';
-    result[1] = format(result[1], 'yyyy-MM-dd') + ' ' + '23:59:59';
-    this.dateRange = result;
-    // this.search();
-		console.log(this.dateRange);
-  }
-
-  onCalendarChangeDate(dateArr){
-    // console.log(dateArr)
-    // if(dateArr.length == 2){
-    //   let dateStart = new Date(dateArr[0]);
-    //   let dateEnd = new Date(dateArr[1]);
-    //   dateStart.setHours(0,0,0);
-    //   dateEnd.setHours(23,59,59);
-    //   this.dateRange = [dateStart,dateEnd];
-    // }
-  }
+  dateRange: any = []; //发起时间区间 天
 }

src/app/views/new-statistics/maintenance-statistics/synthesize-statistics/synthesize-statistics.module.ts

@@ -6,6 +6,7 @@ import { SynthesizeStatisticsRoutingModule } from './synthesize-statistics-routi
 import { ShareModule } from 'src/app/share/share.module';
 import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { NgxEchartsModule } from 'ngx-echarts';
+import { CustomChangeDateModule } from '../../components/custom-change-date/custom-change-date.module';
 
 
 @NgModule({
@@ -17,7 +18,8 @@ import { NgxEchartsModule } from 'ngx-echarts';
     SynthesizeStatisticsRoutingModule,
     ShareModule,
     VirtualScrollerModule,
-		NgxEchartsModule
+		NgxEchartsModule,
+    CustomChangeDateModule,
   ]
 })
 export class SynthesizeStatisticsModule { }

src/app/views/new-statistics/maintenance-statistics/user-statistics/user-statistics.component.html

@@ -1,10 +1,6 @@
 <div class="searchDataWrap">
   <div class="searchData">
-    <div class="searchDataItem">
-      <span class="label">建单时间</span>：
-      <nz-range-picker [(ngModel)]="dateRange" [nzAllowClear]="false" (ngModelChange)="changeDate($event)" (nzOnCalendarChange)="onCalendarChangeDate($event)">
-      </nz-range-picker>
-    </div>
+    <app-custom-change-date #customChangeDate [isShowType]="false"></app-custom-change-date>
     <div class="searchDataItem">
       <span class="label">维修分组</span>：
       <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeGroupInp($event)" nzAllowClear nzPlaceHolder="请选择维修分组" [(ngModel)]="groupId" (nzOpenChange)="openChangeGroup($event)">

src/app/views/new-statistics/maintenance-statistics/user-statistics/user-statistics.component.less

@@ -27,7 +27,7 @@
           font-size: 16px;
         }
         .selectItem{
-          width: 224px;
+          width: 160px;
         }
       }
     }

src/app/views/new-statistics/maintenance-statistics/user-statistics/user-statistics.component.ts

@@ -1,17 +1,18 @@
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { NzMessageService } from 'ng-zorro-antd/message';
-import { format, addMonths, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns';
-import { Component, OnInit, HostListener, AfterViewInit } from "@angular/core";
+import { Component, OnInit, HostListener, AfterViewInit, ViewChild } from "@angular/core";
 import { MainService } from 'src/app/services/main.service';
 import { ActivatedRoute } from '@angular/router';
 import { TabService } from '../../services/tab.service';
+import { CustomChangeDateComponent } from '../../components/custom-change-date/custom-change-date.component';
 @Component({
   selector: "app-user-statistics",
   templateUrl: "./user-statistics.component.html",
   styleUrls: ["./user-statistics.component.less"],
 })
 export class UserStatisticsComponent implements OnInit, AfterViewInit {
+  @ViewChild('customChangeDate', { static: false }) customChangeDateComponent!: CustomChangeDateComponent;
   constructor(
     private mainService: MainService,
     private message: NzMessageService,
@@ -34,12 +35,14 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
       let fun = v[0];
       fun.call(this, v[1]);
     });
-    this.initSessionData();
-    this.getQueryParams();
-    this.search();
   }
 
   ngAfterViewInit(){
+    this.initSessionData();
+    this.getQueryParams();
+    setTimeout(() => {
+      this.search();
+    }, 0)
     this.onResize();
   }
 
@@ -57,6 +60,7 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
     this.tabService.clearQueryParams();
     if(queryParams.dateRange){
       this.dateRange = queryParams.dateRange;
+      this.customChangeDateComponent.initByDate(this.dateRange);
     }
   }
 
@@ -113,8 +117,8 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
     let postData:any = {
       idx: this.pageIndex - 1,
       sum: this.pageSize,
-      startDate: this.dateRange[0] || undefined,
-      endDate: this.dateRange[1] || undefined,
+      startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
       hosId: this.hosId || undefined,
       dutyId: this.dutyId || undefined,
       parentDutyId: this.parentDutyId || undefined,
@@ -155,19 +159,7 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
   }
 
   // 日期选择
-  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')];
-  changeDate(result?): void {
-    result[0] = format(startOfDay(result[0]), 'yyyy-MM-dd HH:mm:ss');
-    result[1] = format(endOfDay(result[1]), 'yyyy-MM-dd HH:mm:ss');
-    this.dateRange = result;
-  }
-
-  onCalendarChangeDate(dateArr){
-    console.log(dateArr)
-    if(dateArr.length == 2){
-      this.dateRange = [format(startOfDay(dateArr[0]), 'yyyy-MM-dd HH:mm:ss'), format(endOfDay(dateArr[1]), 'yyyy-MM-dd HH:mm:ss')];
-    }
-  }
+  dateRange: any = [];
 
   // 导出
   excelExportLoading:any = false;
@@ -176,8 +168,8 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
       nzDuration: 0,
     }).messageId;
     let postData:any = {
-      startDate: this.dateRange[0] || undefined,
-      endDate: this.dateRange[1] || undefined,
+      startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
       hosId: this.hosId || undefined,
       dutyId: this.dutyId || undefined,
       parentDutyId: this.parentDutyId || undefined,
@@ -218,9 +210,10 @@ export class UserStatisticsComponent implements OnInit, AfterViewInit {
     this.sortCurrentKey = "";
 		this.sortCurrentValue = "";
 		this.sortCurrent = {};
-    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')]
+    this.dateRange = []
     this.groupId = undefined;
     this.fieldConfig.fields = {buildingId: undefined, floorId: undefined, categoryId: undefined};
+    this.customChangeDateComponent.resetByDate();
     this.search();
   }
 

src/app/views/new-statistics/maintenance-statistics/user-statistics/user-statistics.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { UserStatisticsRoutingModule } from './user-statistics-routing.module';
 import { ShareModule } from 'src/app/share/share.module';
 import { SearchMoreModule } from '../../components/search-more/search-more.module';
+import { CustomChangeDateModule } from '../../components/custom-change-date/custom-change-date.module';
 
 
 @NgModule({
@@ -16,6 +17,7 @@ import { SearchMoreModule } from '../../components/search-more/search-more.modul
     UserStatisticsRoutingModule,
     ShareModule,
     SearchMoreModule,
+    CustomChangeDateModule,
   ]
 })
 export class UserStatisticsModule { }

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

@@ -1,6 +1,5 @@
 import { TabService } from './../../services/tab.service';
 import { NzMessageService } from 'ng-zorro-antd/message';
-import { format, addMonths, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns';
 import { Component, OnInit, HostListener, AfterViewInit, ViewChild } from "@angular/core";
 import { MainService } from 'src/app/services/main.service';
 import { ActivatedRoute } from '@angular/router';
@@ -52,7 +51,7 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
     this.tabService.clearQueryParams();
     if(queryParams.dateRange){
       this.dateRange = queryParams.dateRange;
-      this.customChangeDateComponent.reset(this.dateRange);
+      this.customChangeDateComponent.initByDate(this.dateRange);
     }
   }
 
@@ -150,7 +149,7 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
   }
 
   // 日期选择
-  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')];
+  dateRange: any = [];
 
   // 导出
   excelExportLoading:any = false;
@@ -159,8 +158,8 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
       nzDuration: 0,
     }).messageId;
     let postData:any = {
-      startDate: this.dateRange[0] || undefined,
-      endDate: this.dateRange[1] || undefined,
+      startDate: this.customChangeDateComponent.startDate || undefined,
+      endDate: this.customChangeDateComponent.endDate || undefined,
       hosId: this.getHosId,
       statisticsTypeId: this.statisticsTypeId || undefined,
       groupId: this.fieldConfig.fields.userId ? undefined : (this.fieldConfig.fields.groupId || undefined),
@@ -200,10 +199,10 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
     this.sortCurrentKey = "";
 		this.sortCurrentValue = "";
 		this.sortCurrent = {};
-    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')]
+    this.dateRange = []
     this.statisticsTypeId = undefined;
     this.fieldConfig.fields = {groupId: undefined, userId: undefined, taskTypeId: undefined, buildingId: undefined, deptId: undefined};
-    this.customChangeDateComponent.reset(this.dateRange);
+    this.customChangeDateComponent.resetByDate();
     this.search();
   }