[新增]实时进展监管对接后端数据

src/app/statistic-analysis/echarts-data.service.ts

@@ -588,7 +588,6 @@ export class EchartsDataService {
     })
     this.allDate.push(result)
     this.obdata=JSON.parse(JSON.stringify(this.allDate))
-    //console.log(this.obdata)
     
   }
   selectType=0//选择年月

src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-08 09:42:43
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-05-12 09:58:22
+ * @LastEditTime: 2021-05-12 14:37:07
  */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -26,19 +26,24 @@ export class RealMonitoringComponent implements OnInit {
   campaignTwo: FormGroup; */
   constructor(private router: Router,public EchartsData:EchartsDataService,private route:ActivatedRoute,public snackBar: MatSnackBar) { }
 
-  addtime='0'//添加时间
+  addtime= String(new Date().getFullYear())+'-01'//添加时间
-  endtime='0'
+  endtime= String(new Date().getFullYear())+'-0'+String(new Date().getMonth()+1)
   /* addtime=String(new Date().getFullYear()+new Date().getMonth())
   endtime=String(new Date().getFullYear()+new Date().getMonth()) */
   ngOnInit(): void {
     window.setTimeout(()=>{
-      this.getechartsdata()
+      this.getechartsdata(true)
     },0)
   }
   //获取echarts数据
-  async getechartsdata(){
+  async getechartsdata(chushi:boolean){
-    var  date=new Date
+    /* var  date=new Date()
-    if(this.endtime=='0'&&this.addtime=='0'){
+    var year=date.getFullYear();
+    var month=date.getMonth()+1
+    this.addtime=String(year)+'-01'
+      this.endtime=String(year)+'-0'+String(month) */
+    /* if(this.endtime=='0'&&this.addtime=='0'){
+      
       let paramdataleft={
         objectType:3,
       }
@@ -53,7 +58,8 @@ export class RealMonitoringComponent implements OnInit {
       }
       
     });
-    }else{
+    } */
+    
       for(var i=Number(this.addtime.split('-')[0]);i<=Number(this.endtime.split('-')[0]);i++){
         let paramdataleft={
           objectType:3,
@@ -62,27 +68,31 @@ export class RealMonitoringComponent implements OnInit {
         //获取左侧柱状图的数据
       await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends')
       this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
-      console.log(this.leftzhuTable)
+      //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]))){
+        if(this.addtime.split('-')[0]!=this.endtime.split('-')[0]){
-          this.dateNum.push(array[index].count)
+          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.dateyue.push(array[index].year+'-'+array[index].month)
+            this.dateNum.push(array[index].count)
+            this.dateyue.push(array[index].year+'-'+array[index].month)
+          }
+        }else{
+          if(array[index].month>=this.addtime.split('-')[1]&&array[index].month<=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={
+    let paramBottom={
-      TimeIntervalStart:this.addtime=='0'?'':this.addtime,
+      TimeIntervalStart:this.addtime=='0'?'':this.endtime,
       TimeIntervalEnd:this.endtime=='0'?'':this.endtime
     }
-    await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations')
+    if(chushi){
+      await this.EchartsData.getData(paramBottom,'/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)
@@ -92,13 +102,17 @@ export class RealMonitoringComponent implements OnInit {
       }
       
     });
+    this.bottomzhutu()
+    }
+    
     //右侧饼状图数据
+    let param={
+      TimeIntervalStart:this.addtime=='0'?'':this.addtime,
+      TimeIntervalEnd:this.endtime=='0'?'':this.endtime
+    }
     await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes')
     this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate))
-    //console.log(this.rightbTable)
+    this.leftzhuzhuangtu()
-    //console.log(this.dateyue,this.dateNum)
-    this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData)
-    this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum)
     this.rightbingtu()
     
   }
@@ -114,13 +128,14 @@ export class RealMonitoringComponent implements OnInit {
       if(this.endtime<this.addtime){
         this.snackBar.open('结束时间不能大于开始时间!','确定',config);
       }else{
-        //console.log(this.addtime.split('-')[0])
+        this.leftzhutu.clear()
+        this.leftzhutu.dispose()
         this.dateyue=[]
         this.dateNum = []
         this.zhiNameData = []
         this.zhiNumData = []
         this.addyuan=[]
-        this.getechartsdata()
+        this.getechartsdata(false)
       }
     }
     
@@ -139,14 +154,13 @@ export class RealMonitoringComponent implements OnInit {
   zhiNumData = []
   rightbing
   optionRightbing//中间右侧柱状图
-  bottomzhu
+  bottomzhu//底部柱状图实例
+  bottomZhuoption
   tiaoshiPao:any
-  //中间左侧和底面柱状图
+  //中间左侧柱状图
-  async leftzhuzhuangtu(divid:string,dataX,dataY){
+  async leftzhuzhuangtu(){
     var ec = echarts as any;
-    this.leftzhutu = ec.init(document.getElementById(`${divid}`),'walden');
+    this.leftzhutu = ec.init(document.getElementById(`leftecharts`),'walden');
-    //this.bottomzhu = ec.init(document.getElementById('bottombox'),'walden');
-    //console.log(this.leftzhutu)
     this.optionLeftzhu = {
       grid: {
         //top: 10,
@@ -162,7 +176,7 @@ export class RealMonitoringComponent implements OnInit {
   },
       xAxis: {
           type: 'category',
-          data: dataX,
+          data: this.dateyue,
           //axisLabel: this.axisLabel,
           axisLabel:{
             //this.axisLabel,
@@ -199,11 +213,11 @@ export class RealMonitoringComponent implements OnInit {
       ],
       series: [{
           name: '数量',
-          data: dataY,
+          data: this.dateNum,
           type: 'bar',
           markPoint: {
             symbolSize:[65, 65],
-            data: this.EchartsData.qipao(this.tiaoshiPao,dataY,dataX)
+            data: this.EchartsData.qipao(this.tiaoshiPao,this.dateNum,this.dateyue)
         },
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
@@ -213,8 +227,8 @@ export class RealMonitoringComponent implements OnInit {
       }]
     };
     this.leftzhutu.setOption(this.optionLeftzhu);
-    this.leftzhutu.getZr().on('click', async (params)=>{
+    /* this.leftzhutu.getZr().on('click', async (params)=>{
-      if(divid!='bottomEcharts'){
+      console.log(111)
         const pointInPixel= [params.offsetX, params.offsetY];
         if (this.leftzhutu.containPixel('grid',pointInPixel)) {
           let xIndex=this.leftzhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
@@ -242,14 +256,13 @@ export class RealMonitoringComponent implements OnInit {
             //右侧饼状图数据
             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.bottomzhutu()
-            this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum)
             this.rightbingtu()
           }
       }
-      }
       
-    });
+      
+    }); */
     
     
   }
@@ -329,5 +342,72 @@ export class RealMonitoringComponent implements OnInit {
     };
     this.rightbing.setOption(this.optionRightbing)
   }
+  //最底部柱状图
+  bottomzhutu(){
+    var ec = echarts as any;
+    this.bottomzhu = ec.init(document.getElementById(`bottomEcharts`),'walden');
+    this.bottomZhuoption = {
+      grid: {
+        //top: 10,
+        containLabel:true,
+        bottom:10,
+        left:50
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+          type: 'none'
+      } 
+  },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          //axisLabel: this.axisLabel,
+          axisLabel:{
+            //this.axisLabel,
+            textStyle:{
+              fontSize :16,
+              color:'#000000'
+            }
+            
+          }
+      },
+      yAxis: {
+          type: 'value',
+          axisLabel:{
+            textStyle:{
+              fontSize :16,
+              color:'#000000'
+            }
+            
+          }
+      },
+      dataZoom:[
+        {
+          type: 'inside'
+      }, {
+          type: 'slider'
+      }
+      ],
+      series: [{
+          name: '数量',
+          data: this.zhiNumData,
+          type: 'bar',
+          markPoint: {
+            symbolSize:[65, 65],
+            data: this.EchartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
+        },
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'38',
+          //label: this.topTextlabel
+      }]
+    };
+    this.bottomzhu.setOption(this.bottomZhuoption);
+    /* this.bottomzhu.getZr().on('click',(params)=>{
+      console.log(params)
+    }) */
+  }
 
 }