From aaf9e4c44181e842f1b966e82a96bd5085ee7c84 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 30 Nov 2021 15:38:56 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=AE=8C=E6=88=90=E5=8D=B8?= =?UTF-8?q?=E6=B2=B9=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=89=A9?= =?UTF-8?q?=E4=BD=99=E5=8D=B8=E6=B2=B9=E8=AF=A6=E6=83=85=E5=8D=95=E6=9D=A1?= =?UTF-8?q?=E6=9F=A5=E7=9C=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../criminal-records-admin.component.html | 10 +- .../criminal-records-admin.component.scss | 45 ++ .../criminal-records-admin.component.ts | 12 + .../criminal-records.component.html | 10 +- .../criminal-records.component.scss | 52 +- .../criminal-records.component.ts | 13 +- .../pages/home-page/home-page.component.html | 117 ++-- .../pages/home-page/home-page.component.scss | 51 ++ .../pages/home-page/home-page.component.ts | 365 ++++++++--- src/app/pages/home/home.component.ts | 25 +- .../oil-unloading-process-list.component.html | 167 +++++ .../oil-unloading-process-list.component.scss | 284 ++++++++ .../oil-unloading-process-list.component.ts | 617 ++++++++++++++++++ src/app/pages/pages-routing.module.ts | 3 + src/app/pages/pages.module.ts | 3 +- .../pages/plan-admin/plan-admin.component.ts | 2 +- src/assets/images/cameraNum.png | Bin 0 -> 2009 bytes src/assets/images/modelNum.png | Bin 0 -> 2151 bytes src/assets/images/stationNum.png | Bin 0 -> 1977 bytes 19 files changed, 1616 insertions(+), 160 deletions(-) create mode 100644 src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html create mode 100644 src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss create mode 100644 src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts create mode 100644 src/assets/images/cameraNum.png create mode 100644 src/assets/images/modelNum.png create mode 100644 src/assets/images/stationNum.png diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html index a028105..8984933 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html @@ -2,7 +2,15 @@
- +
+ +
+
+ 预警类型统计 + 卸油统计 +
+
+
diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss index 2d24701..f45f7ba 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss @@ -53,6 +53,51 @@ 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-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; diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts index 27e9755..4d70caa 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts @@ -103,6 +103,9 @@ export class CriminalRecordsAdminComponent implements OnInit { } } }, + tooltip: { + trigger: 'axis' + }, series: [ { data: [], @@ -155,6 +158,9 @@ export class CriminalRecordsAdminComponent implements OnInit { type: 'value', show: false }, + tooltip: { + trigger: 'axis' + }, yAxis: { type: 'category', data: [], @@ -570,4 +576,10 @@ export class CriminalRecordsAdminComponent implements OnInit { this.refreshBarLineData(this.echartsData, 'eventTop') } } + + + //跳转卸油统计页面 + goOilList(){ + this.router.navigate(['/records/oliunloadinglist']) + } } diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html index 847128d..699701a 100644 --- a/src/app/pages/criminal-records/criminal-records.component.html +++ b/src/app/pages/criminal-records/criminal-records.component.html @@ -2,7 +2,15 @@
- +
+ +
+
+ 预警类型统计 + 卸油统计 +
+
+
diff --git a/src/app/pages/criminal-records/criminal-records.component.scss b/src/app/pages/criminal-records/criminal-records.component.scss index 3c005b1..d0bba88 100644 --- a/src/app/pages/criminal-records/criminal-records.component.scss +++ b/src/app/pages/criminal-records/criminal-records.component.scss @@ -54,6 +54,52 @@ 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; @@ -66,11 +112,13 @@ width: 100%; display: flex; justify-content: center; - .chartname{ + + .chartname { position: absolute; left: 20px; top: 12px; } + .chart { width: 97%; height: 350px; @@ -102,6 +150,7 @@ border: 0px; box-shadow: 0 0 26px 0px #1a7fd7 inset; margin-right: 16px; + .centerContent { position: absolute; top: 42%; @@ -133,6 +182,7 @@ position: relative; border: 0px; box-shadow: 0 0 26px 0px #1a7fd7 inset; + .btnbox { position: absolute; right: 28px; diff --git a/src/app/pages/criminal-records/criminal-records.component.ts b/src/app/pages/criminal-records/criminal-records.component.ts index e3c2425..eb1f400 100644 --- a/src/app/pages/criminal-records/criminal-records.component.ts +++ b/src/app/pages/criminal-records/criminal-records.component.ts @@ -7,6 +7,7 @@ import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-d import * as moment from 'moment'; import { fromEvent } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; +import { Router } from '@angular/router'; @Component({ selector: 'app-criminal-records', templateUrl: './criminal-records.component.html', @@ -14,7 +15,7 @@ import { debounceTime } from 'rxjs/operators'; }) export class CriminalRecordsComponent implements OnInit { validateForm!: FormGroup; - constructor(private http: HttpClient, private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { } + constructor(private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { } myChart: any //左侧饼图 option = { @@ -99,6 +100,9 @@ export class CriminalRecordsComponent implements OnInit { } } }, + tooltip: { + trigger: 'axis' + }, series: [ { data: [], @@ -151,6 +155,9 @@ export class CriminalRecordsComponent implements OnInit { type: 'value', show: false }, + tooltip: { + trigger: 'axis' + }, yAxis: { type: 'category', data: [], @@ -520,4 +527,8 @@ export class CriminalRecordsComponent implements OnInit { const instance = modal.getContentComponent(); } + + goOilList(){ + this.router.navigate(['/records/petrolStation/oliunloadinglist']) + } } diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html index d61d5ae..a4f8cf0 100644 --- a/src/app/pages/home-page/home-page.component.html +++ b/src/app/pages/home-page/home-page.component.html @@ -2,7 +2,7 @@
- 26 + {{totalCount}} 今日预警
@@ -11,57 +11,17 @@ 通知
-
+
    -
  • +
  • - 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 + 您有一条新的预警信息！{{item.notification.data.violationName}}
    - 查看 - 忽略 -
    -
    • -
  • -
    - - 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 -
    -
    - 查看 - 忽略 -
    -
    • -
  • -
    - - 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 -
    -
    - 查看 - 忽略 -
    -
    • -
  • -
    - - 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 -
    -
    - 查看 - 忽略 -
    -
    • -
  • -
    - - 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 -
    -
    - 查看 - 忽略 + 查看 + 忽略
@@ -79,7 +39,7 @@
-

312

+

{{HomeAggregatioData.recordCount}}

预警总数
@@ -88,7 +48,7 @@
区域排名
-
+
- {{item.name}} + {{item.key}} - {{item.num}} + {{item.count}}
-
@@ -119,8 +79,9 @@
事件排名
-
-
+
+
{{'0' + (key + 1)}} @@ -128,20 +89,19 @@ {{key + 1}} - -
- {{item.name}} + {{item.key}}
-
- {{item.num}} + {{item.count}}
@@ -153,7 +113,7 @@
站点排名
-
+
@@ -166,10 +126,10 @@ {{item.name}}
- 北京-朝阳 + {{item.locationName}}
- {{item.num}} + {{item.count}}
@@ -190,10 +150,17 @@
-
+
+
+
+ {{item.name}} + {{item.value}} +
+
+
@@ -210,24 +177,24 @@
- 206 + {{HomeAggregatioData.recordCount}} 总数
-
+
01
- 员工服务 - 20 + {{HomeAggregatioData.violationType.violationTypeAgg[0].key}} + {{HomeAggregatioData.violationType.violationTypeAgg[0].count}}
-
-
01
- 员工服务 - 20 +
+
02
+ {{HomeAggregatioData.violationType.violationTypeAgg[1].key}} + {{HomeAggregatioData.violationType.violationTypeAgg[1].count}}
-
-
01
- 员工服务 - 20 +
+
03
+ {{HomeAggregatioData.violationType.violationTypeAgg[2].key}} + {{HomeAggregatioData.violationType.violationTypeAgg[2].count}}
diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss index 1fd0995..5bf6f60 100644 --- a/src/app/pages/home-page/home-page.component.scss +++ b/src/app/pages/home-page/home-page.component.scss @@ -79,6 +79,7 @@ ul { list-style: none; } + .info { flex: 1; display: flex; @@ -88,13 +89,16 @@ display: flex; align-items: center; justify-content: space-between; + .infoitem { flex: 1; display: flex; align-items: center; + img { width: 40px; } + color: #fff; } @@ -326,6 +330,7 @@ border: 0; .warningnum { + width: 70px; position: absolute; left: 43%; top: 20%; @@ -412,6 +417,51 @@ } + + .numlistbox { + position: absolute; + left: 5%; + bottom: 6%; + display: flex; + flex-direction: column; + + .numlistboxitem { + display: flex; + color: #fff; + align-items: center; + margin: 3px 0; + + span { + font-size: 12px; + } + + .top { + display: inline-block; + width: 15px; + height: 15px; + line-height: 15px; + text-align: center; + font-size: 8px; + border-radius: 2px; + } + + .top1 { + background: #FF4B65; + } + + .top2 { + background: #FF9963; + } + + .top3 { + background: #36A2FF; + } + + .name { + margin: 0 16px; + } + } + } } } } @@ -446,6 +496,7 @@ position: relative; .numbox { + width: 60px; position: absolute; left: 8.5%; top: 28%; diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index 36beb69..6c83d0a 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -1,5 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit, ViewContainerRef } from '@angular/core'; +import { Router } from '@angular/router'; import * as echarts from 'echarts'; +import * as moment from 'moment'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', @@ -7,14 +12,9 @@ import * as echarts from 'echarts'; }) export class HomePageComponent implements OnInit { - constructor() { } + constructor(private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } equipmentechart//设备饼图 - equipmentechartdata = [ - { name: '接入油站', value: '100' }, - { name: '摄像头', value: '100' }, - { name: '加油站模型', value: '100' } - ] equipmentechartOption = { color: ['#91CCFF', '#46DFFF', '#36A2FF'], tooltip: { @@ -42,9 +42,6 @@ export class HomePageComponent implements OnInit { rich: { a: { width: 70 - }, - b: { - // align: 'right', } } } @@ -70,7 +67,7 @@ export class HomePageComponent implements OnInit { fontWeight: 'bold' } }, - data: this.equipmentechartdata, + data: [], tooltip: {//鼠标移入提示 position: 'left', padding: [14, 19], @@ -112,12 +109,7 @@ export class HomePageComponent implements OnInit { } }, data: [ - { name: '员工服务', value: '100' }, - { name: '监控设备检测', value: '100' }, - { name: '安全隐患', value: '100' }, - { name: '员工服务2', value: '100' }, - { name: '监控设备检测2', value: '100' }, - { name: '安全隐患2', value: '100' } + ], tooltip: {//鼠标移入提示 position: 'right', @@ -212,7 +204,7 @@ export class HomePageComponent implements OnInit { warningechartbarOption = { xAxis: { type: 'category', - data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], + data: [], axisLine: { show: false, lineStyle: { @@ -222,8 +214,7 @@ export class HomePageComponent implements OnInit { axisTick: {//刻度线 show: false }, - inverse: true - + // inverse: true }, yAxis: { type: 'value', @@ -246,41 +237,81 @@ export class HomePageComponent implements OnInit { } } }, + // series: [ + // { + // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], + // type: 'line', + // smooth: true, + // showSymbol: false, + // label: { + // show: true, + // position: 'top' + // }, + // lineStyle: { + // color: '#46DFFF', + // width: 1 + // }, + // areaStyle: { + // opacity: 0.8, + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 0, + // y2: 1, + // colorStops: [ + // { + // offset: 0, color: '#46DFFF' // 0% 处的颜色 + // }, + // { + // offset: 0.3, color: '#46DFFF' // 0% 处的颜色 + // }, + // { + // offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 + // }], + // global: false // 缺省为 false + // } + // }, + // } + // ], series: [ { - data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], - type: 'line', - smooth: true, - showSymbol: false, - label: { - show: true, - position: 'top' - }, - lineStyle: { - color: '#46DFFF', - width: 1 - }, - areaStyle: { - opacity: 0.8, + data: [], + type: 'bar', + itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { - offset: 0, color: '#46DFFF' // 0% 处的颜色 - }, - { - offset: 0.3, color: '#46DFFF' // 0% 处的颜色 - }, - { - offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 - }], + colorStops: [{ + offset: 0, color: '#23F0FF' // 0% 处的颜色 + }, { + offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色 + }], global: false // 缺省为 false } }, + barWidth: '35%' + }, + { + data: [], + type: 'line', + symbol: 'circle', + symbolSize: 5, + label: { + show: true + }, + itemStyle: { + color: '#fff', + shadowColor: '#fff', + shadowBlur: 10 + }, + lineStyle: { + color: '#FFCC8A', + width: 1 + } } ], grid: { @@ -329,41 +360,81 @@ export class HomePageComponent implements OnInit { } } }, + // series: [ + // { + // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], + // type: 'line', + // smooth: true, + // showSymbol: false, + // label: { + // show: true, + // position: 'top' + // }, + // lineStyle: { + // color: '#36A2FF', + // width: 1 + // }, + // areaStyle: { + // opacity: 0.8, + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 0, + // y2: 1, + // colorStops: [ + // { + // offset: 0, color: '#36A2FF' // 0% 处的颜色 + // }, + // { + // offset: 0.3, color: '#36A2FF' // 0% 处的颜色 + // }, + // { + // offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 + // }], + // global: false // 缺省为 false + // } + // }, + // } + // ], series: [ { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], - type: 'line', - smooth: true, - showSymbol: false, - label: { - show: true, - position: 'top' - }, - lineStyle: { - color: '#36A2FF', - width: 1 - }, - areaStyle: { - opacity: 0.8, + type: 'bar', + itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { - offset: 0, color: '#36A2FF' // 0% 处的颜色 - }, - { - offset: 0.3, color: '#36A2FF' // 0% 处的颜色 - }, - { - offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 - }], + colorStops: [{ + offset: 0, color: '#23F0FF' // 0% 处的颜色 + }, { + offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色 + }], global: false // 缺省为 false } }, + barWidth: '35%' + }, + { + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], + type: 'line', + symbol: 'circle', + symbolSize: 5, + label: { + show: true + }, + itemStyle: { + color: '#fff', + shadowColor: '#fff', + shadowBlur: 10 + }, + lineStyle: { + color: '#FFCC8A', + width: 1 + } } ], grid: { @@ -373,16 +444,15 @@ export class HomePageComponent implements OnInit { top: '50px' } }; + + ngOnInit(): void { // 饼图 - this.equipmentechart = echarts.init(document.getElementById('equipmentechart')); - this.equipmentechart.setOption(this.equipmentechartOption); + // this.equipmentechart = echarts.init(document.getElementById('equipmentechart')); // 预警饼图 this.warningechartpie = echarts.init(document.getElementById('eventechartpie')); - this.warningechartpie.setOption(this.warningechartpieOption); // 预警线图 this.warningechartbar = echarts.init(document.getElementById('eventechartline')); - this.warningechartbar.setOption(this.warningechartbarOption); // 卸油饼图 this.oilchartpie = echarts.init(document.getElementById('oilechartpie')); this.oilchartpie.setOption(this.oilchartpieOption); @@ -402,7 +472,101 @@ export class HomePageComponent implements OnInit { }; this.rollStart() + this.getHomeAggregation() + this.getUnreadNotification() + } + + //获得所有未读消息 + unreadMessageList: any + getUnreadNotification() { + this.http.get('/api/services/app/Notification/GetUnreadNotification').subscribe((data: any) => { + console.log('获得所有未读消息', data) + this.unreadMessageList = data.result + }) + } + + + + //获得统计信息 + + HomeAggregatioData: any = { + areaAgg: [], + violationType: { + violationTypeAgg: [] + } + } + totalCount + getHomeAggregation() { + + 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 body = { + organizationUnitId: organizationUnitId, + isContainsChildren: true + } + this.http.post('/api/services/app/Home/HomeAggregation', body).subscribe((data: any) => { + this.HomeAggregatioData = data.result + this.totalCount = data.result.todayRecordCount + this.equipmentechartdata = [ + { name: '接入油站数量', value: data.result.dev.stationCount }, + { name: '摄像头数量', value: data.result.dev.cameraCount }, + { name: '预警模型数量', value: data.result.dev.violationCount } + ] + console.log('图表信息', data.result) + this.eventEcharts(data.result) + }) + + + // let starttime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '00:00' + // let endtime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '23:59' + // let params = { + // organizationUnitId: organizationUnitId, + // ViolateTime: [starttime, endtime], + // IsContainsChildren: 'true', + // SkipCount: '0', + // MaxResultCount: '1' + // } + // this.http.get('/api/services/app/ViolateRecord/GetAll', { + // params: params + // }).subscribe((data: any) => { + // this.totalCount = data.result.totalCount + // }) } + //预警图表 + equipmentechartdata + eventEcharts(data) { + + + // this.warningechartpieOption.series[0].data = this.equipmentechartdata; + // this.equipmentechart.setOption(this.equipmentechartOption); + + // var num = 0 + data.violationType.violationTypeAgg.forEach(element => { + // num += element.count + element.name = element.key + element.value = element.count + }); + this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg; + this.warningechartpie.setOption(this.warningechartpieOption); + + + let monthArr = [] + let valuedata = [] + data.violationType.days30ViolationCount.forEach(element => { + monthArr.push(moment(element.key).format('MM.DD')) + valuedata.push(element.count) + }); + this.warningechartbarOption.xAxis.data = monthArr + this.warningechartbarOption.series[0].data = valuedata + this.warningechartbarOption.series[1].data = valuedata + this.warningechartbar.setOption(this.warningechartbarOption); + } + + timer rollStart() { @@ -435,7 +599,10 @@ export class HomePageComponent implements OnInit { } mouseleave() { // console.log('离开了') - this.rollStart() + if (!this.isOpenModel) { + this.rollStart() + } + } @@ -471,9 +638,59 @@ export class HomePageComponent implements OnInit { { name: '北京市第十九加油站', num: 77 }, { name: '北京市第十九加油站', num: 34 } ] - width(width) { + width(width: string, denominator: string) { let style: any = {} - style.width = width + '%'; + style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + '%'; return style } + + + isOpenModel: boolean = false + + look(item) { + this.isOpenModel = true + let data = { + violateImage: item.notification.data.violateImage, + violateVideo: item.notification.data.violateVideo + } + const modal = this.modal.create({ + nzContent: GetOutOfLineDetailsComponent, + 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: data + }, + nzFooter: null, + nzOnOk: async () => { + + } + }); + const instance = modal.getContentComponent(); + modal.afterClose.subscribe(result => { + this.isOpenModel = false + this.rollStart() + }); + this.readMess(item.notification.id) + } + + //标记为已读 + readMess(id){ + let body = { + id : id + } + this.http.post('/api/services/app/Notification/Read',body).subscribe((data:any) => { + console.log('标记已读成功') + }) + } + + ignore(index) { + this.unreadMessageList.splice(index, 1) + } } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index dfe18f8..c284b7e 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -83,14 +83,16 @@ export class HomeComponent implements OnInit { } - } + + reloadPage = (userNotification) => { + console.log('abp.notifications.received收到通知', userNotification); + this.receiptOfNotification(userNotification) + }; + ngAfterViewInit() { SignalRAspNetCoreHelper.initSignalR(); - abp.event.on('abp.notifications.received', (userNotification) => { - console.log('abp.notifications.received收到通知', userNotification); - this.receiptOfNotification(userNotification) - }); + abp.event.on('abp.notifications.received', this.reloadPage); } messageId = [] receiptOfNotification(userNotification) { @@ -135,6 +137,17 @@ export class HomeComponent implements OnInit { }) }) + this.readMess(item.notification.id) + } + + //标记为已读 + readMess(id) { + let body = { + id: id + } + this.http.post('/api/services/app/Notification/Read', body).subscribe((data: any) => { + console.log('标记已读成功') + }) } close(item) { // console.log(item) @@ -147,6 +160,8 @@ export class HomeComponent implements OnInit { ngOnDestroy() { + console.log('退出') + abp.event.off('abp.notifications.received', this.reloadPage); abp.signalr.disconnect() } diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html new file mode 100644 index 0000000..83d29f8 --- /dev/null +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html @@ -0,0 +1,167 @@ +
+ +
+
+
+ +
+
+ 预警类型统计 + 卸油统计 +
+
+
+ +
+ +
+
+
+ + + 卸油预警统计 + +
+
{{num}}
+
总数
+
+ 返回 +
+ +
+
+
+ + + 近一个月卸油预警走势 + +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+ 卸油开始时间 +
+
+ 卸油结束时间 +
+
+ 操作前准备预警节点数量 +
+
+ 操作后准备预警节点数量 +
+
+ 全流程准备预警节点数量 +
+
+ 状态 +
+
+ 操作 +
+
+
+
+
+
+
+ {{item.startTime ? (item.startTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}} +
+
+ {{item.endTime ? (item.endTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}} +
+
+ {{item.proccessBeforeCount}} +
+
+ {{item.proccessAfterCount}} +
+
+ {{item.allProccessCount}} +
+
+ + 正常 + + + 预警 + +
+
+ 查看 +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss new file mode 100644 index 0000000..385ee8e --- /dev/null +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss @@ -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; + } + + } +} diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts new file mode 100644 index 0000000..a262788 --- /dev/null +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts @@ -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) + } +} diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 0986da5..d7c063b 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -10,6 +10,7 @@ import { OilStationInfoComponent } from './oil-station-info/oil-station-info.com import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; import { PlanAdminComponent } from './plan-admin/plan-admin.component'; import { HomePageComponent } from './home-page/home-page.component'; +import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/oil-unloading-process-list.component'; const routes: Routes = [ { path: 'homepage', component: HomePageComponent }, @@ -19,6 +20,8 @@ const routes: Routes = [ { path: 'warning/petrolStation', component: TodayWarningComponent }, { path: 'records', component: CriminalRecordsAdminComponent }, { path: 'records/petrolStation', component: CriminalRecordsComponent }, + { path: 'records/oliunloadinglist', component: OilUnloadingProcessListComponent }, + { path: 'records/petrolStation/oliunloadinglist', component: OilUnloadingProcessListComponent }, { path: 'equipmentInfo', component: EquipmentInfoComponent }, { path: 'oliStationInfo', component: OilStationInfoComponent } ]; diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 63f41d2..ae60ed6 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -52,11 +52,12 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { DispositionComponent } from './disposition/disposition.component'; import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component'; import { HomePageComponent } from './home-page/home-page.component'; +import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/oil-unloading-process-list.component'; @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, - AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent], + AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent], imports: [ diff --git a/src/app/pages/plan-admin/plan-admin.component.ts b/src/app/pages/plan-admin/plan-admin.component.ts index eea8d3c..ca4c573 100644 --- a/src/app/pages/plan-admin/plan-admin.component.ts +++ b/src/app/pages/plan-admin/plan-admin.component.ts @@ -144,7 +144,7 @@ export class PlanAdminComponent implements OnInit { } } sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj)) - this.router.navigate(['/plan/petrolStation']) + this.router.navigate(['/warning/petrolStation']) let obj = { name: 'oilstation' } diff --git a/src/assets/images/cameraNum.png b/src/assets/images/cameraNum.png new file mode 100644 index 0000000000000000000000000000000000000000..de5883cae83f1912e6059a792bbb4d68f5aa0e18 GIT binary patch literal 2009 zcmV;~2PXK5P)oFB zedtToDz=bHC4@X_O094kyD6C57>}Lc5R=Xj0xl)NHX$L7J?E?T8G9}sJ9hS*iEsPK z(wyUS)^C4%t+m%)hq#R)=@~dq3&;il0RX|)PidFed;>0ZdLL zz-1%x%2XxvW8M1ZxztbwKsRp&p{WEwv&L7^&=}}%W^JwU7x_^Fz@7PtYw6Wz{EWRC z!}_|$VkMLUxPCRcYGgm3c7=X!+#H(uIS)YB#t(or-hTBDshxFqA25cx0QA*p1F|%; zzslDAJaZ|Gp-zot{a6mbmsdIf?p^&;Uu>Z|x#{a|IRIZ=9$hoDpZA9t?c7Rx8@}CAEbW)=uJph{4rUKAQeg1J0pvSv9r9fYl_4oB?bR-Np zF@O&*KgjB*u3VDGFP4I@F3kG+l3kdtd~^UiOrm3{ z9WeFjg~|X>5#GDi7-BW_-wRRDr~yl&25Mxu0sxBez6Y$0&-;dvbOSK8Bx;~OId2I- zhxyHIrcUVD&?m!DKzCFP)W_%S00@8Jw;nXk%+sNfp$25p0rHL{XVj(l>;M26)NKf{ zzVVh-S6e!|^j;Lg0kFEhf%@o-EdaBRjAPTLNYx;WrUSTo&Fod4u?4x%ebmLl3IG@e zrr3xGzr8cQ(8Fwh*TsPr$XynmM+)l0RAm72u3T|Q5jKXZvn0~V0DL|ZDLhpJl}XwI zkj4SV0fj+s$sJF@K&YM?(n(Xl@JtQVf8MnRK!(^Da_j86aJo=bmE!REs;dUc6E#p5 zPT2w&<9Bw|7q4rjlR-FH^I~S}n^VKqUDZ>=2d7#@vFASL3nf47(EAM~IRG&N_8t&@> z>=GyHd|xF1dUHJjk}LOZKPr*CjOU*G%4~a|&snV))@^9_I#THT+tyVr>ixIu0GQbS zz>hmzBPXu+gD_Dbj@pfLt0C){gk}qb3~GE4uhgLPZ?!=~qCVZf`295NYUG7|NPBz6DSQsEKg<A;4|bsc2AVd+Y#wFI)g{Hc?*i zq+0pi<~c*4JA2pNl2}d+VhnZ8f@;X!MnTZq`h!O5+o>L7vlh_N%6jVJuz@-LXw*#=_i2{IuH`+j_AoorF zmKkH+S-YAwaXJ8_iXBgu80h}~WwziOjFFrDc{OM#(SRu$D0eSS&0Q0k~1fQO%25P$}|!*G0wGB0HetWktJ_LQn2nFzo)QIt27-PsPO zHdY32;HcRyTOIIH{oQr|f_rY=VrPuu4I};eJv9}Bv!PrK$?ov%!bBbE0T2{HI4+Zk%TWn!dccLSWMgCIQ#h199P+X2}1 z%L0Ithbsq=(|QK-Mfgam8fIj#(?|A0PIQsVT2z8Wos8Q7c%-EWK$piSzl_1}bL|BdCBdb> zh-yw1_@3>c-Tw_mg_C*7Hs ztmaeHOa1$=D^|W0qjB5h{`G?S2FNOpuJ{F(`X5NSP^R7&Oc~3%w!YMMSUq1DXVY&2 z(*Qb6ZGWwGi*~YU?{u?t;!wa%L#uH5YBf96zA1O6*}&#Vu3g?;28q9{*ks0nS38@3 zTlioi58=%}o78g|wzOK9IR7mv?*3iAHMsPfA+r>+H&^dcFw(E7b)`SUr~I?ISN{|Q zot{+}6@+of7v@iYKmTWQ1%GfTfSWfAgw?SegcNG;3K!4(yb35@Iy(AC<0#D0(@M<| z#!VHPPdztp8}GuE-NeBFZurfCgegI-6cFPO;<#%n%I1CcA5WK6VE=ir1@M^zis1C_ rZ@Day6wIe^ZUM#V;nVvT-Ielx=Ls{f>w7jW00000NkvXXu0mjfMt$11 literal 0 HcmV?d00001 diff --git a/src/assets/images/modelNum.png b/src/assets/images/modelNum.png new file mode 100644 index 0000000000000000000000000000000000000000..bc7f014e625dca9913a03bccf0919951704522c2 GIT binary patch literal 2151 zcmV-t2$=VYP){BDqX9Pruu|lN1;op<-3^M@j8UvY0h0S7WYinH zCje$vuWn$5Xvdg%Tkx4N|A8Kicv-_104DPgikRslbN34;hX_WZMDxxEY5>*ur zumLPFYik9}b!)V5buwgi;64lv66I_F7uPri;CQQoy1ak-$R3K>0Nz+-a~B7`dh?XK zeJ@4n!WxfSjPqSSn}LR}5XR{5D>tP1SAeBy?tPvm;In}ccKJgLWaw}2@!WQ&yv)cG zkW_9$601;)7IdQR55kfn(_i0X-sXu+TMG0$_fgjQ-q%)GQ!L2ZysfJdy}Eq>(&SS7 zwG|!~2zTzI*$NB+!P^Le{(LQD3t(g-g!rfXtD6u}a(x4nhKxLpbn7$Xk%n7PJMb(#yyP3h(3&@5p3t^txN5@wjy zjcYg!MjX_F;`Z*LXEOIJA+R*<9@uZ9DF8OGiFNf+hUmLXPfw3S(uC2H>gMn{Np zf6TM25}|C==!K8~fMMLTzqI3$_J?I2R@nCGW;sX3BIx%HR0HD+`S5nCG@TE}0st6C z9RMmI&IN$XF5RV-CeD&rAydgk%A~4+#JR#xV~7P7qcRDFU+OQv5u#imNzn z0r_M5Dfv5bfv^DlCKrwcNDTNwwCVzW{Qtbk>V|^TEWr{`D>8mycwbkJR2f_`+Nd;#^eP8G!H8=M8>mW0!aNY919Th9si&|7pOOe zii~sbhUfyn3;_TGc@Sb>jnb4K-}f4WQ^qe$9tGP0bH5*Xt@NRvz1vX>$crEMDM*e- z8=uKJ2k9{ed&hV(THP_8Gg&QIc5swm$3W0i|Lqun^jZY*35ViOo2)sNs5dj4V_;;c z2QlX}ZW)s%t9=`YcPcZaC)xzSKw1)*3CC>xCQeP!vZGD#hO$x0>k-^Ns~26sHn~Q0Zm>BW&sSmMU2sj1J!M=3<~S^QM%V|Pxk!A zL<0~4#+I>xb7gq7tQaZuZUw>Xawhy1wu@Fechh%dRyg9IkHLUd z4UrKk*cUPyZGAmu1l5C#fB+IM02O6)lQk;1N?D8yD~Rikcp?3CN8ohA2qGh>9`xOJ zf?2@#ZmzX}Ewg!CJW>V_R1bP^DVPO3da$ttQ~<;!aak?Z1Ibkn zY*&Vq%^oWQ2&xBt^WVV${P>VR0N=P&eR25brLlEnjCl*;U!pUZ1@%o=0csnovI{~!%akh~qJRkso1T&_&7xC1= z(jH%CO<68weAWOAUowCU_aL@K2H7=&K#h*K2S8>cOTa|xR`2T1eTy86FtVwSR+FLo z7x_3@NNygJF>;bAK69ATURu~PEaaT;*dim4`T%|9Uu{`{^R=_ZUX1^$Ji}h&`SKzU zk!72z9k|?0E-WB|@#hZLUT1aoYbK*r4)n#&0Vutjps)7h?35!wj+(6QSw@0N<*cTS zf#li%47ZHEr32Q@`ocQ5cL;l{iu z$-tOh*82QK&Jp=5XYGiY>%bu7s@_XSNVNfc?&1x3TQvQrBjwA|!wam!vLm;zqGkss z;QES?lw5%}J6OIhFQfU)o8cWnUteuK-)_8eo8yCtN|#Ulv-3H@PE%gi{=a;THb3~R z`DSQnfz_U(o!jq9SCA9ujR>^)!Ro>7me1yf-rymHAg4FG4MN^x4A0-*;Ip}kxr!z5 zIwV63bl$ep%pQ{R_F~vM^OZ3+{B-u?7wlq&oYZusHQ1Ld7|DO!QU9h&(~qaM1y=VK zkYqqI#;yP%iW4xk+J|`7;qP9S*%W~Dq1!IlS5<~dKASJq_;-qnybdX<0P`TszIlhg dt2v_E{{gj%-E@I(T5$jX002ovPDHLkV1j7A^Zoz; literal 0 HcmV?d00001 diff --git a/src/assets/images/stationNum.png b/src/assets/images/stationNum.png new file mode 100644 index 0000000000000000000000000000000000000000..a20a680e9c9082e2799b9a67f6cd4f9070356586 GIT binary patch literal 1977 zcmV;q2S)gbP)8+TBSXM$7!qN##CT1;5B#6~Zh>)yJ zCf>CTv0$_}#ZcVajZQYvW)r1IZ@n$FyI(o?rN5Wnm*4N){baX2fBw#M&Uv2Cd7ktB z6SznuYm-StChC(uwvhTCmT2+%yeQkwEX$O(X?|L;+B9z-r)s@KI2uS7VPH%tKV z=f4alljzLEc&QB^H09M8;qxJU+S#(2_A;38K!Z;0^qm5 z7=s)%BfC4}oJte%V~>#PtoS&9U;bbt1nZsFQ`T}s({V>hqp~3dU~nG;G78oE`8EVvW@!1xS`4g$@R-jA5Sm)cy`1LD#*MC#N=qUoID({t&8OnpP_0@5C7Zlmv4Mv#P> zt&Ta6?a7Xx^Z-;4RkKelz31)5Y#(I32sUNDcg;CL!daRAVfz302Q6{{y+L{h^#II0 zQHq`===9W%L57k@?L;%<6uNjQ>Z)fL`}*xaGm=cEK$Pqa^3{)e0M0wf01z8ukYkAH z7z`pIhodTMU~G^f(g2X55I^r^WBsna#fItUzEnt*G&V@j4|)LRonip!*~<{brnDOx zM0nn*qGBKU>LO5m;VIUwtdjry2ddRvHe}qinv#{z_UZwcf2tLL*=^lw;e!=GuDZ-J z_WD2F!*&rpPmoXc=mEI+Gy}l4y*b?01qBg=7i2sjUtMMyd)1}1FWm!r02T%e0Nwqi zhrq(BbO_|FiwI|BaksXAt z9rEsOJphYm834BQGvFJAI#LU`82i#wydZw%Oi^q7RNAteA)jd>WUH@v@hn-Ls|{T{ zfR*?A!p_`WS&=ZqczIiH^E+ zCN6DNxi`LHqXtE{uxbEEC0G!rGpkwK|qHdfErna37jE$j1 zY^PQ#1eVS*061;e-k7|yLl3~RIk^G2s4u$AWI!w*zxG9($z~&emn0`!AEHy5#Hl{JN z@a8zx*+P&+-STQ_S9veS7^E13qY8oL)doOaJES$H2Vh0DH?zQ|m}MapU12iPrfZ?R zV(`cFWz&~>0B%0tI{-+g4_B0%-*Udu%Vu2*f<0IL>w2Y|+QIJ(LN zz@}@VJjV=VVZ-zC6d)s}OkXBRv53Td zaPL9`fLT`+0{QY>0eGZa55Ss*-T^R&z#0<(o37CUd5#&#!%;l|Yiqm#@Nl;^1n#Rb zJiw-F$J!cWH>qofZ0OPhaKAbR^&maeX$^sOVFSR1PPP!Km+FZzpuRC|T$t+GArE%y z0eB$n9f0u=AfgXk=4{8PYlp1=Ko3CE<=y~je4iouG8e5xylIj3Rydc_HFna^B!+by zQr2yyI*%`Ygk`H;J)_^SNS@GXv{0FKTd8h(>&In?=4lmZGP}FEyfS|Oer&XqajsOa ztbLDN_Twh!<;z=AO{KEtU8Ek)w<)uL z7BXrq6u5(5X~)m1ro0fCW1oBq<2B)D`$`F6&Fm6Oe>@eBgSC?8+biKjB{ZQpQjC zjke&H_NLcT17m}fsW*@q0nog8Y5rI3MfdcPHu?`6Lo52A zq5#ao*T2Gu5b7vIU0nLb$wP?$!OcnZiXcHEuHFy5x-5O6>LmRK`J|J`tj{2Y00000 LNkvXXu0mjf>{qgv literal 0 HcmV?d00001