From 95917ca6d02de63b1c4e5bb55a292cb6f7338680 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Wed, 12 May 2021 10:06:07 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=A0=AA=E6=B4=B2=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E5=88=86=E5=BF=83=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=BF=9B=E5=B1=95=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../real-monitoring.component.html | 45 +++ .../real-monitoring.component.scss | 70 ++++ .../real-monitoring.component.spec.ts | 25 ++ .../real-monitoring.component.ts | 333 ++++++++++++++++++ .../statistic-analysis-routing.module.ts | 6 +- .../statistic-analysis.module.ts | 5 +- 6 files changed, 480 insertions(+), 4 deletions(-) create mode 100644 src/app/statistic-analysis/real-monitoring/real-monitoring.component.html create mode 100644 src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss create mode 100644 src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts create mode 100644 src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.html b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.html new file mode 100644 index 0000000..59affa0 --- /dev/null +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.html @@ -0,0 +1,45 @@ + +
+
+
+ + + 🠊 + + +
+ +
+
+
+
+
+
+
+ 当月新增预案{{addNum}}个，排名前三的分别是： + {{item}} +
+
+
+
diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss new file mode 100644 index 0000000..2e7189d --- /dev/null +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss @@ -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; + } +} diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts new file mode 100644 index 0000000..4bdba95 --- /dev/null +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RealMonitoringComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RealMonitoringComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts new file mode 100644 index 0000000..4eabb7b --- /dev/null +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts @@ -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{ + 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) + } + +} diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index 9d0808c..aa58a8c 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-09-02 16:57:00 * @LastEditors: sueRimn - * @LastEditTime: 2021-03-17 08:43:53 + * @LastEditTime: 2021-05-08 09:51:15 */ import { Component, NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; @@ -35,6 +35,7 @@ import { HomeComponent } from './home/home.component'; import { yueDateComponent }from './scheduled-updates/scheduled-updates.component' import { CompangInfoComponent }from './compang-info/compang-info.component' import { AllPlanComponent } from './all-plan/all-plan.component' +import { RealMonitoringComponent } from './real-monitoring/real-monitoring.component' import { from } from 'rxjs'; @@ -70,7 +71,8 @@ const routes: Routes = [ { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent}, { path: 'home', component: HomeComponent}, { path: 'CompangInfo',component:CompangInfoComponent}, - { path:'AllPlan',component:AllPlanComponent} + { path: 'AllPlan',component:AllPlanComponent}, + { path: 'RealMonitoring',component:RealMonitoringComponent} ]; @NgModule({ diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index 016fdf6..b216e5b 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -70,12 +70,13 @@ import { PageThereYearComponent } from './state/page-there-year/page-there-year. import { DeleteTwoNewaddComponent } from './deleteUnit/delete-two-newadd/delete-two-newadd.component'; import { CompangInfoComponent } from './compang-info/compang-info.component'; import { AllPlanComponent } from './all-plan/all-plan.component'; -import { PsViewer }from './all-plan/all-plan.component' +import { PsViewer }from './all-plan/all-plan.component'; +import { RealMonitoringComponent } from './real-monitoring/real-monitoring.component' @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent,yueDateComponent,yuebuildingDateComponent,indexConditionComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent, DeleteThereLineDetailsComponent, PageThereComponent, PageThereYearComponent, DeleteTwoNewaddComponent, CompangInfoComponent, AllPlanComponent,PsViewer], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent,yueDateComponent,yuebuildingDateComponent,indexConditionComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent, DeleteThereLineDetailsComponent, PageThereComponent, PageThereYearComponent, DeleteTwoNewaddComponent, CompangInfoComponent, AllPlanComponent,PsViewer, RealMonitoringComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule,