ShangHaiYuan-AnXin/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../echarts-data.service'
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var echarts: any;

//首页图形查询
@Component({
  selector: 'app-scheduled-updates',
  templateUrl: './scheduled-updates.component.html',
  styleUrls: ['./scheduled-updates.component.scss']
})
export class ScheduledUpdatesComponent implements OnInit {

  constructor(private router: Router,public snackBar: MatSnackBar,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.initCharts("pie")
      this.initCharts("pieTwo")
    })
  }

  ngOnDestroy () {
    this.example.clear()
    this.example.dispose()
  }

  example:any;
  buildingShow:boolean=false  //控制查询条件的显隐
  selectedBtn="tu" //两个查询按钮颜色控制
  chaxun:string=""
  //图形查询点击事件
  tuClick(){
    this.buildingShow=false
    this.selectedBtn="tu"
  }
  //条件查询
  tiaojianClick(){
    this.buildingShow=true
    this.selectedBtn="tiaojian"
  }
  //查询按钮点击事件
  findClick(){
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    if(this.chaxun==""){this.snackBar.open('未选择单位','确定',config)}
    else{
      this.echartsData.buildingName=this.chaxun
      this.echartsData.tableShow=true
    }
  }
   /* 首页饼状图 */
   initCharts(pieid){
   this.example= echarts.init(document.getElementById(pieid),'walden');
    var options={
      title: {
        text: pieid=="pie"?'已维护统计（7100家）':'计划维护统计（7100家）',
        top: "3%",
        left: 'center',
        textStyle:{
          fontSize:28
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.selectedBtn=="tu"?this.echartsData.tableDataZhi:this.echartsData.buildingType,params.name)
        },
        position:this.echartsData.tableTooltipNoShow2
      },
      legend: {
        orient: 'vertical',
        right: 150,
        top:80,
        // itemWidth:60,
        // itemHeight:25,
        textStyle:{
        fontSize:18,
        color:"#000000"
         },
        data:pieid=="pie"? ['维护无需修改', '维护修改', '维护删除']:['未维护', '维护通过审核', '维护中']
      },
      series: [{ 
        name: '访问来源',
        type: 'pie',
        radius: '60%',
        center: ['50%', '60%'],
        label:{
          normal:{
          show:true,
          // position: 'inner',
          fontSize:16,
          formatter:'{b} {c}家\n{d|({d}%)}',
          rich: {
            d: {
              align: 'center',
              fontSize:18
            }
          },
        }},
        data:pieid=="pie"? [
          {value: 2000, name: '维护无需修改'},
          {value: 2500, name: '维护修改',itemStyle:{color:'#02A7F0'}},
          {value: 1900, name: '维护删除',itemStyle:{color:'#87cebb'}},
          ]:[
            {value: 2000, name: '未维护'},
            {value: 2500, name: '维护通过审核',itemStyle:{color:'#02A7F0'}},
            {value: 1900, name: '维护中',itemStyle:{color:'#87cebb'}},
            ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }

      }]
    };
    this.example.setOption(options);
    this.example.on('click', (params) => {
      this.echartsData.findShow=true
        if(params.name=="维护删除"){this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two');}
        else{
          if(pieid=="pie"){
            this.echartsData.zhuXname=["平均值","维护无需修改","维护修改","维护删除"]
          }else{this.echartsData.zhuXname=["平均值","维护中","维护通过审核","未维护"]}
          this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts');
        }
        //console.log(this.echartsData.scheduledUpdatesToggle)  
    });
  }



}
//首页条件查询
@Component({
  selector: 'app-indexCondition',
  templateUrl: './indexCondition.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class indexConditionComponent implements OnInit {

  constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      
    },0)
  }

  ngOnDestroy () {
    /* this.oneEcharts.dispose()
    this.oneEcharts.clear() */
  }

  oneEcharts:any;
  displayedColumns: string[] = ['name', 'weight', 'symbol'];
  //点击支队名称跳转事件
  zhiClick(item){
    this.route.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':item+this.echartsData.buildingName}});
  }

}

//所有页面头部
@Component({
  selector: 'app-publicEcharts',
  templateUrl: './publicEcharts.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class publicEchartsComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,) { }

  ngOnInit(): void {
    this.echartsData.scheduledUpdatesToggle = 1
  }

  isToggle:boolean = true; // 已核查/未核查

  //已核查
  verified () {
    this.isToggle = true
    //this.echartsData.scheduledUpdatesToggle ="one"
    this.echartsData.scheduledUpdatesToggle =1
  }

  //未核查
  notVerified () {
    this.isToggle = false
    //this.echartsData.scheduledUpdatesToggle = "three"
    this.echartsData.scheduledUpdatesToggle =1
  }

  //返回
  goBack () {
    if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){
      this.router.navigateByUrl('/statisticanalysis/scheduledUpdates');
    }else{
      this.echartsData.scheduledUpdatesToggle--
    if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){
      this.echartsData.findShow=true
      //this.router.navigateByUrl('/statisticanalysis/scheduledUpdates');
    }
    }
  }

  //更多 窗口
  moreOpen () {
    let dialogRef = this.dialog.open(moreTableComponent);
  }

  //支队查询
  zhiFind(){
    this.echartsData.zhiorBuinding="zhi"
  }
  //建筑类型查询
  buildingFind(){
    this.echartsData.zhiorBuinding="building"
  }



}



//已核查组件
@Component({
  selector: 'app-verified',
  templateUrl: './verified.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class verifiedComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydata,this.xdata)
      this.oneInit()
      //this.twoInit()
    },0)
  }

  /* ngOnDestroy () {
    this.oneEcharts.dispose()
    this.oneEcharts.clear()
    this.items.forEach((element,index) => {
      element.echart.dispose()
      element.echart.clear()
    });
  } */

  oneEcharts:any;
  qipaotishi
  xdata=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月']
  ydata=[1170, 953, 1144, 799, 789, 773, 660, 998, 790, 1004, 1345, 1245]
  //提示框表格
  tableTooltip(dataArr,title:string){
    let data = dataArr
    //console.log(data)
    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:#FFFFFF;font-size:26px;text-align: center;display:block;">'+title+'</span></div>'
      res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
      res+='<thead><tr>';
      res+='<td style="text-align:center;width:25%;">名称</td>';
      res+='<td style="text-align:center;width:25%;">数量</td>'
      res+='<td style="text-align:center;width:25%;">环比</td>'
      res+='<td style="text-align:center;width:25%;">总占比</td>'
      res+='</tr></thead>'
      res+='<tbody>';
      for(var i=0;i<data.length;i++){
        res+='<tr>'
        res+='<td style="text-align:center;">'+data[i].name+'</td>'
        res+='<td style="text-align:center;">'+data[i].number+'</td>'
        res+='<td style="text-align:center;">'+data[i].zhanbi+'</td>'
        res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
      }
      
      res+='</tbody>'
      res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td><td style="text-align:center;">19%</td></tfoot>'
      res+='</table></div></div>'
      return res
  }
  oneInit () {
    
    this.oneEcharts = echarts.init(document.getElementById('center'),'walden');
    var option = {
      grid: {
        top: 100,
        left:40,
        right: 20,
        //bottom: 20,
      },
      // 标题
      title: {
        text: '已核查'+'总数：(1024)',
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 32,
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0', */
        formatter:  (params)=>{
          return this.echartsData.zhiorBuinding=="zhi"?this.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.tableTooltip(this.echartsData.buildingType,params[0].name)
        },
        position:this.echartsData.tableTooltipNoShow2
      },
      // x轴
      xAxis: {
        type: 'category',
        boundaryGap:true,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
        axisLabel:{
          textStyle:{
            fontSize :18,
            color:'#000000'
          }
          
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize :18,
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.qipaotishi
        },
          data: [1170, 953, 1144, 799, 789, 773, 660, 998, 790, 1004, 1345, 1245],
          clickable:false,
        }
      ],
    };
    this.oneEcharts.getZr().on('click', (params) => {
        /* const pointInPixel= [params.offsetX, params.offsetY];
      if (this.oneEcharts.containPixel('grid',pointInPixel)) {
        let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
          this.router.navigate(['/statisticanalysis/scheduledUpdates/yueDate'],{queryParams:{'level':option.xAxis.data[xIndex]}});
      } */
      //let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
      const pointInPixel= [params.offsetX, params.offsetY];
      if (this.oneEcharts.containPixel('grid',pointInPixel)) {
        let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.echartsData.scheduledUpdatesType = 0
        //this.echartsData.scheduledUpdatesName = "ff"
        this.echartsData.zhiorBuinding=="zhi"?this.echartsData.scheduledUpdatesToggle = 2:this.echartsData.scheduledUpdatesToggle = -2
        //this.echartsData.scheduledUpdatesToggle = 2
        this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex]
        this.echartsData.findShow=false
      }
        
    });
    this.oneEcharts.setOption(option);
  }

  months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
  items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}]

  twoInit () {
    this.months.forEach((element,index) => {
      this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp');
      var option = {
        title: {
          text: element+'总数:(500)',
          top: -4,
          left: '35%',
          textStyle:{
            color:'#000',
            fontSize: 30,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize :18
          }
        },
        legend: {
          data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'],
          textStyle: { fontSize :16,color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle:{
                color:'#000000'
              }
            },
            type: 'value',
            axisLabel: {
              textStyle:{
                fontSize :18,
                color:'#000000'
              },
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          // {
          //   //设置坐标轴字体颜色和宽度
          //   axisLine: {    
          //     lineStyle: {color: "#000"},
          //   },
          //   type: 'value',
          //   name: '个',
          //   axisLabel: {
          //     color: "#000", //刻度线标签颜色
          //     formatter: '{value}'
          //   }
          // }
        ],
        series: [
          {
            name: '已核查无需修改',
            type: 'bar',
            stack: '总数',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
            barWidth :'38',
          },
          {
            name: '已核查修改中',
            type: 'bar',
            stack: '总数',
            data: [39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4],
            itemStyle:{color: '#626c91'}
          },
          {
            name: '已核查提交审核',
            type: 'bar',
            stack: '总数',
            data: [48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14],
            itemStyle:{color:'#c4ebad'}
          },
          {
            name: '平均值',
            type: 'line',
            // yAxisIndex: 1,
            data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
            itemStyle:{color: '#FFDC35'}
          },
          {
            name: '平均值2倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#6be6c1'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          },
        ]
      };
      this.items[index].echart.setOption(option);
      this.items[index].echart.on('click', (params) => {
        let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        this.echartsData.scheduledUpdatesType = 0
        this.echartsData.scheduledUpdatesName = this.months[index]
        //this.echartsData.scheduledUpdatesToggle = false
        this.echartsData.scheduledUpdatesXName=params.name
        //console.log(this.echartsData.scheduledUpdatesXName)
      });
    });
  }



}



//未核查组件
@Component({
  selector: 'app-notVerified',
  templateUrl: './notVerified.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class notVerifiedComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.oneInit()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.dispose()
    this.oneEcharts.clear()
  }

  oneEcharts:any;
  oneInit () {
    this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
    var option = {
      grid: {
        left:70
      },
      title: {
        text: '未核查',
        subtext: '总数剩余 5850',
        left: 'center',
        textStyle:{
          color:'#000',
          fontSize: 30,
        },
        subtextStyle: {color:'#999',fontSize: 15} 
      },
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhong,'未核查')
        },
        position:this.echartsData.tableTooltipNoShow2
      },
      legend: {
        data: ['剩余未核查','总数'],
        textStyle: { color: '#000',fontSize: 18}
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {color: "#000",}
        },
      },
      yAxis: {
        type: 'category',
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {color: "#000"},
        },
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
          formatter: '{value}'
        },
        data:  ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
      },
      series: [
        {
          name: '剩余未核查',
          type: 'bar',
          stack: '差值',
          data: [289, 307, 334, 356, 389, 413, 456, 477, 489, 503, 540, 570, 599],
          itemStyle:{color:'#C80000'},
          label: {
            show: true,
            position: 'insideRight',
            color: '#fff'
          },
        },
        {
          name: '总数',
          type: 'bar',
          stack: '差值',
          data: [1520, 1430, 1170, 1441, 1094, 1147, 1098, 1142, 1274, 1400, 1265, 1341, 1200],
          itemStyle:{color:'#999'},
          label: {
            show: true,
            position: 'insideRight',
            color: '#fff'
          },
        },
      ]
    };
    this.oneEcharts.setOption(option);
    this.oneEcharts.on('click', (params) => {
      this.echartsData.scheduledUpdatesType = 1
      this.echartsData.scheduledUpdatesName = params.name
      this.echartsData.scheduledUpdatesToggle = 3
    });
  }



}
//支队核查具体月份组件
@Component({
  selector: 'app-yueDate',
  templateUrl: './yueDate.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class yueDateComponent implements OnInit {

  constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { }

  level:string;
  ngOnInit(): void {
    this.router.queryParams.subscribe(param=>{
      this.level=param.level
     }); 
     
    window.setTimeout(()=>{
      this.twoInit()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.dispose()
    this.oneEcharts.clear()
  }
  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]

  oneEcharts:any;
  twoInit () {
      this.oneEcharts = echarts.init(document.getElementById("center"), 'skinUpp');
      var option = {
        title: {
          text: this.echartsData.scheduledUpdatesXName+'已核查总数:(500)',
          top: -4,
          left: '35%',
          textStyle:{
            color:'#000',
            fontSize: 30,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize :18
          }
        },
        legend: {
          data: this.echartsData.zhuXname,
          textStyle: { fontSize :16,color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
            interval: 0
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data:this.zhiNameData,
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle:{
                color:'#000000'
              }
            },
            type: 'value',
            axisLabel: {
              textStyle:{
                fontSize :18,
                color:'#000000'
              },
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          // {
          //   //设置坐标轴字体颜色和宽度
          //   axisLine: {    
          //     lineStyle: {color: "#000"},
          //   },
          //   type: 'value',
          //   name: '个',
          //   axisLabel: {
          //     color: "#000", //刻度线标签颜色
          //     formatter: '{value}'
          //   }
          // }
        ],
        series: [
          {
            name: this.echartsData.zhuXname[1],
            type: 'bar',
            stack: '总数',
            data: this.echartsData.zhiorBuinding=="zhi"?[68, 56, 69, 57, 23, 79, 78, 66, 49, 34, 49, 78, 45,78]:[68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45, 49, 78, 45],
            barWidth :'38',
          },
          {
            name: this.echartsData.zhuXname[2],
            type: 'bar',
            stack: '总数',
            data: this.echartsData.zhiorBuinding=="zhi"?[39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4,2]:[39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4,40,2,4],
            itemStyle:{color: '#626c91'}
          },
          {
            name: this.echartsData.zhuXname[3],
            type: 'bar',
            stack: '总数',
            data: this.echartsData.zhiorBuinding=="zhi"?[48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14,24]:[48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14,3,22,4],
            itemStyle:{color:'#c4ebad'}
          },
          {
            name: this.echartsData.zhuXname[0],
            type: 'line',
            // yAxisIndex: 1,
            data: this.echartsData.zhiorBuinding=="zhi"?[49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37,43]:[49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37,41,43,7],
            itemStyle:{color: '#FFDC35'}
          },
          {
            //name: '与上个月环比',
            type: 'line',
            // yAxisIndex: 1,
            data: [45, 39, 50, 40, 40, 38, 41, 36, 30,32, 36, 38, 30,36],
            //itemStyle:{color: '#6be6c1'},
            
          },
          {
               //name: '警报',
               type: 'effectScatter',
               //coordinateSystem: 'cartesian2d',
               data: [[4,40]], 
               symbolSize:30,
               itemStyle: {
                normal: {
                    color: 'red',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
               /* showEffectOn: 'render',
               rippleEffect: {
                   brushType: 'stroke'
               },
               hoverAnimation: true,
               itemStyle: {
                   normal: {
                       color: 'red',
                       shadowBlur: 10,
                       shadowColor: '#333'
                   }
               },
               zlevel: 1 */
          },
          
          /* {
            name: '平均值2倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#6be6c1'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          }, */
        ]
      };
      this.oneEcharts.setOption(option);
      /* this.items[index].echart.on('click', (params) => {
        let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        this.echartsData.scheduledUpdatesType = 0
        this.echartsData.scheduledUpdatesName = this.months[index]
        this.echartsData.scheduledUpdatesToggle = false
        this.echartsData.scheduledUpdatesXName=params.name
        console.log(this.echartsData.scheduledUpdatesXName)
      }); */
      this.oneEcharts.getZr().on('click', (params) => {

        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.oneEcharts.containPixel('grid',pointInPixel)) {
        let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.echartsData.scheduledUpdatesType = 0
        //console.log(option.xAxis)
        this.echartsData.scheduledUpdatesName = option.xAxis[0].data[xIndex]
        this.echartsData.scheduledUpdatesToggle = 3
        //this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex]
      }
        
      });
      
    
  }



}

//建筑类型核查具体月份组件
@Component({
  selector: 'app-yuebuildingDate',
  templateUrl: './yuebuildingDate.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class yuebuildingDateComponent implements OnInit {

  constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { }

  level:string;
  ngOnInit(): void {
    this.router.queryParams.subscribe(param=>{
      this.level=param.level
     }); 
     
    window.setTimeout(()=>{
      this.twoInit()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.dispose()
    this.oneEcharts.clear()
  }
  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]

  oneEcharts:any;
  twoInit () {
      this.oneEcharts = echarts.init(document.getElementById("center"), 'skinUpp');
      var option = {
        title: {
          text: this.echartsData.scheduledUpdatesXName+'已核查总数:(500)',
          top: -4,
          left: '35%',
          textStyle:{
            color:'#000',
            fontSize: 30,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize :18
          }
        },
        legend: {
          data: this.echartsData.zhuXname,
          textStyle: { fontSize :16,color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
            interval: 0
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data:this.buildingData,
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle:{
                color:'#000000'
              }
            },
            type: 'value',
            axisLabel: {
              textStyle:{
                fontSize :18,
                color:'#000000'
              },
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          // {
          //   //设置坐标轴字体颜色和宽度
          //   axisLine: {    
          //     lineStyle: {color: "#000"},
          //   },
          //   type: 'value',
          //   name: '个',
          //   axisLabel: {
          //     color: "#000", //刻度线标签颜色
          //     formatter: '{value}'
          //   }
          // }
        ],
        series: [
          {
            name: this.echartsData.zhuXname[1],
            type: 'bar',
            stack: '总数',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45, 49, 78, 45],
            barWidth :'38',
          },
          {
            name: this.echartsData.zhuXname[2],
            type: 'bar',
            stack: '总数',
            data: [39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4,40,2,4],
            itemStyle:{color: '#626c91'}
          },
          {
            name: this.echartsData.zhuXname[3],
            type: 'bar',
            stack: '总数',
            data:[48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14,3,22,4],
            itemStyle:{color:'#c4ebad'}
          },
          {
            name: this.echartsData.zhuXname[0],
            type: 'line',
            // yAxisIndex: 1,
            data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37,41,43,7],
            itemStyle:{color: '#FFDC35'}
          },
          /* {
            name: '平均值2倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#6be6c1'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          }, */
        ]
      };
      this.oneEcharts.setOption(option);
      /* this.items[index].echart.on('click', (params) => {
        let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        this.echartsData.scheduledUpdatesType = 0
        this.echartsData.scheduledUpdatesName = this.months[index]
        this.echartsData.scheduledUpdatesToggle = false
        this.echartsData.scheduledUpdatesXName=params.name
        console.log(this.echartsData.scheduledUpdatesXName)
      }); */
      this.oneEcharts.getZr().on('click', (params) => {

        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.oneEcharts.containPixel('grid',pointInPixel)) {
        let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.echartsData.scheduledUpdatesType = 0
        //console.log(option.xAxis[0].data[xIndex])
        this.echartsData.scheduledUpdatesXName+= option.xAxis[0].data[xIndex]
        this.echartsData.scheduledUpdatesToggle = 2
        //this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex]
      }
        
      });
      
    
  }



}

//echarts详情组件
@Component({
  selector: 'app-detailedInformation',
  templateUrl: './detailedInformation.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class detailedInformationComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.oneInit()
    },0)
  }

  ngOnDestroy () {
    this.example.dispose()
    this.example.clear()
  }
  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]

  example:any;
  oneInit () {
    this.example = echarts.init(document.getElementById('center'), 'skinUpp');
    if (this.echartsData.scheduledUpdatesType ===0) { //已核查
      var option = {
        title: {
          text: `${this.echartsData.scheduledUpdatesName}${this.echartsData.scheduledUpdatesXName}总数（699）`,
          top: -2,
          right: 655,
          textStyle:{
            color:'#000',
            fontSize: 30,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize :18
          }
        },
        legend: {
          //data: ['平均值','维护无需修改', '维护修改', '维护通过审核'],
          data:this.echartsData.zhuXname,
          textStyle: { color: '#000',fontSize: 16 }
        },
        xAxis: [{
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            axisLabel: {
              textStyle:{
                fontSize :18,
                color:'#000000'
              },
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
        ],
        series: [
          {
            name: this.echartsData.zhuXname[1],
            type: 'bar',
            stack: '总数',
            barWidth :'38',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
          },
          {
            name: this.echartsData.zhuXname[2],
            type: 'bar',
            stack: '总数',
            data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
            itemStyle:{color: '#626c91'}
          },
          {
            name: this.echartsData.zhuXname[3],
            type: 'bar',
            stack: '总数',
            data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
            itemStyle:{color:'#c4ebad'}
          },
          {
            name: this.echartsData.zhuXname[0],
            type: 'line',
            // yAxisIndex: 1,
            data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
            itemStyle:{color: '#FFDC35'}
          },
          {
            name: '与上个月环比',
            type: 'line',
            // yAxisIndex: 1,
            data: [40, 30, 40, 30, 40, 20, 15, 5, 10,15, 6, 15, 12],
            //itemStyle:{color: '#6be6c1'},
            
          },
          {
               name: '警报',
               type: 'effectScatter',
               //coordinateSystem: 'cartesian2d',
               data: [40, 30, 40, 30, 40, 20, 15, 5, 10,15, 6, 15, 12], //2d坐标系
               symbolSize:30,
               itemStyle: {
                normal: {
                    color: 'red',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
               /* showEffectOn: 'render',
               rippleEffect: {
                   brushType: 'stroke'
               },
               hoverAnimation: true,
               itemStyle: {
                   normal: {
                       color: 'red',
                       shadowBlur: 10,
                       shadowColor: '#333'
                   }
               },
               zlevel: 1 */
          },
          /* {
            name: '平均值2倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#6be6c1'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            // yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          }, */
        ]
      };
      this.example.setOption(option);
    } else { //未核查
      var options = {
        grid: {
          left:90
        },
        title: {
          text: this.echartsData.scheduledUpdatesName,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 30,
          },
        },
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize: 18
          },
          axisPointer: {
              type: 'shadow'
          }
        },
        legend: {
          data: ['剩余未核查','总数'],
          textStyle: { color: '#000',fontSize: 16 }
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
        },
        yAxis: {
          type: 'category',
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000"},
          },
          axisLabel: {
            textStyle:{
              fontSize :18,
              color:'#000000'
            },
            color: "#000", //刻度线标签颜色
            formatter: '{value}'
          },
          data:  ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'],
        },
        series: [
          {
            name: '剩余未核查',
            type: 'bar',
            stack: '差值',
            data: [13, 19, 21, 27, 35, 39, 41, 43, 47, 47, 49, 50, 51],
            itemStyle:{color:'#C80000'},
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff'
            },
          },
          {
            name: '总数',
            type: 'bar',
            stack: '差值',
            data: [120, 130, 170, 141, 194, 147, 109, 142, 174, 100, 125, 131, 120],
            itemStyle:{color:'#999'},
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff'
            },
          },
        ]
      };
      this.example.setOption(options);
    }
  }



}



//更多资讯组件
@Component({
  selector: 'app-moreTable',
  templateUrl: './moreTable.html',
  styleUrls: ['./scheduled-updates.component.scss']
})
export class moreTableComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {

  }

  displayedColumns: string[]=['team','header','time'];
  dataSource:any = [
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'}
  ]



}