Browse Source

[完善]修改统计表格位置

beijing
邵佳豪 3 years ago
parent
commit
b5a135bdb8
  1. 9
      src/app/pages/audit/audit-nav/audit-nav.component.html
  2. 4
      src/app/pages/audit/audit-nav/audit-nav.component.ts
  3. 25
      src/app/pages/plan-admin/file-license-list/file-license-list.component.html
  4. 8
      src/app/pages/plan-admin/file-license-list/file-license-list.component.scss
  5. 119
      src/app/pages/plan-admin/file-license-list/file-license-list.component.ts
  6. 10
      src/app/pages/plan-admin/plan-admin.component.html
  7. 30
      src/app/pages/plan-admin/update-license-list/update-license-list.component.html
  8. 21
      src/app/pages/plan-admin/update-license-list/update-license-list.component.scss
  9. 104
      src/app/pages/plan-admin/update-license-list/update-license-list.component.ts
  10. 4
      src/app/system-management/file-of-license/file-of-license.component.html
  11. 4
      src/app/system-management/update-of-license/update-of-license.component.html
  12. 8
      src/theme.less

9
src/app/pages/audit/audit-nav/audit-nav.component.html

@ -8,16 +8,15 @@
(click)="selectNav(item)">{{item}}</span>
<span *ngIf="isLevel == 2" [ngClass]="{'grey': selectedItem != '预警规则'}"
(click)="selectNav('预警规则')">预警规则</span>
<!-- <span *ngIf="isLevel == 2" [ngClass]="{'grey': selectedItem != '年检设置'}"
(click)="selectNav('年检设置')">年检设置</span> -->
</div>
</div>
</div>
</div>
<div class="content">
<app-audit-ing *ngIf="selectedItem == navList[0]"></app-audit-ing>
<app-audit-record *ngIf="selectedItem == navList[1]"></app-audit-record>
<app-update-license-list *ngIf="selectedItem == navList[0]" #child2></app-update-license-list>
<app-file-license-list *ngIf="selectedItem == navList[1]" #child3></app-file-license-list>
<app-audit-ing *ngIf="selectedItem == navList[2]"></app-audit-ing>
<app-audit-record *ngIf="selectedItem == navList[3]"></app-audit-record>
<app-audit-inform-time *ngIf="selectedItem == '预警规则'"></app-audit-inform-time>
<!-- <app-annual-inspection *ngIf="selectedItem == '年检设置'"></app-annual-inspection> -->
</div>
</div>

4
src/app/pages/audit/audit-nav/audit-nav.component.ts

@ -10,8 +10,8 @@ export class AuditNavComponent implements OnInit {
constructor() { }
navList = ['待办', '审批记录']
selectedItem = '待办'
navList = ['经营类证照', '资产类证照','待办', '审批记录']
selectedItem = '经营类证照'
selectNav(item) {
this.selectedItem = item
}

25
src/app/pages/plan-admin/file-license-list/file-license-list.component.html

@ -1,8 +1,25 @@
<div class="box">
<div class="box" id="statisticsList">
<div class="search">
<div class="legendbox">
</div>
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"
[nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-input-group>
@ -21,6 +38,12 @@
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="exportExcel()"><i nz-icon
[nzType]="'file'"></i>导出文档</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="tablebox" id="tablebox">

8
src/app/pages/plan-admin/file-license-list/file-license-list.component.scss

@ -1,10 +1,9 @@
.search {
box-sizing: border-box;
padding-left: 38px;
padding-right: 35px;
padding-right: 5px;
width: 100%;
height: 32px;
margin: 12px 0;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
@ -41,7 +40,8 @@
}
.searchParams {
width: 35%;
width: 30%;
margin-left: 16px;
}
.btn {

119
src/app/pages/plan-admin/file-license-list/file-license-list.component.ts

@ -11,6 +11,7 @@ import { debounceTime } from 'rxjs/operators';
import 'linqjs';
import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'app-file-license-list',
@ -20,27 +21,63 @@ import { NzModalService } from 'ng-zorro-antd/modal';
export class FileLicenseListComponent implements OnInit {
validateForm!: FormGroup;
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { }
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router, private message: NzMessageService) { }
tableScrollHeight
ngOnInit(): void {
async ngOnInit(): Promise<void> {
this.tableScrollHeight = '100px'
console.log('tableScrollHeight', this.tableScrollHeight)
// 页面监听
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
});
this.validateForm = this.fb.group({
organization: [null],
name: [null]
});
this.tableSpin = true
await this.getAllOrganization()
this.getStationLicenses()
}
ngAfterViewInit(): void {
//获取所有组织机构
nodes: any = []
async getAllOrganization() {
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
let params = {
OrganizationUnitId: OrganizationUnitId,
IsContainsChildren: "true"
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/Organization/GetAll', {
params: params
}).subscribe((data: any) => {
data.result.items.forEach(element => {
if (element.id == OrganizationUnitId) {
element.parentId = null
}
element.key = element.id
element.title = element.displayName
});
this.nodes = [...this.toTree.toTree(data.result.items)]
this.validateForm.patchValue({
organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
});
resolve(data)
})
})
}
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
if (this.totalCount > this.list.length) {
@ -68,6 +105,9 @@ export class FileLicenseListComponent implements OnInit {
this.validateForm.controls[key].markAsPristine();
this.validateForm.controls[key].updateValueAndValidity();
}
this.validateForm.patchValue({
organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
});
this.list = []
this.SkipCount = '0'
this.getStationLicenses()
@ -84,7 +124,7 @@ export class FileLicenseListComponent implements OnInit {
async getStationLicenses() {
let params = {
StationName: this.validateForm.value.name,
OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')),
OrganizationUnitId: this.validateForm.value.organization,
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount,
@ -124,18 +164,16 @@ export class FileLicenseListComponent implements OnInit {
});
this.list = this.list.concat(arr);
this.list = [...this.list]
console.log('证照表格', this.list)
this.tableSpin = false
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
this.list = this.list.concat(arr);
this.list = [...this.list]
console.log('证照表格', this.list)
this.tableSpin = false
resolve(data)
})
@ -148,37 +186,28 @@ export class FileLicenseListComponent implements OnInit {
}
lookDetails(i) {
// console.log(i)
// let params = {
// Id: i.licenseId
// }
// this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe((data: any) => {
// console.log('证照信息', data)
// const modal = this.modal.create({
// nzContent: DetailsUpdateCategoryComponent,
// nzViewContainerRef: this.viewContainerRef,
// nzWidth: 450,
// nzBodyStyle: {
// 'border': '1px solid #91CCFF',
// 'border-radius': '0px',
// 'padding': '7px',
// 'box-shadow': '0 0 8px 0 #fff',
// 'background-image': 'linear-gradient(#003665, #000f25)'
// },
// nzComponentParams: {
// data: data.result
// },
// nzFooter: null,
// nzClosable: false,
// nzOnOk: async () => {
// }
// });
// const instance = modal.getContentComponent();
// modal.afterClose.subscribe(result => { });
// })
exportExcel() {
// console.log(this.validateForm)
const httpOptions = {
responseType: 'blob' as 'json',
params: {
OrganizationUnitId: this.validateForm.value.organization
}
};
this.http.get(`/api/services/app/StationFileLicense/ExportStationLicenses`, httpOptions).subscribe((data: any) => {
// console.log('导出成功')
// 文件名中有中文 则对文件名进行转码
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);
this.message.create('success', `导出成功`);
}, err => {
this.message.create('error', `导出失败`);
})
}
}

10
src/app/pages/plan-admin/plan-admin.component.html

@ -30,9 +30,9 @@
<img src="../../../assets/images/logosm.png" alt="">
<div class="content">
<div class="contentitem">
<span class="grey" (click)="selectTab(0)" [ngClass]="{'selectedItem': selectedTab == 0}">油站管理</span>
<span class="grey" (click)="selectTab(1)" [ngClass]="{'selectedItem': selectedTab == 1}">经营类证照</span>
<span class="grey" (click)="selectTab(2)" [ngClass]="{'selectedItem': selectedTab == 2}">资产类证照</span>
<span class="grey" [ngClass]="{'selectedItem': selectedTab == 0}">油站管理</span>
<!-- <span class="grey" (click)="selectTab(1)" [ngClass]="{'selectedItem': selectedTab == 1}">经营类证照</span>
<span class="grey" (click)="selectTab(2)" [ngClass]="{'selectedItem': selectedTab == 2}">资产类证照</span> -->
</div>
</div>
</div>
@ -40,11 +40,11 @@
<div class="tabbox" *ngIf="selectedTab == 0">
<app-oil-station-list style="width: 100%;height: 100%;" #child></app-oil-station-list>
</div>
<div class="tabbox" *ngIf="selectedTab == 1">
<!-- <div class="tabbox" *ngIf="selectedTab == 1">
<app-update-license-list style="width: 100%;height: 100%;" #child2></app-update-license-list>
</div>
<div class="tabbox" *ngIf="selectedTab == 2">
<app-file-license-list style="width: 100%;height: 100%;" #child3></app-file-license-list>
</div>
</div> -->
</div>
</div>

30
src/app/pages/plan-admin/update-license-list/update-license-list.component.html

@ -1,4 +1,4 @@
<div class="box">
<div class="box" id="statisticsList">
<div class="search">
<div class="legendbox">
<div class="legendItem">
@ -12,6 +12,25 @@
</div>
</div>
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"
[nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-input-group>
@ -30,6 +49,12 @@
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="exportExcel()"><i nz-icon
[nzType]="'file'"></i>导出文档</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="tablebox" id="tablebox">
@ -51,7 +76,8 @@
<td *ngFor="let i of item">
<ng-container *ngIf="i.value; else elseTemplate">
<ng-container *ngIf="i.value.endDate; else elseTemplate">
<span (click)="lookDetails(i.value)" style="cursor: pointer;" [ngClass]="{'green': i.value.licenseViolationType == 1,'yellow': i.value.licenseViolationType == 2,'red': i.value.licenseViolationType == 3}">
<span (click)="lookDetails(i.value)" style="cursor: pointer;"
[ngClass]="{'green': i.value.licenseViolationType == 1,'yellow': i.value.licenseViolationType == 2,'red': i.value.licenseViolationType == 3}">
{{i.value.endDate | date:"yyyy-MM-dd"}}
</span>
</ng-container>

21
src/app/pages/plan-admin/update-license-list/update-license-list.component.scss

@ -1,10 +1,16 @@
.box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.search {
box-sizing: border-box;
padding-left: 38px;
padding-right: 35px;
padding-right: 5px;
width: 100%;
height: 32px;
margin: 12px 0;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
@ -41,7 +47,8 @@
}
.searchParams {
width: 35%;
width: 30%;
margin-left: 16px;
}
.btn {
@ -50,12 +57,6 @@
}
}
.box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.tablebox {
flex: 1;

104
src/app/pages/plan-admin/update-license-list/update-license-list.component.ts

@ -11,6 +11,7 @@ import { debounceTime } from 'rxjs/operators';
import 'linqjs';
import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'app-update-license-list',
templateUrl: './update-license-list.component.html',
@ -19,29 +20,64 @@ import { NzModalService } from 'ng-zorro-antd/modal';
export class UpdateLicenseListComponent implements OnInit {
validateForm!: FormGroup;
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { }
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router, private message: NzMessageService) { }
tableScrollHeight
ngOnInit(): void {
async ngOnInit(): Promise<void> {
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
console.log('tableScrollHeight', this.tableScrollHeight)
this.tableScrollHeight = '100px'
// 页面监听
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
});
this.validateForm = this.fb.group({
organization: [null],
name: [null]
});
this.tableSpin = true
await this.getAllOrganization()
this.getStationLicenses()
}
//获取所有组织机构
nodes: any = []
async getAllOrganization() {
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
let params = {
OrganizationUnitId: OrganizationUnitId,
IsContainsChildren: "true"
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/Organization/GetAll', {
params: params
}).subscribe((data: any) => {
data.result.items.forEach(element => {
if (element.id == OrganizationUnitId) {
element.parentId = null
}
element.key = element.id
element.title = element.displayName
});
this.nodes = [...this.toTree.toTree(data.result.items)]
this.validateForm.patchValue({
organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
});
resolve(data)
})
})
}
ngAfterViewInit(): void {
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
if (this.totalCount > this.list.length) {
@ -71,6 +107,9 @@ export class UpdateLicenseListComponent implements OnInit {
}
this.list = []
this.SkipCount = '0'
this.validateForm.patchValue({
organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
});
this.getStationLicenses()
}
@ -79,17 +118,14 @@ export class UpdateLicenseListComponent implements OnInit {
//获取点击组织机构的所有加油站
SkipCount: string = '0'
MaxResultCount: string = '100'
orId
list: any = []
async getStationLicenses() {
let params = {
StationName: this.validateForm.value.name,
OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')),
OrganizationUnitId: this.validateForm.value.organization,
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount,
// Sorting: ' BuildingBasicInfo.Id asc'
MaxResultCount: this.MaxResultCount
}
this.tableSpin = true
await new Promise((resolve, reject) => {
@ -122,22 +158,21 @@ export class UpdateLicenseListComponent implements OnInit {
}
let atLastArr = newArr.concat(newElement);
arr.push(atLastArr)
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
}, 0);
});
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
this.list = this.list.concat(arr);
this.list = [...this.list]
console.log('证照表格', this.list)
this.tableSpin = false
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
}, 0);
resolve(data)
})
})
@ -182,4 +217,31 @@ export class UpdateLicenseListComponent implements OnInit {
}
exportExcel() {
// console.log(this.validateForm)
const httpOptions = {
responseType: 'blob' as 'json',
params: {
OrganizationUnitId: this.validateForm.value.organization
}
};
this.http.get(`/api/services/app/StationValidityLicense/ExportStationLicenses`, httpOptions).subscribe((data: any) => {
// console.log('导出成功')
// 文件名中有中文 则对文件名进行转码
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);
this.message.create('success', `导出成功`);
}, err => {
this.message.create('error', `导出失败`);
})
}
}

4
src/app/system-management/file-of-license/file-of-license.component.html

@ -1,7 +1,7 @@
<div class="licenseBox" id="licenseBox">
<div class="topbox">
<div class="lefttop">
<span>资产类证列表</span>
<span>资产类证列表</span>
</div>
<div class="righttop">
<button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle"
@ -12,7 +12,7 @@
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999' [nzLoading]="isLoading">
<thead>
<tr>
<th style="padding-left: 40px;">资产类证</th>
<th style="padding-left: 40px;">资产类证</th>
<th>操作</th>
</tr>
</thead>

4
src/app/system-management/update-of-license/update-of-license.component.html

@ -1,7 +1,7 @@
<div class="licenseBox" id="licenseBox2">
<div class="topbox">
<div class="lefttop">
<span>更新类证件列表</span>
<span>经营类证照列表</span>
</div>
<div class="righttop">
<button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle"
@ -13,7 +13,7 @@
[nzLoading]="isLoading">
<thead>
<tr>
<th style="padding-left: 40px;">更新类证件</th>
<th style="padding-left: 40px;">经营类证照</th>
<th>办理提醒时间</th>
<th>临期提醒时间</th>
<th>办理类型</th>

8
src/theme.less

@ -377,7 +377,8 @@
#inform,
#updateLicense,
#fileLicense,
#histories {
#histories,
#statisticsList {
::-webkit-input-placeholder {
/* WebKit browsers */
color: #345d85;
@ -480,6 +481,11 @@
.ant-table-tbody>tr>td:hover {
background: none;
}
.ant-select,
.ant-select-arrow {
color: #fff;
}
}
//蓝色 表格 tree-通知时间

Loading…
Cancel
Save