27 changed files with 117 additions and 3471 deletions
@ -1,105 +0,0 @@ |
|||||||
<!-- <p>站点预案!</p> --> |
|
||||||
<div class="stationPlanBox" id="stationPlanBox"> |
|
||||||
<div class="orbox" style="position: relative;"> |
|
||||||
<div class="title"> |
|
||||||
<app-title [name]="'组织机构'"></app-title> |
|
||||||
</div> |
|
||||||
<div class="or"> |
|
||||||
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzSelectedKeys]="nzSelectedKeys" [nzShowExpand]="false" |
|
||||||
#nzTreeComponent [nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" |
|
||||||
[nzTreeTemplate]="nzTreeTemplate" [nzMultiple]="false"></nz-tree> |
|
||||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
|
||||||
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate"> |
|
||||||
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt=""> |
|
||||||
</ng-container> |
|
||||||
<ng-template #elseTemplate> |
|
||||||
<img src="../../../assets/images/point.png" alt=""> |
|
||||||
</ng-template> |
|
||||||
<span>{{ node.title }}</span> |
|
||||||
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 " |
|
||||||
src="../../../assets/images/expand.png" alt=""> |
|
||||||
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0" |
|
||||||
src="../../../assets/images/unexpand.png" alt=""> |
|
||||||
</ng-template> |
|
||||||
</div> |
|
||||||
<nz-spin *ngIf="orSpin" nzSimple class="nzspin"></nz-spin> |
|
||||||
</div> |
|
||||||
<div class="stationList"> |
|
||||||
<div class="title"> |
|
||||||
<app-title [name]="'站点管理'"></app-title> |
|
||||||
</div> |
|
||||||
<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:tableheight() }" [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>联系人</th> |
|
||||||
<th>联系电话</th> |
|
||||||
<th>油站等级</th> |
|
||||||
<th>经营品类</th> |
|
||||||
<th [nzWidth]="'6%'">油机数量</th> |
|
||||||
<th [nzWidth]="'6%'">车道数量</th> |
|
||||||
<th [nzWidth]="'8%'">油罐容积</th> |
|
||||||
<th [nzWidth]="'5%'">操作</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody id="table"> |
|
||||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
|
||||||
<th 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}} |
|
||||||
</th> |
|
||||||
<th nzEllipsis [title]="item.locationName">{{item.locationName}}</th> |
|
||||||
<th nzEllipsis [title]="item.companyName">{{item.companyName}}</th> |
|
||||||
<th nzEllipsis [title]="item.leaderName">{{item.leaderName}}</th> |
|
||||||
<th nzEllipsis [title]="item.leaderContact">{{item.leaderContact}}</th> |
|
||||||
<th nzEllipsis [title]="item.stationLevel">{{item.stationLevel}}</th> |
|
||||||
<th nzEllipsis [title]="item.sellVariety">{{item.sellVariety}}</th> |
|
||||||
<th>{{item.gasStationCount}}</th> |
|
||||||
<th>{{item.laneCount}}</th> |
|
||||||
<th style="display: flex;justify-content: space-between;"> |
|
||||||
<span>{{item.tankVolume}}</span> |
|
||||||
<span style="margin-right:55%;">{{item.tankVolume ? 'm³' : null}}</span> |
|
||||||
</th> |
|
||||||
<th> |
|
||||||
<span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span> |
|
||||||
</th> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</nz-table> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,193 +0,0 @@ |
|||||||
.stationPlanBox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 20px 24px; |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
width: 100%; |
|
||||||
height: 48px; |
|
||||||
} |
|
||||||
|
|
||||||
.orbox { |
|
||||||
height: 100%; |
|
||||||
width: 360px; |
|
||||||
margin-right: 40px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.or { |
|
||||||
flex: 1; |
|
||||||
overflow-y: auto; |
|
||||||
border: 1px solid rgba(54, 162, 255, 0.3); |
|
||||||
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); |
|
||||||
margin-top: 12px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 18px 12px; |
|
||||||
|
|
||||||
nz-tree { |
|
||||||
background: none; |
|
||||||
color: #c4e2fc; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.stationList { |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding-left: 22px; |
|
||||||
padding-right: 33px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
margin-top: 14px; |
|
||||||
margin-bottom: 22px; |
|
||||||
|
|
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tablebox { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.pagination { |
|
||||||
margin-top: 26px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 0px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// 适配125% |
|
||||||
@media screen and (max-height: 750px) { |
|
||||||
.stationPlanBox { |
|
||||||
padding: 16px 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
width: 100%; |
|
||||||
height: 42px; |
|
||||||
} |
|
||||||
|
|
||||||
.orbox { |
|
||||||
width: 290px; |
|
||||||
margin-right: 32px; |
|
||||||
|
|
||||||
.or { |
|
||||||
margin-top: 8px; |
|
||||||
padding: 15px 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.stationList { |
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding-left: 22px; |
|
||||||
padding-right: 30px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
margin-top: 8px; |
|
||||||
margin-bottom: 15px; |
|
||||||
|
|
||||||
form { |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
.searchParams { |
|
||||||
flex: 12; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 适配150% |
|
||||||
@media screen and (max-height: 600px) { |
|
||||||
.stationPlanBox { |
|
||||||
padding: 12px 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
width: 100%; |
|
||||||
height: 33px; |
|
||||||
} |
|
||||||
|
|
||||||
.orbox { |
|
||||||
width: 250px; |
|
||||||
margin-right:23px; |
|
||||||
|
|
||||||
.or { |
|
||||||
margin-top: 5px; |
|
||||||
padding: 10px 6px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.stationList { |
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding-left: 18px; |
|
||||||
padding-right: 22px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
margin-top: 8px; |
|
||||||
margin-bottom: 15px; |
|
||||||
|
|
||||||
form { |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
.searchParams { |
|
||||||
flex: 10; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tablebox{ |
|
||||||
nz-table{ |
|
||||||
th{ |
|
||||||
font-size: 10px!important; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,173 +0,0 @@ |
|||||||
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-plan-admin', |
|
||||||
templateUrl: './plan-admin.component.html', |
|
||||||
styleUrls: ['./plan-admin.component.scss'] |
|
||||||
}) |
|
||||||
export class PlanAdminComponent implements OnInit { |
|
||||||
validateForm!: FormGroup; |
|
||||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
|
||||||
constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
|
||||||
list: any = [] |
|
||||||
ngOnInit(): void { |
|
||||||
this.validateForm = this.fb.group({ |
|
||||||
name: [null] |
|
||||||
}); |
|
||||||
this.tableSpin = true |
|
||||||
this.getAllOrganization() |
|
||||||
} |
|
||||||
|
|
||||||
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() |
|
||||||
} |
|
||||||
//获取所有组织机构
|
|
||||||
nodes: any = [] |
|
||||||
nzExpandAll = false |
|
||||||
nzSelectedKeys: any = [] |
|
||||||
orSpin: boolean = false |
|
||||||
getAllOrganization() { |
|
||||||
this.orSpin = true |
|
||||||
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
||||||
let params = { |
|
||||||
OrganizationUnitId: OrganizationUnitId, |
|
||||||
IsContainsChildren: "true" |
|
||||||
} |
|
||||||
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 |
|
||||||
} |
|
||||||
}); |
|
||||||
data.result.items = data.result.items.filter((item, i) => { |
|
||||||
return !item.isGasStation |
|
||||||
}) |
|
||||||
for (let index = 0; index < data.result.items.length; index++) { |
|
||||||
const element = data.result.items[index]; |
|
||||||
element.key = element.id |
|
||||||
element.title = element.displayName |
|
||||||
} |
|
||||||
// console.log('组织机构', data.result.items)
|
|
||||||
this.orSpin = false |
|
||||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
|
||||||
this.nzExpandedKeys = [OrganizationUnitId] |
|
||||||
this.nzSelectedKeys = [OrganizationUnitId] |
|
||||||
this.OrganizationUnitId = OrganizationUnitId |
|
||||||
this.getGasStation() |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
tableheight() { |
|
||||||
return (document.getElementById('tablebox').clientHeight - 42) + 'px' |
|
||||||
} |
|
||||||
|
|
||||||
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);//发布一条消息
|
|
||||||
} |
|
||||||
|
|
||||||
nzExpandedKeys: any = [] |
|
||||||
activatedNode?: NzTreeNode; |
|
||||||
//点击tree节点
|
|
||||||
activeNode(data: NzFormatEmitEvent): void { |
|
||||||
this.activatedNode = data.node!; |
|
||||||
// console.log(data)
|
|
||||||
this.OrganizationUnitId = data.node.origin.id |
|
||||||
|
|
||||||
this.list = [] |
|
||||||
this.SkipCount = '0' |
|
||||||
this.getGasStation() |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//获取点击组织机构的所有加油站
|
|
||||||
SkipCount: string = '0' |
|
||||||
MaxResultCount: string = '100' |
|
||||||
OrganizationUnitId: any |
|
||||||
tableSpin: boolean = false |
|
||||||
totalCount: any //总数
|
|
||||||
async getGasStation() { |
|
||||||
let params = { |
|
||||||
StationName: this.validateForm.value.name, |
|
||||||
OrganizationUnitId: String(this.OrganizationUnitId), |
|
||||||
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) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
expand(e, node) { |
|
||||||
e.stopPropagation() |
|
||||||
node.isExpanded = !node.isExpanded |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,138 +0,0 @@ |
|||||||
<div class="warningbox" id="warningbox"> |
|
||||||
<div class="title"> |
|
||||||
<app-title [name]="'当日预警事件列表'"></app-title> |
|
||||||
<div class="warningnumber"> |
|
||||||
<img src="../../../assets/images/warningnum.png" alt=""> |
|
||||||
<span class="today">今日预警</span> |
|
||||||
<span class="num">{{totalCount}}</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="search"> |
|
||||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-select nzAllowClear id="level" formControlName="level" nzPlaceHolder="请选择预警级别"> |
|
||||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
|
||||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
|
||||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
|
||||||
<nz-option nzValue="4" nzLabel="四级"></nz-option> |
|
||||||
</nz-select> |
|
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
|
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型"> |
|
||||||
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option> |
|
||||||
</nz-select> |
|
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
|
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-select nzAllowClear formControlName="area" nzPlaceHolder="请选择区域"> |
|
||||||
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option> |
|
||||||
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option> |
|
||||||
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option> |
|
||||||
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option> |
|
||||||
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option> |
|
||||||
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option> |
|
||||||
</nz-select> |
|
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-select nzAllowClear formControlName="disposalState" nzPlaceHolder="请选择处置状态"> |
|
||||||
<nz-option nzValue="0" nzLabel="已处置"></nz-option> |
|
||||||
<nz-option nzValue="1" nzLabel="未处置"></nz-option> |
|
||||||
</nz-select> |
|
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择开始时间" formControlName="datePickerStart" nzFormat="HH:mm"></nz-time-picker> |
|
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
<i style="display: flex;align-items: center;color: #fff;" nz-icon nzType="swap-right" nzTheme="outline"></i> |
|
||||||
<nz-form-item class="searchParams"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择结束时间" formControlName="datePickerEnd" nzFormat="HH:mm"></nz-time-picker> |
|
||||||
</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="listbox" style="text-align: center;"> |
|
||||||
<div nz-row class="listitem" *ngFor="let item of list"> |
|
||||||
<div nz-col nzSpan="3" class="imgbox"> |
|
||||||
<span *ngIf="item.violation.violationType == '卸油作业检查'"> |
|
||||||
<img src="../../../assets/images/warning2.png"> |
|
||||||
</span> |
|
||||||
<span |
|
||||||
*ngIf="item.violation.violationType != '卸油作业检查' && item.violation.violationType != '证件临期' && item.violation.violationType != '器材临期' "> |
|
||||||
<img src=" ../../../assets/images/warning1.png"> |
|
||||||
</span> |
|
||||||
<span *ngIf="item.violation.violationType === '证件临期'"> |
|
||||||
<img src="../../../assets/images/warning3.png"> |
|
||||||
</span> |
|
||||||
<span *ngIf="item.violation.violationType === '器材临期'"> |
|
||||||
<img src="../../../assets/images/warning3.png"> |
|
||||||
</span> |
|
||||||
<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="3"> |
|
||||||
预警类型: {{item.violation.violationType}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="4"> |
|
||||||
预警信息: {{item.violation.eventSystemName}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="4"> |
|
||||||
区域: {{item.violateArea}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3"> |
|
||||||
摄像头: {{item.cameraNo}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3"> |
|
||||||
{{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="2"> |
|
||||||
<ng-container *ngIf="!item.handleTime; else elseTemplate"> |
|
||||||
未处置 |
|
||||||
</ng-container> |
|
||||||
<ng-template #elseTemplate> |
|
||||||
<span style="color: #23D9FF;">已处置</span> |
|
||||||
</ng-template> |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="2"> |
|
||||||
<button nz-button (click)="look(item)" style="margin-right: 16px;">查看</button> |
|
||||||
<!-- <button *ngIf="!item.handleTime" nz-button (click)="dispose(item)">处置</button> |
|
||||||
<span *ngIf="item.handleTime" style="color: #23D9FF;margin-left: 10px;">已处置</span> --> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<nz-spin nzSimple *ngIf="isSpin"></nz-spin> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,279 +0,0 @@ |
|||||||
.warningbox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.title { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 20PX; |
|
||||||
width: 100%; |
|
||||||
height: 48px; |
|
||||||
margin: 16px 0; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.warningnumber { |
|
||||||
position: absolute; |
|
||||||
right: 80px; |
|
||||||
top: 9px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 32px; |
|
||||||
} |
|
||||||
|
|
||||||
.today { |
|
||||||
font-size: 18px; |
|
||||||
font-family: titlefont; |
|
||||||
color: #D0EAFF; |
|
||||||
margin-left: 8px; |
|
||||||
margin-right: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.num { |
|
||||||
font-size: 20px; |
|
||||||
text-shadow: 0px 0px 6px #8df; |
|
||||||
color: white; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 36px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
// margin-bottom: 18px; |
|
||||||
form { |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
|
|
||||||
.searchParams, |
|
||||||
.btn { |
|
||||||
margin: 0 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.searchParams { |
|
||||||
// flex: 2.9; |
|
||||||
width: 150px; |
|
||||||
} |
|
||||||
.searchParamsLong{ |
|
||||||
width: 250px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
// flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
nz-select { |
|
||||||
color: rgba(145, 204, 255, 0.95); |
|
||||||
} |
|
||||||
|
|
||||||
nz-time-picker { |
|
||||||
background-color: rgba(0, 0, 0, 0); |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.listbox { |
|
||||||
flex: 1; |
|
||||||
overflow-y: auto; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 20px 47px 20px 39px; |
|
||||||
|
|
||||||
.listitem { |
|
||||||
width: 100%; |
|
||||||
height: 78px; |
|
||||||
line-height: 78px; |
|
||||||
border: 1px solid rgba(54, 162, 255, 0.478); |
|
||||||
color: #91CCFF; |
|
||||||
margin-bottom: 12px; |
|
||||||
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); |
|
||||||
box-sizing: border-box; |
|
||||||
padding-right: 60px; |
|
||||||
|
|
||||||
div { |
|
||||||
font-size: 15px; |
|
||||||
text-align: center; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
|
|
||||||
button { |
|
||||||
font-size: 15px; |
|
||||||
background-color: #013064; |
|
||||||
border: 1px solid #4c8ac8; |
|
||||||
color: #91CCFF; |
|
||||||
} |
|
||||||
} |
|
||||||
.imgbox{ |
|
||||||
span{ |
|
||||||
img{ |
|
||||||
width: 30%; |
|
||||||
height: 80%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.dispositioned { |
|
||||||
color: #23D9FF; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// 适配125% |
|
||||||
@media screen and (max-height: 750px) { |
|
||||||
.warningbox { |
|
||||||
.title { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 16PX; |
|
||||||
height: 42px; |
|
||||||
margin: 12px 0; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.warningnumber { |
|
||||||
right: 70px; |
|
||||||
top: 9px; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 32px; |
|
||||||
} |
|
||||||
|
|
||||||
.today { |
|
||||||
font-size: 16px; |
|
||||||
margin-left: 5px; |
|
||||||
margin-right: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.num { |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.search { |
|
||||||
padding: 0 32px; |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
form { |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
.searchParams, |
|
||||||
.btn { |
|
||||||
margin: 0 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.listbox { |
|
||||||
flex: 1; |
|
||||||
overflow-y: auto; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 16px 35px 16px 36px; |
|
||||||
|
|
||||||
.listitem { |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
margin-bottom: 8px; |
|
||||||
padding-right: 36px; |
|
||||||
|
|
||||||
div { |
|
||||||
font-size: 12px; |
|
||||||
|
|
||||||
button { |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 适配150% |
|
||||||
@media screen and (max-height: 600px) { |
|
||||||
.warningbox { |
|
||||||
.title { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 12PX; |
|
||||||
height: 38px; |
|
||||||
margin: 6px 0; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.warningnumber { |
|
||||||
right: 70px; |
|
||||||
top: 6px; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 32px; |
|
||||||
} |
|
||||||
|
|
||||||
.today { |
|
||||||
font-size: 15px; |
|
||||||
margin-left: 5px; |
|
||||||
margin-right: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.num { |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.search { |
|
||||||
padding: 0 32px; |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
form { |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
.searchParams, |
|
||||||
.btn { |
|
||||||
margin: 0 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.listbox { |
|
||||||
flex: 1; |
|
||||||
overflow-y: auto; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 16px 35px 16px 36px; |
|
||||||
|
|
||||||
.listitem { |
|
||||||
height: 36px; |
|
||||||
line-height: 36px; |
|
||||||
margin-bottom: 5px; |
|
||||||
padding-right: 22px; |
|
||||||
|
|
||||||
div { |
|
||||||
font-size: 10px; |
|
||||||
|
|
||||||
button { |
|
||||||
font-size: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,259 +0,0 @@ |
|||||||
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
||||||
import { GetOutOfLineDetailsComponent } from './get-out-of-line-details/get-out-of-line-details.component'; |
|
||||||
// import { TreeService } from 'src/app/service/tree.service';
|
|
||||||
// import { NavChangeService } from 'src/app/service/navChange.service';
|
|
||||||
import { TreeService } from '../../service/tree.service'; |
|
||||||
import { NavChangeService } from '../../service/navChange.service'; |
|
||||||
import * as moment from 'moment'; |
|
||||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
||||||
import { listRefreshService } from '../../service/listRefresh.service'; |
|
||||||
import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequipment/disposeequipment.component'; |
|
||||||
@Component({ |
|
||||||
selector: 'app-today-warning', |
|
||||||
templateUrl: './today-warning.component.html', |
|
||||||
styleUrls: ['./today-warning.component.scss'] |
|
||||||
}) |
|
||||||
export class TodayWarningComponent implements OnInit { |
|
||||||
validateForm!: FormGroup; |
|
||||||
constructor(private listRefreshService: listRefreshService, private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private navChangeService: NavChangeService, private message: NzMessageService) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
this.validateForm = this.fb.group({ |
|
||||||
level: [null], |
|
||||||
type: [null], |
|
||||||
area: [null], |
|
||||||
disposalState: [null], |
|
||||||
datePickerStart: [new Date(`${moment(new Date()).format('YYYY-MM-DD')} 00:00`)], |
|
||||||
datePickerEnd: [new Date(`${moment(new Date()).format('YYYY-MM-DD')} 23:59`)] |
|
||||||
}); |
|
||||||
this.warningType() |
|
||||||
this.getEarlyWarningList() |
|
||||||
this.listRefreshService.getMessage().subscribe((message: any) => { |
|
||||||
//列表刷新
|
|
||||||
if (message.type == 'add') { |
|
||||||
this.getEarlyWarningList() |
|
||||||
} |
|
||||||
//更新处置状态
|
|
||||||
if (message.type == 'updatehandleTime') { |
|
||||||
// console.log('更新处置状态', message)
|
|
||||||
// console.log(this.list)
|
|
||||||
this.list.forEach(element => { |
|
||||||
if (element.id == message.data) { |
|
||||||
element.handleTime = new Date() |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
// let params = {
|
|
||||||
// id: message.notification.entityId
|
|
||||||
// }
|
|
||||||
// this.http.get('/api/services/app/ViolateRecord/Get', {
|
|
||||||
// params: params
|
|
||||||
// }).subscribe((data: any) => {
|
|
||||||
// this.list.unshift(data.result)
|
|
||||||
// console.log('新获取一条', data.result)
|
|
||||||
// })
|
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//预警类型接口
|
|
||||||
warningTypes: any //预警接口数据
|
|
||||||
warningTypesDetails: any |
|
||||||
warningType() { |
|
||||||
this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => { |
|
||||||
this.warningTypesDetails = data.result |
|
||||||
this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType }); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
typeChange(e) { |
|
||||||
this.warningTypes.forEach(element => { |
|
||||||
if (element.key == e) { |
|
||||||
this.warningTypesDetails = element |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//获得预警列表
|
|
||||||
list: any = [ |
|
||||||
] |
|
||||||
totalCount: string //预警总数
|
|
||||||
isSpin: boolean = false |
|
||||||
getEarlyWarningList() { |
|
||||||
let ViolationIds = [] |
|
||||||
if (this.validateForm.value.type) { |
|
||||||
this.warningTypesDetails.forEach(item => { |
|
||||||
item.id ? ViolationIds.push(item.id) : null |
|
||||||
}); |
|
||||||
} |
|
||||||
let disposalState |
|
||||||
if (this.validateForm.value.disposalState == '0') { |
|
||||||
disposalState = true |
|
||||||
} else if (this.validateForm.value.disposalState == '1') { |
|
||||||
disposalState = false |
|
||||||
} else { |
|
||||||
disposalState = null |
|
||||||
} |
|
||||||
let params = { |
|
||||||
Level: this.validateForm.value.level, |
|
||||||
ViolationIds: ViolationIds, |
|
||||||
ViolateArea: this.validateForm.value.area, |
|
||||||
organizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id, |
|
||||||
ViolateTime: (this.validateForm.value.datePickerEnd && this.validateForm.value.datePickerStart) ? [moment(this.validateForm.value.datePickerStart).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePickerEnd).format('yyyy-MM-DD HH:mm:ss')] : null, |
|
||||||
IsHandled: disposalState, |
|
||||||
// ViolateTime: ['2021-10-27', '2021-11-26'],
|
|
||||||
IsContainsChildren: 'true', |
|
||||||
SkipCount: '0', |
|
||||||
MaxResultCount: '9999' |
|
||||||
} |
|
||||||
this.isSpin = true |
|
||||||
this.http.get('/api/services/app/ViolateRecord/GetAll', { |
|
||||||
params: params |
|
||||||
}).subscribe((data: any) => { |
|
||||||
this.list = data.result.items |
|
||||||
this.totalCount = data.result.totalCount |
|
||||||
console.log('预警列表', this.list) |
|
||||||
this.isSpin = false |
|
||||||
let obj = { |
|
||||||
name: '改变数量', |
|
||||||
num: this.totalCount |
|
||||||
} |
|
||||||
setTimeout(() => { |
|
||||||
this.navChangeService.sendMessage(obj);//发布一条消息
|
|
||||||
}, 0); |
|
||||||
|
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
submitForm(): void { |
|
||||||
for (const i in this.validateForm.controls) { |
|
||||||
this.validateForm.controls[i].markAsDirty(); |
|
||||||
this.validateForm.controls[i].updateValueAndValidity(); |
|
||||||
} |
|
||||||
this.getEarlyWarningList() |
|
||||||
} |
|
||||||
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.validateForm.patchValue({ |
|
||||||
datePickerStart: new Date(`${moment(new Date()).format('YYYY-MM-DD')} 00:00`), |
|
||||||
datePickerEnd: new Date(`${moment(new Date()).format('YYYY-MM-DD')} 23:59`) |
|
||||||
}); |
|
||||||
this.getEarlyWarningList() |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
look(item) { |
|
||||||
if (item.violation.eventSystemName == '灭火器维护') { |
|
||||||
item.violatedItemSnapshotObj = JSON.parse(item.violatedItemSnapshot) |
|
||||||
const modal = this.modal.create({ |
|
||||||
nzContent: DisposeequipmentComponent, |
|
||||||
nzViewContainerRef: this.viewContainerRef, |
|
||||||
nzWidth: 380, |
|
||||||
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 () => { |
|
||||||
if (instance.isScrap) { |
|
||||||
await new Promise(resolve => { |
|
||||||
let body = { |
|
||||||
id: item.violatedItemSnapshotObj.id, |
|
||||||
name: instance.copydata2.violatedItemSnapshotObj.name, |
|
||||||
storageLocation: instance.copydata2.violatedItemSnapshotObj.storageLocation, |
|
||||||
productionDate: moment(instance.copydata2.violatedItemSnapshotObj.productionDate).format('yyyy-MM-DD'), |
|
||||||
maintenanceDate: moment(instance.copydata2.violatedItemSnapshotObj.maintenanceDate).format('yyyy-MM-DD'), |
|
||||||
validityEndTime: moment(instance.copydata2.violatedItemSnapshotObj.validityEndTime).format('yyyy-MM-DD'), |
|
||||||
isScrapped: true, |
|
||||||
organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId |
|
||||||
} |
|
||||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
|
||||||
let body = { |
|
||||||
id: item.id, |
|
||||||
handleRecord: '报废成功！' |
|
||||||
} |
|
||||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
|
||||||
resolve(data) |
|
||||||
this.message.create('success', '报废成功！'); |
|
||||||
item.handleTime = new Date() |
|
||||||
return true |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
} else { |
|
||||||
if (instance.validateForm.valid) { |
|
||||||
await new Promise(resolve => { |
|
||||||
let body = { |
|
||||||
id: item.violatedItemSnapshotObj.id, |
|
||||||
name: instance.validateForm.value.name, |
|
||||||
storageLocation: instance.validateForm.value.storageLocation, |
|
||||||
productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'), |
|
||||||
maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'), |
|
||||||
validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'), |
|
||||||
organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId |
|
||||||
} |
|
||||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
|
||||||
// item.violatedItemSnapshotObj = data.result
|
|
||||||
let body = { |
|
||||||
id: item.id, |
|
||||||
handleRecord: '维保成功！' |
|
||||||
} |
|
||||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
|
||||||
resolve(data) |
|
||||||
this.message.create('success', '维保成功！'); |
|
||||||
item.handleTime = new Date() |
|
||||||
return true |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.message.create('warning', '请填写完整！'); |
|
||||||
return false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
const instance = modal.getContentComponent(); |
|
||||||
} else { |
|
||||||
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 () => { |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
const instance = modal.getContentComponent(); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,186 +0,0 @@ |
|||||||
<div class="recordsbox" id="recordsbox"> |
|
||||||
<div class="content"> |
|
||||||
<div class="title"> |
|
||||||
<div class="titlebox"> |
|
||||||
<img src="../../../assets/images/logosm.png" alt=""> |
|
||||||
<div class="content"> |
|
||||||
<div class="contentitem"> |
|
||||||
<span class="grey" (click)="gorecordList()">预警类型统计</span> |
|
||||||
<span class="grey" (click)="goOilList()">卸油统计</span> |
|
||||||
<span>证照预警统计</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt=""> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="chartsbox" [hidden]="!isEcharts"> |
|
||||||
<div class="chart"> |
|
||||||
<div class="leftbox" style="position: relative;"> |
|
||||||
<span class="chartname"> |
|
||||||
<img src="../../../assets/images/flower.png" alt=""> |
|
||||||
预警统计 |
|
||||||
</span> |
|
||||||
<div class="centerContent"> |
|
||||||
<div class="num">{{num}}</div> |
|
||||||
<div class="numname">总数</div> |
|
||||||
</div> |
|
||||||
<div class="piechart" id="piechart"> |
|
||||||
|
|
||||||
</div> |
|
||||||
<nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin> |
|
||||||
</div> |
|
||||||
<div class="rightbox" style="position: relative;"> |
|
||||||
<span class="chartname"> |
|
||||||
<img src="../../../assets/images/flower.png" alt=""> |
|
||||||
近30天预警走势 |
|
||||||
</span> |
|
||||||
<div class="barchart" id="barchart"> |
|
||||||
|
|
||||||
</div> |
|
||||||
<nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="title"> |
|
||||||
<app-title [name]="'预警列表'"></app-title> |
|
||||||
</div> |
|
||||||
<div class="search"> |
|
||||||
<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="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> |
|
||||||
<nz-form-item class="searchParams searchParamsLong" *ngIf="isOrShow"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" |
|
||||||
nzShowSearch [(ngModel)]="defaultOrId" 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 searchParams2"> |
|
||||||
<nz-form-control> |
|
||||||
<nz-range-picker [nzAllowClear]="false" formControlName="datePicker"></nz-range-picker> |
|
||||||
<br /> |
|
||||||
</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"> |
|
||||||
<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"> |
|
||||||
<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"> |
|
||||||
<ng-container *ngIf="item.numberOfTimes; else elseTemplate2"> |
|
||||||
<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 #elseTemplate2> |
|
||||||
消防设备逾期报警 |
|
||||||
</ng-template> |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3" [title]="item.gasStation.companyName"> |
|
||||||
{{item.gasStation.companyName ? item.gasStation.companyName : '/'}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="5" [title]="item.gasStation.locationName"> |
|
||||||
{{item.gasStation.locationName ? item.gasStation.locationName : '/'}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3" [title]="item.gasStation.stationName"> |
|
||||||
{{item.gasStation.stationName ? item.gasStation.stationName : '/'}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3"> |
|
||||||
{{item.violatedItemSnapshotObj.name ? item.violatedItemSnapshotObj.name : '/'}} |
|
||||||
</div> |
|
||||||
<div nz-col nzSpan="3"> |
|
||||||
{{item.violatedItemSnapshotObj.validityEndTime ? |
|
||||||
(item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd") : '/'}} |
|
||||||
</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> |
|
||||||
</div> |
|
||||||
@ -1,620 +0,0 @@ |
|||||||
.recordsbox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 36px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
margin-bottom: 16px; |
|
||||||
|
|
||||||
form { |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
|
|
||||||
.searchParams, |
|
||||||
.btn { |
|
||||||
margin: 0 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.searchParams { |
|
||||||
// flex: 10; |
|
||||||
width: 150px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.searchParamsLong { |
|
||||||
width: 250px; |
|
||||||
} |
|
||||||
|
|
||||||
.searchParams2 { |
|
||||||
width: 220px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
// flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
nz-select { |
|
||||||
color: rgba(145, 204, 255, 0.95); |
|
||||||
} |
|
||||||
|
|
||||||
nz-tree-select { |
|
||||||
color: rgba(145, 204, 255, 0.95); |
|
||||||
} |
|
||||||
|
|
||||||
nz-range-picker { |
|
||||||
background-color: rgba(0, 0, 0, 0); |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.title { |
|
||||||
margin: 13px 0; |
|
||||||
width: 100%; |
|
||||||
height: 64px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 28px; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.titlebox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 65px; |
|
||||||
height: 65px; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
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%); |
|
||||||
|
|
||||||
.contentitem { |
|
||||||
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: 10px; |
|
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.chartsbox { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
.chartname { |
|
||||||
position: absolute; |
|
||||||
left: 20px; |
|
||||||
top: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.chart { |
|
||||||
width: 97%; |
|
||||||
height: 350px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 10px; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
div { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
span { |
|
||||||
font-family: titlefont; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
height: 28px; |
|
||||||
color: #bee1ff; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.leftbox { |
|
||||||
width: 360px; |
|
||||||
position: relative; |
|
||||||
border: 0px; |
|
||||||
box-shadow: 0 0 26px 0px #1a7fd7 inset; |
|
||||||
margin-right: 16px; |
|
||||||
|
|
||||||
.centerContent { |
|
||||||
position: absolute; |
|
||||||
top: 34%; |
|
||||||
left: 50%; |
|
||||||
transform: translateX(-50%); |
|
||||||
width: 170px; |
|
||||||
|
|
||||||
div { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.numname { |
|
||||||
// font-family: titlefont; |
|
||||||
color: #bee1ff; |
|
||||||
} |
|
||||||
|
|
||||||
.num { |
|
||||||
color: #FFFFFF; |
|
||||||
font-size: 38px; |
|
||||||
text-shadow: 0px 0px 16px #3A9AFF; |
|
||||||
font-weight: bold; |
|
||||||
height: 46px; |
|
||||||
line-height: 46px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.goback { |
|
||||||
position: absolute; |
|
||||||
right: 20px; |
|
||||||
top: 14px; |
|
||||||
color: #C4E2FC; |
|
||||||
font-family: synormal; |
|
||||||
font-size: 14px; |
|
||||||
z-index: 999; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.rightbox { |
|
||||||
flex: 1; |
|
||||||
position: relative; |
|
||||||
border: 0px; |
|
||||||
box-shadow: 0 0 26px 0px #1a7fd7 inset; |
|
||||||
|
|
||||||
.btnbox { |
|
||||||
position: absolute; |
|
||||||
right: 28px; |
|
||||||
top: 12px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
z-index: 999; |
|
||||||
|
|
||||||
button { |
|
||||||
border: 1px solid #91CCFF; |
|
||||||
color: #91CCFF; |
|
||||||
border-radius: 0px; |
|
||||||
box-shadow: 0 0 5px 0 #2399FF inset; |
|
||||||
background: none; |
|
||||||
} |
|
||||||
|
|
||||||
.rankingBtn { |
|
||||||
margin-right: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.selectedbtn { |
|
||||||
background: linear-gradient(180deg, #000D21 0%, #001331 27%, #2399FF 100%); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// 适配125% |
|
||||||
@media screen and (max-height: 750px) { |
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 30px; |
|
||||||
height: 32px; |
|
||||||
margin-bottom: 12px; |
|
||||||
|
|
||||||
form { |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.title { |
|
||||||
height: 42px; |
|
||||||
padding: 0 20px; |
|
||||||
margin: 8px 0; |
|
||||||
|
|
||||||
.titlebox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 46px; |
|
||||||
height: 46px; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
height: 36px; |
|
||||||
|
|
||||||
.contentitem { |
|
||||||
width: 100%; |
|
||||||
height: 25px; |
|
||||||
|
|
||||||
span { |
|
||||||
margin-left: 6px; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
span:nth-child(1) { |
|
||||||
margin-left: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.packup { |
|
||||||
position: absolute; |
|
||||||
right: 33px; |
|
||||||
top: 4px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.chartsbox { |
|
||||||
width: 100%; |
|
||||||
height: 43%; |
|
||||||
|
|
||||||
.chartname { |
|
||||||
position: absolute; |
|
||||||
left: 20px; |
|
||||||
top: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.chart { |
|
||||||
width: 97%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
div { |
|
||||||
span { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.leftbox { |
|
||||||
width: 300px; |
|
||||||
box-shadow: 0 0 20px 0px #1a7fd7 inset; |
|
||||||
margin-right: 12px; |
|
||||||
|
|
||||||
.centerContent { |
|
||||||
.num { |
|
||||||
color: #FFFFFF; |
|
||||||
font-size: 42px; |
|
||||||
text-shadow: 0px 0px 16px #3A9AFF; |
|
||||||
font-weight: bold; |
|
||||||
height: 49px; |
|
||||||
line-height: 50px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.rightbox { |
|
||||||
flex: 1; |
|
||||||
position: relative; |
|
||||||
border: 0px; |
|
||||||
box-shadow: 0 0 26px 0px #1a7fd7 inset; |
|
||||||
|
|
||||||
.btnbox { |
|
||||||
position: absolute; |
|
||||||
right: 28px; |
|
||||||
top: 12px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
z-index: 999; |
|
||||||
|
|
||||||
.rankingBtn { |
|
||||||
margin-right: 12px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 适配150% |
|
||||||
@media screen and (max-height: 600px) { |
|
||||||
.search { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 22px; |
|
||||||
height: 32px; |
|
||||||
margin-bottom: 6px; |
|
||||||
|
|
||||||
form { |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
.title { |
|
||||||
height: 36px; |
|
||||||
padding: 0 20px; |
|
||||||
margin: 3px 0; |
|
||||||
|
|
||||||
.titlebox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 36px; |
|
||||||
height: 36px; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
height: 30px; |
|
||||||
|
|
||||||
.contentitem { |
|
||||||
width: 100%; |
|
||||||
height: 22px; |
|
||||||
|
|
||||||
span { |
|
||||||
margin-left: 6px; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
span:nth-child(1) { |
|
||||||
margin-left: 12px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.packup { |
|
||||||
position: absolute; |
|
||||||
right: 33px; |
|
||||||
top: 2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.chartsbox { |
|
||||||
width: 100%; |
|
||||||
height: 40%; |
|
||||||
|
|
||||||
.chartname { |
|
||||||
position: absolute; |
|
||||||
left: 20px; |
|
||||||
top: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.chart { |
|
||||||
width: 97%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
div { |
|
||||||
span { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.leftbox { |
|
||||||
width: 260px; |
|
||||||
box-shadow: 0 0 20px 0px #1a7fd7 inset; |
|
||||||
margin-right: 8px; |
|
||||||
|
|
||||||
.centerContent { |
|
||||||
.num { |
|
||||||
color: #FFFFFF; |
|
||||||
font-size: 32px; |
|
||||||
text-shadow: 0px 0px 12px #3A9AFF; |
|
||||||
font-weight: bold; |
|
||||||
height: 42px; |
|
||||||
line-height: 42px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.rightbox { |
|
||||||
box-shadow: 0 0 22px 0px #1a7fd7 inset; |
|
||||||
|
|
||||||
.btnbox { |
|
||||||
position: absolute; |
|
||||||
right: 28px; |
|
||||||
top: 12px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
z-index: 999; |
|
||||||
|
|
||||||
.rankingBtn { |
|
||||||
margin-right: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,739 +0,0 @@ |
|||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import { Component, OnInit, ViewContainerRef, ElementRef } from '@angular/core'; |
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
||||||
import * as echarts from 'echarts'; |
|
||||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
||||||
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component'; |
|
||||||
import * as moment from 'moment'; |
|
||||||
import { fromEvent } from 'rxjs'; |
|
||||||
import { debounceTime } from 'rxjs/operators'; |
|
||||||
import { Router } from '@angular/router'; |
|
||||||
import { OilUnloadingProcessComponent } from '../oil-unloading-process/oil-unloading-process.component'; |
|
||||||
import { TreeService } from 'src/app/service/tree.service'; |
|
||||||
import { DisposeequipmentComponent } from './disposeequipment/disposeequipment.component'; |
|
||||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-warning-statistics-list', |
|
||||||
templateUrl: './warning-statistics-list.component.html', |
|
||||||
styleUrls: ['./warning-statistics-list.component.scss'] |
|
||||||
}) |
|
||||||
export class WarningStatisticsListComponent implements OnInit { |
|
||||||
|
|
||||||
validateForm!: FormGroup; |
|
||||||
constructor(private toTree: TreeService, private message: NzMessageService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { } |
|
||||||
|
|
||||||
myChart: any //左侧饼图
|
|
||||||
mybarChart: any //柱状图
|
|
||||||
isEcharts: boolean = true |
|
||||||
isEchartsShow() { |
|
||||||
this.isEcharts = !this.isEcharts |
|
||||||
} |
|
||||||
startdate |
|
||||||
enddate |
|
||||||
|
|
||||||
isOrShow: boolean |
|
||||||
ngOnInit(): void { |
|
||||||
//当前日期
|
|
||||||
let myDate: any = new Date(); |
|
||||||
let nowY = myDate.getFullYear(); |
|
||||||
let nowM = myDate.getMonth() + 1; |
|
||||||
let nowD = myDate.getDate(); |
|
||||||
this.enddate = JSON.parse(JSON.stringify(nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD)));//当前日期
|
|
||||||
//获取三十天前日期
|
|
||||||
let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
|
|
||||||
let lastY = lw.getFullYear(); |
|
||||||
let lastM = lw.getMonth() + 1; |
|
||||||
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({ |
|
||||||
eventSystemName: null, |
|
||||||
organization: [null], |
|
||||||
datePicker: [[this.startdate, this.enddate]] |
|
||||||
}); |
|
||||||
|
|
||||||
// 饼图
|
|
||||||
this.myChart = echarts.init(document.getElementById('piechart')); |
|
||||||
//柱状折线图
|
|
||||||
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
||||||
this.tableSpin = true |
|
||||||
this.getAllOrganization() |
|
||||||
this.getAggregations() |
|
||||||
if (this.router.url.indexOf('petrolStation') != -1) { |
|
||||||
this.isOrShow = false |
|
||||||
} else { |
|
||||||
this.isOrShow = true |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//刷新饼图图表数据
|
|
||||||
num |
|
||||||
echartsData: any |
|
||||||
//一级饼图
|
|
||||||
oilchartpieOption = { |
|
||||||
color: ['#FF4B65', '#36A2FF'], |
|
||||||
tooltip: { |
|
||||||
trigger: 'item'//触发类型
|
|
||||||
}, |
|
||||||
legend: { |
|
||||||
bottom: '12%', |
|
||||||
left: 'center', |
|
||||||
itemGap: 40, |
|
||||||
itemWidth: 8, |
|
||||||
itemHeight: 8, |
|
||||||
formatter: (name) => { |
|
||||||
let data = this.oilchartpieOptionPieData1 |
|
||||||
let value |
|
||||||
for (var i = 0, l = data.length; i < l; i++) { |
|
||||||
if (data[i].name == name) { |
|
||||||
value = data[i].value; |
|
||||||
} |
|
||||||
} |
|
||||||
return '{a|' + name + '}' + '{b|' + value + '}'; |
|
||||||
}, |
|
||||||
textStyle: { |
|
||||||
color: '#fff', |
|
||||||
rich: { |
|
||||||
a: { |
|
||||||
width: 80 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
type: 'pie', |
|
||||||
radius: ['50%', '60%'], |
|
||||||
bottom: '10%', |
|
||||||
avoidLabelOverlap: false,//防止标签重叠策略
|
|
||||||
label: {//每一个标签外网延伸的引导说明
|
|
||||||
show: false, |
|
||||||
position: 'outside' |
|
||||||
}, |
|
||||||
data: [], |
|
||||||
tooltip: {//鼠标移入提示
|
|
||||||
position: 'right', |
|
||||||
padding: [14, 19], |
|
||||||
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
||||||
textStyle: { |
|
||||||
color: '#fff', |
|
||||||
fontSize: 12 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
}; |
|
||||||
oilchartpieOptionPieData1: any |
|
||||||
//一级柱状图
|
|
||||||
oilchartbarOption = { |
|
||||||
xAxis: { |
|
||||||
type: 'category', |
|
||||||
data: [], |
|
||||||
axisLine: { |
|
||||||
show: false, |
|
||||||
lineStyle: { |
|
||||||
color: '#91CCFF' |
|
||||||
} |
|
||||||
}, |
|
||||||
axisTick: {//刻度线
|
|
||||||
show: false |
|
||||||
}, |
|
||||||
inverse: true |
|
||||||
}, |
|
||||||
yAxis: { |
|
||||||
type: 'value', |
|
||||||
nameTextStyle: { |
|
||||||
color: '#C4E2FC' |
|
||||||
}, |
|
||||||
splitLine: {//分割线
|
|
||||||
lineStyle: { |
|
||||||
color: ['#0f4374'], |
|
||||||
width: 2 |
|
||||||
} |
|
||||||
}, |
|
||||||
axisTick: {//刻度线
|
|
||||||
show: false |
|
||||||
}, |
|
||||||
axisLine: {//轴线
|
|
||||||
show: false, |
|
||||||
lineStyle: { |
|
||||||
color: '#C4E2FC' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
tooltip: { |
|
||||||
// trigger: 'axis'
|
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: '预警事件', |
|
||||||
data: [], |
|
||||||
type: 'bar', |
|
||||||
itemStyle: { |
|
||||||
color: { |
|
||||||
type: 'linear', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
x2: 0, |
|
||||||
y2: 1, |
|
||||||
colorStops: [{ |
|
||||||
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
||||||
}, { |
|
||||||
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
||||||
}], |
|
||||||
global: false // 缺省为 false
|
|
||||||
} |
|
||||||
}, |
|
||||||
barWidth: '25%' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '预警事件', |
|
||||||
data: [], |
|
||||||
type: 'line', |
|
||||||
symbol: 'circle', |
|
||||||
symbolSize: 8, |
|
||||||
label: { |
|
||||||
show: true |
|
||||||
}, |
|
||||||
itemStyle: { |
|
||||||
color: '#fff', |
|
||||||
shadowColor: '#fff', |
|
||||||
shadowBlur: 10 |
|
||||||
}, |
|
||||||
lineStyle: { |
|
||||||
color: '#FFCC8A', |
|
||||||
width: 1 |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
legend: { |
|
||||||
data: ['预警事件'], |
|
||||||
textStyle: { |
|
||||||
color: '#fff' |
|
||||||
}, |
|
||||||
right: 28, |
|
||||||
top: 18, |
|
||||||
itemWidth: 8, |
|
||||||
itemHeight: 8, |
|
||||||
}, |
|
||||||
grid: { |
|
||||||
left: '42px', |
|
||||||
right: '30px', |
|
||||||
bottom: '38px', |
|
||||||
top: '80px' |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
//二级饼图
|
|
||||||
oilchartpieOption2 = { |
|
||||||
color: ['#36A2FF', '#FFBD4B', '#46DFFF'], |
|
||||||
tooltip: { |
|
||||||
trigger: 'item'//触发类型
|
|
||||||
}, |
|
||||||
legend: { |
|
||||||
bottom: '8%', |
|
||||||
left: 'center', |
|
||||||
itemGap: 10, |
|
||||||
itemWidth: 8, |
|
||||||
itemHeight: 8, |
|
||||||
formatter: (name) => { |
|
||||||
let data = this.oilchartpieOptionPieData2 |
|
||||||
let value |
|
||||||
for (var i = 0, l = data.length; i < l; i++) { |
|
||||||
if (data[i].name == name) { |
|
||||||
value = data[i].value; |
|
||||||
} |
|
||||||
} |
|
||||||
return '{a|' + name + '}' + '{b|' + value + '}'; |
|
||||||
}, |
|
||||||
textStyle: { |
|
||||||
color: '#fff', |
|
||||||
rich: { |
|
||||||
a: { |
|
||||||
width: 60 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
type: 'pie', |
|
||||||
radius: ['50%', '60%'], |
|
||||||
bottom: '10%', |
|
||||||
avoidLabelOverlap: false,//防止标签重叠策略
|
|
||||||
label: {//每二个标签外网延伸的引导说明
|
|
||||||
show: false, |
|
||||||
position: 'outside' |
|
||||||
}, |
|
||||||
data: [], |
|
||||||
tooltip: {//鼠标移入提示
|
|
||||||
position: 'right', |
|
||||||
padding: [14, 19], |
|
||||||
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
||||||
textStyle: { |
|
||||||
color: '#fff', |
|
||||||
fontSize: 12 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
}; |
|
||||||
oilchartpieOptionPieData2: any |
|
||||||
//二级柱状图
|
|
||||||
oilchartbarOption2 = { |
|
||||||
tooltip: { |
|
||||||
// trigger: 'axis'
|
|
||||||
}, |
|
||||||
xAxis: { |
|
||||||
type: 'category', |
|
||||||
data: [], |
|
||||||
axisLine: { |
|
||||||
show: false, |
|
||||||
lineStyle: { |
|
||||||
color: '#91CCFF' |
|
||||||
} |
|
||||||
}, |
|
||||||
axisTick: {//刻度线
|
|
||||||
show: false |
|
||||||
}, |
|
||||||
inverse: true |
|
||||||
|
|
||||||
}, |
|
||||||
yAxis: { |
|
||||||
type: 'value', |
|
||||||
nameTextStyle: { |
|
||||||
color: '#C4E2FC' |
|
||||||
}, |
|
||||||
splitLine: {//分割线
|
|
||||||
lineStyle: { |
|
||||||
color: ['#0f4374'], |
|
||||||
width: 2 |
|
||||||
} |
|
||||||
}, |
|
||||||
axisTick: {//刻度线
|
|
||||||
show: false |
|
||||||
}, |
|
||||||
axisLine: {//轴线
|
|
||||||
show: false, |
|
||||||
lineStyle: { |
|
||||||
color: '#C4E2FC' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
legend: { |
|
||||||
data: ['事前准备', '事中操作', '全程监测'], |
|
||||||
textStyle: { |
|
||||||
color: '#fff' |
|
||||||
}, |
|
||||||
right: 18, |
|
||||||
top: 18, |
|
||||||
itemWidth: 8, |
|
||||||
itemHeight: 8, |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
data: [], |
|
||||||
type: 'bar', |
|
||||||
itemStyle: { |
|
||||||
color: { |
|
||||||
type: 'linear', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
x2: 0, |
|
||||||
y2: 1, |
|
||||||
colorStops: [{ |
|
||||||
offset: 0, color: 'rgba(54, 162, 255, 1)' // 0% 处的颜色
|
|
||||||
}, { |
|
||||||
offset: 1, color: 'rgba(54, 162, 255, 0.1)' // 100% 处的颜色
|
|
||||||
}], |
|
||||||
global: false // 缺省为 false
|
|
||||||
} |
|
||||||
}, |
|
||||||
barWidth: '25%' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
data: [], |
|
||||||
type: 'bar', |
|
||||||
itemStyle: { |
|
||||||
color: { |
|
||||||
type: 'linear', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
x2: 0, |
|
||||||
y2: 1, |
|
||||||
colorStops: [{ |
|
||||||
offset: 0, color: 'rgba(255, 189, 75, 1)' // 0% 处的颜色
|
|
||||||
}, { |
|
||||||
offset: 1, color: 'rgba(255, 189, 75, 0.1)' // 100% 处的颜色
|
|
||||||
}], |
|
||||||
global: false // 缺省为 false
|
|
||||||
} |
|
||||||
}, |
|
||||||
barWidth: '25%' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
data: [], |
|
||||||
type: 'bar', |
|
||||||
itemStyle: { |
|
||||||
color: { |
|
||||||
type: 'linear', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
x2: 0, |
|
||||||
y2: 1, |
|
||||||
colorStops: [{ |
|
||||||
offset: 0, color: 'rgba(70, 223, 255, 1)' // 0% 处的颜色
|
|
||||||
}, { |
|
||||||
offset: 1, color: 'rgba(70, 223, 255, 0.1)' // 100% 处的颜色
|
|
||||||
}], |
|
||||||
global: false // 缺省为 false
|
|
||||||
} |
|
||||||
}, |
|
||||||
barWidth: '25%' |
|
||||||
} |
|
||||||
], |
|
||||||
grid: { |
|
||||||
left: '42px', |
|
||||||
right: '30px', |
|
||||||
bottom: '38px', |
|
||||||
top: '80px' |
|
||||||
} |
|
||||||
}; |
|
||||||
isgoback: boolean = false |
|
||||||
//获取统计信息
|
|
||||||
chartsSpin: boolean = false |
|
||||||
getAggregations() { |
|
||||||
this.chartsSpin = true |
|
||||||
let organizationUnitId |
|
||||||
if (this.router.url.indexOf('petrolStation') != -1) { |
|
||||||
organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id |
|
||||||
} else { |
|
||||||
organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
||||||
} |
|
||||||
let params: any = { |
|
||||||
OrganizationUnitId: organizationUnitId, |
|
||||||
IsContainsChildren: 'true' |
|
||||||
} |
|
||||||
this.http.get('/api/services/app/ViolateRecord/LicenseSummary', { params: params }).subscribe((data: any) => { |
|
||||||
this.chartsSpin = false |
|
||||||
this.echartsData = data.result |
|
||||||
this.refreshEchartsData1(this.echartsData) |
|
||||||
}) |
|
||||||
} |
|
||||||
refreshEchartsData1(data) { |
|
||||||
// console.log('echarts信息', data)
|
|
||||||
//饼图
|
|
||||||
let totalCount = 0 |
|
||||||
data.violationList.forEach(element => { |
|
||||||
element.name = element.eventSystemName |
|
||||||
element.value = element.count |
|
||||||
totalCount += element.count |
|
||||||
}); |
|
||||||
this.num = totalCount |
|
||||||
this.oilchartpieOptionPieData1 = data.violationList |
|
||||||
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 |
|
||||||
this.myChart.setOption(this.oilchartpieOption); |
|
||||||
this.myChart.off('legendselectchanged') |
|
||||||
this.myChart.off('click') |
|
||||||
this.myChart.on('click', (params) => { |
|
||||||
if (params.name == '证照预警') { |
|
||||||
console.log('点击myChart') |
|
||||||
// this.validateForm.patchValue({
|
|
||||||
// state: '0'
|
|
||||||
// });
|
|
||||||
// this.list = []
|
|
||||||
// this.SkipCount = '0'
|
|
||||||
// this.getViolateRecordList()
|
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
//柱状图
|
|
||||||
let monthArr = [] |
|
||||||
let valuedata = [] |
|
||||||
data.timeList.forEach(element => { |
|
||||||
monthArr.push(moment(element.key).format('MM.DD')) |
|
||||||
valuedata.push(element.count) |
|
||||||
}); |
|
||||||
this.oilchartbarOption.xAxis.data = monthArr |
|
||||||
this.oilchartbarOption.series[0].data = valuedata |
|
||||||
this.oilchartbarOption.series[1].data = valuedata |
|
||||||
this.mybarChart.setOption(this.oilchartbarOption); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//预警类型接口
|
|
||||||
licenseId |
|
||||||
equipmentId |
|
||||||
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 = { |
|
||||||
OrganizationUnitId: OrganizationUnitId, |
|
||||||
IsContainsChildren: "true" |
|
||||||
} |
|
||||||
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.defaultOrId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
||||||
this.validateForm.value.organization = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
||||||
this.validateForm.patchValue({ |
|
||||||
datePicker: [this.startdate, this.enddate] |
|
||||||
}); |
|
||||||
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 == '证照预警') { |
|
||||||
option1 = element.id |
|
||||||
} |
|
||||||
if (element.eventSystemName == '灭火器维护') { |
|
||||||
option2 = element.id |
|
||||||
} |
|
||||||
}); |
|
||||||
this.eventSystemNameOption = [ |
|
||||||
{ id: option1, name: '证照预警' }, |
|
||||||
{ id: option2, name: '消防设施预警' }, |
|
||||||
] |
|
||||||
this.list = [] |
|
||||||
this.SkipCount = '0' |
|
||||||
this.getLicenseList() |
|
||||||
}) |
|
||||||
|
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//获得卸油记录列表
|
|
||||||
SkipCount: string = '0' |
|
||||||
MaxResultCount: string = '50' |
|
||||||
list: any = [] |
|
||||||
totalCount: string |
|
||||||
tableSpin: boolean = false |
|
||||||
//获得证照预警
|
|
||||||
getLicenseList() { |
|
||||||
for (const key in this.validateForm.controls) { |
|
||||||
this.validateForm.controls[key].markAsPristine(); |
|
||||||
this.validateForm.controls[key].updateValueAndValidity(); |
|
||||||
} |
|
||||||
this.tableSpin = true |
|
||||||
let organizationUnitId |
|
||||||
if (this.router.url.indexOf('petrolStation') != -1) { |
|
||||||
organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id |
|
||||||
} else { |
|
||||||
organizationUnitId = this.validateForm.value.organization |
|
||||||
} |
|
||||||
|
|
||||||
let ViolationIds = [] |
|
||||||
// console.log(456, this.validateForm.value)
|
|
||||||
if (this.validateForm.value.eventSystemName) { |
|
||||||
ViolationIds.push(this.validateForm.value.eventSystemName) |
|
||||||
} else { |
|
||||||
this.eventSystemNameOption.forEach(element => { |
|
||||||
ViolationIds.push(element.id) |
|
||||||
}); |
|
||||||
} |
|
||||||
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: this.SkipCount, |
|
||||||
MaxResultCount: '50' |
|
||||||
} |
|
||||||
this.http.get('/api/services/app/ViolateRecord/GetAll', { |
|
||||||
params: params |
|
||||||
}).subscribe((data: any) => { |
|
||||||
this.tableSpin = false |
|
||||||
data.result.items.forEach(element => { |
|
||||||
element.violatedItemSnapshotObj = JSON.parse(element.violatedItemSnapshot) |
|
||||||
}); |
|
||||||
this.list = this.list.concat(data.result.items); |
|
||||||
this.list = [...this.list] |
|
||||||
this.totalCount = data.result.totalCount |
|
||||||
console.log('证照预警列表', data.result.items) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
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.getLicenseList() |
|
||||||
} |
|
||||||
|
|
||||||
resetForm(e: MouseEvent): void { |
|
||||||
e.preventDefault(); |
|
||||||
for (const key in this.validateForm.controls) { |
|
||||||
this.validateForm.controls[key].markAsPristine(); |
|
||||||
this.validateForm.controls[key].updateValueAndValidity(); |
|
||||||
} |
|
||||||
// console.log('赋值日期', [this.startdate, this.enddate])
|
|
||||||
this.validateForm.patchValue({ |
|
||||||
datePicker: [this.startdate, this.enddate], |
|
||||||
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 滚动事件
|
|
||||||
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() |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
look(item) { |
|
||||||
console.log(item) |
|
||||||
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) { |
|
||||||
const modal = this.modal.create({ |
|
||||||
nzContent: DisposeequipmentComponent, |
|
||||||
nzViewContainerRef: this.viewContainerRef, |
|
||||||
nzWidth: 380, |
|
||||||
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 () => { |
|
||||||
if (instance.isScrap) { |
|
||||||
await new Promise(resolve => { |
|
||||||
let body = { |
|
||||||
id: item.violatedItemSnapshotObj.id, |
|
||||||
name: instance.copydata2.violatedItemSnapshotObj.name, |
|
||||||
storageLocation: instance.copydata2.violatedItemSnapshotObj.storageLocation, |
|
||||||
productionDate: moment(instance.copydata2.violatedItemSnapshotObj.productionDate).format('yyyy-MM-DD'), |
|
||||||
maintenanceDate: moment(instance.copydata2.violatedItemSnapshotObj.maintenanceDate).format('yyyy-MM-DD'), |
|
||||||
validityEndTime: moment(instance.copydata2.violatedItemSnapshotObj.validityEndTime).format('yyyy-MM-DD'), |
|
||||||
isScrapped: true, |
|
||||||
organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId |
|
||||||
} |
|
||||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
|
||||||
let body = { |
|
||||||
id: item.id, |
|
||||||
handleRecord: '报废成功！' |
|
||||||
} |
|
||||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
|
||||||
resolve(data) |
|
||||||
this.message.create('success', '报废成功！'); |
|
||||||
item.handleTime = new Date() |
|
||||||
return true |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
} else { |
|
||||||
if (instance.validateForm.valid) { |
|
||||||
await new Promise(resolve => { |
|
||||||
let body = { |
|
||||||
id: item.violatedItemSnapshotObj.id, |
|
||||||
name: instance.validateForm.value.name, |
|
||||||
storageLocation: instance.validateForm.value.storageLocation, |
|
||||||
productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'), |
|
||||||
maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'), |
|
||||||
validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'), |
|
||||||
organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId |
|
||||||
} |
|
||||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
|
||||||
let body = { |
|
||||||
id: item.id, |
|
||||||
handleRecord: '维保成功！' |
|
||||||
} |
|
||||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
|
||||||
resolve(data) |
|
||||||
this.message.create('success', '维保成功！'); |
|
||||||
item.handleTime = new Date() |
|
||||||
return true |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.message.create('warning', '请填写完整！'); |
|
||||||
return false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
const instance = modal.getContentComponent(); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
goOilList() { |
|
||||||
if (this.router.url.indexOf('petrolStation') != -1) { |
|
||||||
this.router.navigate(['/records/petrolStation/oliunloadinglist']) |
|
||||||
} else { |
|
||||||
this.router.navigate(['/records/oliunloadinglist']) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
gorecordList() { |
|
||||||
if (this.router.url.indexOf('petrolStation') != -1) { |
|
||||||
this.router.navigate(['/records/petrolStation']) |
|
||||||
} else { |
|
||||||
this.router.navigate(['/records']) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
Loading…
Reference in new issue