[修改]报表统计页面修改

src/app/statistic-analysis/combined-query/combined-query.component.html

@@ -1,13 +1,12 @@
-<!-- 预案综合分析 -->
+<!-- 报表统计 -->
 <div style="height: 100%;overflow: auto;">
-    <div class="header">
+        <mat-tab-group style="height: 100%;" [selectedIndex]="selected.value" (selectedIndexChange)="selectedIndexChange($event)">
+          <mat-tab *ngFor="let item of lable" [label]="item">
+            <ng-template matTabContent>
               <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+                <div class="header">
                   <div class="queryBox">
-          <div class="queryField">
+                    <div class="queryField ordiv">
-            <input style="width: 30px;height: 15px;line-height: 15px;position: relative;top: 2px;" type="radio" name="level" value=1 [(ngModel)]="preparelevels"><span>单位</span>
-            <input style="width: 30px;height: 15px;line-height: 15px;position: relative;top: 2px;margin-left: 5px;" type="radio" name="level" value=2 [(ngModel)]="preparelevels"><span>预案</span>
-          </div>
-          <div class="queryField ordiv" *ngIf="preparelevels==1||preparelevels==2">
                       <label style="margin-right: 10px;">消防救援站:</label>
                       <mat-form-field class="example-full-width">
                         <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"
@@ -35,7 +34,7 @@
                         </mat-tree>
                       </div>
                     </div>
-          <div class="queryField" *ngIf="preparelevels==1||preparelevels==2">
+                    <div class="queryField">
                       <label style="margin-right: 10px;">时间查询:</label>
                       <mat-form-field class="example-full-width">
                         <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
@@ -46,7 +45,7 @@
                         <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
                       </mat-form-field>
                     </div>
-          <div class="queryField" *ngIf="preparelevels==2">
+                    <div class="queryField" *ngIf="preparelevels==1">
                       <label style="margin-right: 10px;">预案类型:</label>
                       <mat-form-field>
                         <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
@@ -58,7 +57,7 @@
                       </mat-form-field>
             
                     </div>
-          <div class="queryField" *ngIf="preparelevels==1">
+                    <div class="queryField" *ngIf="preparelevels==0">
                       <label style="margin-right: 10px;">单位类型:</label>
                       <mat-form-field>
                         <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype" [multiple]="true">
@@ -69,7 +68,7 @@
                       </mat-form-field>
                     </div>
                     
-          <div class="queryField" *ngIf="preparelevels==1">
+                    <div class="queryField" *ngIf="preparelevels==0">
                       <label style="margin-right: 10px;">单位状态:</label>
                       <mat-form-field>
                         <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
@@ -79,7 +78,7 @@
                       </mat-form-field>
                     </div>
             
-          <div class="queryField" *ngIf="preparelevels==2">
+                    <div class="queryField" *ngIf="preparelevels==1">
                       <label style="margin-right: 10px;">预案级别:</label>
                       <mat-form-field>
                         <mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true">
@@ -94,71 +93,31 @@
                         </mat-select>
                       </mat-form-field>
                     </div>
-  
+                    <div class="queryField" *ngIf="preparelevels==0||preparelevels==1">
-          
-          <div class="queryField">
                       <button mat-raised-button color="primary">查询</button>
                       <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+                      <button mat-raised-button style="margin-left: 25px;" color="primary" (click)='export()'>导出</button>
+                    </div>
                   </div>
                 </div>
               
             </form>
-    </div>
             <mat-divider></mat-divider>
     <div class="body">
       <div class="tablebox">
-  
+        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8" id="table">
-        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+          <ng-container *ngFor="let item of displayedColumns;let i=index" [matColumnDef]="displayedColumns[i]">
-          <!-- <ng-container matColumnDef="unitname">
+            <th mat-header-cell *matHeaderCellDef>{{item}}</th>
-                <th mat-header-cell *matHeaderCellDef>单位名称</th>
-                <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
-              </ng-container> -->
-          <ng-container matColumnDef="planname">
-            <th mat-header-cell *matHeaderCellDef>组织名称</th>
             <td mat-cell *matCellDef="let element">{{element.name}}</td>
           </ng-container>
-  
-          <ng-container matColumnDef="addpeople">
-            <th mat-header-cell *matHeaderCellDef>单位类型</th>
-            <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-          </ng-container>
-          <ng-container matColumnDef="level">
-            <th mat-header-cell *matHeaderCellDef>预案级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planCategory==1?'Ⅰ级预案':element.planCategory==2?'Ⅱ级预案':
-              element.planCategory==3?'Ⅲ级预案':element.planCategory==4?'Ⅳ级预案':element.planCategory==5?'Ⅴ级预案':element.planCategory==8?'类型预案':'应急预案'}}
-            </td>
-          </ng-container>
-          <!-- <ng-container matColumnDef="addtime">
-            <th mat-header-cell *matHeaderCellDef>审核时间</th>
-            <td mat-cell *matCellDef="let element">{{element.audittedTime | date:'yyyy-MM-dd'}}</td>
-          </ng-container>
-          <ng-container matColumnDef="plantype">
-            <th mat-header-cell *matHeaderCellDef>预案类型</th>
-            <td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td>
-          </ng-container>
-          <ng-container matColumnDef="auditStatus">
-            <th mat-header-cell *matHeaderCellDef>审核状态</th>
-            <td mat-cell *matCellDef="let element">{{element.auditStatus | auditsatus}}</td>
-          </ng-container>
-  
-          <ng-container matColumnDef="openRange">
-            <th mat-header-cell *matHeaderCellDef>是否公开</th>
-            <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-          </ng-container>
-          <ng-container matColumnDef="projectlevel">
-            <th mat-header-cell *matHeaderCellDef>编制级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
-          </ng-container>
-          <ng-container matColumnDef="operation">
-            <th mat-header-cell *matHeaderCellDef>操作</th>
-            <td mat-cell *matCellDef="let element">
-              
-            </td>
-          </ng-container> -->
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
   
       </div>
     </div>
+            </ng-template>
+          </mat-tab>
+          
+        </mat-tab-group>
   </div>

src/app/statistic-analysis/combined-query/combined-query.component.ts

@@ -54,14 +54,14 @@ export class CombinedQueryComponent implements OnInit {
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   myControl = new FormControl();
   hasChild = (_: number, node: any) => node.expandable;
-  displayedColumns: string[] = ['planname', 'addpeople', 'level'];//, 'addtime', 'plantype', 'auditStatus', 'openRange', 'projectlevel', 'operation'
+  displayedColumns: string[] = ['组织名称', 'addpeople', 'level'];//, 'addtime', 'plantype', 'auditStatus', 'openRange', 'projectlevel', 'operation'
   allorganizations: any //所有组织机构
   allunittype: any //所有单位类型
   tabledataSource: any //表格数据
   url
   findTj=0//查询条件
 
-  preparelevels: any
+  preparelevels:Number=0
   pcMore//pc更多
   pcput = false//pc收起
   pcfind//pc查询
@@ -80,10 +80,36 @@ export class CombinedQueryComponent implements OnInit {
   }
 
   allPlanInfo: any //存储所有预案信息
-  //获得所有预案信息
+  lable=['单位查询','预案查询']
+  selected = new FormControl(0); //选项卡实例
+  //判断选了哪一个
+  selectedIndexChange(e){
+    this.selected.setValue(e)
+    console.log(e)
+    this.preparelevels=Number(e)
+  }
+  //获得所有预案或单位信息
   getAllPlanInfo() {
+    let paramsdata:any={
+      QueryMode:this.preparelevels,
+      OrganizationId:this.jsId||'',
+      HasChildren:this.jscheck||'',
+      TimeIntervalStart:this.addtime||'',
+      TimeIntervalEnd:this.endtime||'',
+      BuildingTypeIds:this.unittype||'',
+    }
+    this.http.get("/api/StatisticsAnalysis/ReportTable", { params: paramsdata }).subscribe((data: any) => {
+        console.log(data)
+        this.tabledataSource=data
+        if(this.preparelevels==0){
+          this.tabledataSource.forEach(element => {
+            this.displayedColumns.push(element)
+          });
+        }
         
       }
+    )
+  }
 
   colorRgb(sColor) {
     var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
@@ -287,6 +313,12 @@ export class CombinedQueryComponent implements OnInit {
   }
   //查询
   onSubmit(e) {
+    let config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    if(this,this.endtime<this.addtime){
+      this.snackBar.open('开始时间不能早于结束时间', '确定', config);
+    }
     this.getAllPlanInfo();
   }
   companyName: any //单位名称
@@ -314,4 +346,66 @@ export class CombinedQueryComponent implements OnInit {
     this.planCategory = []
     this.getAllPlanInfo();
   }
+  //导出
+  tableToexcel(){
+    this.exal()(document.getElementById("table"), "导出表格")
+  }
+
+  exal(){
+      var uri = 'data:application/vnd.ms-excel;base64,',
+
+        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
+
+        base64 = function(s) {
+
+            return window.btoa(unescape(encodeURIComponent(s)))
+
+        },
+
+        format = function(s, c) {
+
+            return s.replace(/{(\w+)}/g, function(m, p) {
+
+                return c[p];
+
+            })
+
+        }
+
+    return function(table, name) {
+
+        if (!table.nodeType) table = document.getElementById(table);
+
+        var ctx = {
+
+            worksheet: name || 'Worksheet',
+
+            table: table.innerHTML
+
+        };
+
+        window.location.href = uri + base64(format(template, ctx));
+
+    }
+  }
+
+  export(){
+    const httpOptions = {
+      responseType: 'blob' as 'json'
+    };
+    this.http.get('/api/StatisticsAnalysis/ExportToExcel',httpOptions).subscribe((data:any) => {
+      // // 文件名中有中文 则对文件名进行转码
+      const link = document.createElement('a');
+      const blob = new Blob([data], {type: 'application/vnd.ms-excel'});
+      link.setAttribute('href', window.URL.createObjectURL(blob));
+      link.setAttribute('download', '报表统计'+'.xls');
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    })
+  }
+    
+
+
 }