Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHai-YuAn

src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.html

@@ -1 +1,13 @@
-<p>delete-four works!</p>
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:22:58
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-05 08:48:27
+-->
+<div class="detailBox">
+    <div id="detailBox"> 
+
+    </div>
+</div>

src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss

@@ -0,0 +1,13 @@
+.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/deleteUnit/delete-four/delete-four.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {EchartsDataService} from '../../echarts-data.service'
+declare var echarts: any;
 
 @Component({
   selector: 'app-delete-four',
@@ -7,9 +10,80 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DeleteFourComponent implements OnInit {
 
-  constructor() { }
+  constructor(public route: ActivatedRoute,public data: EchartsDataService) { }
+  zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
+  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
 
   ngOnInit(): void {
+    window.setTimeout(()=>{
+      this.detailEcharts()
+    })
+  }
+
+  detailEcharts(){
+    var detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
+    var option = {
+      title: {
+        text: this.data.statefulInspectionName,
+        left: "center",
+        textStyle: {
+          fontSize: 28
+        }
+      },
+      xAxis: {
+          type: 'category',
+          data: this.zhongNameData,
+          // axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          console.log(666,params)
+          return this.tableTooltip(params)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
+      series: [{
+          data: this.zhongNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          }
+      }]
+    };
+    detailPlanEchart.setOption(option);
+  }
+
+ 
+  tableTooltip(params:any){
+    var data = [
+      {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
+    ]
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<data.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
   }
 
 }

src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts

@@ -1,12 +1,6 @@
-/*
- * @Descripttion: 
- * @version: 
- * @Author: sueRimn
- * @Date: 2020-09-02 16:15:53
- * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-02 16:44:32
- */
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+declare var echarts: any;
 
 @Component({
   selector: 'app-delete-one',
@@ -14,10 +8,139 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./delete-one.component.scss']
 })
 export class DeleteOneComponent implements OnInit {
+  options:any;
 
-  constructor() { }
+  constructor(private router: Router) { }
 
-  ngOnInit(): void {
+  ngOnInit() {
+    window.setTimeout(()=>{
+      this.initCharts()
+    },0)
+  }
+
+  /* 首页饼状图 */
+  initCharts(){
+    //console.log(document.getElementById('indexBzt'))
+    
+    var ec = echarts as any;
+    var indexBzt = ec.init(document.getElementById('indexBzt'));
+    var options={
+      title: {
+          text: '删除单位统计（8900家）',
+          //subtext: '纯属虚构',
+          padding:[120,100],
+          left: 'center',
+          textStyle:{
+            fontSize:38
+          }
+      },
+      tooltip: {
+          trigger: 'item',
+          formatter:  (params)=>{
+            return this.biaogeTishi(params.name)
+          } ,
+          backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+          borderWidth:'1',
+          borderRadius :'0'
+
+
+      },
+      legend: {
+          orient: 'vertical',
+          right: 150,
+          top:80,
+          //padding:20,
+          itemWidth:60,
+          itemHeight:25,
+          textStyle:{
+            fontSize:28
+          },
+          data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道']
+      },
+      series: [
+          {
+              name: '访问来源',
+              type: 'pie',
+              radius: '65%',
+              center: ['50%', '60%'],
+              label:{
+                normal:{
+                show:true,
+                position: 'inner',
+                fontSize:18,
+                formatter:'{c} ({d}%)'
+                }
+                
+              },
+              data: [
+                  {value: 500, name: '高层'},
+                  {value: 1300, name: '地下',itemStyle:{color:'#02A7F0'}},
+                  {value: 1500, name: '轨道交通'},
+                  {value: 1500, name: '化工生产'},
+                  {value: 1700, name: '储罐类'},
+                  {value: 800, name: '厂房'},
+                  {value: 1500, name: '古建筑'},
+                  {value: 1500, name: '商市场'},
+                  {value: 1700, name: '医院'},
+                  {value: 1700, name: '学校'},
+                  {value: 1700, name: '宾馆'},
+                  {value: 1700, name: '娱乐场所'},
+                  {value: 1700, name: '餐饮业'},
+                  {value: 1700, name: '影剧院'},
+                  {value: 1700, name: '展览建筑'},
+                  {value: 1700, name: '隧道'}
+              ],
+              emphasis: {
+                  itemStyle: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+              }
+          }
+      ]
+    };
+    indexBzt.on('click', (params) => {
+      this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two');
+    });
+  indexBzt.setOption(options);
+  }
+  /**
+   * @name: 表格提示框封装
+   * @test: test font
+   * @msg: 
+   * @param {string(表头)}
+   * @return {type} 
+   */
+  biaogeTishi(biaotou:string){
+    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
   }
 
 }

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html

@@ -1 +1,26 @@
-<p>delete-there works!</p>
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:22:35
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-04 16:19:53
+-->
+<div class="head">
+    <select style="width: 80px;height: 50px; margin-left: 200px;">
+        <option value ="2020">2020</option>
+      </select>
+      <select style="width: 80px;height: 50px; margin-left: 50px;" >
+        <option value ="1">1</option>
+        <option value ="1">2</option>
+        <option value ="1">3</option>
+        <option value ="1">4</option>
+        <option value ="1">5</option>
+        <option value ="1">6</option>
+        <option value ="1">7</option>
+        <option value ="1">8</option>
+      </select>
+      <button class="chaxun">查询</button>
+      
+</div>
+<div id="zhidui" class="zhu"></div>

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss

@@ -0,0 +1,22 @@
+.head{
+    //display: flex;
+    border-bottom:2px solid #d4dde4;
+    width: 100%;
+    height: 100px;
+    background-color:white ;
+}
+.chaxun{
+    background-color: #008CBA;
+    color: white;
+     border-radius:5px;
+     font-size: 16px;
+     margin-left: 50px;
+     padding: 15px 32px;
+}
+.zhu{
+    padding-top: 200px;
+    padding-left: 200px;
+    text-align: center;
+    height: 270px;
+    width: 880px;
+}

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts

@@ -1,4 +1,15 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:22:35
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-05 08:58:18
+ */
 import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import {EchartsDataService} from '../../echarts-data.service'
+declare var echarts: any;
 
 @Component({
   selector: 'app-delete-there',
@@ -7,9 +18,107 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DeleteThereComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService) { }
 
   ngOnInit(): void {
+    let headtext:string;
+    let datayuex:string;
+    let headName:string;
+    this.activatedRoute.params.subscribe(param=>{
+      headtext=param.headtext
+      datayuex=param.datayuex
+      headName=headtext+''+datayuex;
+      //console.log(datayuex)
+    });
+    window.setTimeout(()=>{
+      this.zhuzhuangtu(headName)
+    },0)
+  }
+  zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
+  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
+  /* 柱状图 */
+  zhuzhuangtu(headName:string){
+    var ec = echarts as any;
+    var zhutu = ec.init(document.getElementById('zhidui'));
+    var option = {
+      title: {
+        text: `${headName}`,
+        left: "center",
+        top: "15",
+        textStyle: {
+          fontSize: 23
+        }
+      },
+      grid: {  
+        left: '5%',  
+        bottom:'35%'  
+        },  
+      xAxis: {
+          type: 'category',
+          data: this.zhiNameData,
+          //axisLabel: this.axisLabel
+      },
+      yAxis: {
+          type: 'value'
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
+      series: [{
+          data: this.zhiNumData,
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)'
+          },
+          barWidth :'28',
+          //label: this.topTextlabel
+      }]
+    };
+    zhutu.on('click', (params) => {
+      console.log(params)
+      this.echartsData.statefulInspectionName =params.name;
+      this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`);
+    });
+    zhutu.setOption(option);
+  }
+
+   
+  tableTooltip2(biaotou:string){
+    var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
   }
 
 }

src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html

@@ -1 +1,90 @@
-<p>delete-two works!</p>
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:21:18
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-04 15:36:05
+-->
+<body>
+
+    <div style="position: fixed; " class="daohang">
+        <label><input name="riqi" type="radio" value=""  style="margin-left: 20px;" (click)='anyue()'/>月 </label> 
+        <label><input name="riqi" type="radio" value="" (click)='annian()'/>年 </label> 
+        <select style="width: 80px;height: 50px; margin-left: 100px;">
+            <option value ="2020">2020</option>
+          </select>
+          <div id="yue1">
+          <select style="width: 80px;height: 50px; margin-left: 50px;" >
+            <option value ="1">1</option>
+            <option value ="1">2</option>
+            <option value ="1">3</option>
+            <option value ="1">4</option>
+            <option value ="1">5</option>
+            <option value ="1">6</option>
+            <option value ="1">7</option>
+            <option value ="1">8</option>
+          </select>
+        </div>
+          <select style="width: 80px;height: 50px; margin-left: 100px;">
+            <option value ="2020">2020</option>
+          </select>
+          <div id="yue2">
+          <select style="width: 80px;height: 50px; margin-left: 50px;" >
+            <option value ="1">1</option>
+            <option value ="1">2</option>
+            <option value ="1">3</option>
+            <option value ="1">4</option>
+            <option value ="1">5</option>
+            <option value ="1">6</option>
+            <option value ="1">7</option>
+            <option value ="1">8</option>
+          </select>
+        </div>
+          <button  class="chaxun" >查询</button>
+            <!-- <button type="button" class="button" style="margin-left: 500px;">按区间查询</button>
+        <button  type="button" class="button" style="margin-left: 10px;" >年查询</button> -->
+        
+        
+      </div>
+<div class="head" id="head"></div>
+<section class="mainbox">
+    <div class="column">
+        <div class="panel bar" id="leftOne">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel line" id="leftTwo">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel pie" id="leftThere">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel four" id="leftFour">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+    </div>
+    <div class="column">
+        <div class="panel bar1" id="rightOne">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel line1" id="rightTwo">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel pie1" id="rightThree">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel four1" id="rightFour">
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+          </div>
+    </div>
+</section>
+<div style="padding-top: 50px; height: 50px; width: 100%;"></div>
+</body>

src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss

@@ -0,0 +1,95 @@
+body{
+    overflow:auto;
+}
+.daohang{
+    display: flex;
+    z-index: 5;
+    border-bottom:2px solid #d4dde4;
+    width: 100%;
+    height: 180px;
+    background-color:white ;
+}
+
+.chaxun{
+    background-color: #008CBA;
+    color: white;
+     border-radius:5px;
+     //font-size: 16px;
+     margin-left: 50px;
+}
+.head{
+    text-align:center;
+    margin:0 auto;
+    width: 900px;
+    height: 400px;
+    padding-top: 250px;
+}
+.mainbox {
+    padding-bottom: 50px;
+    min-width: 1024px;
+    max-width: 1920px;
+    padding: 0.125rem 0.125rem 0;
+    display: flex;
+    .column {
+      flex: 2;
+      
+    }
+  }
+  .panel {
+    position: relative;
+    height: 400px;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    padding: 0 0.1875rem 0.5rem;
+    margin-bottom: 0.1875rem;
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-top: 2px ;
+      border-left: 2px ;
+    }
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-top: 2px ;
+      border-right: 2px ;
+    }
+    .panel-footer {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      &::before {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-bottom: 2px ;
+        border-left: 2px ;
+      }
+      &::after {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-bottom: 2px ;
+        border-right: 2px ;
+      }
+    }
+  
+    
+    .chart {
+      height: 3rem;
+    }
+  }

src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts

@@ -1,4 +1,16 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:21:18
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-04 16:58:01
+ */
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
+declare var echarts: any;
 
 @Component({
   selector: 'app-delete-two',
@@ -6,10 +18,180 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./delete-two.component.scss']
 })
 export class DeleteTwoComponent implements OnInit {
+  options:any;
+  datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月'];
+  datayuey=[210, 160, 150, 140, 130, 120, 110,120];
+  datanianx=[2019,2020,2021];
+  dataniany=[201,174]
 
-  constructor() { }
+  constructor(private router: Router,public snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    window.setTimeout(()=>{
+      this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey)
+      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
+      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
+      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
+      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
+      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
+      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
+      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
+      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
+    },0)
+  }
+  /* 按月点击事件 */
+  anyue(){
+    var anyue1 = document.getElementById('yue1');
+    anyue1.style.display='block';
+    var anyue2 = document.getElementById('yue2');
+    anyue2.style.display='block';
+    this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey)
+      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
+      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
+      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
+      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
+      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
+      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
+      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
+      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
+  }
+  /* 按年点击事件 */
+  annian(){
+    var anyue1 = document.getElementById('yue1');
+    anyue1.style.display='none';
+    var anyue2 = document.getElementById('yue2');
+    anyue2.style.display='none';
+    this.headZhexian('head','删除数量总统计',this.datanianx,this.dataniany)
+      this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
+      this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
+      this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
+      this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
+      this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
+      this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
+      this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
+      this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) 
   }
 
+  /* 折线图 */
+  headZhexian(divid:string,headtext:string,datayuex,datayuey){
+    var ec = echarts as any;
+    var headZx = ec.init(document.getElementById(`${divid}`));
+    var options = {
+      title: {
+        text: `${headtext}`,
+        left:350,
+        textStyle:{
+          fontSize:28
+        }
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter:  (params)=>{
+        return this.biaogeTishi(`${headtext}`)
+      } ,
+      backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+      borderWidth:'1',
+      borderRadius :'0'
+  },
+      xAxis: {
+          type: 'category',
+          boundaryGap:false,
+          data: datayuex,
+          axisLabel: {
+            color: "#000", //刻度线标签颜色
+          },
+          //设置坐标轴字体颜色和宽度
+          axisLine: {    
+            lineStyle: {
+              color: "#000",
+            },
+          },
+          splitLine: {//分割线配置
+            show:true,
+            lineStyle: {
+              color: '#999',
+            }
+          }
+      },
+      yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: "#000" //刻度线标签颜色
+          },
+           //设置坐标轴字体颜色和宽度
+           axisLine: {
+            lineStyle: {
+              color: "#000",
+            }
+          }
+      },
+      series: [{
+          data: datayuey,
+          type: 'line',
+          lineStyle:{
+            color:'#1369bf'
+          },
+          /* markLine: {
+            symbol: ['none', 'none'],
+            label: {show: false},
+            lineStyle:{
+              color:'#9A9A9A',
+              type:'solid',
+            },
+            data: [
+                {xAxis: 1},
+                {xAxis: 2},
+                {xAxis: 3},
+                {xAxis: 4},
+                {xAxis: 5},
+                {xAxis: 6},
+                {xAxis: 7}
+            ]
+        }, */
+      }]
+  };
+  headZx.on('click', (params) => {
+    console.log(params)
+    this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there/${headtext}/${params.name}`);
+  });
+  headZx.setOption(options);
+  }
+  /**
+   * @name: 表格提示框封装
+   * @test: test font
+   * @msg: 
+   * @param {string(表头)}
+   * @return {type} 
+   */
+  biaogeTishi(biaotou:string){
+    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
+  }
+  
 }

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

@@ -4,11 +4,10 @@
  * @Author: sueRimn
  * @Date: 2020-09-01 15:24:39
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-02 15:11:35
+ * @LastEditTime: 2020-09-02 16:52:44
  */
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-//import * as echarts from '';
 declare var echarts: any;
 
 @Component({

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

@@ -1,3 +1,11 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-09-02 16:57:00
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-09-04 15:55:53
+ */
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { PageOneComponent } from './state/page-one/page-one.component';
@@ -24,6 +32,10 @@ const routes: Routes = [
   { path: 'statePageOne', component: PageOneComponent},
   { path: 'statePageTwo_time', component: PageTwoTimeComponent},
   { path: 'delete_one', component: DeleteOneComponent},
+  { path: 'delete_one/delete_two', component: DeleteTwoComponent},
+  { path: 'delete_one/delete_there/:headtext/:datayuex', component: DeleteThereComponent},
+  { path: 'delete_one/delete_four', component: DeleteFourComponent},
+  { path: 'buildingType_one', component: BuildingTypeOneComponent},
   { path: 'delete_two', component: DeleteTwoComponent},
   { path: 'delete_there', component: DeleteThereComponent},
   { path: 'delete_four', component: DeleteFourComponent},