diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
index 2f1f849..fc9f13f 100644
--- a/src/app/pages/home-page/home-page.component.ts
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -539,12 +539,21 @@ export class HomePageComponent implements OnInit {
);
// 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")
@@ -556,6 +565,16 @@ export class HomePageComponent implements OnInit {
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"));
@@ -589,6 +608,14 @@ export class HomePageComponent implements OnInit {
// 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);
@@ -633,18 +660,20 @@ export class HomePageComponent implements OnInit {
/**
* 获得统计图表数据
*/
+
+ organizationUnitId;
getHomeAggregation() {
- let organizationUnitId;
if (this.router.url.indexOf("petrolStation") != -1) {
- organizationUnitId = JSON.parse(
+ this.organizationUnitId = JSON.parse(
sessionStorage.getItem("userdataOfgasstation")
).organization.id;
} else {
- organizationUnitId = JSON.parse(sessionStorage.getItem("userdata"))
- .organization.id;
+ this.organizationUnitId = JSON.parse(
+ sessionStorage.getItem("userdata")
+ ).organization.id;
}
let body = {
- organizationUnitId: organizationUnitId,
+ organizationUnitId: this.organizationUnitId,
isContainsChildren: true,
};
this.isSpin = true;
@@ -659,8 +688,22 @@ export class HomePageComponent implements OnInit {
{ name: "预警模型数量", value: data.result.dev.violationCount },
];
console.log("图表信息", data.result);
- this.isSpin = false;
+ //左上角累计预警事件 + 左下角饼图 + 右下角饼图
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);
});
}
@@ -669,7 +712,9 @@ export class HomePageComponent implements OnInit {
tools1;
tools1All;
tools2;
+ oilDischargeNum: any;
eventEcharts(data) {
+ //累计预警 和 30天预警的饼图
let violationTypeAggCount = 0;
let violationTypeAggCountAll = 0;
data.violationType.violationTypeAgg.forEach((element) => {
@@ -684,8 +729,8 @@ export class HomePageComponent implements OnInit {
});
this.warningechartpieOption.series[0].data =
data.violationType.violationTypeAgg;
- this.warningechartpieOption.series[0].label.normal.formatter =
- "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}";
+ // this.warningechartpieOption.series[0].label.normal.formatter =
+ // "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}";
this.warningechartpie.setOption(this.warningechartpieOption);
this.warningechartpieOptionAll.series[0].data =
@@ -693,6 +738,7 @@ export class HomePageComponent implements OnInit {
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;
@@ -716,9 +762,74 @@ export class HomePageComponent implements OnInit {
}
);
+ //卸油饼图
+ 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 = false;
+ isSpinOfOilDischarge = false;
+ 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.violationType.days30ViolationCount.forEach((element) => {
+ data.forEach((element) => {
+ violationTypeAggCount += element.count;
monthArr.push(moment(element.key).format("MM.DD"));
valuedata.push(element.count);
});
@@ -734,55 +845,29 @@ export class HomePageComponent implements OnInit {
) {
const { dataIndex, value } = dataObj;
let labelText = value;
-
labelText = "";
if (dataIndex % 2 === 0) {
// 每隔三个x坐标显示一个
labelText = value;
}
-
return `${labelText}`;
};
}
this.warningechartbar.setOption(this.warningechartbarOption);
- //卸油两个图
- this.oilDischargeEcharts(data);
+ this.warningechartpieOption.series[0].label.normal.formatter =
+ "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}";
+ this.warningechartpie.setOption(this.warningechartpieOption);
}
- //30天预警事件两个图
- eventWarningOfMonth() {}
-
- //卸油两个图
- oilDischargeNum: any;
+ //卸油30天柱状图
oilDischargeEcharts(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 violationTypeAggCount = 0;
//柱状图
let monthArr = [];
let valuedata = [];
- data.ouViolationType.ouDays30ViolationCount.forEach((element) => {
+ data.forEach((element) => {
+ violationTypeAggCount += element.count;
monthArr.push(moment(element.key).format("MM.DD"));
valuedata.push(element.count);
});
@@ -809,6 +894,10 @@ export class HomePageComponent implements OnInit {
};
}
this.oilchartbar.setOption(this.oilchartbarOption);
+
+ this.oilchartpieOption.series[0].label.normal.formatter =
+ "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|卸油预警}";
+ this.oilchartpie.setOption(this.oilchartpieOption);
}
timer;
From 1359fad5f2f2e0fde96336715b3cd11ca69d33c4 Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Mon, 27 Feb 2023 09:41:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E9=A6=96=E9=A1=B5?=
=?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/pages/home-page/home-page.component.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
index fc9f13f..d8456a0 100644
--- a/src/app/pages/home-page/home-page.component.ts
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -736,7 +736,7 @@ export class HomePageComponent implements OnInit {
this.warningechartpieOptionAll.series[0].data =
data.violationType.violationTypeAggAll;
this.warningechartpieOptionAll.series[0].label.normal.formatter =
- "{total|" + violationTypeAggCountAll + "}" + "\n\r" + "{active|累计预警}";
+ "{total|" + data.recordCount + "}" + "\n\r" + "{active|累计预警}";
this.warningechartpieAll.setOption(this.warningechartpieOptionAll);
// 可调用clearLoop方法，清除定时器
@@ -791,8 +791,8 @@ export class HomePageComponent implements OnInit {
//下面两个柱状图
- isSpinOfEventWarning = false;
- isSpinOfOilDischarge = false;
+ isSpinOfEventWarning = true;
+ isSpinOfOilDischarge = true;
get30daysViolate(type, data) {
//type = true 代表预警 false代表卸油
type
@@ -828,6 +828,7 @@ export class HomePageComponent implements OnInit {
let violationTypeAggCount = 0;
let monthArr = [];
let valuedata = [];
+
data.forEach((element) => {
violationTypeAggCount += element.count;
monthArr.push(moment(element.key).format("MM.DD"));
@@ -854,7 +855,6 @@ export class HomePageComponent implements OnInit {
};
}
this.warningechartbar.setOption(this.warningechartbarOption);
-
this.warningechartpieOption.series[0].label.normal.formatter =
"{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}";
this.warningechartpie.setOption(this.warningechartpieOption);