From 2a7d5069b19d6f4a17b61a0b72833ac951c30197 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Thu, 17 Sep 2020 14:57:32 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=B8=8A=E6=B5=B7=E7=BB=9F=E8=AE=A1=E5=88=86?= =?UTF-8?q?=E6=9E=90]=E9=A2=84=E6=A1=88=E7=8A=B6=E6=80=81=E5=88=86?= =?UTF-8?q?=E6=9E=90=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../building-type-two-forward.component.ts | 2 +- .../echarts-data.service.ts | 2 + .../scheduled-updates.component.ts | 11 +- .../page-there-year.component.html | 32 +++ .../page-there-year.component.scss | 76 +++++++ .../page-there-year.component.spec.ts | 25 ++ .../page-there-year.component.ts | 199 ++++++++++++++++ .../page-there/page-there.component.html | 38 ++++ .../page-there/page-there.component.scss | 76 +++++++ .../page-there/page-there.component.spec.ts | 25 ++ .../state/page-there/page-there.component.ts | 215 ++++++++++++++++++ .../page-two-time/page-two-time.component.ts | 94 ++++++-- .../page-zhong-dui-details.component.html | 11 + .../page-zhong-dui-details.component.ts | 18 +- .../statistic-analysis-routing.module.ts | 9 +- .../statistic-analysis.module.ts | 4 +- 16 files changed, 807 insertions(+), 30 deletions(-) create mode 100644 src/app/statistic-analysis/state/page-there-year/page-there-year.component.html create mode 100644 src/app/statistic-analysis/state/page-there-year/page-there-year.component.scss create mode 100644 src/app/statistic-analysis/state/page-there-year/page-there-year.component.spec.ts create mode 100644 src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts create mode 100644 src/app/statistic-analysis/state/page-there/page-there.component.html create mode 100644 src/app/statistic-analysis/state/page-there/page-there.component.scss create mode 100644 src/app/statistic-analysis/state/page-there/page-there.component.spec.ts create mode 100644 src/app/statistic-analysis/state/page-there/page-there.component.ts diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts index 0b0f189..bfb9189 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts @@ -262,7 +262,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit { tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip(this.tableDataZhong,params.name) + return this.data.tableTooltip(this.tableDataZhong,params.name) } }, series: [{ diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 66ca91c..92230fc 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -14,6 +14,7 @@ export class EchartsDataService { //计划更新统计 scheduledUpdatesType:number = 0; //已核查/未核查 scheduledUpdatesName:string; + scheduledUpdatesXName:string; scheduledUpdatesToggle:boolean = true; // 显示 当前点击 已核查/未核查 eventEmit = new EventEmitter(); @@ -108,6 +109,7 @@ export class EchartsDataService { //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr + console.log(data) var res = '
'+title+'
' res+='
'; res+=''; diff --git a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts index 17882bc..0d2f9e9 100644 --- a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts +++ b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts @@ -382,9 +382,12 @@ export class verifiedComponent implements OnInit { }; this.items[index].echart.setOption(option); this.items[index].echart.on('click', (params) => { + let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; this.echartsData.scheduledUpdatesType = 0 this.echartsData.scheduledUpdatesName = this.months[index] this.echartsData.scheduledUpdatesToggle = false + this.echartsData.scheduledUpdatesXName=params.name + console.log(this.echartsData.scheduledUpdatesXName) }); }); } @@ -473,7 +476,7 @@ export class notVerifiedComponent implements OnInit { color: "#000", //刻度线标签颜色 formatter: '{value}' }, - data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], + data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'], }, series: [ { @@ -543,9 +546,9 @@ export class detailedInformationComponent implements OnInit { if (this.echartsData.scheduledUpdatesType ===0) { //已核查 var option = { title: { - text: this.echartsData.scheduledUpdatesName, - top: -4, - left: 'center', + text: `${this.echartsData.scheduledUpdatesName}${this.echartsData.scheduledUpdatesXName}总数（699）`, + top: -2, + right: 655, textStyle:{ color:'#000', fontSize: 30, diff --git a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.html b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.html new file mode 100644 index 0000000..da3579f --- /dev/null +++ b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.html @@ -0,0 +1,32 @@ + +
+
+
+
+ 查询年份: + + + {{item}} + + + + +
+ +
+ +
+
+
+
+ +
+
+
diff --git a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.scss b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.scss new file mode 100644 index 0000000..0520f0f --- /dev/null +++ b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + //position: relative; + .echartsbox{ + width: 100%; + height: 100%; + // overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } + } + .publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; + } + + //头部搜索栏 + .header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + #barEchart{ + width: 80%; + height: 550px; + //position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } + } \ No newline at end of file diff --git a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.spec.ts b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.spec.ts new file mode 100644 index 0000000..5a16b90 --- /dev/null +++ b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageThereYearComponent } from './page-there-year.component'; + +describe('PageThereYearComponent', () => { + let component: PageThereYearComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PageThereYearComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageThereYearComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts new file mode 100644 index 0000000..b629c77 --- /dev/null +++ b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts @@ -0,0 +1,199 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; +import { EchartsDataService } from '../../echarts-data.service'; +declare var echarts: any; + +@Component({ + selector: 'app-page-there-year', + templateUrl: './page-there-year.component.html', + styleUrls: ['./page-there-year.component.scss'] +}) +export class PageThereYearComponent implements OnInit { + + constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } + + year:String + buildingTypeName:String + level:String + setTimeoutObj//延时器需要清除 + ngOnInit(): void { + this.dateInit () + this.bianli() + this.route.queryParams.subscribe(params => { + this.year = params['level']; + this.buildingTypeName = params['headtext']; + }); + this.setTimeoutObj = window.setTimeout(()=>{ + this.detailEcharts() + }) + } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + this.detailPlanEchart.clear() + this.detailPlanEchart.dispose() + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + } + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] + zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ + if(params[0].seriesName == "year"){ + return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) + }else{ + return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + } + }, + position:this.serviceData.tableTooltipNoShow2 + }, + // x轴 + xAxis: { + type: 'category', + data: this.date, + axisLabel: { + color: "#000", //刻度线标签颜色 + textStyle:{ + fontSize :18, + color:'#000000' + } + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + }, + }, + splitLine: {//分割线配置 + show:true, + lineStyle: { + color: '#999', + } + } + }, + // y轴 + yAxis: { + type: 'value', + name: '个', + axisLabel: { + //color: "#000", //刻度线标签颜色 + textStyle:{ + fontSize :18, + color:'#000000' + } + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + } + } + }, + // 数据 + series: [{ + name: 'xxx', + type: 'line', + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, + data: this.dateNum, + } + ], + }; + this.detailPlanEchart.setOption(this.option); + 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]; + /*事件处理代码书写位置*/ + this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}}); + } + }); + } + //返回按钮 + backBtn(){ + window.history.go(-1) + } + +} diff --git a/src/app/statistic-analysis/state/page-there/page-there.component.html b/src/app/statistic-analysis/state/page-there/page-there.component.html new file mode 100644 index 0000000..4f19643 --- /dev/null +++ b/src/app/statistic-analysis/state/page-there/page-there.component.html @@ -0,0 +1,38 @@ + +
+
+
+
+ 查询年份: + + + {{item}} + + + 查询月份: + + + {{item}} + + + + +
+ +
+ +
+
+
+
+ +
+
+
diff --git a/src/app/statistic-analysis/state/page-there/page-there.component.scss b/src/app/statistic-analysis/state/page-there/page-there.component.scss new file mode 100644 index 0000000..3387989 --- /dev/null +++ b/src/app/statistic-analysis/state/page-there/page-there.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + // overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } + } + .publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; + } + + //头部搜索栏 + .header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .zhu{ + width: 100%; + height: 100%; + overflow: auto; + #zhidui{ + width: 100%; + height: 550px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } + } \ No newline at end of file diff --git a/src/app/statistic-analysis/state/page-there/page-there.component.spec.ts b/src/app/statistic-analysis/state/page-there/page-there.component.spec.ts new file mode 100644 index 0000000..b73d255 --- /dev/null +++ b/src/app/statistic-analysis/state/page-there/page-there.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageThereComponent } from './page-there.component'; + +describe('PageThereComponent', () => { + let component: PageThereComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PageThereComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageThereComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/state/page-there/page-there.component.ts b/src/app/statistic-analysis/state/page-there/page-there.component.ts new file mode 100644 index 0000000..c0a5f1b --- /dev/null +++ b/src/app/statistic-analysis/state/page-there/page-there.component.ts @@ -0,0 +1,215 @@ +import { Component, OnInit } from '@angular/core'; +import { Router,ActivatedRoute } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; +import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; +import { DateAdapter } from '@angular/material/core'; +declare var echarts: any; + +@Component({ + selector: 'app-page-there', + templateUrl: './page-there.component.html', + styleUrls: ['./page-there.component.scss'] +}) +export class PageThereComponent implements OnInit { + + constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter) { } + + zhutu//echarts实例 + option + time:String + buildingTypeName:String + setTimeoutObj//延时器需要清除 + headtext:string; + zhong:string + + ngOnDestroy():void{ + this.zhutu.clear() + this.zhutu.dispose() + } + + ngOnInit(): void { + this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) + this.dateInit(); + //let headtext:string; + let datayuex:string; + let headName:string; + // console.log(this.activatedRoute.queryParams.subscribe) + //headtext=this.activatedRoute.queryParams["headtext"]; + this.activatedRoute.queryParams.subscribe(param=>{ + this.headtext=param.headtext + datayuex=param.level + this.zhong=param.zhong + headName=datayuex+''+this.headtext; + //console.log(headName) + }); + window.setTimeout(()=>{ + this.zhuzhuangtu(headName) + },0) + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + // console.log(this.years) + } + + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i 1)//如果类目项的文字大于3, + { + for (var i = 0; i < rowN; i++) { + var temp = "";//每次截取的字符串 + var start = i * maxLength;//开始截取的位置 + var end = start + maxLength;//结束截取的位置 + //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 + temp = value.substring(start, end) + "\n"; + ret += temp; //凭借最终的字符串 + } + return ret; + } + else { + return value; + } + } + }//echarts两个字换行 + /* 柱状图 */ + zhuzhuangtu(headName:string){ + var ec = echarts as any; + this.zhutu = ec.init(document.getElementById('zhidui'),'walden'); + this.option = { + title: { + text: headName, + left: "center", + top: "0", + textStyle: { + fontSize: 30 + } + }, + /* grid: { + left: '5%', + bottom:'35%' + }, */ + xAxis: { + type: 'category', + data: this.zhiNameData, + //axisLabel: this.axisLabel, + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :18, + color:'#000000' + } + + } + }, + yAxis: { + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :18, + color:'#000000' + } + + } + }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.echartsData.biaogeTishi(params.name) + }, + position: this.echartsData.tableTooltipNoShowq + /* backgroundColor:'rgba(255,255,255,1)', + borderWidth:'1', + borderRadius :'0' */ + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'38', + //label: this.topTextlabel + }] + }; + this.zhutu.getZr().on('click',params=>{ + // console.log(params.name) + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.zhutu.containPixel('grid',pointInPixel)) { + let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + /*事件处理代码书写位置*/ + /* this.echartsData.statefulInspectionName = this.option.xAxis.data[xIndex]+'预案新增' + this.echartsData.statefulInspectionToggle = false */ + this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':headName}}); + } + }); + /* this.zhutu.on('click', (params) => { + console.log(params) + this.echartsData.statefulInspectionName =params.name; + this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`); + }); */ + this.zhutu.setOption(this.option); + } +} diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts index add30f3..7218797 100644 --- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts +++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { MatDatepickerInputEvent } from '@angular/material/datepicker'; +import { Router } from '@angular/router'; import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; import { FormControl } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; @@ -14,7 +15,7 @@ declare var echarts: any; }) export class PageTwoTimeComponent implements OnInit { - constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } + constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 @@ -139,7 +140,7 @@ export class PageTwoTimeComponent implements OnInit { }) export class echartsComponent implements OnInit { - constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } + constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } tiaoshiPao:any datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200] @@ -392,9 +393,22 @@ export class echartsComponent implements OnInit { ], }; this.twoExample.setOption(option); - this.twoExample.getZr().on('click', function (params) { - that.echartsData.statefulInspectionName = '预案新增' - that.echartsData.statefulInspectionToggle = false + this.twoExample.getZr().on('click', (params) => { + // console.log(params.name) + /* this.echartsData.statefulInspectionName =params.name+headtext; + this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */ + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel('grid',pointInPixel)) { + let xIndex=this.twoExample.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}}); + } + + } + }); } @@ -483,9 +497,19 @@ export class echartsComponent implements OnInit { ], }; this.threeExample.setOption(option); - this.threeExample.getZr().on('click', function (params) { - that.echartsData.statefulInspectionName = '预案审核通过' - that.echartsData.statefulInspectionToggle = false + this.threeExample.getZr().on('click', (params) => { + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel('grid',pointInPixel)) { + let xIndex=this.twoExample.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}}); + } + + } + }); } @@ -575,10 +599,20 @@ export class echartsComponent implements OnInit { ], }; this.fourExample.setOption(option); - this.fourExample.getZr().on('click', function (params) { - that.echartsData.statefulInspectionName = '预案编制' - that.echartsData.statefulInspectionToggle = false - }); + this.fourExample.getZr().on('click', (params) => { + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel('grid',pointInPixel)) { + let xIndex=this.twoExample.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; @@ -668,10 +702,20 @@ export class echartsComponent implements OnInit { ], }; this.fiveExample.setOption(option); - this.fiveExample.getZr().on('click', function (params) { - that.echartsData.statefulInspectionName = '预案审核退回' - that.echartsData.statefulInspectionToggle = false - }); + this.fiveExample.getZr().on('click', (params) => { + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel('grid',pointInPixel)) { + let xIndex=this.twoExample.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; @@ -760,10 +804,20 @@ export class echartsComponent implements OnInit { ], }; this.sixExample.setOption(option); - this.sixExample.getZr().on('click', function (params) { - that.echartsData.statefulInspectionName = '预案审核中' - that.echartsData.statefulInspectionToggle = false - }); + this.sixExample.getZr().on('click', (params) => { + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel('grid',pointInPixel)) { + let xIndex=this.twoExample.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}}); + } + + } + + }); } diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html index 01ac719..298d286 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html @@ -1,3 +1,14 @@ + +
+ +
diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts index 9336c08..e4c4a0f 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-09-05 13:50:45 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-10 14:38:17 + * @LastEditTime: 2020-09-17 13:47:37 */ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @@ -22,8 +22,17 @@ export class PageZhongDuiDetailsComponent implements OnInit { zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] tiaoshiPao:any + headtext:string; + headName:string; ngOnInit(): void { window.setTimeout(()=>{ + let level:string; + this.route.queryParams.subscribe(param=>{ + this.headtext=param.headtext + level=param.level + this.headName=level+''+this.headtext; + //console.log(headName) + }); this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) this.detailEcharts() }) @@ -32,12 +41,17 @@ export class PageZhongDuiDetailsComponent implements OnInit { this.detailPlanEchart.clear() this.detailPlanEchart.dispose() } + //返回 + goBack () { + history.go(-1) + //this.echartsData.statefulInspectionToggle = true + } detailPlanEchart detailEcharts(){ this.detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden'); var option = { title: { - text: this.data.statefulInspectionName+'：总数(666)', + text: this.headName, left: "center", top: "0", textStyle: { diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index ed84676..254a4f3 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -4,14 +4,16 @@ * @Author: sueRimn * @Date: 2020-09-02 16:57:00 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-07 11:19:15 + * @LastEditTime: 2020-09-17 14:05:07 */ -import { NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { PageOneComponent } from './state/page-one/page-one.component'; import { PageTwoNameComponent } from './state/page-two-name/page-two-name.component'; import { PageTwoTimeComponent } from './state/page-two-time/page-two-time.component'; import { PageZhongDuiDetailsComponent } from './state/page-zhong-dui-details/page-zhong-dui-details.component'; +import { PageThereComponent} from './state/page-there/page-there.component'; +import { PageThereYearComponent} from './state/page-there-year/page-there-year.component' import { DeleteOneComponent } from './deleteUnit/delete-one/delete-one.component'; import { DeleteTwoComponent } from './deleteUnit/delete-two/delete-two.component'; import { DeleteThereComponent } from './deleteUnit/delete-there/delete-there.component'; @@ -34,6 +36,9 @@ import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, { path: 'statePageOne/time', component: PageTwoTimeComponent}, + { path: 'stataPageThere',component:PageThereComponent}, + { path: 'stataPageThereYearComponent',component:PageThereYearComponent}, + { path: 'PageZhongDuiDetails',component:PageZhongDuiDetailsComponent}, { path: 'delete_one', component: DeleteOneComponent}, { path: 'delete_one/delete_two', component: DeleteTwoComponent}, { path: 'delete_one/delete_there', component: DeleteThereComponent}, diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index a72fbcc..13eab50 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -65,11 +65,13 @@ import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line- import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; import { HomeComponent } from './home/home.component'; import { DeleteThereLineDetailsComponent } from './deleteUnit/delete-there-line-details/delete-there-line-details.component'; +import { PageThereComponent } from './state/page-there/page-there.component'; +import { PageThereYearComponent } from './state/page-there-year/page-there-year.component'; @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent, DeleteThereLineDetailsComponent], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent, DeleteThereLineDetailsComponent, PageThereComponent, PageThereYearComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule,