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.
231 lines
7.2 KiB
231 lines
7.2 KiB
import { Component, OnInit } from '@angular/core'; |
|
import { Router,ActivatedRoute } from '@angular/router'; |
|
import {EchartsDataService} from '../../echarts-data.service'; |
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
import { DateAdapter } from '@angular/material/core'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-page-there', |
|
templateUrl: './page-there.component.html', |
|
styleUrls: ['./page-there.component.scss'] |
|
}) |
|
export class PageThereComponent implements OnInit { |
|
|
|
constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { } |
|
|
|
zhutu//echarts实例 |
|
option |
|
time:String |
|
buildingTypeName:String |
|
setTimeoutObj//延时器需要清除 |
|
headtext:string; |
|
zhong:string |
|
type |
|
tabledata |
|
organizationId=[] |
|
lastid |
|
|
|
ngOnDestroy():void{ |
|
this.zhutu.clear() |
|
this.zhutu.dispose() |
|
} |
|
|
|
ngOnInit(): void { |
|
this.dateInit(); |
|
let datayuex:string; |
|
let headName:string; |
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
this.lastid=param.id |
|
this.type=param.type |
|
this.headtext=param.headtext |
|
datayuex=param.level |
|
this.zhong=param.zhong |
|
headName=datayuex+'月'+this.headtext; |
|
//console.log(headName) |
|
}); |
|
let paramdata={ |
|
planStatus:this.type, |
|
OrganizationId:this.lastid |
|
} |
|
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`) |
|
window.setTimeout(()=>{ |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
for(var i=0;i<this.tabledata[0].organizations.length;i++){ |
|
this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName) |
|
this.zhiNumData.push(this.tabledata[0].organizations[i].count) |
|
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) |
|
} |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
|
this.zhuzhuangtu(headName) |
|
},1000) |
|
} |
|
|
|
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) |
|
} |
|
// console.log(this.years) |
|
} |
|
|
|
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 |
|
} |
|
}//柱状图数值顶部显示 |
|
zhiNameData = [] |
|
zhiNumData = [] |
|
tiaoshiPao:any |
|
//气泡提示数据获取 |
|
bianli(){ |
|
var arrshuzu='['; |
|
for(var i=0;i<this.zhiNumData.length;i++){ |
|
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' |
|
} |
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
|
arrshuzu+=']' |
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
//return tishiPao |
|
} |
|
date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月'] |
|
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] |
|
//返回 |
|
goBack () { |
|
//this.zhutu.clear() |
|
this.zhutu.dispose() |
|
history.go(-1) |
|
this.echartsData.statefulInspectionToggle = true |
|
} |
|
|
|
axisLabel = { |
|
interval: 0, |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
formatter:function(value) |
|
{ |
|
var ret = "";//拼接加\n返回的类目项 |
|
var maxLength = 2;//每项显示文字个数 |
|
var valLength = value.length;//X轴类目项的文字个数 |
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|
if (rowN > 1)//如果类目项的文字大于3, |
|
{ |
|
for (var i = 0; i < rowN; i++) { |
|
var temp = "";//每次截取的字符串 |
|
var start = i * maxLength;//开始截取的位置 |
|
var end = start + maxLength;//结束截取的位置 |
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|
temp = value.substring(start, end) + "\n"; |
|
ret += temp; //凭借最终的字符串 |
|
} |
|
return ret; |
|
} |
|
else { |
|
return value; |
|
} |
|
} |
|
}//echarts两个字换行 |
|
/* 柱状图 */ |
|
zhuzhuangtu(headName:string){ |
|
var ec = echarts as any; |
|
this.zhutu = ec.init(document.getElementById('zhidui'),'walden'); |
|
this.option = { |
|
title: { |
|
text: headName, |
|
left: "center", |
|
//bottom: "540", |
|
textStyle: { |
|
fontSize: 30 |
|
} |
|
}, |
|
grid: { |
|
top: 110, |
|
//bottom: 10 |
|
}, |
|
xAxis: { |
|
id:this.organizationId, |
|
type: 'category', |
|
data: this.zhiNameData, |
|
axisLabel: this.axisLabel, |
|
|
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.echartsData.biaogeTishida(params) |
|
}, |
|
position: this.echartsData.tableTooltipNoShowq |
|
/* backgroundColor:'rgba(255,255,255,1)', |
|
borderWidth:'1', |
|
borderRadius :'0' */ |
|
}, |
|
series: [{ |
|
data: this.zhiNumData, |
|
type: 'bar', |
|
markPoint: { |
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'38', |
|
//label: this.topTextlabel |
|
}] |
|
}; |
|
this.zhutu.getZr().on('click',params=>{ |
|
// console.log(params.name) |
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.zhutu.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
/*事件处理代码书写位置*/ |
|
if((this.echartsData.level=='0'||this.echartsData.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ |
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'id':this.option.xAxis.id[xIndex],'type':this.type}}); |
|
}else{ |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':this.option.xAxis.data[xIndex],'id':this.option.xAxis.id[xIndex],'type':this.type}}); |
|
} |
|
|
|
} |
|
}); |
|
/* this.zhutu.on('click', (params) => { |
|
console.log(params) |
|
this.echartsData.statefulInspectionName =params.name; |
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`); |
|
}); */ |
|
this.zhutu.setOption(this.option); |
|
} |
|
}
|
|
|