chenjingyu
4 years ago
6 changed files with 480 additions and 4 deletions
@ -0,0 +1,45 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-08 09:42:43 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-11 15:05:16 |
||||
--> |
||||
<div class="box"> |
||||
<div class="topbox"> |
||||
<div class="timebox"> |
||||
<!-- <mat-form-field appearance="fill"> |
||||
<mat-label>请选择时间</mat-label> |
||||
<input matInput [matDatepicker]="dp3" > |
||||
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle> |
||||
<mat-datepicker #dp3 ></mat-datepicker> |
||||
</mat-form-field> |
||||
<span style="margin-left: 15px;margin-bottom: 25px;" id="pcshow" >🠊</span> |
||||
<mat-form-field appearance="fill" style="margin-left: 10px;"> |
||||
<mat-label>请选择时间</mat-label> |
||||
<input matInput [matDatepicker]="dp4" disabled> |
||||
<mat-datepicker-toggle matSuffix [for]="dp4"></mat-datepicker-toggle> |
||||
<mat-datepicker #dp4 disabled="false"></mat-datepicker> |
||||
</mat-form-field> --> |
||||
<input type="month" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime"> |
||||
<span style="margin-left: 15px;" id="pcshow" >🠊</span> |
||||
<input type="month" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime" style="margin-left: 10px;"> |
||||
<button mat-raised-button color="primary" style="margin-left: 30px;" (click)='findClick()'>查询</button> |
||||
</div> |
||||
<!-- <div class="find"> |
||||
<button mat-button color="primary">查询</button> |
||||
</div> --> |
||||
</div> |
||||
<div class="centerbox"> |
||||
<div class="leftecharts" id="leftecharts"></div> |
||||
<div class="rightecharts" id="rightecharts"></div> |
||||
</div> |
||||
<div class="bottombox" > |
||||
<div class="bottomspan"> |
||||
<span style="margin-left: 8%;">当月新增预案{{addNum}}个，排名前三的分别是：</span> |
||||
<span *ngFor="let item of addyuan">{{item}}</span> |
||||
</div> |
||||
<div class="bottomEcharts" id="bottomEcharts"></div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,70 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.topbox{ |
||||
width: 100%; |
||||
height: 10%; |
||||
display: flex; |
||||
flex-direction:column; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
border-bottom: 1px gray solid; |
||||
.timebox{ |
||||
height: 80%; |
||||
width: 100%; |
||||
text-align: center; |
||||
input{ |
||||
height: 40px; |
||||
width: 180px; |
||||
//border-radius: 3px; |
||||
border: 1px gray solid; |
||||
} |
||||
mat-form-field{ |
||||
margin-top: 15px; |
||||
} |
||||
button{ |
||||
margin-left: 20px; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
.centerbox{ |
||||
width: 100%; |
||||
height: 35%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
border-bottom: 1px gray solid; |
||||
.leftecharts{ |
||||
height: 100%; |
||||
width: 50%; |
||||
} |
||||
.rightecharts{ |
||||
height: 100%; |
||||
width: 50%; |
||||
} |
||||
} |
||||
.bottombox{ |
||||
.bottomspan{ |
||||
height: 20%; |
||||
width:100%; |
||||
span{ |
||||
line-height: 50px; |
||||
margin-left: 20px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
.bottomEcharts{ |
||||
height: 80%; |
||||
width: 100%; |
||||
} |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
height: 55%; |
||||
border-bottom: 1px gray solid; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { RealMonitoringComponent } from './real-monitoring.component'; |
||||
|
||||
describe('RealMonitoringComponent', () => { |
||||
let component: RealMonitoringComponent; |
||||
let fixture: ComponentFixture<RealMonitoringComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ RealMonitoringComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(RealMonitoringComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,333 @@
|
||||
/* |
||||
* @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) |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue