6 changed files with 2621 additions and 2 deletions
@ -0,0 +1,293 @@
|
||||
<div class="homepagebox"> |
||||
<div class="informbox"> |
||||
<div class="warningnumber"> |
||||
<img src="../../../assets/images/warningnum.png" alt=""> |
||||
<span class="num">{{totalCount}}</span> |
||||
<span class="today" (click)="getUnreadNotification()">今日预警</span> |
||||
</div> |
||||
<div class="inform"> |
||||
<div class="infologo"> |
||||
<img src="../../../assets/images/inform.png" alt=""> |
||||
通知 |
||||
</div> |
||||
<!-- 循环轮播信息 --> |
||||
<div id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()"> |
||||
<div id="list-wrapper" style="top: 0"> |
||||
<ul class="notice-list" id="notice-list"> |
||||
<li class="info" *ngFor="let item of unreadMessageList;let key = index"> |
||||
<div class="infoitem"> |
||||
<img src="../../../assets/images/warning1.png" alt=""> |
||||
您有一条新的预警信息！{{item.notification.data.violationName}} |
||||
</div> |
||||
<div class="btn"> |
||||
<span (click)="look(item)">查看</span> |
||||
<span (click)="ignore(key)">忽略</span> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<ul class="notice-list" id="notice-list-2"> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="centerbox"> |
||||
<div class="leftbox"> |
||||
<div class="title"> |
||||
<app-title [name]="'预警统计'"></app-title> |
||||
</div> |
||||
<div class="leftboxcontent"> |
||||
<div class="leftitem leftitemlimit"> |
||||
<!-- <div class="warningnum"> |
||||
<h1>{{HomeAggregatioData.recordCount}}</h1> |
||||
<span>累计预警</span> |
||||
</div> |
||||
<img class="bucket" src="../../../assets/images/bucket.png" alt=""> |
||||
<img class="circle" src="../../../assets/images/circle.png" alt=""> --> |
||||
<div class="eventechartpieAll" id="eventechartpieAll"> |
||||
|
||||
|
||||
</div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<!-- <div class="leftitem" *ngIf="!userdata.organization.parentId"> |
||||
<span class="itemname">公司排名</span> |
||||
<div class="box areabox"> |
||||
<div class="areaboxitem" *ngFor="let item of HomeAggregatioData.compayAgg;let key = index"> |
||||
<div class="areaboxitemtop"> |
||||
<span> |
||||
<span style="margin-right: 12px;" |
||||
[ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }"> |
||||
TOP {{key + 1}} |
||||
</span> |
||||
<span> |
||||
{{item.name}} |
||||
</span> |
||||
</span> |
||||
|
||||
<span> |
||||
{{item.count}} |
||||
</span> |
||||
</div> |
||||
<div class="progress"> |
||||
<div class="colorbar" |
||||
[ngStyle]="width(item.count,HomeAggregatioData.compayAgg[0].count)" |
||||
[ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
</div> --> |
||||
<div class="leftitem"> |
||||
<span class="itemname">近30天事件排名</span> |
||||
<div class="box eventbox"> |
||||
<div class="eventboxitem" |
||||
*ngFor="let item of HomeAggregatioData.violationNameAgg;let key = index"> |
||||
<div class="eventname" [title]="item.eventSystemName"> |
||||
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||
{{'0' + (key + 1)}} |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
{{key + 1}} |
||||
</ng-template> |
||||
</div> |
||||
{{item.eventSystemName}} |
||||
</div> |
||||
<div class="progressbox"> |
||||
<div class="progress"> |
||||
<div class="colorbar" |
||||
[ngStyle]="width(item.count,HomeAggregatioData.violationNameAgg[0].count)" |
||||
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div style="margin-left: 6px;"> |
||||
{{item.count}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<div class="leftitem"> |
||||
<span class="itemname">近30天油站排名</span> |
||||
<div class="box eventbox"> |
||||
<div class="eventboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index"> |
||||
<div class="eventname" [title]="item.companyName + item.stationName"> |
||||
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||
{{'0' + (key + 1)}} |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
{{key + 1}} |
||||
</ng-template> |
||||
</div> |
||||
{{item.companyName}} {{item.stationName}} |
||||
</div> |
||||
<div class="progressbox"> |
||||
<div class="progress"> |
||||
<div class="colorbar" |
||||
[ngStyle]="width(item.count,HomeAggregatioData.stationAgg[0].count)" |
||||
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div style="margin-left: 6px;"> |
||||
{{item.count}} |
||||
</div> |
||||
</div> |
||||
<!-- <div class="stationboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index"> |
||||
<div class="stationname"> |
||||
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||
{{'0' + (key + 1)}} |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
{{key + 1}} |
||||
</ng-template> |
||||
</div> |
||||
{{item.name}} |
||||
</div> |
||||
<div class="area"> |
||||
<span [ngClass]="{'yellow': key < 3,'blue': key > 2}">{{item.locationName}}</span> |
||||
</div> |
||||
<div style="margin-left: 6px;"> |
||||
{{item.count}} |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="rightbox"> |
||||
<div class="title" style="margin-left: -18px;"> |
||||
<app-title [name]="'AI接入统计'"></app-title> |
||||
</div> |
||||
<div class="rightboxcontent"> |
||||
<div class="rightitem"> |
||||
<div class="numlistbox"> |
||||
<img src="../../../assets/images/stationNum.png" alt=""> |
||||
<div class="content"> |
||||
<span class="lightspan lightspan1">{{HomeAggregatioData.dev.stationCount}}</span> |
||||
<span>接入油站(个)</span> |
||||
</div> |
||||
</div> |
||||
<div class="numlistbox"> |
||||
<img src="../../../assets/images/modelNum.png" alt=""> |
||||
<div class="content"> |
||||
<span class="lightspan lightspan2">{{HomeAggregatioData.dev.violationCount}}</span> |
||||
<span>预警分析模型(个)</span> |
||||
</div> |
||||
</div> |
||||
<div class="numlistbox"> |
||||
<img src="../../../assets/images/cameraNum.png" alt=""> |
||||
<div class="content"> |
||||
<span class="lightspan lightspan3">{{HomeAggregatioData.dev.cameraCount}}</span> |
||||
<span>摄像头(个)</span> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="numlistbox"> |
||||
<img src="../../../assets/images/licenseNum.png" alt=""> |
||||
<div class="content"> |
||||
<span class="lightspan lightspan3">{{HomeAggregatioData.licenseViolationCount}}</span> |
||||
<span>证照预警数量</span> |
||||
</div> |
||||
</div> |
||||
<div class="numlistbox"> |
||||
<img src="../../../assets/images/fireNum.png" alt=""> |
||||
<div class="content"> |
||||
<span class="lightspan lightspan3">{{HomeAggregatioData.deviceViolationCount}}</span> |
||||
<span>消防设备预警数量</span> |
||||
</div> |
||||
</div> --> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottombox"> |
||||
<div class="bottomitem"> |
||||
<div class="title" style="padding-left: 20px;"> |
||||
<app-title [name]="'预警走势'"></app-title> |
||||
</div> |
||||
<div class="bottomitemcontent bottomitemcontent1"> |
||||
<div class="bottomitemchartboxspecial"> |
||||
<span class="bartitle">近30天预警事件统计</span> |
||||
<div class="eventechartpie" id="eventechartpie"> |
||||
|
||||
|
||||
</div> |
||||
<div class="eventechartline" id="eventechartline"> |
||||
|
||||
</div> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottomitem"> |
||||
<div class="title"> |
||||
<app-title [name]="'卸油事件'"></app-title> |
||||
</div> |
||||
<div class="bottomitemcontent bottomitemcontent1"> |
||||
<div class="bottomitemchartboxspecial"> |
||||
<span class="bartitle">近30天卸油预警走势</span> |
||||
<div class="eventechartpie" id="oilechartpie"> |
||||
|
||||
</div> |
||||
<div style="height: 80%;" class="eventechartline" id="oilechartline"> |
||||
|
||||
</div> |
||||
<div class="angle-border left-top-border"></div> |
||||
<div class="angle-border right-top-border"></div> |
||||
<div class="angle-border left-bottom-border"></div> |
||||
<div class="angle-border right-bottom-border"></div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
<div class="oilNum"> |
||||
<div class="oilNumItem"> |
||||
<div class="pointbox"> |
||||
<div class="point"></div> |
||||
<span>累计卸油总车次</span> |
||||
</div> |
||||
{{HomeAggregatioData.ouViolationType.ouTotalCount}} |
||||
</div> |
||||
<!-- <div class="oilNumItem"> |
||||
<div class="pointbox"> |
||||
<div class="point"></div>s |
||||
<span>累计卸油正常车次</span> |
||||
</div> |
||||
{{HomeAggregatioData.ouViolationType.ouCorrectCount}} |
||||
</div> --> |
||||
<div class="oilNumItem"> |
||||
<div class="pointbox"> |
||||
<div class="point"></div> |
||||
<span>累计卸油预警车次</span> |
||||
</div> |
||||
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,922 @@
|
||||
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'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { DisposeequipmentComponent } from '../records/warning-statistics-list/disposeequipment/disposeequipment.component'; |
||||
import { listRefreshService } from '../../service/listRefresh.service'; |
||||
declare var tools |
||||
@Component({ |
||||
selector: 'app-home-page-nologin', |
||||
templateUrl: './home-page-nologin.component.html', |
||||
styleUrls: ['./home-page-nologin.component.scss'] |
||||
}) |
||||
export class HomePageNologinComponent implements OnInit { |
||||
|
||||
constructor(private listRefreshService: listRefreshService, private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { } |
||||
warningechartpieAll//全部预警饼图
|
||||
warningechartpieOptionAll = { |
||||
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
||||
tooltip: { |
||||
trigger: 'item'//触发类型
|
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: ['65%', '85%'], |
||||
// top: '2%',
|
||||
avoidLabelOverlap: false,//防止标签重叠策略
|
||||
emphasis: {//中间高亮区域
|
||||
show: true, |
||||
}, |
||||
data: [ |
||||
], |
||||
tooltip: {//鼠标移入提示
|
||||
position: 'right', |
||||
padding: [14, 19], |
||||
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
||||
textStyle: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
}, |
||||
formatter: "{b} : {c} ({d}%)", |
||||
extraCssText: 'z-index:2' |
||||
}, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: 'center', |
||||
color: '#4c4a4a', |
||||
formatter: '', |
||||
rich: { |
||||
total: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, |
||||
textShadowColor: '#8df', |
||||
textShadowBlur: 3, |
||||
color: '#fff', |
||||
|
||||
}, |
||||
active: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, |
||||
color: '#fff', |
||||
fontFamily: 'Microsoft YaHei', |
||||
}, |
||||
} |
||||
}, |
||||
emphasis: {//中间文字显示
|
||||
show: true, |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
warningechartpie//30天预警饼图
|
||||
warningechartpieOption = { |
||||
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
||||
tooltip: { |
||||
trigger: 'item'//触发类型
|
||||
}, |
||||
legend: { |
||||
top: '5%', |
||||
left: '25.5%', |
||||
itemGap: 8, |
||||
itemWidth: 6, |
||||
itemHeight: 6, |
||||
formatter: (name) => { |
||||
return '{a|' + name + '}'; |
||||
}, |
||||
textStyle: { |
||||
color: '#fff', |
||||
rich: { |
||||
a: { |
||||
width: 60 |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: ['50%', '60%'], |
||||
bottom: '-5%', |
||||
right: '77%', |
||||
avoidLabelOverlap: false,//防止标签重叠策略
|
||||
emphasis: {//中间高亮区域
|
||||
show: true, |
||||
}, |
||||
data: [ |
||||
], |
||||
tooltip: {//鼠标移入提示
|
||||
position: 'right', |
||||
padding: [14, 19], |
||||
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
||||
textStyle: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
}, |
||||
formatter: "{b} : {c} ({d}%)", |
||||
extraCssText: 'z-index:2' |
||||
}, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: 'center', |
||||
color: '#4c4a4a', |
||||
formatter: '', |
||||
rich: { |
||||
total: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, |
||||
textShadowColor: '#8df', |
||||
textShadowBlur: 3, |
||||
color: '#fff', |
||||
|
||||
}, |
||||
active: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, |
||||
color: '#fff', |
||||
fontFamily: 'Microsoft YaHei', |
||||
}, |
||||
} |
||||
}, |
||||
emphasis: {//中间文字显示
|
||||
show: true, |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
warningechartbar//预警折线图
|
||||
warningechartbarOption = { |
||||
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: [ |
||||
{ |
||||
data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,], |
||||
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: '35%' |
||||
}, |
||||
{ |
||||
data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,], |
||||
type: 'line', |
||||
symbol: 'circle', |
||||
symbolSize: 5, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
formatter: function (dataObj) { |
||||
const { dataIndex, value } = dataObj; |
||||
let labelText = value; |
||||
|
||||
labelText = ''; |
||||
if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个
|
||||
labelText = value; |
||||
} |
||||
|
||||
return `${labelText}` |
||||
} |
||||
} |
||||
|
||||
}, |
||||
itemStyle: { |
||||
color: '#fff', |
||||
shadowColor: '#fff', |
||||
shadowBlur: 10 |
||||
}, |
||||
lineStyle: { |
||||
color: '#FFCC8A', |
||||
width: 1 |
||||
} |
||||
} |
||||
], |
||||
grid: { |
||||
left: '40px', |
||||
right: '30px', |
||||
bottom: '38px', |
||||
top: '30px' |
||||
} |
||||
}; |
||||
oilchartpie//卸油饼图
|
||||
oilchartpieOption = { |
||||
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
||||
tooltip: { |
||||
trigger: 'item'//触发类型
|
||||
}, |
||||
legend: { |
||||
top: '5%', |
||||
left: '25%', |
||||
itemGap: 8, |
||||
itemWidth: 6, |
||||
itemHeight: 6, |
||||
formatter: (name) => { |
||||
// return name.length > 7 ? name.substr(0, 7) + "..." : name;
|
||||
return name; |
||||
}, |
||||
textStyle: { |
||||
color: '#fff', |
||||
rich: { |
||||
a: { |
||||
width: 80 |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: ['50%', '60%'], |
||||
bottom: '8%', |
||||
right: '77%', |
||||
avoidLabelOverlap: false,//防止标签重叠策略
|
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: 'center', |
||||
color: '#4c4a4a', |
||||
formatter: '', |
||||
rich: { |
||||
total: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, |
||||
textShadowColor: '#8df', |
||||
textShadowBlur: 3, |
||||
color: '#fff' |
||||
}, |
||||
active: { |
||||
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, |
||||
color: '#fff', |
||||
// fontFamily: 'Microsoft YaHei',
|
||||
}, |
||||
} |
||||
}, |
||||
emphasis: {//中间文字显示
|
||||
show: true, |
||||
} |
||||
}, |
||||
data: [], |
||||
tooltip: {//鼠标移入提示
|
||||
position: 'right', |
||||
padding: [14, 19], |
||||
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
||||
textStyle: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
}, |
||||
formatter: "{b} : {c} ({d}%)", |
||||
extraCssText: 'z-index:2' |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
oilchartpieOptionPieData1: any |
||||
|
||||
oilchartbar//卸油折线图
|
||||
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: { |
||||
normal: { |
||||
show: true, |
||||
formatter: function (dataObj) { |
||||
const { dataIndex, value } = dataObj; |
||||
let labelText = value; |
||||
|
||||
labelText = ''; |
||||
if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个
|
||||
labelText = value; |
||||
} |
||||
|
||||
return `${labelText}` |
||||
} |
||||
} |
||||
}, |
||||
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: '40px', |
||||
right: '30px', |
||||
bottom: '38px', |
||||
top: '36px' |
||||
} |
||||
}; |
||||
|
||||
|
||||
|
||||
userdata |
||||
async ngOnInit(): Promise<void> { |
||||
|
||||
|
||||
await this.login() |
||||
|
||||
|
||||
|
||||
this.userdata = JSON.parse(sessionStorage.getItem('userdata')) |
||||
|
||||
// 饼图
|
||||
this.warningechartpieAll = echarts.init(document.getElementById('eventechartpieAll'), null, { devicePixelRatio: 2 }); |
||||
// this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
|
||||
// 预警饼图
|
||||
this.warningechartpie = echarts.init(document.getElementById('eventechartpie'), null, { devicePixelRatio: 2 }); |
||||
// 预警线图
|
||||
this.warningechartbar = echarts.init(document.getElementById('eventechartline')); |
||||
|
||||
|
||||
// 卸油饼图
|
||||
this.oilchartpie = echarts.init(document.getElementById('oilechartpie'), null, { devicePixelRatio: 2 }); |
||||
// 卸油线图
|
||||
this.oilchartbar = echarts.init(document.getElementById('oilechartline')); |
||||
|
||||
|
||||
|
||||
window.onresize = () => { |
||||
setTimeout(() => { |
||||
this.warningechartpieAll.resize(); |
||||
this.warningechartpie.resize(); |
||||
this.warningechartbar.resize(); |
||||
this.oilchartpie.resize(); |
||||
this.oilchartbar.resize(); |
||||
}, 200); |
||||
|
||||
}; |
||||
|
||||
this.rollStart() |
||||
this.getHomeAggregation() |
||||
this.getUnreadNotification() |
||||
|
||||
setTimeout(() => { |
||||
this.getHomeAggregation() |
||||
}, 10 * 6000); |
||||
this.listRefreshService.getMessage().subscribe((message: any) => { |
||||
//列表刷新
|
||||
if (message.type == 'add') { |
||||
console.log('咱这边收到通知刷新页面了') |
||||
this.getHomeAggregation() |
||||
} |
||||
}); |
||||
|
||||
this.resolutionRatio() |
||||
} |
||||
|
||||
|
||||
login() { |
||||
return new Promise<void>((resolve, reject) => { |
||||
this.http.post('/api/TokenAuth/Authenticate', { |
||||
userNameOrEmailAddress: 'admin', |
||||
password: 'Sinochem119!@' |
||||
}).subscribe( |
||||
(data: any) => { |
||||
sessionStorage.setItem("token", data.result.accessToken); |
||||
sessionStorage.setItem("encryptedAccessToken", data.result.encryptedAccessToken); |
||||
// console.log('登陆成功')
|
||||
this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe(async (data: any) => { |
||||
sessionStorage.setItem('userdata', JSON.stringify(data.result.user)) |
||||
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(data.result.user)) |
||||
sessionStorage.setItem('isDefaultPassword', JSON.stringify(data.result.user.isDefaultPassword)) |
||||
sessionStorage.setItem('isPasswordExpired', JSON.stringify(data.result.user.isPasswordExpired)) |
||||
resolve(data) |
||||
}, err => { |
||||
reject(err) |
||||
}) |
||||
|
||||
}, |
||||
(err) => { |
||||
reject(err) |
||||
} |
||||
) |
||||
}) |
||||
|
||||
} |
||||
|
||||
|
||||
resolutionRatio() { |
||||
console.log(document.documentElement.clientWidth) |
||||
console.log(document.documentElement.clientHeight) |
||||
} |
||||
|
||||
//获得所有未读消息
|
||||
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: [] |
||||
}, |
||||
ouViolationType: { |
||||
ouCorrectCount: '', |
||||
ouNotCorrectCount: '', |
||||
ouTotalCount: '' |
||||
}, |
||||
dev: { |
||||
stationCount: '', |
||||
violationCount: '', |
||||
cameraCount: '' |
||||
}, |
||||
deviceViolationCount: '', |
||||
licenseViolationCount: '' |
||||
} |
||||
totalCount |
||||
isSpin: boolean = false |
||||
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.isSpin = 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.isSpin = false |
||||
this.eventEcharts(data.result) |
||||
}) |
||||
|
||||
} |
||||
//预警图表
|
||||
equipmentechartdata |
||||
tools1 |
||||
tools1All |
||||
tools2 |
||||
eventEcharts(data) { |
||||
let violationTypeAggCount = 0 |
||||
let violationTypeAggCountAll = 0 |
||||
data.violationType.violationTypeAgg.forEach(element => { |
||||
violationTypeAggCount += element.count |
||||
element.name = element.key |
||||
element.value = element.count |
||||
}); |
||||
data.violationType.violationTypeAggAll.forEach(element => { |
||||
violationTypeAggCountAll += element.count |
||||
element.name = element.key |
||||
element.value = element.count |
||||
}); |
||||
this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg; |
||||
this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + violationTypeAggCount + '}' + '\n\r' + '{active|预警事件}' |
||||
this.warningechartpie.setOption(this.warningechartpieOption); |
||||
|
||||
this.warningechartpieOptionAll.series[0].data = data.violationType.violationTypeAggAll; |
||||
this.warningechartpieOptionAll.series[0].label.normal.formatter = '{total|' + violationTypeAggCountAll + '}' + '\n\r' + '{active|累计预警}' |
||||
this.warningechartpieAll.setOption(this.warningechartpieOptionAll); |
||||
// 可调用clearLoop方法，清除定时器
|
||||
this.tools1 && this.tools1.clearLoop(); |
||||
this.tools1 = null; |
||||
this.tools1 = tools.loopShowTooltip(this.warningechartpie, this.warningechartpieOption, { |
||||
interval: 5000, |
||||
loopSeries: true |
||||
}); |
||||
|
||||
this.tools1All && this.tools1All.clearLoop(); |
||||
this.tools1All = null; |
||||
this.tools1All = tools.loopShowTooltip(this.warningechartpieAll, this.warningechartpieOptionAll, { |
||||
interval: 5000, |
||||
loopSeries: true |
||||
}); |
||||
|
||||
|
||||
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 |
||||
let xxx = valuedata.find(function (value, index, arr) { |
||||
return value > 1000; |
||||
}) |
||||
if (xxx) { |
||||
this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) { |
||||
const { dataIndex, value } = dataObj; |
||||
let labelText = value; |
||||
|
||||
labelText = ''; |
||||
if (dataIndex % 2 === 0) { // 每隔三个x坐标显示一个
|
||||
labelText = value; |
||||
} |
||||
|
||||
return `${labelText}` |
||||
} |
||||
} |
||||
this.warningechartbar.setOption(this.warningechartbarOption); |
||||
|
||||
|
||||
//卸油两个图
|
||||
this.refreshEchartsData1(data) |
||||
} |
||||
|
||||
oilDischargeNum: any |
||||
refreshEchartsData1(data) { |
||||
this.oilDischargeNum = data.totalCount |
||||
//饼图
|
||||
data.ouViolationType.ouViolationTypeAgg.forEach(element => { |
||||
element.name = element.key |
||||
element.value = element.count |
||||
}); |
||||
this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg |
||||
this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.ouRecordCount + '}' + '\n\r' + '{active|卸油预警}' |
||||
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 |
||||
this.oilchartpie.setOption(this.oilchartpieOption); |
||||
|
||||
// 可调用clearLoop方法，清除定时器
|
||||
this.tools2 && this.tools2.clearLoop(); |
||||
this.tools2 = null; |
||||
this.tools2 = tools.loopShowTooltip(this.oilchartpie, this.oilchartpieOption, { |
||||
interval: 5000, |
||||
loopSeries: true |
||||
}); |
||||
//柱状图
|
||||
let monthArr = [] |
||||
let valuedata = [] |
||||
data.ouViolationType.ouDays30ViolationCount.forEach(element => { |
||||
monthArr.push(moment(element.key).format('MM.DD')) |
||||
valuedata.push(element.count) |
||||
}); |
||||
this.oilchartbarOption.xAxis.data = monthArr |
||||
this.oilchartbarOption.series[0].data = valuedata |
||||
this.oilchartbarOption.series[1].data = valuedata |
||||
let xxx = valuedata.find(function (value, index, arr) { |
||||
return value > 1000; |
||||
}) |
||||
if (xxx) { |
||||
// console.log('xxxxxxxxxx')
|
||||
this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) { |
||||
const { dataIndex, value } = dataObj; |
||||
let labelText = value; |
||||
|
||||
labelText = ''; |
||||
if (dataIndex % 2 === 0) { // 每隔三个x坐标显示一个
|
||||
labelText = value; |
||||
} |
||||
|
||||
return `${labelText}` |
||||
} |
||||
} |
||||
this.oilchartbar.setOption(this.oilchartbarOption); |
||||
} |
||||
//获取统计信息
|
||||
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.refreshEchartsData1(data.result) |
||||
}) |
||||
} |
||||
timer |
||||
rollStart() { |
||||
var ROLL_SPEED = 100 |
||||
var noticeList1 = document.getElementById('notice-list'); |
||||
var noticeList2 = document.getElementById('notice-list-2'); |
||||
var listWrapper = document.getElementById('list-wrapper'); |
||||
noticeList2.innerHTML = noticeList1.innerHTML; |
||||
this.timer = setInterval(rollStart, ROLL_SPEED); |
||||
|
||||
function rollStart() { |
||||
if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) { |
||||
listWrapper.style.top = '0px' |
||||
} else { |
||||
var top = listWrapper.style.top |
||||
listWrapper.style.top = _subStr(top) - 1 + 'px' |
||||
} |
||||
} |
||||
// 截取px前数值
|
||||
function _subStr(str) { |
||||
var index = str.indexOf('px'); |
||||
if (index > -1) { |
||||
return parseFloat(str.substr(0, index + 1)) |
||||
} |
||||
} |
||||
} |
||||
mouseEnter() { |
||||
// console.log('进入了')
|
||||
window.clearInterval(this.timer); |
||||
} |
||||
mouseleave() { |
||||
// console.log('离开了')
|
||||
if (!this.isOpenModel) { |
||||
this.rollStart() |
||||
} |
||||
|
||||
} |
||||
|
||||
width(width: string, denominator: string) { |
||||
let style: any = {} |
||||
style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + '%'; |
||||
return style |
||||
} |
||||
|
||||
|
||||
isOpenModel: boolean = false |
||||
|
||||
look(item) { |
||||
console.log('消息item', item) |
||||
item.notification.data.violation = {} |
||||
item.notification.data.violation.violationType = item.notification.data.violationType |
||||
item.notification.data.violation.violationSubType = item.notification.data.violationSubType |
||||
item.notification.data.violation.violationName = item.notification.data.violationName |
||||
item.notification.data.violation.eventSystemName = item.notification.data.eventSystemName |
||||
if (item.notification.data.eventSystemName == '设备报废临期提醒' || item.notification.data.eventSystemName == '设备报废逾期报警' |
||||
|| item.notification.data.eventSystemName == '设备维保临期提醒' |
||||
|| item.notification.data.eventSystemName == '设备维保逾期报警' |
||||
) { |
||||
this.isOpenModel = true |
||||
let copydata = item.notification.data |
||||
copydata.violatedItemSnapshotObj = JSON.parse(copydata.violatedItemSnapshot) |
||||
const modal = this.modal.create({ |
||||
nzContent: DisposeequipmentComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 380, |
||||
nzBodyStyle: { |
||||
'border': '1px solid #91CCFF', |
||||
'border-radius': '0px', |
||||
'padding': '7px', |
||||
'box-shadow': '0 0 8px 0 #fff', |
||||
'background-image': 'linear-gradient(#003665, #000f25)' |
||||
}, |
||||
nzComponentParams: { |
||||
data: copydata |
||||
}, |
||||
nzFooter: null, |
||||
nzClosable: false, |
||||
nzOnOk: async () => { |
||||
if (instance.isScrap) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
id: copydata.violatedItemSnapshotObj.id, |
||||
isScrapped: true, |
||||
organizationUnitId: copydata.violatedItemSnapshotObj.organizationUnitId, |
||||
name: instance.copydata2.violatedItemSnapshotObj.name, |
||||
storageLocation: instance.copydata2.violatedItemSnapshotObj.storageLocation, |
||||
productionDate: moment(instance.copydata2.violatedItemSnapshotObj.productionDate).format('yyyy-MM-DD'), |
||||
maintenanceDate: moment(instance.copydata2.violatedItemSnapshotObj.maintenanceDate).format('yyyy-MM-DD'), |
||||
validityEndTime: moment(instance.copydata2.violatedItemSnapshotObj.validityEndTime).format('yyyy-MM-DD') |
||||
} |
||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
||||
let body = { |
||||
id: item.notification.entityId, |
||||
handleRecord: '报废成功！' |
||||
} |
||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '报废成功！'); |
||||
copydata.handleTime = new Date() |
||||
return true |
||||
}) |
||||
}) |
||||
}) |
||||
|
||||
} else { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
id: copydata.violatedItemSnapshotObj.id, |
||||
name: instance.validateForm.value.name, |
||||
storageLocation: instance.validateForm.value.storageLocation, |
||||
productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'), |
||||
maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'), |
||||
validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'), |
||||
organizationUnitId: copydata.violatedItemSnapshotObj.organizationUnitId |
||||
} |
||||
this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => { |
||||
let body = { |
||||
id: item.notification.entityId, |
||||
handleRecord: '维保成功！' |
||||
} |
||||
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '维保成功！'); |
||||
copydata.handleTime = new Date() |
||||
return true |
||||
}) |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
|
||||
|
||||
modal.afterClose.subscribe(result => { |
||||
this.isOpenModel = false |
||||
this.rollStart() |
||||
}); |
||||
this.readMess(item.notification.id) |
||||
} else { |
||||
this.isOpenModel = true |
||||
item.notification.data.id = item.notification.entityId |
||||
let data = item.notification.data |
||||
const modal = this.modal.create({ |
||||
nzContent: GetOutOfLineDetailsComponent, |
||||
nzWrapClassName: "vertical-center-modal", |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200, |
||||
nzClosable: false, |
||||
nzClassName: 'modelnobg', |
||||
nzBodyStyle: { |
||||
'border-radius': '0px', |
||||
'padding': '0px', |
||||
}, |
||||
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) |
||||
} |
||||
} |
||||
Loading…
Reference in new issue