|
|
|
|
@ -15,18 +15,31 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
@ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
|
|
|
|
this.route.queryParams.subscribe(param=>{ |
|
|
|
|
this.headname=param.level |
|
|
|
|
this.type=param.type |
|
|
|
|
});
|
|
|
|
|
let paramdata={ |
|
|
|
|
planStatus:this.type |
|
|
|
|
} |
|
|
|
|
this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`) |
|
|
|
|
setTimeout(() => { |
|
|
|
|
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.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.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
|
|
|
|
this.planAdd() |
|
|
|
|
}, 0); |
|
|
|
|
},1000); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngOnDestroy(): void { |
|
|
|
|
} |
|
|
|
|
headname//标题
|
|
|
|
|
type//预案类型
|
|
|
|
|
axisLabel = { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle:{ |
|
|
|
|
@ -67,8 +80,8 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
}//柱状图上方显示数值
|
|
|
|
|
|
|
|
|
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
|
|
|
|
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] |
|
|
|
|
zhiNameData = [] |
|
|
|
|
zhiNumData = [] |
|
|
|
|
tiaoshiPao:any |
|
|
|
|
//气泡提示数据获取
|
|
|
|
|
bianli(){ |
|
|
|
|
@ -82,13 +95,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
//return tishiPao
|
|
|
|
|
} |
|
|
|
|
addEchart |
|
|
|
|
tabledata |
|
|
|
|
organizationId=[] |
|
|
|
|
//预案新增统计
|
|
|
|
|
planAdd () { |
|
|
|
|
let _this = this |
|
|
|
|
this.addEchart = echarts.init(document.getElementById('pie'),'walden'); |
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: _this.headname+"总数（102）", |
|
|
|
|
text: _this.headname+`总数（${this.tabledata[0].totalCount}）`, |
|
|
|
|
left: "center", |
|
|
|
|
top: "0", |
|
|
|
|
bottom: '100%', |
|
|
|
|
@ -96,8 +111,12 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
fontSize: 30 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
grid: { |
|
|
|
|
top: 110, |
|
|
|
|
//bottom: 10
|
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
id:this.organizationId, |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
|
axisLabel:{ |
|
|
|
|
@ -146,323 +165,18 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
if (this.addEchart.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.addEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
passPlanEchartObj |
|
|
|
|
//预案审核通过
|
|
|
|
|
passPlanEchart (){ |
|
|
|
|
let _this = this |
|
|
|
|
this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'),'walden');
|
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: "预案审核通过：总数（1024）", |
|
|
|
|
left: "center", |
|
|
|
|
top: "0", |
|
|
|
|
bottom: '100%', |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 23 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
|
axisLabel: this.axisLabel |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLabel:{ |
|
|
|
|
//this.axisLabel,
|
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :16, |
|
|
|
|
color:'#000000' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.data.biaogeTishi(params.name) |
|
|
|
|
}/* , |
|
|
|
|
position: this.data.tableTooltipNoShow2 */ |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
|
markPoint: { |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
backgroundStyle: { |
|
|
|
|
color: 'rgba(220, 220, 220, 0.8)' |
|
|
|
|
}, |
|
|
|
|
barWidth :'28', |
|
|
|
|
//label: this.topTextlabel
|
|
|
|
|
}] |
|
|
|
|
}; |
|
|
|
|
this.passPlanEchartObj.setOption(option); |
|
|
|
|
this.passPlanEchartObj.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.passPlanEchartObj.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.passPlanEchartObj.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
passMakeEchart |
|
|
|
|
//预案编制
|
|
|
|
|
planMake (){ |
|
|
|
|
let _this = this |
|
|
|
|
this.passMakeEchart = echarts.init(document.getElementById('planMake'),'walden');
|
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: "预案编制：总数（1024）", |
|
|
|
|
left: "center", |
|
|
|
|
top: "0", |
|
|
|
|
bottom: '100%', |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 23 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
|
axisLabel: this.axisLabel |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLabel:{ |
|
|
|
|
//this.axisLabel,
|
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :16, |
|
|
|
|
color:'#000000' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.data.biaogeTishi(params.name) |
|
|
|
|
}/* , |
|
|
|
|
position: this.data.tableTooltipNoShow2 */ |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
|
markPoint: { |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
backgroundStyle: { |
|
|
|
|
color: 'rgba(220, 220, 220, 0.8)' |
|
|
|
|
}, |
|
|
|
|
barWidth :'28', |
|
|
|
|
//label: this.topTextlabel
|
|
|
|
|
}] |
|
|
|
|
}; |
|
|
|
|
this.passMakeEchart.setOption(option); |
|
|
|
|
this.passMakeEchart.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.passMakeEchart.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.passMakeEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
passBackEchart |
|
|
|
|
//预案审核退回
|
|
|
|
|
planBack (){ |
|
|
|
|
let _this = this |
|
|
|
|
this.passBackEchart = echarts.init(document.getElementById('planBack'),'walden');
|
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: "预案审核退回：总数（1024）", |
|
|
|
|
left: "center", |
|
|
|
|
top: "0", |
|
|
|
|
bottom: '100%', |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 23 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
|
axisLabel: this.axisLabel |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLabel:{ |
|
|
|
|
//this.axisLabel,
|
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :16, |
|
|
|
|
color:'#000000' |
|
|
|
|
if(this.data.level=='0'||this.data.level=='1'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':_this.headname,'id':option.xAxis.id[xIndex],'type':this.type}}); |
|
|
|
|
}else{ |
|
|
|
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.data.biaogeTishi(params.name) |
|
|
|
|
}/* , |
|
|
|
|
position: this.data.tableTooltipNoShow2 */ |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
|
markPoint: { |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
backgroundStyle: { |
|
|
|
|
color: 'rgba(220, 220, 220, 0.8)' |
|
|
|
|
}, |
|
|
|
|
barWidth :'28', |
|
|
|
|
//label: this.topTextlabel
|
|
|
|
|
}] |
|
|
|
|
}; |
|
|
|
|
this.passBackEchart.setOption(option); |
|
|
|
|
this.passBackEchart.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.passBackEchart.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.passBackEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
planAuditEchart |
|
|
|
|
//预案审核中
|
|
|
|
|
planAudit (){ |
|
|
|
|
let _this = this |
|
|
|
|
this.planAuditEchart = echarts.init(document.getElementById('planAudit'),'walden');
|
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: "预案审核中：总数（1024）", |
|
|
|
|
left: "center", |
|
|
|
|
top: "0", |
|
|
|
|
bottom: '100%', |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 23 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
|
axisLabel: this.axisLabel |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLabel:{ |
|
|
|
|
//this.axisLabel,
|
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :16, |
|
|
|
|
color:'#000000' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.data.biaogeTishi(params.name) |
|
|
|
|
}/* , |
|
|
|
|
position: this.data.tableTooltipNoShow2 */ |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
|
markPoint: { |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
backgroundStyle: { |
|
|
|
|
color: 'rgba(220, 220, 220, 0.8)' |
|
|
|
|
}, |
|
|
|
|
barWidth :'28', |
|
|
|
|
//label: this.topTextlabel
|
|
|
|
|
}] |
|
|
|
|
}; |
|
|
|
|
this.planAuditEchart.setOption(option); |
|
|
|
|
this.planAuditEchart.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.planAuditEchart.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.planAuditEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
passPlanEchartObj |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
topEchart |
|
|
|
|
//预案状态统计
|
|
|
|
|
planState(){ |
|
|
|
|
this.topEchart = echarts.init(document.getElementById('pie'),'walden');
|
|
|
|
|
var option = { |
|
|
|
|
title: { |
|
|
|
|
text: '预案状态统计（7005份）', |
|
|
|
|
left: 'center', |
|
|
|
|
top: "6%", |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 30 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.data.biaogeTishiZhi(params.name) |
|
|
|
|
}, |
|
|
|
|
position: this.data.tableTooltipNoShow2 |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
orient: 'vertical', |
|
|
|
|
right: '13%', |
|
|
|
|
top: "26%", |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize:18, |
|
|
|
|
color:"#000000" |
|
|
|
|
},
|
|
|
|
|
data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '75%', |
|
|
|
|
center: ['50%', '60%'], |
|
|
|
|
data: [ |
|
|
|
|
{value: 1585, name: '预案新增'}, |
|
|
|
|
{value: 2000, name: '预案审核通过'}, |
|
|
|
|
{value: 2600, name: '预案编制'}, |
|
|
|
|
{value: 1500, name: '预案审核退回'}, |
|
|
|
|
{value: 1800, name: '预案审核中'} |
|
|
|
|
], |
|
|
|
|
label: { |
|
|
|
|
formatter: '{b}({c}份)\n{d|{d}%}', |
|
|
|
|
fontSize :18, |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
fontSize :18 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
this.topEchart.setOption(option); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
tableTooltip(biaotou:string){ |
|
|
|
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' |
|
|
|
|
|
chenjingyu
4 years ago