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.
258 lines
12 KiB
258 lines
12 KiB
/* |
|
* @Descripttion: |
|
* @version: |
|
* @Author: sueRimn |
|
* @Date: 2020-09-01 15:24:39 |
|
* @LastEditors: sueRimn |
|
* @LastEditTime: 2021-07-07 14:07:26 |
|
*/ |
|
import { Component, OnInit } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
import {EchartsDataService,} from '../../echarts-data.service' |
|
declare var echarts: any; |
|
declare var CryptoJS |
|
|
|
@Component({ |
|
selector: 'app-page-one', |
|
templateUrl: './page-one.component.html', |
|
styleUrls: ['./page-one.component.scss'] |
|
}) |
|
export class PageOneComponent implements OnInit { |
|
options:any; |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
padHw |
|
orid |
|
ngOnInit() { |
|
if(window.matchMedia("(max-width: 1400px)").matches){ |
|
this.padHw=true |
|
//this.padjt= |
|
}else{ |
|
this.padHw=false |
|
} |
|
if(sessionStorage.getItem('refresh') === 'true') { |
|
sessionStorage.removeItem('refresh'); |
|
location.reload(); |
|
} |
|
|
|
window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
}) |
|
let jwt = sessionStorage.getItem("token"); |
|
let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]); |
|
let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt); |
|
let identityJsonparse=JSON.parse(identityJson) |
|
this.orid=identityJsonparse.oid |
|
//console.log(identityJsonparse) |
|
} |
|
ngOnDestroy(): void { |
|
this.indexBzt.clear() |
|
this.indexBzt.dispose() |
|
} |
|
async getechartsdata(){ |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`) |
|
this.initCharts("pieone") |
|
this.initCharts("pietwo") |
|
} |
|
|
|
/* 首页饼状图 */ |
|
indexBzt |
|
tabledata |
|
count |
|
indexData |
|
planCategoriesData=[] |
|
planStatusesData=[] |
|
initCharts(tid){ |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
if(tid=='pieone') |
|
{ |
|
this.tabledata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => { |
|
if(array[index].planCategoryName=='LevelOne'){ |
|
this.planCategoriesData.push({name:'Ⅰ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:1}) |
|
}else if(array[index].planCategoryName=='LevelTwo'){ |
|
this.planCategoriesData.push({name:'Ⅱ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:2}) |
|
}else if(array[index].planCategoryName=='LevelThree'){ |
|
this.planCategoriesData.push({name:'Ⅲ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:3}) |
|
}else if(array[index].planCategoryName=='LevelFour'){ |
|
this.planCategoriesData.push({name:'Ⅳ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:4}) |
|
}else if(array[index].planCategoryName=='LevelFive'){ |
|
this.planCategoriesData.push({name:'Ⅴ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:5}) |
|
} |
|
}); |
|
}else{ |
|
this.tabledata[0].planStatusStatistics.planStatuses.forEach((value,index,array) => { |
|
if(array[index].planStatusName=='New'){ |
|
this.planStatusesData.push({name:'预案新增',value:array[index].count,type:1,planStatusName:array[index].planStatusName}) |
|
}else if(array[index].planStatusName=='Auditing'){ |
|
this.planStatusesData.push({name:'预案审核通过',value:array[index].count,type:3,planStatusName:array[index].planStatusName}) |
|
}else if(array[index].planStatusName=='Approved'){ |
|
this.planStatusesData.push({name:'预案编制',value:array[index].count,type:5,planStatusName:array[index].planStatusName}) |
|
}else if(array[index].planStatusName=='Rejected'){ |
|
this.planStatusesData.push({name:'预案审核退回',value:array[index].count,type:4,planStatusName:array[index].planStatusName}) |
|
}else if(array[index].planStatusName=='Editing'){ |
|
this.planStatusesData.push({name:'预案审核中',value:array[index].count,type:2,planStatusName:array[index].planStatusName}) |
|
} |
|
}); |
|
} |
|
|
|
|
|
var ec = echarts as any; |
|
this.indexBzt = ec.init(document.getElementById(tid),'walden'); |
|
var options={ |
|
title: { |
|
text:tid=='pieone'?`预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` :`预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`, |
|
top: "7%", |
|
left: 'center', |
|
textStyle:{ |
|
fontSize:this.padHw?25: 31 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
this.echartsData.biaogeTishiyuan(params.data,tid) |
|
return this.echartsData.res |
|
} |
|
}, |
|
legend: { |
|
bottom: 50, |
|
left: 'center', |
|
//padding:20, |
|
// itemWidth:60, |
|
// itemHeight:25, |
|
textStyle:{ |
|
fontSize:this.padHw?15: 18, |
|
color:"#000000" |
|
}, |
|
data:tid=='pieone'?['Ⅰ级预案', 'Ⅱ级预案', 'Ⅲ级预案', 'Ⅳ级预案', 'Ⅴ级预案'] :['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] |
|
}, |
|
series: [ |
|
{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius: '50%', |
|
center: ['50%', '45%'], |
|
label:{ |
|
normal:{ |
|
show:true, |
|
// position: 'inner', |
|
fontSize:this.padHw?14: 18, |
|
formatter:this.padHw?'{b} \n{c}份({d}%)' :'{b} {c}份\n({d}%)', |
|
}, |
|
rich: { |
|
d: { |
|
align: 'center', |
|
} |
|
}, |
|
|
|
}, |
|
data:tid=='pieone'?this.planCategoriesData:this.planStatusesData, |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.indexBzt.on('click', (params) => { |
|
// console.log(params) |
|
if(tid=='pieone'){ |
|
for(var i=0;i<this.tabledata[0].planCategoryStatistics.planCategories.length;i++){ |
|
if(this.tabledata[0].planCategoryStatistics.planCategories[i].planCategoryName==params.data.planStatusName){ |
|
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){ |
|
this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.forEach((element,index,array) => { |
|
if(array[index].organizationId==this.orid){ |
|
array.splice(index,1) |
|
} |
|
window.setTimeout(()=>{ |
|
if(array.length>0){ |
|
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone'}}); |
|
} |
|
else{ |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pieone'}}); |
|
} |
|
}) |
|
}); |
|
|
|
} |
|
else if(this.echartsData.level=='3'){ |
|
//中队跳转 |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pieone'}}); |
|
} |
|
} |
|
} |
|
}else{ |
|
for(var i=0;i<this.tabledata[0].planStatusStatistics.planStatuses.length;i++){ |
|
if(this.tabledata[0].planStatusStatistics.planStatuses[i].planStatusName==params.data.planStatusName){ |
|
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.length>0){ |
|
this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.forEach((element,index,array) => { |
|
if(array[index].organizationId==this.orid){ |
|
array.splice(index,1) |
|
} |
|
window.setTimeout(()=>{ |
|
if(array.length>0){ |
|
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pietwo'}}); |
|
} |
|
else{ |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); |
|
} |
|
}) |
|
}); |
|
|
|
} |
|
else if(this.echartsData.level=='3'){ |
|
//中队跳转 |
|
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
}); |
|
this.indexBzt.setOption(options); |
|
} |
|
/** |
|
* @name: 表格提示框封装 |
|
* @test: test font |
|
* @msg: |
|
* @param {string(表头)} |
|
* @return {type} |
|
*/ |
|
biaogeTishi(biaotou:string){ |
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' |
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
|
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
|
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
|
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
|
var jsonObj = JSON.parse(shuju); |
|
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:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
|
res+='<thead><tr>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
|
res+='</tr></thead>' |
|
res+='<tbody>'; |
|
for(var i=0;i<jsonObj.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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 |
|
} |
|
|
|
}
|
|
|