shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]卸油统计，证照预警统计表格完善

beijing
邵佳豪 3 years ago
parent
8ee9acaff0
commit
838541881e
6 changed files with 135 additions and 351 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
  2. 107
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
  3. 22
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
  4. 103
      src/app/pages/warning-statistics-list/warning-statistics-list.component.html
  5. 112
      src/app/pages/warning-statistics-list/warning-statistics-list.component.scss
  6. 21
      src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

121
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
Unescape View File

@ -104,73 +104,43 @@
</nz-form-item>
</form>
</div>
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1">
<span style="margin-left: 15px;">序号</span>
</div>
<div nz-col nzSpan="3">
<span>油站名称</span>
</div>
<div nz-col nzSpan="2">
公司名称
</div>
<div nz-col nzSpan="4">
区域
</div>
<div nz-col nzSpan="3">
卸油开始时间
</div>
<div nz-col nzSpan="3">
卸油结束时间
</div>
<div nz-col nzSpan="3" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
卸油准备
</div>
<div nz-col nzSpan="3" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
卸油操作
</div>
<!-- <div nz-col nzSpan="3" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
全流程准备预警节点数量
</div> -->
<div nz-col nzSpan="1">
状态
</div>
<div nz-col nzSpan="1">
操作
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list;let key = index">
<div nz-col nzSpan="1">
<span style="margin-left: 15px;">{{key + 1}}</span>
</div>
<div nz-col nzSpan="3" [title]="item.gasStation.stationName">
<span>{{item.gasStation.stationName}}</span>
</div>
<div nz-col nzSpan="2" [title]="item.gasStation.companyName">
{{item.gasStation.companyName}}
</div>
<div nz-col nzSpan="4" [title]="item.gasStation.locationName">
{{item.gasStation.locationName}}
</div>
<div nz-col nzSpan="3">
<div class="tablebox" id="tablebox">
<nz-table [nzLoading]="tableSpin" [nzPageSize]='99999' #headerTable [nzData]="list"
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null'
nzTableLayout="fixed">
<thead>
<tr>
<th nzWidth="5%" style="text-align: center;">序号</th>
<th>油站名称</th>
<th>公司名称</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 nzEllipsis [title]="key + 1" style="text-align: center;">
{{key + 1}}
</td>
<td nzEllipsis [title]="item.gasStation.stationName">
{{item.gasStation.stationName}}
</td>
<td nzEllipsis [title]="item.gasStation.companyName">{{item.gasStation.companyName}}</td>
<td nzEllipsis [title]="item.gasStation.locationName">{{item.gasStation.locationName}}</td>
<td nzEllipsis>
{{item.startTime ? (item.startTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
</div>
<div nz-col nzSpan="3">
</td>
<td nzEllipsis>
{{item.endTime ? (item.endTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
</div>
<div nz-col nzSpan="3">
{{item.proccessBeforeCount}}
</div>
<div nz-col nzSpan="3">
{{item.proccessingCount}}
</div>
<!-- <div nz-col nzSpan="3">
{{item.allProccessCount}}
</div> -->
<div nz-col nzSpan="1">
</td>
<td nzEllipsis>{{item.proccessBeforeCount}}</td>
<td nzEllipsis>{{item.proccessingCount}}</td>
<td>
<ng-container *ngIf="item.endTime; else elseTemplate">
<ng-container
*ngIf="item.proccessBeforeCount == 0 && item.proccessingCount == 0; else elseTemplate">
@ -183,22 +153,13 @@
<ng-template #elseTemplate>
<span style="color: #4BFFD4;">卸油中</span>
</ng-template>
</div>
<div nz-col nzSpan="1">
</td>
<td>
<span style="color: #36A2FF;cursor: pointer;" (click)="look(item)">查看</span>
</div>
</div>
<div nz-row class="tr" *ngIf="tableSpin">
<div nz-col nzSpan="24" style="text-align: center;">
<nz-spin nzSimple></nz-spin>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
</div>

107
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
Unescape View File

@ -247,62 +247,11 @@
.tablebox {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.table {
color: white;
flex: 1;
width: 96%;
display: flex;
flex-direction: column;
overflow: hidden;
.th {
height: 38px;
line-height: 38px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
color: #23D9FF;
}
.tbody {
flex: 1;
overflow-y: auto;
.tr {
height: 38px;
line-height: 38px;
border-bottom: 1px solid #0d3761;
div {
color: #91CCFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.look {
color: #36A2FF;
cursor: pointer;
}
}
}
}
}
.pagination {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: center;
}
box-sizing: border-box;
padding: 0 36px;
::-webkit-scrollbar {
width: 0px;
img {
width: 36px;
}
}
@ -438,28 +387,8 @@
}
.tablebox {
.table {
.th {
height: 32px;
line-height: 32px;
font-size: 12px !important;
}
.tbody {
.tr {
height: 32px;
line-height: 32px;
div {
font-size: 12px !important;
}
img {
width: 32px;
}
}
}
img {
width: 32px;
}
}
}
@ -586,28 +515,8 @@
}
.tablebox {
.table {
.th {
height: 28px;
line-height: 28px;
font-size: 10px !important;
}
.tbody {
.tr {
height: 28px;
line-height: 28px;
div {
font-size: 10px !important;
}
img {
width: 30px;
}
}
}
img {
width: 30px;
}
}

22
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
Unescape View File

@ -69,7 +69,17 @@ export class OilUnloadingProcessListComponent implements OnInit {
isOrShow: boolean
isMisinformation: boolean = false//误报按钮的显隐
tableScrollHeight
resizeListener
ngOnInit(): void {
this.tableScrollHeight = '100px'
// 页面监听
this.resizeListener = 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 - 10) + 'px'
});
let loginUserInfo
if (sessionStorage.getItem('isGasStation') == 'true') {
loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
@ -114,6 +124,9 @@ export class OilUnloadingProcessListComponent implements OnInit {
this.isOrShow = true
}
}
ngOnDestroy(): void {
this.resizeListener.unsubscribe()
}
//刷新饼图图表数据
num
echartsData: any
@ -256,7 +269,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
],
legend: {
selectedMode: false, // 是否允许点击
data: ['卸油事件','卸油预警'],
data: ['卸油事件', '卸油预警'],
textStyle: {
color: '#fff'
},
@ -651,6 +664,10 @@ export class OilUnloadingProcessListComponent implements OnInit {
this.totalCount = data.result.totalCount
this.isLoading = false
console.log('获取卸油流程列表', data.result.items)
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
})
}
submitForm(): void {
@ -682,14 +699,13 @@ export class OilUnloadingProcessListComponent implements OnInit {
this.getViolateRecordList()
}
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(500)).subscribe((event: any) => { //监听 DOM 滚动事件
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)
this.getViolateRecordList()
}
}
});
}

103
src/app/pages/warning-statistics-list/warning-statistics-list.component.html
Unescape View File

@ -109,45 +109,29 @@
</nz-form-item>
</form>
</div>
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1">
<span style="margin-left: 20px;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">序号</span>
</div>
<div nz-col nzSpan="2">
预警类别
</div>
<div nz-col nzSpan="3">
预警内容
</div>
<div nz-col nzSpan="3">
公司名称
</div>
<div nz-col nzSpan="5">
区域名称
</div>
<div nz-col nzSpan="3">
所属油站
</div>
<div nz-col nzSpan="3">
证照/消防设施名称
</div>
<div nz-col nzSpan="3">
有效期限
</div>
<div nz-col nzSpan="1">
操作
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list;let key = index">
<div nz-col nzSpan="1">
<span style="margin-left: 20px;">{{key+1}}</span>
</div>
<div nz-col nzSpan="2">
<div class="tablebox" id="tablebox">
<nz-table [nzLoading]="tableSpin" [nzPageSize]='99999' #headerTable [nzData]="list"
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null'
nzTableLayout="fixed">
<thead>
<tr>
<th nzWidth="5%" style="text-align: center;">序号</th>
<th>预警类别</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 nzEllipsis [title]="key + 1" style="text-align: center;">
{{key + 1}}
</td>
<td nzEllipsis>
<ng-container *ngIf="item.numberOfTimes; else elseTemplate">
<span *ngIf="item.numberOfTimes == 1">办理提醒</span>
<span *ngIf="item.numberOfTimes == 2">临期提醒</span>
@ -156,8 +140,8 @@
<ng-template #elseTemplate>
逾期报警
</ng-template>
</div>
<div nz-col nzSpan="3">
</td>
<td nzEllipsis>
<ng-container *ngIf="item.numberOfTimes; else elseTemplate2">
<span *ngIf="item.numberOfTimes == 1">{{item.desc}}办理提醒</span>
<span *ngIf="item.numberOfTimes == 2">{{item.desc}}临期提醒</span>
@ -166,34 +150,29 @@
<ng-template #elseTemplate2>
消防设备逾期报警
</ng-template>
</div>
<div nz-col nzSpan="3" [title]="item.gasStation.companyName">
</td>
<td nzEllipsis [title]="item.gasStation.companyName">
{{item.gasStation.companyName ? item.gasStation.companyName : '/'}}
</div>
<div nz-col nzSpan="5" [title]="item.gasStation.locationName">
</td>
<td nzEllipsis [title]="item.gasStation.locationName">
{{item.gasStation.locationName ? item.gasStation.locationName : '/'}}
</div>
<div nz-col nzSpan="3" [title]="item.gasStation.stationName">
</td>
<td nzEllipsis [title]="item.gasStation.stationName">
{{item.gasStation.stationName ? item.gasStation.stationName : '/'}}
</div>
<div nz-col nzSpan="3">
</td>
<td nzEllipsis>
{{item.violatedItemSnapshotObj.name ? item.violatedItemSnapshotObj.name : '/'}}
</div>
<div nz-col nzSpan="3">
</td>
<td>
{{item.violatedItemSnapshotObj.endTime ?
(item.violatedItemSnapshotObj.endTime | date:"yyyy-MM-dd") : '/'}}
</div>
<div nz-col nzSpan="1">
</td>
<td>
<span style="cursor: pointer;color: #36A2FF;" (click)="look(item)">查看</span>
</div>
</div>
<div nz-row class="tr" *ngIf="tableSpin">
<div nz-col nzSpan="24" style="text-align: center;">
<nz-spin nzSimple></nz-spin>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
</div>

112
src/app/pages/warning-statistics-list/warning-statistics-list.component.scss
Unescape View File

@ -247,67 +247,11 @@
.tablebox {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.table {
color: white;
flex: 1;
width: 96%;
display: flex;
flex-direction: column;
overflow: hidden;
.th {
height: 38px;
line-height: 38px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
color: #23D9FF;
}
.tbody {
flex: 1;
overflow-y: auto;
.tr {
height: 38px;
line-height: 38px;
border-bottom: 1px solid #0d3761;
div {
color: #91CCFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.look {
color: #36A2FF;
cursor: pointer;
}
.grey{
color: grey!important;
}
}
}
}
}
.pagination {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: center;
}
box-sizing: border-box;
padding: 0 36px;
::-webkit-scrollbar {
width: 0px;
img {
width: 36px;
}
}
@ -443,28 +387,8 @@
}
.tablebox {
.table {
.th {
height: 32px;
line-height: 32px;
font-size: 12px !important;
}
.tbody {
.tr {
height: 32px;
line-height: 32px;
div {
font-size: 12px !important;
}
img {
width: 32px;
}
}
}
img {
width: 32px;
}
}
}
@ -591,28 +515,8 @@
}
.tablebox {
.table {
.th {
height: 28px;
line-height: 28px;
font-size: 10px !important;
}
.tbody {
.tr {
height: 28px;
line-height: 28px;
div {
font-size: 10px !important;
}
img {
width: 30px;
}
}
}
img {
width: 30px;
}
}

21
src/app/pages/warning-statistics-list/warning-statistics-list.component.ts
Unescape View File

@ -35,7 +35,17 @@ export class WarningStatisticsListComponent implements OnInit {
isOrShow: boolean
isMisinformation: boolean = false//误报按钮的显隐
tableScrollHeight
resizeListener
ngOnInit(): void {
this.tableScrollHeight = '100px'
// 页面监听
this.resizeListener = 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 - 10) + 'px'
});
let loginUserInfo
if (sessionStorage.getItem('isGasStation') == 'true') {
loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
@ -81,7 +91,9 @@ export class WarningStatisticsListComponent implements OnInit {
this.isOrShow = true
}
}
ngOnDestroy(): void {
this.resizeListener.unsubscribe()
}
//刷新饼图图表数据
num
echartsData: any
@ -586,6 +598,10 @@ export class WarningStatisticsListComponent implements OnInit {
this.totalCount = data.result.totalCount
this.isLoading = false
console.log('证照预警列表', data.result.items)
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
})
}
exportExcel() {
@ -658,14 +674,13 @@ export class WarningStatisticsListComponent implements OnInit {
this.getLicenseList()
}
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(500)).subscribe((event: any) => { //监听 DOM 滚动事件
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)
this.getLicenseList()
}
}
});
}

Write Preview
Loading…
Cancel
Save