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.
292 lines
11 KiB
292 lines
11 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-add-unit-three-bar-details', |
|
templateUrl: './add-unit-three-bar-details.component.html', |
|
styleUrls: ['./add-unit-three-bar-details.component.scss'] |
|
}) |
|
export class AddUnitThreeBarDetailsComponent implements OnInit { |
|
|
|
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } |
|
time:String |
|
buildingTypeName:String |
|
//level:String |
|
orId//上个页面传过来的组织id |
|
buildId//上个页面传过来的建筑id |
|
|
|
setTimeoutObj//延时器需要清除 |
|
tabledata |
|
organizationId=[] |
|
|
|
ngOnInit(): void { |
|
if(sessionStorage.getItem('refresh') === 'true') { |
|
sessionStorage.removeItem('refresh'); |
|
location.reload(); |
|
} |
|
this.dateInit () |
|
this.route.queryParams.subscribe(params => { |
|
this.time = params['time']; |
|
this.buildingTypeName = params['buildingTpye']; |
|
this.buildId=params['id'] |
|
this.orId=params['zhuid'] |
|
}); |
|
|
|
this.setTimeoutObj = window.setTimeout(()=>{ |
|
this.getechartsData() |
|
}) |
|
} |
|
ngOnDestroy(){ |
|
window.clearTimeout(this.setTimeoutObj); |
|
if (!this.detailPlanEchart) { |
|
return; |
|
} |
|
this.detailPlanEchart.clear() |
|
this.detailPlanEchart.dispose() |
|
} |
|
//获取服务层数据 |
|
async getechartsData(){ |
|
let paramsdata/* ={ |
|
organizationId:this.orId |
|
} */ |
|
if(this.serviceData.addYear==undefined&&this.serviceData.addMonth!=undefined){ |
|
this.serviceData.addYear=new Date().getFullYear() |
|
paramsdata={ |
|
organizationId:this.orId, |
|
TimeIntervalStart:this.serviceData.addYear+'-'+this.serviceData.addMonth, |
|
TimeIntervalEnd:this.serviceData.addYear+'-'+this.serviceData.addMonth, |
|
} |
|
}else if(this.serviceData.addYear==undefined&&this.serviceData.addMonth==undefined){ |
|
paramsdata={ |
|
organizationId:this.orId, |
|
} |
|
}else{ |
|
paramsdata={ |
|
organizationId:this.orId, |
|
TimeIntervalStart:this.serviceData.addYear+'-'+this.serviceData.addMonth, |
|
TimeIntervalEnd:this.serviceData.addYear+'-'+this.serviceData.addMonth, |
|
} |
|
} |
|
await this.serviceData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.serviceData.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.serviceData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
|
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 = [300,290,280,270,260,250,240,230,220,210,200] |
|
|
|
zhiNameData = [] |
|
zhiNumData = [] |
|
tiaoshiPao:any |
|
//气泡提示数据获取 |
|
bianli(){ |
|
this.tiaoshiPao=null |
|
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 |
|
} |
|
|
|
detailPlanEchart |
|
option |
|
detailEcharts(){ |
|
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden'); |
|
this.option = { |
|
title: { |
|
text: this.time + '' +this.buildingTypeName +`：总数(${this.tabledata[0].totalCount})`, |
|
left: "center", |
|
textStyle: { |
|
fontSize: 28 |
|
} |
|
}, |
|
grid: { |
|
bottom:'18%' |
|
}, |
|
xAxis: { |
|
id:this.organizationId, |
|
type: 'category', |
|
data:this.zhiNameData, |
|
axisLabel:{ |
|
//this.axisLabel, |
|
interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠） |
|
rotate:38, //调整数值改变倾斜的幅度（范围-90到90） |
|
textStyle:{ |
|
fontSize :15, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel:{ |
|
//this.axisLabel, |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.tiao==false? this.serviceData.biaogeTishida(params):this.tableTooltip(params) |
|
}, |
|
position:this.serviceData.tableTooltipNoShowq |
|
}, |
|
series: [{ |
|
data: this.zhiNumData, |
|
type: 'bar', |
|
markPoint: { |
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
barWidth :'58', |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
//label: this.topTextlabel |
|
}] |
|
|
|
}; |
|
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.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ |
|
//总队不跳 |
|
this.zhiNameData=[] |
|
this.zhiNumData=[] |
|
this.organizationId=[] |
|
this.tiaoshiPao='' |
|
let paramsdata={ |
|
//id:this.buildId, |
|
organizationId:this.option.xAxis.id[xIndex] |
|
} |
|
this.serviceData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`) |
|
this.setTimeoutObj = window.setTimeout(()=>{ |
|
this.tabledata=JSON.parse(JSON.stringify(this.serviceData.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.option.title.text =this.option.xAxis.data[xIndex]+`：总数(${this.tabledata[0].totalCount})` |
|
this.option.xAxis.data = this.zhiNameData |
|
this.option.series[0].data = this.zhiNumData |
|
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
|
this.option.series[0].markPoint.data=this.tiaoshiPao |
|
this.option.xAxis.id=this.organizationId |
|
this.detailPlanEchart.clear() |
|
this.detailPlanEchart.setOption(this.option) |
|
},1000) |
|
this.tiao=true |
|
}else{ |
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':this.option.xAxis.data[xIndex],'type':1,'jsid':this.option.xAxis.id[xIndex],'buildid':this.buildId}}); |
|
} |
|
} |
|
/* if(this.serviceData.level == "1"){//如果是支队则跳转 |
|
this.option.title.text = params.name + '(' +this.buildingTypeName + ')' |
|
this.option.xAxis.data = this.zhongNameData |
|
this.option.series[0].data = this.zhongNumData |
|
this.detailPlanEchart.setOption(this.option) |
|
} */ |
|
}) |
|
} |
|
tiao=false |
|
//返回按钮 |
|
backBtn(){ |
|
/* if(this.level == "zhongdui"){ |
|
this.level = "zhidui" |
|
this.option.title.text = this.time + '(' +this.buildingTypeName + ')' |
|
this.option.xAxis.data = this.zhiNameData |
|
this.option.series[0].data = this.zhiNumData |
|
this.detailPlanEchart.setOption(this.option) |
|
}else{ |
|
|
|
} */ |
|
//sessionStorage.setItem('refresh', 'true'); |
|
history.go(-1); |
|
} |
|
|
|
tableTooltip(params:any){ |
|
var data |
|
if(this.serviceData.level == "1"){ |
|
data = this.serviceData.tableDataZhong |
|
}else{ |
|
data = [ |
|
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
|
] |
|
} |
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>' |
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
|
res+='<thead style="font-size:18px;"><tr>'; |
|
res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
res+='<td style="text-align:center;width:30%;">数量</td>' |
|
res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
res+='</tr></thead>' |
|
res+='<tbody>'; |
|
for(var i=0;i<data.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;">'+data[i].name+'</td>' |
|
res+='<td style="text-align:center;">'+data[i].number+'</td>' |
|
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>' |
|
} |
|
|
|
res+='</tbody>' |
|
res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+this.tabledata[0].totalCount+'</td><td style="text-align:center;">100%</td></tfoot>' |
|
res+='</table></div></div>' |
|
return res |
|
} |
|
|
|
}
|
|
|