shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[修改]首页接口修改

beijing
邵佳豪 2 years ago
parent
6209797b27
commit
1bf133ef44
3 changed files with 148 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      proxy.config.json
  2. 4
      src/app/pages/home-page/home-page.component.html
  3. 175
      src/app/pages/home-page/home-page.component.ts

28
proxy.config.json
Unescape View File

@ -1,15 +1,15 @@
{
"/api": {
"生产": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"secure": false,
"changeOrigin": true
},
"/signalr": {
"生产": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"secure": false,
"ws": true,
"logLevel": "debug"
}
}
"/api": {
"生产": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"secure": false,
"changeOrigin": true
},
"/signalr": {
"生产": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"secure": false,
"ws": true,
"logLevel": "debug"
}
}

4
src/app/pages/home-page/home-page.component.html
Unescape View File

@ -241,7 +241,7 @@
<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>
<nz-spin *ngIf="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin>
</div>
</div>
</div>
@ -262,7 +262,7 @@
<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>
<nz-spin *ngIf="isSpinOfOilDischarge" nzSimple class="nzspin"></nz-spin>
<div class="oilNum">
<div class="oilNumItem">
<div class="pointbox">

175
src/app/pages/home-page/home-page.component.ts
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save