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

[完善]统计报表页面

tangshan
邵佳豪 3 years ago
parent
78f6f4f68b
commit
407f667191
5 changed files with 1017 additions and 1089 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. 308
      src/app/statistic-analysis/combined-query/combined-query.component.html
  2. 391
      src/app/statistic-analysis/combined-query/combined-query.component.scss
  3. 25
      src/app/statistic-analysis/combined-query/combined-query.component.spec.ts
  4. 699
      src/app/statistic-analysis/combined-query/combined-query.component.ts
  5. 653
      src/styles.scss

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

@ -1,153 +1,165 @@
<!-- 报表统计 --> <!-- 报表统计 -->
<div style="height: 100%;overflow: auto;"> <div style="height: 100%;overflow: auto;" id="combinedQuery">
<mat-tab-group style="height: 100%;" [selectedIndex]="selected.value" (selectedIndexChange)="selectedIndexChange($event)"> <mat-tab-group style="height: 100%;" [selectedIndex]="selected.value"
<mat-tab *ngFor="let item of lable" [label]="item"> (selectedIndexChange)="selectedIndexChange($event)">
<ng-template matTabContent> <mat-tab *ngFor="let item of lable" [label]="item" [disabled]="isMasklayer">
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> <ng-template matTabContent class="box">
<div class="header"> <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<div class="queryBox"> <div class="header">
<div class="queryField ordiv"> <div class="queryBox">
<label style="margin-right: 10px;">消防救援站:</label> <div class="queryField ordiv">
<mat-form-field class="example-full-width"> <label style="margin-right: 10px;">消防救援站:</label>
<input readonly matInput placeholder="请选择消防救援站" autocomplete="off" *ngIf="preparelevels==0" [(ngModel)]="js" name="js" <mat-form-field class="example-full-width">
(focus)="openorganizationbox()"> <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" *ngIf="preparelevels==0"
<input readonly matInput placeholder="请选择消防救援站" autocomplete="off" *ngIf="preparelevels==1" [(ngModel)]="yuanjs" name="js" [(ngModel)]="js" name="js" (focus)="openorganizationbox()">
(focus)="openorganizationbox()"> <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" *ngIf="preparelevels==1"
</mat-form-field> [(ngModel)]="yuanjs" name="js" (focus)="openorganizationbox()">
<mat-checkbox style="margin-left: 6px;" color="primary" *ngIf="preparelevels==0" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox> </mat-form-field>
<mat-checkbox style="margin-left: 6px;" color="primary" *ngIf="preparelevels==1" [(ngModel)]="yuanjscheck" name="jscheck">包含下级</mat-checkbox> <mat-checkbox style="margin-left: 6px;" color="primary" *ngIf="preparelevels==0" [(ngModel)]="jscheck"
<div class="organizationbox" *ngIf="isorganizationbox"> name="jscheck">包含下级</mat-checkbox>
<div (click)="closediv()" class="closediv"> <mat-checkbox style="margin-left: 6px;" color="primary" *ngIf="preparelevels==1"
<mat-icon>clear</mat-icon> [(ngModel)]="yuanjscheck" name="jscheck">包含下级</mat-checkbox>
</div> <div class="organizationbox" *ngIf="isorganizationbox">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <div (click)="closediv()" class="closediv">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> <mat-icon>clear</mat-icon>
<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)]="dwaddtime" *ngIf="preparelevels==0">
<input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="yuanaddtime" *ngIf="preparelevels==1">
</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)]="dwendtime" *ngIf="preparelevels==0">
<input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="yuanendtime" *ngIf="preparelevels==1">
</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=1>二维预案</mat-option>
<mat-option value=2>三维预案</mat-option>
<mat-option value=4>其他预案</mat-option>
<mat-option value=16>文本预案</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 required [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择单位状态' [multiple]="true">
<mat-option [value]='preparelevel[0]'>新增</mat-option>
<mat-option [value]='preparelevel[1]||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=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">
<label style="margin-right: 10px;">按总数排序:</label>
<mat-form-field>
<mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort">
<mat-option value=1>从高到低</mat-option>
<mat-option value=0>从低到高</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)]="yuanintegritySort" name="integritySort">
<mat-option value=1>从高到低</mat-option>
<mat-option value=0>从低到高</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>
<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>
<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)]="dwaddtime"
*ngIf="preparelevels==0">
<input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="yuanaddtime"
*ngIf="preparelevels==1">
</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)]="dwendtime"
*ngIf="preparelevels==0">
<input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="yuanendtime"
*ngIf="preparelevels==1">
</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=1>二维预案</mat-option>
<mat-option value=2>三维预案</mat-option>
<mat-option value=4>其他预案</mat-option>
<mat-option value=16>文本预案</mat-option>
</mat-select>
</mat-form-field>
</form> </div>
<mat-divider></mat-divider> <div class="queryField" *ngIf="preparelevels==0">
<div class="body"> <label style="margin-right: 10px;">单位类型:</label>
<div class="tablebox" id="table"> <mat-form-field>
<table cellpadding="0" cellspacing="0" *ngIf="preparelevels==0&&!tableDataNull"> <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype" [multiple]="true">
<thead> <mat-option *ngFor="let unit of allunittype" [value]="unit.id">
<th *ngFor="let item of displayedColumns;let i=index">{{item}}</th> {{unit.name}}
</thead> </mat-option>
<tbody> </mat-select>
<tr *ngFor="let element of tabledataSource"> </mat-form-field>
<td *ngFor="let eletd of element.name">{{eletd}}</td> </div>
</tr> <div class="queryField" *ngIf="preparelevels==0">
</tbody> <label style="margin-right: 10px;">单位状态:</label>
</table> <mat-form-field>
<table cellpadding="0" cellspacing="0" *ngIf="preparelevels==1&&!tableDataNull"> <mat-select required [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择单位状态'
<thead> [multiple]="true">
<th *ngFor="let item of yuanColumns;let i=index">{{item}}</th> <mat-option [value]='preparelevel[0]'>新增</mat-option>
</thead> <mat-option [value]='preparelevel[1]||2'>维护更新</mat-option>
<tbody> </mat-select>
<tr *ngFor="let element of yuanTable"> </mat-form-field>
<td *ngFor="let eletd of element.name">{{eletd}}</td> </div>
</tr> <div class="queryField" *ngIf="preparelevels==1">
</tbody> <label style="margin-right: 10px;">预案级别:</label>
</table> <mat-form-field>
<span *ngIf="tableDataNull">暂无数据</span> <mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true">
</div> <mat-option value=1>Ⅰ级预案</mat-option>
</div> <mat-option value=2>Ⅱ级预案</mat-option>
</ng-template> <mat-option value=3>Ⅲ级预案</mat-option>
</mat-tab> <mat-option value=4>Ⅳ级预案</mat-option>
<mat-option value=5>Ⅴ级预案</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)]="integritySort" name="integritySort">
<mat-option value=1>从高到低</mat-option>
<mat-option value=0>从低到高</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)]="yuanintegritySort" name="integritySort">
<mat-option value=1>从高到低</mat-option>
<mat-option value=0>从低到高</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" id="table">
<table cellpadding="0" cellspacing="0" *ngIf="preparelevels==0&&!tableDataNull">
<thead>
<th *ngFor="let item of displayedColumns;let i=index">{{item}}</th>
</thead>
<tbody>
<tr *ngFor="let element of tabledataSource">
<td *ngFor="let eletd of element.name;let key = index" (click)="clicktd(key,eletd)">{{eletd}}</td>
</tr>
</tbody>
</table>
</mat-tab-group> <table cellpadding="0" cellspacing="0" *ngIf="preparelevels==1&&!tableDataNull">
</div> <thead>
<th *ngFor="let item of yuanColumns;let i=index">{{item}}</th>
</thead>
<tbody>
<tr *ngFor="let element of yuanTable">
<td *ngFor="let eletd of element.name;let key = index" (click)="clicktd(key,eletd)">{{eletd}}</td>
</tr>
</tbody>
</table>
<span *ngIf="tableDataNull">暂无数据</span>
</div>
<div class="masklayer" *ngIf="isMasklayer">
<mat-spinner [diameter]="40"></mat-spinner>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>

391
src/app/statistic-analysis/combined-query/combined-query.component.scss
Unescape View File

@ -1,265 +1,190 @@
.header { .header {
width: 100%; width: 100%;
padding: 12px 10px; padding: 12px 10px;
box-sizing: border-box;
.queryBox {
box-sizing: border-box; box-sizing: border-box;
.queryBox { padding: 5px 0 0 5px;
box-sizing: border-box; // margin-left: 50px;
padding: 5px 0 0 5px; display: flex;
// margin-left: 50px; flex-direction: row;
display: flex; flex-wrap: wrap;
flex-direction: row; align-items: center;
flex-wrap: wrap;
align-items:center; // justify-content:center;
// justify-content:center;
.queryField { .queryField {
//margin: 0 10px; //margin: 0 10px;
input { input {
width: 180px; width: 180px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
border-radius: 3px; border-radius: 3px;
} }
@media screen and (min-device-width:1400px){
margin: 3px 20px; @media screen and (min-device-width:1400px) {
} margin: 3px 20px;
@media screen and (max-device-width:1400px)and (min-device-width:1200px){ }
margin: 3px 10px;
mat-form-field{ @media screen and (max-device-width:1400px)and (min-device-width:1200px) {
width: 180px; margin: 3px 10px;
}
mat-form-field {
width: 180px;
} }
@media screen and (max-device-width:1200px){ }
margin: 3px 0 3px 10px;
mat-form-field{ @media screen and (max-device-width:1200px) {
width: 120px; margin: 3px 0 3px 10px;
}
mat-form-field {
width: 120px;
} }
}
} }
} //queryBox }
.butclass{
button{
width: 80px;height: 36px;
font-size: 16px;
}
}
.ordiv{
position: relative;
.organizationbox{
width:450px;
height: 200px;
background: white;
position: absolute;
top: 48px;
left: 77px;
z-index: 999;
border: 1px solid grey;
overflow-y: auto;
li{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
mat-tree-node{
cursor: pointer;
white-space:pre;
}
mat-tree-node:hover{
background: rgba(225, 225, 225, 0.8);
}
.closediv{
z-index: 100;
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
cursor: pointer;
line-height: 30px;
text-align: center;
}
.closediv:hover{
background:rgba(225, 225, 225, 0.8);
}
}
//queryBox
.butclass {
button {
width: 80px;
height: 36px;
font-size: 16px;
} }
} }
.body{
height: 100%; .ordiv {
width: 100%; position: relative;
.buttonbox{
padding-left: 50px; .organizationbox {
button{ width: 450px;
margin:0 10px height: 200px;
} background: white;
position: absolute;
top: 48px;
left: 77px;
z-index: 999;
border: 1px solid grey;
overflow-y: auto;
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.tablebox{
height: 620px; mat-tree-node {
overflow-y: auto; cursor: pointer;
//margin-bottom: 15px; white-space: pre;
table{
width: 100%;
background-color: white;
margin-top: 15px;
table-layout: fixed;
thead,tr{
border-bottom: 1px solid grey;
}
th {
border-bottom: 1px solid #999;
//width: 30%;
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
}
td {
height: 50px;
//line-height: 50px;
text-align: center;
font-size: 16px;
margin-left: 3px;
border-bottom: 1px solid #999;
.spantext{
margin-left: 7px;
}
.buleColor{
color: #2196f3;
}
}
}
mat-paginator{
width:100%;
// margin-left: 2%;
// margin-top: 30px;
}
} }
}
.mat-header-cell{
text-align: center;
}
.mat-cell{
text-align: center;
} mat-tree-node:hover {
background: rgba(225, 225, 225, 0.8);
}
//完整度 .closediv {
.integrityDiv{ z-index: 100;
width: 180px;
height: 18px;
background-color: #e2e7ee;
// background-image: linear-gradient(to right, #e2e7ee ,#FF4500, #FF8C00,#32cd32);
margin: 0 auto;
position: relative;
.integrityNum{
position: absolute; position: absolute;
left: 50%; right: 0;
top: 50%; top: 0;
transform: translate(-50%, -50%); width: 30px;
color: black; height: 30px;
font-weight: 800; cursor: pointer;
font-size: 13px; line-height: 30px;
cursor: default; text-align: center;
}
.closediv:hover {
background: rgba(225, 225, 225, 0.8);
}
} }
.integrityColorDiv{
height: 100%; }
}
.body {
flex: 1;
width: 100%;
position: relative;
.buttonbox {
padding-left: 50px;
button {
margin: 0 10px
} }
.integrityDetails{ }
position: absolute; .masklayer{
display: none; position: absolute;
width: 350px; left: 0;
height:280px; top: 0;
border: 1px solid rgba(0, 0, 0, 0.22); width: 100%;
background-color: white; height: 100%;
.integrityDetailsTop{ z-index: 999;
width: 100%; background-color: rgba(0, 0, 0, 0.22);
height: 23px; display: flex;
line-height:23px; align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.22); justify-content: center;
margin-bottom: 1px; }
font-size: 14px; .tablebox {
span{ height: 620px;
display: inline-block; overflow-y: auto;
text-align: center; table {
font-weight: 800; width: 100%;
} background-color: white;
.span1{ margin-top: 15px;
width: 25%; table-layout: fixed;
}
.span2{ thead,
width: 60%; tr {
} border-bottom: 1px solid grey;
.span3{ }
width: 15%;
} th {
border-bottom: 1px solid #999;
//width: 30%;
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
}
td {
height: 50px;
//line-height: 50px;
text-align: center;
font-size: 16px;
margin-left: 3px;
border-bottom: 1px solid #999;
.spantext {
margin-left: 7px;
} }
.integrityDetailsBody{
ul{
li{
width: 100%;
height: 23px;
line-height: 23px;
margin: 3px 0;
div{
float: left;
font-size: 13px;
}
.name{
width: 25%;
height: 100%;
}
.colorDiv{
width: 60%;
height: 100%;
position: relative;
.colorDivBac{
width: 90%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #dfe5ec;
border-radius: 5px;
.colorDivCon{
border-radius: 5px;
height: 100%;
background-color: #2398f1;
}
}
span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
// color: white;
font-weight: 600;
}
}
.number{
width: 15%;
height: 100%;
}
}
}
.buleColor {
color: #2196f3;
} }
}
} }
.bottomposition{
top: 2px; mat-paginator {
left: 188px; width: 100%;
}
.topposition{
top: -252px;
left: 188px;
} }
}
} }
.integrityDiv:hover{
.integrityDetails{ .mat-header-cell {
display: block; text-align: center;
}
} }
.mat-cell {
text-align: center;
}

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

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CombinedQueryComponent } from './combined-query.component';
describe('CombinedQueryComponent', () => {
let component: CombinedQueryComponent;
let fixture: ComponentFixture<CombinedQueryComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CombinedQueryComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CombinedQueryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@ -21,25 +21,9 @@ export class CombinedQueryComponent implements OnInit {
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, private tree: TreeService, public dialog: MatDialog, public snackBar: MatSnackBar) { } constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, private tree: TreeService, public dialog: MatDialog, public snackBar: MatSnackBar) { }
ngOnInit(): void {
if (window.matchMedia("(max-width: 1400px)").matches) {
this.pcMore = false
this.padMore = true
this.pcfind = false
this.padjt = true
} else {
this.pcfind = true
this.pcMore = true
this.padMore = false
this.padjt = false
}
this.getunitdata();
this.getOrganizations();
this.getUnittype();
this.getAllPlanInfo();
let level = sessionStorage.getItem("level");
this.url = window.location.href.substring(window.location.href.length - 1, window.location.href.length)
}
private _transformer = (node, level: number) => { //初始化tree private _transformer = (node, level: number) => { //初始化tree
return { return {
expandable: !!node.children && node.children.length > 0, expandable: !!node.children && node.children.length > 0,
@ -55,183 +39,307 @@ 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[] = ['组织名称', '总数'];//, 'addtime', 'plantype', 'auditStatus', 'openRange', 'projectlevel', 'operation' displayedColumns: string[] = ['组织名称', '总数'];//, 'addtime', 'plantype', 'auditStatus', 'openRange', 'projectlevel', 'operation'
yuanColumns:string[]=['组织名称', '总数']; yuanColumns: string[] = ['组织名称', '总数'];
allorganizations: any //所有组织机构
allunittype: any //所有单位类型
tabledataSource=[] //单位表格数据 tabledataSource = [] //单位表格数据
yuanTable=[]//预案表格数据 yuanTable = []//预案表格数据
excelData:any excelData: any
url findTj = 0//查询条件
findTj=0//查询条件
preparelevels:Number=0
pcMore//pc更多
pcput = false//pc收起
pcfind//pc查询
padjt = false
padMore = true//pad收缩控制
padput = false//pad收起按钮
imgsrcopen = "../../../assets/images/routdown2.png"
imgsrcdown = "../../../assets/images/routup2.png"
pcInfo() {
this.pcMore = !this.pcMore
this.pcput = !this.pcput
}
padInfo() {
this.padMore = !this.padMore
this.padput = !this.padput
}
allPlanInfo: any //存储所有预案信息 allPlanInfo: any //存储所有预案信息
lable=['单位查询','预案查询'] lable = ['单位查询', '预案查询']
selected = new FormControl(0); //选项卡实例 selected = new FormControl(0); //选项卡实例
//判断选了哪一个 //判断选了哪一个
selectedIndexChange(e){ selectedIndexChange(e) {
this.selected.setValue(e) this.selected.setValue(e)
this.preparelevels=Number(e) this.preparelevels = Number(e)
this.getAllPlanInfo() this.getAllPlanInfo()
} }
getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month: any = date.getMonth() + 1;
var strDate: any = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
async ngOnInit(): Promise<void> {
await this.getunitdata();
await this.getOrganizations();
await this.getUnittype();
this.jscheck = true
this.yuanjscheck = true
this.dwaddtime = '2020-01-01'//单位查询开始时间
this.dwendtime = this.getNowFormatDate()//单位结束时间
this.yuanaddtime = '2020-01-01'//预案查询开始时间
this.yuanendtime = this.getNowFormatDate()//预案查询结束时间
this.reservePlanType = ['1', '2', '4', '16']
this.planCategory = ['1', '2', '3', '4', '5']
this.getAllPlanInfo();
}
//得到当前单位信息
organizationName: any //当前单位组织机构名称
organizationId: any //当前单位组织机构id
async getunitdata() {
await new Promise<void>((resolve, reject) => {
this.http.get("/api/Account/Profiles").subscribe(
(data: any) => {
console.log('当前登陆用户信息', data)
resolve(data)
this.organizationName = data.organizationName
this.organizationId = data.organizationId
}
)
})
}
//获得所有组织机构
allorganizations: any //所有组织机构
treedata: any //组织机构树型数据
newallorganizations: any //用于存储在原始数据基础上的每个机构增加children字段
async getOrganizations() {
await new Promise<void>((resolve, reject) => {
this.http.get('/api/Organizations').subscribe(
(data: any) => {
this.allorganizations = data
this.treedata = this.tree.toTree(data);
this.getpresentOrganization();
resolve(data)
}
)
})
}
//得到当前单位所在组织机构的tree型数据
getpresentOrganization() {
this.newallorganizations = this.allorganizations
this.newallorganizations.forEach(item => {
item.children = []
this.newallorganizations.forEach(element => {
if (element.parentId == item.id) {
item.children.push(element)
}
});
});
if (this.organizationName) {
this.newallorganizations.forEach(item => {
if (item.name == this.organizationName) {
this.dataSource.data = [item]
}
});
} else {
this.dataSource.data = this.tree.toTree(this.treedata);
}
this.js = this.organizationName
this.jsId = this.organizationId
this.yuanjs = this.organizationName
this.yuanjsId = this.organizationId
}
//获得所有单位类型
allunittype: any //所有单位类型
async getUnittype() {
await new Promise<void>((resolve, reject) => {
this.http.get('/api/BuildingTypes/Simple').subscribe(
(data: any) => {
this.allunittype = data
console.log('单位类型', data)
this.allunittype.forEach(element => {
this.unittype.push(element.id)
});
resolve(data)
}
)
})
}
//获得所有预案或单位信息 //获得所有预案或单位信息
tableDataNull=false tableDataNull = false
preparelevels: Number = 0
companyName: any //单位名称
js: any //单位所选组织机构
jsId: any //单位所选组织机构的id
jscheck: boolean //单位所选组织机构勾选框
yuanjs: any //预案所选组织机构
yuanjsId: any //预案所选组织机构的id
yuanjscheck: boolean //预案所选组织机构勾选框
dwaddtime//单位查询开始时间
dwendtime//单位结束时间
yuanaddtime//预案查询开始时间
yuanendtime//预案查询结束时间
unittype = [] //单位类型
reservePlanType = [] //预案类型
preparelevel = [1] //单位状态
plcheck: boolean //编制级别勾选框
planCategory = [] //预案级别
integritySort = 1 //单位排序字段
yuanintegritySort = 1 //预案排序字段
isMasklayer = false
async getAllPlanInfo() { async getAllPlanInfo() {
/* this.planCategory=new Array<number>(); let paramsdata: any = {
this.reservePlanType=new Array<number>(); */ QueryMode: this.preparelevels,
let paramsdata:any={ OrganizationId: this.jsId || '',
QueryMode:this.preparelevels, HasChildren: this.jscheck || '',
OrganizationId:this.jsId||'', TimeIntervalStart: this.dwaddtime || '',
HasChildren:this.jscheck||'', TimeIntervalEnd: this.dwendtime || '',
TimeIntervalStart:this.dwaddtime||'', BuildingTypeIds: this.unittype || [],
TimeIntervalEnd:this.dwendtime||'', CompanyStatuses: this.preparelevel || [],
BuildingTypeIds:this.unittype||[], SortBy: 'totalCount',
CompanyStatuses:this.preparelevel||[], SortType: this.integritySort
SortBy:'totalCount',
SortType:this.integritySort
} }
let yuandata={ let yuandata = {
QueryMode:this.preparelevels, QueryMode: this.preparelevels,
OrganizationId:this.yuanjsId||'', OrganizationId: this.yuanjsId || '',
HasChildren:this.yuanjscheck||'', HasChildren: this.yuanjscheck || '',
TimeIntervalStart:this.yuanaddtime||'', TimeIntervalStart: this.yuanaddtime || '',
TimeIntervalEnd:this.yuanendtime||'', TimeIntervalEnd: this.yuanendtime || '',
PlanCategories:this.planCategory||[], PlanCategories: this.planCategory || [],
PlanTypes:this.reservePlanType||[], PlanTypes: this.reservePlanType || [],
SortBy:'totalCount', SortBy: 'totalCount',
SortType:this.yuanintegritySort SortType: this.yuanintegritySort
} }
let result = await new Promise((resolve, reject)=>{ // console.log(666, paramsdata)
this.http.get("/api/StatisticsAnalysis/ReportTable", { params:this.preparelevels==0? paramsdata:yuandata }).subscribe((data: any) => { this.isMasklayer = true
console.log(data) let result = await new Promise((resolve, reject) => {
this.excelData=data this.http.get("/api/StatisticsAnalysis/ReportTable", { params: this.preparelevels == 0 ? paramsdata : yuandata }).subscribe((data: any) => {
if(data.length==0){ console.log('接口数据', data)
this.tableDataNull=true this.excelData = data
}else{ if (data.length == 0) {
this.tableDataNull=false this.tableDataNull = true
if(this.preparelevels==0){ } else {
this.tableDataNull = false
if (this.preparelevels == 0) {
//单位查询 //单位查询
if(this.preparelevel.length==0){ if (this.preparelevel.length == 0) {
//必须选择单位状态 //必须选择单位状态
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
this.snackBar.open('请选择单位状态', '确定', config); this.snackBar.open('请选择单位状态', '确定', config);
}else{ } else {
this.tabledataSource=[] this.tabledataSource = []
this.displayedColumns=['组织名称', '总数'] this.displayedColumns = ['组织名称', '总数']
data.forEach((element,i,value) => { data.forEach((element, i, value) => {
this.tabledataSource.push({name:[element.orgName,element.companyStatistics.totalCount]}) this.tabledataSource.push({ name: [element.orgName, element.companyStatistics.totalCount] })
if(value[0].companyStatistics.buildingTypesCounts!=null){ if (value[0].companyStatistics.buildingTypesCounts != null) {
value[i].companyStatistics.buildingTypesCounts.forEach((build,bi,bvalue) => { value[i].companyStatistics.buildingTypesCounts.forEach((build, bi, bvalue) => {
if(i==0){ if (i == 0) {
this.displayedColumns.push(value[0].companyStatistics.buildingTypesCounts[bi].buildingTypeName) this.displayedColumns.push(value[0].companyStatistics.buildingTypesCounts[bi].buildingTypeName)
this.tabledataSource[0].name.push(value[0].companyStatistics.buildingTypesCounts[bi].count) this.tabledataSource[0].name.push(value[0].companyStatistics.buildingTypesCounts[bi].count)
}else{ } else {
this.tabledataSource[i].name.push(bvalue[bi].count) this.tabledataSource[i].name.push(bvalue[bi].count)
} }
/* this.tabledataSource.forEach((td,ti,tval)=>{ /* this.tabledataSource.forEach((td,ti,tval)=>{
tval[ti].name.push(item.count) tval[ti].name.push(item.count)
}) */ }) */
}); });
} }
}); });
} }
} }
else if(this.preparelevels==1){ else if (this.preparelevels == 1) {
//预案查询 //预案查询
this.yuanColumns=['组织名称', '总数'] this.yuanColumns = ['组织名称', '总数']
this.yuanTable=[{name:[0,0]}] this.yuanTable = [{ name: [0, 0] }]
if(this.planCategory.length!=0){ if (this.planCategory.length != 0) {
this.planCategory.forEach(element=>{ this.planCategory.forEach(element => {
if(element==1){ if (element == 1) {
this.yuanColumns.push('Ⅰ级') this.yuanColumns.push('Ⅰ级')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==2){ } else if (element == 2) {
this.yuanColumns.push('Ⅱ级') this.yuanColumns.push('Ⅱ级')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==3){ } else if (element == 3) {
this.yuanColumns.push('Ⅲ级') this.yuanColumns.push('Ⅲ级')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==4){ } else if (element == 4) {
this.yuanColumns.push('Ⅳ级') this.yuanColumns.push('Ⅳ级')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==5){ } else if (element == 5) {
this.yuanColumns.push('Ⅴ级') this.yuanColumns.push('Ⅴ级')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
} }
}) })
} }
if(this.reservePlanType.length!=0){ if (this.reservePlanType.length != 0) {
this.reservePlanType.forEach(element => { this.reservePlanType.forEach(element => {
if(element==1){ if (element == 1) {
this.yuanColumns.push('二维') this.yuanColumns.push('二维')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==2){ } else if (element == 2) {
this.yuanColumns.push('三维') this.yuanColumns.push('三维')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==4){ } else if (element == 4) {
this.yuanColumns.push('其他') this.yuanColumns.push('其他')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
}else if(element==16){ } else if (element == 16) {
this.yuanColumns.push('文本') this.yuanColumns.push('文本')
this.yuanTable[0].name.push(0) this.yuanTable[0].name.push(0)
} }
}); });
} }
data.forEach((element,i,value) => { data.forEach((element, i, value) => {
if(i==0){ if (i == 0) {
this.yuanTable[0].name[0]=value[0].orgName this.yuanTable[0].name[0] = value[0].orgName
this.yuanTable[0].name[1]=value[0].planStatistics.totalCount this.yuanTable[0].name[1] = value[0].planStatistics.totalCount
}else{ } else {
this.yuanTable.push({name:[value[i].orgName,value[i].planStatistics.totalCount]}) this.yuanTable.push({ name: [value[i].orgName, value[i].planStatistics.totalCount] })
} }
}); });
this.yuanTable.forEach((element,i,value)=>{ this.yuanTable.forEach((element, i, value) => {
if(i>0){ if (i > 0) {
for(let a=value[i].name.length;a<value[0].name.length;a++){ for (let a = value[i].name.length; a < value[0].name.length; a++) {
value[i].name.push(0) value[i].name.push(0)
} }
} }
}) })
this.yuanTable.forEach((yuan,yuani,yuanval)=>{ this.yuanTable.forEach((yuan, yuani, yuanval) => {
this.yuanColumns.forEach((th,thi,thvalu)=>{ this.yuanColumns.forEach((th, thi, thvalu) => {
data.forEach((element,i,value) => { data.forEach((element, i, value) => {
//预案级别数据 //预案级别数据
if(value[i].planStatistics.planCategoryStatistics!=null){ if (value[i].planStatistics.planCategoryStatistics != null) {
value[i].planStatistics.planCategoryStatistics.planCategories.forEach((jibie,ji,jval) => { value[i].planStatistics.planCategoryStatistics.planCategories.forEach((jibie, ji, jval) => {
if(thvalu[thi].indexOf(jval[ji].planCategoryName)!=-1&&yuani==i){ if (thvalu[thi].indexOf(jval[ji].planCategoryName) != -1 && yuani == i) {
yuanval[yuani].name[thi]=jval[ji].count yuanval[yuani].name[thi] = jval[ji].count
} }
}); });
} }
if(value[i].planStatistics.planTypeStatistics!=null){ if (value[i].planStatistics.planTypeStatistics != null) {
//预案类型数据 //预案类型数据
value[i].planStatistics.planTypeStatistics.planTypes.forEach((planlx,lxi,lxval) => { value[i].planStatistics.planTypeStatistics.planTypes.forEach((planlx, lxi, lxval) => {
if(thvalu[thi].indexOf(lxval[lxi].planTypeName)!=-1&&yuani==i){ if (thvalu[thi].indexOf(lxval[lxi].planTypeName) != -1 && yuani == i) {
yuanval[yuani].name[thi]=lxval[lxi].count yuanval[yuani].name[thi] = lxval[lxi].count
} }
}); });
} }
}); });
@ -240,211 +348,40 @@ export class CombinedQueryComponent implements OnInit {
}) })
} }
} }
//this.tabledataSource=data // console.log(this.yuanColumns)
// console.log(this.yuanTable)
console.log(this.yuanColumns) this.isMasklayer = false
console.log(this.yuanTable)
resolve(this.excelData) resolve(this.excelData)
} }
) )
}) })
} }
colorRgb(sColor) {
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = sColor.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange;
} else {
return sColor;
}
}
colorHex(rgb) {
var _this = rgb;
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (/^(rgb|RGB)/.test(_this)) {
var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
var strHex = "#";
for (var i = 0; i < aColor.length; i++) {
var hex: any = Number(aColor[i]).toString(16);
hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = _this;
}
return strHex;
} else if (reg.test(_this)) {
var aNum = _this.replace(/#/, "").split("");
if (aNum.length === 6) {
return _this;
} else if (aNum.length === 3) {
var numHex = "#";
for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
} else {
return _this;
}
}
gradientColor(startColor, endColor, step) {
let _this = this
let startRGB = _this.colorRgb(startColor);//转换为rgb数组模式
let startR = startRGB[0];
let startG = startRGB[1];
let startB = startRGB[2];
let endRGB = _this.colorRgb(endColor);
let endR = endRGB[0];
let endG = endRGB[1];
let endB = endRGB[2];
let sR = (endR - startR) / step;//总差值
let sG = (endG - startG) / step;
let sB = (endB - startB) / step;
var colorArr = [];
for (var i = 0; i < step; i++) {
//计算每一步的hex值
var hex = _this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
colorArr.push(hex);
}
return colorArr;
}
integrity(width) {
let _this = this
let style: any = {}
style.width = width + '%';
if (width < 30) {
let colorArr = this.gradientColor('#D50000', '#E53935', 30);
for (let i = 0; i < 30; i++) {
if (i == width) {
style.background = colorArr[i]
}
}
}
if (width >= 30 && width < 60) {
let colorArr = this.gradientColor('#FF9800', '#E65100', 30);
for (let i = 30; i < 60; i++) {
if (i == width) {
style.background = colorArr[i - 30]
}
}
}
if (width >= 60) {
let colorArr = this.gradientColor('#81C784', '#2E7D32', 41);
for (let i = 60; i <= 100; i++) {
if (i == width) {
style.background = colorArr[i - 60]
}
}
}
return style
}
integrityDetails(width, zong) {
let style: any = {}
style.width = (width / zong) * 100 + '%';
return style
}
//得到当前单位信息
getunitdata() {
this.http.get("/api/Account/Profiles").subscribe(
(data: any) => {
this.organizationName = data.organizationName
}
)
}
dwaddtime//单位查询开始时间
dwendtime//单位结束时间
yuanaddtime//预案查询开始时间
yuanendtime//预案查询结束时间
integrityScoreMin//完整度最小值 integrityScoreMin//完整度最小值
integrityScoreMax//完整度最大值 integrityScoreMax//完整度最大值
organizationName: any //当前单位组织机构名称
treedata: any //组织机构树型数据
newArr: any = [] newArr: any = []
newallorganizations: any //用于存储在原始数据基础上的每个机构增加children字段
//得到当前单位所在组织机构的tree型数据
getpresentOrganization() {
this.newallorganizations = this.allorganizations
this.newallorganizations.forEach(item => {
item.children = []
this.newallorganizations.forEach(element => {
if (element.parentId == item.id) {
item.children.push(element)
}
});
});
this.http.get("/api/Account/Profiles").subscribe(
(data: any) => {
this.organizationName = data.organizationName
if (this.organizationName) {
this.newallorganizations.forEach(item => {
if (item.name == this.organizationName) {
this.dataSource.data = [item]
}
});
} else {
this.dataSource.data = this.tree.toTree(this.treedata);
}
}
)
}
//获得所有组织机构
getOrganizations() {
this.http.get('/api/Organizations').subscribe(
(data: any) => {
this.allorganizations = data
this.treedata = this.tree.toTree(data);
this.getpresentOrganization();
}
)
}
//获得所有单位类型
getUnittype() {
this.http.get('/api/BuildingTypes/Simple').subscribe(
data => {
this.allunittype = data
}
)
}
//辖区中队div是否显示 //辖区中队div是否显示
isorganizationbox: boolean = false isorganizationbox: boolean = false
//点击辖区中队树，将选择的辖区中队添加到变量 //点击辖区中队树，将选择的辖区中队添加到变量
add(node) { add(node) {
this.isorganizationbox = false this.isorganizationbox = false
if(this.preparelevels==0){ if (this.preparelevels == 0) {
this.js = node.name this.js = node.name
this.jsId = node.id this.jsId = node.id
}else if(this.preparelevels==1){ } else if (this.preparelevels == 1) {
this.yuanjs=node.name this.yuanjs = node.name
this.yuanjsId=node.id this.yuanjsId = node.id
} }
} }
@ -460,101 +397,117 @@ export class CombinedQueryComponent implements OnInit {
closediv() { closediv() {
this.isorganizationbox = false this.isorganizationbox = false
} }
//查询 //查询
onSubmit(e) { onSubmit(e) {
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
if(this.dwendtime<this.dwaddtime||this.yuanaddtime>this.yuanendtime){ if (this.dwendtime < this.dwaddtime || this.yuanaddtime > this.yuanendtime) {
this.snackBar.open('开始时间不能早于结束时间', '确定', config); this.snackBar.open('开始时间不能早于结束时间', '确定', config);
} }
this.getAllPlanInfo(); this.getAllPlanInfo();
} }
companyName: any //单位名称
js: any //单位所选组织机构
jsId: any //单位所选组织机构的id
jscheck: boolean //单位所选组织机构勾选框
yuanjs: any //预案所选组织机构
yuanjsId: any //预案所选组织机构的id
yuanjscheck: boolean //预案所选组织机构勾选框
unittype=[] //单位类型
reservePlanType=[] //预案类型
preparelevel=[1] //单位状态
plcheck: boolean //编制级别勾选框
planCategory=[] //预案级别
integritySort=1 //单位排序字段
yuanintegritySort=1 //预案排序字段
//重置 //重置
reset() { reset() {
if(this.preparelevels==0){ if (this.preparelevels == 0) {
this.js = '' this.js = this.organizationName
this.jsId = '' this.jsId = this.organizationId
this.jscheck = false this.jscheck = true
this.unittype = [] this.unittype = []
this.preparelevel = [0] this.allunittype.forEach(element => {
this.dwaddtime = '' this.unittype.push(element.id)
this.dwendtime = '' });
}else if(this.preparelevels==1){ this.preparelevel = [1]
this.yuanaddtime='' this.dwaddtime = '2020-01-01'//单位查询开始时间
this.yuanendtime='' this.dwendtime = this.getNowFormatDate()//单位结束时间
this.yuanjs='' } else if (this.preparelevels == 1) {
this.yuanjsId='' this.yuanjs = this.organizationName
this.yuanjscheck=false this.yuanjsId = this.organizationId
this.reservePlanType = [] this.yuanaddtime = '2020-01-01'//预案查询开始时间
this.planCategory = [] this.yuanendtime = this.getNowFormatDate()//预案查询结束时间
this.yuanjscheck = true
this.reservePlanType = ['1', '2', '4', '16']
this.planCategory = ['1', '2', '3', '4', '5']
} }
//重新获取初始化列表 //重新获取初始化列表
this.getAllPlanInfo(); this.getAllPlanInfo();
} }
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) { //进入下一层
clicktd(key, element) {
// console.log(key)
// console.log(element)
// console.log(this.allorganizations)
if (key == 0) {
this.allorganizations.forEach(item => {
if (element === item.name) {
if (this.preparelevels == 0) {
this.js = element
this.jsId = item.id
} else if (this.preparelevels == 1) {
this.yuanjs = element
this.yuanjsId = item.id
}
this.getAllPlanInfo();
}
});
}
return window.btoa(unescape(encodeURIComponent(s))) }
}, exal() {
var uri = 'data:application/vnd.ms-excel;base64,',
format = function(s, c) { 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>',
return s.replace(/{(\w+)}/g, function(m, p) { base64 = function (s) {
return c[p]; 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) { return function (table, name) {
if (!table.nodeType) table = document.getElementById(table); if (!table.nodeType) table = document.getElementById(table);
var ctx = { var ctx = {
worksheet: name || 'Worksheet', worksheet: name || 'Worksheet',
table: table.innerHTML table: table.innerHTML
}; };
window.location.href = uri + base64(format(template, ctx)); window.location.href = uri + base64(format(template, ctx));
} }
} }
export(){ export() {
const httpOptions = { const httpOptions = {
responseType: 'blob' as 'json' responseType: 'blob' as 'json'
}; };
this.http.post(`/api/StatisticsAnalysis/Excel?queryMode=${this.preparelevels}`,this.excelData,httpOptions).subscribe((data:any) => { this.http.post(`/api/StatisticsAnalysis/Excel?queryMode=${this.preparelevels}`, this.excelData, httpOptions).subscribe((data: any) => {
// // 文件名中有中文 则对文件名进行转码 // // 文件名中有中文 则对文件名进行转码
const link = document.createElement('a'); const link = document.createElement('a');
const blob = new Blob([data], {type: 'application/vnd.ms-excel'}); const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
link.setAttribute('href', window.URL.createObjectURL(blob)); link.setAttribute('href', window.URL.createObjectURL(blob));
link.setAttribute('download', '报表统计'+'.xls'); link.setAttribute('download', '报表统计' + '.xls');
link.style.visibility = 'hidden'; link.style.visibility = 'hidden';
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();

653
src/styles.scss
Unescape View File

@ -1,26 +1,32 @@
@import "./app/theme.scss"; @import "./app/theme.scss";
@import "./app/ngZorroTree.css"; /* 引入组件样式 */ @import "./app/ngZorroTree.css";
/* 引入组件样式 */
// @import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */ // @import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/tree-select/style/index.min.css"; /* 引入组件样式 */ @import "~ng-zorro-antd/tree-select/style/index.min.css";
/* 引入组件样式 */
@font-face { @font-face {
font-family: Regular; font-family: Regular;
src: url("./assets/font/SourceHanSansCN-Regular.otf"); src: url("./assets/font/SourceHanSansCN-Regular.otf");
} }
html, html,
body { body {
touch-action: none; touch-action: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
font-family: Regular; font-family: Regular;
textarea {
font-family: Regular; textarea {
} font-family: Regular;
user-select: auto !important; }
user-select: auto !important;
} }
ul, ul,
ol, ol,
dl, dl,
@ -47,9 +53,10 @@ time,
mark, mark,
main, main,
canvas { canvas {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
b, b,
strong, strong,
i, i,
@ -60,91 +67,106 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
img { img {
border: none; border: none;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #000; color: #000;
} }
ul, ul,
ol, ol,
li { li {
list-style: none; list-style: none;
overflow-x: hidden; overflow-x: hidden;
} }
.clearfn:after { .clearfn:after {
content: ""; content: "";
clear: both; clear: both;
display: block; display: block;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
visibility: hidden; visibility: hidden;
} }
//root标签 //root标签
app-root { app-root {
height: 100%; height: 100%;
} }
h1 { h1 {
font-size: 16px; font-size: 16px;
} }
.mat-expansion-panel-body { .mat-expansion-panel-body {
padding: 0px !important; padding: 0px !important;
} }
.mat-expansion-indicator::after { .mat-expansion-indicator::after {
color: white; color: white;
} }
.example-sidenav .mat-drawer-inner-container { .example-sidenav .mat-drawer-inner-container {
overflow: hidden; overflow: hidden;
} }
table th.mat-header-cell:last-of-type, table th.mat-header-cell:last-of-type,
table td.mat-cell:last-of-type, table td.mat-cell:last-of-type,
table td.mat-footer-cell:last-of-type { table td.mat-footer-cell:last-of-type {
padding-right: 0px; padding-right: 0px;
} }
.mat-tab-body { .mat-tab-body {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.mat-content { .mat-content {
//可展开面板垂直居中 //可展开面板垂直居中
align-items: center; align-items: center;
} }
//滚动条样式 //滚动条样式
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
background-color: white; background-color: white;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #999; background-color: #999;
} }
//x轴滚动条隐藏 //x轴滚动条隐藏
.example-sidenav-content { .example-sidenav-content {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.mat-tab-body-wrapper { .mat-tab-body-wrapper {
height: 100%; height: 100%;
} }
.mat-tab-body-content { .mat-tab-body-content {
overflow: hidden !important; overflow: hidden !important;
} }
//gis单位信息tabs样式 //gis单位信息tabs样式
#gis { #gis {
.mat-tab-label { .mat-tab-label {
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
min-width: 80px; min-width: 80px;
padding: 0; padding: 0;
} }
} }
//可展开面板按钮颜色 //可展开面板按钮颜色
#gisbasicinfo, #gisbasicinfo,
#planlist, #planlist,
@ -153,45 +175,50 @@ table td.mat-footer-cell:last-of-type {
#keysite, #keysite,
#functionpartition, #functionpartition,
#realisticpicture { #realisticpicture {
.mat-expansion-indicator::after { .mat-expansion-indicator::after {
color: #333333; color: #333333;
} }
} }
#waitexamineergis { #waitexamineergis {
.mat-expansion-indicator::after { .mat-expansion-indicator::after {
color: #fff; color: #fff;
} }
mat-expansion-panel {
box-shadow: 0 0 black; mat-expansion-panel {
border: 1px solid #eef1f5; box-shadow: 0 0 black;
} border: 1px solid #eef1f5;
}
} }
//gis标点弹出框样式 //gis标点弹出框样式
#gispopupbox { #gispopupbox {
.btn { .btn {
width: 92px; width: 92px;
height: 36px; height: 36px;
background: #ffffff; background: #ffffff;
border: 1px solid #eef1f5; border: 1px solid #eef1f5;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
margin: 0 5px; margin: 0 5px;
font-size: 14px; font-size: 14px;
// font-family: Source Han Sans CN; // font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
line-height: 36px; line-height: 36px;
color: #0080ff; color: #0080ff;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
display: table-cell; //主要是这个属性 display: table-cell; //主要是这个属性
text-align: center; text-align: center;
img {
vertical-align: middle; img {
margin-right: 3px; vertical-align: middle;
padding-bottom: 2px; margin-right: 3px;
} padding-bottom: 2px;
} }
}
} }
//弹出框样式取消padding //弹出框样式取消padding
#shareDialog, #shareDialog,
#lookPlanDialog, #lookPlanDialog,
@ -202,250 +229,286 @@ table td.mat-footer-cell:last-of-type {
#addLinkageForce, #addLinkageForce,
#videodialog2, #videodialog2,
#gisImgDialog { #gisImgDialog {
padding: 0; padding: 0;
} }
#setPosition, #setPosition,
#map { #map {
.custom-content-marker { .custom-content-marker {
position: relative; position: relative;
width: 29px; width: 29px;
height: 36px; height: 36px;
} }
.custom-content-marker img { .custom-content-marker img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.custom-content-marker .btnbox { .custom-content-marker .btnbox {
position: absolute; position: absolute;
left: -20px; left: -20px;
bottom: -36px; bottom: -36px;
width: 68px; width: 68px;
height: 30px; height: 30px;
background: #ffffff; background: #ffffff;
border-radius: 60px; border-radius: 60px;
color: #ebebeb; color: #ebebeb;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5px; padding: 0 5px;
align-items: center; align-items: center;
img {
width: 20px; img {
height: 20px; width: 20px;
cursor: pointer; height: 20px;
} cursor: pointer;
} }
}
.custom-content-marker .close-btn:hover {
background: #666; .custom-content-marker .close-btn:hover {
} background: #666;
}
} }
#fireForceTree { #fireForceTree {
.mat-tree-node { .mat-tree-node {
min-height: 40px; min-height: 40px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
} }
.mat-icon-button {
width: 30px; .mat-icon-button {
height: 30px; width: 30px;
line-height: 30px; height: 30px;
} line-height: 30px;
}
} }
#linkageForcesSwiper { #linkageForcesSwiper {
.swiper-container { .swiper-container {
--swiper-navigation-size: 26px; /* 设置按钮大小 */ --swiper-navigation-size: 26px;
} /* 设置按钮大小 */
}
} }
.KedaPosImg { .KedaPosImg {
width: 30px; width: 30px;
height: 36px; height: 36px;
background-size: 100%; background-size: 100%;
background: no-repeat center; background: no-repeat center;
} }
.KedaPosIcon { .KedaPosIcon {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-size: 100%; background-size: 100%;
background: no-repeat center; background: no-repeat center;
} }
//点聚合自定义图片大小 //点聚合自定义图片大小
.clusterImg { .clusterImg {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
//水源采集点聚合 //水源采集点聚合
.clusterImgCollection { .clusterImgCollection {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
#unitBasicInfo { #unitBasicInfo {
.mat-expansion-indicator::after { .mat-expansion-indicator::after {
color: black; color: black;
} }
} }
td { td {
word-break: break-all; word-break: break-all;
} }
@media screen and (max-width: 1400px) { @media screen and (max-width: 1400px) {
.mat-toolbar-row,
.mat-toolbar-single-row { .mat-toolbar-row,
height: 50px !important; .mat-toolbar-single-row {
} height: 50px !important;
}
} }
#firefightingdevicelook, #firefightingdevicelook,
#firefightingdevice { #firefightingdevice {
.expansionheader { .expansionheader {
height: auto !important; height: auto !important;
} }
} }
#planContainer { #planContainer {
.custom-content-marker { .custom-content-marker {
position: relative; position: relative;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.custom-content-marker img { .custom-content-marker img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.custom-content-marker .close-btn { .custom-content-marker .close-btn {
position: absolute; position: absolute;
top: -6px; top: -6px;
right: -8px; right: -8px;
width: 15px; width: 15px;
height: 15px; height: 15px;
font-size: 12px; font-size: 12px;
background: #ccc; background: #ccc;
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 15px; line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2); box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
} }
.custom-content-marker .close-btn:hover { .custom-content-marker .close-btn:hover {
background: #666; background: #666;
} }
} }
#setUnitPosition, #setUnitPosition,
#setUnitPositionLook { #setUnitPositionLook {
.custom-content-marker { .custom-content-marker {
position: relative; position: relative;
// border: 1px solid red; // border: 1px solid red;
width: 68px; width: 68px;
height: 68px; height: 68px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
.positionimg {
width: 30px; .positionimg {
height: 36px; width: 30px;
} height: 36px;
} }
}
.custom-content-marker .btnbox {
position: absolute; .custom-content-marker .btnbox {
left: 0px; position: absolute;
bottom: 0px; left: 0px;
width: 68px; bottom: 0px;
height: 30px; width: 68px;
background: #ffffff; height: 30px;
border-radius: 60px; background: #ffffff;
color: #ebebeb; border-radius: 60px;
display: flex; color: #ebebeb;
justify-content: space-around; display: flex;
box-sizing: border-box; justify-content: space-around;
padding: 0 5px; box-sizing: border-box;
align-items: center; padding: 0 5px;
img { align-items: center;
width: 20px;
height: 20px; img {
cursor: pointer; width: 20px;
} height: 20px;
} cursor: pointer;
.custom-content-marker .btnbox2 { }
position: absolute; }
left: 0px;
bottom: 0px; .custom-content-marker .btnbox2 {
width: 68px; position: absolute;
height: 30px; left: 0px;
opacity: 0; bottom: 0px;
border-radius: 60px; width: 68px;
color: #ebebeb; height: 30px;
display: flex; opacity: 0;
justify-content: space-around; border-radius: 60px;
box-sizing: border-box; color: #ebebeb;
padding: 0 5px; display: flex;
align-items: center; justify-content: space-around;
} box-sizing: border-box;
padding: 0 5px;
.custom-content-marker .close-btn:hover { align-items: center;
background: #666; }
}
.custom-content-marker .close-btn:hover {
background: #666;
}
} }
.mat-paginator-container { .mat-paginator-container {
min-height: 40px !important; min-height: 40px !important;
} }
#carcontent { #carcontent {
.cartopbox { .cartopbox {
nz-tree-select { nz-tree-select {
width: 81.4%; width: 81.4%;
margin-right: 22px; margin-right: 22px;
} }
.ant-select-selector {
background-color: #f2f4f6; .ant-select-selector {
height: 40px; background-color: #f2f4f6;
border: none; height: 40px;
border-radius: 5px; border: none;
padding-top: 5px; border-radius: 5px;
box-sizing: border-box; padding-top: 5px;
width: 104.7%; box-sizing: border-box;
} width: 104.7%;
input{ }
height: 40px;
} input {
height: 40px;
}
}
.carTwoItemBox{
nz-tree-select { }
width: 71.6%;
margin-right: 22px; .carTwoItemBox {
} nz-tree-select {
.ant-select-selector { width: 71.6%;
height: 34px; margin-right: 22px;
border: none; }
border-radius: 4px;
border: 1px solid #EBEBEB; .ant-select-selector {
box-sizing: border-box; height: 34px;
padding-top: 1px; border: none;
width: 104.9%; border-radius: 4px;
} border: 1px solid #EBEBEB;
} box-sizing: border-box;
.carTwoItemBox2,.carTwoItemBox3{ padding-top: 1px;
nz-tree-select { width: 104.9%;
width: 64.3%; }
margin-right: 22px; }
}
.ant-select-selector { .carTwoItemBox2,
height: 34px; .carTwoItemBox3 {
border: none; nz-tree-select {
border-radius: 4px; width: 64.3%;
border: 1px solid #EBEBEB; margin-right: 22px;
box-sizing: border-box; }
padding-top: 1px;
width: 104.9%; .ant-select-selector {
} height: 34px;
} border: none;
} border-radius: 4px;
border: 1px solid #EBEBEB;
.carTreeDropdown{ box-sizing: border-box;
max-height: 239px; padding-top: 1px;
width: 104.9%;
}
}
}
.carTreeDropdown {
max-height: 239px;
}
#combinedQuery {
.mat-tab-body-content {
display: flex;
flex-direction: column;
}
} }

Write Preview
Loading…
Cancel
Save