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.
241 lines
9.5 KiB
241 lines
9.5 KiB
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-add-unit-one', |
|
templateUrl: './add-unit-one.component.html', |
|
styleUrls: ['./add-unit-one.component.scss'] |
|
}) |
|
export class AddUnitOneComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
setTimeoutObj//延时器需要清除 |
|
tabledata |
|
padHw |
|
orid//获取本组织id |
|
|
|
ngOnInit(): void { |
|
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(); |
|
} |
|
/* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)) |
|
this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */ |
|
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 |
|
this.setTimeoutObj = window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
}) |
|
this.echartsData.eventEmit.subscribe((value: any) => { |
|
if (value == 'echarts') { |
|
setTimeout(() => { |
|
this.indexBzt.resize() |
|
}, 500); |
|
|
|
} |
|
}); |
|
} |
|
//更新echarts视图 |
|
updateEcharts(){ |
|
this.indexBzt.resize() |
|
} |
|
//获取服务层数据 |
|
async getechartsdata(){ |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
//console.log(this.tabledata) |
|
this.initCharts("pieone") |
|
this.initCharts("pietwo") |
|
} |
|
//组件销毁时 |
|
ngOnDestroy(){ |
|
window.clearTimeout(this.setTimeoutObj); |
|
this.indexBzt.clear() |
|
this.indexBzt.dispose() |
|
} |
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
|
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] |
|
indexBzt//首页饼状图实例 |
|
/* 首页饼状图 */ |
|
lengthBuildData=[] |
|
lengthOrData=[] |
|
buildData=[] |
|
orData=[] |
|
initCharts(tid){ |
|
for(var i=0;i<this.tabledata[0].buildingTypeStatistics.buildingTypes.length;i++){ |
|
this.buildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i]) |
|
this.lengthBuildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i].buildingTypeName) |
|
} |
|
for(var i=0;i<this.tabledata[0].organizationStatistics.organizations.length;i++){ |
|
this.orData.push(this.tabledata[0].organizationStatistics.organizations[i]) |
|
if(this.tabledata[0].organizationStatistics.organizations[i].organizationName.length>5&&this.padHw){ |
|
this.tabledata[0].organizationStatistics.organizations[i].organizationName=this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(0, 5) |
|
+'\n'+this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(5) |
|
} |
|
this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName) |
|
} |
|
this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) |
|
this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}}) |
|
this.indexBzt = echarts.init(document.getElementById(tid),'walden'); |
|
let options={ |
|
title: { |
|
text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`, |
|
left: 'center', |
|
//top: "5%", |
|
//bottom:800, |
|
textStyle: { |
|
fontSize:28 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return tid=="pieone"?this.biaogeTishi(params.data,'one'):this.biaogeTishi(params.data,'two') |
|
//return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
legend: { |
|
//type: tid=="pieone"?'scroll':'', |
|
//orient: 'vertical', |
|
//left: tid=="pieone"?0:650, |
|
//right:30, |
|
//top:100, |
|
//bottom:tid=="pieone"?600:500, |
|
bottom: 90, |
|
left: 'center', |
|
textStyle:{ |
|
fontSize:14, |
|
color:"#000000" |
|
}, |
|
data: tid=="pieone"?this.lengthOrData:this.lengthBuildData |
|
}, |
|
series: [ |
|
{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius:this.padHw?'42%':'50%', |
|
center: ['48%', '53%'], |
|
bottom:130, |
|
left:30, |
|
label:{ |
|
show:true, |
|
fontSize:16, |
|
formatter:'{b}\n{c}家{d|({d}%)}', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
fontSize:16 |
|
} |
|
}, |
|
}, |
|
data:tid=="pieone"?this.orData:this.buildData, |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.indexBzt.on('click', (params) => { |
|
tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" |
|
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tishiData.length>0){ |
|
//总队,支队，大队跳转 |
|
this.tishiData.forEach((value,index,array) => { |
|
if(array[index].organizationId==this.orid){ |
|
array.splice(index,1) |
|
} |
|
if(array.length>0){ |
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id,'type':tid=="pieone"?'zhi':'build'}}); |
|
} |
|
else{ |
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}}); |
|
} |
|
}); |
|
|
|
}else{ |
|
//中队跳转 |
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}}); |
|
} |
|
|
|
|
|
}); |
|
this.indexBzt.setOption(options); |
|
} |
|
res |
|
tishiData |
|
biaogeTishi(datas,type){ |
|
//console.log(datas) |
|
this.res='' |
|
this.tishiData='' |
|
if(type=='two'){ |
|
for(var a in this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes){ |
|
if(this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].buildingTypeName==datas.name){ |
|
this.tishiData=this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].organizations |
|
} |
|
} |
|
}else{ |
|
for(var a in this.echartsData.obdata[0].organizationStatistics.organizations){ |
|
if(this.echartsData.obdata[0].organizationStatistics.organizations[a].organizationId==datas.id){ |
|
this.tishiData=this.echartsData.obdata[0].organizationStatistics.organizations[a].buildingTypes |
|
} |
|
} |
|
} |
|
|
|
//console.log(this.tishiData) |
|
var countall=0//总计 |
|
var countbi=0//站比 |
|
var allCountbi=0//总站比 |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
countall+=this.tishiData[i].count |
|
} |
|
this.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;">'+datas.name+'</span></div>' |
|
this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:14px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
|
this.res+='<thead style="font-size:18px;"><tr>'; |
|
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
|
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
this.res+='</tr></thead>' |
|
this.res+='<tbody>'; |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
|
allCountbi=allCountbi+countbi |
|
this.res+='<tr>' |
|
if(type=='two'){ |
|
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' |
|
} |
|
else{ |
|
this.res+='<td style="text-align:center;">'+this.tishiData[i].buildingTypeName+'</td>' |
|
} |
|
|
|
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' |
|
if(countall==0){ |
|
this.res+='<td style="text-align:center;">0%</td></tr>' |
|
}else{ |
|
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' |
|
} |
|
|
|
} |
|
this.res+='</tbody>' |
|
this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">100%</td></tfoot>' |
|
this.res+='</table></div></div>' |
|
return this.res |
|
} |
|
|
|
|
|
}
|
|
|