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

4 years ago · a370ed548d
2 changed files with 121 additions and 42 deletions
--- a/src/app/statistic-analysis/echarts-data.service.ts
+++ b/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//选择年月
--- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts
+++ b/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'//添加时间
-  endtime='0'
+  addtime= String(new Date().getFullYear())+'-01'//添加时间
+  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(){
-    var  date=new Date
-    if(this.endtime=='0'&&this.addtime=='0'){
+  async getechartsdata(chushi:boolean){
+    /* var  date=new Date()
+    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(this.addtime.split('-')[0]!=this.endtime.split('-')[0]){
          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])){
-          
-        } */
+        }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)
+          }
+        }
        
      });
      }
-    }
+    
    //获取底端柱状图数据
-    let param={
-      TimeIntervalStart:this.addtime=='0'?'':this.addtime,
+    let paramBottom={
+      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)
-    //console.log(this.dateyue,this.dateNum)
-    this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData)
-    this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum)
+    this.leftzhuzhuangtu()
    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.bottomzhu = ec.init(document.getElementById('bottombox'),'walden');
-    //console.log(this.leftzhutu)
+    this.leftzhutu = ec.init(document.getElementById(`leftecharts`),'walden');
    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)=>{
-      if(divid!='bottomEcharts'){
+    /* this.leftzhutu.getZr().on('click', async (params)=>{
+      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.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum)
+            this.bottomzhutu()
            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)
+    }) */
+  }

 }