Browse Source

[完善]完善预警记录表格

beijing
邵佳豪 3 years ago
parent
commit
8ee9acaff0
  1. 139
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  2. 116
      src/app/pages/criminal-records-admin/criminal-records-admin.component.scss
  3. 21
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  4. 111
      src/app/pages/criminal-records/criminal-records.component.html
  5. 112
      src/app/pages/criminal-records/criminal-records.component.scss
  6. 18
      src/app/pages/criminal-records/criminal-records.component.ts
  7. 7
      src/app/pages/home/home.component.html
  8. 2
      src/app/pages/plan-admin/oil-station-list/oil-station-list.component.html
  9. 2
      src/app/pages/plan-admin/oil-station-list/oil-station-list.component.ts
  10. 6
      src/theme.less

139
src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@ -170,94 +170,55 @@
</nz-form-item>
</form>
</div>
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1" style="text-align: center;">
<span>序号</span>
</div>
<div nz-col nzSpan="2" style="text-align: center;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">
<span style="margin-right:46px;">
预警级别
</span>
</div>
<div nz-col nzSpan="2">
预警类型
</div>
<div nz-col nzSpan="2">
预警事件
</div>
<div nz-col nzSpan="2">
所属公司
</div>
<div nz-col nzSpan="3">
管理区域
</div>
<div nz-col nzSpan="2">
加油站
</div>
<div nz-col nzSpan="2">
预警区域
</div>
<div nz-col nzSpan="2">
摄像头名称
</div>
<div nz-col nzSpan="3">
预警时间
</div>
<div nz-col nzSpan="2">
状态
</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" style="text-align: center;">
<span>{{key + 1}}</span>
</div>
<div nz-col nzSpan="2">
<img style="margin-left: 18px;" *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
<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>
<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.locationName">
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
alt="">
<img style="margin-left: 18px;" *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
alt="">
<img style="margin-left: 18px;" *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
alt="">
<img style="margin-left: 18px;" *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
alt="">
<span *ngIf="item.violation.level == 1">Ⅰ级</span>
<span *ngIf="item.violation.level == 2">Ⅱ级</span>
<span *ngIf="item.violation.level == 3">Ⅲ级</span>
<span *ngIf="item.violation.level == 4">Ⅳ级</span>
</div>
<div nz-col nzSpan="2" [title]="item.violation.violationType">
{{item.violation.violationType}}
</div>
<div nz-col nzSpan="2" [title]="item.violation.eventSystemName">
{{item.violation.eventSystemName}}
</div>
<div nz-col nzSpan="2" [title]="item.gasStation.companyName">
{{item.gasStation.companyName}}
</div>
<div nz-col nzSpan="3" [title]="item.gasStation.locationName">
{{item.gasStation.locationName}}
</div>
<div nz-col nzSpan="2" [title]="item.gasStation.stationName">
{{item.gasStation.stationName}}
</div>
<div nz-col nzSpan="2" [title]="item.violateArea">
{{item.violateArea}}
</div>
<div nz-col nzSpan="2" [title]="item.cameraNo">
{{item.cameraNo}}
</div>
<div nz-col nzSpan="3">
</td>
<td nzEllipsis [title]="item.violation.violationType">{{item.violation.violationType}}</td>
<td nzEllipsis [title]="item.violation.eventSystemName">{{item.violation.eventSystemName}}</td>
<td nzEllipsis [title]="item.gasStation.companyName">{{item.gasStation.companyName}}</td>
<td nzEllipsis [title]="item.gasStation.locationName">{{item.gasStation.locationName}}</td>
<td nzEllipsis [title]="item.gasStation.stationName">{{item.gasStation.stationName}}</td>
<td>{{item.violateArea}}</td>
<td>{{item.cameraNo}}</td>
<td>
{{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
</div>
<div nz-col nzSpan="2">
</td>
<td>
<ng-container *ngIf="!item.positive; else elseTemplate">
误报
</ng-container>
@ -265,21 +226,13 @@
<span *ngIf="item.handleTime">已处置</span>
<span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
</ng-template>
</div>
<div nz-col nzSpan="1">
</td>
<td>
<span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>
<!-- <span *ngIf="!item.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="dispose(item)">处置</span>
<span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</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>

116
src/app/pages/criminal-records-admin/criminal-records-admin.component.scss

@ -33,7 +33,8 @@
max-width: 250px;
margin-right: 3px;
}
.searchParamsS{
.searchParamsS {
min-width: 180px;
max-width: 250px;
}
@ -252,68 +253,12 @@
.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;
}
}
img {
width: 36px;
}
}
}
}
.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;
}
}
}
@ -446,28 +391,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;
}
}
}
@ -593,30 +518,9 @@
}
.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/criminal-records-admin/criminal-records-admin.component.ts

@ -8,7 +8,6 @@ import { debounceTime } from 'rxjs/operators';
import * as moment from 'moment';
import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
import { OilUnloadingProcessComponent } from '../oil-unloading-process/oil-unloading-process.component';
import { DispositionComponent } from '../disposition/disposition.component';
import { NzMessageService } from 'ng-zorro-antd/message';
import { TreeService } from 'src/app/service/tree.service';
@ -290,7 +289,16 @@ export class CriminalRecordsAdminComponent implements OnInit {
enddate
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'))
@ -342,7 +350,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.getAllOrganization()
this.getAggregations()
}
ngOnDestroy(): void {
this.resizeListener.unsubscribe()
}
defaultOrId: string
//获取所有组织机构
nodes: any = []
@ -498,6 +508,11 @@ export class CriminalRecordsAdminComponent implements OnInit {
console.log('违规记录列表', data)
this.tableSpin = false
this.isLoading = false
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
})
}
@ -511,7 +526,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
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)

111
src/app/pages/criminal-records/criminal-records.component.html

@ -145,47 +145,29 @@
</nz-form-item>
</form>
</div>
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1" style="text-align: center;">
<span>序号</span>
</div>
<div nz-col nzSpan="2">
<span style="margin-left: 6px;">预警级别</span>
</div>
<div nz-col nzSpan="2">
预警类型
</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">
预警时间
</div>
<div nz-col nzSpan="2">
状态
</div>
<div nz-col nzSpan="2">
操作
</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" style="text-align: center;">
<span>{{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>
<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.locationName">
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png" alt="">
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png" alt="">
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png" alt="">
@ -194,26 +176,16 @@
<span *ngIf="item.violation.level == 2">Ⅱ级</span>
<span *ngIf="item.violation.level == 3">Ⅲ级</span>
<span *ngIf="item.violation.level == 4">Ⅳ级</span>
</div>
<div nz-col nzSpan="2" [title]="item.violation.violationType">
{{item.violation.violationType}}
</div>
<div nz-col nzSpan="2" [title]="item.violation.eventSystemName">
{{item.violation.eventSystemName}}
</div>
<div nz-col nzSpan="4" [title]="item.gasStation.locationName">
{{item.gasStation.locationName}}
</div>
<div nz-col nzSpan="3" [title]="item.violateArea">
{{item.violateArea}}
</div>
<div nz-col nzSpan="3" [title]="item.cameraNo">
{{item.cameraNo}}
</div>
<div nz-col nzSpan="3">
</td>
<td nzEllipsis [title]="item.violation.violationType">{{item.violation.violationType}}</td>
<td nzEllipsis [title]="item.violation.eventSystemName">{{item.violation.eventSystemName}}</td>
<td nzEllipsis [title]="item.gasStation.locationName">{{item.gasStation.locationName}}</td>
<td>{{item.violateArea}}</td>
<td>{{item.cameraNo}}</td>
<td>
{{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
</div>
<div nz-col nzSpan="2">
</td>
<td>
<ng-container *ngIf="!item.positive; else elseTemplate">
误报
</ng-container>
@ -221,20 +193,13 @@
<span *ngIf="item.handleTime">已处置</span>
<span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
</ng-template>
</div>
<div nz-col nzSpan="2">
</td>
<td>
<span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>
<!-- <span *ngIf="!item.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="dispose(item)">处置</span>
<span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</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/criminal-records/criminal-records.component.scss

@ -238,65 +238,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;
}
}
img {
width: 36px;
}
}
}
}
.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;
}
}
@ -432,29 +378,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;
}
}
}
@ -581,30 +506,9 @@
}
.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;
}
}
}
}

18
src/app/pages/criminal-records/criminal-records.component.ts

@ -299,7 +299,16 @@ export class CriminalRecordsComponent implements OnInit {
enddate
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'))
@ -348,6 +357,9 @@ export class CriminalRecordsComponent implements OnInit {
this.getAggregations()
}
ngOnDestroy(): void {
this.resizeListener.unsubscribe()
}
//刷新饼图图表数据
num
echartsData: any
@ -479,10 +491,14 @@ export class CriminalRecordsComponent implements OnInit {
console.log('违规记录列表', data)
this.tableSpin = false
this.isLoading = false
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
})
}
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)

7
src/app/pages/home/home.component.html

@ -27,13 +27,14 @@
<li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
数字油站
</li>
<li [routerLink]="['/todaywarning/petrolStation']" routerLinkActive="router-link-active">
<li *ngIf="!isGasStationBack" [routerLink]="['/todaywarning/petrolStation']"
routerLinkActive="router-link-active">
今日预警
</li>
<li [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
<li *ngIf="!isGasStationBack" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
预警记录
</li>
<li [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
<li *ngIf="!isGasStationBack" [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
证照管理
</li>
</div>

2
src/app/pages/plan-admin/oil-station-list/oil-station-list.component.html

@ -24,7 +24,7 @@
</form>
</div>
<div class="tablebox" id="tablebox">
<nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
<nz-table [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list" [nzShowPagination]="false"
[nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
<thead>
<tr>

2
src/app/pages/plan-admin/oil-station-list/oil-station-list.component.ts

@ -81,7 +81,7 @@ export class OilStationListComponent implements OnInit {
}
}
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj))
this.router.navigate(['/todaywarning/petrolStation'])
this.router.navigate(['/plan/petrolStation'])
let obj = {
name: 'oilstation'
}

6
src/theme.less

@ -369,7 +369,9 @@
#updateLicense,
#fileLicense,
#histories,
#statisticsList {
#statisticsList,
#recordsboxadmin,
#recordsbox {
::-webkit-input-placeholder {
/* WebKit browsers */
color: #345d85;
@ -377,7 +379,7 @@
//滚动条样式
::-webkit-scrollbar {
width: 5px;
width: 6px;
}
::-webkit-scrollbar-thumb {

Loading…
Cancel
Save