You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
11 KiB
333 lines
11 KiB
/* |
|
* @Descripttion: |
|
* @version: |
|
* @Author: sueRimn |
|
* @Date: 2021-05-08 09:42:43 |
|
* @LastEditors: sueRimn |
|
* @LastEditTime: 2021-05-12 09:58:22 |
|
*/ |
|
import { Component, OnInit } from '@angular/core'; |
|
import { ActivatedRoute, Router } from '@angular/router'; |
|
import {FormGroup, FormControl} from '@angular/forms'; |
|
import {EchartsDataService} from '../echarts-data.service'; |
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-real-monitoring', |
|
templateUrl: './real-monitoring.component.html', |
|
styleUrls: ['./real-monitoring.component.scss'], |
|
|
|
}) |
|
export class RealMonitoringComponent implements OnInit { |
|
|
|
/* campaignOne: FormGroup; |
|
campaignTwo: FormGroup; */ |
|
constructor(private router: Router,public EchartsData:EchartsDataService,private route:ActivatedRoute,public snackBar: MatSnackBar) { } |
|
|
|
addtime='0'//添加时间 |
|
endtime='0' |
|
/* addtime=String(new Date().getFullYear()+new Date().getMonth()) |
|
endtime=String(new Date().getFullYear()+new Date().getMonth()) */ |
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
},0) |
|
} |
|
//获取echarts数据 |
|
async getechartsdata(){ |
|
var date=new Date |
|
if(this.endtime=='0'&&this.addtime=='0'){ |
|
let paramdataleft={ |
|
objectType:3, |
|
} |
|
//获取左侧柱状图的数据 |
|
await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends') |
|
this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
console.log(this.leftzhuTable) |
|
this.leftzhuTable[0].forEach((value,index,array) => { |
|
if(array[index].month==date.getMonth()+1){ |
|
this.dateNum.push(array[index].count) |
|
this.dateyue.push(array[index].year+'-'+array[index].month) |
|
} |
|
|
|
}); |
|
}else{ |
|
for(var i=Number(this.addtime.split('-')[0]);i<=Number(this.endtime.split('-')[0]);i++){ |
|
let paramdataleft={ |
|
objectType:3, |
|
TrendYear:i |
|
} |
|
//获取左侧柱状图的数据 |
|
await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends') |
|
this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
console.log(this.leftzhuTable) |
|
this.leftzhuTable[0].forEach((value,index,array) => { |
|
if((array[index].year==Number(this.addtime.split('-')[0])&&array[index].month>=Number(this.addtime.split('-')[1]))||(array[index].year==Number(this.endtime.split('-')[0])&&array[index].month<=Number(this.endtime.split('-')[1]))){ |
|
this.dateNum.push(array[index].count) |
|
this.dateyue.push(array[index].year+'-'+array[index].month) |
|
} |
|
/* if(array[index].month>=Number(this.addtime.split('-')[1])||array[index].month<=Number(this.endtime.split('-')[1])){ |
|
|
|
} */ |
|
|
|
}); |
|
} |
|
} |
|
//获取底端柱状图数据 |
|
let param={ |
|
TimeIntervalStart:this.addtime=='0'?'':this.addtime, |
|
TimeIntervalEnd:this.endtime=='0'?'':this.endtime |
|
} |
|
await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations') |
|
this.bottomTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
//console.log(this.bottomTable) |
|
this.addNum= this.bottomTable[0].totalCount |
|
this.bottomTable[0].organizations.forEach((value,index,array) => { |
|
this.zhiNameData.push(array[index].organizationName) |
|
this.zhiNumData.push(array[index].count) |
|
if(index>0&&index<4){ |
|
this.addyuan.push(array[index].organizationName) |
|
} |
|
|
|
}); |
|
//右侧饼状图数据 |
|
await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes') |
|
this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
//console.log(this.rightbTable) |
|
//console.log(this.dateyue,this.dateNum) |
|
this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData) |
|
this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum) |
|
this.rightbingtu() |
|
|
|
} |
|
//查询按钮 |
|
findClick(){ |
|
console.log(this.addtime,this.endtime) |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
if(this.addtime=='0'||this.endtime=='0'){ |
|
this.snackBar.open('结束时间或者开始时间不能为空!','确定',config); |
|
}else{ |
|
if(this.endtime<this.addtime){ |
|
this.snackBar.open('结束时间不能大于开始时间!','确定',config); |
|
}else{ |
|
//console.log(this.addtime.split('-')[0]) |
|
this.dateyue=[] |
|
this.dateNum = [] |
|
this.zhiNameData = [] |
|
this.zhiNumData = [] |
|
this.addyuan=[] |
|
this.getechartsdata() |
|
} |
|
} |
|
|
|
} |
|
|
|
addNum=0//新增预案个数 |
|
addyuan=[] |
|
leftzhuTable//左侧柱状图数据 |
|
rightbTable//右侧饼图数据 |
|
bottomTable//最低端柱状图数据 |
|
leftzhutu |
|
optionLeftzhu//中间左侧柱状图实例 |
|
dateyue = [] |
|
dateNum = [] |
|
zhiNameData = [] |
|
zhiNumData = [] |
|
rightbing |
|
optionRightbing//中间右侧柱状图 |
|
bottomzhu |
|
tiaoshiPao:any |
|
//中间左侧和底面柱状图 |
|
async leftzhuzhuangtu(divid:string,dataX,dataY){ |
|
var ec = echarts as any; |
|
this.leftzhutu = ec.init(document.getElementById(`${divid}`),'walden'); |
|
//this.bottomzhu = ec.init(document.getElementById('bottombox'),'walden'); |
|
//console.log(this.leftzhutu) |
|
this.optionLeftzhu = { |
|
grid: { |
|
//top: 10, |
|
containLabel:true, |
|
bottom:10, |
|
left:50 |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'none' |
|
} |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
data: dataX, |
|
//axisLabel: this.axisLabel, |
|
axisLabel:{ |
|
//this.axisLabel, |
|
textStyle:{ |
|
fontSize :16, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :16, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
/* tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.echartsData.tableTooltip('',headName) |
|
}, |
|
position: this.echartsData.tableTooltipNoShowq |
|
}, */ |
|
dataZoom:[ |
|
{ |
|
type: 'inside' |
|
}, { |
|
type: 'slider' |
|
} |
|
], |
|
series: [{ |
|
name: '数量', |
|
data: dataY, |
|
type: 'bar', |
|
markPoint: { |
|
symbolSize:[65, 65], |
|
data: this.EchartsData.qipao(this.tiaoshiPao,dataY,dataX) |
|
}, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'38', |
|
//label: this.topTextlabel |
|
}] |
|
}; |
|
this.leftzhutu.setOption(this.optionLeftzhu); |
|
this.leftzhutu.getZr().on('click', async (params)=>{ |
|
if(divid!='bottomEcharts'){ |
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.leftzhutu.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.leftzhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
//console.log(this.optionLeftzhu.xAxis.data[xIndex]) |
|
if(this.optionLeftzhu.xAxis.data[xIndex]!=undefined){ |
|
this.zhiNameData = [] |
|
this.zhiNumData = [] |
|
this.addyuan=[] |
|
let param={ |
|
TimeIntervalStart:this.optionLeftzhu.xAxis.data[xIndex], |
|
TimeIntervalEnd:this.optionLeftzhu.xAxis.data[xIndex] |
|
} |
|
await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations') |
|
this.bottomTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
console.log(this.bottomTable) |
|
this.addNum= this.bottomTable[0].totalCount |
|
this.bottomTable[0].organizations.forEach((value,index,array) => { |
|
this.zhiNameData.push(array[index].organizationName) |
|
this.zhiNumData.push(array[index].count) |
|
if(index>0&&index<4){ |
|
this.addyuan.push(array[index].organizationName) |
|
} |
|
|
|
}); |
|
//右侧饼状图数据 |
|
await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes') |
|
this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) |
|
this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData) |
|
this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum) |
|
this.rightbingtu() |
|
} |
|
} |
|
} |
|
|
|
}); |
|
|
|
|
|
} |
|
//中间右侧饼图 |
|
indexData=[{name:'二维预案','value':1},{name:'三维预案','value':1}]//所有数据 |
|
lengthdata=['二维预案','三维预案','文本预案','其他预案'] |
|
rightbingtu(){ |
|
this.rightbing = echarts.init(document.getElementById('rightecharts'),'walden'); |
|
this.optionRightbing={ |
|
/* title: { |
|
text: `建筑类型统计（${this.count}家）`, |
|
left: 'center', |
|
top: "7%", |
|
textStyle: { |
|
fontSize:31 |
|
} |
|
}, */ |
|
/* tooltip: { |
|
trigger: 'item', |
|
position: this.echartsData.tableTooltipNoShow2, |
|
formatter: (params)=>{ |
|
this.echartsData.biaogeTishiZhi(params.data) |
|
return this.echartsData.res |
|
} |
|
}, */ |
|
tooltip: { |
|
trigger: 'item', |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
legend: { |
|
orient: 'vertical', |
|
//left:this.padHw?50:0, |
|
//right:this.padHw?20:250, |
|
top:20, |
|
right:30, |
|
textStyle:{ |
|
fontSize:16, |
|
color:"#000000" |
|
}, |
|
data: this.lengthdata |
|
}, |
|
series: [ |
|
{ |
|
top:'0', |
|
name: '预案类型', |
|
type: 'pie', |
|
radius: '60%', |
|
center: ['50%', '53%'], |
|
label:{ |
|
show:true, |
|
fontSize:16, |
|
formatter:'{b}{c}家\n{d|({d}%)}', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
fontSize:18 |
|
} |
|
}, |
|
}, |
|
data:[ |
|
{value:this.rightbTable[0].planTypeStatistics.planTypes[0]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[0].count:0, name: '二维预案'}, |
|
{value:this.rightbTable[0].planTypeStatistics.planTypes[1]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[1].count:0, name: '三维预案'}, |
|
{value:this.rightbTable[0].planTypeStatistics.planTypes[2]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[2].count:0, name: '其他预案'}, |
|
{value:this.rightbTable[0].planTypeStatistics.planTypes[3]!=undefined? this.rightbTable[0].planTypeStatistics.planTypes[3].count:0, name: '文本预案'} |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.rightbing.setOption(this.optionRightbing) |
|
} |
|
|
|
}
|
|
|