|
|
|
@ -4,12 +4,14 @@ |
|
|
|
* @Author: sueRimn |
|
|
|
* @Author: sueRimn |
|
|
|
* @Date: 2020-09-02 16:21:18 |
|
|
|
* @Date: 2020-09-02 16:21:18 |
|
|
|
* @LastEditors: sueRimn |
|
|
|
* @LastEditors: sueRimn |
|
|
|
* @LastEditTime: 2020-09-04 16:58:01 |
|
|
|
* @LastEditTime: 2020-09-05 15:09:27 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
import { Component, OnInit, ViewChild } from '@angular/core'; |
|
|
|
import { Router } from '@angular/router'; |
|
|
|
import { Router } from '@angular/router'; |
|
|
|
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; |
|
|
|
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; |
|
|
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
|
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
|
|
|
|
|
|
import { DateAdapter } from '@angular/material/core'; |
|
|
|
|
|
|
|
import {EchartsDataService} from '../../echarts-data.service' |
|
|
|
declare var echarts: any; |
|
|
|
declare var echarts: any; |
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
@Component({ |
|
|
|
@ -19,16 +21,21 @@ declare var echarts: any; |
|
|
|
}) |
|
|
|
}) |
|
|
|
export class DeleteTwoComponent implements OnInit { |
|
|
|
export class DeleteTwoComponent implements OnInit { |
|
|
|
options:any; |
|
|
|
options:any; |
|
|
|
datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月']; |
|
|
|
datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月']; |
|
|
|
datayuey=[210, 160, 150, 140, 130, 120, 110,120]; |
|
|
|
datayuey=[210, 160, 150, 140, 130, 120, 110,120,150]; |
|
|
|
datanianx=[2019,2020,2021]; |
|
|
|
datanianx=[2019,2020]; |
|
|
|
dataniany=[201,174] |
|
|
|
dataniany=[201,174] |
|
|
|
|
|
|
|
|
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar) { } |
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } |
|
|
|
|
|
|
|
/* @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 |
|
|
|
|
|
|
|
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
ngOnInit(): void { |
|
|
|
|
|
|
|
this.dateInit() |
|
|
|
window.setTimeout(()=>{ |
|
|
|
window.setTimeout(()=>{ |
|
|
|
this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey) |
|
|
|
console.log(this.selectType) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
|
@ -37,15 +44,48 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
|
|
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* else if(this.selectType=='year'){ |
|
|
|
|
|
|
|
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany) |
|
|
|
|
|
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) |
|
|
|
|
|
|
|
} */ |
|
|
|
|
|
|
|
|
|
|
|
},0) |
|
|
|
},0) |
|
|
|
} |
|
|
|
} |
|
|
|
/* 按月点击事件 */ |
|
|
|
ngOnDestroy():void{ |
|
|
|
anyue(){ |
|
|
|
this.headZx.clear() |
|
|
|
var anyue1 = document.getElementById('yue1'); |
|
|
|
this.headZx.dispose() |
|
|
|
anyue1.style.display='block'; |
|
|
|
} |
|
|
|
var anyue2 = document.getElementById('yue2'); |
|
|
|
|
|
|
|
anyue2.style.display='block'; |
|
|
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年
|
|
|
|
this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey) |
|
|
|
headZx//echarts实例
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查询数据
|
|
|
|
|
|
|
|
years:any = [] |
|
|
|
|
|
|
|
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//日期初始化
|
|
|
|
|
|
|
|
dateInit () { |
|
|
|
|
|
|
|
let date = (new Date()).getFullYear() |
|
|
|
|
|
|
|
for (let i=date; i>=date-10;i--) { |
|
|
|
|
|
|
|
this.years.unshift(i) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
|
|
|
|
|
|
|
selectTwoYear:any = (new Date()).getFullYear() //结束年份
|
|
|
|
|
|
|
|
selectStartMonth:any = 1 //开始月份
|
|
|
|
|
|
|
|
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
|
|
|
|
|
|
|
|
//按月查询
|
|
|
|
|
|
|
|
monthSubmit (e) { |
|
|
|
|
|
|
|
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
|
@ -54,14 +94,39 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
|
|
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
|
|
|
|
|
|
|
|
if (e.selectTwoYear > e.selectOneYear) { |
|
|
|
|
|
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
|
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
|
|
|
console.log(startTime) |
|
|
|
|
|
|
|
console.log(endTime) |
|
|
|
|
|
|
|
} else if (e.selectTwoYear === e.selectOneYear) { |
|
|
|
|
|
|
|
if(e.selectEndMonth >= e.selectStartMonth) { |
|
|
|
|
|
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
|
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
|
|
|
console.log(startTime) |
|
|
|
|
|
|
|
console.log(endTime) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
|
|
|
config.duration = 3000 |
|
|
|
|
|
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}else { |
|
|
|
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
|
|
|
config.duration = 3000 |
|
|
|
|
|
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/* 按年点击事件 */ |
|
|
|
|
|
|
|
annian(){ |
|
|
|
|
|
|
|
var anyue1 = document.getElementById('yue1'); |
|
|
|
|
|
|
|
anyue1.style.display='none'; |
|
|
|
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
|
|
|
var anyue2 = document.getElementById('yue2'); |
|
|
|
selectEndYear:any = (new Date()).getFullYear() //结束年份
|
|
|
|
anyue2.style.display='none'; |
|
|
|
//按年查询
|
|
|
|
this.headZhexian('head','删除数量总统计',this.datanianx,this.dataniany) |
|
|
|
yearSubmit (e) { |
|
|
|
|
|
|
|
console.log(this.selectType) |
|
|
|
|
|
|
|
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany) |
|
|
|
@ -69,23 +134,57 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
this.headZhexian('rightOne','地下',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightOne','地下',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) |
|
|
|
this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany)
|
|
|
|
this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) |
|
|
|
|
|
|
|
if (e.selectEndYear >= e.selectStartYear) { |
|
|
|
|
|
|
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
|
|
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
|
|
|
console.log(startTime) |
|
|
|
|
|
|
|
console.log(endTime) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
|
|
|
config.duration = 3000 |
|
|
|
|
|
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 折线图 */ |
|
|
|
/** |
|
|
|
|
|
|
|
* @name: 折线图 |
|
|
|
|
|
|
|
* @test: test font |
|
|
|
|
|
|
|
* @msg:
|
|
|
|
|
|
|
|
* @param {divid(传入的div),headtext(标题)}
|
|
|
|
|
|
|
|
* @return {type}
|
|
|
|
|
|
|
|
*/ |
|
|
|
headZhexian(divid:string,headtext:string,datayuex,datayuey){ |
|
|
|
headZhexian(divid:string,headtext:string,datayuex,datayuey){ |
|
|
|
|
|
|
|
var dianji:boolean=headtext=="删除数量总统计" ? false:true; |
|
|
|
var ec = echarts as any; |
|
|
|
var ec = echarts as any; |
|
|
|
var headZx = ec.init(document.getElementById(`${divid}`)); |
|
|
|
this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp'); |
|
|
|
var options = { |
|
|
|
var options = { |
|
|
|
|
|
|
|
grid: { |
|
|
|
|
|
|
|
top: 50, |
|
|
|
|
|
|
|
left:40, |
|
|
|
|
|
|
|
right: 20, |
|
|
|
|
|
|
|
bottom: 20, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 标题
|
|
|
|
title: { |
|
|
|
title: { |
|
|
|
text: `${headtext}`, |
|
|
|
text: `${headtext}`, |
|
|
|
left:350, |
|
|
|
left:'center', |
|
|
|
|
|
|
|
top: -4, |
|
|
|
|
|
|
|
//副标题文本样式
|
|
|
|
|
|
|
|
subtextStyle:{ |
|
|
|
|
|
|
|
color:'#999', |
|
|
|
|
|
|
|
fontWeight:'bold', |
|
|
|
|
|
|
|
}, |
|
|
|
textStyle:{ |
|
|
|
textStyle:{ |
|
|
|
fontSize:28 |
|
|
|
//文字颜色
|
|
|
|
|
|
|
|
color:'#000', |
|
|
|
|
|
|
|
fontSize: 22, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
//提示框
|
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
trigger: 'axis', |
|
|
|
formatter: (params)=>{ |
|
|
|
formatter: (params)=>{ |
|
|
|
return this.biaogeTishi(`${headtext}`) |
|
|
|
return this.biaogeTishi(`${headtext}`) |
|
|
|
} , |
|
|
|
} , |
|
|
|
@ -95,7 +194,7 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
type: 'category', |
|
|
|
boundaryGap:false, |
|
|
|
boundaryGap:true, |
|
|
|
data: datayuex, |
|
|
|
data: datayuex, |
|
|
|
axisLabel: { |
|
|
|
axisLabel: { |
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
@ -128,9 +227,10 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
series: [{ |
|
|
|
series: [{ |
|
|
|
data: datayuey, |
|
|
|
data: datayuey, |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
lineStyle:{ |
|
|
|
clickable:false, |
|
|
|
|
|
|
|
/* lineStyle:{ |
|
|
|
color:'#1369bf' |
|
|
|
color:'#1369bf' |
|
|
|
}, |
|
|
|
}, */ |
|
|
|
/* markLine: { |
|
|
|
/* markLine: { |
|
|
|
symbol: ['none', 'none'], |
|
|
|
symbol: ['none', 'none'], |
|
|
|
label: {show: false}, |
|
|
|
label: {show: false}, |
|
|
|
@ -150,11 +250,15 @@ export class DeleteTwoComponent implements OnInit { |
|
|
|
}, */ |
|
|
|
}, */ |
|
|
|
}] |
|
|
|
}] |
|
|
|
}; |
|
|
|
}; |
|
|
|
headZx.on('click', (params) => { |
|
|
|
this.headZx.on('click', (params) => { |
|
|
|
console.log(params) |
|
|
|
console.log(params) |
|
|
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there/${headtext}/${params.name}`); |
|
|
|
if(`${headtext}`!=="删除数量总统计"){ |
|
|
|
|
|
|
|
this.echartsData.statefulInspectionName =params.name+headtext; |
|
|
|
|
|
|
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
headZx.setOption(options); |
|
|
|
this.headZx.setOption(options); |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @name: 表格提示框封装 |
|
|
|
* @name: 表格提示框封装 |
|
|
|
|
