25 changed files with 1691 additions and 187 deletions
@ -0,0 +1,39 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; |
||||||
|
import { ModeManager } from '../babylon/controller/mode-manager'; |
||||||
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class init3DGuard implements CanActivate { |
||||||
|
|
||||||
|
constructor(private router: Router, private http: HttpClient, private message: NzMessageService,) { } |
||||||
|
|
||||||
|
// 路由守卫
|
||||||
|
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot,): Promise<boolean> { |
||||||
|
return this.getGasStationBaseInfo().then((res: any) => { |
||||||
|
sessionStorage.setItem("3dSceneData", JSON.stringify(res)) |
||||||
|
let isMakeMode = ModeManager.s_isMakeMode |
||||||
|
if (isMakeMode || res.hasBuildingInfo) { |
||||||
|
return true |
||||||
|
} else if (!res.hasBuildingInfo) { |
||||||
|
this.message.info("当前站点没有数字油站!"); |
||||||
|
return false |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//获取 当前加油站基本信息
|
||||||
|
getGasStationBaseInfo() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let params = { organizationUnitId: (JSON.parse(sessionStorage.getItem('userdataOfgasstation'))).organization.id } |
||||||
|
this.http.get('/api/services/app/GasStation/Get', { params: params }).subscribe((data: any)=>{ |
||||||
|
resolve(data.result) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,167 @@ |
|||||||
|
<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>卸油统计</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"> |
||||||
|
<span class="chartname"> |
||||||
|
<img src="../../../assets/images/flower.png" alt=""> |
||||||
|
卸油预警统计 |
||||||
|
</span> |
||||||
|
<div class="centerContent"> |
||||||
|
<div class="num">{{num}}</div> |
||||||
|
<div class="numname">总数</div> |
||||||
|
</div> |
||||||
|
<span *ngIf="isgoback" class="goback" (click)="goback()">返回</span> |
||||||
|
<div class="piechart" id="piechart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="rightbox"> |
||||||
|
<span class="chartname"> |
||||||
|
<img src="../../../assets/images/flower.png" alt=""> |
||||||
|
近一个月卸油预警走势 |
||||||
|
</span> |
||||||
|
<div class="barchart" id="barchart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'卸油作业留证列表'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="search" [hidden]="!isEcharts"> |
||||||
|
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-select formControlName="state" 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-select formControlName="type" nzPlaceHolder="请选择预警事件"> |
||||||
|
<nz-option *ngFor="let item of warningTypesDetails" [nzValue]="item.id" [nzLabel]="item.violationName"> |
||||||
|
</nz-option> |
||||||
|
</nz-select> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-select formControlName="site" nzPlaceHolder="请选择处置状态"> |
||||||
|
<nz-option nzValue="0" nzLabel="已处置"></nz-option> |
||||||
|
<nz-option nzValue="1" nzLabel="未处置"></nz-option> |
||||||
|
<nz-option nzValue="2" nzLabel="已逾期"></nz-option> |
||||||
|
</nz-select> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> --> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-range-picker 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"> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
卸油开始时间 |
||||||
|
</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="3"> |
||||||
|
状态 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
操作 |
||||||
|
</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"> |
||||||
|
{{item.startTime ? (item.startTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
{{item.endTime ? (item.endTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
{{item.proccessBeforeCount}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
{{item.proccessAfterCount}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
{{item.allProccessCount}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
<ng-container |
||||||
|
*ngIf="item.proccessBeforeCount == 0 && item.proccessAfterCount == 0 && item.allProccessCount == 0; else elseTemplate"> |
||||||
|
<span style="color: #4BFFD4;">正常</span> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<span style="color: #FF4B65;">预警</span> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
<span style="color: #36A2FF;" (click)="look(item)">查看</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="pagination"> |
||||||
|
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" |
||||||
|
nzShowQuickJumper></nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,284 @@ |
|||||||
|
.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: space-around; |
||||||
|
|
||||||
|
.searchParams { |
||||||
|
width: 44.5%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 5%; |
||||||
|
} |
||||||
|
|
||||||
|
nz-select { |
||||||
|
color: rgba(145, 204, 255, 0.95); |
||||||
|
} |
||||||
|
|
||||||
|
nz-range-picker { |
||||||
|
background-color: rgba(0, 0, 0, 0); |
||||||
|
width: 97%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.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: 36%; |
||||||
|
left: 26%; |
||||||
|
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; |
||||||
|
|
||||||
|
.look { |
||||||
|
color: #36A2FF; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 15px 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,617 @@ |
|||||||
|
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'; |
||||||
|
@Component({ |
||||||
|
selector: 'app-oil-unloading-process-list', |
||||||
|
templateUrl: './oil-unloading-process-list.component.html', |
||||||
|
styleUrls: ['./oil-unloading-process-list.component.scss'] |
||||||
|
}) |
||||||
|
export class OilUnloadingProcessListComponent implements OnInit { |
||||||
|
|
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor(private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { } |
||||||
|
|
||||||
|
myChart: any //左侧饼图
|
||||||
|
mybarChart: any //柱状图
|
||||||
|
|
||||||
|
|
||||||
|
getThirtyDays() { |
||||||
|
//获取当前日期
|
||||||
|
let myDate = new Date(); |
||||||
|
var nowY = myDate.getFullYear(); |
||||||
|
var nowM = myDate.getMonth() + 1; |
||||||
|
var nowD = myDate.getDate(); |
||||||
|
var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
|
||||||
|
var enddate = new Date(enddateStr); |
||||||
|
|
||||||
|
|
||||||
|
//获取三十天前日期
|
||||||
|
var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
|
||||||
|
var lastY = lw.getFullYear(); |
||||||
|
var lastM = lw.getMonth() + 1; |
||||||
|
var lastD = lw.getDate(); |
||||||
|
var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
|
||||||
|
var startDate = new Date(startdateStr); |
||||||
|
|
||||||
|
const dateList = [] |
||||||
|
while (true) { |
||||||
|
startDate.setDate(startDate.getDate() + 1) |
||||||
|
if (startDate.getTime() <= enddate.getTime()) { |
||||||
|
if (startDate.getDate() < 10) { |
||||||
|
// startDate.getFullYear() 获取年，此处没加上年份
|
||||||
|
dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate()) |
||||||
|
} else { |
||||||
|
dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate()) |
||||||
|
} |
||||||
|
} else { |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
return dateList; |
||||||
|
} |
||||||
|
|
||||||
|
isEcharts: boolean = true |
||||||
|
isEchartsShow() { |
||||||
|
this.isEcharts = !this.isEcharts |
||||||
|
} |
||||||
|
startdate |
||||||
|
enddate |
||||||
|
ngOnInit(): void { |
||||||
|
//当前日期
|
||||||
|
let myDate: any = new Date(); |
||||||
|
let nowY = myDate.getFullYear(); |
||||||
|
let nowM = myDate.getMonth() + 1; |
||||||
|
let nowD = myDate.getDate(); |
||||||
|
this.enddate = 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 = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
|
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
state: [null], |
||||||
|
datePicker: [[this.startdate, this.enddate]] |
||||||
|
}); |
||||||
|
// 饼图
|
||||||
|
this.myChart = echarts.init(document.getElementById('piechart')); |
||||||
|
//柱状折线图
|
||||||
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
||||||
|
this.getViolateRecordList() |
||||||
|
this.getAggregations() |
||||||
|
} |
||||||
|
//刷新饼图图表数据
|
||||||
|
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: '12%', |
||||||
|
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: { |
||||||
|
normal: { |
||||||
|
color: '#36A2FF', //柱状颜色
|
||||||
|
}, |
||||||
|
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: 'bar', |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: '#FFBD4B', //柱状颜色
|
||||||
|
}, |
||||||
|
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: 'bar', |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: '#46DFFF', //柱状颜色
|
||||||
|
}, |
||||||
|
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%' |
||||||
|
} |
||||||
|
], |
||||||
|
grid: { |
||||||
|
left: '42px', |
||||||
|
right: '30px', |
||||||
|
bottom: '38px', |
||||||
|
top: '80px' |
||||||
|
} |
||||||
|
}; |
||||||
|
isgoback:boolean = false |
||||||
|
refreshEchartsData1(data) { |
||||||
|
this.num = data.totalCount |
||||||
|
//饼图
|
||||||
|
this.oilchartpieOptionPieData1 = [ |
||||||
|
{ name: '预警事件', value: data.notCorrectCount }, |
||||||
|
{ name: '正常操作', value: data.correctCount }, |
||||||
|
] |
||||||
|
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 |
||||||
|
this.myChart.setOption(this.oilchartpieOption); |
||||||
|
this.myChart.on('legendselectchanged', (params) => { |
||||||
|
this.myChart.setOption({ |
||||||
|
legend: { selected: { [params.name]: true } } |
||||||
|
}) |
||||||
|
console.log('点击了', params.name); |
||||||
|
if (params.name == '预警事件') { |
||||||
|
this.isgoback = true |
||||||
|
this.refreshEchartsData2(this.echartsData) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//柱状图
|
||||||
|
let monthArr = [] |
||||||
|
let valuedata = [] |
||||||
|
data.list.forEach(element => { |
||||||
|
monthArr.push(moment(element.key).format('MM.DD')) |
||||||
|
valuedata.push(element.totalCount) |
||||||
|
}); |
||||||
|
this.oilchartbarOption.xAxis.data = monthArr |
||||||
|
this.oilchartbarOption.series[0].data = valuedata |
||||||
|
this.oilchartbarOption.series[1].data = valuedata |
||||||
|
this.mybarChart.setOption(this.oilchartbarOption); |
||||||
|
} |
||||||
|
refreshEchartsData2(data) { |
||||||
|
this.num = Number(data.proccessBeforeCount + data.proccessingCount + data.allProccessCount) |
||||||
|
//饼图
|
||||||
|
this.oilchartpieOptionPieData2 = [ |
||||||
|
{ name: '事前准备', value: data.proccessBeforeCount }, |
||||||
|
{ name: '事中操作', value: data.proccessingCount }, |
||||||
|
{ name: '全程检测', value: data.allProccessCount } |
||||||
|
] |
||||||
|
this.oilchartpieOption2.series[0].data = this.oilchartpieOptionPieData2 |
||||||
|
this.myChart.setOption(this.oilchartpieOption2); |
||||||
|
|
||||||
|
//柱状图
|
||||||
|
let monthArr = [] |
||||||
|
let valuedataBefore = [] |
||||||
|
let valuedataIng = [] |
||||||
|
let valuedataAll = [] |
||||||
|
data.list.forEach(element => { |
||||||
|
monthArr.push(moment(element.key).format('MM.DD')) |
||||||
|
valuedataBefore.push(element.proccessBeforeCount) |
||||||
|
valuedataIng.push(element.proccessingCount) |
||||||
|
valuedataAll.push(element.allProccessCount) |
||||||
|
}); |
||||||
|
this.oilchartbarOption2.xAxis.data = monthArr |
||||||
|
this.oilchartbarOption2.series[0].name = '事前准备' |
||||||
|
this.oilchartbarOption2.series[0].data = valuedataBefore |
||||||
|
this.oilchartbarOption2.series[1].name = '事中操作' |
||||||
|
this.oilchartbarOption2.series[1].data = valuedataIng |
||||||
|
this.oilchartbarOption2.series[2].name = '全程监测' |
||||||
|
this.oilchartbarOption2.series[2].data = valuedataAll |
||||||
|
this.mybarChart.setOption(this.oilchartbarOption2); |
||||||
|
} |
||||||
|
goback(){ |
||||||
|
this.isgoback = false |
||||||
|
this.refreshEchartsData1(this.echartsData) |
||||||
|
} |
||||||
|
//获取统计信息
|
||||||
|
getAggregations() { |
||||||
|
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/OilUnloadingProcess/GetAllCountByDays', { params: params }).subscribe((data: any) => { |
||||||
|
console.log('统计信息', data) |
||||||
|
this.echartsData = data.result |
||||||
|
this.refreshEchartsData1(this.echartsData) |
||||||
|
// this.refreshBarLineData(this.echartsData)
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获得卸油记录列表
|
||||||
|
SkipCount: string = '0' |
||||||
|
MaxResultCount: string = '50' |
||||||
|
list: any = [] |
||||||
|
totalCount: string |
||||||
|
getViolateRecordList() { |
||||||
|
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 = { |
||||||
|
IsCorrect: this.validateForm.value.state == '0' ? 'false' : 'true', |
||||||
|
StartTime: moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), |
||||||
|
EndTime: moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD'), |
||||||
|
IsContainsChildren: 'true', |
||||||
|
OrganizationUnitId: organizationUnitId, |
||||||
|
SkipCount: this.SkipCount, |
||||||
|
MaxResultCount: this.MaxResultCount |
||||||
|
} |
||||||
|
this.http.get('/api/services/app/OilUnloadingProcess/GetAll', { |
||||||
|
params: params |
||||||
|
}).subscribe((data: any) => { |
||||||
|
this.list = this.list.concat(data.result.items); |
||||||
|
this.list = [...this.list] |
||||||
|
this.totalCount = data.result.totalCount |
||||||
|
console.log('获取卸油流程列表', data.result.items) |
||||||
|
// this.getAggregations()
|
||||||
|
}) |
||||||
|
} |
||||||
|
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.getViolateRecordList() |
||||||
|
} |
||||||
|
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({ |
||||||
|
datePicker: [this.startdate, this.enddate] |
||||||
|
}); |
||||||
|
this.list = [] |
||||||
|
this.SkipCount = '0' |
||||||
|
this.getViolateRecordList() |
||||||
|
} |
||||||
|
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) { |
||||||
|
console.log('需要加载数据了', event) |
||||||
|
this.SkipCount = String(Number(this.SkipCount) + 50) |
||||||
|
this.getViolateRecordList() |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
look(item) { |
||||||
|
const modal = this.modal.create({ |
||||||
|
nzContent: OilUnloadingProcessComponent, |
||||||
|
nzViewContainerRef: this.viewContainerRef, |
||||||
|
nzWidth: 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(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
gorecordList() { |
||||||
|
// this.router.navigate(['/records/records'])
|
||||||
|
history.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in new issue