Browse Source

[修改]统计分析跳转逻辑修改

dev
chenjingyu 4 years ago
parent
commit
dc6a6c919c
  1. 2
      src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts
  2. 2
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts
  3. 9
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html
  4. 11
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss
  5. 39
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  6. 11
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html
  7. 11
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss
  8. 53
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  9. 2
      src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
  10. 15
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html
  11. 11
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.scss
  12. 53
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
  13. 5
      src/app/statistic-analysis/state/page-one/page-one.component.ts
  14. 28
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.html
  15. 15
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss
  16. 48
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
  17. 14
      src/app/statistic-analysis/state/page-two-time/echarts.html
  18. 4
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
  19. 12
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
  20. 65
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

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

@ -130,7 +130,7 @@ export class AddUnitOneComponent implements OnInit {
] ]
}; };
this.indexBzt.on('click', (params) => { this.indexBzt.on('click', (params) => {
this.router.navigateByUrl('/statisticanalysis/addUnit_one/addUnit_two_type'); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name}});
id=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" id=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building"
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);

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

@ -171,7 +171,7 @@ 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':this.serviceData.zuzhiorBuilding=="zhi"? 'zhongdui':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}});
} }
}); });
} }

9
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: 2020-09-10 08:53:50 * @LastEditTime: 2021-01-04 11:09:57
--> -->
<div class="box"> <div class="box">
<div class="header"> <div class="header">
@ -68,8 +68,9 @@
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button> <button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button>
</div> --> </div> -->
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button style="margin-left: 30px;" (click)="backClick()">返回</button>
<button mat-stroked-button (click)="forward()" style="margin-left: 20px;">类型统计</button> <button mat-stroked-button (click)="forward()" style="margin-left: 20px;">类型统计</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': true}"style="margin-left: 50px;">区间选择</button> <button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': true}"style="margin-left: 50px;">区间选择</button>
</div> </div>
</div> </div>
<div class="echartsbox"> <div class="echartsbox">
@ -78,7 +79,7 @@
</div> </div>
<div> <div>
<div class="publicCss" id="gaoceng"></div> <div class="publicCss" id="gaoceng"></div>
<div class="publicCss" id="dixia"></div> <!-- <div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div> <div class="publicCss" id="guidao"></div>
<div class="publicCss" id="huagong"></div> <div class="publicCss" id="huagong"></div>
<div class="publicCss" id="chuguan"></div> <div class="publicCss" id="chuguan"></div>
@ -92,7 +93,7 @@
<div class="publicCss" id="canyin"></div> <div class="publicCss" id="canyin"></div>
<div class="publicCss" id="yingyuan"></div> <div class="publicCss" id="yingyuan"></div>
<div class="publicCss" id="zhanlan"></div> <div class="publicCss" id="zhanlan"></div>
<div class="publicCss" id="suidao"></div> <div class="publicCss" id="suidao"></div> -->
</div> </div>
</div> </div>
</div> </div>

11
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss

@ -17,11 +17,12 @@
} }
} }
.publicCss{ .publicCss{
height: 350px; width: 80%;
width: 50%; height: 550px;
display: inline-block; position: absolute;
box-sizing: border-box; left: 50%;
padding: 20px; top: 55%;
transform: translate(-50%,-50%);
} }
//头部搜索栏 //头部搜索栏

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

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { EchartsDataService } from '../../echarts-data.service'; import { EchartsDataService } from '../../echarts-data.service';
@ -11,25 +11,27 @@ declare var echarts: any;
}) })
export class AddUnitTwoTimeComponent implements OnInit { export class AddUnitTwoTimeComponent implements OnInit {
forward(){ forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname}})
} }
reverse(){ reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) 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) { } constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { }
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
headname
ngOnInit(): void { ngOnInit(): void {
this.dateInit () //this.dateInit ()
this.bianli() this.bianli()
this.route.queryParams.subscribe(param=>{
this.headname=param.level
});
this.setTimeoutObj = setTimeout(() => { this.setTimeoutObj = setTimeout(() => {
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')
}, 0); }, 0);
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
this.chartQusj.clear()
this.chartQusj.dispose()
this.forArr.forEach(item => { this.forArr.forEach(item => {
item.echart.clear() item.echart.clear()
item.echart.dispose() item.echart.dispose()
@ -104,12 +106,12 @@ 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.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
this.oneInit(this.date2,this.dateNum2) //this.oneInit(this.date2,this.dateNum2)
this.twoInit(this.date2,this.dateNum2,'year') this.twoInit(this.date2,this.dateNum2,'year')
} }
if(this.selectType == "month"){ if(this.selectType == "month"){
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')
} }
@ -259,7 +261,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
twoInit (date,dateNum,typeName) { twoInit (date,dateNum,typeName) {
this.forArr.forEach((item,key) => { this.forArr.forEach((item,key) => {
let that = this let that = this
item.echart = echarts.init(document.getElementById(item.id), 'skinUpp'); item.echart = echarts.init(document.getElementById('gaoceng'), 'skinUpp');
var option = { var option = {
grid: { grid: {
top: 50, top: 50,
@ -269,13 +271,13 @@ export class AddUnitTwoTimeComponent implements OnInit {
}, },
// 标题 // 标题
title: { title: {
text: item.name+':总数(1012)', text: this.headname+':总数(1012)',
top: -4, top: -4,
left: 'center', left: 'center',
textStyle:{ textStyle:{
//文字颜色 //文字颜色
color:'#000', color:'#000',
fontSize:22 fontSize:30
} }
}, },
//提示框 //提示框
@ -287,7 +289,8 @@ export class AddUnitTwoTimeComponent implements OnInit {
}else{ }else{
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
} }
} },
position: this.serviceData.tableTooltipNoShow2
}, },
// x轴 // x轴
xAxis: { xAxis: {
@ -352,13 +355,17 @@ 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':item.name}}); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname}});
}else{ }else{
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':this.serviceData.zuzhiorBuilding=="zhi"? 'zhongdui':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':item.name}}); this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}});
} }
} }
}); });
}) })
} }
//返回
backClick(){
this.router.navigateByUrl('/statisticanalysis/addUnit_one')
}
} }

11
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html

@ -4,23 +4,20 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-05 13:50:45 * @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-11 16:51:57 * @LastEditTime: 2021-01-04 10:51:43
--> -->
<div class="box"> <div class="box">
<div class="topbox"> <div class="topbox">
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button style="margin-left: 30px;" (click)="backClick()">返回</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button> <button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button>
<button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}" style="margin-right: 30px;">类型统计</button> <button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}" style="margin-right: 30px;">类型统计</button>
</div> </div>
</div> </div>
<div class="echartsbox"> <div class="echartsbox">
<div id="pie">
</div>
<div style="padding-top: 100px;"> <div style="padding-top: 100px;">
<div class="publicCss" id="gaoceng"></div> <div class="publicCss" id="gaoceng"></div>
<div class="publicCss" id="dixia"></div> <!-- <div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div> <div class="publicCss" id="guidao"></div>
<div class="publicCss" id="huagong"></div> <div class="publicCss" id="huagong"></div>
<div class="publicCss" id="chuguan"></div> <div class="publicCss" id="chuguan"></div>
@ -34,7 +31,7 @@
<div class="publicCss" id="canyin"></div> <div class="publicCss" id="canyin"></div>
<div class="publicCss" id="yingyuan"></div> <div class="publicCss" id="yingyuan"></div>
<div class="publicCss" id="zhanlan"></div> <div class="publicCss" id="zhanlan"></div>
<div class="publicCss" id="suidao"></div> <div class="publicCss" id="suidao"></div> -->
</div> </div>
</div> </div>

11
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss

@ -36,11 +36,12 @@
} }
} }
.publicCss{ .publicCss{
height: 350px; width: 100%;
width: 50%; height: 550px;
display: inline-block; position: absolute;
box-sizing: border-box; left: 50%;
padding: 20px; top: 50%;
transform: translate(-50%,-50%);
} }
.selectedBtn{ .selectedBtn{
background-color: #2196f3; background-color: #2196f3;

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

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service'; import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any; declare var echarts: any;
@Component({ @Component({
@ -9,27 +9,30 @@ declare var echarts: any;
}) })
export class AddUnitTwoTypeStatisticsComponent implements OnInit { export class AddUnitTwoTypeStatisticsComponent implements OnInit {
constructor(private router: Router,public data:EchartsDataService) { } constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { }
forward(){ forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname}})
} }
reverse(){ reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname}})
} }
url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址 url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址
setTimeoutObj//延时器需要清除 setTimeoutObj//延时器需要清除
headname
ngOnInit(): void { ngOnInit(): void {
this.route.queryParams.subscribe(param=>{
this.headname=param.level
});
this.setTimeoutObj = window.setTimeout(()=>{ this.setTimeoutObj = window.setTimeout(()=>{
this.bianli() this.bianli()
this.initCharts() //this.initCharts()
this.barEcharts() this.barEcharts()
},0) },0)
} }
ngOnDestroy(){ ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
this.indexBzt.clear()
this.indexBzt.dispose()
this.forArr.forEach(item => { this.forArr.forEach(item => {
item.echart.clear() item.echart.clear()
item.echart.dispose() item.echart.dispose()
@ -261,31 +264,47 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
barEcharts(){ barEcharts(){
this.forArr.forEach(item=>{ this.forArr.forEach(item=>{
let _this = this let _this = this
item.echart = echarts.init(document.getElementById(item.id),'walden'); item.echart = echarts.init(document.getElementById('gaoceng'),'walden');
let option = { let option = {
title: { title: {
text: item.name+':总数(1024)', text: this.headname+':总数(1024)',
left: "center", left: "center",
top: "0", top: "0",
//bottom: '80%', //bottom: '80%',
textStyle: { textStyle: {
fontSize: 23 fontSize: 30
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data:this.data.zuzhiorBuilding=="zhi"?this.buildingData: this.zhiNameData, data:this.data.zuzhiorBuilding=="zhi"?this.buildingData: this.zhiNameData,
axisLabel: this.axisLabel axisLabel:{
//this.axisLabel,
interval: 0,
textStyle:{
fontSize :18,
color:'#000000'
}
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel:this.axisLabel, axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name) return this.tableTooltip(this.tableDataZhong,params.name)
} },
position: this.data.tableTooltipNoShow2
}, },
series: [{ series: [{
data: this.data.zuzhiorBuilding=="zhi"?this.buildnumData: this.zhiNumData, data: this.data.zuzhiorBuilding=="zhi"?this.buildnumData: this.zhiNumData,
@ -296,13 +315,13 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
backgroundStyle: { backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' color: 'rgba(220, 220, 220, 0.8)'
}, },
barWidth :'28', barWidth :'38',
//label: this.topTextlabel //label: this.topTextlabel
}] }]
}; };
item.echart.setOption(option); item.echart.setOption(option);
item.echart.on('click', (params) => { item.echart.on('click', (params) => {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}}) this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':this.headname}})
}); });
}) })
@ -331,5 +350,9 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
res+='</table></div></div>' res+='</table></div></div>'
return res return res
} }
//返回
backClick(){
this.router.navigateByUrl('/statisticanalysis/addUnit_one')
}
} }

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

@ -96,7 +96,7 @@ export class BuildingTypeOneComponent implements OnInit {
] ]
}; };
this.indexBzt.on('click', (params) => { this.indexBzt.on('click', (params) => {
this.router.navigateByUrl('/statisticanalysis/buildingType_one/buildingType_two_forward'); this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'],{queryParams:{'level':params.name}});
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }

15
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html

@ -4,22 +4,23 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-05 13:50:45 * @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-11 14:16:12 * @LastEditTime: 2021-01-04 14:27:33
--> -->
<div class="box"> <div class="box">
<div class="topbox"> <div class="topbox">
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button (click)="reverse()"[ngClass]="{'selectedBtn': true}" style="margin-right: 10px;">反向查询</button> <!-- <button mat-stroked-button (click)="reverse()"[ngClass]="{'selectedBtn': true}" style="margin-right: 10px;">反向查询</button>
<button mat-stroked-button (click)="forward()"style="margin-right: 20px;">正向查询</button> <button mat-stroked-button (click)="forward()"style="margin-right: 20px;">正向查询</button> -->
<button mat-stroked-button (click)='goback()'>返回</button>
</div> </div>
</div> </div>
<div class="echartsbox"> <div class="echartsbox">
<div id="pie"> <!-- <div id="pie">
</div> </div> -->
<div> <div>
<div class="publicCss" id="gaoceng"></div> <div class="publicCss" id="gaoceng"></div>
<div class="publicCss" id="dixia"></div> <!-- <div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div> <div class="publicCss" id="guidao"></div>
<div class="publicCss" id="huagong"></div> <div class="publicCss" id="huagong"></div>
<div class="publicCss" id="chuguan"></div> <div class="publicCss" id="chuguan"></div>
@ -33,7 +34,7 @@
<div class="publicCss" id="canyin"></div> <div class="publicCss" id="canyin"></div>
<div class="publicCss" id="yingyuan"></div> <div class="publicCss" id="yingyuan"></div>
<div class="publicCss" id="zhanlan"></div> <div class="publicCss" id="zhanlan"></div>
<div class="publicCss" id="suidao"></div> <div class="publicCss" id="suidao"></div> -->
</div> </div>
</div> </div>

11
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.scss

@ -34,11 +34,12 @@
} }
} }
.publicCss{ .publicCss{
height: 350px; width: 100%;
width: 50%; height: 550px;
display: inline-block; position: absolute;
box-sizing: border-box; left: 50%;
padding: 20px; top: 55%;
transform: translate(-50%,-50%);
} }
.selectedBtn{ .selectedBtn{
background-color: #2196f3; background-color: #2196f3;

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

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service'; import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any; declare var echarts: any;
@Component({ @Component({
@ -9,7 +9,7 @@ declare var echarts: any;
}) })
export class BuildingTypeTwoReverseComponent implements OnInit { export class BuildingTypeTwoReverseComponent implements OnInit {
constructor(private router: Router,public data:EchartsDataService) { } constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { }
forward(){ forward(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
@ -17,16 +17,20 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
reverse(){ reverse(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'])
} }
headname//标题
ngOnInit(): void { ngOnInit(): void {
this.route.queryParams.subscribe(param=>{
this.headname=param.level
});
window.setTimeout(()=>{ window.setTimeout(()=>{
this.bianli() this.bianli()
this.initCharts() //this.initCharts()
this.barEcharts() this.barEcharts()
},0) },0)
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.indexBzt.clear() /* this.indexBzt.clear()
this.indexBzt.dispose() this.indexBzt.dispose() */
this.forArr.forEach(item => { this.forArr.forEach(item => {
item.echart.clear() item.echart.clear()
item.echart.dispose() item.echart.dispose()
@ -136,6 +140,12 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
{id:'zhanlan',name:'展览建筑',echart:null}, {id:'zhanlan',name:'展览建筑',echart:null},
{id:'suidao',name:'隧道',echart:null}] {id:'suidao',name:'隧道',echart:null}]
//返回
goback(){
window.history.go(-1)
}
/* 顶部饼状图 */ /* 顶部饼状图 */
indexBzt indexBzt
initCharts(){ initCharts(){
@ -220,32 +230,47 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
barEcharts(){ barEcharts(){
this.forArr.forEach(item=>{ this.forArr.forEach(item=>{
let _this = this let _this = this
item.echart = echarts.init(document.getElementById(item.id),'walden'); item.echart = echarts.init(document.getElementById('gaoceng'),'walden');
let option = { let option = {
title: { title: {
text: item.name+':总数(1024)', text: this.headname+':总数(1024)',
left: "center", left: "center",
top: "15", top: "15",
bottom: '80', //bottom: '80',
textStyle: { textStyle: {
fontSize: 23 fontSize: 30
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.zhiNameData, data: this.zhiNameData,
axisLabel: this.axisLabel axisLabel:{
//this.axisLabel,
interval: 0,
textStyle:{
fontSize :18,
color:'#000000'
}
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel:this.axisLabel, axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name) return this.tableTooltip(this.tableDataZhong,params.name)
}, },
//position: this.data.tableTooltipNoShow position: this.data.tableTooltipNoShow2
}, },
series: [{ series: [{
data: this.zhiNumData, data: this.zhiNumData,
@ -257,13 +282,13 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
backgroundStyle: { backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' color: 'rgba(220, 220, 220, 0.8)'
}, },
barWidth :'28', barWidth :'38',
//label: this.topTextlabel //label: this.topTextlabel
}] }]
}; };
item.echart.setOption(option); item.echart.setOption(option);
item.echart.on('click', (params) => { item.echart.on('click', (params) => {
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}}) this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':params.name,'buildingTypeName':this.headname}})
}); });
}) })
} }

5
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: 2020-11-10 14:35:31 * @LastEditTime: 2020-12-30 14:06:07
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -103,7 +103,8 @@ export class PageOneComponent implements OnInit {
] ]
}; };
this.indexBzt.on('click', (params) => { this.indexBzt.on('click', (params) => {
this.router.navigateByUrl('/statisticanalysis/statePageOne/time'); this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name}});
console.log(params)
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }

28
src/app/statistic-analysis/state/page-two-name/page-two-name.component.html

@ -10,32 +10,8 @@
<div id="pie"> <div id="pie">
</div> </div>
<div class="histogramBox" style="margin-top: 150px;">
<!-- 新增 -->
<div id="addEchart" class="echart-item">
</div>
<!-- 审核通过 -->
<div id="passPlanEchart" class="echart-item">
</div>
</div>
<div class="histogramBox">
<!-- 预案编制 -->
<div id="planMake" class="echart-item">
</div>
<!-- 审核退回 -->
<div id="planBack" class="echart-item">
</div>
</div>
<div class="histogramBox">
<!-- 审核中 -->
<div id="planAudit" class="echart-item">
</div>
</div>
</div> </div>
<app-page-zhong-dui-details #zhongDuiChild *ngIf="!data.statefulInspectionToggle"></app-page-zhong-dui-details> <app-page-zhong-dui-details #zhongDuiChild *ngIf="!data.statefulInspectionToggle"></app-page-zhong-dui-details>

15
src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss

@ -14,4 +14,17 @@
height: 330px; height: 330px;
} }
} }
} }
.echartsBox{
width: 100%;
height: 100%;
overflow: auto;
#pie{
width: 100%;
height: 550px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}

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

@ -17,35 +17,16 @@ export class PageTwoNameComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
setTimeout(() => { setTimeout(() => {
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
this.planState() this.route.queryParams.subscribe(param=>{
this.headname=param.level
});
this.planAdd() this.planAdd()
this.passPlanEchart()
this.planMake()
this.planBack()
this.planAudit()
}, 0); }, 0);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.addEchart.clear()
this.addEchart.dispose()
this.passPlanEchartObj.clear()
this.passPlanEchartObj.dispose()
this.passMakeEchart.clear()
this.passMakeEchart.dispose()
this.passBackEchart.clear()
this.passBackEchart.dispose()
this.planAuditEchart.clear()
this.planAuditEchart.dispose()
this.topEchart.clear()
this.topEchart.dispose()
} }
headname//标题
axisLabel = { axisLabel = {
interval: 0, interval: 0,
textStyle:{ textStyle:{
@ -104,22 +85,29 @@ export class PageTwoNameComponent implements OnInit {
//预案新增统计 //预案新增统计
planAdd () { planAdd () {
let _this = this let _this = this
this.addEchart = echarts.init(document.getElementById('addEchart'),'walden'); this.addEchart = echarts.init(document.getElementById('pie'),'walden');
var option = { var option = {
title: { title: {
text: "预案新增:总数(1024)", text: _this.headname+"总数(1024)",
left: "center", left: "center",
top: "0", top: "0",
bottom: '100%', bottom: '100%',
textStyle: { textStyle: {
fontSize: 23 fontSize: 30
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.zhiNameData, data: this.zhiNameData,
axisLabel:this.axisLabel axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -136,8 +124,8 @@ export class PageTwoNameComponent implements OnInit {
trigger: 'item', trigger: 'item',
formatter: (params)=>{ formatter: (params)=>{
return this.data.biaogeTishi(params.name) return this.data.biaogeTishi(params.name)
}/* , },
position: this.data.tableTooltipNoShow2 */ position: this.data.tableTooltipNoShow2
}, },
series: [{ series: [{
data: this.zhiNumData, data: this.zhiNumData,
@ -148,7 +136,7 @@ export class PageTwoNameComponent implements OnInit {
backgroundStyle: { backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' color: 'rgba(220, 220, 220, 0.8)'
}, },
barWidth :'28', barWidth :'38',
//label: this.topTextlabel //label: this.topTextlabel
}] }]
}; };

14
src/app/statistic-analysis/state/page-two-time/echarts.html

@ -1,9 +1,17 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-12-24 10:59:48
* @LastEditors: sueRimn
* @LastEditTime: 2020-12-30 15:07:52
-->
<app-page-zhong-dui-details *ngIf="!echartsData.statefulInspectionToggle"></app-page-zhong-dui-details> <app-page-zhong-dui-details *ngIf="!echartsData.statefulInspectionToggle"></app-page-zhong-dui-details>
<div [hidden]="!echartsData.statefulInspectionToggle"> <div [hidden]="!echartsData.statefulInspectionToggle">
<div style="height: 450px;width: 50%;margin: 0 auto;" id="one"></div> <!-- <div style="height: 450px;width: 50%;margin: 0 auto;" id="one"></div> -->
<div class="publicCss" id="two"></div> <div class="publicCss" id="two"></div>
<div class="publicCss" id="three"></div> <!-- <div class="publicCss" id="three"></div>
<div class="publicCss" id="four"></div> <div class="publicCss" id="four"></div>
<div class="publicCss" id="five"></div> <div class="publicCss" id="five"></div>
<div class="publicCss" id="six"></div> <div class="publicCss" id="six"></div> -->
</div> </div>

4
src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-05 08:59:24 * @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 10:19:33 * @LastEditTime: 2021-01-04 11:15:39
--> -->
<div class="content"> <div class="content">
@ -66,7 +66,7 @@
</div> </div>
<div class="fixedCss"> <div class="fixedCss">
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.statefulInspectionToggle">返回</button> <button mat-raised-button (click)='goBack()' >返回</button>
<button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}" style="margin:0 10px;" *ngIf="echartsData.statefulInspectionToggle">横向查询</button> <button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}" style="margin:0 10px;" *ngIf="echartsData.statefulInspectionToggle">横向查询</button>
<button mat-raised-button (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}" *ngIf="echartsData.statefulInspectionToggle">纵向查询</button> <button mat-raised-button (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}" *ngIf="echartsData.statefulInspectionToggle">纵向查询</button>
</div> </div>

12
src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss

@ -47,12 +47,12 @@
//echarts div公有样式 //echarts div公有样式
.publicCss{ .publicCss{
height: 350px; width: 80%;
width: 50%; height: 550px;
display: inline-block; position: absolute;
box-sizing: border-box; left: 50%;
padding: 10px; top: 50%;
margin: 10px 0; transform: translate(-50%,-50%);
} }
.publicOneLineCss{ .publicOneLineCss{
height: 350px; height: 350px;

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

@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { DateAdapter } from '@angular/material/core'; import { DateAdapter } from '@angular/material/core';
@ -44,6 +44,7 @@ export class PageTwoTimeComponent implements OnInit {
//返回 //返回
goBack () { goBack () {
this.echartsData.statefulInspectionToggle = true this.echartsData.statefulInspectionToggle = true
window.history.go(-1)
} }
selectType:string = 'month'; //选择当前的 查询类型 按月/年 selectType:string = 'month'; //选择当前的 查询类型 按月/年
@ -140,7 +141,7 @@ export class PageTwoTimeComponent implements OnInit {
}) })
export class echartsComponent implements OnInit { export class echartsComponent implements OnInit {
constructor(private router: Router,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) { }
tiaoshiPao:any tiaoshiPao:any
datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200] datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200]
@ -160,60 +161,39 @@ export class echartsComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
window.setTimeout(()=>{ window.setTimeout(()=>{
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.activatedRoute.queryParams.subscribe(param=>{
this.headtext=param.level
});
//this.oneInit()
this.twoInit() this.twoInit()
this.threeInit() /* this.threeInit()
this.fourInit() this.fourInit()
this.fiveInit() this.fiveInit()
this.sixInit() this.sixInit() */
},0) },0)
} }
ngOnDestroy () { ngOnDestroy () {
this.oneExample.clear()
this.oneExample.dispose()
this.twoExample.clear() this.twoExample.clear()
this.twoExample.dispose() this.twoExample.dispose()
this.threeExample.clear()
this.threeExample.dispose()
this.fourExample.clear()
this.fourExample.dispose()
this.fiveExample.clear()
this.fiveExample.dispose()
this.sixExample.clear()
this.sixExample.dispose()
} }
changeTime (e) { changeTime (e) {
this.oneExample.clear()
this.oneExample.dispose()
this.twoExample.clear() this.twoExample.clear()
this.twoExample.dispose() this.twoExample.dispose()
this.threeExample.clear()
this.threeExample.dispose()
this.fourExample.clear()
this.fourExample.dispose()
this.fiveExample.clear()
this.fiveExample.dispose()
this.sixExample.clear()
this.sixExample.dispose()
if (e=='year') { if (e=='year') {
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) 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.twoInit(this.dataYearX,this.dataYearY)
this.threeInit(this.dataYearX,this.dataYearY)
this.fourInit(this.dataYearX,this.dataYearY)
this.fiveInit(this.dataYearX,this.dataYearY)
this.sixInit(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.twoInit() this.twoInit()
this.threeInit()
this.fourInit()
this.fiveInit()
this.sixInit()
} }
} }
@ -307,31 +287,28 @@ export class echartsComponent implements OnInit {
this.oneExample.setOption(option); this.oneExample.setOption(option);
} }
headtext
twoExample:any; twoExample:any;
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');
var option = { var option = {
grid: {
top: 50,
left:50,
right: 20,
bottom: 20,
},
// 标题 // 标题
title: { title: {
text: '预案新增'+':总数(1024)', text: this.headtext+':总数(1024)',
top: -4, top: -4,
left: 'center', left: 'center',
bottom: 100, bottom: 100,
textStyle:{ textStyle:{
//文字颜色 //文字颜色
fontSize: 30,
color:'#000', color:'#000',
} }
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
position: this.echartsData.tableTooltipNoShowq,
formatter: (params)=>{ formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增') return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
} }
@ -344,7 +321,7 @@ export class echartsComponent implements OnInit {
axisLabel: { axisLabel: {
color: "#000", //刻度线标签颜色 color: "#000", //刻度线标签颜色
textStyle:{ textStyle:{
fontSize :15, fontSize :18,
color:'#000000' color:'#000000'
}, },
}, },

Loading…
Cancel
Save