陈鹏飞 4 years ago
parent
commit
0abf9bb167
  1. 159
      src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts
  2. 12
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html
  3. 113
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts
  4. 12
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html
  5. 46
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts
  6. 2
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html
  7. 142
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  8. 54
      src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts
  9. 65
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  10. 5
      src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
  11. 70
      src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts
  12. 73
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
  13. 2
      src/app/statistic-analysis/compang-info/compang-info.component.ts
  14. 108
      src/app/statistic-analysis/echarts-data.service.ts
  15. 29
      src/app/statistic-analysis/state/page-one/page-one.component.ts
  16. 6
      src/app/statistic-analysis/state/page-there-year/page-there-year.component.html
  17. 32
      src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts
  18. 6
      src/app/statistic-analysis/state/page-there/page-there.component.html
  19. 55
      src/app/statistic-analysis/state/page-there/page-there.component.ts
  20. 352
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
  21. 633
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
  22. 37
      src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

159
src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

@ -12,13 +12,15 @@ export class AddUnitOneComponent implements OnInit {
constructor(private router: Router,public echartsData:EchartsDataService) { } constructor(private router: Router,public echartsData:EchartsDataService) { }
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
buildData=[] tabledata
orData
ngOnInit(): void { ngOnInit(): void {
/* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)) /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`))
this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */ this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */
this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`)
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata)
this.initCharts("pieone") this.initCharts("pieone")
this.initCharts("pietwo") this.initCharts("pietwo")
},1000) },1000)
@ -45,12 +47,25 @@ export class AddUnitOneComponent implements OnInit {
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
indexBzt//首页饼状图实例 indexBzt//首页饼状图实例
/* 首页饼状图 */ /* 首页饼状图 */
initCharts(id){ lengthBuildData=[]
lengthOrData=[]
this.indexBzt = echarts.init(document.getElementById(id),'walden'); 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])
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={ let options={
title: { title: {
text:id=="pieone"? '组织机构统计(8900家)':'建筑类型统计(8900家)', text:tid=="pieone"? `组织机构统计(${this.tabledata[0].organizationStatistics.totalCount}家)`:`建筑类型统计(${this.tabledata[0].buildingTypeStatistics.totalCount}家)`,
left: 'center', left: 'center',
top: "5%", top: "5%",
textStyle: { textStyle: {
@ -60,7 +75,9 @@ export class AddUnitOneComponent implements OnInit {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.echartsData.tableTooltip(id=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) console.log(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 position:this.echartsData.tableTooltipNoShow2
}, },
@ -72,7 +89,7 @@ export class AddUnitOneComponent implements OnInit {
fontSize:14, fontSize:14,
color:"#000000" color:"#000000"
}, },
data: id=="pieone"?this.zhiNameData:this.buildingData data: tid=="pieone"?this.lengthOrData:this.lengthBuildData
}, },
series: [ series: [
{ {
@ -91,39 +108,7 @@ export class AddUnitOneComponent implements OnInit {
} }
}, },
}, },
data:id=="pieone"?[ data:tid=="pieone"?this.orData:this.buildData,
{value: 500, name: this.zhiNameData[0]},
{value: 800, name: this.zhiNameData[1]},
{value: 900, name: this.zhiNameData[2]},
{value: 800, name: this.zhiNameData[3]},
{value: 1200, name: this.zhiNameData[4]},
{value: 1500, name: this.zhiNameData[5]},
{value: 1400, name: this.zhiNameData[6]},
{value: 600, name: this.zhiNameData[7]},
{value: 568, name: this.zhiNameData[8]},
{value: 888, name: this.zhiNameData[9]},
{value: 485, name: this.zhiNameData[10]},
{value: 966, name: this.zhiNameData[11]},
{value: 789, name: this.zhiNameData[12]},
{value: 500, name: this.zhiNameData[13]},
]:[
{value: 500, name: '高层'},
{value: 800, name: '地下'},
{value: 900, name: '轨道交通'},
{value: 800, name: '化工生产'},
{value: 1200, name: '储罐类'},
{value: 1500, name: '厂房'},
{value: 1400, name: '古建筑'},
{value: 600, name: '商市场'},
{value: 568, name: '医院'},
{value: 888, name: '学校'},
{value: 485, name: '宾馆'},
{value: 966, name: '娱乐场所'},
{value: 789, name: '餐饮业'},
{value: 500, name: '影剧院'},
{value: 1025, name: '展览建筑'},
{value: 600, name: '隧道'}],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
@ -135,40 +120,72 @@ export class AddUnitOneComponent implements OnInit {
] ]
}; };
this.indexBzt.on('click', (params) => { this.indexBzt.on('click', (params) => {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name}}); if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
id=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" //总队,支队,大队跳转
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id}});
}else{
//中队跳转
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building"
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }
biaogeTishi(biaotou:string){ res
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' tishiData
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' biaogeTishi(datas,type){
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' console.log(datas)
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' this.res=''
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' this.tishiData=''
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' if(type=='two'){
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' for(var a in this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes){
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' if(this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].buildingTypeName==datas.name){
var jsonObj = JSON.parse(shuju); this.tishiData=this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].organizations
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>'; }else{
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; for(var a in this.echartsData.obdata[0].organizationStatistics.organizations){
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' if(this.echartsData.obdata[0].organizationStatistics.organizations[a].organizationId==datas.id){
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' this.tishiData=this.echartsData.obdata[0].organizationStatistics.organizations[a].buildingTypes
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>' console.log(this.tishiData)
return res 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:16px; 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>'
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;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
this.res+='</table></div></div>'
return this.res
} }

12
src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html

@ -1,6 +1,14 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-12-24 10:59:48
* @LastEditors: sueRimn
* @LastEditTime: 2021-03-13 17:10:44
-->
<div class="box"> <div class="box">
<div class="header"> <div class="header">
<div class="queryField"> <!-- <div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> <form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span> <span>查询年份:</span>
<mat-form-field> <mat-form-field>
@ -16,7 +24,7 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button> <button type="submit" mat-raised-button color="primary">查询</button>
</form> </form>
</div> </div> -->
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button (click)="backBtn()">返回</button> <button mat-stroked-button (click)="backBtn()">返回</button>

113
src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts

@ -15,22 +15,38 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
time:String time:String
buildingTypeName:String buildingTypeName:String
level:String //level:String
orId//上个页面传过来的组织id
buildId//上个页面传过来的建筑id
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
tabledata
organizationId=[]
ngOnInit(): void { ngOnInit(): void {
this.dateInit () this.dateInit ()
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.time = params['time']; this.time = params['time'];
this.buildingTypeName = params['buildingTpye']; this.buildingTypeName = params['buildingTpye'];
this.level = params['level']; this.buildId=params['id']
this.bianli() this.orId=params['zhuid']
}); });
let paramsdata={
//id:this.buildId,
organizationId:this.orId
}
this.serviceData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
this.setTimeoutObj = window.setTimeout(()=>{ 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.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.detailEcharts() this.detailEcharts()
},0) },1000)
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
@ -72,22 +88,15 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [300,290,280,270,260,250,240,230,220,210,200] zhongNumData = [300,290,280,270,260,250,240,230,220,210,200]
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] zhiNameData = []
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] zhiNumData = []
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
this.tiaoshiPao=null this.tiaoshiPao=null
var arrshuzu='['; var arrshuzu='[';
if(this.level == 'zhidui'){ for(var i=0;i<this.zhiNumData.length;i++){
for(var i=0;i<this.zhiNumData.length;i++){ arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
}
else{
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
} }
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
@ -102,15 +111,20 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden'); this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
this.option = { this.option = {
title: { title: {
text: this.time + '(' +this.buildingTypeName + ')'+':总数(666)', text: this.time + '' +this.buildingTypeName +`:总数(${this.tabledata[0].totalCount})`,
left: "center", left: "center",
textStyle: { textStyle: {
fontSize: 30 fontSize: 30
} }
}, },
grid: {
top: 110,
//bottom: 10
},
xAxis: { xAxis: {
id:this.organizationId,
type: 'category', type: 'category',
data:this.level=="zhidui"? this.zhiNameData:this.zhongNameData, data:this.zhiNameData,
axisLabel:{ axisLabel:{
//this.axisLabel, //this.axisLabel,
textStyle:{ textStyle:{
@ -134,7 +148,7 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(params) return this.tiao==false? this.serviceData.biaogeTishida(params):this.tableTooltip(params)
}, },
position:this.serviceData.tableTooltipNoShowq position:this.serviceData.tableTooltipNoShowq
}, },
@ -154,35 +168,72 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
}; };
this.detailPlanEchart.setOption(this.option); this.detailPlanEchart.setOption(this.option);
this.detailPlanEchart.on("click",(params)=>{ this.detailPlanEchart.getZr().on("click",(params)=>{
if(this.level == "zhidui"){//如果是支队则跳转 const pointInPixel= [params.offsetX, params.offsetY];
// this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}}); if (this.detailPlanEchart.containPixel('grid',pointInPixel)){
this.level = "zhongdui" let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
console.log(this.organizationId,this.option.xAxis.id)
if(this.serviceData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
//总队不跳
console.log(params)
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{
console.log(this.organizationId,this.option.xAxis.id)
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':this.option.xAxis.data[xIndex],'type':1,'jsid':this.option.xAxis.id[xIndex]}});
}
}
/* if(this.serviceData.level == "1"){//
this.option.title.text = params.name + '(' +this.buildingTypeName + ')' this.option.title.text = params.name + '(' +this.buildingTypeName + ')'
this.option.xAxis.data = this.zhongNameData this.option.xAxis.data = this.zhongNameData
this.option.series[0].data = this.zhongNumData this.option.series[0].data = this.zhongNumData
this.detailPlanEchart.setOption(this.option) this.detailPlanEchart.setOption(this.option)
}else{ } */
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
}) })
} }
tiao=false
//返回按钮 //返回按钮
backBtn(){ backBtn(){
if(this.level == "zhongdui"){ /* if(this.level == "zhongdui"){
this.level = "zhidui" this.level = "zhidui"
this.option.title.text = this.time + '(' +this.buildingTypeName + ')' this.option.title.text = this.time + '(' +this.buildingTypeName + ')'
this.option.xAxis.data = this.zhiNameData this.option.xAxis.data = this.zhiNameData
this.option.series[0].data = this.zhiNumData this.option.series[0].data = this.zhiNumData
this.detailPlanEchart.setOption(this.option) this.detailPlanEchart.setOption(this.option)
}else{ }else{
window.history.go(-1)
} } */
window.history.go(-1)
} }
tableTooltip(params:any){ tableTooltip(params:any){
var data var data
if(this.level == "zhidui"){ if(this.serviceData.level == "1"){
data = this.serviceData.tableDataZhong data = this.serviceData.tableDataZhong
}else{ }else{
data = [ data = [
@ -205,7 +256,7 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
} }
res+='</tbody>' res+='</tbody>'
res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>' 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>' res+='</table></div></div>'
return res return res
} }

12
src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html

@ -1,6 +1,14 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-12-24 10:59:48
* @LastEditors: sueRimn
* @LastEditTime: 2021-03-13 16:21:26
-->
<div class="box"> <div class="box">
<div class="header"> <div class="header">
<div class="queryField"> <!-- <div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> <form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span> <span>查询年份:</span>
<mat-form-field> <mat-form-field>
@ -10,7 +18,7 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button> <button type="submit" mat-raised-button color="primary">查询</button>
</form> </form>
</div> </div> -->
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button (click)="backBtn()">返回</button> <button mat-stroked-button (click)="backBtn()">返回</button>

46
src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts

@ -18,16 +18,18 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
level:String level:String
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
qopao qopao
lastId
ngOnInit(): void { ngOnInit(): void {
this.qopao=this.serviceData.qipao(this.qopao,this.dateNum,this.zhiNameData) this.serviceData.selectType=0
this.dateInit () this.dateInit ()
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.year = params['year']; this.year = params['year'];
this.buildingTypeName = params['buildingType']; this.buildingTypeName = params['buildingType'];
this.lastId=params['id']
}); });
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.detailEcharts() this.getdata()
}) },1000)
} }
ngOnDestroy(){ ngOnDestroy(){
@ -35,6 +37,37 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
this.detailPlanEchart.clear() this.detailPlanEchart.clear()
this.detailPlanEchart.dispose() this.detailPlanEchart.dispose()
} }
tabledata
zongcount=0
getdata(){
let parzhi={
BuildingTypeId:this.lastId,
TrendType:this.serviceData.selectType,
//TrendYear:this.year||''
}
let parbuild={
OrganizationId:this.lastId,
TrendType:this.serviceData.selectType,
//TrendYear:this.year||''
}
this.serviceData.getData(this.serviceData.zuzhiorBuilding=='zhi'?parbuild:parzhi,`/api/StatisticsAnalysis`)
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].companyStatistics.trendStatistics.added.length;i++){
if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.serviceData.selectStartMonth||this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.serviceData.selectEndMonth){
this.date.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
this.dateNum.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
this.zongcount=this.zongcount+this.tabledata[0].companyStatistics.trendStatistics.added[i].count
}
}
//this.oneInit (this.date,this.dateNum)
this.qopao=this.serviceData.qipao(this.qopao,this.dateNum,this.zhiNameData)
this.detailEcharts()
}, 1000);
}
selectType:string = 'month'; //选择当前的 查询类型 按月/年 selectType:string = 'month'; //选择当前的 查询类型 按月/年
@ -75,8 +108,8 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
detailPlanEchart detailPlanEchart
option option
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] date = []
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] dateNum = []
detailEcharts(){ detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp'); this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');
@ -171,7 +204,8 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.buildingTypeName,'id':this.lastId}})
//this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}});
} }
}); });
} }

2
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-05 13:50:45 * @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-03-10 15:19:25 * @LastEditTime: 2021-03-13 14:41:42
--> -->
<div class="box"> <div class="box">
<div class="header"> <div class="header">

142
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts

@ -10,25 +10,24 @@ declare var echarts: any;
styleUrls: ['./add-unit-two-time.component.scss'] styleUrls: ['./add-unit-two-time.component.scss']
}) })
export class AddUnitTwoTimeComponent implements OnInit { export class AddUnitTwoTimeComponent implements OnInit {
forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname}})
}
reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname}})
}
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { } constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { }
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
headname headname
type=1
lastId
tabledata
zongcount=0
ngOnInit(): void { ngOnInit(): void {
console.log(this.serviceData.zuzhiorBuilding)
this.serviceData.selectType=0
this.dateInit () this.dateInit ()
this.bianli()
this.route.queryParams.subscribe(param=>{ this.route.queryParams.subscribe(param=>{
this.headname=param.level this.headname=param.level
//this.type=param.type
this.lastId=param.id
}); });
this.setTimeoutObj = setTimeout(() => { this.getdata()
//this.oneInit (this.date,this.dateNum)
this.twoInit (this.date,this.dateNum,'month')
}, 0);
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
@ -38,17 +37,54 @@ export class AddUnitTwoTimeComponent implements OnInit {
}) })
} }
//获取数据
yeardatee
getdata(){
let parzhi={
BuildingTypeId:this.lastId,
TrendType:this.serviceData.selectType,
TrendYear:this.yeardatee||''
}
let parbuild={
OrganizationId:this.lastId,
TrendType:this.serviceData.selectType,
TrendYear:this.yeardatee||''
}
this.serviceData.getData(this.serviceData.zuzhiorBuilding=='zhi'?parbuild:parzhi,`/api/StatisticsAnalysis`)
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].companyStatistics.trendStatistics.added.length;i++){
if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.serviceData.selectStartMonth||this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.serviceData.selectEndMonth){
this.date.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
this.dateNum.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
this.zongcount=this.zongcount+this.tabledata[0].companyStatistics.trendStatistics.added[i].count
}
}
//this.oneInit (this.date,this.dateNum)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
this.twoInit (this.date,this.dateNum,'month')
}, 1000);
}
forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId}})
}
reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId}})
}
selectType:string = 'month'; //选择当前的 查询类型 按月/年 selectType:string = 'month'; //选择当前的 查询类型 按月/年
//查询数据 //查询数据
years:any = [] years:any = [2020,2021]
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
//日期初始化 //日期初始化
dateInit () { dateInit () {
let date = (new Date()).getFullYear() let date = (new Date()).getFullYear()
for (let i=date; i>=date-10;i--) { for (let i=date; i>=date-10;i--) {
this.years.unshift(i) //this.years.unshift(i)
} }
} }
selectOneYear:any = (new Date()).getFullYear() //开始年份 selectOneYear:any = (new Date()).getFullYear() //开始年份
@ -57,24 +93,27 @@ export class AddUnitTwoTimeComponent implements OnInit {
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份 selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
//按月查询 //按月查询
monthSubmit (e) { monthSubmit (e) {
if (e.selectTwoYear > e.selectOneYear) { this.serviceData.selectStartMonth=this.selectStartMonth
this.serviceData.selectEndMonth=this.selectEndMonth
console.log(this.selectStartMonth,this.selectEndMonth)
this.date=[]
this.dateNum=[]
this.zongcount=0
if (e.selectEndMonth>=e.selectStartMonth) {
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
//console.log(startTime) for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){
//console.log(endTime) if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.serviceData.selectStartMonth&&this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.serviceData.selectEndMonth){
} else if (e.selectTwoYear === e.selectOneYear) { this.date.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
if(e.selectEndMonth >= e.selectStartMonth) { this.dateNum.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 this.zongcount=this.zongcount+this.tabledata[0].companyStatistics.trendStatistics.added[i].count
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 }
//console.log(startTime)
//console.log(endTime)
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择正确时间区段','确定',config);
} }
}else { console.log(this.dateNum)
//this.oneInit (this.date,this.dateNum)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
this.twoInit (this.date,this.dateNum,'month')
} else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
@ -105,11 +144,29 @@ export class AddUnitTwoTimeComponent implements OnInit {
}) })
if(this.selectType == "year"){ if(this.selectType == "year"){
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2) this.zongcount=0
//this.oneInit(this.date2,this.dateNum2) this.serviceData.selectType=2
this.twoInit(this.date2,this.dateNum2,'year') let paramdata={
BuildingTypeId:this.lastId,
TrendType:this.serviceData.selectType
}
this.serviceData.getData(paramdata,`/api/StatisticsAnalysis`)
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].companyStatistics.trendStatistics.added.length;i++){
this.dateNum2.push(this.tabledata[0].companyStatistics.trendStatistics.added[0].count)
this.zongcount=this.zongcount+this.tabledata[0].companyStatistics.trendStatistics.added[i].count
}
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
this.twoInit (this.date2,this.dateNum2,'year')
}, 1000);
/* this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
this.twoInit(this.date2,this.dateNum2,'year') */
} }
if(this.selectType == "month"){ if(this.selectType == "month"){
this.serviceData.selectType=0
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
//this.oneInit(this.date,this.dateNum) //this.oneInit(this.date,this.dateNum)
this.twoInit(this.date,this.dateNum,'month') this.twoInit(this.date,this.dateNum,'month')
@ -151,8 +208,8 @@ export class AddUnitTwoTimeComponent implements OnInit {
{id:'suidao',name:'隧道',echart:null}] {id:'suidao',name:'隧道',echart:null}]
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] date = []
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] dateNum = []
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
@ -167,8 +224,8 @@ export class AddUnitTwoTimeComponent implements OnInit {
//return tishiPao //return tishiPao
} }
date2 = ['2019', '2020'] date2 = ['2020', '2021']
dateNum2 = [220, 180] dateNum2 = [0]
//新增数量统计 //新增数量统计
oneInit (date,dateNum) { oneInit (date,dateNum) {
@ -271,7 +328,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
}, },
// 标题 // 标题
title: { title: {
text: this.headname+':总数(1012)', text: this.headname+`:总数(${this.zongcount}`,
top: -4, top: -4,
left: 'center', left: 'center',
textStyle:{ textStyle:{
@ -355,9 +412,18 @@ export class AddUnitTwoTimeComponent implements OnInit {
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
// console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name)
if(option.series[0].name == "year"){ if(option.series[0].name == "year"){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname}}); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname,'id':this.lastId}});
/* this.selectType="month"
this.yeardatee=option.xAxis.data[xIndex]
this.getdata() */
}else{ }else{
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}}); if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){
//this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}});
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId}})
}
} }
} }

54
src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts

@ -28,15 +28,33 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
organizationName:String organizationName:String
buildingTypeName:String buildingTypeName:String
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
lastId
canshuId
tabledata
thisorId=[]
ngOnInit(): void { ngOnInit(): void {
this.bianli()
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.organizationName = params['organizationName']; this.organizationName = params['organizationName'];
this.buildingTypeName = params['buildingTypeName']; this.buildingTypeName = params['buildingTypeName'];
this.lastId=params['id']
this.canshuId=params['zhuId']
}); });
let paramsdata:any = {
//id:this.echartsData.zuzhiorBuilding=='zhi'? this.canshuId:this.lastId,
organizationId:this.echartsData.zuzhiorBuilding=='zhi'?this.lastId:this.canshuId
}
this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.echartsData.zuzhiorBuilding=='zhi'?this.canshuId:this.lastId}`)
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.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.thisorId.push(this.tabledata[0].organizations[i].organizationId)
}
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
this.detailEcharts() this.detailEcharts()
}) },1000)
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
@ -53,18 +71,22 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
fontSize: 12 fontSize: 12
} }
}//柱状图数值顶部显示 }//柱状图数值顶部显示
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNameData = []
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] zhongNumData = []
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
var arrshuzu='['; console.log(this.zhongNumData)
if(this.zhongNumData.length>=1){
var arrshuzu='[';
for(var i=0;i<this.zhongNumData.length;i++){ for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},' arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
} }
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']' arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu) this.tiaoshiPao=JSON.parse(arrshuzu)
}
//return tishiPao //return tishiPao
} }
@ -73,7 +95,7 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden'); this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
var option = { var option = {
title: { title: {
text: this.buildingTypeName + '(' +this.organizationName + ')'+':总数(666)', text: this.buildingTypeName + '(' +this.organizationName + ')'+`:总数(${this.tabledata[0].totalCount})`,
left: "center", left: "center",
bottom: "500", bottom: "500",
textStyle: { textStyle: {
@ -81,6 +103,7 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
} }
}, },
xAxis: { xAxis: {
id:this.thisorId,
type: 'category', type: 'category',
data: this.zhongNameData, data: this.zhongNameData,
axisLabel:{ axisLabel:{
@ -106,7 +129,7 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(params) return this.echartsData.biaogeTishida(params)
} }
}, },
series: [{ series: [{
@ -124,11 +147,18 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
}] }]
}; };
this.detailPlanEchart.setOption(option); this.detailPlanEchart.setOption(option);
this.detailPlanEchart.on('click', (params) => { this.detailPlanEchart.getZr().on('click', (params) => {
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}}); const pointInPixel= [params.offsetX, params.offsetY];
/* const dialogRef = this.dialog.open(CompangInfoComponent, { if (this.detailPlanEchart.containPixel('grid',pointInPixel)){
width:"400px", let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
}); */ if(this.echartsData.level=='0'||this.echartsData.level=='1'){
//总队和支队跳转
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'time':'','buildingTpye':option.xAxis.data[xIndex]+this.organizationName,'zhuid':option.xAxis.id[xIndex],'id':this.canshuId}});
}else{
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
}
}); });
} }

65
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts

@ -12,23 +12,49 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { }
forward(){ forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname}}) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId}})
} }
reverse(){ reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname}}) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId}})
} }
url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址 url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
headname headname
lastId
organizationId=[]
buildingTypeId=[]
ngOnInit(): void { ngOnInit(): void {
//this.data.zuzhiorBuilding=="zhi"
this.route.queryParams.subscribe(param=>{ this.route.queryParams.subscribe(param=>{
this.headname=param.level this.headname=param.level
this.lastId=param.id
}); });
let paramsdata:any = {
id:this.lastId,
//organizationId:'1'
}
this.data.getData(paramsdata,this.data.zuzhiorBuilding=="zhi"?`/api/StatisticsAnalysis/Companies/Organizations/${this.lastId}`:`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.lastId}`)
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.bianli() this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
console.log(this.tabledata)
if(this.data.zuzhiorBuilding=="zhi"){
for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){
this.buildingData.push(this.tabledata[0].buildingTypes[i].buildingTypeName)
this.buildnumData.push(this.tabledata[0].buildingTypes[i].count)
this.buildingTypeId.push(this.tabledata[0].buildingTypes[i].buildingTypeId)
}
}else{
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.data.zuzhiorBuilding=="zhi"?this.buildnumData:this.zhiNumData,this.data.zuzhiorBuilding=="zhi"?this.buildingData:this.zhiNameData)
//this.initCharts() //this.initCharts()
this.barEcharts() this.barEcharts()
},0) },1000)
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
@ -112,8 +138,8 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{name:"松江中队",number:"75",zhanbi:"0.5%"}, {name:"松江中队",number:"75",zhanbi:"0.5%"},
{name:"金山中队",number:"65",zhanbi:"0.4%"}, {name:"金山中队",number:"65",zhanbi:"0.4%"},
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] {name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNameData = []
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] zhiNumData = []
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
@ -163,8 +189,8 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{id:'yingyuan',name:'影剧院',echart:null}, {id:'yingyuan',name:'影剧院',echart:null},
{id:'zhanlan',name:'展览建筑',echart:null}, {id:'zhanlan',name:'展览建筑',echart:null},
{id:'suidao',name:'隧道',echart:null}] {id:'suidao',name:'隧道',echart:null}]
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] buildingData=[]
buildnumData=[200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50,40] buildnumData=[]
indexBzt //顶部饼状图 indexBzt //顶部饼状图
/* 顶部饼状图 */ /* 顶部饼状图 */
initCharts(){ initCharts(){
@ -261,13 +287,15 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }
//柱状图 //柱状图
tabledata
barEcharts(){ barEcharts(){
this.forArr.forEach(item=>{ this.forArr.forEach(item=>{
let _this = this let _this = this
item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); item.echart = echarts.init(document.getElementById('gaoceng'),'walden');
let option = { let option = {
title: { title: {
text: this.headname+':总数(1024)', text: this.headname+`:总数(${this.tabledata[0].totalCount}`,
left: "center", left: "center",
top: "0", top: "0",
//bottom: '80%', //bottom: '80%',
@ -276,6 +304,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
} }
}, },
xAxis: { xAxis: {
id:this.data.zuzhiorBuilding=="zhi"?this.buildingTypeId:this.organizationId,
type: 'category', type: 'category',
data:this.data.zuzhiorBuilding=="zhi"?this.buildingData: this.zhiNameData, data:this.data.zuzhiorBuilding=="zhi"?this.buildingData: this.zhiNameData,
axisLabel:{ axisLabel:{
@ -302,7 +331,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name) return this.data.zuzhiorBuilding=="zhi"?this.data.biaogeTishiZhi(params): this.data.biaogeTishida(params)
}, },
position: this.data.tableTooltipNoShow2 position: this.data.tableTooltipNoShow2
}, },
@ -320,8 +349,20 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
}] }]
}; };
item.echart.setOption(option); item.echart.setOption(option);
item.echart.on('click', (params) => { item.echart.getZr().on('click', (params) => {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':this.headname}}) const pointInPixel= [params.offsetX, params.offsetY];
if (item.echart.containPixel('grid',pointInPixel)){
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(this.data.level=='0'||this.data.level=='1'){
//总队,支队跳转
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'id':this.lastId,'zhuId':option.xAxis.id[xIndex]}})
}
else{
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
}
}); });
}) })

5
src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts

@ -14,6 +14,7 @@ export class BuildingTypeOneComponent implements OnInit {
constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { } constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { }
ngOnInit(): void { ngOnInit(): void {
this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`) this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)
window.setTimeout(()=>{ window.setTimeout(()=>{
this.initCharts() this.initCharts()
@ -30,8 +31,8 @@ export class BuildingTypeOneComponent implements OnInit {
indexData=[]//所有数据 indexData=[]//所有数据
tabledata tabledata
initCharts(){ initCharts(){
console.log(this.echartsData.obdata)
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata)
for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){ for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){
this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName) this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName)
this.count=this.count+this.tabledata[0].buildingTypes[i].count this.count=this.count+this.tabledata[0].buildingTypes[i].count
@ -54,10 +55,8 @@ export class BuildingTypeOneComponent implements OnInit {
trigger: 'item', trigger: 'item',
position: this.echartsData.tableTooltipNoShow2, position: this.echartsData.tableTooltipNoShow2,
formatter: (params)=>{ formatter: (params)=>{
console.log(params)
this.echartsData.biaogeTishiZhi(params.data) this.echartsData.biaogeTishiZhi(params.data)
return this.echartsData.res return this.echartsData.res
} }
}, },
legend: { legend: {

70
src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts

@ -118,6 +118,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
} }
}, },
series: [{ series: [{
id:this.organizationId,
data: this.zhongNumData, data: this.zhongNumData,
type: 'bar', type: 'bar',
barWidth :'38', barWidth :'38',
@ -137,7 +138,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
if(this.echartsData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations.length>1){ if(this.echartsData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
//总队不跳转 //总队不跳转
console.log(params) console.log(params)
this.zhongNameData=[] this.zhongNameData=[]
@ -162,12 +163,17 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
option.series[0].data = this.zhongNumData option.series[0].data = this.zhongNumData
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
option.series[0].markPoint.data=this.tiaoshiPao option.series[0].markPoint.data=this.tiaoshiPao
//option.series[0].id=this.organizationId
option.xAxis.id=this.organizationId
this.detailPlanEchart.clear()
this.detailPlanEchart.setOption(option) this.detailPlanEchart.setOption(option)
//this.detailEcharts() //this.detailEcharts()
},1000) },1000)
this.tiao=true this.tiao=true
} }
else{ else{
console.log(option.series[0].id)
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex]}}); this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex]}});
} }
@ -176,30 +182,42 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
} }
tiao=false tiao=false
tishiData
tableTooltip(params:any){ res
console.log(params) tableTooltip(datas:any){
var data = [ console.log(datas)
{name:params.name,number:params.value,zhanbi:((params.value/this.tabledata[0].totalCount) * 100).toFixed(2) + "%"} for(var a in this.echartsData.obdata[0].organizations){
] if(this.echartsData.obdata[0].organizations[a].organizationName==datas.name){
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>' this.tishiData=this.echartsData.obdata[0].organizations[a].subOrganizations
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>'; console.log(this.tishiData)
res+='<td style="text-align:center;width:30%;">数量</td>' var countall=0//总计
res+='<td style="text-align:center;width:30%;">总占比</td>' var countbi=0//站比
res+='</tr></thead>' var allCountbi=0//总站比
res+='<tbody>'; for(var i=0;i<this.tishiData.length;i++){
for(var i=0;i<data.length;i++){ countall+=this.tishiData[i].count
res+='<tr>' }
res+='<td style="text-align:center;">'+data[i].name+'</td>' 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>'
res+='<td style="text-align:center;">'+data[i].number+'</td>' this.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+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>' 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>'
res+='</tbody>' this.res+='<td style="text-align:center;width:30%;">总占比</td>'
// 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>' this.res+='</tr></thead>'
res+='</table></div></div>' this.res+='<tbody>';
return res 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>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
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;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
this.res+='</table></div></div>'
return this.res
} }
} }

73
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts

@ -27,7 +27,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
}); });
let paramsdata:any = { let paramsdata:any = {
id:this.buildId, id:this.buildId,
organizationId:'1' //organizationId:'1'
} }
this.data.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`) this.data.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
window.setTimeout(()=>{ window.setTimeout(()=>{
@ -37,7 +37,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
this.zhiNumData.push(this.tabledata[0].organizations[i].count) this.zhiNumData.push(this.tabledata[0].organizations[i].count)
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
} }
this.bianli() this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.barEcharts() this.barEcharts()
},1000); },1000);
@ -129,15 +129,16 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
console.log(this.zhiNameData,this.zhiNumData) if(this.zhiNumData.length>=1){
var arrshuzu='['; var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){ for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
} }
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']' arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu) this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao) }
} }
forArr = [{id:'gaoceng',name:'高层',echart:null}, forArr = [{id:'gaoceng',name:'高层',echart:null},
{id:'dixia',name:'地下',echart:null}, {id:'dixia',name:'地下',echart:null},
@ -295,7 +296,8 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name) console.log(params)
return this.tableTooltip(params)
}, },
position: this.data.tableTooltipNoShow2 position: this.data.tableTooltipNoShow2
}, },
@ -336,27 +338,42 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
} }
//提示框表格 //提示框表格
tableTooltip(dataArr,title:string){ res
let data = dataArr tishiData
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;">'+title+'</span></div>' tableTooltip(datas){
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"; >'; console.log(datas)
res+='<thead style="font-size:18px;"><tr>'; for(var a in this.data.obdata[0].organizations){
res+='<td style="text-align:center;width:30%;">名称</td>'; if(this.data.obdata[0].organizations[a].organizationName==datas.name){
res+='<td style="text-align:center;width:30%;">数量</td>' this.tishiData=this.data.obdata[0].organizations[a].subOrganizations
res+='<td style="text-align:center;width:30%;">总占比</td>' }
res+='</tr></thead>' }
res+='<tbody>'; console.log(this.tishiData)
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>' var countall=0//总计
for(var i=0;i<this.tableDataZhong.length;i++){ var countbi=0//站比
res+='<tr>' var allCountbi=0//总站比
res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>' for(var i=0;i<this.tishiData.length;i++){
res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>' countall+=this.tishiData[i].count
res+='<td style="text-align:center;">'+this.tableDataZhong[i].zhanbi+'</td></tr>' }
} 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:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res+='</tbody>' this.res+='<thead style="font-size:18px;"><tr>';
res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>' this.res+='<td style="text-align:center;width:30%;">名称</td>';
res+='</table></div></div>' this.res+='<td style="text-align:center;width:30%;">数量</td>'
return res 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>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
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;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
this.res+='</table></div></div>'
return this.res
} }
} }

2
src/app/statistic-analysis/compang-info/compang-info.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2021-03-05 15:57:08 * @Date: 2021-03-05 15:57:08
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-03-10 17:02:33 * @LastEditTime: 2021-03-12 10:05:29
*/ */
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'

108
src/app/statistic-analysis/echarts-data.service.ts

@ -397,7 +397,7 @@ export class EchartsDataService {
return res return res
} }
/** /**
* @name: * @name: ()
* @test: test font * @test: test font
* @msg: * @msg:
* @param {string()} * @param {string()}
@ -405,9 +405,11 @@ export class EchartsDataService {
*/ */
res res
tishiData tishiData
localData
biaogeTishiZhi(datas){ biaogeTishiZhi(datas){
console.log(datas)
for(var a in this.obdata[0].buildingTypes){ for(var a in this.obdata[0].buildingTypes){
if(this.obdata[0].buildingTypes[a].buildingTypeId==datas.id){ if(this.obdata[0].buildingTypes[a].buildingTypeName==datas.name){
this.tishiData=this.obdata[0].buildingTypes[a].organizations this.tishiData=this.obdata[0].buildingTypes[a].organizations
} }
} }
@ -440,7 +442,94 @@ export class EchartsDataService {
this.res+='</table></div></div>' this.res+='</table></div></div>'
return this.res return this.res
} }
//支队表格提示
biaogeTishida(datas){
console.log(datas)
this.tishiData=''
for(var a in this.obdata[0].organizations){
if(this.obdata[0].organizations[a].organizationName==datas.name){
this.tishiData=this.obdata[0].organizations[a].subOrganizations
}
}
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:16px; 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>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
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;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
this.res+='</table></div></div>'
return this.res
}
//预案表格提示
apidata=[]
biaogeTishiyuan(datas){
//localStorage.setItem('tishi',this.tishiData)
let paramdata={
planStatus:datas.type
}
if(localStorage.getItem('tishi')==undefined){
this.http.get(`/api/StatisticsAnalysis/Plans/Status`).subscribe((data:any)=>{
this.tishiData=data.organizations
localStorage.setItem('tishi',JSON.stringify(this.tishiData))
})
}
this.localData=localStorage.getItem('tishi')
/* window.setTimeout(()=>{
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:16px; 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>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
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;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
this.res+='</table></div></div>'
return this.res
},1000) */
}
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
@ -454,7 +543,8 @@ export class EchartsDataService {
* @return {json对象} * @return {json对象}
*/ */
qipao(tiaoshiPao:any,yData,xData):any{ qipao(tiaoshiPao:any,yData,xData):any{
var arrshuzu='['; if(yData.length>=1){
var arrshuzu='[';
for(var i=0;i<yData.length;i++){ for(var i=0;i<yData.length;i++){
arrshuzu+='{"value":'+yData[i]+',"coord":['+i+','+yData[i]+'],"name":'+'"'+xData[i]+'"'+'},' arrshuzu+='{"value":'+yData[i]+',"coord":['+i+','+yData[i]+'],"name":'+'"'+xData[i]+'"'+'},'
//arrshuzu+=`{"value":${yData[i]},"coord":[${i},${yData[i]}],"name":`+`"`+`${xData[i]}`+`"`+`},` //arrshuzu+=`{"value":${yData[i]},"coord":[${i},${yData[i]}],"name":`+`"`+`${xData[i]}`+`"`+`},`
@ -464,6 +554,8 @@ export class EchartsDataService {
tiaoshiPao=JSON.parse(arrshuzu) tiaoshiPao=JSON.parse(arrshuzu)
//console.log(tiaoshiPao) //console.log(tiaoshiPao)
return tiaoshiPao return tiaoshiPao
}
} }
@ -480,8 +572,10 @@ export class EchartsDataService {
return this.allDate return this.allDate
}) })
} }
selectType=0//选择年月
selectOneYear
selectTwoYear
selectStartMonth=1
selectEndMonth=12
} }

29
src/app/statistic-analysis/state/page-one/page-one.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-01 15:24:39 * @Date: 2020-09-01 15:24:39
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-03-10 14:50:23 * @LastEditTime: 2021-03-12 16:25:28
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -55,10 +55,10 @@ export class PageOneComponent implements OnInit {
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
/* formatter: (params)=>{ formatter: (params)=>{
console.log(params) this.echartsData.biaogeTishiyuan(params.data)
return this.echartsData.biaogeTishiZhi(params.data) return this.echartsData.res
} */ }
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
@ -94,11 +94,11 @@ export class PageOneComponent implements OnInit {
}, },
data: [ data: [
{value: 45, name: '预案新增'}, {value: this.tabledata[0].planningStatistics.newCount, name: '预案新增',type:1},
{value: this.tabledata[0].planningStatistics.approvedCount, name: '预案审核通过',itemStyle:{color:'#02A7F0'}}, {value: this.tabledata[0].planningStatistics.approvedCount, name: '预案审核通过',itemStyle:{color:'#02A7F0'},type:3},
{value: 37, name: '预案编制'}, {value: this.tabledata[0].planningStatistics.editingCount, name: '预案编制',type:5},
{value: this.tabledata[0].planningStatistics.rejectedCount, name: '预案审核退回'}, {value: this.tabledata[0].planningStatistics.rejectedCount, name: '预案审核退回',type:4},
{value: this.tabledata[0].planningStatistics.auditingCount, name: '预案审核中'} {value: this.tabledata[0].planningStatistics.auditingCount, name: '预案审核中',type:2}
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
@ -111,8 +111,13 @@ export class PageOneComponent implements OnInit {
] ]
}; };
this.indexBzt.on('click', (params) => { this.indexBzt.on('click', (params) => {
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name}}); if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
console.log(params) this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type}});
}
else if(this.echartsData.level=='3'){
//中队跳转
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }

6
src/app/statistic-analysis/state/page-there-year/page-there-year.component.html

@ -4,11 +4,11 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-17 10:56:18 * @Date: 2020-09-17 10:56:18
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-17 14:08:14 * @LastEditTime: 2021-03-13 14:19:22
--> -->
<div class="box"> <div class="box">
<div class="header"> <div class="header">
<div class="queryField"> <!-- <div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> <form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span> <span>查询年份:</span>
<mat-form-field> <mat-form-field>
@ -18,7 +18,7 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button> <button type="submit" mat-raised-button color="primary">查询</button>
</form> </form>
</div> </div> -->
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button (click)="goBack()">返回</button> <button mat-stroked-button (click)="goBack()">返回</button>

32
src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts

@ -19,16 +19,30 @@ export class PageThereYearComponent implements OnInit {
buildingTypeName:String buildingTypeName:String
level:String level:String
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
type
tabledata
ngOnInit(): void { ngOnInit(): void {
this.dateInit () this.dateInit ()
this.bianli()
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.year = params['level']; this.year = params['level'];
this.buildingTypeName = params['headtext']; this.buildingTypeName = params['headtext'];
this.type=params['type']
}); });
let paramdata={
planStatus:this.type,
TrendType:this.serviceData.selectType
}
this.serviceData.getData(paramdata,`/api/StatisticsAnalysis`)
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
console.log(this.tabledata[0].planStatistics.trendStatistics.added)
for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){
this.date.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
this.dateNum.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
}
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
this.detailEcharts() this.detailEcharts()
}) },1000)
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
@ -91,14 +105,14 @@ export class PageThereYearComponent implements OnInit {
detailPlanEchart detailPlanEchart
option option
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] date = []
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] dateNum = []
detailEcharts(){ detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp'); this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');
this.option = { this.option = {
grid: { grid: {
top: 50, //top: 50,
left:40, left:40,
right: 20, right: 20,
//bottom: 20, //bottom: 20,
@ -186,7 +200,13 @@ export class PageThereYearComponent implements OnInit {
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}}); if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1','type':this.type}});
}
else if(this.serviceData.level=='3'){
//中队跳转
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
} }
}); });
} }

6
src/app/statistic-analysis/state/page-there/page-there.component.html

@ -4,11 +4,11 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-17 10:53:38 * @Date: 2020-09-17 10:53:38
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-17 11:06:12 * @LastEditTime: 2021-03-13 10:35:34
--> -->
<div class="box"> <div class="box">
<div class="header"> <div class="header">
<div class="queryField"> <!-- <div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> <form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span> <span>查询年份:</span>
<mat-form-field> <mat-form-field>
@ -24,7 +24,7 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button> <button type="submit" mat-raised-button color="primary">查询</button>
</form> </form>
</div> </div> -->
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button (click)="goBack()">返回</button> <button mat-stroked-button (click)="goBack()">返回</button>

55
src/app/statistic-analysis/state/page-there/page-there.component.ts

@ -21,6 +21,9 @@ export class PageThereComponent implements OnInit {
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
headtext:string; headtext:string;
zhong:string zhong:string
type
tabledata
organizationId=[]
ngOnDestroy():void{ ngOnDestroy():void{
this.zhutu.clear() this.zhutu.clear()
@ -28,23 +31,33 @@ export class PageThereComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.dateInit(); this.dateInit();
//let headtext:string;
let datayuex:string; let datayuex:string;
let headName:string; let headName:string;
// console.log(this.activatedRoute.queryParams.subscribe)
//headtext=this.activatedRoute.queryParams["headtext"];
this.activatedRoute.queryParams.subscribe(param=>{ this.activatedRoute.queryParams.subscribe(param=>{
this.type=param.type
this.headtext=param.headtext this.headtext=param.headtext
datayuex=param.level datayuex=param.level
this.zhong=param.zhong this.zhong=param.zhong
headName=datayuex+''+this.headtext; headName=datayuex+''+this.headtext;
//console.log(headName) //console.log(headName)
}); });
let paramdata={
planStatus:this.type,
TrendType:this.echartsData.selectType
}
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`)
window.setTimeout(()=>{ window.setTimeout(()=>{
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata)
for(var i=0;i<this.tabledata[0].planStatistics.organizationStatistics.organizations.length;i++){
this.zhiNameData.push(this.tabledata[0].planStatistics.organizationStatistics.organizations[i].organizationName)
this.zhiNumData.push(this.tabledata[0].planStatistics.organizationStatistics.organizations[i].count)
this.organizationId.push(this.tabledata[0].planStatistics.organizationStatistics.organizations[i].organizationId)
}
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.zhuzhuangtu(headName) this.zhuzhuangtu(headName)
},0) },1000)
} }
selectType:string = 'month'; //选择当前的 查询类型 按月/年 selectType:string = 'month'; //选择当前的 查询类型 按月/年
@ -81,9 +94,8 @@ export class PageThereComponent implements OnInit {
fontSize: 12 fontSize: 12
} }
}//柱状图数值顶部显示 }//柱状图数值顶部显示
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNameData = []
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] zhiNumData = []
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"]
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
@ -106,6 +118,10 @@ export class PageThereComponent implements OnInit {
axisLabel = { axisLabel = {
interval: 0, interval: 0,
textStyle:{
fontSize :18,
color:'#000000'
},
formatter:function(value) formatter:function(value)
{ {
var ret = "";//拼接加\n返回的类目项 var ret = "";//拼接加\n返回的类目项
@ -147,17 +163,11 @@ export class PageThereComponent implements OnInit {
bottom:'35%' bottom:'35%'
}, */ }, */
xAxis: { xAxis: {
id:this.organizationId,
type: 'category', type: 'category',
data: this.zhiNameData, data: this.zhiNameData,
//axisLabel: this.axisLabel, axisLabel: this.axisLabel,
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -199,9 +209,12 @@ export class PageThereComponent implements OnInit {
if (this.zhutu.containPixel('grid',pointInPixel)) { if (this.zhutu.containPixel('grid',pointInPixel)) {
let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
/* this.echartsData.statefulInspectionName = this.option.xAxis.data[xIndex]+'' if(this.echartsData.level=='0'||this.echartsData.level=='1'){
this.echartsData.statefulInspectionToggle = false */ this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':headName,'id':this.option.xAxis.id[xIndex],'type':this.type}});
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':headName}}); }else{
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
}
} }
}); });
/* this.zhutu.on('click', (params) => { /* this.zhutu.on('click', (params) => {

352
src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@ -15,18 +15,31 @@ export class PageTwoNameComponent implements OnInit {
@ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用 @ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用
ngOnInit(): void { ngOnInit(): void {
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(() => { 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.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.route.queryParams.subscribe(param=>{
this.headname=param.level
});
this.planAdd() this.planAdd()
}, 0); },1000);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
} }
headname//标题 headname//标题
type//预案类型
axisLabel = { axisLabel = {
interval: 0, interval: 0,
textStyle:{ textStyle:{
@ -67,8 +80,8 @@ export class PageTwoNameComponent implements OnInit {
} }
}//柱状图上方显示数值 }//柱状图上方显示数值
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNameData = []
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] zhiNumData = []
tiaoshiPao:any tiaoshiPao:any
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
@ -82,13 +95,15 @@ export class PageTwoNameComponent implements OnInit {
//return tishiPao //return tishiPao
} }
addEchart addEchart
tabledata
organizationId=[]
//预案新增统计 //预案新增统计
planAdd () { planAdd () {
let _this = this let _this = this
this.addEchart = echarts.init(document.getElementById('pie'),'walden'); this.addEchart = echarts.init(document.getElementById('pie'),'walden');
var option = { var option = {
title: { title: {
text: _this.headname+"总数(102)", text: _this.headname+`总数(${this.tabledata[0].totalCount}`,
left: "center", left: "center",
top: "0", top: "0",
bottom: '100%', bottom: '100%',
@ -96,8 +111,12 @@ export class PageTwoNameComponent implements OnInit {
fontSize: 30 fontSize: 30
} }
}, },
grid: {
top: 110,
//bottom: 10
},
xAxis: { xAxis: {
id:this.organizationId,
type: 'category', type: 'category',
data: this.zhiNameData, data: this.zhiNameData,
axisLabel:{ axisLabel:{
@ -146,323 +165,18 @@ export class PageTwoNameComponent implements OnInit {
if (this.addEchart.containPixel('grid',pointInPixel)) { if (this.addEchart.containPixel('grid',pointInPixel)) {
let xIndex=this.addEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; 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}}); 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}});
}
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'
}
}
},
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}});
} }
}); });
} }
topEchart passPlanEchartObj
//预案状态统计
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){ tableTooltip(biaotou:string){
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'

633
src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@ -15,19 +15,23 @@ declare var echarts: any;
}) })
export class PageTwoTimeComponent implements OnInit { export class PageTwoTimeComponent implements OnInit {
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { }
@ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
@ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(param=>{
this.type=param.type
});
this.echartsData.statefulInspectionToggle = true this.echartsData.statefulInspectionToggle = true
this.dateInit() this.dateInit()
this.bianli() this.bianli()
} }
isQuery:boolean = true; //横纵向查询 isQuery:boolean = true; //横纵向查询
type
//shao //shao
toggleTrue () { toggleTrue () {
this.isQuery = true this.isQuery = true
@ -52,10 +56,16 @@ export class PageTwoTimeComponent implements OnInit {
changeTime (e) { changeTime (e) {
let data = e.value let data = e.value
this.appEcharts.changeTime(data) this.appEcharts.changeTime(data)
if(e.value=='month'){
this.echartsData.selectType=0
}
else if(e.value=='year'){
this.echartsData.selectType=2
}
} }
//查询数据 //查询数据
years:any = [] years:any = [2020,2021]
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
tiaoshiPao:any tiaoshiPao:any
datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
@ -76,34 +86,23 @@ export class PageTwoTimeComponent implements OnInit {
dateInit () { dateInit () {
let date = (new Date()).getFullYear() let date = (new Date()).getFullYear()
for (let i=date; i>=date-10;i--) { for (let i=date; i>=date-10;i--) {
this.years.unshift(i) //this.years.unshift(i)
} }
} }
selectOneYear:any = (new Date()).getFullYear() //开始年份 selectOneYear:any = (new Date()).getFullYear() //开始年份
selectTwoYear:any = (new Date()).getFullYear() //结束年份 selectTwoYear:any = (new Date()).getFullYear() //结束年份
selectStartMonth:any = 1 //开始月份 selectStartMonth:any = 1 //开始月份
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份 selectEndMonth:any = 12 //结束月份
//按月查询 //按月查询
monthSubmit (e) { monthSubmit (e) {
if (e.selectTwoYear > e.selectOneYear) { if(e.selectEndMonth >= e.selectStartMonth) {
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
//console.log(startTime) this.echartsData.selectStartMonth=e.selectStartMonth
//console.log(endTime) this.echartsData.selectEndMonth=e.selectEndMonth
} else if (e.selectTwoYear === e.selectOneYear) { this.appEcharts.findYue()
if(e.selectEndMonth >= e.selectStartMonth) { } else {
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
//console.log(startTime)
//console.log(endTime)
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择正确时间区段','确定',config);
}
}else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
@ -113,15 +112,15 @@ export class PageTwoTimeComponent implements OnInit {
selectStartYear:any = (new Date()).getFullYear() //开始年份 selectStartYear:any = (new Date()).getFullYear()-1 //开始年份
selectEndYear:any = (new Date()).getFullYear() //结束年份 selectEndYear:any = (new Date()).getFullYear() //结束年份
//按年查询 //按年查询
yearSubmit (e) { yearSubmit (e) {
if (e.selectEndYear >= e.selectStartYear) { if (e.selectEndYear >= e.selectStartYear) {
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
//console.log(startTime) this.echartsData.selectOneYear=e.selectStartYear
//console.log(endTime) this.echartsData.selectTwoYear=e.selectEndYear
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -143,11 +142,12 @@ export class echartsComponent implements OnInit {
constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
type
tiaoshiPao:any tiaoshiPao:any
datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200] datayuey=[]
datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] datayuex=[]
dataYearX = ['2019','2020'] dataYearX = ['2020','2021']
dataYearY = [1078, 936] dataYearY = ['0']
//气泡提示数据获取 //气泡提示数据获取
bianli(){ bianli(){
var arrshuzu='['; var arrshuzu='[';
@ -159,18 +159,30 @@ export class echartsComponent implements OnInit {
this.tiaoshiPao=JSON.parse(arrshuzu) this.tiaoshiPao=JSON.parse(arrshuzu)
} }
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(param=>{
this.headtext=param.level
this.type=param.type
});
let paramdata={
//planStatus:this.type,
TrendType:this.echartsData.selectType
}
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`)
window.setTimeout(()=>{ window.setTimeout(()=>{
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
this.activatedRoute.queryParams.subscribe(param=>{ //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
this.headtext=param.level for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){
}); if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.echartsData.selectStartMonth||this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.echartsData.selectEndMonth){
this.datayuex.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
this.datayuey.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
}
}
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
//this.oneInit() //this.oneInit()
this.twoInit() this.twoInit()
/* this.threeInit() },1000)
this.fourInit()
this.fiveInit()
this.sixInit() */
},0)
} }
ngOnDestroy () { ngOnDestroy () {
@ -185,110 +197,60 @@ export class echartsComponent implements OnInit {
if (e=='year') { if (e=='year') {
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
//this.oneInit(this.dataYearX,this.dataYearY) //this.oneInit(this.dataYearX,this.dataYearY)
this.twoInit(this.dataYearX,this.dataYearY) this.echartsData.selectType=2
let paramdata={
//planStatus:this.type,
TrendType:this.echartsData.selectType
}
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`)
window.setTimeout(()=>{
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
this.dataYearY.push(this.tabledata[0].companyStatistics.trendStatistics.added[0].count)
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
//this.oneInit()
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
this.twoInit(this.dataYearX,this.dataYearY)
},1000)
//this.twoInit(this.dataYearX,this.dataYearY)
} else { } else {
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
//this.oneInit() //this.oneInit()
this.echartsData.selectType=0
this.twoInit() this.twoInit()
} }
} }
//按月查询
oneExample:any; findYue(){
oneInit (X=this.datayuex, Y=this.datayuey) { this.twoExample.clear()
this.oneExample = echarts.init(document.getElementById('one'),'walden'); this.datayuex=[]
var option = { this.datayuey=[]
grid: { let paramdata={
top: 50, planStatus:this.type,
left:50, TrendType:this.echartsData.selectType
right: 20, }
}, this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`)
tooltip: { window.setTimeout(()=>{
trigger: 'axis', this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
formatter: (params)=>{ //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name) for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){
}, if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.echartsData.selectStartMonth&&this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.echartsData.selectEndMonth){
}, this.datayuex.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month)
// 标题 this.datayuey.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count)
title: {
text: '预案统计状态'+':总数(102)',
top: -4,
left: 'center',
subtext:'今年',
  //副标题文本样式
  subtextStyle:{
color:'#999',
fontWeight:'bold',
},
textStyle:{
//文字颜色
color:'#000',
fontSize: 22,
}
},
// x轴
xAxis: {
type: 'category',
data: X,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
textStyle:{
fontSize :15,
color:'#000000'
},
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
} }
} }
}, this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
// 数据 this.twoInit(this.datayuex,this.datayuey)
series: [{ },1000)
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: Y,
}
],
};
this.oneExample.setOption(option);
} }
headtext headtext
twoExample:any; twoExample:any;
tabledata
twoInit (X=this.datayuex, Y=this.datayuey) { twoInit (X=this.datayuex, Y=this.datayuey) {
let that = this let that = this
this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp'); this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
@ -377,112 +339,17 @@ export class echartsComponent implements OnInit {
const pointInPixel= [params.offsetX, params.offsetY]; const pointInPixel= [params.offsetX, params.offsetY];
if (this.twoExample.containPixel('grid',pointInPixel)) { if (this.twoExample.containPixel('grid',pointInPixel)) {
let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ if(this.echartsData.selectType==2){
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text,'type':this.type}});
}else{ }else{
/*事件处理代码书写位置*/ /*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
} this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}});
} else if(this.echartsData.level=='3'){
} //中队跳转
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
});
}
threeExample:any;
threeInit (X=this.datayuex, Y=this.datayuey) {
let that = this
this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp');
var option = {
grid: {
top: 50,
left:50,
right: 20,
},
// 标题
title: {
text: '预案审核通过'+':总数(1024)',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过')
}
},
// x轴
xAxis: {
type: 'category',
data: X,
boundaryGap: true,
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
} }
}
},
// 数据
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: Y,
}
],
};
this.threeExample.setOption(option);
this.threeExample.getZr().on('click', (params) => {
const pointInPixel= [params.offsetX, params.offsetY];
if (this.threeExample.containPixel('grid',pointInPixel)) {
let xIndex=this.threeExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}else{
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
} }
} }
@ -490,312 +357,8 @@ export class echartsComponent implements OnInit {
}); });
} }
fourExample:any; threeExample:any;
fourInit (X=this.datayuex, Y=this.datayuey) {
let that = this
this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp');
var option = {
grid: {
top: 50,
left:50,
right: 20,
},
// 标题
title: {
text: '预案编制'+':总数(1024)',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制')
}
},
// x轴
xAxis: {
type: 'category',
data: X,
boundaryGap: true,
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
},
// 数据
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: Y,
}
],
};
this.fourExample.setOption(option);
this.fourExample.getZr().on('click', (params) => {
const pointInPixel= [params.offsetX, params.offsetY];
if (this.fourExample.containPixel('grid',pointInPixel)) {
let xIndex=this.fourExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}else{
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}
}
});
}
fiveExample:any;
fiveInit (X=this.datayuex, Y=this.datayuey) {
let that = this
this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp');
var option = {
grid: {
top: 50,
left:50,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核退回'+':总数(1024)',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回')
}
},
// x轴
xAxis: {
type: 'category',
data: X,
boundaryGap: true,
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
},
// 数据
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: Y,
}
],
};
this.fiveExample.setOption(option);
this.fiveExample.getZr().on('click', (params) => {
const pointInPixel= [params.offsetX, params.offsetY];
if (this.fiveExample.containPixel('grid',pointInPixel)) {
let xIndex=this.fiveExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}else{
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}
}
});
}
sixExample:any;
sixInit (X=this.datayuex, Y=this.datayuey) {
let that = this
this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp');
var option = {
grid: {
top: 50,
left:50,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核中'+':总数(1024)',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中')
}
},
// x轴
xAxis: {
type: 'category',
data: X,
boundaryGap: true,
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
textStyle:{
fontSize :15,
color:'#000000'
},
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
},
// 数据
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: Y,
}
],
};
this.sixExample.setOption(option);
this.sixExample.getZr().on('click', (params) => {
const pointInPixel= [params.offsetX, params.offsetY];
if (this.sixExample.containPixel('grid',pointInPixel)) {
let xIndex=this.sixExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}else{
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
}
}
});
}

37
src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-05 13:50:45 * @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-11-10 14:36:51 * @LastEditTime: 2021-03-12 16:08:24
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@ -19,23 +19,40 @@ export class PageZhongDuiDetailsComponent implements OnInit {
constructor( public route: ActivatedRoute,public data: EchartsDataService) { } constructor( public route: ActivatedRoute,public data: EchartsDataService) { }
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNameData = []
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] zhongNumData = []
tiaoshiPao:any tiaoshiPao:any
headtext:string; headtext:string;
headName:string; headName:string;
type
lastid
tabledata
organizationId=[]
ngOnInit(): void { ngOnInit(): void {
window.setTimeout(()=>{ let level:string;
let level:string;
this.route.queryParams.subscribe(param=>{ this.route.queryParams.subscribe(param=>{
this.headtext=param.headtext this.headtext=param.headtext
level=param.level level=param.level
this.headName=level+''+this.headtext; this.headName=level+''+this.headtext;
//console.log(headName) this.type=param.type
this.lastid=param.id
}); });
let paramdata={
planStatus:this.type,
OrganizationId:this.lastid
}
this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
window.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.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.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
this.detailEcharts() this.detailEcharts()
}) },1000)
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.detailPlanEchart.clear() this.detailPlanEchart.clear()
@ -58,7 +75,12 @@ export class PageZhongDuiDetailsComponent implements OnInit {
fontSize: 30 fontSize: 30
} }
}, },
grid: {
top: 110,
//bottom: 10
},
xAxis: { xAxis: {
id:this.organizationId,
type: 'category', type: 'category',
data: this.zhongNameData, data: this.zhongNameData,
axisLabel:{ axisLabel:{
@ -101,6 +123,7 @@ export class PageZhongDuiDetailsComponent implements OnInit {
}] }]
}; };
this.detailPlanEchart.setOption(option); this.detailPlanEchart.setOption(option);
} }

Loading…
Cancel
Save