Browse Source

[修改]预警统计表格变化;增加序号表头

dev
邵佳豪 3 years ago
parent
commit
7044e3f8d3
  1. 31
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  2. 15
      src/app/pages/criminal-records/criminal-records.component.html
  3. 10
      src/app/pages/home-page/home-page.component.html
  4. 12
      src/app/pages/home-page/home-page.component.scss
  5. 20
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
  6. 131
      src/app/pages/warning-statistics-list/warning-statistics-list.component.html
  7. 99
      src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

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

@ -151,11 +151,13 @@
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1" style="text-align: right;">
<div nz-col nzSpan="1" style="text-align: center;">
<span>序号</span>
</div>
<div nz-col nzSpan="1">
预警级别
<div nz-col nzSpan="2" style="text-align: center;">
<span style="margin-right:46px;">
预警级别
</span>
</div>
<div nz-col nzSpan="2">
预警类型
@ -168,9 +170,6 @@
</div>
<div nz-col nzSpan="3">
管理区域
</div>
<div nz-col nzSpan="1">
</div>
<div nz-col nzSpan="2">
加油站
@ -192,14 +191,15 @@
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<div nz-col nzSpan="1" style="text-align: right;">
<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="">
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png" alt="">
<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="1">
<div nz-col nzSpan="2">
<img style="margin-left: 18px;" *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" alt="">
<img style="margin-left: 18px;" *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" alt="">
<span *ngIf="item.violation.level == 1">Ⅰ级</span>
<span *ngIf="item.violation.level == 2">Ⅱ级</span>
<span *ngIf="item.violation.level == 3">Ⅲ级</span>
@ -217,9 +217,6 @@
<div nz-col nzSpan="3" [title]="item.gasStation.locationName">
{{item.gasStation.locationName}}
</div>
<div nz-col nzSpan="1" style="text-align: right;box-sizing: border-box;padding-right: 8px;">
<!-- <span class="ziying">自营</span> -->
</div>
<div nz-col nzSpan="2" [title]="item.gasStation.stationName">
{{item.gasStation.stationName}}
</div>

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

@ -127,10 +127,11 @@
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="1">
<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">
预警类型
@ -158,14 +159,16 @@
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<div nz-col nzSpan="1" style="text-align: right;">
<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 *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="">
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png" alt="">
</div>
<div nz-col nzSpan="2">
<span *ngIf="item.violation.level == 1">Ⅰ级</span>
<span *ngIf="item.violation.level == 2">Ⅱ级</span>
<span *ngIf="item.violation.level == 3">Ⅲ级</span>

10
src/app/pages/home-page/home-page.component.html

@ -195,7 +195,7 @@
<span>摄像头(个)</span>
</div>
</div>
<div class="numlistbox">
<!-- <div class="numlistbox">
<img src="../../../assets/images/licenseNum.png" alt="">
<div class="content">
<span class="lightspan lightspan3">{{HomeAggregatioData.licenseViolationCount}}</span>
@ -208,7 +208,7 @@
<span class="lightspan lightspan3">{{HomeAggregatioData.deviceViolationCount}}</span>
<span>消防设备预警数量</span>
</div>
</div>
</div> -->
<div class="angle-border left-top-border"></div>
<div class="angle-border right-top-border"></div>
<div class="angle-border left-bottom-border"></div>
@ -264,15 +264,13 @@
<div class="point"></div>
<span>累计卸油总车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouTotalCount}}
</div>
<!-- <div class="oilNumItem">
<div class="pointbox">
<div class="point"></div>
<div class="point"></div>s
<span>累计卸油正常车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouCorrectCount}}
</div> -->
<div class="oilNumItem">
@ -280,10 +278,8 @@
<div class="point"></div>
<span>累计卸油预警车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
</div>
</div>
</div>
</div>

12
src/app/pages/home-page/home-page.component.scss

@ -400,13 +400,13 @@
padding: 12px 0;
.numlistbox {
height: 56px;
height: 64px;
width: 61%;
display: flex;
img {
width: 56px;
height: 56px;
width: 64px;
height: 64px;
margin-right: 24px;
}
@ -423,10 +423,10 @@
}
.lightspan {
font-size: 30px;
font-size: 32px;
font-weight: 600;
line-height: 30px;
margin-bottom: 5px;
line-height: 32px;
margin-bottom: 12px;
}
.lightspan1 {

20
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html

@ -100,10 +100,11 @@
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<!-- <div nz-col nzSpan="1">
</div> -->
<div nz-col nzSpan="3">
<span style="margin-left: 26px;">油站名称</span>
<div nz-col nzSpan="1">
<span style="margin-left: 15px;">序号</span>
</div>
<div nz-col nzSpan="2">
<span>油站名称</span>
</div>
<div nz-col nzSpan="2">
公司名称
@ -134,11 +135,12 @@
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<!-- <div nz-col nzSpan="1">
</div> -->
<div nz-col nzSpan="3" [title]="item.gasStation.stationName">
<span style="margin-left: 26px;">{{item.gasStation.stationName}}</span>
<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="2" [title]="item.gasStation.stationName">
<span>{{item.gasStation.stationName}}</span>
</div>
<div nz-col nzSpan="2" [title]="item.gasStation.companyName">
{{item.gasStation.companyName}}

131
src/app/pages/warning-statistics-list/warning-statistics-list.component.html

@ -50,10 +50,10 @@
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams searchParamsLong">
<nz-form-control>
<nz-select [nzAllowClear]="false" nzAllowClear formControlName="state" nzPlaceHolder="请选择状态"
(ngModelChange)="tableChange($event)">
<nz-option nzValue="0" nzLabel="证照到期预警"></nz-option>
<nz-option nzValue="1" nzLabel="消防设备到期预警"></nz-option>
<nz-select [nzAllowClear]="false" nzAllowClear formControlName="eventSystemName"
nzPlaceHolder="请选择状态">
<nz-option *ngFor="let item of eventSystemNameOption" [nzValue]="item.id"
[nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
@ -96,123 +96,82 @@
</nz-form-item>
</form>
</div>
<div class="tablebox" *ngIf="isLicenseTable">
<div class="tablebox">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="3">
<span style="margin-left: 26px;">证件名称</span>
<div nz-col nzSpan="1">
<span style="margin-left: 20px;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">序号</span>
</div>
<div nz-col nzSpan="3">
证件编号
预警类别
</div>
<div nz-col nzSpan="3">
所属油站
<div nz-col nzSpan="4">
预警内容
</div>
<div nz-col nzSpan="3">
有效期限
公司名称
</div>
<div nz-col nzSpan="2">
是/否年审
<div nz-col nzSpan="3">
区域名称
</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">
<div nz-col nzSpan="3">
<span style="margin-left: 26px;">{{item.violatedItemSnapshotObj.name}}</span>
<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="3">
{{item.violatedItemSnapshotObj.code}}
<ng-container *ngIf="item.numberOfTimes; else elseTemplate">
<span *ngIf="item.numberOfTimes == 1">办理提醒</span>
<span *ngIf="item.numberOfTimes == 2">临期提醒</span>
<span *ngIf="item.numberOfTimes == 3">逾期报警</span>
</ng-container>
<ng-template #elseTemplate>
/
</ng-template>
</div>
<div nz-col nzSpan="3">
{{item.gasStation.stationName}}
<div nz-col nzSpan="4">
<ng-container *ngIf="item.numberOfTimes; else elseTemplate">
<span *ngIf="item.numberOfTimes == 1">{{item.desc}}办理提醒</span>
<span *ngIf="item.numberOfTimes == 2">{{item.desc}}临期提醒</span>
<span *ngIf="item.numberOfTimes == 3">{{item.desc}}逾期报警</span>
</ng-container>
<ng-template #elseTemplate>
/
</ng-template>
</div>
<div nz-col nzSpan="3">
{{item.violatedItemSnapshotObj.startTime |
date:"yyyy-MM-dd"}}至{{item.violatedItemSnapshotObj.endTime | date:"yyyy-MM-dd"}}
</div>
<div nz-col nzSpan="2">
{{item.violatedItemSnapshotObj.hasAnnualInspection ? '是' : '否'}}
{{item.gasStation.companyName ? item.gasStation.companyName : '/'}}
</div>
<div nz-col nzSpan="3">
{{item.violatedItemSnapshotObj.annualInspectionTime | date:"yyyy-MM-dd"}}
{{item.gasStation.locationName ? item.gasStation.locationName : '/'}}
</div>
<div nz-col nzSpan="3">
{{item.violatedItemSnapshotObj.annualInspectionOrganizationName}}
{{item.gasStation.stationName ? item.gasStation.stationName : '/'}}
</div>
<div nz-col nzSpan="3">
{{item.gasStation.leaderContact}}
</div>
<div nz-col nzSpan="1">
<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>
</div>
<div class="tablebox" *ngIf="!isLicenseTable">
<div class="table">
<div nz-row class="th">
<div nz-col nzSpan="4">
<span style="margin-left: 26px;">消防器材名称</span>
</div>
<div nz-col nzSpan="4">
所属油站
</div>
<div nz-col nzSpan="3">
规格
</div>
<div nz-col nzSpan="4">
购入日期
</div>
<div nz-col nzSpan="4">
出厂日期(生产日期)
</div>
<div nz-col nzSpan="4">
有效期
</div>
<div nz-col nzSpan="1">
<span>操作</span>
</div>
</div>
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<div nz-col nzSpan="4">
<span style="margin-left: 26px;">{{item.violatedItemSnapshotObj.name}}</span>
</div>
<div nz-col nzSpan="4">
{{item.gasStation.stationName}}
{{item.violatedItemSnapshotObj.name ? item.violatedItemSnapshotObj.name : '/'}}
</div>
<div nz-col nzSpan="3">
{{item.violatedItemSnapshotObj.specification}}
</div>
<div nz-col nzSpan="4">
{{item.violatedItemSnapshotObj.purchaseDate | date:"yyyy-MM-dd"}}
</div>
<div nz-col nzSpan="4">
{{item.violatedItemSnapshotObj.productionDate | date:"yyyy-MM-dd"}}
</div>
<div nz-col nzSpan="4">
{{item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd"}}
{{item.violatedItemSnapshotObj.validityEndTime ?
(item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd") : '/'}}
</div>
<div nz-col nzSpan="1">
<span [ngClass]="{'grey': item.handleTime}" style="cursor: pointer;color: #36A2FF;" (click)="dispose(item)">处置</span>
<span style="cursor: pointer;color: #36A2FF;" (click)="look(item)">查看</span>
</div>
</div>
<div nz-row class="tr" *ngIf="tableSpin">

99
src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

@ -47,7 +47,7 @@ export class WarningStatisticsListComponent implements OnInit {
let lastD = lw.getDate();
this.startdate = JSON.parse(JSON.stringify(lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD)));//三十天之前日期
this.validateForm = this.fb.group({
state: ['0'],
eventSystemName: null,
organization: [null],
datePicker: [[this.startdate, this.enddate]]
});
@ -470,6 +470,7 @@ export class WarningStatisticsListComponent implements OnInit {
defaultOrId: string
//获取所有组织机构
nodes: any = []
eventSystemNameOption = []
getAllOrganization() {
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
let params = {
@ -494,14 +495,20 @@ export class WarningStatisticsListComponent implements OnInit {
});
this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
console.log('预警事件', data.result)
let option1
let option2
data.result.forEach(element => {
if (element.eventSystemName == '证照预警') {
this.licenseId = element.id
option1 = element.id
}
if (element.eventSystemName == '灭火器维护') {
this.equipmentId = element.id
option2 = element.id
}
});
this.eventSystemNameOption = [
{ id: option1, name: '证照预警' },
{ id: option2, name: '消防设施预警' },
]
this.list = []
this.SkipCount = '0'
this.getLicenseList()
@ -530,20 +537,23 @@ export class WarningStatisticsListComponent implements OnInit {
} else {
organizationUnitId = this.validateForm.value.organization
}
let ViolationIds = []
if (this.validateForm.value.state == '0') {
ViolationIds = [this.licenseId]
console.log(456, this.validateForm.value)
if (this.validateForm.value.eventSystemName) {
ViolationIds.push(this.validateForm.value.eventSystemName)
} else {
ViolationIds = [this.equipmentId]
this.eventSystemNameOption.forEach(element => {
ViolationIds.push(element.id)
});
}
console.log('查询日期', this.validateForm.value.datePicker)
let params = {
ViolationIds: ViolationIds,
organizationUnitId: organizationUnitId,
ViolateTime: (this.validateForm.value.datePicker[0] && this.validateForm.value.datePicker[1]) ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD HH:mm:ss')] : null,
IsContainsChildren: 'true',
SkipCount: '0',
MaxResultCount: '9999'
SkipCount: this.SkipCount,
MaxResultCount: '50'
}
this.http.get('/api/services/app/ViolateRecord/GetAll', {
params: params
@ -559,19 +569,6 @@ export class WarningStatisticsListComponent implements OnInit {
})
}
isLicenseTable = true
tableChange($event) {
console.log('走了几遍')
this.SkipCount = '0'
this.list = []
if ($event == 0) {
this.isLicenseTable = true
} else {
this.isLicenseTable = false
}
this.getLicenseList()
}
submitForm(): void {
for (const i in this.validateForm.controls) {
@ -581,10 +578,9 @@ export class WarningStatisticsListComponent implements OnInit {
this.list = []
this.SkipCount = '0'
this.getLicenseList()
}
resetForm(e: MouseEvent): void {
e.preventDefault();
for (const key in this.validateForm.controls) {
@ -594,9 +590,12 @@ export class WarningStatisticsListComponent implements OnInit {
console.log('赋值日期', [this.startdate, this.enddate])
this.validateForm.patchValue({
datePicker: [this.startdate, this.enddate],
state: '0',
eventSystemName: null,
organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id
});
this.list = []
this.SkipCount = '0'
this.getLicenseList()
}
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
@ -612,32 +611,36 @@ export class WarningStatisticsListComponent implements OnInit {
}
look(item) {
console.log(item)
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
'padding': '0px',
'box-shadow': '0 0 8px 0 #fff',
'background': '#000D21',
},
nzComponentParams: {
data: item
},
nzFooter: null,
nzOnOk: async () => {
console.log(99999, instance.content)
}
});
const instance = modal.getContentComponent();
if (item.violation.eventSystemName == '证照预警') {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
'padding': '0px',
'box-shadow': '0 0 8px 0 #fff',
'background': '#000D21',
},
nzComponentParams: {
data: item
},
nzFooter: null,
nzOnOk: async () => {
console.log(99999, instance.content)
}
});
const instance = modal.getContentComponent();
} else {
this.dispose(item)
}
}
//处置消防设施
dispose(item) {
console.log(item)
const modal = this.modal.create({
nzContent: DisposeequipmentComponent,
nzViewContainerRef: this.viewContainerRef,
@ -715,6 +718,8 @@ export class WarningStatisticsListComponent implements OnInit {
});
const instance = modal.getContentComponent();
}
goOilList() {
if (this.router.url.indexOf('petrolStation') != -1) {
this.router.navigate(['/records/petrolStation/oliunloadinglist'])

Loading…
Cancel
Save