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.
228 lines
7.8 KiB
228 lines
7.8 KiB
/* |
|
* @Descripttion: |
|
* @version: |
|
* @Author: sueRimn |
|
* @Date: 2020-09-05 13:50:45 |
|
* @LastEditors: sueRimn |
|
* @LastEditTime: 2021-07-22 11:28:02 |
|
*/ |
|
import { Component, OnInit } from '@angular/core'; |
|
import { ActivatedRoute, Router } from '@angular/router'; |
|
import {EchartsDataService} from '../../echarts-data.service' |
|
declare var echarts: any; |
|
@Component({ |
|
selector: 'app-page-zhong-dui-details', |
|
templateUrl: './page-zhong-dui-details.component.html', |
|
styleUrls: ['./page-zhong-dui-details.component.scss'] |
|
}) |
|
export class PageZhongDuiDetailsComponent implements OnInit { |
|
|
|
constructor( public route: ActivatedRoute,public data: EchartsDataService,private router: Router) { } |
|
|
|
zhongNameData = [] |
|
zhongNumData = [] |
|
tiaoshiPao:any |
|
headtext:string; |
|
headName:string; |
|
type |
|
lastid |
|
tabledata |
|
organizationId=[] |
|
padHw |
|
tid |
|
yuanName |
|
pieonetype//判断是级别还是类型，上个页面传过来的参数 |
|
planType//预案类型 |
|
ngOnInit(): void { |
|
if(sessionStorage.getItem('refresh') === 'true') { |
|
sessionStorage.removeItem('refresh'); |
|
location.reload(); |
|
} |
|
if(window.matchMedia("(max-width: 1400px)").matches){ |
|
this.padHw=true |
|
//this.padjt= |
|
}else{ |
|
this.padHw=false |
|
} |
|
let level:string; |
|
this.route.queryParams.subscribe(param=>{ |
|
//this.headtext=param.headtext |
|
level=param.level |
|
this.headName=level; |
|
this.type=param.type |
|
this.lastid=param.id |
|
this.tid=param.tid |
|
this.yuanName=param.name |
|
this.pieonetype=param.pieonetype |
|
}); |
|
if(this.yuanName=='二维预案'){ |
|
this.planType=1 |
|
}else if(this.yuanName=='三维预案'){ |
|
this.planType=2 |
|
}else if(this.yuanName=='其他预案'){ |
|
this.planType=4 |
|
}else if(this.yuanName=='文本预案'){ |
|
this.planType=16 |
|
} |
|
window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
}) |
|
} |
|
ngOnDestroy(): void { |
|
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:'', |
|
OrganizationId:this.lastid, |
|
PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'' |
|
} |
|
await this.data.getData(paramdata,this.tid=='pieone'&&this.pieonetype=='true'?'/api/StatisticsAnalysis/Plans/Category':this.tid=='pieone'&&this.pieonetype=='false'?'/api/StatisticsAnalysis/Plans/Type': `/api/StatisticsAnalysis/Plans/Status`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) |
|
// console.log(this.tabledata) |
|
for(var i=0;i<this.tabledata[0].organizations.length;i++){ |
|
this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName) |
|
this.zhongNumData.push(this.tabledata[0].organizations[i].count) |
|
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) |
|
} |
|
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) |
|
this.detailEcharts() |
|
} |
|
//返回 |
|
goBack () { |
|
sessionStorage.setItem('refresh', 'true'); |
|
history.go(-1); |
|
|
|
//this.echartsData.statefulInspectionToggle = true |
|
} |
|
axisLabel = { |
|
interval: 0, |
|
//rotate:-30, |
|
textStyle:{ |
|
fontSize :15, |
|
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两个字换行 |
|
detailPlanEchart |
|
detailEcharts(){ |
|
this.detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden'); |
|
var option = { |
|
title: { |
|
text: this.headName+this.yuanName+`总数(${this.tabledata[0].totalCount})`, |
|
left: "center", |
|
top: "0", |
|
textStyle: { |
|
fontSize: 30 |
|
} |
|
}, |
|
grid: { |
|
containLabel:true, |
|
top: 110, |
|
//bottom: 10 |
|
}, |
|
xAxis: { |
|
id:this.organizationId, |
|
type: 'category', |
|
data: this.zhongNameData, |
|
axisLabel:this.padHw?this.axisLabel: { |
|
//this.axisLabel, |
|
interval: 0, |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.data.biaogeTishida(params) |
|
} |
|
}, |
|
series: [{ |
|
data: this.zhongNumData, |
|
type: 'bar', |
|
markPoint: { |
|
|
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'38' |
|
}] |
|
}; |
|
this.detailPlanEchart.setOption(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]; |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':option.xAxis.data[xIndex],'name':this.yuanName,'id':option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); |
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
tableTooltip(params:any){ |
|
var 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:30px;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><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><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
|
res+='</table></div></div>' |
|
return res |
|
} |
|
}
|
|
|