[新增]预案状态统计第二个页面

src/app/pages/home/home.component.ts

@@ -228,13 +228,13 @@ export class HomeComponent implements OnInit {
           return name + ' ' + target;
         }
       },
-        //提示框
+      //提示框
-        tooltip: {
+      tooltip: {
-          trigger: 'item',
+        trigger: 'item',
-          formatter: '{b}:{c}份 <br/> 占比：{d}%'
+        formatter: '{b}:{c}份 <br/> 占比：{d}%'
-        },
+      },
-        // 数据
+      // 数据
-        series: [{
+      series: [{
         type: 'pie',
         center: ['55%', '55%'],
         radius: ['25%', '60%'],
@@ -290,47 +290,48 @@ export class HomeComponent implements OnInit {
             },
             },
         },
-          data: [{
+        data: [
-            value: 4128,
+          {
-            name: '高层建筑'
+          value: 4128,
-            },
+          name: '高层建筑'
-            {
+          },
-              value: 1566,
+          {
-              name: '地下建筑'
+            value: 1566,
-            },
+            name: '地下建筑'
-            
+          },
-            {
+          
-              value:1895,
+          {
-              name: '地铁类'
+            value:1895,
-            },
+            name: '地铁类'
-            
+          },
-            {
+          
-              value:2112,
+          {
-              name: '人员密集场所'
+            value:2112,
-            },
+            name: '人员密集场所'
-            {
+          },
-              value: 3008,
+          {
-              name: '石油化工类'
+            value: 3008,
-            },
+            name: '石油化工类'
-            
+          },
-            {
+          
-              value: 2456,
+          {
-              name: '大型城市综合体'
+            value: 2456,
-            },
+            name: '大型城市综合体'
-            {
+          },
-              value: 3522,
+          {
-              name: '仓库、堆垛、厂房'
+            value: 3522,
-            },
+            name: '仓库、堆垛、厂房'
-            {
+          },
-              value: 1421,
+          {
-              name: '隧道'
+            value: 1421,
-            },
+            name: '隧道'
-            {
+          },
-              value: 2622,
+          {
-              name: '其他'
+            value: 2622,
-            }
+            name: '其他'
-          ],
+          }
-        }],
+        ],
+      }],
     };
     data03:any = [
       {

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

@@ -1 +1,31 @@
-<p>page-two-name works!</p>
+<div class="echartsBox">
+    <div id="pie">
+
+    </div>
+    <div class="histogramBox">
+        <!-- 新增 -->
+        <div id="addEchart" class="echart-item">
+
+        </div>
+        <!-- 审核通过 -->
+        <div id="passPlanEchart" class="echart-item">
+
+        </div>
+    </div>
+    <div class="histogramBox">
+        <!-- 预案编制 -->
+        <div id="planMake" class="echart-item">
+
+        </div>
+        <!-- 审核退回 -->
+        <div id="planBack" class="echart-item">
+
+        </div>
+    </div>
+    <div class="histogramBox">
+        <!-- 审核中 -->
+        <div id="planAudit" class="echart-item">
+
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,17 @@
+.echartsBox{
+    width: 100%;
+    height: 92%;
+    overflow-y: auto;
+    #pie{
+        width: 100%;
+        height: 450px;
+    }
+    .histogramBox{
+        width: 100%;
+        .echart-item{
+            display: inline-block;
+            width: 50%;
+            height: 330px;
+        }
+    }
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-
+import { Router,ActivatedRoute } from '@angular/router'
+declare var echarts: any;
 @Component({
   selector: 'app-page-two-name',
   templateUrl: './page-two-name.component.html',
@@ -7,9 +8,306 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageTwoNameComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router:Router,private route:ActivatedRoute) { }
 
   ngOnInit(): void {
+    setTimeout(() => {
+      this.planState()
+      this.planAdd()
+      this.passPlanEchart()
+      this.planMake()
+      this.planBack()
+      this.planAudit()
+    }, 0);
+    
+  }
+  axisLabel = {
+    interval: 0,  
+    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;  
+        }  
+      }  
+  }//echarts两个字换行
+  zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
+  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
+  //预案新增统计
+  planAdd () {
+    let _this = this
+    var addEchart = echarts.init(document.getElementById('addEchart'));
+    var option = {
+      title: {
+        text: "预案新增",
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28'
+          
+      }]
+    };
+    addEchart.setOption(option);
+    addEchart.on('click', function (params) {
+      _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案新增"}})
+    });
+  }
+  //审核通过
+  passPlanEchart (){
+    let _this = this
+    var passPlanEchart = echarts.init(document.getElementById('passPlanEchart'));  
+    var option = {
+      title: {
+        text: "预案审核通过",
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28'
+      }]
+    };
+    passPlanEchart.setOption(option);
+    passPlanEchart.on('click', function (params) {
+      _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核通过"}})
+    });
+  }
+
+  //预案编制
+  planMake (){
+    let _this = this
+    var passMakeEchart = echarts.init(document.getElementById('planMake'));  
+    var option = {
+      title: {
+        text: "预案编制",
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28'
+      }]
+    };
+    passMakeEchart.setOption(option);
+    passMakeEchart.on('click', function (params) {
+      _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案编制"}})
+    });
   }
 
+  //预案退回
+  planBack (){
+    let _this = this
+    var passBackEchart = echarts.init(document.getElementById('planBack'));  
+    var option = {
+      title: {
+        text: "预案审核退回",
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28'
+      }]
+    };
+    passBackEchart.setOption(option);
+    passBackEchart.on('click', function (params) {
+      _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核退回"}})
+    });
+  }
+
+  //预案审核中
+  planAudit (){
+    let _this = this
+    var planAuditEchart = echarts.init(document.getElementById('planAudit'));  
+    var option = {
+      title: {
+        text: "预案审核中",
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28'
+      }]
+    };
+    planAuditEchart.setOption(option);
+    planAuditEchart.on('click', function (params) {
+      
+      _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核中"}})
+    });
+  }
+  //预案状态统计
+  planState(){
+    var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]';
+    var jsonObj =  JSON.parse(shuju);
+    var passPlanEchart = echarts.init(document.getElementById('pie'));  
+    var option = {
+      title: {
+          text: '预案状态统计（7005份）',
+          left: 'center',
+          top: "11%",
+          textStyle: {
+            fontSize: 23
+          }
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: function (params){
+             var res = '<div class="tishi" style="background:#FFFFFF"><span style="color:#000000;font-size:25px;padding:10px 10px">预案补充</span>'
+             res+='</br><table style="width:100% background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0" >';
+             res+='<thead><tr>';
+             res+='<td style="border:1px solid #000000">名称</td>';
+             res+='<td style="border:1px solid #000000">数量</td>'
+             res+='<td style="border:1px solid #000000">总占比</td>'
+             res+='</tr></thead>'
+             res+='<tbody>';
+             console.log(jsonObj)
+             for(var i=0;i<jsonObj.length;i++){
+               res+='<tr>'
+               res+='<td style="border:1px solid #000000">'+jsonObj[i].name+'</td>'
+               res+='<td style="border:1px solid #000000">'+jsonObj[i].number+'</td>'
+               res+='<td style="border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+             }
+             res+='</tbody>'
+             res+='</table></div>'
+             return res
+        }
+
+      },
+      legend: {
+          orient: 'vertical',
+          right: '23%',
+          top: "26%",
+          data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
+      },
+      series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '60%',
+            center: ['50%', '60%'],
+            data: [
+                {value: 1585, name: '预案新增'},
+                {value: 2000, name: '预案审核通过'},
+                {value: 2600, name: '预案编制'},
+                {value: 1500, name: '预案审核退回'},
+                {value: 1800, name: '预案审核中'}
+            ],
+            label: {
+              formatter: '{b}({c}份)\n{d|{d}%}',
+              rich: {
+                d: {
+                  align: 'center',
+                }
+              },
+          },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+          }
+      ]
+    }
+    passPlanEchart.setOption(option);
+  }
 }

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

@@ -0,0 +1,5 @@
+<div class="detailBox">
+    <div id="detailBox"> 
+
+    </div>
+</div>

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

@@ -0,0 +1,15 @@
+.detailBox{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    #detailBox{
+        width: 100%;
+        height: 350px;
+        position: absolute;
+        left: 50%;
+        top: 45%;
+        transform: translate(-50%,-50%);
+    }
+    
+    
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageZhongDuiDetailsComponent } from './page-zhong-dui-details.component';
+
+describe('PageZhongDuiDetailsComponent', () => {
+  let component: PageZhongDuiDetailsComponent;
+  let fixture: ComponentFixture<PageZhongDuiDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageZhongDuiDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageZhongDuiDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+declare var echarts: any;
+@Component({
+  selector: 'app-page-zhong-dui-details',
+  templateUrl: './page-zhong-dui-details.component.html',
+  styleUrls: ['./page-zhong-dui-details.component.scss']
+})
+export class PageZhongDuiDetailsComponent implements OnInit {
+
+  constructor( public route: ActivatedRoute) { }
+
+  title:String
+  zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
+  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      this.title = params.name
+    })
+    setTimeout(() => {
+      this.detailEcharts()
+    }, 0);
+  }
+  detailEcharts(){
+    var detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
+    var option = {
+      title: {
+        text: this.title,
+        left: "center",
+        textStyle: {
+          fontSize: 28
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhongNameData,
+          // axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [{
+          data: this.zhongNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          }
+      }]
+    };
+    detailPlanEchart.setOption(option);
+  }
+
+}

src/app/statistic-analysis/statistic-analysis-routing.module.ts

@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { PageOneComponent } from './state/page-one/page-one.component';
 import { PageTwoNameComponent } from './state/page-two-name/page-two-name.component';
 import { PageTwoTimeComponent } from './state/page-two-time/page-two-time.component';
+import { PageZhongDuiDetailsComponent } from './state/page-zhong-dui-details/page-zhong-dui-details.component';
 
 const routes: Routes = [
   { path: 'statePageOne', component: PageOneComponent},
+  { path: 'statePageTwo_time', component: PageTwoTimeComponent},
   { path: 'statePageTwo_name', component: PageTwoNameComponent},
-  { path: 'statePageTwo_time', component: PageTwoTimeComponent}
+  { path: 'statePageTwo_details', component: PageZhongDuiDetailsComponent}
 ];
 
 @NgModule({

src/app/statistic-analysis/statistic-analysis.module.ts

@@ -46,10 +46,11 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
+import { PageZhongDuiDetailsComponent } from './state/page-zhong-dui-details/page-zhong-dui-details.component';
 
 
 @NgModule({
-  declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent],
+  declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent],
   imports: [
     CommonModule,
     StatisticAnalysisRoutingModule,

src/index.html

@@ -12,7 +12,6 @@
 <body>
   <app-root></app-root>
 </body>
-<script src="/assets/acharts/acharts.min.js"></script>
 <script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346"></script>
 <script src="https://webapi.amap.com/loca?v=2.0&key=e4b359dc7b03f9418b7497f807131346"></script>
 <script src="https://webapi.amap.com/ui/1.1/main.js"></script>