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/init3D.guard.ts b/src/app/pages/init3D.guard.ts new file mode 100644 index 0000000..651a426 --- /dev/null +++ b/src/app/pages/init3D.guard.ts @@ -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 { + 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) + }) + }) + } + +} \ No newline at end of file diff --git a/src/app/pages/left-domain/left-domain.component.html b/src/app/pages/left-domain/left-domain.component.html index 6ae3c2f..07cb815 100644 --- a/src/app/pages/left-domain/left-domain.component.html +++ b/src/app/pages/left-domain/left-domain.component.html @@ -47,7 +47,7 @@
-
+
@@ -77,7 +77,7 @@
-
+
@@ -119,7 +119,7 @@
-
+
@@ -149,7 +149,7 @@
-
+
diff --git a/src/app/pages/left-domain/left-domain.component.ts b/src/app/pages/left-domain/left-domain.component.ts index dadc79d..02c336b 100644 --- a/src/app/pages/left-domain/left-domain.component.ts +++ b/src/app/pages/left-domain/left-domain.component.ts @@ -100,7 +100,9 @@ export class LeftDomainComponent implements OnInit { } //选中 设备 - selectFacility(item: FacilityInfoUIItem) { + selectFacility(event, item: FacilityInfoUIItem) { + event.stopPropagation(); + event.preventDefault(); if (this.selectFacilityId != item.getID()) { this.selectFacilityId = item.getID() FacilityInfoInSceneWindow.instance.selectFacilityItem(item); 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..952c157 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -10,15 +10,19 @@ 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'; +import { init3DGuard } from './init3D.guard'; const routes: Routes = [ { path: 'homepage', component: HomePageComponent }, { path: 'plan', component: PlanAdminComponent }, - { path: 'plan/petrolStation', component: PlanComponent }, + { path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], }, { path: 'warning', component: TodayWarningAdminComponent }, { 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/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index c013d57..acd06b0 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -77,7 +77,7 @@
-
+
{{beforeOnePropertyData.getPropertyData().name}}
@@ -104,7 +104,7 @@ -
+
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index 6b561f5..c55e072 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/src/app/pages/plan/plan.component.scss @@ -201,9 +201,6 @@ } } .natureLook{ - width: auto; - min-width: 170px; - box-sizing: border-box; padding: 20px; color: #fff; .flowPower{ @@ -227,13 +224,11 @@ //右侧图标栏 .rightIcons{ - width: 100px; - height: 70%; + width: 60px; + height: 260px; position: absolute; - top: 0; - bottom: 0; + top: 10%; right: 1%; - margin: auto;/*这行代码是关键*/ color: #fff; background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); overflow: hidden; diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 5548cc3..300ace5 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/src/app/pages/plan/plan.component.ts @@ -83,7 +83,6 @@ export class PlanComponent implements OnInit { ngAfterViewInit(): void { this.getGasStationBaseInfo().then((res: any) => { //获取单位 基本信息 - // console.log(res, "当前加油站信息") let simpleData: InsitutionDataSimple = new InsitutionDataSimple(); simpleData.id = res.id || 6; //来自选中的单位的信息 ,测试：1 simpleData.key = `${res.id}` || "ceshi"; //测试："ceshi" @@ -94,7 +93,6 @@ export class PlanComponent implements OnInit { if (ModeManager.institutionDemoKey == ModeManager.c_demoKey_null) { //无指定测试单位，则为正式启动，根据当前单位key寻找 if (has3dData) { //如果已经有三维数据，直接进入 this.beforeOneSatus = StatusManager.getStatus(LoginSatus); - // console.log("进入三维单位", simpleData); this.beforeOneSatus.onSelectInsSuccess(simpleData) } else { //如果没有三维数据 if (ModeManager.s_isMakeMode) //内部制作模式下，询问新建 @@ -109,7 +107,6 @@ export class PlanComponent implements OnInit { else //非内部制作模式，不开启 { console.log("没有单位" + simpleData.key); - } } } else { @@ -126,6 +123,12 @@ export class PlanComponent implements OnInit { }) } + ngAfterViewChecked () { + if (this.isShowNature && this.beforeOnePropertyData && (this.selectFence === 1 || this.selectFence === 2)) { //刷新弹窗 位置 + this.renovateDialogPosition() + } + } + ngOnDestroy(): void { //组件销毁前 销毁canvas this.game.dispose(); this.game = null; @@ -134,10 +137,8 @@ export class PlanComponent implements OnInit { //获取 当前加油站基本信息 getGasStationBaseInfo() { return new Promise((resolve, reject) => { - let params = { organizationUnitId: this.companyData.id } - this.http.get('/api/services/app/GasStation/Get', { params: params }).subscribe((data: any) => { - resolve(data.result) - }) + let result = JSON.parse(sessionStorage.getItem("3dSceneData")) + resolve(result) }) } @@ -386,6 +387,9 @@ export class PlanComponent implements OnInit { selectProperty(e: FacilityInfoUIItem) { this.isShowNature = true this.beforeOnePropertyData = e + if (this.selectFence === 1 || this.selectFence === 2) { //刷新弹窗 位置 + this.renovateDialogPosition() + } console.log(e.getPropertyData(), '选中设备') if (this.isShowChildComponent && this.leftDomain) { this.leftDomain.selectFacilityId = e.getID() @@ -394,7 +398,15 @@ export class PlanComponent implements OnInit { window.setTimeout(() => { this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false }); }, 0) - } + } + } + + //刷新设备属性 弹窗位置 + renovateDialogPosition() { + window.setTimeout(()=>{ + this.naturePosition.left = `${this.beforeOnePropertyData.getHeadUIPos().x - 150}px` + this.naturePosition.top = `${this.beforeOnePropertyData.getHeadUIPos().y + 100}px` + },0) } //上传设备 图片 @@ -841,9 +853,8 @@ export class taskList { } //属性栏 定位 export class naturePosition { - top: string = "1%" - left: string = "50%" - right: string = "5%" + top: string = "0px" + left: string = "0px" } // 处置预案 所有图标 export class planIcons { diff --git a/src/assets/images/cameraNum.png b/src/assets/images/cameraNum.png new file mode 100644 index 0000000..de5883c Binary files /dev/null and b/src/assets/images/cameraNum.png differ diff --git a/src/assets/images/modelNum.png b/src/assets/images/modelNum.png new file mode 100644 index 0000000..bc7f014 Binary files /dev/null and b/src/assets/images/modelNum.png differ diff --git a/src/assets/images/stationNum.png b/src/assets/images/stationNum.png new file mode 100644 index 0000000..a20a680 Binary files /dev/null and b/src/assets/images/stationNum.png differ