shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

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

tangshan
陈敬瑜 3 years ago
parent
a5a0830f29
commit
5e49eb2576
2 changed files with 209 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 263
      src/app/statistic-analysis/combined-query/combined-query.component.html
  2. 102
      src/app/statistic-analysis/combined-query/combined-query.component.ts

263
src/app/statistic-analysis/combined-query/combined-query.component.html
Unescape View File

@ -1,164 +1,123 @@
<!-- 预案综合分析 --> <!-- 报表统计 -->
<div style="height: 100%;overflow: auto;"> <div style="height: 100%;overflow: auto;">
<div class="header"> <mat-tab-group style="height: 100%;" [selectedIndex]="selected.value" (selectedIndexChange)="selectedIndexChange($event)">
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> <mat-tab *ngFor="let item of lable" [label]="item">
<div class="queryBox"> <ng-template matTabContent>
<div class="queryField"> <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<input style="width: 30px;height: 15px;line-height: 15px;position: relative;top: 2px;" type="radio" name="level" value=1 [(ngModel)]="preparelevels"><span>单位</span> <div class="header">
<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 class="queryBox">
</div> <div class="queryField ordiv">
<div class="queryField ordiv" *ngIf="preparelevels==1||preparelevels==2"> <label style="margin-right: 10px;">消防救援站:</label>
<label style="margin-right: 10px;">消防救援站:</label> <mat-form-field class="example-full-width">
<mat-form-field class="example-full-width"> <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"
<input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js" (focus)="openorganizationbox()">
(focus)="openorganizationbox()"> </mat-form-field>
</mat-form-field> <mat-checkbox style="margin-left: 6px;" color="primary" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
<mat-checkbox style="margin-left: 6px;" color="primary" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox> <div class="organizationbox" *ngIf="isorganizationbox">
<div class="organizationbox" *ngIf="isorganizationbox"> <div (click)="closediv()" class="closediv">
<div (click)="closediv()" class="closediv"> <mat-icon>clear</mat-icon>
<mat-icon>clear</mat-icon> </div>
</div> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> <button type="button" mat-icon-button disabled></button>
<button type="button" mat-icon-button disabled></button> <li>{{node.name}}</li>
<li>{{node.name}}</li> </mat-tree-node>
</mat-tree-node> <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)'
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist">
class="organizationlist"> <button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> <mat-icon class="mat-icon-rtl-mirror">
<mat-icon class="mat-icon-rtl-mirror"> {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} </mat-icon>
</mat-icon> </button>
</button> <li>{{node.name}}</li>
<li>{{node.name}}</li> </mat-tree-node>
</mat-tree-node> </mat-tree>
</mat-tree> </div>
</div> </div>
</div> <div class="queryField">
<div class="queryField" *ngIf="preparelevels==1||preparelevels==2"> <label style="margin-right: 10px;">时间查询:</label>
<label style="margin-right: 10px;">时间查询:</label> <mat-form-field class="example-full-width">
<mat-form-field class="example-full-width"> <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
<input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime"> </mat-form-field>
</mat-form-field> <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
<!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> --> <span style="margin-left: 15px;">🠊</span>
<span style="margin-left: 15px;">🠊</span> <mat-form-field class="example-full-width" style="margin-left: 10px;">
<mat-form-field class="example-full-width" style="margin-left: 10px;"> <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
<input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime"> </mat-form-field>
</mat-form-field> </div>
</div> <div class="queryField" *ngIf="preparelevels==1">
<div class="queryField" *ngIf="preparelevels==2"> <label style="margin-right: 10px;">预案类型:</label>
<label style="margin-right: 10px;">预案类型:</label> <mat-form-field>
<mat-form-field> <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型' [multiple]="true">
<mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型' [multiple]="true"> <mat-option value=16>文本预案</mat-option>
<mat-option value=16>文本预案</mat-option> <mat-option value=1>二维预案</mat-option>
<mat-option value=1>二维预案</mat-option> <mat-option value=2>三维预案</mat-option>
<mat-option value=2>三维预案</mat-option> <mat-option value=4>其他预案</mat-option>
<mat-option value=4>其他预案</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field>
</div>
</div> <div class="queryField" *ngIf="preparelevels==0">
<div class="queryField" *ngIf="preparelevels==1"> <label style="margin-right: 10px;">单位类型:</label>
<label style="margin-right: 10px;">单位类型:</label> <mat-form-field>
<mat-form-field> <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype" [multiple]="true">
<mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype" [multiple]="true"> <mat-option *ngFor="let unit of allunittype" [value]="unit.id">
<mat-option *ngFor="let unit of allunittype" [value]="unit.id"> {{unit.name}}
{{unit.name}} </mat-option>
</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> </div>
</div>
<div class="queryField" *ngIf="preparelevels==0">
<div class="queryField" *ngIf="preparelevels==1"> <label style="margin-right: 10px;">单位状态:</label>
<label style="margin-right: 10px;">单位状态:</label> <mat-form-field>
<mat-form-field> <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
<mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'> <mat-option value=1>新增</mat-option>
<mat-option value=1>新增</mat-option> <mat-option value=2>维护更新</mat-option>
<mat-option value=2>维护更新</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> </div>
</div>
<div class="queryField" *ngIf="preparelevels==1">
<div class="queryField" *ngIf="preparelevels==2"> <label style="margin-right: 10px;">预案级别:</label>
<label style="margin-right: 10px;">预案级别:</label> <mat-form-field>
<mat-form-field> <mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true">
<mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true"> <mat-option value=6>应急预案(国家级)</mat-option>
<mat-option value=6>应急预案(国家级)</mat-option> <mat-option value=7>应急预案(市级)</mat-option>
<mat-option value=7>应急预案(市级)</mat-option> <mat-option value=8>类型预案</mat-option>
<mat-option value=8>类型预案</mat-option> <mat-option value=1>Ⅰ级预案</mat-option>
<mat-option value=1>Ⅰ级预案</mat-option> <mat-option value=2>Ⅱ级预案</mat-option>
<mat-option value=2>Ⅱ级预案</mat-option> <mat-option value=3>Ⅲ级预案</mat-option>
<mat-option value=3>Ⅲ级预案</mat-option> <mat-option value=4>Ⅳ级预案</mat-option>
<mat-option value=4>Ⅳ级预案</mat-option> <mat-option value=5>Ⅴ级预案</mat-option>
<mat-option value=5>Ⅴ级预案</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> </div>
</div> <div class="queryField" *ngIf="preparelevels==0||preparelevels==1">
<button mat-raised-button color="primary">查询</button>
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
<div class="queryField"> <button mat-raised-button style="margin-left: 25px;" color="primary" (click)='export()'>导出</button>
<button mat-raised-button color="primary">查询</button> </div>
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> </div>
</div> </div>
</div>
</form>
</form> <mat-divider></mat-divider>
</div>
<mat-divider></mat-divider>
<div class="body"> <div class="body">
<div class="tablebox"> <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> <td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
</div> </div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div> </div>

102
src/app/statistic-analysis/combined-query/combined-query.component.ts
Unescape View File

@ -54,14 +54,14 @@ export class CombinedQueryComponent implements OnInit {
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
myControl = new FormControl(); myControl = new FormControl();
hasChild = (_: number, node: any) => node.expandable; 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 //所有组织机构 allorganizations: any //所有组织机构
allunittype: any //所有单位类型 allunittype: any //所有单位类型
tabledataSource: any //表格数据 tabledataSource: any //表格数据
url url
findTj=0//查询条件 findTj=0//查询条件
preparelevels: any preparelevels:Number=0
pcMore//pc更多 pcMore//pc更多
pcput = false//pc收起 pcput = false//pc收起
pcfind//pc查询 pcfind//pc查询
@ -80,9 +80,35 @@ export class CombinedQueryComponent implements OnInit {
} }
allPlanInfo: any //存储所有预案信息 allPlanInfo: any //存储所有预案信息
//获得所有预案信息 lable=['单位查询','预案查询']
selected = new FormControl(0); //选项卡实例
//判断选了哪一个
selectedIndexChange(e){
this.selected.setValue(e)
console.log(e)
this.preparelevels=Number(e)
}
//获得所有预案或单位信息
getAllPlanInfo() { 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) { colorRgb(sColor) {
@ -287,6 +313,12 @@ export class CombinedQueryComponent implements OnInit {
} }
//查询 //查询
onSubmit(e) { onSubmit(e) {
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
if(this,this.endtime<this.addtime){
this.snackBar.open('开始时间不能早于结束时间', '确定', config);
}
this.getAllPlanInfo(); this.getAllPlanInfo();
} }
companyName: any //单位名称 companyName: any //单位名称
@ -314,4 +346,66 @@ export class CombinedQueryComponent implements OnInit {
this.planCategory = [] this.planCategory = []
this.getAllPlanInfo(); 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);
})
}
} }

Write Preview
Loading…
Cancel
Save