[完善] 横向纵向查询功能基本完成

src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@@ -1,33 +1,67 @@
 <div class="content">
 
   <div class="header">
-    <form #form="ngForm" *ngIf="!isQuery">
-      <div class="queryBox">
-  
-        <div class="queryField">
-          <label style="margin-right: 10px;">开始时间:</label>
-          <input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'>
-          <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
-          <mat-datepicker #start startView="multi-year"></mat-datepicker>
-        </div>
 
-        <div class="queryField">
-          <label style="margin-right: 10px;">结束时间:</label>
-          <input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'>
-          <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
-          <mat-datepicker #end startView="multi-year"></mat-datepicker>
+    <div class="queryField" *ngIf="!isQuery">
+      <mat-radio-group [(ngModel)]="selectType">
+        <mat-radio-button value="month">月</mat-radio-button>
+        <mat-radio-button value="year" style="margin-left: 10px;">年</mat-radio-button>
+      </mat-radio-group>
     </div>
 
-        <div class="btnbox" style="margin-left: 30px;">
-          <button mat-raised-button color="primary" (click)='query()'>查询</button>
-        </div>
+    <div class="queryField" *ngIf="selectType=='month' && !isQuery">
+      <form #form="ngForm" (ngSubmit)="monthSubmit(form.value)">
+        <span>开始年份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectOneYear" name='selectOneYear'>
+            <mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <span>开始月份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectStartMonth" name='selectStartMonth'>
+            <mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <span>结束年份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectTwoYear" name='selectTwoYear'>
+            <mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <span>结束月份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectEndMonth" name='selectEndMonth'>
+            <mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <button type="submit" mat-raised-button color="primary">查询</button>
+      </form>
     </div>
 
+    <div class="queryField" *ngIf="selectType=='year' && !isQuery">
+      <form #form2="ngForm" (ngSubmit)="yearSubmit(form2.value)">
+        <span>开始年份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectStartYear" name='selectStartYear'>
+            <mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <span>结束年份:</span>
+        <mat-form-field>
+          <mat-select [(ngModel)]="selectEndYear" name='selectEndYear'>
+            <mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <button type="submit" mat-raised-button color="primary">查询</button>
       </form>
-    <div style="position: fixed; right: 30px; top: 82px;">
+    </div>
+
+    <div class="fixedCss">
       <button mat-raised-button color="primary" (click)='toggleTrue()'>横向查询</button>
       <button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button>
     </div>
+
   </div>
 
   <div class="echarts">

src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss

@@ -17,35 +17,34 @@
   }
 }
 
+//头部搜索栏
 .header {
-  padding: 10px;
-  box-sizing: border-box;
   border-bottom: 1px solid #999;
-  min-height: 70px;
-  .queryBox {
+  height: 70px;
   box-sizing: border-box;
-    padding: 5px 15px;
+  padding: 0 15px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items:center;
   justify-content:center;
   .queryField {
-      margin: 0 15px;
+    margin: 0 10px;
     font-size: 14px;
-      input {
-        width: 180px;
-        height: 22px;
-        line-height: 22px;
+    .mat-form-field {
+      width: 130px;
+      max-height: 50px;;
+      margin: 0 15px 0 10px;
     }
   }
-    .btnbox{
-      float: right;
+  .fixedCss{
+    position: fixed;
+    top: 78px;
+    right: 32px;
   }
-
-  } //queryBox
 }
 
+//echarts div公有样式
 .publicCss{
   height: 350px;
   width: 50%;

src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@@ -20,18 +20,11 @@ export class PageTwoTimeComponent implements OnInit {
   @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
-    this.startTime = new FormControl( (new Date()).getFullYear()-10 )
-    this.endTime = new FormControl( (new Date()).getFullYear() )
-    this.adapter.setLocale('CH')
+    this.dateInit()
   }
 
   isQuery:boolean = true; //横纵向查询
 
-  //查询
-  query () {
-
-  }
-
   //shao
   toggleTrue () { 
     this.isQuery = true
@@ -44,52 +37,56 @@ export class PageTwoTimeComponent implements OnInit {
     this.echartsData.statefulInspectionToggle = true
   }
 
-  startTime:any; //查询开始时间
-  endTime:any; //查询结束时间
+  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+
+  //查询数据
+  years:any = []
+  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+
+  //日期初始化
+  dateInit () {
+    let date = (new Date()).getFullYear()
+    for (let i=date; i>=date-10;i--) {
+      this.years.unshift(i)
+    }
+  }
 
-  //选择开始时间
-  startEvent (e: MatDatepickerInputEvent<Date>) {
-    let nowTime = new Date()
-    if (nowTime < e.value) {
+  selectOneYear:any = (new Date()).getFullYear() //开始年份
+  selectTwoYear:any = (new Date()).getFullYear() //结束年份
+  selectStartMonth:any = 1 //开始月份
+  selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
+  //按月查询
+  monthSubmit (e) {
+    if (e.selectTwoYear >= e.selectOneYear) {
+      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
+      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
+      console.log(startTime)
+      console.log(endTime)
+    } else {
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000
-      this.snackBar.open('选择时间不能大于现在时间段','确定',config);
-      this.startTime = new FormControl( new Date(new Date().toLocaleDateString()) )
-    } else {
-      this.startTime = new FormControl(e.value)
+      this.snackBar.open('请选择正确时间区段','确定',config);
     }
   }
 
-  //选择结束时间
-  endEvent (e: MatDatepickerInputEvent<Date>) {
-    let oneDay:number = 86399000; //一天的毫秒数
-    let selectDay = (e.value).toLocaleDateString() //选择的年月日
-    let newDay = (new Date()).toLocaleDateString() //现在的年月日
-    let nowTime = new Date() //现在的时间
 
-    if (nowTime < e.value && selectDay!=newDay) { //选择时间段大于现在时间段时
+
+  selectStartYear:any = (new Date()).getFullYear() //开始年份
+  selectEndYear:any = (new Date()).getFullYear() //结束年份
+  //按年查询
+  yearSubmit (e) {
+    if (e.selectEndYear >= e.selectStartYear) {
+      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
+      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
+      console.log(startTime)
+      console.log(endTime)
+    } else {
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000
-      this.snackBar.open('选择时间不能大于现在时间段','确定',config);
-      this.endTime = new FormControl( new Date() )
-    } else if (nowTime > e.value && selectDay!=newDay) { //正常情况下 时间+1天
-      this.endTime = new FormControl( new Date(e.value.getTime()+oneDay) )
-    } else if ( selectDay == newDay ) { //选择时间段是今天时
-      this.endTime = new FormControl( new Date() )
-    }
+      this.snackBar.open('请选择正确时间区段','确定',config);
     }
-
-  //处理时间 传入 new Date()格式
-  getTime(date){
-    let year = date.getFullYear(); //年
-    let month = date.getMonth() + 1; //月
-    let day = date.getDate(); //日
-    let hour = date.getHours() //时
-    let min = date.getMinutes(); //分
-    let seconds = date.getSeconds(); //秒
-    return year+'-'+month+'-'+ day + " "+ hour +':'+ min  +':'+ seconds;
   }