You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1133 lines
31 KiB
1133 lines
31 KiB
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", |
|
templateUrl: "./home-page.component.html", |
|
styleUrls: ["./home-page.component.scss"], |
|
}) |
|
export class HomePageComponent 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", //触发类型 |
|
}, |
|
// legend: { |
|
// top: '1%', |
|
// // left: '25.5%', |
|
// itemGap: 6, |
|
// itemWidth: 6, |
|
// itemHeight: 6, |
|
// formatter: (name) => { |
|
// return '{a|' + name + '}'; |
|
// }, |
|
// textStyle: { |
|
// color: '#fff', |
|
// rich: { |
|
// a: { |
|
// width: 50 |
|
// } |
|
// } |
|
// } |
|
// }, |
|
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; |
|
ngOnInit(): void { |
|
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.warningechartpie.on("legendselectchanged", (obj) => { |
|
let arr = []; |
|
for (const key in obj.selected) { |
|
if (Object.prototype.hasOwnProperty.call(obj.selected, key)) { |
|
const element = obj.selected[key]; |
|
element ? arr.push(key) : null; |
|
} |
|
} |
|
this.get30daysViolate(true, arr); |
|
}); |
|
// 预警线图 |
|
this.warningechartbar = echarts.init( |
|
document.getElementById("eventechartline") |
|
); |
|
|
|
// 卸油饼图 |
|
this.oilchartpie = echarts.init( |
|
document.getElementById("oilechartpie"), |
|
null, |
|
{ devicePixelRatio: 2 } |
|
); |
|
this.oilchartpie.on("legendselectchanged", (obj) => { |
|
let arr = []; |
|
for (const key in obj.selected) { |
|
if (Object.prototype.hasOwnProperty.call(obj.selected, key)) { |
|
const element = obj.selected[key]; |
|
element ? arr.push(key) : null; |
|
} |
|
} |
|
this.get30daysViolate(false, arr); |
|
}); |
|
// 卸油线图 |
|
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") { |
|
this.getHomeAggregation(); |
|
} |
|
}); |
|
|
|
// this.resolutionRatio(); |
|
} |
|
|
|
ngOnDestroy(): void { |
|
this.warningechartpieAll.dispose(); |
|
this.warningechartpie.dispose(); |
|
this.warningechartbar.dispose(); |
|
this.oilchartpie.dispose(); |
|
this.oilchartbar.dispose(); |
|
} |
|
|
|
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; |
|
|
|
/** |
|
* 获得统计图表数据 |
|
*/ |
|
|
|
organizationUnitId; |
|
getHomeAggregation() { |
|
if (this.router.url.indexOf("petrolStation") != -1) { |
|
this.organizationUnitId = JSON.parse( |
|
sessionStorage.getItem("userdataOfgasstation") |
|
).organization.id; |
|
} else { |
|
this.organizationUnitId = JSON.parse( |
|
sessionStorage.getItem("userdata") |
|
).organization.id; |
|
} |
|
let body = { |
|
organizationUnitId: this.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.eventEcharts(data.result); |
|
this.isSpin = false; |
|
|
|
//左下角柱状图； |
|
let arr1 = []; |
|
arr1 = this.HomeAggregatioData.violationType.violationTypeAgg.map( |
|
(v) => v.name |
|
); |
|
this.get30daysViolate(true, arr1); |
|
//右下角柱状图 |
|
let arr2 = []; |
|
arr2 = this.HomeAggregatioData.ouViolationType.ouViolationTypeAgg.map( |
|
(v) => v.name |
|
); |
|
this.get30daysViolate(false, arr2); |
|
}); |
|
} |
|
|
|
//预警图表 |
|
equipmentechartdata; |
|
tools1; |
|
tools1All; |
|
tools2; |
|
oilDischargeNum: any; |
|
eventEcharts(data) { |
|
//累计预警 和 30天预警的饼图 |
|
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|" + data.recordCount + "}" + "\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, |
|
} |
|
); |
|
|
|
//卸油饼图 |
|
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, |
|
} |
|
); |
|
// //卸油两个图 |
|
// this.oilDischargeEcharts(data); |
|
} |
|
|
|
//下面两个柱状图 |
|
|
|
isSpinOfEventWarning = true; |
|
isSpinOfOilDischarge = true; |
|
get30daysViolate(type, data) { |
|
//type = true 代表预警 false代表卸油 |
|
type |
|
? (this.isSpinOfEventWarning = true) |
|
: (this.isSpinOfOilDischarge = true); |
|
let params = { |
|
OrganizationUnitId: this.organizationUnitId, |
|
IsContainsChildren: true, |
|
ViolationTypes: type ? data : null, |
|
EventSystemNames: type ? null : data, |
|
}; |
|
this.http |
|
.get("/api/services/app/Home/Get30daysViolate", { |
|
params: params, |
|
}) |
|
.subscribe((data: any) => { |
|
if (type) { |
|
//30天预警柱状图填充数据 |
|
// console.log("30天预警数据", data); |
|
this.isSpinOfEventWarning = false; |
|
this.eventWarningOfMonth(data.result); |
|
} else { |
|
//30天卸油数据柱状图填充数据 |
|
// console.log("30天卸油数据", data); |
|
this.isSpinOfOilDischarge = false; |
|
this.oilDischargeEcharts(data.result); |
|
} |
|
}); |
|
} |
|
|
|
//预警事件30天柱状图 |
|
eventWarningOfMonth(data) { |
|
let violationTypeAggCount = 0; |
|
let monthArr = []; |
|
let valuedata = []; |
|
|
|
data.forEach((element) => { |
|
violationTypeAggCount += element.count; |
|
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 valueCount = valuedata.find(function (value, index, arr) { |
|
return value > 1000; |
|
}); |
|
if (valueCount) { |
|
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.warningechartpieOption.series[0].label.normal.formatter = |
|
"{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}"; |
|
this.warningechartpie.setOption(this.warningechartpieOption); |
|
} |
|
|
|
//卸油30天柱状图 |
|
oilDischargeEcharts(data) { |
|
let violationTypeAggCount = 0; |
|
//柱状图 |
|
let monthArr = []; |
|
let valuedata = []; |
|
data.forEach((element) => { |
|
violationTypeAggCount += element.count; |
|
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 valueCount = valuedata.find(function (value, index, arr) { |
|
return value > 1000; |
|
}); |
|
if (valueCount) { |
|
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); |
|
|
|
this.oilchartpieOption.series[0].label.normal.formatter = |
|
"{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|卸油预警}"; |
|
this.oilchartpie.setOption(this.oilchartpieOption); |
|
} |
|
|
|
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); |
|
} |
|
}
|
|
|