[完善]图表收起

src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@@ -14,7 +14,7 @@
 
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-select id="type" formControlName="type" nzPlaceHolder="请选择预警类型">
+          <nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
             <nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
           </nz-select>
         </nz-form-control>
@@ -57,8 +57,9 @@
   <div class="content">
     <div class="title">
       <app-title [name]="'预警类型统计'"></app-title>
+      <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
     </div>
-    <div class="chartsbox">
+    <div class="chartsbox" [hidden]="!isEcharts">
       <div class="chart">
         <div class="leftbox">
           <span class="chartname">

src/app/pages/criminal-records-admin/criminal-records-admin.component.scss

@@ -52,6 +52,13 @@
     box-sizing: border-box;
     padding: 0 28px;
     margin: 13px 0;
+    position: relative;
+    .packup {
+      position: absolute;
+      right: 33px;
+      top: 16px;
+      cursor: pointer;
+    }
   }
 
   .chartsbox {

src/app/pages/criminal-records-admin/criminal-records-admin.component.ts

@@ -255,24 +255,44 @@ export class CriminalRecordsAdminComponent implements OnInit {
         showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
         realtime: true, //是否实时更新
         filterMode: 'filter',
-        backgroundColor:'#001735',
+        backgroundColor: '#001735',
-        width:'18'
+        width: '18'
       },
       {
-        type:'inside',
+        type: 'inside',
-        yAxisIndex:0,
+        yAxisIndex: 0,
-        zoomOnMouseWheel:false,  //滚轮是否触发缩放
+        zoomOnMouseWheel: false,  //滚轮是否触发缩放
-        moveOnMouseMove:true,  //鼠标滚轮触发滚动
+        moveOnMouseMove: true,  //鼠标滚轮触发滚动
-        moveOnMouseWheel:true
+        moveOnMouseWheel: true
       }
     ]
   }
+  isEcharts: boolean = true
+  isEchartsShow() {
+    this.isEcharts = !this.isEcharts
+  }
+  startdate
+  enddate
   ngOnInit(): void {
+
+    //当前日期
+    let myDate: any = new Date();
+    let nowY = myDate.getFullYear();
+    let nowM = myDate.getMonth() + 1;
+    let nowD = myDate.getDate();
+    this.enddate = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
+    //获取三十天前日期
+    let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
+    let lastY = lw.getFullYear();
+    let lastM = lw.getMonth() + 1;
+    let lastD = lw.getDate();
+    this.startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
+
     this.validateForm = this.fb.group({
       level: [null],
       type: [null],
       site: [null],
-      datePicker: [null]
+      datePicker: [[this.startdate, this.enddate]]
     });
 
     //饼图
@@ -283,6 +303,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
     this.mybarChart.setOption(this.baroption);
 
     this.warningType()
+
+    console.log('当前日期', enddate)
+    console.log('三十天前日期', startdate)
   }
 
 
@@ -332,6 +355,15 @@ export class CriminalRecordsAdminComponent implements OnInit {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
     }
+    console.log(this.validateForm.value)
+
+    
+    let ViolationIds = []
+    if (this.validateForm.value.type) {
+      this.warningTypesDetails.forEach(item => {
+        item.id ? ViolationIds.push(item.id) : null
+      });
+    }
   }
   resetForm(e: MouseEvent): void {
     e.preventDefault();
@@ -351,6 +383,18 @@ export class CriminalRecordsAdminComponent implements OnInit {
       this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType });
     })
   }
+  typeChange(e) {
+    this.warningTypes.forEach(element => {
+      if (element.key == e) {
+        this.warningTypesDetails = element
+      }
+    });
+    this.validateForm.patchValue({
+      event: null,
+    });
+  }
+
+
   list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
   look() {
     this.router.navigate(['/records/petrolStation'])

src/app/pages/criminal-records/criminal-records.component.html

@@ -57,8 +57,9 @@
   <div class="content">
     <div class="title">
       <app-title [name]="'预警类型统计'"></app-title>
+      <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
     </div>
-    <div class="chartsbox">
+    <div class="chartsbox" [hidden]="!isEcharts">
       <div class="chart">
         <div class="leftbox">
           <span class="chartname">

src/app/pages/criminal-records/criminal-records.component.scss

@@ -52,6 +52,14 @@
     height: 64px;
     box-sizing: border-box;
     padding: 0 28px;
+    position: relative;
+
+    .packup {
+      position: absolute;
+      right: 33px;
+      top: 16px;
+      cursor: pointer;
+    }
   }
 
   .chartsbox {

src/app/pages/criminal-records/criminal-records.component.ts

@@ -272,6 +272,11 @@ export class CriminalRecordsComponent implements OnInit {
     }
     return dateList;
   }
+
+  isEcharts:boolean = true
+  isEchartsShow(){
+    this.isEcharts = !this.isEcharts
+  }
   ngOnInit(): void {
     this.validateForm = this.fb.group({
       level: [null],