import { Component, OnInit,ViewChild } from '@angular/core'; import { Router } from '@angular/router'; import { ActivatedRoute } from '@angular/router'; import {EchartsDataService} from '../echarts-data.service' import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; declare var echarts: any; //首页图形查询 @Component({ selector: 'app-scheduled-updates', templateUrl: './scheduled-updates.component.html', styleUrls: ['./scheduled-updates.component.scss'] }) export class ScheduledUpdatesComponent implements OnInit { constructor(private router: Router,public snackBar: MatSnackBar,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ this.getechartsdata() }) } ngOnDestroy () { this.example.clear() this.example.dispose() } example:any; buildingShow:boolean=false //控制查询条件的显隐 selectedBtn="tu" //两个查询按钮颜色控制 chaxun:string="" //图形查询点击事件 tuClick(){ this.buildingShow=false this.selectedBtn="tu" } //条件查询 tiaojianClick(){ this.buildingShow=true this.selectedBtn="tiaojian" } //查询按钮点击事件 findClick(){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 if(this.chaxun==""){this.snackBar.open('未选择单位','确定',config)} else{ this.echartsData.buildingName=this.chaxun this.echartsData.tableShow=true } } //获取后端数据 async getechartsdata(){ if(this.dwOryuan=='danwei'){ await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies/Maintained`) this.tabledata1=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata1) this.initCharts("pie") await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies/Maintenance`) this.tabledata2=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata2) this.initCharts("pieTwo") }else{ await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans/Maintained`) this.tabledata1=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata1) this.initCharts("pie") await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans/Maintenance`) this.tabledata2=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata2) this.initCharts("pieTwo") } } /* 首页饼状图 */ tabledata1 tabledata2 initCharts(pieid){ this.example= echarts.init(document.getElementById(pieid),'walden'); var options={ title: { text: pieid=="pie"?`已维护统计（${this.tabledata1[0].totalCount}家）`:`计划维护统计（${this.tabledata2[0].totalCount}家）`, top: "3%", left: 'center', textStyle:{ fontSize:28 } }, tooltip: { trigger: 'item', formatter: (params)=>{ return this.weihu(params.data) //return this.echartsData.tableTooltip(this.selectedBtn=="tu"?this.echartsData.tableDataZhi:this.echartsData.buildingType,params.name) }, position:this.echartsData.tableTooltipNoShow2 }, legend: { orient: 'vertical', right: 150, top:80, // itemWidth:60, // itemHeight:25, textStyle:{ fontSize:18, color:"#000000" }, data:pieid=="pie"? ['维护无需修改', '维护修改', '维护删除']:['未维护', '维护通过审核', '维护中'] }, series: [{ name: '访问来源', type: 'pie', radius: '60%', center: ['50%', '60%'], label:{ normal:{ show:true, // position: 'inner', fontSize:16, formatter:'{b} {c}家\n{d|({d}%)}', rich: { d: { align: 'center', fontSize:18 } }, }}, data:pieid=="pie"? [ {value: this.tabledata1[0].preservedCount.totalCount, name: '维护无需修改'}, {value: this.tabledata1[0].updatedCount.totalCount, name: '维护修改',itemStyle:{color:'#02A7F0'}}, {value: this.tabledata1[0].deletedCount.totalCount, name: '维护删除',itemStyle:{color:'#87cebb'}}, ]:[ {value: this.tabledata2[0].unMaintainCount.totalCount, name: '未维护'}, {value: this.tabledata2[0].maintainedCount.totalCount, name: '维护通过审核',itemStyle:{color:'#02A7F0'}}, {value: this.tabledata2[0].maintainingCount.totalCount, name: '维护中',itemStyle:{color:'#87cebb'}}, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; this.example.setOption(options); this.example.on('click', (params) => { this.echartsData.findShow=true //if(params.name=="维护删除"){this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_two?dwOryuan=${this.dwOryuan}&type=3`);} if(pieid=="pie"){ this.echartsData.scheduledUpdatesToggle = 1 //this.echartsData.zhuXname=["平均值","维护无需修改","维护修改","维护删除"] this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?type=${params.data.name=='维护修改'?2:params.data.name=='维护无需修改'?1:3}&dwOryuan=${this.dwOryuan}&pieid=pie`); }else{ //this.echartsData.zhuXname=["平均值","维护中","维护通过审核","未维护"] //this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); /* if(this.echartsData.level=='0'){ this.echartsData.scheduledUpdatesToggle = 2 this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); this.echartsData.findShow=false }else if(this.echartsData.level=='1'){ this.echartsData.scheduledUpdatesToggle = 3 this.echartsData.findShow=false this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); } */ this.echartsData.zhiorBuinding='zhi' this.echartsData.scheduledUpdatesToggle = 2 this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?pieid=pieTwo&type=${params.data.name=='维护通过审核'?2:params.data.name=='未维护'?1:3}&dwOryuan=${this.dwOryuan}`); this.echartsData.findShow=false } //console.log(this.echartsData.scheduledUpdatesToggle) }); } dwOryuan='danwei' //点击单位按钮 danweiClick(){ this.dwOryuan='danwei' this.example.clear() this.example.dispose() this.getechartsdata() } //点击预案按钮 yuanClick(){ this.dwOryuan='yuan' this.example.clear() this.example.dispose() this.getechartsdata() } //维护更新提示框 tishiData res weihu(datas){ if(datas.name=='维护删除'){ this.tishiData=this.tabledata1[0].deletedCount.organizationCounts }else if(datas.name=='维护无需修改'){ this.tishiData=this.tabledata1[0].preservedCount.organizationCounts }else if(datas.name=='维护修改'){ this.tishiData=this.tabledata1[0].updatedCount.organizationCounts }else if(datas.name=='维护中'){ this.tishiData=this.tabledata2[0].maintainingCount.organizationCounts }else if(datas.name=='未维护'){ this.tishiData=this.tabledata2[0].unMaintainCount.organizationCounts }else if(datas.name=='维护通过审核'){ this.tishiData=this.tabledata2[0].maintainedCount.organizationCounts } var countall=0//总计 var countbi=0//站比 var allCountbi=0//总站比 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+'100%
' return this.res } } //首页条件查询 @Component({ selector: 'app-indexCondition', templateUrl: './indexCondition.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class indexConditionComponent implements OnInit { constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } ngOnInit(): void { window.setTimeout(()=>{ },0) } ngOnDestroy () { /* this.oneEcharts.dispose() this.oneEcharts.clear() */ } oneEcharts:any; displayedColumns: string[] = ['name', 'weight', 'symbol']; //点击支队名称跳转事件 zhiClick(item){ this.route.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':item+this.echartsData.buildingName}}); } } //所有页面头部 @Component({ selector: 'app-publicEcharts', templateUrl: './publicEcharts.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class publicEchartsComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,public snackBar: MatSnackBar) { } @ViewChild('verified')verifieds :verifiedComponent; //父组件中获得子组件的引用 ngOnInit(): void { //this.echartsData.scheduledUpdatesToggle = 1 this.dateInit() } isToggle:boolean = true; // 已核查/未核查 selectType:string = 'year'; //选择当前的 查询类型 按月/年 //查询数据 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()-2 //开始年份 selectTwoYear:any = (new Date()).getFullYear() //结束年份 selectStartMonth:any = 1 //开始月份 selectEndMonth:any = (new Date()).getMonth()+2 //结束月份 //点击月或年 changeTime(e){ console.log(e) //this.echartsData.selectType=0 this.verifieds.changeTime(e.value,this.selectOneYear,this.selectStartMonth,this.selectTwoYear,this.selectEndMonth) } //按月查询 monthSubmit (e) { console.log(this.echartsData.dateYear) if (e.selectTwoYear > e.selectOneYear) { let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 this.verifieds.getechartsdata(this.echartsData.dateYear,e.selectStartMonth,this.echartsData.dateYear,e.selectEndMonth) } else if (e.selectTwoYear === e.selectOneYear) { if(e.selectEndMonth >= e.selectStartMonth) { 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) this.verifieds.getechartsdata(this.echartsData.dateYear,e.selectStartMonth,this.echartsData.dateYear,e.selectEndMonth) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('请选择正确时间区段','确定',config); } }else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('请选择正确时间区段','确定',config); } } selectStartYear:any = (new Date()).getFullYear()-2 //开始年份 selectEndYear:any = (new Date()).getFullYear() //结束年份 //按年查询 yearSubmit (e) { console.log(e) if (e.selectEndYear >= e.selectStartYear) { let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 e.selectStartYear+='-01' e.selectEndYear+='-12' this.verifieds.getechartsdata(e.selectStartYear,e.selectStartMonth,e.selectEndYear,e.selectEndMonth) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('请选择正确时间区段','确定',config); } } //已核查 verified () { this.isToggle = true this.echartsData.level=='1'? this.echartsData.findShow=true:this.echartsData.findShow=false this.echartsData.scheduledUpdatesToggle =1 //this.echartsData.scheduledUpdatesToggle ="one" //this.echartsData.level=='0'? this.echartsData.scheduledUpdatesToggle =1:this.echartsData.level=='1'?this.echartsData.scheduledUpdatesToggle =3:'' } //未核查 notVerified () { this.isToggle = false //this.echartsData.scheduledUpdatesToggle = "three" this.echartsData.scheduledUpdatesToggle =1 this.echartsData.findShow=false } //返回 goBack () { /* if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){ this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); }else{ this.echartsData.scheduledUpdatesToggle-- if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){ this.echartsData.findShow=true //this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); } } */ if(this.verifieds.pieid=='pie'&& this.echartsData.scheduledUpdatesToggle>1){ this.echartsData.scheduledUpdatesToggle-- }else{ this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); //window.history.go(-1) } } //更多 窗口 moreOpen () { let dialogRef = this.dialog.open(moreTableComponent); } //支队查询 zhiFind(){ this.verifieds.oneEcharts.clear() this.verifieds.oneEcharts.dispose() this.echartsData.zhiorBuinding="zhi" this.verifieds.getechartsdata(this.echartsData.dateYear-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') } //建筑类型查询 buildingFind(){ this.verifieds.oneEcharts.clear() this.verifieds.oneEcharts.dispose() this.echartsData.zhiorBuinding="building" this.verifieds.getechartsdata(this.echartsData.dateYear-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') } } //已核查组件 @Component({ selector: 'app-verified', templateUrl: './verified.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class verifiedComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService,public snackBar: MatSnackBar, private route: ActivatedRoute) { } ngOnInit(): void { window.setTimeout(()=>{ if(this.echartsData.scheduledUpdatesToggle==1){ this.getechartsdata(this.echartsData.dateYear-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') } },0) console.log(this.echartsData.scheduledUpdatesToggle) this.pieid=this.route.snapshot.queryParams.pieid } ngOnDestroy () { //this.oneEcharts.dispose() //this.oneEcharts.clear() } pieid=this.route.snapshot.queryParams.pieid //TimeType=0//按月查询还是按年查询 async changeTime (e,selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth){ console.log(e) this.oneEcharts.clear() this.oneEcharts.dispose() this.qipaotishi='' if(e=='year'){ this.echartsData.TimeType=1 this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue) selectOneYear=selectOneYear+'-01' selectTwoYear+='-12' this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth) }else{ this.echartsData.TimeType=0 this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue) this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth) } } oneEcharts:any; qipaotishi xdatayue=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'] ydatayue=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] xdataYear=['2020','2021'] ydataYear=['0','0'] //获取后端数据 tabledata async getechartsdata(selectStartYear,selectStartMonth,selectEndYear,selectEndMonth){ let Parameters={ MaintainedState:this.route.snapshot.queryParams.type, TimeType:this.echartsData.TimeType, TimeStart:this.echartsData.TimeType==1?selectStartYear:this.echartsData.dateYear+'-'+'01', TimeEnd:this.echartsData.TimeType==1?selectEndYear:this.echartsData.dateYear+'-'+'12', //OrganizationId } console.log(this.echartsData.zhiorBuinding) if(this.echartsData.zhiorBuinding=="zhi"){ await this.echartsData.getData(Parameters,this.route.snapshot.queryParams.dwOryuan=='danwei'? `/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`:`/api/StatisticsAnalysis/Plans/Maintained/OrganizationTrend`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) this.xdatayue=[] this.ydatayue=[] this.tabledata[0].items.forEach(element => { this.xdatayue.push(element.date) this.ydatayue.push(element.count) }); }else{ await this.echartsData.getData(Parameters,this.route.snapshot.queryParams.dwOryuan=='danwei'? `/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`:`/api/StatisticsAnalysis/Plans/Maintained/BuildingTypeTrend`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) this.xdatayue=[] this.ydatayue=[] this.tabledata[0].items.forEach(element => { this.xdatayue.push(element.date) this.ydatayue.push(element.count) }); } this.oneInit(this.xdatayue,this.ydatayue) } //提示框表格 tishiData res tableTooltip(datas){ this.tishiData=this.tabledata[0].items[0].organizations var countall=0//总计 var countbi=0//站比 var allCountbi=0//总站比 for(var i=0;i' this.res+='
'; this.res+=''; this.res+=''; this.res+='' this.res+='' this.res+='' this.res+=''; for(var i=0;i' }else{ this.res+='' } this.res+='' this.res+='' } this.res+='' this.res+='' this.res+='
名称数量总占比
'+ this.tishiData[i].buildingTypeName+''+this.tishiData[i].count+''+countbi+'%
总计'+countall+'100%
' return this.res } //图形数据 oneInit (xdata,ydata) { this.oneEcharts = echarts.init(document.getElementById('center'),'walden'); var option = { grid: { top: 100, left:40, right: 20, //bottom: 20, }, // 标题 title: { text: `已核查 总数：(${this.tabledata[0].totalCount})`, top: -4, left: 'center', textStyle:{ //文字颜色 color:'#000', fontSize: 32, } }, //提示框 tooltip: { trigger: 'axis', /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', borderRadius :'0', */ formatter: (params)=>{ return this.tableTooltip(params) //return this.echartsData.zhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.echartsData.tableTooltip(this.echartsData.buildingType,params[0].name) }, position:this.echartsData.tableTooltipNoShow2 }, // x轴 xAxis: { type: 'category', boundaryGap:true, data:xdata, axisLabel:{ textStyle:{ fontSize :18, color:'#000000' } }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: { color: "#000", }, }, splitLine: {//分割线配置 show:true, lineStyle: { color: '#999', } } }, // y轴 yAxis: { type: 'value', axisLabel: { fontSize :18, color: "#000" //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: { color: "#000", } } }, // 数据 series: [{ name: '单位预案编制数量', type: 'line', markPoint: { symbolSize:[65, 65], data: this.qipaotishi }, data:ydata, clickable:false, } ], }; this.oneEcharts.getZr().on('click', (params) => { if(this.echartsData.scheduledUpdatesToggle == 1){ /* const pointInPixel= [params.offsetX, params.offsetY]; if (this.oneEcharts.containPixel('grid',pointInPixel)) { let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; this.router.navigate(['/statisticanalysis/scheduledUpdates/yueDate'],{queryParams:{'level':option.xAxis.data[xIndex]}}); } */ //let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; const pointInPixel= [params.offsetX, params.offsetY]; if (this.oneEcharts.containPixel('grid',pointInPixel)) { let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ this.echartsData.scheduledUpdatesType = 0 this.echartsData.scheduledUpdatesToggle = 2 //this.echartsData.scheduledUpdatesName = "ff" //this.echartsData.zhiorBuinding!="zhi"?this.echartsData.scheduledUpdatesToggle = -2:this.echartsData.level=='0'? this.echartsData.scheduledUpdatesToggle = 2:this.echartsData.level=='1'?this.echartsData.scheduledUpdatesToggle = 3:'' if(this.echartsData.zhiorBuinding!="zhi"){ this.echartsData.findShow=false //this.echartsData.scheduledUpdatesToggle = -2 if(this.echartsData.level=='0'&&this.tabledata[0].items[xIndex].organizations.length>=1){ this.echartsData.scheduledUpdatesToggle = 2 //this.echartsData.time=xIndex //this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?type=${this.route.snapshot.queryParams.type}&TimeType=${this.TimeType}`); }else if(this.echartsData.level=='1' &&this.tabledata[0].items[xIndex].organizations.length>=1){ this.echartsData.scheduledUpdatesToggle = 2//原来是3 } }else{ this.echartsData.findShow=true const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 if(this.echartsData.level=='2'){ this.snackBar.open('已经是最后一层!','确定',config); } } //this.echartsData.scheduledUpdatesToggle = 2 this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex] } } }); this.oneEcharts.setOption(option); } months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'] items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}] } //未核查组件 @Component({ selector: 'app-notVerified', templateUrl: './notVerified.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class notVerifiedComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ this.oneInit() },0) } ngOnDestroy () { this.oneEcharts.dispose() this.oneEcharts.clear() } oneEcharts:any; oneInit () { this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); var option = { grid: { left:70 }, title: { text: '未核查', subtext: '总数剩余 0', left: 'center', textStyle:{ color:'#000', fontSize: 30, }, subtextStyle: {color:'#999',fontSize: 15} }, tooltip: { trigger: 'axis', formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhong,'未核查') }, position:this.echartsData.tableTooltipNoShow2 }, legend: { data: ['剩余未核查','总数'], textStyle: { color: '#000',fontSize: 18} }, xAxis: { type: 'value', boundaryGap: [0, 0.01], axisLabel: { textStyle:{ fontSize :15, color:'#000000' }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000",} }, }, yAxis: { type: 'category', //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000"}, }, axisLabel: { textStyle:{ fontSize :15, color:'#000000' }, color: "#000", //刻度线标签颜色 formatter: '{value}' }, data: this.echartsData.level=='0'? ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'] :['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], }, series: [ { name: '剩余未核查', type: 'bar', stack: '差值', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color:'#C80000'}, label: { show: true, position: 'insideRight', color: '#fff' }, }, { name: '总数', type: 'bar', stack: '差值', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color:'#999'}, label: { show: true, position: 'insideRight', color: '#fff' }, }, ] }; this.oneEcharts.setOption(option); this.oneEcharts.on('click', (params) => { /* this.echartsData.scheduledUpdatesType = 1 this.echartsData.scheduledUpdatesName = params.name this.echartsData.scheduledUpdatesToggle = 3 */ /* option.yAxis.data=['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'] this.oneEcharts.setOption(option); */ }); } } //支队核查具体月份组件 @Component({ selector: 'app-yueDate', templateUrl: './yueDate.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class yueDateComponent implements OnInit { constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } level:string; ngOnInit(): void { //console.log(this.echartsData.scheduledUpdatesToggle) this.router.queryParams.subscribe(param=>{ this.level=param.level }); window.setTimeout(()=>{ this.getechartsdata() },0) } ngOnDestroy () { this.oneEcharts.dispose() this.oneEcharts.clear() } zhiNameData = [] //buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] //获取后端数据 tabledata organizationId=[] ynum=[] OrganizationIds=''//点击的组织 async getechartsdata(){ if(this.router.snapshot.queryParams.pieid!='pieTwo'){ let Parameters={ MaintainedState:this.router.snapshot.queryParams.type, TimeType:this.echartsData.TimeType, TimeStart:this.echartsData.scheduledUpdatesXName+'-01', TimeEnd:this.echartsData.scheduledUpdatesXName+'-12', OrganizationId:this.OrganizationIds } //console.log(this.echartsData.zhiorBuinding) await this.echartsData.getData(Parameters,this.echartsData.zhiorBuinding=='zhi'? `/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`:`/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) this.zhiNameData=[] this.ynum=[] this.organizationId=[] this.tabledata[0].items[0].organizations.forEach(element => { this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) this.ynum.push(element.count) this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) //this.ydatayue.push(element.count) }); this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.ynum,this.zhiNameData) this.twoInit() }else{ let Parameters={ MaintenanceState:this.router.snapshot.queryParams.type, //TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:selectEndYear, OrganizationId:this.OrganizationIds } await this.echartsData.getData(Parameters,this.echartsData.zhiorBuinding=='zhi'? `/api/StatisticsAnalysis/Companies/Maintenance`:`/api/StatisticsAnalysis/Plans/Maintenance`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) this.zhiNameData=[] this.ynum=[] this.organizationId=[] if(this.router.snapshot.queryParams.type=='1'){ this.tabledata[0].unMaintainCount.organizationCounts.forEach(element => { this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) this.ynum.push(element.count) this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) //this.ydatayue.push(element.count) }); }else if(this.router.snapshot.queryParams.type=='2'){ this.tabledata[0].maintainedCount.organizationCounts.forEach(element => { this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) this.ynum.push(element.count) this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) //this.ydatayue.push(element.count) }); }else if(this.router.snapshot.queryParams.type=='3'){ this.tabledata[0].maintainingCount.organizationCounts.forEach(element => { this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) this.ynum.push(element.count) this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) //this.ydatayue.push(element.count) }); } this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.ynum,this.zhiNameData) this.twoInit() } } tiaoshiPao:any //气泡提示数据获取 bianli(){ var arrshuzu='['; for(var i=0;i{ console.log(params) if(params[0].axisValue.indexOf('救援站')==-1){ if(this.router.snapshot.queryParams.pieid=='pieTwo'){ return this.echartsData.zhiorBuinding=='zhi'? this.echartsData.weihuTooltipRight(params,this.router.snapshot.queryParams.type):'' }else{ return this.echartsData.zhiorBuinding=='zhi'? this.echartsData.weihuTooltip(params):'' } } //return this.echartsData.zhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.echartsData.tableTooltip(this.echartsData.buildingType,params[0].name) }, position:this.echartsData.tableTooltipNoShow2 }, legend: { right:10, data: this.echartsData.zhuXname, textStyle: { fontSize :16,color: '#000' } }, xAxis: { id:this.organizationId, axisLabel: { textStyle:{ fontSize :15, color:'#000000' }, color: "#000", //刻度线标签颜色 interval: 0, rotate:28, }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000",} }, type: 'category', data:this.zhiNameData, axisPointer: {type: 'shadow'} }, yAxis: { //设置坐标轴字体颜色和宽度 axisLine: { lineStyle:{ color:'#000000' } }, type: 'value', axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 formatter: '{value}' } }, // { // //设置坐标轴字体颜色和宽度 // axisLine: { // lineStyle: {color: "#000"}, // }, // type: 'value', // name: '个', // axisLabel: { // color: "#000", //刻度线标签颜色 // formatter: '{value}' // } // } series: [ { //name: this.echartsData.zhuXname[1], type: 'bar', //stack: '总数', data: this.ynum, barWidth :'38', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, markPoint: { data: this.tiaoshiPao }, }, ] }; this.oneEcharts.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) }); */ this.oneEcharts.getZr().on('click', (params) => { const pointInPixel= [params.offsetX, params.offsetY]; if (this.oneEcharts.containPixel('grid',pointInPixel)) { let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ if(this.echartsData.zhiorBuinding=='zhi'&&this.router.snapshot.queryParams.pieid=='pie'){ this.OrganizationIds=option.xAxis.id[xIndex] this.getechartsdata() if(this.tabledata[0].items.length>=1){ this.oneEcharts.dispose() this.oneEcharts.clear() //this.getechartsdata() } /* this.echartsData.scheduledUpdatesType = 0 this.echartsData.scheduledUpdatesName = option.xAxis.data[xIndex] this.echartsData.scheduledUpdatesToggle = 3 console.log(option.xAxis.id[xIndex]) */ }else if(this.echartsData.zhiorBuinding=='zhi'&&this.router.snapshot.queryParams.pieid=='pieTwo'){ this.OrganizationIds=option.xAxis.id[xIndex] //console.log(xIndex,option.xAxis.id[xIndex],this.organizationId) this.getechartsdata() if((this.router.snapshot.queryParams.type=='1'&&this.tabledata[0].unMaintainCount.organizationCounts.length>=1) ||(this.router.snapshot.queryParams.type=='2'&&this.tabledata[0].maintainedCount.organizationCounts.length>=1) ||(this.router.snapshot.queryParams.type=='3'&&this.tabledata[0].maintainingCount.organizationCounts.length>=1)){ this.oneEcharts.dispose() this.oneEcharts.clear() //this.getechartsdata() } } } }); } } //建筑类型核查具体月份组件 @Component({ selector: 'app-yuebuildingDate', templateUrl: './yuebuildingDate.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class yuebuildingDateComponent implements OnInit { constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } level:string; ngOnInit(): void { this.router.queryParams.subscribe(param=>{ this.level=param.level }); window.setTimeout(()=>{ this.twoInit() },0) } ngOnDestroy () { this.oneEcharts.dispose() this.oneEcharts.clear() } zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] //获取后端数据 tabledata async getechartsdata(selectStartYear,selectStartMonth,selectEndYear,selectEndMonth){ let Parameters={ MaintainedState:this.router.snapshot.queryParams.type, TimeType:this.echartsData.TimeType, TimeStart:this.echartsData.scheduledUpdatesXName, //TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:selectEndYear, //OrganizationId } console.log(this.echartsData.zhiorBuinding) if(this.echartsData.zhiorBuinding=="zhi"){ await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) this.zhiNameData=[] /* this.ydatayue=[] this.tabledata[0].items.forEach(element => { this.zhiNameData.push(element.date) this.ydatayue.push(element.count) }); */ }else{ await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`) this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) console.log(this.tabledata) /* this.xdatayue=[] this.ydatayue=[] this.tabledata[0].items.forEach(element => { this.xdatayue.push(element.date) this.ydatayue.push(element.count) }); */ } //this.oneInit(this.xdatayue,this.ydatayue) } oneEcharts:any; twoInit () { this.oneEcharts = echarts.init(document.getElementById("center"), 'skinUpp'); var option = { title: { text: this.echartsData.scheduledUpdatesXName+'已核查总数:(0)', top: -4, left: '35%', textStyle:{ color:'#000', fontSize: 30, } }, //提示框 tooltip: { trigger: 'axis', textStyle:{ fontSize :18 } }, legend: { data: this.echartsData.zhuXname, textStyle: { fontSize :16,color: '#000' } }, xAxis: [{ axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 interval: 0 }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000",} }, type: 'category', data:this.buildingData, axisPointer: {type: 'shadow'} }], yAxis: [ { //设置坐标轴字体颜色和宽度 axisLine: { lineStyle:{ color:'#000000' } }, type: 'value', axisLabel: { interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠） rotate:38 , //调整数值改变倾斜的幅度（范围-90到90） textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 formatter: '{value}' } }, // { // //设置坐标轴字体颜色和宽度 // axisLine: { // lineStyle: {color: "#000"}, // }, // type: 'value', // name: '个', // axisLabel: { // color: "#000", //刻度线标签颜色 // formatter: '{value}' // } // } ], series: [ { name: this.echartsData.zhuXname[1], type: 'bar', stack: '总数', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], barWidth :'38', }, { name: this.echartsData.zhuXname[2], type: 'bar', stack: '总数', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], itemStyle:{color: '#626c91'} }, { name: this.echartsData.zhuXname[3], type: 'bar', stack: '总数', data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], itemStyle:{color:'#c4ebad'} }, { name: this.echartsData.zhuXname[0], type: 'line', // yAxisIndex: 1, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], itemStyle:{color: '#FFDC35'} }, /* { name: '平均值2倍', type: 'line', // yAxisIndex: 1, data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], itemStyle:{color: '#6be6c1'} }, { name: '平均值3倍', type: 'line', // yAxisIndex: 1, data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], itemStyle:{color: '#999'} }, */ ] }; this.oneEcharts.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) }); */ this.oneEcharts.getZr().on('click', (params) => { const pointInPixel= [params.offsetX, params.offsetY]; if (this.oneEcharts.containPixel('grid',pointInPixel)) { let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ this.echartsData.scheduledUpdatesType = 0 //console.log(option.xAxis[0].data[xIndex]) this.echartsData.scheduledUpdatesXName+= option.xAxis[0].data[xIndex] if(this.echartsData.level=='0'){ this.echartsData.scheduledUpdatesToggle = 2 }else if(this.echartsData.level=='1'){ this.echartsData.scheduledUpdatesToggle = 3 } //this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex] } }); } } //echarts详情组件 @Component({ selector: 'app-detailedInformation', templateUrl: './detailedInformation.html', styleUrls: ['../state/page-two-time/page-two-time.component.scss'] }) export class detailedInformationComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ this.oneInit() },0) } ngOnDestroy () { this.example.dispose() this.example.clear() } zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] example:any; oneInit () { this.example = echarts.init(document.getElementById('center'), 'skinUpp'); if (this.echartsData.scheduledUpdatesType ===0) { //已核查 var option = { title: { text: `总数（0）`,//${this.echartsData.scheduledUpdatesName}${this.echartsData.scheduledUpdatesXName} top: -2, right: 655, textStyle:{ color:'#000', fontSize: 30, } }, //提示框 tooltip: { trigger: 'axis', textStyle:{ fontSize :18 } }, legend: { //data: ['平均值','维护无需修改', '维护修改', '维护通过审核'], data:this.echartsData.zhuXname, textStyle: { color: '#000',fontSize: 16 }, right:20 }, xAxis: [{ axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000",} }, type: 'category', data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], axisPointer: {type: 'shadow'} }], yAxis: [ { //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000"}, }, type: 'value', axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 formatter: '{value}' } }, ], series: [ { name: this.echartsData.zhuXname[1], type: 'bar', stack: '总数', barWidth :'38', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], }, { name: this.echartsData.zhuXname[2], type: 'bar', stack: '总数', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color: '#626c91'} }, { name: this.echartsData.zhuXname[3], type: 'bar', stack: '总数', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color:'#c4ebad'} }, { name: this.echartsData.zhuXname[0], type: 'line', // yAxisIndex: 1, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color: '#FFDC35'} }, { //name: '与上个月环比', type: 'line', // yAxisIndex: 1, data: [0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0], //itemStyle:{color: '#6be6c1'}, }, /* { //name: '警报', type: 'effectScatter', //coordinateSystem: 'cartesian2d', data: [[0,0],[0,0],[0,0]], //2d坐标系 symbolSize:30, itemStyle: { normal: { color: 'red', shadowBlur: 10, shadowColor: '#333' } }, }, */ /* { name: '平均值2倍', type: 'line', // yAxisIndex: 1, data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], itemStyle:{color: '#6be6c1'} }, { name: '平均值3倍', type: 'line', // yAxisIndex: 1, data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], itemStyle:{color: '#999'} }, */ ] }; this.example.setOption(option); } else { //未核查 var options = { grid: { left:90 }, title: { text: this.echartsData.scheduledUpdatesName, left: 'center', textStyle:{ color:'#000', fontSize: 30, }, }, tooltip: { trigger: 'axis', textStyle:{ fontSize: 18 }, axisPointer: { type: 'shadow' } }, legend: { data: ['剩余未核查','总数'], textStyle: { color: '#000',fontSize: 16 } }, xAxis: { type: 'value', boundaryGap: [0, 0.01], axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000",} }, }, yAxis: { type: 'category', //设置坐标轴字体颜色和宽度 axisLine: { lineStyle: {color: "#000"}, }, axisLabel: { textStyle:{ fontSize :18, color:'#000000' }, color: "#000", //刻度线标签颜色 formatter: '{value}' }, data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], }, series: [ { name: '剩余未核查', type: 'bar', stack: '差值', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color:'#C80000'}, label: { show: true, position: 'insideRight', color: '#fff' }, }, { name: '总数', type: 'bar', stack: '差值', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], itemStyle:{color:'#999'}, label: { show: true, position: 'insideRight', color: '#fff' }, }, ] }; this.example.setOption(options); } } } //更多资讯组件 @Component({ selector: 'app-moreTable', templateUrl: './moreTable.html', styleUrls: ['./scheduled-updates.component.scss'] }) export class moreTableComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit(): void { } displayedColumns: string[]=['team','header','time']; dataSource:any = [ {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'}, {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'}, {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'}, {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'}, {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'} ] }