shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]株洲统计分心新增页面实时进展管理

zhuzhou
chenjingyu 4 years ago
parent
2bdae3e40a
commit
95917ca6d0
6 changed files with 480 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.html
  2. 70
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss
  3. 25
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts
  4. 333
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts
  5. 6
      src/app/statistic-analysis/statistic-analysis-routing.module.ts
  6. 5
      src/app/statistic-analysis/statistic-analysis.module.ts

45
src/app/statistic-analysis/real-monitoring/real-monitoring.component.html
Unescape View File

@ -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>

70
src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss
Unescape View File

@ -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;
}
}

25
src/app/statistic-analysis/real-monitoring/real-monitoring.component.spec.ts
Unescape View File

@ -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();
});
});

333
src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts
Unescape View File

@ -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)
}
}

6
src/app/statistic-analysis/statistic-analysis-routing.module.ts
Unescape View File

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-02 16:57:00 * @Date: 2020-09-02 16:57:00
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-03-17 08:43:53 * @LastEditTime: 2021-05-08 09:51:15
*/ */
import { Component, NgModule } from '@angular/core'; import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; 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 { yueDateComponent }from './scheduled-updates/scheduled-updates.component'
import { CompangInfoComponent }from './compang-info/compang-info.component' import { CompangInfoComponent }from './compang-info/compang-info.component'
import { AllPlanComponent } from './all-plan/all-plan.component' import { AllPlanComponent } from './all-plan/all-plan.component'
import { RealMonitoringComponent } from './real-monitoring/real-monitoring.component'
import { from } from 'rxjs'; import { from } from 'rxjs';
@ -70,7 +71,8 @@ const routes: Routes = [
{ path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent}, { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent},
{ path: 'home', component: HomeComponent}, { path: 'home', component: HomeComponent},
{ path: 'CompangInfo',component:CompangInfoComponent}, { path: 'CompangInfo',component:CompangInfoComponent},
{ path:'AllPlan',component:AllPlanComponent} { path: 'AllPlan',component:AllPlanComponent},
{ path: 'RealMonitoring',component:RealMonitoringComponent}
]; ];
@NgModule({ @NgModule({

5
src/app/statistic-analysis/statistic-analysis.module.ts
Unescape View File

@ -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 { DeleteTwoNewaddComponent } from './deleteUnit/delete-two-newadd/delete-two-newadd.component';
import { CompangInfoComponent } from './compang-info/compang-info.component'; import { CompangInfoComponent } from './compang-info/compang-info.component';
import { AllPlanComponent } from './all-plan/all-plan.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({ @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: [ imports: [
CommonModule, CommonModule,
StatisticAnalysisRoutingModule, StatisticAnalysisRoutingModule,

Write Preview
Loading…
Cancel
Save