[新增]统计分析首页

src/app/statistic-analysis/home/home.component.html

@@ -0,0 +1,119 @@
+<div class="main" style="background-color: #000D12;">
+    <div class="main-top">
+      <!-- 左侧 -->
+      <div class="main-left">
+        <div class="panel panel04" style="flex: auto;">
+          <div class="panel-hd">
+            <a href="javascript:;" class="panel-more"><svg width="18" height="12" xmlns="http://www.w3.org/2000/svg"><g fill="#93FCFF" fill-rule="evenodd" opacity=".6"><path d="M0 0h18v2H0zM0 5h18v2H0zM0 10h18v2H0z"/></g></svg></a>
+          </div>
+          <div class="panel-bd">
+            <div id="chartHynyxf" class="chart-item"></div>
+          </div>
+        </div>
+        <div class="box-wrap mt">
+          <div class="panel-hd">
+            <div class="panel-tit" style="color: white;">计划完成情况</div>
+          </div>
+          <div class="panel-bd">
+            <div class="progress-list">
+              <div class="progress-item">
+                <div class="progress-name">本年时间进度</div>
+                <div class="progress">
+                  <div class="progress-num">90%</div>
+                  <div class="progress-bar">
+                    <div style="width: 90%;" class="progress-bar-inner progress-bar-gradient"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="progress-item">
+                <div class="progress-name">年计划完成率</div>
+                <div class="progress">
+                  <div class="progress-num">88%</div>
+                  <div class="progress-bar">
+                    <div style="width: 88%;" class="progress-bar-inner progress-bar-gradient"></div>
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="progress-item">
+                <div class="progress-name">日历进度差</div>
+                <div class="progress">
+                  <div class="progress-num">82%</div>
+                  <div class="progress-bar">
+                    <div style="width: 82%;" class="progress-bar-inner progress-bar-gradient"></div>
+                  </div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 中间 -->
+      <div class="main-center" id="chartMap" style="z-index: 99;">
+        <!-- 数量统计 -->
+        <div class="number-area" id="number-area" style="z-index: 100;height: 125px;">
+          <div class="number-box">
+            <div class="number-tit" style="color: white;">预案编制总量</div>
+            <ul class="count-number">
+              <li class="count-num-item"><span class="num">0</span></li>
+              <li class="count-num-item"><span class="num">2</span></li>
+              <li class="count-num-item"><span class="num">2</span></li>
+              <li class="count-num-item"><span class="num">6</span></li>
+              <li class="count-num-item"><span class="num">7</span></li>
+              <li class="count-num-item"><span class="num">8</span></li>
+            </ul>
+          </div>
+          <div class="number-item">
+            <div class="item-tit">重点单位总量</div>
+            <div class="item-txt" id="number01">8036</div>
+          </div>
+          <div class="number-item">
+            <div class="item-tit">数据采集总量</div>
+            <div class="item-txt" id="number02">6578</div>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <!-- <div class="panel panel06 mt-mlger">
+          <div class="panel-bd">
+            <div id="chartQusj" class="chart-item"></div>
+          </div>
+        </div> -->
+      </div>
+      <!-- 右侧 -->
+      <div class="main-right">
+        <div class="box-wrap" style="height: 100px;flex: 0.7;">
+          <div class="panel-bd" style="padding-top: 5px;">
+            <div class="total-box">
+              <div class="total-item" (click)="threePlan()">
+                <div class="total-name">三维预案总数</div>
+                <div class="total-num">4374</div>
+              </div>
+              <div class="total-item" (click)="twoPlan()">
+                <div class="total-name">二维预案总数</div>
+                <div class="total-num">9693</div>
+              </div>
+              <div class="total-item" (click)="cardPlan()">
+                <div class="total-name">卡片预案总数</div>
+                <div class="total-num">6403</div>
+              </div>
+              <div class="total-item" (click)="otherPlan()">
+                <div class="total-name">其他预案总数</div>
+                <div class="total-num">2208</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box-wrap mt" style="flex: auto;max-height: 340px;margin-top: 0;">
+          <div class="panel-bd">
+            <div id="chartZdgzqy" class="chart-item" style="height: 100%;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main-bottom">
+      <div class="panel panel05">
+        <div class="panel-bd">
+          <div id="chartDwsjcj" class="chart-item"></div>
+        </div>
+      </div>
+    </div>
+  </div>

src/app/statistic-analysis/home/home.component.scss

@@ -0,0 +1,26 @@
+@import "../../../assets/css/newStyle.css";
+.main-center{
+    position: relative;
+}
+#chartMap{
+    margin-left: 5px;
+}
+.number-area{
+    position: absolute;
+    top: 0;
+    display: block;
+    width:80%;
+}
+.total-item{
+    z-index: 200;
+    cursor: pointer;
+}
+.total-item div{
+    height: 25px!important;
+    line-height: 25px!important;
+}
+#chartZdgzqy{
+    div{
+        height: 298px!important;
+    }
+}

src/app/statistic-analysis/home/home.component.spec.ts

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

src/app/statistic-analysis/home/home.component.ts

@@ -0,0 +1,554 @@
+import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Router } from '@angular/router';
+declare var echarts: any;
+declare var AMap: any;
+
+declare var AMapUI: any;
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router) { }
+
+
+  map:any; //地图
+  ngOnInit() {
+    window.setTimeout(()=>{
+      this.unitType()
+      this.unitData()
+      // this.teamData()
+      this.keyUnit()
+      this.mapInit() //初始化地图
+      let that = this
+      window.addEventListener('resize',function () {
+
+      })
+    },0)
+  }
+
+  threePlan(){
+    // this.router.navigate(['/planManagement/entryPlan'])
+  }
+  twoPlan(){
+    // this.router.navigate(['/planManagement/entryPlan'])
+  }
+  cardPlan(){
+    // this.router.navigate(['/planManagement/entryPlan'])
+  }
+  otherPlan(){
+    // this.router.navigate(['/planManagement/entryPlan'])
+  }
+  ngOnDestroy(): void {
+    this.planState.clear()
+    this.planState.dispose()
+    this.chartDwsjcj.clear()
+    this.chartDwsjcj.dispose()
+    this.chartZdgzqy.clear()
+    this.chartZdgzqy.dispose()
+    
+  }
+  //初始化地图
+  adcode:any  //行政编码 
+  mapInit () {
+    //创建地图
+    this.map = new AMap.Map('chartMap', {
+      cursor: 'default',
+      zooms:[8,16],
+      mapStyle:"amap://styles/grey", 
+      // bubble: true
+    });
+
+    let colors = [
+      "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
+      "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
+      "#651067", "#329262", "#5574a6", "#3b3eac"
+    ];
+    
+    AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> {
+
+      //创建一个实例
+      let districtExplorer = new DistrictExplorer({
+        map: this.map,
+        eventSupport: true, //打开事件支持
+      });
+
+      // let adcode = this.adcode; //行政编码 
+      let adcode
+      if(sessionStorage.getItem("realName") == "上海总队"){
+        adcode = 310000
+      }else{
+        adcode = 500000
+      }
+
+      districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
+
+          //更新地图视野
+          this.map.setBounds(areaNode.getBounds(), null, null, true);
+
+          //设置定位节点，支持鼠标位置识别
+          //注意节点的顺序，前面的高优先级
+          districtExplorer.setAreaNodesForLocating(areaNode);
+
+          //清除已有的绘制内容
+          districtExplorer.clearFeaturePolygons();
+  
+          //绘制子区域
+          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
+            // console.log(123,feature,i)
+  
+            let fillColor = colors[i % colors.length];
+            let strokeColor = colors[colors.length - 1 - i % colors.length];
+  
+            return {
+                cursor: 'default',
+                bubble: true,
+                strokeColor: strokeColor, //线颜色
+                strokeOpacity: 1, //线透明度
+                strokeWeight: 1, //线宽
+                fillColor: fillColor, //填充色
+                fillOpacity: 0.5, //填充透明度
+            };
+          });
+  
+          //绘制父区域
+          districtExplorer.renderParentFeature(areaNode, {
+            cursor: 'default',
+            bubble: true,
+            strokeColor: 'black', //线颜色
+            strokeOpacity: 1, //线透明度
+            strokeWeight: 1, //线宽
+            fillColor: null, //填充色
+            fillOpacity: 0.5, //填充透明度
+          });
+
+          // 更新地图视野以适合区划面
+          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
+      });
+
+      districtExplorer.on('featureClick', (e, feature) =>{
+        
+        let props = feature.properties;
+        adcode = props.adcode
+        // console.log(props)
+        let fillColor2
+        if(props.level == 'city'){
+            fillColor2 = null
+        }else{
+            fillColor2 = '#d0daee'
+        }
+        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
+          //更新地图视野
+          // this.map.setBounds(areaNode.getBounds(), null, null, true);
+
+          //设置定位节点，支持鼠标位置识别
+          //注意节点的顺序，前面的高优先级
+          districtExplorer.setAreaNodesForLocating(areaNode);
+
+          //清除已有的绘制内容
+          districtExplorer.clearFeaturePolygons();
+  
+          //绘制子区域
+          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
+            let fillColor = colors[i % colors.length];
+            // console.log(111,fillColor)
+            let strokeColor = colors[colors.length - 1 - i % colors.length];
+  
+            return {
+                cursor: 'default',
+                bubble: true,
+                strokeColor: strokeColor, //线颜色
+                strokeOpacity: 1, //线透明度
+                strokeWeight: 1, //线宽
+                fillColor: fillColor, //填充色
+                fillOpacity: 0.5, //填充透明度
+            };
+          });
+  
+          //绘制父区域
+          districtExplorer.renderParentFeature(areaNode, {
+            cursor: 'default',
+            bubble: true,
+            strokeColor: 'black', //线颜色
+            strokeOpacity: 1, //线透明度
+            strokeWeight: 1, //线宽
+            fillColor: fillColor2, //填充色
+            fillOpacity: 0.5, //填充透明度
+          });
+
+          // 更新地图视野以适合区划面
+          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
+        });
+      
+        // this.chartQusj.setOption(this.chartQusjOption2);
+        // this.chartYadwlx.setOption(this.chartYadwlxOption2);
+        // if(sessionStorage.getItem("realName") == "上海总队"){
+        //   this.chartYapyph.setOption(this.chartYapyphOption4);
+        // }else{
+        //   this.chartYapyph.setOption(this.chartYapyphOption2);
+        // }
+        // this.chartYapyph.setOption(this.chartYapyphOption2);
+        // this.chartYalxtj.setOption(this.chartYalxtjOption2);
+        // console.log(props)
+        //同时设置地图中心点和缩放级别
+        // this.map.setZoomAndCenter(9.4, props.center);  
+
+        // this.map.setBounds(areaNode.getBounds(), null, null, true);
+        // this.router.navigate([`/home/detail`],{queryParams:{'code':props.adcode,'level':props.level}})
+        // this.mapInit ()
+        
+        // this.keyUnitNum = '666'
+        // this.dataNum = '456'
+        // this.planNum = '2,678'
+      });
+
+      districtExplorer.on('outsideClick', (e) => {
+        // console.log('区域外点击');
+        let adcode
+        if(sessionStorage.getItem("realName") == "上海总队"){
+          adcode = 310000
+        }else{
+          adcode = 500000
+        }
+        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
+          //更新地图视野
+          // this.map.setBounds(areaNode.getBounds(), null, null, true);
+
+          //设置定位节点，支持鼠标位置识别
+          //注意节点的顺序，前面的高优先级
+          districtExplorer.setAreaNodesForLocating(areaNode);
+
+          //清除已有的绘制内容
+          districtExplorer.clearFeaturePolygons();
+  
+          //绘制子区域
+          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
+            let fillColor = colors[i % colors.length];
+            // console.log(111,fillColor)
+            let strokeColor = colors[colors.length - 1 - i % colors.length];
+  
+            return {
+                cursor: 'default',
+                bubble: true,
+                strokeColor: strokeColor, //线颜色
+                strokeOpacity: 1, //线透明度
+                strokeWeight: 1, //线宽
+                fillColor: fillColor, //填充色
+                fillOpacity: 0.5, //填充透明度
+            };
+          });
+  
+          //绘制父区域
+          districtExplorer.renderParentFeature(areaNode, {
+            cursor: 'default',
+            bubble: true,
+            strokeColor: 'black', //线颜色
+            strokeOpacity: 1, //线透明度
+            strokeWeight: 1, //线宽
+            fillColor: null, //填充色
+            fillOpacity: 0.5, //填充透明度
+          });
+
+          // 更新地图视野以适合区划面
+          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
+        });
+        // this.chartQusj.setOption(this.chartQusjOption);
+        // this.chartYadwlx.setOption(this.chartYadwlxOption);
+        // if(sessionStorage.getItem("realName") == "上海总队"){
+        //   this.chartYapyph.setOption(this.chartYapyphOption3);
+        // }else{
+        //   this.chartYapyph.setOption(this.chartYapyphOption);
+        // }
+        // // this.chartYapyph.setOption(this.chartYapyphOption);
+        
+        // this.chartYalxtj.setOption(this.chartYalxtjOption);
+        // this.keyUnitNum = '8,036'
+        // this.dataNum = '6,578'
+        // this.planNum = '22,678'
+      })
+      
+    });
+
+
+  }
+  ngAfterViewInit(): void {
+  }
+
+  planState
+  //预案状态统计
+  unitType () {
+    this.planState = echarts.init(document.getElementById('chartHynyxf'), 'skinUpp');
+    var options={
+      title: {
+          text: '预案状态统计（7005份）',
+          left: 'center',
+          // top:-3
+          // textStyle:{
+          //   fontSize:38
+          // }
+      },
+      tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+      },
+      // legend: {
+      //     orient: 'vertical',
+      //     top:20,
+      //     data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
+      // },
+      series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '65%',
+            center: ['50%', '67%'],
+            label:{
+              show:true,
+              formatter:'{b}\n{d|{c}份}',
+              rich: {
+                d: {
+                  align: 'center',
+                }
+              },
+              
+            },
+            data: [
+                {value: 1585, name: '预案新增'},
+                {value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}},
+                {value: 2600, name: '预案编制'},
+                {value: 1500, name: '预案审核退回'},
+                {value: 1800, name: '预案审核中'}
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+          }
+      ]
+    };
+    this.planState.setOption(options);
+    this.planState.on("click",(params) => {
+      this.router.navigate(['/statisticanalysis/statePageOne'])
+    })
+  }
+
+  //新增、删除单位统计
+  chartDwsjcj
+  unitData () {
+    this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'skinUpp');
+    var option = {
+      color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
+      // 标题
+      title: {
+        text: '新增、删除单位统计',
+        left: 0,
+        top: 0,
+      },
+      grid: {
+        left: 30,
+        right: 0,
+      },
+      //图例
+      legend: {
+        top: 0,
+        data: ['新增单位', '删除单位', ],
+        icon: 'circle',
+        itemGap: 20,
+      },
+      //提示框
+      tooltip: {
+        trigger: 'axis',
+      },
+      // x轴
+      xAxis: {
+        type: 'category',
+        data: [],
+        axisLabel: {
+          interval: 0,
+
+          formatter:function(value){
+            var ret = "";//拼接加\n返回的类目项 
+            var maxLength = 5;//每项显示文字个数
+            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;
+            }
+          } //function
+
+        }
+      },
+      // y轴
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        },
+      },
+      // 数据
+      series: [
+        {
+          name: '新增单位',
+          type: 'bar',
+          data: [320, 302, 301, 234, 390, 330, 320, 390, 330, 320, 390, 301, 234, 390, 330, 320, 390, ],
+          label: {
+            show: false,
+            position: "top",
+            formatter: '{c}',
+            color: "#fff",
+          },
+          itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: 'rgba(254,51,194,1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(254,51,194,.5)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+          }
+        }, {
+          name: '删除单位',
+          type: 'bar',
+          data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134, 290, 430, 220, ],
+          label: {
+            show: false,
+            position: "top",
+            formatter: '{c}',
+            color: "#fff",
+          },
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: 'rgba(0,220,254,1)' // 0% 处的颜色
+              }, {
+                offset: 1,
+                color: 'rgba(1,104,191,1)' // 100% 处的颜色
+              }],
+              globalCoord: false // 缺省为 false
+            },
+          }
+        }
+      ],
+    };
+    if(sessionStorage.getItem("realName") == "上海总队"){
+      option.xAxis.data = ['上海总队','浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','青浦支队','松江支队','金山支队','崇明支队','滨海支队']
+    }else{
+      option.xAxis.data = ['渝北区消防救援支队', '黔江区消防救援支队', '大渡口区消防救援支队', '南岸区消防救援支队', '北培区消防救援支队', '渝中区消防救援支队', '万州区消防救援支队', '涪陵区消防救援支队', '江北区消防救援支队', '九龙仓区消防救援支队', '沙坪坝区消防救援支队', '九龙坡区消防救援支队', '长寿区消防救援支队', '巴南区消防救援支队', '江津区消防救援支队', '合川区消防救援支队', '南川区消防救援支队']
+    }
+    this.chartDwsjcj.setOption(option);
+    this.chartDwsjcj.on("click",(params) => {
+      if(params.seriesName == "新增单位"){
+        this.router.navigate(['/statisticanalysis/addUnit_one'])
+      }else{
+        this.router.navigate(['/statisticanalysis/delete_one'])
+      }
+    })
+  }
+
+  chartZdgzqy
+  //建筑类型统计
+  keyUnit () {
+    this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'skinUpp');
+    let options={
+      title: {
+        text: '建筑类型统计（8900家）',
+        left: 'center',
+        top: -3,
+          // textStyle: {
+          //   fontSize:31
+          // }
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b} : {c}家 ({d}%)'
+      },
+      // legend: {
+      //   orient: 'vertical',
+      //   right: 150,
+      //   top:80,
+      //   data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
+      // },
+      series: [
+        {
+          name: '访问来源',
+          type: 'pie',
+          radius: '70%',
+          center: ['50%', '60%'],
+          label:{
+            show:true,
+            // fontSize:13,
+            formatter:'{b}{c}家',
+            rich: {
+              d: {
+                align: 'center',
+              }
+            },
+          },
+          data: [
+              {value: 500, name: '高层'},
+              {value: 800, name: '地下'},
+              {value: 900, name: '轨道交通'},
+              {value: 800, name: '化工生产'},
+              {value: 1200, name: '储罐类'},
+              {value: 1500, name: '厂房'},
+              {value: 1400, name: '古建筑'},
+              {value: 600, name: '商市场'},
+              {value: 568, name: '医院'},
+              {value: 888, name: '学校'},
+              {value: 485, name: '宾馆'},
+              {value: 966, name: '娱乐场所'},
+              {value: 789, name: '餐饮业'},
+              {value: 500, name: '影剧院'},
+              {value: 1025, name: '展览建筑'},
+              {value: 600, name: '隧道'}
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+    this.chartZdgzqy.setOption(options);
+    this.chartZdgzqy.on("click",(params) => {
+      this.router.navigate(['/statisticanalysis/buildingType_one'])
+    })
+  }
+
+}

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

@@ -27,6 +27,8 @@ import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-deta
 import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component';
 import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component';
 import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component';
+import { HomeComponent } from './home/home.component';
+
 
 const routes: Routes = [
   { path: 'statePageOne', component: PageOneComponent},
@@ -51,7 +53,8 @@ const routes: Routes = [
   { path: 'addUnit_one/addUnit_two_time/three_barDetails', component: AddUnitThreeBarDetailsComponent},
   { path: 'scheduledUpdates', component: ScheduledUpdatesComponent},
   { path: 'scheduledUpdates', component: ScheduledUpdatesComponent},
-  { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent}
+  { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent},
+  { path: 'home', component: HomeComponent}
 ];
 
 @NgModule({

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

@@ -62,11 +62,12 @@ import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-deta
 import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component';
 import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component';
 import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component';
+import { HomeComponent } from './home/home.component';
 
 
 
 @NgModule({
-  declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent],
+  declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent],
   imports: [
     CommonModule,
     StatisticAnalysisRoutingModule,

src/styles.scss

@@ -77,3 +77,4 @@ table td.mat-footer-cell:last-of-type{
 .mat-tab-body-content{
 	overflow: hidden!important;
 }
+//