34 changed files with 1159 additions and 227 deletions
@ -0,0 +1 @@
|
||||
<p>audit-inform-time works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-audit-inform-time', |
||||
templateUrl: './audit-inform-time.component.html', |
||||
styleUrls: ['./audit-inform-time.component.scss'] |
||||
}) |
||||
export class AuditInformTimeComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,37 @@
|
||||
<div class="box" id="detailsupdatecategory"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
处置 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<p>山东省某中化公司-淄博区域-淄博市第十六加油站</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件名称: 营业执照</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件编号: Z201800041501</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件有效期: 2018.12.02—2025.01.12</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>办理类型: 年度公示</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>有效期类型: 1523天</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>是否年检: 是</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件图片: <img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt="" |
||||
(click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p> |
||||
<div class="cutoffrule"></div> |
||||
<p>审批意见：</p> |
||||
<textarea style="background: #173350;height: 100px;width: 100%;border-radius: 0;border: 0;color: white;" name="" |
||||
id="" cols="30" rows="10"></textarea> |
||||
<div class="btnbox"> |
||||
<button nz-button type="button" class="ok" (click)="ok()">通过</button> |
||||
<button nz-button type="button" class="cancel" (click)="destroyModal()">驳回</button> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
@ -0,0 +1,91 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
box-sizing: border-box; |
||||
padding: 0 15px; |
||||
// max-height: 580px; |
||||
// overflow-y: auto; |
||||
|
||||
.circle { |
||||
width: 8px; |
||||
height: 8px; |
||||
background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.recordP { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.btnbox { |
||||
width: 100%; |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
button { |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
|
||||
button:nth-child(2) { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
.ok { |
||||
|
||||
background: rgba(0, 129, 255, 0.24); |
||||
} |
||||
|
||||
.cancel { |
||||
border: 1px solid #C4E2FC; |
||||
|
||||
background: rgba(255, 75, 101, 0.24); |
||||
|
||||
color: #C4E2FC; |
||||
// box-shadow: 0 0 3px 0 #fff inset; |
||||
} |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 12px 0; |
||||
|
||||
img { |
||||
width: 88px; |
||||
height: 56px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; |
||||
import Viewer from 'viewerjs'; |
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-audit-dispose', |
||||
templateUrl: './audit-dispose.component.html', |
||||
styleUrls: ['./audit-dispose.component.scss'] |
||||
}) |
||||
export class AuditDisposeComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
constructor(private modal: NzModalRef) { } |
||||
|
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
|
||||
destroyModal() { |
||||
this.modal.destroy(); |
||||
} |
||||
ok() { |
||||
this.modal.triggerOk() |
||||
} |
||||
//查看图片
|
||||
viewImg(url) { |
||||
// url.split('?')[0]
|
||||
let dom = document.getElementById(`viewerjs`) |
||||
let pObjs = dom.childNodes; |
||||
let node = document.createElement("img") |
||||
node.style.display = "none"; |
||||
node.src = url; |
||||
node.id = 'img' |
||||
dom.appendChild(node) |
||||
setTimeout(() => { |
||||
let viewer = new Viewer(document.getElementById(`viewerjs`), { |
||||
hidden: () => { |
||||
dom.removeChild(pObjs[0]); |
||||
viewer.destroy(); |
||||
} |
||||
}); |
||||
node.click(); |
||||
}, 0); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
<div class="box" id="inform"> |
||||
<div class="tablebox" id="tablebox"> |
||||
<nz-table *ngIf="tableScrollHeight" [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list" |
||||
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th [nzWidth]="'16%'"> |
||||
<span style="margin-left: 25%;">审批类型</span> |
||||
</th> |
||||
<th>审批信息</th> |
||||
<th>加油站名称</th> |
||||
<th>区域</th> |
||||
<th>省公司</th> |
||||
<th>提交时间</th> |
||||
<th>审批状态</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td> |
||||
<span style="margin-left: 25%;">审批类型</span> |
||||
</td> |
||||
<td>审批信息</td> |
||||
<td>加油站名称</td> |
||||
<td>区域</td> |
||||
<td>省公司</td> |
||||
<td>提交时间</td> |
||||
<td>审批状态</td> |
||||
<td class="operation"> |
||||
<span class="blueColor" (click)="dispose(item)">处置</span> |
||||
<span class="blueColor">详情</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,15 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.tablebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.operation { |
||||
span { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,54 @@
|
||||
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { Observable, fromEvent } from 'rxjs'; |
||||
import { debounceTime } from 'rxjs/operators'; |
||||
import { AuditDisposeComponent } from './audit-dispose/audit-dispose.component'; |
||||
@Component({ |
||||
selector: 'app-audit-ing', |
||||
templateUrl: './audit-ing.component.html', |
||||
styleUrls: ['./audit-ing.component.scss'] |
||||
}) |
||||
export class AuditIngComponent implements OnInit { |
||||
|
||||
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } |
||||
tableSpin = false |
||||
list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] |
||||
|
||||
tableScrollHeight |
||||
ngOnInit(): void { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
// 页面监听
|
||||
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
}); |
||||
} |
||||
|
||||
|
||||
|
||||
dispose(item) { |
||||
console.log('item', item) |
||||
const modal = this.modal.create({ |
||||
nzContent: AuditDisposeComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 600, |
||||
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: item |
||||
}, |
||||
nzFooter: null, |
||||
nzClosable: false, |
||||
nzOnOk: async () => { |
||||
|
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
modal.afterClose.subscribe(result => { }); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
<div class="audit" id="audit"> |
||||
<div class="title"> |
||||
<div class="titlebox"> |
||||
<img src="../../../assets/images/logosm.png" alt=""> |
||||
<div class="nav"> |
||||
<div class="navitem"> |
||||
<span *ngFor="let item of navList" [ngClass]="{'grey': selectedItem != item}" |
||||
(click)="selectNav(item)">{{item}}</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-audit-inform-time *ngIf="selectedItem == navList[2]"></app-audit-inform-time> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,76 @@
|
||||
.audit { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.title { |
||||
width: 100%; |
||||
height: 64px; |
||||
box-sizing: border-box; |
||||
padding: 0 28px; |
||||
margin: 13px 0; |
||||
position: relative; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 65px; |
||||
height: 65px; |
||||
} |
||||
|
||||
.nav { |
||||
flex: 1; |
||||
height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
// background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
.navitem { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
// background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
span { |
||||
margin-left: 25px; |
||||
color: #bce0ff; |
||||
font-size: 20px; |
||||
font-family: titlefont; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.grey { |
||||
color: #68829F; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 16px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
padding: 0 40px 20px 40px; |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-audit-nav', |
||||
templateUrl: './audit-nav.component.html', |
||||
styleUrls: ['./audit-nav.component.scss'] |
||||
}) |
||||
export class AuditNavComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
|
||||
navList = ['审批', '历史纪录', '通知时间'] |
||||
selectedItem = '审批' |
||||
selectNav(item) { |
||||
this.selectedItem = item |
||||
} |
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>audit-record works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-audit-record', |
||||
templateUrl: './audit-record.component.html', |
||||
styleUrls: ['./audit-record.component.scss'] |
||||
}) |
||||
export class AuditRecordComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>file-license-list works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-file-license-list', |
||||
templateUrl: './file-license-list.component.html', |
||||
styleUrls: ['./file-license-list.component.scss'] |
||||
}) |
||||
export class FileLicenseListComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,77 @@
|
||||
<div class="box"> |
||||
<div class="search"> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||
[nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
<div class="tablebox" id="tablebox"> |
||||
<nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false" |
||||
[nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th [nzWidth]="'20%'"> |
||||
<div |
||||
style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;"> |
||||
|
||||
</div>加油站名称 |
||||
</th> |
||||
<th>区域</th> |
||||
<th>所属公司</th> |
||||
<th style="text-align: center;">联系人</th> |
||||
<th style="text-align: center;">联系电话</th> |
||||
<th style="text-align: center;">油站等级</th> |
||||
<th style="text-align: center;">经营品类</th> |
||||
<th [nzWidth]="'6%'" style="text-align: center;">油机数量</th> |
||||
<th [nzWidth]="'6%'" style="text-align: center;">车道数量</th> |
||||
<th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th> |
||||
<th [nzWidth]="'5%'">操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td nzEllipsis [title]="item.stationName"> |
||||
<div |
||||
style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;"> |
||||
<img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo"> |
||||
</div> |
||||
{{item.stationName}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.locationName">{{item.locationName}}</td> |
||||
<td nzEllipsis [title]="item.companyName">{{item.companyName}}</td> |
||||
<td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td> |
||||
<td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td> |
||||
<td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td> |
||||
<td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td> |
||||
<td style="text-align: center;">{{item.gasStationCount}}</td> |
||||
<td style="text-align: center;">{{item.laneCount}}</td> |
||||
<td style="text-align: center;"> |
||||
<span>{{item.tankVolume}}</span> |
||||
<span>{{item.tankVolume ? 'm³' : null}}</span> |
||||
</td> |
||||
<td> |
||||
<span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,43 @@
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding-left: 22px; |
||||
padding-right: 33px; |
||||
width: 100%; |
||||
height: 32px; |
||||
margin: 12px 0; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
input { |
||||
background: none; |
||||
border: 1px solid #91ccff; |
||||
color: #fff; |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 22%; |
||||
} |
||||
|
||||
.btn { |
||||
width: 5%; |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
} |
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
} |
||||
@ -0,0 +1,123 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree'; |
||||
import { Router } from '@angular/router'; |
||||
import { NavChangeService } from 'src/app/service/navChange.service'; |
||||
import { fromEvent } from 'rxjs'; |
||||
import { debounceTime } from 'rxjs/operators'; |
||||
|
||||
@Component({ |
||||
selector: 'app-oil-station-list', |
||||
templateUrl: './oil-station-list.component.html', |
||||
styleUrls: ['./oil-station-list.component.scss'] |
||||
}) |
||||
export class OilStationListComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
||||
|
||||
tableScrollHeight |
||||
|
||||
ngOnInit(): void { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
|
||||
console.log('tableScrollHeight', this.tableScrollHeight) |
||||
// 页面监听
|
||||
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
}); |
||||
this.validateForm = this.fb.group({ |
||||
name: [null] |
||||
}); |
||||
|
||||
this.tableSpin = true |
||||
} |
||||
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) { |
||||
console.log('需要加载数据了', event) |
||||
this.SkipCount = String(Number(this.SkipCount) + 50) |
||||
await this.getGasStation() |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.list = [] |
||||
this.SkipCount = '0' |
||||
this.getGasStation() |
||||
} |
||||
resetForm(e: MouseEvent): void { |
||||
e.preventDefault(); |
||||
this.validateForm.reset(); |
||||
for (const key in this.validateForm.controls) { |
||||
this.validateForm.controls[key].markAsPristine(); |
||||
this.validateForm.controls[key].updateValueAndValidity(); |
||||
} |
||||
this.list = [] |
||||
this.SkipCount = '0' |
||||
this.getGasStation() |
||||
} |
||||
|
||||
|
||||
|
||||
look(item) { |
||||
let gastionobj = { |
||||
organization: { |
||||
displayName: item.stationName, |
||||
isGasStation: true, |
||||
id: item.organizationUnitId |
||||
} |
||||
} |
||||
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj)) |
||||
this.router.navigate(['/todaywarning/petrolStation']) |
||||
let obj = { |
||||
name: 'oilstation' |
||||
} |
||||
this.navChangeService.sendMessage(obj);//发布一条消息
|
||||
} |
||||
|
||||
tableSpin: boolean |
||||
totalCount: any //总数
|
||||
//获取点击组织机构的所有加油站
|
||||
SkipCount: string = '0' |
||||
MaxResultCount: string = '100' |
||||
|
||||
orId |
||||
list: any = [] |
||||
async getGasStation() { |
||||
let params = { |
||||
StationName: this.validateForm.value.name, |
||||
OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')), |
||||
IsContainsChildren: 'true', |
||||
SkipCount: this.SkipCount, |
||||
MaxResultCount: this.MaxResultCount, |
||||
Sorting: ' BuildingBasicInfo.Id asc' |
||||
} |
||||
this.tableSpin = true |
||||
await new Promise((resolve, reject) => { |
||||
this.http.get('/api/services/app/GasStation/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
this.list = this.list.concat(data.result.items); |
||||
this.list = [...this.list] |
||||
this.tableSpin = false |
||||
resolve(data) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
//父组件调用子组件方法
|
||||
public onChildMethod() { |
||||
this.getGasStation() |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@
|
||||
<div class="box"> |
||||
<div class="search"> |
||||
<div class="legendbox"> |
||||
<div class="legendItem"> |
||||
<div style="background: #4BFFD4;box-shadow: 0px 2px 6px 1px #4BFFD4;"></div>办理提醒 |
||||
</div> |
||||
<div class="legendItem"> |
||||
<div style="background: #FFBD4B;box-shadow: 0px 2px 6px 1px #FFBD4B;"></div>临期提醒 |
||||
</div> |
||||
<div class="legendItem"> |
||||
<div style="background: #FF4B65;box-shadow: 0px 2px 6px 1px #FF4B65;"></div>逾期提醒 |
||||
</div> |
||||
</div> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||
[nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
<div class="tablebox" id="tablebox"> |
||||
<nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false" |
||||
[nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th [nzWidth]="'20%'"> |
||||
<div |
||||
style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;"> |
||||
|
||||
</div>加油站名称 |
||||
</th> |
||||
<th>区域</th> |
||||
<th>所属公司</th> |
||||
<th style="text-align: center;">联系人</th> |
||||
<th style="text-align: center;">联系电话</th> |
||||
<th style="text-align: center;">油站等级</th> |
||||
<th style="text-align: center;">经营品类</th> |
||||
<th [nzWidth]="'6%'" style="text-align: center;">油机数量</th> |
||||
<th [nzWidth]="'6%'" style="text-align: center;">车道数量</th> |
||||
<th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th> |
||||
<th [nzWidth]="'5%'">操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td nzEllipsis [title]="item.stationName"> |
||||
<div |
||||
style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;"> |
||||
<img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo"> |
||||
</div> |
||||
{{item.stationName}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.locationName">{{item.locationName}}</td> |
||||
<td nzEllipsis [title]="item.companyName">{{item.companyName}}</td> |
||||
<td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td> |
||||
<td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td> |
||||
<td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td> |
||||
<td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td> |
||||
<td style="text-align: center;">{{item.gasStationCount}}</td> |
||||
<td style="text-align: center;">{{item.laneCount}}</td> |
||||
<td style="text-align: center;"> |
||||
<span>{{item.tankVolume}}</span> |
||||
<span>{{item.tankVolume ? 'm³' : null}}</span> |
||||
</td> |
||||
<td> |
||||
<span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,62 @@
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding-left: 38px; |
||||
padding-right: 35px; |
||||
width: 100%; |
||||
height: 32px; |
||||
margin: 12px 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.legendbox{ |
||||
display: flex; |
||||
align-items: center; |
||||
color: #FFFFFF; |
||||
flex: 1; |
||||
.legendItem{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 12px; |
||||
div{ |
||||
width: 8px; |
||||
height: 8px; |
||||
margin-right: 3px; |
||||
} |
||||
} |
||||
} |
||||
form { |
||||
flex: 1; |
||||
height: 32px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
input { |
||||
background: none; |
||||
border: 1px solid #91ccff; |
||||
color: #fff; |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 35%; |
||||
} |
||||
|
||||
.btn { |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
} |
||||
@ -0,0 +1,123 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree'; |
||||
import { Router } from '@angular/router'; |
||||
import { NavChangeService } from 'src/app/service/navChange.service'; |
||||
import { fromEvent } from 'rxjs'; |
||||
import { debounceTime } from 'rxjs/operators'; |
||||
@Component({ |
||||
selector: 'app-update-license-list', |
||||
templateUrl: './update-license-list.component.html', |
||||
styleUrls: ['./update-license-list.component.scss'] |
||||
}) |
||||
export class UpdateLicenseListComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
||||
|
||||
tableScrollHeight |
||||
|
||||
ngOnInit(): void { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
|
||||
console.log('tableScrollHeight', this.tableScrollHeight) |
||||
// 页面监听
|
||||
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => { |
||||
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px' |
||||
}); |
||||
this.validateForm = this.fb.group({ |
||||
name: [null] |
||||
}); |
||||
|
||||
this.tableSpin = true |
||||
} |
||||
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) { |
||||
console.log('需要加载数据了', event) |
||||
this.SkipCount = String(Number(this.SkipCount) + 50) |
||||
await this.getGasStation() |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.list = [] |
||||
this.SkipCount = '0' |
||||
this.getGasStation() |
||||
} |
||||
resetForm(e: MouseEvent): void { |
||||
e.preventDefault(); |
||||
this.validateForm.reset(); |
||||
for (const key in this.validateForm.controls) { |
||||
this.validateForm.controls[key].markAsPristine(); |
||||
this.validateForm.controls[key].updateValueAndValidity(); |
||||
} |
||||
this.list = [] |
||||
this.SkipCount = '0' |
||||
this.getGasStation() |
||||
} |
||||
|
||||
|
||||
|
||||
look(item) { |
||||
let gastionobj = { |
||||
organization: { |
||||
displayName: item.stationName, |
||||
isGasStation: true, |
||||
id: item.organizationUnitId |
||||
} |
||||
} |
||||
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj)) |
||||
this.router.navigate(['/todaywarning/petrolStation']) |
||||
let obj = { |
||||
name: 'oilstation' |
||||
} |
||||
this.navChangeService.sendMessage(obj);//发布一条消息
|
||||
} |
||||
|
||||
tableSpin: boolean |
||||
totalCount: any //总数
|
||||
//获取点击组织机构的所有加油站
|
||||
SkipCount: string = '0' |
||||
MaxResultCount: string = '100' |
||||
|
||||
orId |
||||
list: any = [] |
||||
async getGasStation() { |
||||
let params = { |
||||
StationName: this.validateForm.value.name, |
||||
OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')), |
||||
IsContainsChildren: 'true', |
||||
SkipCount: this.SkipCount, |
||||
MaxResultCount: this.MaxResultCount, |
||||
Sorting: ' BuildingBasicInfo.Id asc' |
||||
} |
||||
this.tableSpin = true |
||||
await new Promise((resolve, reject) => { |
||||
this.http.get('/api/services/app/GasStation/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
this.list = this.list.concat(data.result.items); |
||||
this.list = [...this.list] |
||||
this.tableSpin = false |
||||
resolve(data) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
//父组件调用子组件方法
|
||||
public onChildMethod() { |
||||
this.getGasStation() |
||||
} |
||||
} |
||||
Loading…
Reference in new issue