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.
334 lines
11 KiB
334 lines
11 KiB
4 years ago
|
/*
|
||
|
|
* @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)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|