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.
250 lines
8.1 KiB
250 lines
8.1 KiB
import { Component, OnInit } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
import { ActivatedRoute } from '@angular/router'; |
|
import { EchartsDataService } from '../../echarts-data.service'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-page-there-year', |
|
templateUrl: './page-there-year.component.html', |
|
styleUrls: ['./page-there-year.component.scss'] |
|
}) |
|
export class PageThereYearComponent implements OnInit { |
|
|
|
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } |
|
|
|
tid |
|
year:String |
|
buildingTypeName:String |
|
level:String |
|
setTimeoutObj//延时器需要清除 |
|
type |
|
tabledata//获取所有数据 |
|
lastyears//上个页面传过来的年份 |
|
count=0//总数 |
|
pieonetype//判断是级别还是类型，上个页面传过来的参数 |
|
planType//预案类型 |
|
ngOnInit(): void { |
|
this.dateInit () |
|
this.route.queryParams.subscribe(params => { |
|
this.year = params['level']; |
|
this.buildingTypeName = params['headtext']; |
|
this.type=params['type'] |
|
this.lastyears=params['headtext'].substring(0,4) |
|
this.tid=params.tid |
|
this.pieonetype=params.pieonetype |
|
}); |
|
if(this.year=='二维预案'){ |
|
this.planType=1 |
|
}else if(this.year=='三维预案'){ |
|
this.planType=2 |
|
}else if(this.year=='其他预案'){ |
|
this.planType=4 |
|
}else if(this.year=='文本预案'){ |
|
this.planType=16 |
|
} |
|
this.setTimeoutObj = window.setTimeout(()=>{ |
|
this.getechartsData() |
|
}) |
|
} |
|
ngOnDestroy(){ |
|
window.clearTimeout(this.setTimeoutObj); |
|
this.detailPlanEchart.clear() |
|
this.detailPlanEchart.dispose() |
|
} |
|
async getechartsData(){ |
|
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, |
|
TrendYear:this.lastyears||'', |
|
TrendType:0 |
|
} |
|
await this.serviceData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) |
|
// console.log(this.tabledata) |
|
for(var i=0;i<this.tabledata[0].length;i++){ |
|
this.date.push(this.tabledata[0][i].month) |
|
this.dateNum.push(this.tabledata[0][i].count) |
|
this.count+=this.tabledata[0][i].count |
|
} |
|
this.date.forEach((value,index,array)=>{ |
|
this.date[index]=this.date[index]+'月' |
|
}) |
|
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) |
|
this.detailEcharts() |
|
} |
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年 |
|
|
|
//查询数据 |
|
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() //开始年份 |
|
selectStartMonth:any = 1 //开始月份 |
|
Submit (e) { |
|
|
|
} |
|
selectStartYear:any = (new Date()).getFullYear() //开始年份 |
|
|
|
topTextlabel = { |
|
show: true, // 开启显示 |
|
position: 'top', // 在上方显示 |
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 |
|
verticalAlign: 'middle', |
|
textStyle: { // 数值样式 |
|
color: 'black', |
|
fontSize: 12 |
|
} |
|
}//柱状图数值顶部显示 |
|
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
|
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
|
|
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] |
|
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] |
|
tiaoshiPao:any |
|
//气泡提示数据获取 |
|
bianli(){ |
|
var arrshuzu='['; |
|
for(var i=0;i<this.dateNum.length;i++){ |
|
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},' |
|
} |
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
|
arrshuzu+=']' |
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
//return tishiPao |
|
} |
|
//返回 |
|
goBack () { |
|
history.go(-1) |
|
//this.echartsData.statefulInspectionToggle = true |
|
} |
|
|
|
detailPlanEchart |
|
option |
|
date = [] |
|
dateNum = [] |
|
|
|
detailEcharts(){ |
|
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp'); |
|
this.option = { |
|
grid: { |
|
top: 110, |
|
|
|
}, |
|
// 标题 |
|
title: { |
|
text: `${this.year}${this.buildingTypeName}总数（${this.count}）`, |
|
//top: -14, |
|
left: 'center', |
|
textStyle:{ |
|
//文字颜色 |
|
color:'#000', |
|
fontSize: 30 |
|
} |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
/* formatter: (params)=>{ |
|
if(params[0].seriesName == "year"){ |
|
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) |
|
}else{ |
|
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) |
|
} |
|
}, */ |
|
position:this.serviceData.tableTooltipNoShow2 |
|
}, |
|
// x轴 |
|
xAxis: { |
|
type: 'category', |
|
data: this.date, |
|
axisLabel: { |
|
color: "#000", //刻度线标签颜色 |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
}, |
|
}, |
|
splitLine: {//分割线配置 |
|
show:true, |
|
lineStyle: { |
|
color: '#999', |
|
} |
|
} |
|
}, |
|
// y轴 |
|
yAxis: { |
|
type: 'value', |
|
name: '个', |
|
axisLabel: { |
|
//color: "#000", //刻度线标签颜色 |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
} |
|
} |
|
}, |
|
// 数据 |
|
series: [{ |
|
name: 'xxx', |
|
type: 'line', |
|
markPoint: { |
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
data: this.dateNum, |
|
} |
|
], |
|
}; |
|
this.detailPlanEchart.setOption(this.option); |
|
this.detailPlanEchart.getZr().on('click',params=>{ |
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
/*事件处理代码书写位置*/ |
|
if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){ |
|
this.serviceData.isQuery=true |
|
this.serviceData.planMonth=this.option.xAxis.data[xIndex].substring(0,1) |
|
this.serviceData.planYear=this.lastyears |
|
/* if(!this.serviceData.isQuery){ |
|
this.serviceData.planYear=this.lastyears |
|
} */ |
|
|
|
//this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1','type':this.type}}); |
|
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.year,'headtext':this.buildingTypeName,'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':this.option.xAxis.data[xIndex]}}); |
|
} |
|
else if(this.serviceData.level=='3'){ |
|
//中队跳转 |
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':this.type}}); |
|
} |
|
} |
|
}); |
|
} |
|
//返回按钮 |
|
backBtn(){ |
|
window.history.go(-1) |
|
} |
|
|
|
}
|
|
|