diff --git a/src/app/pages/audit/audit-record/audit-record.component.html b/src/app/pages/audit/audit-record/audit-record.component.html index ea485f2..ee83f18 100644 --- a/src/app/pages/audit/audit-record/audit-record.component.html +++ b/src/app/pages/audit/audit-record/audit-record.component.html @@ -9,7 +9,7 @@ - + diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index 98589e6..2f1f849 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -1,27 +1,44 @@ -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 +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'] + 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//全部预警饼图 + 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'], + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], tooltip: { - trigger: 'item'//触发类型 + trigger: "item", //触发类型 }, // legend: { // top: '1%', @@ -43,196 +60,226 @@ export class HomePageComponent implements OnInit { // }, series: [ { - type: 'pie', - radius: ['65%', '85%'], + type: "pie", + radius: ["65%", "85%"], // top: '2%', - avoidLabelOverlap: false,//防止标签重叠策略 - emphasis: {//中间高亮区域 + avoidLabelOverlap: false, //防止标签重叠策略 + emphasis: { + //中间高亮区域 show: true, }, - data: [ - ], - tooltip: {//鼠标移入提示 - position: 'right', + data: [], + tooltip: { + //鼠标移入提示 + position: "right", padding: [14, 19], - backgroundColor: 'rgba(28, 129, 218, 0.4)', + backgroundColor: "rgba(28, 129, 218, 0.4)", textStyle: { - color: '#fff', - fontSize: 12 + color: "#fff", + fontSize: 12, }, formatter: "{b} : {c} ({d}%)", - extraCssText: 'z-index:2' + extraCssText: "z-index:2", }, label: { normal: { show: true, - position: 'center', - color: '#4c4a4a', - formatter: '', + position: "center", + color: "#4c4a4a", + formatter: "", rich: { total: { fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, - textShadowColor: '#8df', + textShadowColor: "#8df", textShadowBlur: 3, - color: '#fff', - + color: "#fff", }, active: { fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, - color: '#fff', - fontFamily: 'Microsoft YaHei', + color: "#fff", + fontFamily: "Microsoft YaHei", }, - } + }, }, - emphasis: {//中间文字显示 + emphasis: { + //中间文字显示 show: true, - } - } - } - ] + }, + }, + }, + ], }; - warningechartpie//30天预警饼图 + warningechartpie; //30天预警饼图 warningechartpieOption = { - color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], tooltip: { - trigger: 'item'//触发类型 + trigger: "item", //触发类型 }, legend: { - top: '5%', - left: '25.5%', + top: "5%", + left: "25.5%", itemGap: 8, itemWidth: 6, itemHeight: 6, formatter: (name) => { - return '{a|' + name + '}'; + return "{a|" + name + "}"; }, textStyle: { - color: '#fff', + color: "#fff", rich: { a: { - width: 60 - } - } - } + width: 60, + }, + }, + }, }, series: [ { - type: 'pie', - radius: ['50%', '60%'], - bottom: '-5%', - right: '77%', - avoidLabelOverlap: false,//防止标签重叠策略 - emphasis: {//中间高亮区域 + type: "pie", + radius: ["50%", "60%"], + bottom: "-5%", + right: "77%", + avoidLabelOverlap: false, //防止标签重叠策略 + emphasis: { + //中间高亮区域 show: true, }, - data: [ - ], - tooltip: {//鼠标移入提示 - position: 'right', + data: [], + tooltip: { + //鼠标移入提示 + position: "right", padding: [14, 19], - backgroundColor: 'rgba(28, 129, 218, 0.4)', + backgroundColor: "rgba(28, 129, 218, 0.4)", textStyle: { - color: '#fff', - fontSize: 12 + color: "#fff", + fontSize: 12, }, formatter: "{b} : {c} ({d}%)", - extraCssText: 'z-index:2' + extraCssText: "z-index:2", }, label: { normal: { show: true, - position: 'center', - color: '#4c4a4a', - formatter: '', + position: "center", + color: "#4c4a4a", + formatter: "", rich: { total: { fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, - textShadowColor: '#8df', + textShadowColor: "#8df", textShadowBlur: 3, - color: '#fff', - + color: "#fff", }, active: { fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, - color: '#fff', - fontFamily: 'Microsoft YaHei', + color: "#fff", + fontFamily: "Microsoft YaHei", }, - } + }, }, - emphasis: {//中间文字显示 + emphasis: { + //中间文字显示 show: true, - } - } - } - ] + }, + }, + }, + ], }; - warningechartbar//预警折线图 + warningechartbar; //预警折线图 warningechartbarOption = { xAxis: { - type: 'category', + type: "category", data: [], axisLine: { show: false, lineStyle: { - color: '#91CCFF' - } + color: "#91CCFF", + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, // inverse: true }, yAxis: { - type: 'value', + type: "value", nameTextStyle: { - color: '#C4E2FC' + color: "#C4E2FC", }, - splitLine: {//分割线 + splitLine: { + //分割线 lineStyle: { - color: ['#0f4374'], - width: 2 - } + color: ["#0f4374"], + width: 2, + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, - axisLine: {//轴线 + axisLine: { + //轴线 show: false, lineStyle: { - color: '#C4E2FC' - } - } + 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', + 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', + 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 - } + colorStops: [ + { + offset: 0, + color: "#23F0FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, }, - barWidth: '35%' + 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', + 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: { @@ -241,43 +288,55 @@ export class HomePageComponent implements OnInit { const { dataIndex, value } = dataObj; let labelText = value; - labelText = ''; - if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个 + labelText = ""; + if (dataIndex % 1 === 0) { + // 每隔三个x坐标显示一个 labelText = value; } - return `${labelText}` - } - } - + return `${labelText}`; + }, + }, }, itemStyle: { - color: '#fff', - shadowColor: '#fff', - shadowBlur: 10 + color: "#fff", + shadowColor: "#fff", + shadowBlur: 10, }, lineStyle: { - color: '#FFCC8A', - width: 1 - } - } + color: "#FFCC8A", + width: 1, + }, + }, ], grid: { - left: '40px', - right: '30px', - bottom: '38px', - top: '30px' - } + left: "40px", + right: "30px", + bottom: "38px", + top: "30px", + }, }; - oilchartpie//卸油饼图 + + oilchartpie; //卸油饼图 oilchartpieOption = { - color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], tooltip: { - trigger: 'item'//触发类型 + trigger: "item", //触发类型 }, legend: { - top: '5%', - left: '25%', + top: "5%", + left: "25%", itemGap: 8, itemWidth: 6, itemHeight: 6, @@ -286,130 +345,141 @@ export class HomePageComponent implements OnInit { return name; }, textStyle: { - color: '#fff', + color: "#fff", rich: { a: { - width: 80 - } - } - } + width: 80, + }, + }, + }, }, series: [ { - type: 'pie', - radius: ['50%', '60%'], - bottom: '8%', - right: '77%', - avoidLabelOverlap: false,//防止标签重叠策略 + type: "pie", + radius: ["50%", "60%"], + bottom: "8%", + right: "77%", + avoidLabelOverlap: false, //防止标签重叠策略 label: { normal: { show: true, - position: 'center', - color: '#4c4a4a', - formatter: '', + position: "center", + color: "#4c4a4a", + formatter: "", rich: { total: { fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, - textShadowColor: '#8df', + textShadowColor: "#8df", textShadowBlur: 3, - color: '#fff' + color: "#fff", }, active: { fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, - color: '#fff', + color: "#fff", // fontFamily: 'Microsoft YaHei', }, - } + }, }, - emphasis: {//中间文字显示 + emphasis: { + //中间文字显示 show: true, - } + }, }, data: [], - tooltip: {//鼠标移入提示 - position: 'right', + tooltip: { + //鼠标移入提示 + position: "right", padding: [14, 19], - backgroundColor: 'rgba(28, 129, 218, 0.4)', + backgroundColor: "rgba(28, 129, 218, 0.4)", textStyle: { - color: '#fff', - fontSize: 12 + color: "#fff", + fontSize: 12, }, formatter: "{b} : {c} ({d}%)", - extraCssText: 'z-index:2' - } - } - ] + extraCssText: "z-index:2", + }, + }, + ], }; - oilchartpieOptionPieData1: any - oilchartbar//卸油折线图 + oilchartpieOptionPieData1: any; + + oilchartbar; //卸油折线图 oilchartbarOption = { xAxis: { - type: 'category', + type: "category", data: [], axisLine: { show: false, lineStyle: { - color: '#91CCFF' - } + color: "#91CCFF", + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, // inverse: true - }, yAxis: { - type: 'value', + type: "value", nameTextStyle: { - color: '#C4E2FC' + color: "#C4E2FC", }, - splitLine: {//分割线 + splitLine: { + //分割线 lineStyle: { - color: ['#0f4374'], - width: 2 - } + color: ["#0f4374"], + width: 2, + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, - axisLine: {//轴线 + axisLine: { + //轴线 show: false, lineStyle: { - color: '#C4E2FC' - } - } + color: "#C4E2FC", + }, + }, }, tooltip: { // // trigger: 'axis' }, series: [ { - name: '卸油事件', + name: "卸油事件", data: [], - type: 'bar', + type: "bar", itemStyle: { color: { - type: 'linear', + 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 - } + colorStops: [ + { + offset: 0, + color: "#23F0FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, }, - barWidth: '25%' + barWidth: "25%", }, { - name: '卸油事件', + name: "卸油事件", data: [], - type: 'line', - symbol: 'circle', + type: "line", + symbol: "circle", symbolSize: 8, label: { normal: { @@ -418,25 +488,26 @@ export class HomePageComponent implements OnInit { const { dataIndex, value } = dataObj; let labelText = value; - labelText = ''; - if (dataIndex % 1 === 0) { // 每隔三个x坐标显示一个 + labelText = ""; + if (dataIndex % 1 === 0) { + // 每隔三个x坐标显示一个 labelText = value; } - return `${labelText}` - } - } + return `${labelText}`; + }, + }, }, itemStyle: { - color: '#fff', - shadowColor: '#fff', - shadowBlur: 10 + color: "#fff", + shadowColor: "#fff", + shadowBlur: 10, }, lineStyle: { - color: '#FFCC8A', - width: 1 - } - } + color: "#FFCC8A", + width: 1, + }, + }, ], // legend: { // data: ['卸油事件'], @@ -449,35 +520,44 @@ export class HomePageComponent implements OnInit { // itemHeight: 8, // }, grid: { - left: '40px', - right: '30px', - bottom: '38px', - top: '36px' - } + left: "40px", + right: "30px", + bottom: "38px", + top: "36px", + }, }; - - - userdata + userdata; ngOnInit(): void { - - this.userdata = JSON.parse(sessionStorage.getItem('userdata')) + this.userdata = JSON.parse(sessionStorage.getItem("userdata")); // 饼图 - this.warningechartpieAll = echarts.init(document.getElementById('eventechartpieAll'), null, { devicePixelRatio: 2 }); + 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.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.oilchartpie = echarts.init( + document.getElementById("oilechartpie"), + null, + { devicePixelRatio: 2 } + ); // 卸油线图 - this.oilchartbar = echarts.init(document.getElementById('oilechartline')); - - + this.oilchartbar = echarts.init(document.getElementById("oilechartline")); window.onresize = () => { setTimeout(() => { @@ -487,239 +567,277 @@ export class HomePageComponent implements OnInit { this.oilchartpie.resize(); this.oilchartbar.resize(); }, 200); - }; - this.rollStart() - this.getHomeAggregation() - this.getUnreadNotification() + this.rollStart(); + + this.getHomeAggregation(); + + this.getUnreadNotification(); setTimeout(() => { - this.getHomeAggregation() + this.getHomeAggregation(); }, 10 * 6000); + this.listRefreshService.getMessage().subscribe((message: any) => { //列表刷新 - if (message.type == 'add') { - console.log('咱这边收到通知刷新页面了') - this.getHomeAggregation() + if (message.type == "add") { + this.getHomeAggregation(); } }); - this.resolutionRatio() + // this.resolutionRatio(); } resolutionRatio() { - console.log(document.documentElement.clientWidth) - console.log(document.documentElement.clientHeight) + console.log(document.documentElement.clientWidth); + console.log(document.documentElement.clientHeight); } - //获得所有未读消息 - unreadMessageList: any + unreadMessageList: any; + /** + * 获得所有未读消息 + */ getUnreadNotification() { - this.http.get('/api/services/app/Notification/GetUnreadNotification').subscribe((data: any) => { - console.log('获得所有未读消息', data) - this.unreadMessageList = data.result - }) + this.http + .get("/api/services/app/Notification/GetUnreadNotification") + .subscribe((data: any) => { + console.log("获得所有未读消息", data); + this.unreadMessageList = data.result; + }); } - - //获得统计信息 HomeAggregatioData: any = { areaAgg: [], violationType: { - violationTypeAgg: [] + violationTypeAgg: [], }, ouViolationType: { - ouCorrectCount: '', - ouNotCorrectCount: '', - ouTotalCount: '' + ouCorrectCount: "", + ouNotCorrectCount: "", + ouTotalCount: "", }, dev: { - stationCount: '', - violationCount: '', - cameraCount: '' + stationCount: "", + violationCount: "", + cameraCount: "", }, - deviceViolationCount: '', - licenseViolationCount: '' - } - totalCount - isSpin: boolean = false - getHomeAggregation() { + deviceViolationCount: "", + licenseViolationCount: "", + }; + totalCount; + isSpin: boolean = false; - let organizationUnitId - if (this.router.url.indexOf('petrolStation') != -1) { - organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id + /** + * 获得统计图表数据 + */ + 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 + 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) - }) - + 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 + 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 + 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 + 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.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.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.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.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) + 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) { + 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 (xxx) { - this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) { + }); + 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 = ""; + if (dataIndex % 2 === 0) { + // 每隔三个x坐标显示一个 labelText = value; } - return `${labelText}` - } + return `${labelText}`; + }; } this.warningechartbar.setOption(this.warningechartbarOption); - //卸油两个图 - this.refreshEchartsData1(data) + this.oilDischargeEcharts(data); } - oilDischargeNum: any - refreshEchartsData1(data) { - this.oilDischargeNum = data.totalCount + //30天预警事件两个图 + eventWarningOfMonth() {} + + //卸油两个图 + oilDischargeNum: any; + oilDischargeEcharts(data) { + this.oilDischargeNum = data.totalCount; //饼图 - data.ouViolationType.ouViolationTypeAgg.forEach(element => { - element.name = element.key - element.value = element.count + 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.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.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) + 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) { + 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 (xxx) { - // console.log('xxxxxxxxxx') - this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) { + }); + 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 = ""; + if (dataIndex % 2 === 0) { + // 每隔三个x坐标显示一个 labelText = value; } - return `${labelText}` - } + return `${labelText}`; + }; } this.oilchartbar.setOption(this.oilchartbarOption); } - timer + 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'); + 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' + 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' + var top = listWrapper.style.top; + listWrapper.style.top = _subStr(top) - 1 + "px"; } } // 截取px前数值 function _subStr(str) { - var index = str.indexOf('px'); + var index = str.indexOf("px"); if (index > -1) { - return parseFloat(str.substr(0, index + 1)) + return parseFloat(str.substr(0, index + 1)); } } } @@ -730,161 +848,197 @@ export class HomePageComponent implements OnInit { mouseleave() { // console.log('离开了') if (!this.isOpenModel) { - this.rollStart() + this.rollStart(); } - } width(width: string, denominator: string) { - let style: any = {} - style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + '%'; - return style + let style: any = {}; + style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + "%"; + return style; } - - isOpenModel: boolean = false + 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 == '设备维保逾期报警' + 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) + 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)' + 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 + data: copydata, }, nzFooter: null, nzClosable: false, nzOnOk: async () => { if (instance.isScrap) { - await new Promise(resolve => { + await new Promise((resolve) => { let body = { id: copydata.violatedItemSnapshotObj.id, isScrapped: true, - organizationUnitId: copydata.violatedItemSnapshotObj.organizationUnitId, + 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 - }) - }) - }) - + 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 => { + 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 - }) - }) - }) + 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 + this.message.create("warning", "请填写完整！"); + return false; } } - } + }, }); const instance = modal.getContentComponent(); - - modal.afterClose.subscribe(result => { - this.isOpenModel = false - this.rollStart() + modal.afterClose.subscribe((result) => { + this.isOpenModel = false; + this.rollStart(); }); - this.readMess(item.notification.id) + this.readMess(item.notification.id); } else { - this.isOpenModel = true - item.notification.data.id = item.notification.entityId - let data = item.notification.data + 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, + nzWidth: + document.documentElement.clientHeight < 650 || + document.documentElement.clientWidth < 1400 + ? 1000 + : 1200, nzClosable: false, - nzClassName: 'modelnobg', + nzClassName: "modelnobg", nzBodyStyle: { - 'border-radius': '0px', - 'padding': '0px', + "border-radius": "0px", + padding: "0px", }, nzComponentParams: { - data: data + data: data, }, nzFooter: null, - nzOnOk: async () => { - - } + nzOnOk: async () => {}, }); const instance = modal.getContentComponent(); - modal.afterClose.subscribe(result => { - this.isOpenModel = false - this.rollStart() + modal.afterClose.subscribe((result) => { + this.isOpenModel = false; + this.rollStart(); }); - this.readMess(item.notification.id) + 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('标记已读成功') - }) + id: id, + }; + this.http + .post("/api/services/app/Notification/Read", body) + .subscribe((data: any) => { + console.log("标记已读成功"); + }); } ignore(index) { - this.unreadMessageList.splice(index, 1) + this.unreadMessageList.splice(index, 1); } }