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

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);
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,9 +80,35 @@ 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) {
@ -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);
})
}
}

Write Preview
Loading…
Cancel
Save