[修改]预案状态统计柱状图适配pad

src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

@@ -13,8 +13,15 @@ export class AddUnitOneComponent implements OnInit {
 
   setTimeoutObj//延时器需要清除
   tabledata
+  padHw
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     if(sessionStorage.getItem('refresh') === 'true') {
       sessionStorage.removeItem('refresh');
       location.reload();
@@ -67,11 +74,11 @@ export class AddUnitOneComponent implements OnInit {
     }
     for(var i=0;i<this.tabledata[0].organizationStatistics.organizations.length;i++){
       this.orData.push(this.tabledata[0].organizationStatistics.organizations[i])
-        this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName)
-       /* if(this.tabledata[0].organizationStatistics.organizations[i].count>0){
-        
-      }  */
-      
+      if(this.tabledata[0].organizationStatistics.organizations[i].organizationName.length>5&&this.padHw){
+        this.tabledata[0].organizationStatistics.organizations[i].organizationName=this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(0, 5)
+        +'\n'+this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(5)
+      }
+      this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName)
     }
     this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
     this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}})
@@ -113,8 +120,8 @@ export class AddUnitOneComponent implements OnInit {
         {
           name: '访问来源',
           type: 'pie',
-          radius: '50%',
-          center: ['45%', '53%'],
+          radius:this.padHw?'42%':'50%',
+          center: ['48%', '53%'],
           bottom:130,
           left:30,
           label:{

src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss

@@ -67,10 +67,16 @@
     overflow: auto;
     #barEchart{
         width: 100%;
-        height: 550px;
+        @media screen and (max-device-width:1400px){
+            height: 500px;
+            top: 55%;
+        }
+        @media screen and (min-device-width:1400px){
+            height: 550px;
+            top: 50%;
+        }
         position: absolute;
         left: 50%;
-        top: 50%;
         transform: translate(-50%,-50%);
     }
 }

src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss

@@ -31,11 +31,17 @@
         overflow: auto;
         #barEchart{
             width: 100%;
-            height: 550px;
             position: absolute;
             left: 50%;
-            top: 50%;
             transform: translate(-50%,-50%);
+            @media screen and (max-device-width:1400px){
+                height: 500px;
+                top: 55%;
+            }
+            @media screen and (min-device-width:1400px){
+                height: 550px;
+                top: 50%;
+            }
         }
     }
 }

src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts

@@ -34,7 +34,14 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
   tabledata
   thisorId=[]
   zhiorbuild
+  padHw
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     if(sessionStorage.getItem('refresh') === 'true') {
       sessionStorage.removeItem('refresh');
       location.reload();
@@ -46,13 +53,18 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
       this.canshuId=params['zhuId']
       this.zhiorbuild=params['type']
     });
+    
+    this.setTimeoutObj = window.setTimeout(()=>{
+      this.getechartsData()
+    })
+  }
+  async getechartsData(){
     let paramsdata:any = {
       //id:this.zhiorbuild=='zhi'? this.canshuId:this.lastId,
       organizationId:this.zhiorbuild=='zhi'?this.lastId:this.canshuId
     }
-    this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.zhiorbuild=='zhi'?this.canshuId:this.lastId}`)
-    this.setTimeoutObj = window.setTimeout(()=>{
-      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+    await this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.zhiorbuild=='zhi'?this.canshuId:this.lastId}`)
+    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
       //console.log(this.tabledata)
       for(var i=0;i<this.tabledata[0].organizations.length;i++){
         this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName)
@@ -61,7 +73,6 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
       }
       this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
       this.detailEcharts()
-    },1000)
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
@@ -103,7 +114,7 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
       title: {
         text: this.buildingTypeName + '(' +this.organizationName + ')'+`：总数(${this.tabledata[0].totalCount})`,
         left: "center",
-        bottom: "500",
+        //bottom: "500",
         textStyle: {
           fontSize: 30
         }

src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss

@@ -37,11 +37,18 @@
 }
 .publicCss{
     width: 100%;
+    @media screen and (max-device-width:1400px){
+        height: 500px;
+        top: 55%;
+    }
+    @media screen and (min-device-width:1400px){
         height: 550px;
-        position: absolute;
-        left: 50%;
         top: 50%;
-        transform: translate(-50%,-50%);
+    }
+    position: absolute;
+    left: 50%;
+    
+    transform: translate(-50%,-50%);
 }
 .selectedBtn{
     background-color: #2196f3;

src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts

@@ -24,7 +24,14 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
   organizationId=[]
   buildingTypeId=[]
   zhiorbuild
+  padHw
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     if(sessionStorage.getItem('refresh') === 'true') {
       sessionStorage.removeItem('refresh');
       location.reload();
@@ -298,6 +305,64 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
   }
   //柱状图
   tabledata
+  asixLablehw={
+    interval: 0,
+              textStyle:{
+                fontSize :18,
+                color:'#000000'
+              },
+              formatter:function(value)  
+      {    
+        var ret = "";//拼接加\n返回的类目项  
+        var maxLength =2;//每项显示文字个数  
+        var valLength = value.length;//X轴类目项的文字个数  
+        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
+        if (rowN > 1)//如果类目项的文字大于3,  
+        {  
+            for (var i = 0; i < rowN; i++) {  
+                var temp = "";//每次截取的字符串  
+                var start = i * maxLength;//开始截取的位置  
+                var end = start + maxLength;//结束截取的位置  
+                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
+                temp = value.substring(start, end) + "\n";  
+                ret += temp; //凭借最终的字符串  
+            }  
+            return ret;  
+        }  
+        else {  
+            return value;  
+        }  
+      }
+  }
+  asixLable={
+    interval: 0,
+              textStyle:{
+                fontSize :18,
+                color:'#000000'
+              },
+              formatter:function(value)  
+      {    
+        var ret = "";//拼接加\n返回的类目项  
+        var maxLength =4;//每项显示文字个数  
+        var valLength = value.length;//X轴类目项的文字个数  
+        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
+        if (rowN > 1)//如果类目项的文字大于3,  
+        {  
+            for (var i = 0; i < rowN; i++) {  
+                var temp = "";//每次截取的字符串  
+                var start = i * maxLength;//开始截取的位置  
+                var end = start + maxLength;//结束截取的位置  
+                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
+                temp = value.substring(start, end) + "\n";  
+                ret += temp; //凭借最终的字符串  
+            }  
+            return ret;  
+        }  
+        else {  
+            return value;  
+        }  
+      }
+  }
   barEcharts(){
     
     this.forArr.forEach(item=>{
@@ -314,22 +379,15 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
           }
         },
         grid: {
-          top: 90,
+          containLabel:true,
+          top:this.padHw?60:90,
           bottom: 30
       },
         xAxis: {
             id:this.zhiorbuild=="zhi"?this.buildingTypeId:this.organizationId,
             type: 'category',
             data:this.zhiorbuild=="zhi"?this.buildingData: this.zhiNameData,
-            axisLabel:{
-              //this.axisLabel,
-              interval: 0,
-              textStyle:{
-                fontSize :18,
-                color:'#000000'
-              }
-              
-            }
+            axisLabel:this.padHw?this.asixLablehw:this.asixLable,
         },
         yAxis: {
             type: 'value',

src/app/statistic-analysis/all-plan/all-plan.component.scss

@@ -1,4 +1,6 @@
 .body{
+    height: 100%;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     .topbox{

src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts

@@ -14,7 +14,7 @@ export class BuildingTypeOneComponent implements OnInit {
   constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { }
 
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){
+    if(window.matchMedia("(max-width: 1400px)").matches){
       this.padHw=true
       //this.padjt=
     }else{
@@ -75,7 +75,8 @@ export class BuildingTypeOneComponent implements OnInit {
       },
       legend: {
         orient: 'vertical',
-        right: this.padHw?150:250,
+        //left:this.padHw?50:0,
+        right:this.padHw?20:250,
         top:60,
         textStyle:{
           fontSize:18,

src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss

@@ -30,10 +30,18 @@
         overflow: auto;
         #barEchart{
             width: 100%;
-            height: 550px;
+            
+            @media screen and (max-device-width:1400px){
+                top: 60%;
+                height: 500px;
+            }
+            @media screen and (min-device-width:1400px){
+                top: 50%;
+                height: 550px;
+            }
             position: absolute;
             left: 50%;
-            top: 50%;
+            
             transform: translate(-50%,-50%);
         }
     }

src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts

@@ -33,7 +33,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
   padHw
 
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){
+    if(window.matchMedia("(max-width: 1300px)").matches){
       this.padHw=true
       //this.padjt=
     }else{
@@ -95,7 +95,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
     this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');  
     var option = {
       title: {
-        top:this.padHw?50:0,
+        top:this.padHw?10:0,
         text: this.buildingTypeName + '(' +this.organizationName + ')'+`：总数(${this.tabledata[0].totalCount})`,
         left: "center",
         textStyle: {
@@ -103,7 +103,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
         }
       },
       grid: {
-        top:this.padHw?180:110,
+        top:this.padHw?120:110,
         //bottom: 10
     },
       xAxis: {

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

@@ -568,7 +568,7 @@ export class EchartsDataService {
       this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
       this.res+='</table></div></div>'
       return this.res
-    },1000)
+    })
     
   }
 

src/app/statistic-analysis/state/page-one/page-one.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-01 15:24:39
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-25 11:17:04
+ * @LastEditTime: 2021-04-01 09:46:00
  */
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
@@ -22,21 +22,31 @@ export class PageOneComponent implements OnInit {
   
   constructor(private router: Router,public echartsData:EchartsDataService) { }
 
+  padHw
   ngOnInit() {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     if(sessionStorage.getItem('refresh') === 'true') {
       sessionStorage.removeItem('refresh');
       location.reload();
      }
-    this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`)
+    
     window.setTimeout(()=>{
-      this.initCharts()
-    },1000)
+      this.getechartsdata()
+    })
   }
   ngOnDestroy(): void {
     this.indexBzt.clear()
     this.indexBzt.dispose()
   }
-  /* 饼状图跳转 */
+  async getechartsdata(){
+    await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`)
+    this.initCharts()
+  }
 
   /* 首页饼状图 */
   indexBzt
@@ -67,8 +77,8 @@ export class PageOneComponent implements OnInit {
       },
       legend: {
           orient: 'vertical',
-          right: 150,
-          top:80,
+          right:this.padHw?50:150,
+          top:this.padHw?30:80,
           //padding:20,
           // itemWidth:60,
           // itemHeight:25,

src/app/statistic-analysis/state/page-there/page-there.component.scss

@@ -12,7 +12,7 @@
     }
     #Line{
         width: 50%;
-        height: 420px;
+        height: 550px;
         margin: 50px auto;
     }
   }
@@ -67,10 +67,17 @@
     overflow: auto;
     #zhidui{
         width: 100%;
-        height: 550px;
+      @media screen and (max-device-width:1400px){
+          height: 550px;
+          top: 60%;
+      }
+      @media screen and (min-device-width:1400px){
+          height: 650px;
+          top: 55%;
+      }
         position: absolute;
         left: 50%;
-        top: 50%;
+        
         transform: translate(-50%,-50%);
     }
   }

src/app/statistic-analysis/state/page-there/page-there.component.ts

@@ -32,25 +32,38 @@ export class PageThereComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     this.dateInit();
     let datayuex:string;
-    let headName:string;
     this.activatedRoute.queryParams.subscribe(param=>{
       this.lastid=param.id
       this.type=param.type
       this.headtext=param.headtext
       datayuex=param.level
       this.zhong=param.zhong
-      headName=datayuex+'月'+this.headtext;
+      this.headName=datayuex+'月'+this.headtext;
       //console.log(headName)
     }); 
+    
+    window.setTimeout(()=>{
+      this.getechartsdata()
+    })
+  }
+  padHw
+  headName
+  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  async getechartsdata(){
     let paramdata={
       planStatus:this.type,
       OrganizationId:this.lastid
     }
-    this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
-    window.setTimeout(()=>{
-      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
+    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
       console.log(this.tabledata)
       for(var i=0;i<this.tabledata[0].organizations.length;i++){
       this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
@@ -58,13 +71,9 @@ export class PageThereComponent implements OnInit {
       this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
     }
       this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
-      this.zhuzhuangtu(headName)
-    },1000)
+      this.zhuzhuangtu(this.headName)
   }
 
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
-  
-
   //查询数据
   years:any = []
   selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
@@ -122,8 +131,9 @@ export class PageThereComponent implements OnInit {
 
   axisLabel = {
     interval: 0,
+    //rotate:-30,  
     textStyle:{
-      fontSize :18,
+      fontSize :15,
       color:'#000000'
     },
     formatter:function(value)  
@@ -157,13 +167,15 @@ export class PageThereComponent implements OnInit {
       title: {
         text: headName,
         left: "center",
+        top:0,
         //bottom: "540",
         textStyle: {
           fontSize: 30
         }
       },
       grid: {
-        top: 110,
+        top: this.padHw?90:110,
+        containLabel:true,
         //bottom: 10
        },
       xAxis: {

src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss

@@ -3,7 +3,7 @@
     height: 100%;
     #pie{
         width: 100%;
-        height: 450px;
+        height: 100%;
        // padding-top: 20px;
     }
     .histogramBox{
@@ -21,10 +21,15 @@
     overflow: auto;
     #pie{
         width: 100%;
-        height: 550px;
+        @media screen and (max-device-width:1400px){
+            height: 450px;
+        }
+        @media screen and (min-device-width:1400px){
+            height: 550px;
+        }
         position: absolute;
         left: 50%;
-        top: 50%;
+        top: 55%;
         transform: translate(-50%,-50%);
     }
   }

src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@@ -15,6 +15,12 @@ export class PageTwoNameComponent implements OnInit {
   @ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
+    if(window.matchMedia("(max-width: 1400px)").matches){
+      this.padHw=true
+      //this.padjt=
+    }else{
+      this.padHw=false
+    }
     if(sessionStorage.getItem('refresh') === 'true') {
       sessionStorage.removeItem('refresh');
       location.reload();
@@ -23,25 +29,31 @@ export class PageTwoNameComponent implements OnInit {
       this.headname=param.level
       this.type=param.type
     }); 
+    
+    
+    setTimeout(() => {
+      this.getechartsdata()
+    });
+  }
+
+  ngOnDestroy(): void {
+  }
+  async getechartsdata(){
     let paramdata={
       planStatus:this.type
     }
-    this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
-    setTimeout(() => {
-      this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
-      console.log(this.tabledata)
+    await this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
+    this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
+      //console.log(this.tabledata)
       for(var i=0;i<this.tabledata[0].organizations.length;i++){
       this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
       this.zhiNumData.push(this.tabledata[0].organizations[i].count)
       this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
     }
-      this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
-      this.planAdd()
-    },1000);
-  }
-
-  ngOnDestroy(): void {
+    this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
+    this.planAdd()
   }
+  padHw
   headname//标题
   type//预案类型
   axisLabel = {
@@ -109,14 +121,13 @@ export class PageTwoNameComponent implements OnInit {
       title: {
         text: _this.headname+`总数（${this.tabledata[0].totalCount}）`,
         left: "center",
-        top: "0",
-        bottom: '100%',
+        top: 0,
         textStyle: {
           fontSize: 30
         }
       },
       grid: {
-        top: 110,
+        top:this.padHw?100: 80,
         //bottom: 10
        },
       xAxis: {
@@ -126,11 +137,13 @@ export class PageTwoNameComponent implements OnInit {
           axisLabel:{
             //this.axisLabel,
             textStyle:{
-              fontSize :18,
+              fontSize :16,
               color:'#000000'
-            }
+            },
+            interval: 0,
             
-          }
+            
+          },
       },
       yAxis: {
           type: 'value',

src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-09-05 13:50:45
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-25 10:56:10
+ * @LastEditTime: 2021-03-31 16:32:39
  */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -41,13 +41,22 @@ export class PageZhongDuiDetailsComponent implements OnInit {
         this.type=param.type
         this.lastid=param.id
       }); 
-      let paramdata={
-        planStatus:this.type,
-        OrganizationId:this.lastid
-      }
-      this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
+      
       window.setTimeout(()=>{
-        this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
+        this.getechartsdata()
+    })
+  }
+  ngOnDestroy(): void {
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
+  }
+  async getechartsdata(){
+    let paramdata={
+      planStatus:this.type,
+      OrganizationId:this.lastid
+    }
+    await this.data.getData(paramdata,`/api/StatisticsAnalysis/Plans/Status`)
+    this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
         console.log(this.tabledata)
         for(var i=0;i<this.tabledata[0].organizations.length;i++){
           this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName)
@@ -56,11 +65,6 @@ export class PageZhongDuiDetailsComponent implements OnInit {
         }
       this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
       this.detailEcharts()
-    },1000)
-  }
-  ngOnDestroy(): void {
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
   }
   //返回
   goBack () {
@@ -91,6 +95,7 @@ export class PageZhongDuiDetailsComponent implements OnInit {
           data: this.zhongNameData,
           axisLabel:{
             //this.axisLabel,
+            interval: 0,
             textStyle:{
               fontSize :18,
               color:'#000000'