You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
15 KiB
458 lines
15 KiB
import { Component, Input, OnInit, ViewChild } from '@angular/core'; |
|
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; |
|
import { ActivatedRoute, Router } from '@angular/router'; |
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
import { FormControl } from '@angular/forms'; |
|
import { DateAdapter } from '@angular/material/core'; |
|
import { PageTwoNameComponent } from '../page-two-name/page-two-name.component'; |
|
import {EchartsDataService} from '../../echarts-data.service' |
|
import { resolve } from 'dns'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-page-two-time', |
|
templateUrl: './page-two-time.component.html', |
|
styleUrls: ['./page-two-time.component.scss'] |
|
}) |
|
export class PageTwoTimeComponent implements OnInit { |
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { } |
|
|
|
@ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 |
|
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 |
|
@ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用 |
|
|
|
ngOnInit(): void { |
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
this.type=param.type |
|
}); |
|
this.echartsData.statefulInspectionToggle = true |
|
this.dateInit() |
|
this.bianli() |
|
} |
|
ngOnDestroy(): void { |
|
} |
|
|
|
isQuery:boolean = true; //横纵向查询 |
|
type |
|
//shao |
|
toggleTrue () { |
|
//this.isQuery = true |
|
this.echartsData.isQuery=true |
|
this.echartsData.statefulInspectionToggle = true |
|
} |
|
|
|
//chen |
|
toggleFalse () { |
|
//this.isQuery = false |
|
this.echartsData.isQuery=false |
|
this.echartsData.statefulInspectionToggle = true |
|
this.selectType = 'month' |
|
} |
|
|
|
//返回 |
|
goBack () { |
|
//this.echartsComponent.twoExample.clear() |
|
//this.echartsComponent.dispose() |
|
this.echartsData.statefulInspectionToggle = true |
|
sessionStorage.setItem('refresh', 'true'); |
|
history.go(-1); |
|
} |
|
|
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年 |
|
|
|
async changeTime (e) { |
|
let data = e.value |
|
await this.appEcharts.changeTime(data) |
|
if(e.value=='month'){ |
|
this.echartsData.selectType=0 |
|
} |
|
else if(e.value=='year'){ |
|
this.years=[] |
|
this.echartsData.selectType=2 |
|
this.appEcharts.tabledata[0].forEach((value,index,array) => { |
|
this.years.push(array[index].year) |
|
}); |
|
this.years=Array.from(new Set(this.years)) |
|
//console.log() |
|
} |
|
} |
|
|
|
//查询数据 |
|
years= [] |
|
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
|
tiaoshiPao:any |
|
datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] |
|
datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] |
|
|
|
//气泡提示数据获取 |
|
bianli(){ |
|
var arrshuzu='['; |
|
for(var i=0;i<this.datayuey.length;i++){ |
|
arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},' |
|
} |
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
|
arrshuzu+=']' |
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
} |
|
|
|
//日期初始化 |
|
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 = 12 //结束月份 |
|
//按月查询 |
|
monthSubmit (e) { |
|
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 |
|
this.echartsData.selectStartMonth=e.selectStartMonth |
|
this.echartsData.selectEndMonth=e.selectEndMonth |
|
this.appEcharts.findYue() |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
} |
|
} |
|
|
|
|
|
|
|
selectStartYear:any = (new Date()).getFullYear()-1 //开始年份 |
|
selectEndYear:any = (new Date()).getFullYear() //结束年份 |
|
//按年查询 |
|
yearSubmit (e) { |
|
if (e.selectEndYear >= e.selectStartYear) { |
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
this.echartsData.selectOneYear=e.selectStartYear |
|
this.echartsData.selectTwoYear=e.selectEndYear |
|
this.appEcharts.findyear() |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('结束时间必须大于开始时间','确定',config); |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
|
|
@Component({ |
|
selector: 'app-echarts', |
|
templateUrl: './echarts.html', |
|
styleUrls: ['./page-two-time.component.scss'] |
|
}) |
|
export class echartsComponent implements OnInit { |
|
|
|
constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } |
|
|
|
tid |
|
zongcount=0 |
|
type |
|
organizationId=[] |
|
tiaoshiPao:any |
|
datayuey=[] |
|
datayuex=[] |
|
dataYearX = [] |
|
dataYearY = [] |
|
pieonetype//判断是级别还是类型，上个页面传过来的参数 |
|
planType//预案类型 |
|
toggleTrue (){} |
|
//气泡提示数据获取 |
|
bianli(){ |
|
var arrshuzu='['; |
|
for(var i=0;i<this.datayuey.length;i++){ |
|
arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},' |
|
} |
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
|
arrshuzu+=']' |
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
} |
|
ngOnInit(): void { |
|
if(sessionStorage.getItem('refresh') === 'true') { |
|
sessionStorage.removeItem('refresh'); |
|
location.reload(); |
|
} |
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
this.headtext=param.level |
|
this.type=param.type |
|
this.tid=param.tid |
|
this.pieonetype=param.pieonetype |
|
}); |
|
if(this.headtext=='二维预案'){ |
|
this.planType=1 |
|
}else if(this.headtext=='三维预案'){ |
|
this.planType=2 |
|
}else if(this.headtext=='其他预案'){ |
|
this.planType=4 |
|
}else if(this.headtext=='文本预案'){ |
|
this.planType=16 |
|
} |
|
window.setTimeout(()=>{ |
|
this.getechartsData() |
|
}) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.twoExample.clear() |
|
this.twoExample.dispose() |
|
|
|
} |
|
//获取数据 |
|
async getechartsData(){ |
|
this.datayuex=[] |
|
this.datayuey=[] |
|
this.zongcount=0 |
|
let paramdata={ |
|
planStatus:this.tid=='pieone'?'': this.type, |
|
PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', |
|
objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, |
|
TrendType:0 |
|
} |
|
await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
//console.log(this.tabledata) |
|
for(var i=0;i<this.tabledata[0].length;i++){ |
|
if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth||this.tabledata[0][i].month<=this.echartsData.selectEndMonth){ |
|
this.datayuex.push(this.tabledata[0][i].month) |
|
this.datayuey.push(this.tabledata[0][i].count) |
|
this.zongcount=this.zongcount+this.tabledata[0][i].count |
|
} |
|
} |
|
this.datayuex.forEach((value,index,array)=>{ |
|
array[index]=array[index]+'月' |
|
}) |
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
//this.oneInit() |
|
this.twoInit(this.datayuex,this.datayuey) |
|
} |
|
|
|
async changeTime (e) { |
|
this.twoExample.clear() |
|
this.twoExample.dispose() |
|
if (e=='year') { |
|
//this.oneInit(this.dataYearX,this.dataYearY) |
|
this.dataYearX=[] |
|
this.dataYearY=[] |
|
this.echartsData.selectType=2 |
|
this.zongcount=0 |
|
let paramdata={ |
|
objectType:this.tid=='pieone'?2: 1, |
|
planStatus:this.tid=='pieone'?'': this.type, |
|
PlanCategory:this.tid=='pieone'?this.type:'', |
|
TrendType:this.echartsData.selectType |
|
} |
|
await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) |
|
window.setTimeout(()=>{ |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
//resolve(this.tabledata) |
|
for(var i=0;i<this.tabledata[0].length;i++){ |
|
this.dataYearX.push(this.tabledata[0][i].year) |
|
this.dataYearY.push(this.tabledata[0][i].count) |
|
this.zongcount=this.zongcount+this.tabledata[0][i].count |
|
} |
|
this.dataYearX.forEach((value,index,array)=>{ |
|
this.dataYearX[index]=this.dataYearX[index]+'年' |
|
}) |
|
//this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
//this.oneInit() |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) |
|
this.twoInit(this.dataYearX,this.dataYearY) |
|
}) |
|
//this.twoInit(this.dataYearX,this.dataYearY) |
|
|
|
} else { |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
//this.oneInit() |
|
this.echartsData.selectType=0 |
|
this.getechartsData() |
|
this.twoInit(this.datayuex,this.datayuey) |
|
|
|
} |
|
} |
|
//按月查询 |
|
async findYue(){ |
|
this.twoExample.clear() |
|
this.datayuex=[] |
|
this.datayuey=[] |
|
let paramdata={ |
|
objectType:this.tid=='pieone'?2: 1, |
|
planStatus:this.tid=='pieone'?'': this.type, |
|
PlanCategory:this.tid=='pieone'?this.type:'', |
|
TrendType:this.echartsData.selectType |
|
} |
|
await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) |
|
window.setTimeout(()=>{ |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
//console.log(this.tabledata[0].companyStatistics.trendStatistics.added) |
|
for(var i=0;i<this.tabledata[0].length;i++){ |
|
if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth&&this.tabledata[0][i].month<=this.echartsData.selectEndMonth){ |
|
this.datayuex.push(this.tabledata[0][i].month) |
|
this.datayuey.push(this.tabledata[0][i].count) |
|
} |
|
} |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
this.twoInit(this.datayuex,this.datayuey) |
|
}) |
|
} |
|
//按年查询 |
|
async findyear(){ |
|
this.twoExample.clear() |
|
this.dataYearX=[] |
|
this.dataYearY=[] |
|
let paramdata={ |
|
objectType:this.tid=='pieone'?2: 1, |
|
planStatus:this.tid=='pieone'?'': this.type, |
|
PlanCategory:this.tid=='pieone'?this.type:'', |
|
TrendType:this.echartsData.selectType |
|
} |
|
await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) |
|
window.setTimeout(()=>{ |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
//console.log(this.tabledata[0].companyStatistics.trendStatistics.added) |
|
for(var i=0;i<this.tabledata[0].length;i++){ |
|
if(this.tabledata[0][i].year>=this.echartsData.selectOneYear&&this.tabledata[0][i].year<=this.echartsData.selectTwoYear){ |
|
this.dataYearX.push(this.tabledata[0][i].year) |
|
this.dataYearY.push(this.tabledata[0][i].count) |
|
} |
|
} |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) |
|
this.twoInit(this.dataYearX,this.dataYearY) |
|
}) |
|
} |
|
headtext |
|
twoExample:any; |
|
tabledata |
|
twoInit (X, Y) { |
|
/* X.forEach((element,index,array) => { |
|
array[index]=array[index]+'月' |
|
}); */ |
|
let that = this |
|
this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp'); |
|
var option = { |
|
// 标题 |
|
title: { |
|
text: this.headtext+`：总数（${this.zongcount}）`, |
|
top: -4, |
|
left: 'center', |
|
bottom: 100, |
|
textStyle:{ |
|
//文字颜色 |
|
fontSize: 30, |
|
color:'#000', |
|
} |
|
}, |
|
grid: { |
|
top: 90, |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
position: this.echartsData.tableTooltipNoShowq, |
|
/* formatter: (params)=>{ |
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增') |
|
} */ |
|
}, |
|
// x轴 |
|
xAxis: { |
|
type: 'category', |
|
data: X, |
|
boundaryGap: true, |
|
axisLabel: { |
|
color: "#000", //刻度线标签颜色 |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
}, |
|
}, |
|
splitLine: {//分割线配置 |
|
show:true, |
|
lineStyle: { |
|
color: '#999', |
|
} |
|
} |
|
}, |
|
// y轴 |
|
yAxis: { |
|
type: 'value', |
|
name: '个', |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :15, |
|
color:'#000000' |
|
}, |
|
color: "#000" //刻度线标签颜色 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
} |
|
} |
|
}, |
|
// 数据 |
|
series: [{ |
|
name: '单位预案编制数量', |
|
type: 'line', |
|
markPoint: { |
|
|
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
data: Y, |
|
} |
|
], |
|
}; |
|
this.twoExample.setOption(option); |
|
this.twoExample.getZr().on('click', (params) => { |
|
// console.log(params.name) |
|
/* this.echartsData.statefulInspectionName =params.name+headtext; |
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */ |
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.twoExample.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
if(this.echartsData.selectType==2){ |
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':this.headtext,'headtext':X[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); |
|
}else{ |
|
/*事件处理代码书写位置*/ |
|
if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){ |
|
this.twoExample.clear() |
|
this.echartsData.isQuery=true |
|
this.twoExample.setOption(option); |
|
//this.router.navigate(['/statisticanalysis/statePageOne/name'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}}); |
|
} else if(this.echartsData.level=='3'){ |
|
//中队跳转 |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
} |
|
|
|
threeExample:any; |
|
|
|
|
|
|
|
|
|
}
|
|
|