diff --git a/proxy.config.json b/proxy.config.json index a91b89c..319b7a5 100644 --- a/proxy.config.json +++ b/proxy.config.json @@ -1,13 +1,13 @@ { "/api": { - "生产": "https://znaq.sinochemoilmarketing.com/", - "target": "http://121.36.37.70:8906/", + "target": "https://znaq.sinochemoilmarketing.com/", + "测试": "http://121.36.37.70:8906/", "secure": false, "changeOrigin": true }, "/signalr": { - "生产": "https://znaq.sinochemoilmarketing.com/", - "target": "http://121.36.37.70:8906/", + "target": "https://znaq.sinochemoilmarketing.com/", + "测试": "http://121.36.37.70:8906/", "secure": false, "ws": true, "logLevel": "debug" diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.html b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html index 66f4141..cbb3ee9 100644 --- a/src/app/pages/oil-unloading-process/oil-unloading-process.component.html +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html @@ -2,7 +2,7 @@
- 卸油全流程 + {{stationName}}卸油全流程
@@ -21,8 +21,7 @@ [ngClass]="{'selectedimg': !data[0].violateImage}"> - +
油罐车进场 @@ -35,8 +34,7 @@ [ngClass]="{'selectedimg': !data[1].violateImage}"> - + 设置隔离区域 @@ -62,8 +60,7 @@ [ngClass]="{'selectedimg': !data[2].violateImage}"> - + 连接静电接地 @@ -76,8 +73,7 @@ [ngClass]="{'selectedimg': !data[3].violateImage}"> - + 放置消防器材 @@ -141,62 +137,53 @@ 开始卸油 -->
- {{data[4].violateTime ? + {{data[4].violateTime ? (data[4].violateTime | date:"MM-dd HH:mm:ss") : '/'}}
- +
连接卸油管
- {{data[5].violateTime ? + {{data[5].violateTime ? (data[5].violateTime | date:"MM-dd HH:mm:ss") : '/'}}
- +
全程监卸
- {{data[6].violateTime ? + {{data[6].violateTime ? (data[6].violateTime | date:"MM-dd HH:mm:ss") : '/'}}
- +
拆除卸油管
- {{data[7].violateTime ? + {{data[7].violateTime ? (data[7].violateTime | date:"MM-dd HH:mm:ss") : '/'}}
- +
油罐车离场
diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss index 7eaba2c..308b97d 100644 --- a/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss @@ -32,7 +32,7 @@ justify-content: center; div { - width: 120px; + width: 500px; height: 32px; text-align: center; line-height: 32px; diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts b/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts index 57b3fb9..620f0b3 100644 --- a/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts @@ -1,41 +1,40 @@ -import { Component, OnInit, Input } from '@angular/core'; -import Viewer from 'viewerjs' -import { NzMessageService } from 'ng-zorro-antd/message'; +import { Component, OnInit, Input } from "@angular/core"; +import Viewer from "viewerjs"; +import { NzMessageService } from "ng-zorro-antd/message"; @Component({ - selector: 'app-oil-unloading-process', - templateUrl: './oil-unloading-process.component.html', - styleUrls: ['./oil-unloading-process.component.scss'] + selector: "app-oil-unloading-process", + templateUrl: "./oil-unloading-process.component.html", + styleUrls: ["./oil-unloading-process.component.scss"], }) export class OilUnloadingProcessComponent implements OnInit { - @Input() data: any - constructor(private message: NzMessageService) { } + @Input() stationName: any; + @Input() data: any; + constructor(private message: NzMessageService) {} ngOnInit(): void { // console.log(this.data) } lookImg(url) { if (url) { - console.log(url) - let dom = document.getElementById(`viewerjs`) + console.log(url); + let dom = document.getElementById(`viewerjs`); let pObjs = dom.childNodes; - let node = document.createElement("img") + let node = document.createElement("img"); node.style.display = "none"; node.src = url; - node.id = 'img' - dom.appendChild(node) + node.id = "img"; + dom.appendChild(node); setTimeout(() => { let viewer = new Viewer(document.getElementById(`viewerjs`), { hidden: () => { dom.removeChild(pObjs[0]); viewer.destroy(); - } + }, }); node.click(); }, 0); } else { - this.message.create('warning', `该节点没有图片`); + this.message.create("warning", `该节点没有图片`); } } - - } diff --git a/src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.ts b/src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.ts index b7b3fcf..c6bbdb8 100644 --- a/src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.ts +++ b/src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.ts @@ -1,28 +1,35 @@ -import { HttpClient } from '@angular/common/http'; -import { Component, OnInit, ViewContainerRef, ElementRef } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import * as echarts from 'echarts'; -import { NzModalService } from 'ng-zorro-antd/modal'; -import * as moment from 'moment'; -import { fromEvent } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; -import { Router } from '@angular/router'; -import { OilUnloadingProcessComponent } from '../../oil-unloading-process/oil-unloading-process.component'; -import { TreeService } from 'src/app/service/tree.service'; -import { NzMessageService } from 'ng-zorro-antd/message'; +import { HttpClient } from "@angular/common/http"; +import { Component, OnInit, ViewContainerRef, ElementRef } from "@angular/core"; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import * as echarts from "echarts"; +import { NzModalService } from "ng-zorro-antd/modal"; +import * as moment from "moment"; +import { fromEvent } from "rxjs"; +import { debounceTime } from "rxjs/operators"; +import { Router } from "@angular/router"; +import { OilUnloadingProcessComponent } from "../../oil-unloading-process/oil-unloading-process.component"; +import { TreeService } from "src/app/service/tree.service"; +import { NzMessageService } from "ng-zorro-antd/message"; @Component({ - selector: 'app-oil-unloading-process-list', - templateUrl: './oil-unloading-process-list.component.html', - styleUrls: ['./oil-unloading-process-list.component.scss'] + selector: "app-oil-unloading-process-list", + templateUrl: "./oil-unloading-process-list.component.html", + styleUrls: ["./oil-unloading-process-list.component.scss"], }) export class OilUnloadingProcessListComponent implements OnInit { - validateForm!: FormGroup; - constructor(private toTree: TreeService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private message: NzMessageService) { } - - myChart: any //左侧饼图 - mybarChart: any //柱状图 - + constructor( + private toTree: TreeService, + private http: HttpClient, + private fb: FormBuilder, + private router: Router, + private modal: NzModalService, + private viewContainerRef: ViewContainerRef, + private element: ElementRef, + private message: NzMessageService + ) {} + + myChart: any; //左侧饼图 + mybarChart: any; //柱状图 getThirtyDays() { //获取当前日期 @@ -30,282 +37,330 @@ export class OilUnloadingProcessListComponent implements OnInit { var nowY = myDate.getFullYear(); var nowM = myDate.getMonth() + 1; var nowD = myDate.getDate(); - var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期 + var enddateStr = + nowY + + "-" + + (nowM < 10 ? "0" + nowM : nowM) + + "-" + + (nowD < 10 ? "0" + nowD : nowD); //当前日期 var enddate = new Date(enddateStr); - //获取三十天前日期 - var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思 + var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思 var lastY = lw.getFullYear(); var lastM = lw.getMonth() + 1; var lastD = lw.getDate(); - var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期 + var startdateStr = + lastY + + "-" + + (lastM < 10 ? "0" + lastM : lastM) + + "-" + + (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期 var startDate = new Date(startdateStr); - const dateList = [] + const dateList = []; while (true) { - startDate.setDate(startDate.getDate() + 1) + startDate.setDate(startDate.getDate() + 1); if (startDate.getTime() <= enddate.getTime()) { if (startDate.getDate() < 10) { // startDate.getFullYear() 获取年，此处没加上年份 - dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate()) + dateList.push(startDate.getMonth() + 1 + ".0" + startDate.getDate()); } else { - dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate()) + dateList.push(startDate.getMonth() + 1 + "." + startDate.getDate()); } } else { - break + break; } } return dateList; } - isEcharts: boolean = true + isEcharts: boolean = true; isEchartsShow() { - this.isEcharts = !this.isEcharts + this.isEcharts = !this.isEcharts; setTimeout(() => { - let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight - this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px' + let tableHeader = + this.element.nativeElement.querySelector( + `.ant-table-header` + ).clientHeight; + this.tableScrollHeight = + document.getElementById("tablebox").clientHeight - + tableHeader - + 10 + + "px"; }, 0); } - startdate - enddate + startdate; + enddate; - isOrShow: boolean + isOrShow: boolean; - isMisinformation: boolean = false//误报按钮的显隐 + isMisinformation: boolean = false; //误报按钮的显隐 - button = false - tableScrollHeight - resizeListener + button = false; + tableScrollHeight; + resizeListener; ngOnInit(): void { - this.tableScrollHeight = '100px' + this.tableScrollHeight = "100px"; // 页面监听 - this.resizeListener = fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => { - let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight - this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px' - }); - let loginUserInfo - if (sessionStorage.getItem('isGasStation') == 'true') { - loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation')) - this.returnLastMenus(true) + this.resizeListener = fromEvent(window, "resize") + .pipe(debounceTime(100)) + .subscribe((event) => { + let tableHeader = + this.element.nativeElement.querySelector( + `.ant-table-header` + ).clientHeight; + this.tableScrollHeight = + document.getElementById("tablebox").clientHeight - + tableHeader - + 10 + + "px"; + }); + let loginUserInfo; + if (sessionStorage.getItem("isGasStation") == "true") { + loginUserInfo = JSON.parse( + sessionStorage.getItem("userdataOfgasstation") + ); + this.returnLastMenus(true); } else { - loginUserInfo = JSON.parse(sessionStorage.getItem('userdata')) - this.returnLastMenus(false) + loginUserInfo = JSON.parse(sessionStorage.getItem("userdata")); + this.returnLastMenus(false); } - if (loginUserInfo.roles.find((item) => { - return item.name == 'ViolationPositiveCensorer' - })) { - this.isMisinformation = true + if ( + loginUserInfo.roles.find((item) => { + return item.name == "ViolationPositiveCensorer"; + }) + ) { + this.isMisinformation = true; } else { - this.isMisinformation = false + this.isMisinformation = false; } //当前日期 let myDate: any = new Date(); let nowY = myDate.getFullYear(); let nowM = myDate.getMonth() + 1; let nowD = myDate.getDate(); - this.enddate = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期 + this.enddate = + nowY + + "-" + + (nowM < 10 ? "0" + nowM : nowM) + + "-" + + (nowD < 10 ? "0" + nowD : nowD); //当前日期 //获取三十天前日期 - let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 29);//最后一个数字30可改，30天的意思 + let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 29); //最后一个数字30可改，30天的意思 let lastY = lw.getFullYear(); let lastM = lw.getMonth() + 1; let lastD = lw.getDate(); - this.startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期 + this.startdate = + lastY + + "-" + + (lastM < 10 ? "0" + lastM : lastM) + + "-" + + (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期 this.validateForm = this.fb.group({ state: [null], organization: [null], - datePicker: [[this.startdate, this.enddate]] + datePicker: [[this.startdate, this.enddate]], }); setTimeout(() => { // 饼图 - this.myChart = echarts.init(document.getElementById('piechart')); + this.myChart = echarts.init(document.getElementById("piechart")); //柱状折线图 - this.mybarChart = echarts.init(document.getElementById('barchart')); + this.mybarChart = echarts.init(document.getElementById("barchart")); }, 0); - - - this.tableSpin = true - this.getAllOrganization() - this.getAggregations() - if (this.router.url.indexOf('petrolStation') != -1) { - this.isOrShow = false + this.tableSpin = true; + this.getAllOrganization(); + this.getAggregations(); + if (this.router.url.indexOf("petrolStation") != -1) { + this.isOrShow = false; } else { - this.isOrShow = true + this.isOrShow = true; } } ngOnDestroy(): void { - this.resizeListener.unsubscribe() + this.resizeListener.unsubscribe(); } returnLastMenus(e) { - let userMenu + let userMenu; if (e) { - userMenu = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).menus - + userMenu = JSON.parse( + sessionStorage.getItem("userdataOfgasstation") + ).menus; } else { - userMenu = JSON.parse(sessionStorage.getItem('userdata')).menus + userMenu = JSON.parse(sessionStorage.getItem("userdata")).menus; } for (let index = 0; index < userMenu.length; index++) { for (let k = 0; k < userMenu.length; k++) { if (userMenu[index].name == "卸油统计") { if (userMenu[index].id == userMenu[k].parentId) { - this.button = true + this.button = true; } } - } } } //刷新饼图图表数据 - num - echartsData: any + num; + echartsData: any; //一级饼图 oilchartpieOption = { - color: ['#FF4B65', '#36A2FF'], + color: ["#FF4B65", "#36A2FF"], tooltip: { - trigger: 'item'//触发类型 + trigger: "item", //触发类型 }, legend: { - bottom: '12%', - left: 'center', + bottom: "12%", + left: "center", itemGap: 40, itemWidth: 8, itemHeight: 8, formatter: (name) => { - let data = this.oilchartpieOptionPieData1 - let value + let data = this.oilchartpieOptionPieData1; + let value; for (var i = 0, l = data.length; i < l; i++) { if (data[i].name == name) { value = data[i].value; } } - return '{a|' + name + '}' + '{b|' + value + '}'; + return "{a|" + name + "}" + "{b|" + value + "}"; }, textStyle: { - color: '#fff', + color: "#fff", rich: { a: { - width: 80 - } - } - } + width: 80, + }, + }, + }, }, series: [ { - type: 'pie', - radius: ['50%', '60%'], - bottom: '10%', - avoidLabelOverlap: false,//防止标签重叠策略 - label: {//每一个标签外网延伸的引导说明 + type: "pie", + radius: ["50%", "60%"], + bottom: "10%", + avoidLabelOverlap: false, //防止标签重叠策略 + label: { + //每一个标签外网延伸的引导说明 show: false, - position: 'outside' + position: "outside", }, 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, + }, + }, + }, + ], }; - oilchartpieOptionPieData1: any + oilchartpieOptionPieData1: any; //一级柱状图 oilchartbarOption = { xAxis: { - type: 'category', + type: "category", data: [], axisLine: { show: false, lineStyle: { - color: '#91CCFF' - } + color: "#91CCFF", + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, - inverse: true + 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", label: { - show: true + show: true, }, 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: { - show: true + show: true, }, itemStyle: { - color: '#fff', - shadowColor: '#fff', - shadowBlur: 10 + color: "#fff", + shadowColor: "#fff", + shadowBlur: 10, }, lineStyle: { - color: '#FFCC8A', - width: 1 - } - } + color: "#FFCC8A", + width: 1, + }, + }, ], legend: { selectedMode: false, // 是否允许点击 - data: ['卸油车次', '卸油预警'], + data: ["卸油车次", "卸油预警"], textStyle: { - color: '#fff' + color: "#fff", }, right: 28, top: 18, @@ -313,114 +368,119 @@ export class OilUnloadingProcessListComponent implements OnInit { itemHeight: 8, }, grid: { - left: '42px', - right: '30px', - bottom: '38px', - top: '80px' - } + left: "42px", + right: "30px", + bottom: "38px", + top: "80px", + }, }; //二级饼图 oilchartpieOption2 = { - color: ['#36A2FF', '#FFBD4B', '#46DFFF'], + color: ["#36A2FF", "#FFBD4B", "#46DFFF"], tooltip: { - trigger: 'item'//触发类型 + trigger: "item", //触发类型 }, legend: { - bottom: '8%', - left: 'center', + bottom: "8%", + left: "center", itemGap: 10, itemWidth: 8, itemHeight: 8, formatter: (name) => { - let data = this.oilchartpieOptionPieData2 - let value + let data = this.oilchartpieOptionPieData2; + let value; for (var i = 0, l = data.length; i < l; i++) { if (data[i].name == name) { value = data[i].value; } } - return '{a|' + name + '}' + '{b|' + value + '}'; + return "{a|" + name + "}" + "{b|" + value + "}"; }, textStyle: { - color: '#fff', + color: "#fff", rich: { a: { - width: 60 - } - } - } + width: 60, + }, + }, + }, }, series: [ { - type: 'pie', - radius: ['50%', '60%'], - bottom: '10%', - avoidLabelOverlap: false,//防止标签重叠策略 - label: {//每二个标签外网延伸的引导说明 + type: "pie", + radius: ["50%", "60%"], + bottom: "10%", + avoidLabelOverlap: false, //防止标签重叠策略 + label: { + //每二个标签外网延伸的引导说明 show: false, - position: 'outside' + position: "outside", }, 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, + }, + }, + }, + ], }; - oilchartpieOptionPieData2: any + oilchartpieOptionPieData2: any; //二级柱状图 oilchartbarOption2 = { tooltip: { // trigger: 'axis' }, xAxis: { - type: 'category', + type: "category", data: [], axisLine: { show: false, lineStyle: { - color: '#91CCFF' - } + color: "#91CCFF", + }, }, - axisTick: {//刻度线 - show: false + axisTick: { + //刻度线 + show: false, }, - inverse: true - + 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", + }, + }, }, legend: { selectedMode: false, // 是否允许点击 - data: ['卸油准备', '卸油操作'], + data: ["卸油准备", "卸油操作"], textStyle: { - color: '#fff' + color: "#fff", }, right: 18, top: 18, @@ -429,52 +489,62 @@ export class OilUnloadingProcessListComponent implements OnInit { }, series: [ { - name: '', + name: "", data: [], - type: 'bar', + type: "bar", label: { - show: true + show: true, }, itemStyle: { color: { - type: 'linear', + type: "linear", x: 0, y: 0, x2: 0, y2: 1, - colorStops: [{ - offset: 0, color: 'rgba(54, 162, 255, 1)' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(54, 162, 255, 0.1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } + colorStops: [ + { + offset: 0, + color: "rgba(54, 162, 255, 1)", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(54, 162, 255, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, }, - barWidth: '25%' + barWidth: "25%", }, { - name: '', + name: "", data: [], - type: 'bar', + type: "bar", label: { - show: true + show: true, }, itemStyle: { color: { - type: 'linear', + type: "linear", x: 0, y: 0, x2: 0, y2: 1, - colorStops: [{ - offset: 0, color: 'rgba(255, 189, 75, 1)' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(255, 189, 75, 0.1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } + colorStops: [ + { + offset: 0, + color: "rgba(255, 189, 75, 1)", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(255, 189, 75, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, }, - barWidth: '25%' + barWidth: "25%", }, // { // name: '', @@ -499,226 +569,259 @@ export class OilUnloadingProcessListComponent implements OnInit { // } ], grid: { - left: '42px', - right: '30px', - bottom: '38px', - top: '80px' - } + left: "42px", + right: "30px", + bottom: "38px", + top: "80px", + }, }; - isgoback: boolean = false + isgoback: boolean = false; refreshEchartsData1(data) { - this.num = data.totalCount + this.num = data.totalCount; //饼图 this.oilchartpieOptionPieData1 = [ - { name: '预警车次', value: data.notCorrectCount }, - { name: '合规车次', value: data.correctCount }, - ] - this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 + { name: "预警车次", value: data.notCorrectCount }, + { name: "合规车次", value: data.correctCount }, + ]; + this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1; this.myChart.setOption(this.oilchartpieOption); - this.myChart.off('legendselectchanged') - this.myChart.off('click') - this.myChart.on('legendselectchanged', (params) => { + this.myChart.off("legendselectchanged"); + this.myChart.off("click"); + this.myChart.on("legendselectchanged", (params) => { this.myChart.setOption({ - legend: { selected: { [params.name]: true } } - }) - if (params.name == '预警车次') { - this.isgoback = true - this.refreshEchartsData2(this.echartsData) + legend: { selected: { [params.name]: true } }, + }); + if (params.name == "预警车次") { + this.isgoback = true; + this.refreshEchartsData2(this.echartsData); this.validateForm.patchValue({ - state: '0' + state: "0", }); - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } }); - this.myChart.on('click', (params) => { - if (params.name == '预警车次') { - this.isgoback = true - this.refreshEchartsData2(this.echartsData) + this.myChart.on("click", (params) => { + if (params.name == "预警车次") { + this.isgoback = true; + this.refreshEchartsData2(this.echartsData); this.validateForm.patchValue({ - state: '0' + state: "0", }); - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } }); //柱状图 - let monthArr = [] - let valuedata = [] - let valuedata2 = [] - data.list.forEach(element => { - monthArr.push(moment(element.key).format('MM.DD')) - valuedata.push(element.totalCount) - let item = Number(element.proccessBeforeCount + element.proccessingCount) - valuedata2.push(item) + let monthArr = []; + let valuedata = []; + let valuedata2 = []; + data.list.forEach((element) => { + monthArr.push(moment(element.key).format("MM.DD")); + valuedata.push(element.totalCount); + let item = Number(element.proccessBeforeCount + element.proccessingCount); + valuedata2.push(item); }); // console.log('卸油预警',valuedata2) - this.oilchartbarOption.xAxis.data = monthArr - this.oilchartbarOption.series[0].data = valuedata - this.oilchartbarOption.series[1].data = valuedata2 + this.oilchartbarOption.xAxis.data = monthArr; + this.oilchartbarOption.series[0].data = valuedata; + this.oilchartbarOption.series[1].data = valuedata2; this.mybarChart.setOption(this.oilchartbarOption); } refreshEchartsData2(data) { - this.num = Number(data.proccessBeforeCount + data.proccessingCount) + this.num = Number(data.proccessBeforeCount + data.proccessingCount); //饼图 this.oilchartpieOptionPieData2 = [ - { name: '卸油准备', value: data.proccessBeforeCount }, - { name: '卸油操作', value: data.proccessingCount }, + { name: "卸油准备", value: data.proccessBeforeCount }, + { name: "卸油操作", value: data.proccessingCount }, // { name: '全程检测', value: data.allProccessCount } - ] - this.oilchartpieOption2.series[0].data = this.oilchartpieOptionPieData2 + ]; + this.oilchartpieOption2.series[0].data = this.oilchartpieOptionPieData2; this.myChart.setOption(this.oilchartpieOption2); //柱状图 - let monthArr = [] - let valuedataBefore = [] - let valuedataIng = [] - let valuedataAll = [] - data.list.forEach(element => { - monthArr.push(moment(element.key).format('MM.DD')) - valuedataBefore.push(element.proccessBeforeCount) - valuedataIng.push(element.proccessingCount) + let monthArr = []; + let valuedataBefore = []; + let valuedataIng = []; + let valuedataAll = []; + data.list.forEach((element) => { + monthArr.push(moment(element.key).format("MM.DD")); + valuedataBefore.push(element.proccessBeforeCount); + valuedataIng.push(element.proccessingCount); // valuedataAll.push(element.allProccessCount) }); - this.oilchartbarOption2.xAxis.data = monthArr - this.oilchartbarOption2.series[0].name = '卸油准备' - this.oilchartbarOption2.series[0].data = valuedataBefore - this.oilchartbarOption2.series[1].name = '卸油操作' - this.oilchartbarOption2.series[1].data = valuedataIng + this.oilchartbarOption2.xAxis.data = monthArr; + this.oilchartbarOption2.series[0].name = "卸油准备"; + this.oilchartbarOption2.series[0].data = valuedataBefore; + this.oilchartbarOption2.series[1].name = "卸油操作"; + this.oilchartbarOption2.series[1].data = valuedataIng; // this.oilchartbarOption2.series[2].name = '全程监测' // this.oilchartbarOption2.series[2].data = valuedataAll this.mybarChart.setOption(this.oilchartbarOption2); } goback() { - this.isgoback = false + this.isgoback = false; this.myChart.clear(); this.mybarChart.clear(); - this.refreshEchartsData1(this.echartsData) + this.refreshEchartsData1(this.echartsData); this.validateForm.patchValue({ - state: null + state: null, }); - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } stateChange($event) { if (!$event) { - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } } - - defaultOrId: string + defaultOrId: string; //获取所有组织机构 - nodes: any = [] + nodes: any = []; getAllOrganization() { - let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id + let OrganizationUnitId = + sessionStorage.getItem("isGasStation") == "true" + ? JSON.parse(sessionStorage.getItem("userdataOfgasstation")) + .organization.id + : JSON.parse(sessionStorage.getItem("userdata")).organization.id; let params = { OrganizationUnitId: OrganizationUnitId, - IsContainsChildren: "true" - } - this.http.get('/api/services/app/Organization/GetAll', { - params: params - }).subscribe((data: any) => { - data.result.items.forEach(element => { - if (element.id == OrganizationUnitId) { - element.parentId = null - } - element.key = element.id - element.title = element.displayName - }); - this.nodes = [...this.toTree.toTree(data.result.items)] - this.defaultOrId = JSON.parse(sessionStorage.getItem('userdata')).organization.id - this.validateForm.value.organization = JSON.parse(sessionStorage.getItem('userdata')).organization.id - this.validateForm.patchValue({ - datePicker: [this.startdate, this.enddate] + IsContainsChildren: "true", + }; + this.http + .get("/api/services/app/Organization/GetAll", { + params: params, + }) + .subscribe((data: any) => { + data.result.items.forEach((element) => { + if (element.id == OrganizationUnitId) { + element.parentId = null; + } + element.key = element.id; + element.title = element.displayName; + }); + this.nodes = [...this.toTree.toTree(data.result.items)]; + this.defaultOrId = JSON.parse( + sessionStorage.getItem("userdata") + ).organization.id; + this.validateForm.value.organization = JSON.parse( + sessionStorage.getItem("userdata") + ).organization.id; + this.validateForm.patchValue({ + datePicker: [this.startdate, this.enddate], + }); + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); }); - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() - }) } //获取统计信息 - chartsSpin: boolean = false + chartsSpin: boolean = false; getAggregations() { - this.chartsSpin = true - let organizationUnitId - if (this.router.url.indexOf('petrolStation') != -1) { - organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id + this.chartsSpin = true; + 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 params: any = { OrganizationUnitId: organizationUnitId, - IsContainsChildren: 'true' - } - this.http.get('/api/services/app/OilUnloadingProcess/GetAllCountByDays', { params: params }).subscribe((data: any) => { - console.log('统计信息', data) - this.chartsSpin = false - this.echartsData = data.result - this.refreshEchartsData1(this.echartsData) - // this.refreshBarLineData(this.echartsData) - }) + IsContainsChildren: "true", + }; + this.http + .get("/api/services/app/OilUnloadingProcess/GetAllCountByDays", { + params: params, + }) + .subscribe((data: any) => { + console.log("统计信息", data); + this.chartsSpin = false; + this.echartsData = data.result; + this.refreshEchartsData1(this.echartsData); + // this.refreshBarLineData(this.echartsData) + }); } //获得卸油记录列表 - SkipCount: string = '0' - MaxResultCount: string = '50' - list: any = [] - totalCount: string - tableSpin: boolean = false - isLoading = false + SkipCount: string = "0"; + MaxResultCount: string = "50"; + list: any = []; + totalCount: string; + tableSpin: boolean = false; + isLoading = false; getViolateRecordList() { - this.isLoading = true - this.tableSpin = true - let organizationUnitId - if (this.router.url.indexOf('petrolStation') != -1) { - organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id + this.isLoading = true; + this.tableSpin = true; + let organizationUnitId; + if (this.router.url.indexOf("petrolStation") != -1) { + organizationUnitId = JSON.parse( + sessionStorage.getItem("userdataOfgasstation") + ).organization.id; } else { - organizationUnitId = this.validateForm.value.organization + organizationUnitId = this.validateForm.value.organization; } - let IsCorrect = null + let IsCorrect = null; if (this.validateForm.value.state) { - this.validateForm.value.state == '0' ? IsCorrect = 'false' : IsCorrect = 'true' + this.validateForm.value.state == "0" + ? (IsCorrect = "false") + : (IsCorrect = "true"); } let params = { IsCorrect: IsCorrect, - StartTime: moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD') + ' 00:00:00', - EndTime: moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD') + ' 23:59:59', - IsContainsChildren: 'true', + StartTime: + moment(this.validateForm.value.datePicker[0]).format("yyyy-MM-DD") + + " 00:00:00", + EndTime: + moment(this.validateForm.value.datePicker[1]).format("yyyy-MM-DD") + + " 23:59:59", + IsContainsChildren: "true", OrganizationUnitId: organizationUnitId, SkipCount: this.SkipCount, - MaxResultCount: this.MaxResultCount - } - this.http.get('/api/services/app/OilUnloadingProcess/GetAll', { - params: params - }).subscribe((data: any) => { - this.tableSpin = false - this.list = this.list.concat(data.result.items); - this.list = [...this.list] - this.totalCount = data.result.totalCount - this.isLoading = false - console.log('获取卸油流程列表', data.result.items) - setTimeout(() => { - let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight - this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px' - }, 0); - }) + MaxResultCount: this.MaxResultCount, + }; + this.http + .get("/api/services/app/OilUnloadingProcess/GetAll", { + params: params, + }) + .subscribe((data: any) => { + this.tableSpin = false; + this.list = this.list.concat(data.result.items); + this.list = [...this.list]; + this.totalCount = data.result.totalCount; + this.isLoading = false; + console.log("获取卸油流程列表", data.result.items); + setTimeout(() => { + let tableHeader = + this.element.nativeElement.querySelector( + `.ant-table-header` + ).clientHeight; + this.tableScrollHeight = + document.getElementById("tablebox").clientHeight - + tableHeader - + 10 + + "px"; + }, 0); + }); } submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } - this.totalCount = null - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.totalCount = null; + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } resetForm(e: MouseEvent): void { e.preventDefault(); @@ -727,43 +830,82 @@ export class OilUnloadingProcessListComponent implements OnInit { this.validateForm.controls[key].markAsPristine(); this.validateForm.controls[key].updateValueAndValidity(); } - console.log(JSON.parse(sessionStorage.getItem('userdata')).organization.id) + console.log(JSON.parse(sessionStorage.getItem("userdata")).organization.id); // this.validateForm.value.organization = JSON.parse(sessionStorage.getItem('userdata')).organization.id this.validateForm.patchValue({ - organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id, - datePicker: [this.startdate, this.enddate] + organization: JSON.parse(sessionStorage.getItem("userdata")).organization + .id, + datePicker: [this.startdate, this.enddate], }); - this.totalCount = null - this.list = [] - this.SkipCount = '0' - this.getViolateRecordList() + this.totalCount = null; + this.list = []; + this.SkipCount = "0"; + this.getViolateRecordList(); } ngAfterViewInit(): void { - fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件 - if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) { - if (this.totalCount > this.list.length) { - console.log('需要加载数据了', event) - this.SkipCount = String(Number(this.SkipCount) + 50) - this.getViolateRecordList() + fromEvent( + this.element.nativeElement.querySelector( + `.ant-table-body` + ) as HTMLCanvasElement, + "scroll" + ) + .pipe(debounceTime(100)) + .subscribe(async (event: any) => { + //监听 DOM 滚动事件 + if ( + event.target.scrollHeight - + (event.target.scrollTop + event.target.clientHeight) <= + 10 + ) { + if (this.totalCount > this.list.length) { + console.log("需要加载数据了", event); + this.SkipCount = String(Number(this.SkipCount) + 50); + this.getViolateRecordList(); + } } - } - }); + }); } look(item) { + console.log(item); + let arr = []; + let arr1 = item.oilUnloadingNodes.find((item) => { + return item.nodeName == "车辆进场" || item.nodeName == "油罐车进场"; + }); + let arr2 = item.oilUnloadingNodes.find((item) => { + return ( + item.nodeName == "设置卸油隔离区" || item.nodeName == "设置隔离区域" + ); + }); + let arr3 = item.oilUnloadingNodes.find((item) => { + return ( + item.nodeName == "卸油连接静电接地" || item.nodeName == "连接静电接地" + ); + }); + let arr4 = item.oilUnloadingNodes.find((item) => { + return ( + item.nodeName == "卸油设置消防器材" || item.nodeName == "放置消防器材" + ); + }); + let arr5 = item.oilUnloadingNodes.find((item) => { + return item.nodeName == "连接卸油管"; + }); + let arr6 = item.oilUnloadingNodes.find((item) => { + return item.nodeName == "卸油中无人监卸" || item.nodeName == "全程监卸"; + }); + let arr7 = item.oilUnloadingNodes.find((item) => { + return item.nodeName == "拆除卸油管"; + }); + let arr8 = item.oilUnloadingNodes.find((item) => { + return ( + item.nodeName == "车辆离场" || + item.nodeName == "车辆离厂" || + item.nodeName == "车辆出厂" || + item.nodeName == "油罐车离场" + ); + }); - console.log(item) - let arr = [] - let arr1 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '车辆进场' || item.nodeName == '油罐车进场' }); - let arr2 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '设置卸油隔离区' || item.nodeName == '设置隔离区域' }); - let arr3 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '卸油连接静电接地' || item.nodeName == '连接静电接地' }); - let arr4 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '卸油设置消防器材' || item.nodeName == '放置消防器材' }); - let arr5 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '连接卸油管' }); - let arr6 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '卸油中无人监卸' || item.nodeName == '全程监卸' }); - let arr7 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '拆除卸油管' }); - let arr8 = item.oilUnloadingNodes.find((item) => { return item.nodeName == '车辆离场' || item.nodeName == '车辆离厂' || item.nodeName == '车辆出厂' || item.nodeName == '油罐车离场' }); - - arr = [arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8] - console.log('卸油流程', arr) + arr = [arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8]; + console.log("卸油流程", arr); const modal = this.modal.create({ nzContent: OilUnloadingProcessComponent, @@ -771,82 +913,97 @@ export class OilUnloadingProcessListComponent implements OnInit { nzWidth: 1000, nzKeyboard: false, nzBodyStyle: { - 'border': '1px solid #6d9cc7', - 'border-radius': '0px', - 'padding': '0px', - 'box-shadow': '0 0 8px 0 #fff', - 'background': '#000D21', + border: "1px solid #6d9cc7", + "border-radius": "0px", + padding: "0px", + "box-shadow": "0 0 8px 0 #fff", + background: "#000D21", }, nzComponentParams: { - data: arr + data: arr, + stationName: item.gasStation.stationName, }, nzFooter: null, - nzOnOk: async () => { - - } + nzOnOk: async () => {}, }); const instance = modal.getContentComponent(); - } gorecordList() { - if (this.router.url.indexOf('petrolStation') != -1) { - this.router.navigate(['/records/petrolStation']) + if (this.router.url.indexOf("petrolStation") != -1) { + this.router.navigate(["/records/petrolStation"]); } else { - this.router.navigate(['/records']) + this.router.navigate(["/records"]); } } goWarningList() { - if (this.router.url.indexOf('petrolStation') != -1) { - this.router.navigate(['/records/petrolStation/warningstatisticslist']) + if (this.router.url.indexOf("petrolStation") != -1) { + this.router.navigate(["/records/petrolStation/warningstatisticslist"]); } else { - this.router.navigate(['/records/warningstatisticslist']) + this.router.navigate(["/records/warningstatisticslist"]); } } goMisinformationList() { - if (this.router.url.indexOf('petrolStation') != -1) { - this.router.navigate(['records/petrolStation/misinformationList']) + if (this.router.url.indexOf("petrolStation") != -1) { + this.router.navigate(["records/petrolStation/misinformationList"]); } else { - this.router.navigate(['records/misinformationList']) + this.router.navigate(["records/misinformationList"]); } } exportExcel() { - let organizationUnitId - if (this.router.url.indexOf('petrolStation') != -1) { - organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id + let organizationUnitId; + if (this.router.url.indexOf("petrolStation") != -1) { + organizationUnitId = JSON.parse( + sessionStorage.getItem("userdataOfgasstation") + ).organization.id; } else { - organizationUnitId = this.validateForm.value.organization + organizationUnitId = this.validateForm.value.organization; } - let IsCorrect = null + let IsCorrect = null; if (this.validateForm.value.state) { - this.validateForm.value.state == '0' ? IsCorrect = 'false' : IsCorrect = 'true' + this.validateForm.value.state == "0" + ? (IsCorrect = "false") + : (IsCorrect = "true"); } const httpOptions = { - responseType: 'blob' as 'json', + responseType: "blob" as "json", }; let body = { IsCorrect: IsCorrect, - StartTime: moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD') + ' 00:00:00', - EndTime: moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD') + ' 23:59:59', - IsContainsChildren: 'true', - OrganizationUnitId: organizationUnitId - } - this.http.post(`/api/services/app/OilUnloadingProcess/ExportExcel`, body, httpOptions).subscribe((data: any) => { - // console.log('导出成功') - // 文件名中有中文 则对文件名进行转码 - const link = document.createElement('a'); - const blob = new Blob([data], { type: 'application/vnd.ms-excel' }); - link.setAttribute('href', window.URL.createObjectURL(blob)); - link.setAttribute('download', '卸油记录' + '.xls'); - link.style.visibility = 'hidden'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - this.message.create('success', `导出成功`); - }, err => { - this.message.create('error', `导出失败`); - }) + StartTime: + moment(this.validateForm.value.datePicker[0]).format("yyyy-MM-DD") + + " 00:00:00", + EndTime: + moment(this.validateForm.value.datePicker[1]).format("yyyy-MM-DD") + + " 23:59:59", + IsContainsChildren: "true", + OrganizationUnitId: organizationUnitId, + }; + this.http + .post( + `/api/services/app/OilUnloadingProcess/ExportExcel`, + body, + httpOptions + ) + .subscribe( + (data: any) => { + // console.log('导出成功') + // 文件名中有中文 则对文件名进行转码 + const link = document.createElement("a"); + const blob = new Blob([data], { type: "application/vnd.ms-excel" }); + link.setAttribute("href", window.URL.createObjectURL(blob)); + link.setAttribute("download", "卸油记录" + ".xls"); + link.style.visibility = "hidden"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + this.message.create("success", `导出成功`); + }, + (err) => { + this.message.create("error", `导出失败`); + } + ); } }