From eedf099e18c19e2f26c7f62c9047d25cd0b427aa Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Thu, 11 Mar 2021 17:29:43 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=BB=BA=E7=AD=91=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=BB=9F=E8=AE=A1=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-unit-one/add-unit-one.component.ts | 79 ++++++------- .../add-unit-three-bar-details.component.ts | 106 +++++++++++++----- .../add-unit-two-type-details.component.ts | 52 +++++++-- .../add-unit-two-type-statistics.component.ts | 59 ++++++++-- .../building-type-one.component.ts | 3 +- .../building-type-two-reverse.component.ts | 11 +- .../compang-info/compang-info.component.ts | 4 +- .../echarts-data.service.ts | 49 +++++++- 8 files changed, 260 insertions(+), 103 deletions(-) diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index dac3d69..419e1b3 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/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) { } setTimeoutObj//延时器需要清除 - buildData=[] - orData + tabledata ngOnInit(): void { /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)) this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */ + this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) this.setTimeoutObj = window.setTimeout(()=>{ + this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + console.log(this.tabledata) this.initCharts("pieone") this.initCharts("pietwo") },1000) @@ -45,12 +47,27 @@ export class AddUnitOneComponent implements OnInit { buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] indexBzt//首页饼状图实例 /* 首页饼状图 */ - initCharts(id){ - - this.indexBzt = echarts.init(document.getElementById(id),'walden'); + lengthBuildData=[] + lengthOrData=[] + buildData=[] + orData=[] + initCharts(tid){ + for(var i=0;i{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}}) + console.log(this.buildData) + this.indexBzt = echarts.init(document.getElementById(tid),'walden'); let options={ title: { - text:id=="pieone"? '组织机构统计（8900家）':'建筑类型统计（8900家）', + text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`, left: 'center', top: "5%", textStyle: { @@ -60,7 +77,8 @@ export class AddUnitOneComponent implements OnInit { tooltip: { trigger: 'item', formatter: (params)=>{ - return this.echartsData.tableTooltip(id=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) + console.log(params) + return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) }, position:this.echartsData.tableTooltipNoShow2 }, @@ -72,7 +90,7 @@ export class AddUnitOneComponent implements OnInit { fontSize:14, color:"#000000" }, - data: id=="pieone"?this.zhiNameData:this.buildingData + data: tid=="pieone"?this.lengthOrData:this.lengthBuildData }, series: [ { @@ -91,39 +109,7 @@ export class AddUnitOneComponent implements OnInit { } }, }, - data:id=="pieone"?[ - {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: '隧道'}], + data:tid=="pieone"?this.orData:this.buildData, emphasis: { itemStyle: { shadowBlur: 10, @@ -135,8 +121,15 @@ export class AddUnitOneComponent implements OnInit { ] }; this.indexBzt.on('click', (params) => { - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name}}); - id=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" + if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){ + //总队,支队，大队跳转 + 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); } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts index 788ca67..451ec77 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts +++ b/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) { } time:String buildingTypeName:String - level:String + //level:String + orId//上个页面传过来的组织id + buildId//上个页面传过来的建筑id setTimeoutObj//延时器需要清除 + tabledata + organizationId=[] ngOnInit(): void { this.dateInit () - this.route.queryParams.subscribe(params => { this.time = params['time']; this.buildingTypeName = params['buildingTpye']; - this.level = params['level']; - this.bianli() + this.buildId=params['id'] + 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.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) + console.log(this.tabledata) + for(var i=0;i{ - if(this.level == "zhidui"){//如果是支队则跳转 - // this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}}); - this.level = "zhongdui" + this.detailPlanEchart.getZr().on("click",(params)=>{ + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel('grid',pointInPixel)){ + let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + console.log(this.organizationId,this.option.xAxis.id) + if(this.serviceData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations.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.organizationName = params['organizationName']; 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.canshuId}`) this.setTimeoutObj = window.setTimeout(()=>{ + this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + console.log(this.tabledata) + for(var i=0;i=1){ + var arrshuzu='['; for(var i=0;i { - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}}); - /* const dialogRef = this.dialog.open(CompangInfoComponent, { - width:"400px", - }); */ + this.detailPlanEchart.getZr().on('click', (params) => { + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel('grid',pointInPixel)){ + let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + 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}}); + } + } + }); } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index 18bc1ee..4c1d24d 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts @@ -20,15 +20,41 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址 setTimeoutObj//延时器需要清除 headname + lastId + organizationId=[] + buildingTypeId=[] ngOnInit(): void { + //this.data.zuzhiorBuilding=="zhi" this.route.queryParams.subscribe(param=>{ 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.bianli() + this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) + console.log(this.tabledata) + if(this.data.zuzhiorBuilding=="zhi"){ + for(var i=0;i{ let _this = this item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); let option = { title: { - text: this.headname+'：总数（1024）', + text: this.headname+`：总数（${this.tabledata[0].totalCount}）`, left: "center", top: "0", //bottom: '80%', @@ -276,6 +304,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { } }, xAxis: { + id:this.data.zuzhiorBuilding=="zhi"?this.buildingTypeId:this.organizationId, type: 'category', data:this.data.zuzhiorBuilding=="zhi"?this.buildingData: this.zhiNameData, axisLabel:{ @@ -320,8 +349,20 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { }] }; item.echart.setOption(option); - item.echart.on('click', (params) => { - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':this.headname}}) + item.echart.getZr().on('click', (params) => { + 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}}); + } + } + + }); }) diff --git a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts index 67491e9..cedfe85 100644 --- a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts +++ b/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) { } ngOnInit(): void { + this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`) window.setTimeout(()=>{ this.initCharts() @@ -30,8 +31,8 @@ export class BuildingTypeOneComponent implements OnInit { indexData=[]//所有数据 tabledata initCharts(){ - console.log(this.echartsData.obdata) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + console.log(this.tabledata) for(var i=0;i{ @@ -37,7 +37,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit { this.zhiNumData.push(this.tabledata[0].organizations[i].count) this.organizationId.push(this.tabledata[0].organizations[i].organizationId) } - this.bianli() + this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) this.barEcharts() },1000); @@ -129,15 +129,16 @@ export class BuildingTypeTwoReverseComponent implements OnInit { tiaoshiPao:any //气泡提示数据获取 bianli(){ - console.log(this.zhiNameData,this.zhiNumData) - var arrshuzu='['; + if(this.zhiNumData.length>=1){ + var arrshuzu='['; for(var i=0;i' + this.res+='
'; + this.res+=''; + this.res+=''; + this.res+='' + this.res+='' + this.res+='' + this.res+=''; + for(var i=0;i' + this.res+='' + this.res+='' + } + + this.res+='' + this.res+='' + this.res+='
名称数量总占比
'+this.tishiData[i].count+''+countbi+'%
总计'+countall+''+allCountbi.toFixed(2)+'%
' + return this.res + } + + zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] @@ -454,7 +494,8 @@ export class EchartsDataService { * @return {json对象} */ qipao(tiaoshiPao:any,yData,xData):any{ - var arrshuzu='['; + if(yData.length>=1){ + var arrshuzu='['; for(var i=0;i