Browse Source

[修改]修改预警记录菜单为路由模式

beijing
邵佳豪 3 years ago
parent
commit
9560f733f7
  1. 4
      src/app/pages/home/home.component.html
  2. 10
      src/app/pages/home/home.component.ts
  3. 21
      src/app/pages/pages-routing.module.ts
  4. 3
      src/app/pages/pages.module.ts
  5. 40
      src/app/pages/records/criminal-records-admin/criminal-records-admin.component.html
  6. 157
      src/app/pages/records/criminal-records-admin/criminal-records-admin.component.scss
  7. 69
      src/app/pages/records/criminal-records-admin/criminal-records-admin.component.ts
  8. 25
      src/app/pages/records/criminal-records/criminal-records.component.html
  9. 155
      src/app/pages/records/criminal-records/criminal-records.component.scss
  10. 9
      src/app/pages/records/criminal-records/criminal-records.component.ts
  11. 32
      src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.html
  12. 155
      src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.scss
  13. 22
      src/app/pages/records/records-nav/records-nav.component.html
  14. 82
      src/app/pages/records/records-nav/records-nav.component.scss
  15. 61
      src/app/pages/records/records-nav/records-nav.component.ts
  16. 26
      src/app/pages/records/warning-statistics-list/warning-statistics-list.component.html
  17. 158
      src/app/pages/records/warning-statistics-list/warning-statistics-list.component.scss
  18. 1
      src/app/pages/today-warning-admin/today-warning-admin.component.ts
  19. 22
      src/app/service/isShowEcharts.service.ts

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

@ -16,7 +16,7 @@
<li [routerLink]="['/todaywarning']" routerLinkActive="router-link-active">
今日预警
</li>
<li [routerLink]="['/records']" routerLinkActive="router-link-active">
<li [routerLink]="['/records_nav']" routerLinkActive="router-link-active">
预警记录
</li>
<li [routerLink]="['/audit']" routerLinkActive="router-link-active">
@ -31,7 +31,7 @@
routerLinkActive="router-link-active">
今日预警
</li>
<li *ngIf="!isGasStationBack" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
<li *ngIf="!isGasStationBack" [routerLink]="['/records_nav/petrolStation']" routerLinkActive="router-link-active">
预警记录
</li>
<li *ngIf="!isGasStationBack" [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">

10
src/app/pages/home/home.component.ts

@ -427,7 +427,6 @@ export class HomeComponent implements OnInit {
//修改密码
changePassword() {
const modal: any = this.modal.create({
nzTitle: '修改密码',
@ -470,4 +469,13 @@ export class HomeComponent implements OnInit {
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
}
selectedMenu
routerChange(url, name) {
if (this.selectedMenu == name) {
return
}
this.selectedMenu = name
this.router.navigate([url])
}
}

21
src/app/pages/pages-routing.module.ts

@ -16,6 +16,7 @@ import { init3DGuard } from './init3D.guard';
import { NavBarComponent } from './license/nav-bar/nav-bar.component';
import { AuditNavComponent } from './audit/audit-nav/audit-nav.component';
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component';
import { RecordsNavComponent } from './records/records-nav/records-nav.component';
const routes: Routes = [
{ path: 'homepage', component: HomePageComponent },
@ -23,12 +24,20 @@ const routes: Routes = [
{ path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], },
{ path: 'todaywarning', component: TodayWarningAdminComponent },
{ path: 'todaywarning/petrolStation', component: TodayWarningComponent },
{ path: 'records', component: CriminalRecordsAdminComponent },
{ path: 'records/petrolStation', component: CriminalRecordsComponent },
{ path: 'records/oliunloadinglist', component: OilUnloadingProcessListComponent },
{ path: 'records/petrolStation/oliunloadinglist', component: OilUnloadingProcessListComponent },
{ path: 'records/warningstatisticslist', component: WarningStatisticsListComponent },
{ path: 'records/petrolStation/warningstatisticslist', component: WarningStatisticsListComponent },
{
path: 'records_nav', component: RecordsNavComponent, children: [
{ path: 'all', component: CriminalRecordsAdminComponent },
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent },
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent },
]
},
{
path: 'records_nav/petrolStation', component: RecordsNavComponent, children: [
{ path: 'all', component: CriminalRecordsComponent },
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent },
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent }
]
},
{ path: 'equipmentInfo', component: EquipmentInfoComponent },
{ path: 'oliStationInfo', component: OilStationInfoComponent },
{ path: 'license/petrolStation', component: NavBarComponent },

3
src/app/pages/pages.module.ts

@ -85,11 +85,12 @@ import { AnnualInspectionComponent } from './audit/annual-inspection/annual-insp
import { EditAnnualInspectionComponent } from './audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component';
import { DisposeequipmentComponent } from './records/warning-statistics-list/disposeequipment/disposeequipment.component';
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component';
import { RecordsNavComponent } from './records/records-nav/records-nav.component';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent],
AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent],
imports: [

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

@ -1,26 +1,11 @@
<div class="recordsboxadmin" id="recordsboxadmin">
<div class="content">
<div class="title">
<div class="titlebox">
<img src="../../../assets/images/logosm.png" alt="">
<div class="content">
<div class="contentitem">
<span>预警类型统计</span>
<!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
<span class="grey" (click)="goOilList()">卸油统计</span>
<span class="grey" (click)="goWarningList()">证照预警统计</span>
</div>
</div>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox" style="position: relative;">
@ -59,7 +44,6 @@
</div>
</div>
</div>
<div class="title">
<app-title [name]="'预警类型统计'"></app-title>
</div>
@ -195,14 +179,10 @@
{{key + 1}}
</td>
<td nzEllipsis [title]="item.locationName">
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
alt="">
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
alt="">
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
alt="">
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
alt="">
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png" alt="">
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png" alt="">
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png" alt="">
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png" alt="">
<span *ngIf="item.violation.level == 1">Ⅰ级</span>
<span *ngIf="item.violation.level == 2">Ⅱ级</span>
<span *ngIf="item.violation.level == 3">Ⅲ级</span>

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

@ -74,6 +74,16 @@
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
.packup {
position: fixed;
right: 33px;
top: 85px;
cursor: pointer;
z-index: 999;
}
.title {
width: 100%;
height: 64px;
@ -82,60 +92,7 @@
margin: 13px 0;
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 {
@ -143,7 +100,7 @@
width: 100%;
display: flex;
justify-content: center;
.chartname {
position: absolute;
left: 20px;
@ -256,6 +213,7 @@
box-sizing: border-box;
padding: 0 36px;
overflow: hidden;
img {
width: 36px;
}
@ -283,48 +241,18 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 70px;
cursor: pointer;
z-index: 999;
}
.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 {
@ -413,48 +341,17 @@
}
.content {
.packup {
position: fixed;
right: 33px;
top: 60px;
cursor: pointer;
z-index: 999;
}
.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 {

69
src/app/pages/records/criminal-records-admin/criminal-records-admin.component.ts

@ -12,6 +12,7 @@ import { DispositionComponent } from '../../disposition/disposition.component';
import { NzMessageService } from 'ng-zorro-antd/message';
import { TreeService } from 'src/app/service/tree.service';
import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequipment/disposeequipment.component';
import { IsShowEchartsService } from 'src/app/service/isShowEcharts.service';
@Component({
selector: 'app-criminal-records-admin',
templateUrl: './criminal-records-admin.component.html',
@ -20,7 +21,7 @@ import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequ
export class CriminalRecordsAdminComponent implements OnInit {
validateForm!: FormGroup;
constructor(private element: ElementRef, private toTree: TreeService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { }
constructor(private element: ElementRef, private toTree: TreeService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private isShowEcharts: IsShowEchartsService) { }
//饼图
myChart
option = {
@ -281,14 +282,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
// }
// ]
}
isEcharts: boolean = true
isEchartsShow() {
this.isEcharts = !this.isEcharts
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
}
startdate
enddate
@ -296,7 +292,16 @@ export class CriminalRecordsAdminComponent implements OnInit {
tableScrollHeight
resizeListener
isShowEchartsListener
ngOnInit(): void {
console.log(this.isShowEchartsListener)
this.isShowEchartsListener = this.isShowEcharts.getMessage().subscribe((message: any) => {
console.log(message)
this.isEchartsShow()
});
console.log(this.isShowEchartsListener)
this.tableScrollHeight = '100px'
// 页面监听
this.resizeListener = fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
@ -354,8 +359,29 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.getAllOrganization()
this.getAggregations()
}
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)
this.getViolateRecordList()
}
}
});
}
isEchartsShow() {
this.isEcharts = !this.isEcharts
setTimeout(() => {
let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
}, 0);
}
ngOnDestroy(): void {
this.resizeListener.unsubscribe()
this.isShowEchartsListener.unsubscribe()
}
defaultOrId: string
//获取所有组织机构
@ -529,17 +555,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.isMouseEnter = false
}
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)
this.getViolateRecordList()
}
}
});
}
getThirtyDays() {
//获取当前日期
let myDate = new Date();
@ -800,18 +816,6 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.selectedType = type
this.mybarChart.dispose()
this.mybarChart = echarts.init(document.getElementById('barchart'));
// if (type == '排名') {
// console.log(this.selectedRankingType)
// if (this.selectedRankingType == '站点排名') {
// this.refreshBarLineData(this.echartsData, 'siteTop')
// }
// if (this.selectedRankingType == '事件排名') {
// this.refreshBarLineData(this.echartsData, 'eventTop')
// }
// } else {
// }
this.selectedRankingType = null
this.refreshBarLineData(this.echartsData, 'month')
@ -880,11 +884,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
const instance = modal.getContentComponent();
}
exportExcel() {
// console.log(this.validateForm)
let ViolationIds = []
// console.log(this.validateForm.value.event)
if (this.validateForm.value.event) {
ViolationIds = this.validateForm.value.event
}

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

@ -1,25 +1,12 @@
<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>预警类型统计</span>
<!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
<span class="grey" (click)="goOilList()">卸油统计</span>
<span class="grey" (click)="goWarningList()">证照预警统计</span>
</div>
</div>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox" style="position: relative;">

155
src/app/pages/records/criminal-records/criminal-records.component.scss

@ -67,6 +67,14 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 85px;
cursor: pointer;
z-index: 999;
}
.title {
margin: 13px 0;
width: 100%;
@ -74,61 +82,6 @@
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 {
@ -270,48 +223,18 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 70px;
cursor: pointer;
z-index: 999;
}
.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 {
@ -401,48 +324,18 @@
}
.content {
.packup {
position: fixed;
right: 33px;
top: 60px;
cursor: pointer;
z-index: 999;
}
.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 {

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

@ -11,6 +11,7 @@ import { Router } from '@angular/router';
import { DispositionComponent } from '../../disposition/disposition.component';
import { NzMessageService } from 'ng-zorro-antd/message';
import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequipment/disposeequipment.component';
import { IsShowEchartsService } from 'src/app/service/isShowEcharts.service';
@Component({
selector: 'app-criminal-records',
templateUrl: './criminal-records.component.html',
@ -18,7 +19,7 @@ import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequ
})
export class CriminalRecordsComponent implements OnInit {
validateForm!: FormGroup;
constructor(private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private message: NzMessageService) { }
constructor(private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private message: NzMessageService, private isShowEcharts: IsShowEchartsService) { }
myChart: any //左侧饼图
option = {
@ -307,6 +308,11 @@ export class CriminalRecordsComponent implements OnInit {
tableScrollHeight
resizeListener
ngOnInit(): void {
// this.isShowEcharts.getMessage().subscribe((message: any) => {
// this.isEchartsShow()
// });
this.tableScrollHeight = '100px'
// 页面监听
this.resizeListener = fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
@ -479,6 +485,7 @@ export class CriminalRecordsComponent implements OnInit {
OrganizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id,
IsContainsChildren: 'true',
ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD') + ' 00:00:00', moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD') + ' 23:59:59'] : null,
// ViolateTime: ['2021-05-21 00:00:00', '2022-06-20 23:59:59'],
IsHandled: disposalState,
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount,

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

@ -1,26 +1,12 @@
<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 *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
<span>卸油统计</span>
<span class="grey" (click)="goWarningList()">证照预警统计</span>
</div>
</div>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox" style="position: relative;">
@ -105,10 +91,10 @@
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="exportExcel()"><i nz-icon
[nzType]="'file'"></i>导出</button>
<button nz-button type="button" class="reset" (click)="exportExcel()"><i nz-icon
[nzType]="'file'"></i>导出</button>
</nz-form-control>
</nz-form-item>
</nz-form-item>
</form>
</div>
<div class="tablebox" id="tablebox">

155
src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.scss

@ -65,6 +65,14 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 85px;
cursor: pointer;
z-index: 999;
}
.title {
margin: 13px 0;
width: 100%;
@ -73,60 +81,6 @@
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 {
@ -250,6 +204,7 @@
box-sizing: border-box;
padding: 0 36px;
overflow: hidden;
img {
width: 36px;
}
@ -278,48 +233,18 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 70px;
cursor: pointer;
z-index: 999;
}
.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 {
@ -409,48 +334,18 @@
}
.content {
.packup {
position: fixed;
right: 33px;
top: 60px;
cursor: pointer;
z-index: 999;
}
.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 {

22
src/app/pages/records/records-nav/records-nav.component.html

@ -0,0 +1,22 @@
<div class="box">
<div class="title">
<div class="titlebox">
<img src="../../../assets/images/logosm.png" alt="">
<div class="content">
<div class="contentitem">
<span (click)="selectMenu(item)" *ngFor="let item of menuList"
[ngClass]="{'selectedMenu': selectedMenu == item}">{{item}}</span>
<!-- <ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template> -->
</div>
</div>
</div>
</div>
<div class="main">
<router-outlet></router-outlet>
</div>
</div>

82
src/app/pages/records/records-nav/records-nav.component.scss

@ -0,0 +1,82 @@
.box {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
overflow: hidden;
}
.title {
width: 100%;
height: 64px;
box-sizing: border-box;
padding: 0 28px;
margin: 13px 0;
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: 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: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
position: relative;
span {
margin-left: 10px;
color: #68829F;
font-size: 20px;
font-family: titlefont;
cursor: pointer;
}
span:nth-child(1) {
margin-left: 12px;
}
.selectedMenu {
color: #bce0ff;
}
.packup {
position: absolute;
right: 6px;
top: 0px;
width: 32px;
height: 32px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 16px;
cursor: pointer;
}
}

61
src/app/pages/records/records-nav/records-nav.component.ts

@ -0,0 +1,61 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IsShowEchartsService } from 'src/app/service/isShowEcharts.service';
@Component({
selector: 'app-records-nav',
templateUrl: './records-nav.component.html',
styleUrls: ['./records-nav.component.scss']
})
export class RecordsNavComponent implements OnInit {
constructor(private router: Router, private isShowEcharts: IsShowEchartsService) { }
isEcharts = true
menuList = ['预警类型统计', '卸油统计', '证照预警统计']
selectedMenu
ngOnInit(): void {
this.selectedMenu = this.menuList[0]
this.routerChange()
}
selectMenu(item) {
if (this.selectedMenu == item) {
return
}
this.isEcharts = true
this.selectedMenu = item
this.routerChange()
}
routerChange() {
if (sessionStorage.getItem('isGasStation') == 'false') {
if (this.selectedMenu == '预警类型统计') {
this.router.navigate(['/records_nav/all'])
} else if (this.selectedMenu == '卸油统计') {
this.router.navigate(['/records_nav/oliunloadinglist'])
} else if (this.selectedMenu == '证照预警统计') {
this.router.navigate(['/records_nav/warningstatisticslist'])
}
} else {
if (this.selectedMenu == '预警类型统计') {
this.router.navigate(['/records_nav/petrolStation/all'])
} else if (this.selectedMenu == '卸油统计') {
this.router.navigate(['/records_nav/petrolStation/oliunloadinglist'])
} else if (this.selectedMenu == '证照预警统计') {
this.router.navigate(['/records_nav/petrolStation/warningstatisticslist'])
}
}
}
isEchartsShow() {
console.log('发了吗')
this.isEcharts = !this.isEcharts
setTimeout(() => {
this.isShowEcharts.sendMessage(this.selectedMenu)
}, 0);
}
}

26
src/app/pages/records/warning-statistics-list/warning-statistics-list.component.html

@ -1,25 +1,11 @@
<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 *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
<span class="grey" (click)="goOilList()">卸油统计</span>
<span>证照预警统计</span>
</div>
</div>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
</div>
<ng-container *ngIf="isEcharts; else elseTemplate">
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
</ng-template>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox" style="position: relative;">

158
src/app/pages/records/warning-statistics-list/warning-statistics-list.component.scss

@ -32,9 +32,11 @@
.searchParamsLong {
width: 250px;
}
.searchParamsLongLong {
width: 300px;
}
.searchParams2 {
width: 220px;
}
@ -67,6 +69,14 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 85px;
cursor: pointer;
z-index: 999;
}
.title {
margin: 13px 0;
width: 100%;
@ -74,61 +84,6 @@
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 {
@ -252,6 +207,7 @@
box-sizing: border-box;
padding: 0 36px;
overflow: hidden;
img {
width: 36px;
}
@ -280,48 +236,18 @@
flex-direction: column;
overflow: hidden;
.packup {
position: fixed;
right: 33px;
top: 70px;
cursor: pointer;
z-index: 999;
}
.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 {
@ -411,48 +337,18 @@
}
.content {
.packup {
position: fixed;
right: 33px;
top: 60px;
cursor: pointer;
z-index: 999;
}
.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 {

1
src/app/pages/today-warning-admin/today-warning-admin.component.ts

@ -218,7 +218,6 @@ export class TodayWarningAdminComponent implements OnInit {
num: this.totalCount
}
setTimeout(() => {
console.log('走这里了')
this.navChangeService.sendMessage(obj);//发布一条消息
}, 0);

22
src/app/service/isShowEcharts.service.ts

@ -0,0 +1,22 @@
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class IsShowEchartsService {
constructor() { }
private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
/** * **
* @param message *
* @returns {Observavle<any>} */
public sendMessage(message: any) {
this._sendMessage.next(message);
}
public getMessage(): Observable<any> {
return this._sendMessage.asObservable();
}
}
Loading…
Cancel
Save